@layer pages{.breakout-story-prompt{z-index:3;padding:var(--space-base);background:var(--breakout-game-field);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.breakout-story-prompt-card{width:100%;max-height:100%;padding:var(--space-base);border:1px solid var(--breakout-rule);border-top:2px solid var(--breakout-accent);border-radius:var(--breakout-ui-radius);background:var(--breakout-panel);color:var(--breakout-ink);font:var(--font-size-sm) / 1.6 var(--font-body);overflow-y:auto}.breakout-story-prompt-card h2{color:var(--breakout-accent);font:700 var(--font-size-base) / 1.3 var(--font-body);margin:0}.breakout-story-prompt-card p{margin:0;margin-top:var(--space-sm);white-space:pre-wrap;overflow-wrap:anywhere}.breakout-story-summary{scrollbar-width:thin;max-height:42cqh;margin-top:var(--space-base);border-top:1px solid var(--breakout-rule);padding-top:var(--space-xs);overflow-y:auto}.breakout-story-summary h3{color:var(--breakout-muted);font:700 var(--font-size-xs) / 1.4 var(--font-body);margin:0}.breakout-story-prompt-actions{gap:var(--space-xs);margin-top:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.breakout-story-prompt-actions button{min-height:var(--breakout-touch-control-height);padding:var(--space-xs);border:1px solid var(--breakout-rule);border-radius:var(--breakout-ui-radius);background:var(--breakout-paper);color:var(--breakout-ink);font:700 var(--font-size-xs) / 1.2 var(--font-body);cursor:pointer}.breakout-story-prompt-actions .is-primary{border-color:var(--breakout-accent);background:var(--breakout-accent);color:var(--breakout-action-ink)}.breakout-story-prompt button:focus-visible{outline:2px solid var(--breakout-accent);outline-offset:2px}.breakout-story-dialog{touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:100%;height:100dvh;color:var(--color-breakout-ui-text);font-family:var(--font-body);background:0 0;justify-content:center;display:flex;position:fixed;inset:0;overflow:hidden}.breakout-story-dialog.is-ready{background:var(--color-netsuki-black);animation:storyFadeIn var(--story-fade-duration) var(--ease-out) both}.breakout-story-dialog.is-closing{opacity:0;transition:opacity var(--story-fade-duration) var(--ease-out);animation:none}.breakout-story-stage{box-sizing:border-box;zoom:var(--breakout-display-scale,1);width:360px;height:100%;margin-inline:auto;position:relative;overflow:hidden;container-type:size}.breakout-story-artboard{width:min(100%, calc(100cqh * var(--story-width) / var(--story-height)));aspect-ratio:var(--story-width) / var(--story-height);cursor:pointer;animation:storyFadeIn var(--story-fade-duration) var(--ease-out) var(--story-fade-duration) both;margin-inline:auto;position:absolute;top:50%;left:0;right:0;translate:0 -50%}.breakout-story-scene{position:absolute;inset:0}.breakout-story-image{object-fit:contain;user-select:none;width:100%;height:100%;position:absolute;inset:0}.breakout-story-figure{box-sizing:border-box;width:auto;height:100%;aspect-ratio:var(--portrait-width) / var(--portrait-height);position:absolute;bottom:0}.breakout-story-figure[data-slot=left]{left:0}.breakout-story-figure[data-slot=center]{left:50%;translate:-50%}.breakout-story-figure[data-slot=right]{right:0}.breakout-story-portrait{user-select:none;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.breakout-story-overlay{user-select:none;pointer-events:none;height:auto;position:absolute}.breakout-story-ui{--story-dialogue-height:calc(2.5 * var(--space-2xl));--story-ui-inset:var(--space-xs);--story-dialogue-width:calc(100cqw - 2 * var(--story-ui-inset) - 2 * var(--space-base) - 2px);--story-dialogue-fit:calc(var(--story-dialogue-width) / 21);--story-heading-height:var(--space-2xl);--story-ui-padding-top:max(var(--story-ui-inset), env(safe-area-inset-top));--story-ui-padding-bottom:max(var(--story-ui-inset), env(safe-area-inset-bottom));pointer-events:none;box-sizing:border-box;height:100%;padding:var(--space-xs);padding-bottom:max(var(--space-xs), env(safe-area-inset-bottom));padding-top:max(var(--space-xs), env(safe-area-inset-top));animation:storyFadeIn var(--story-fade-duration) var(--ease-out) var(--story-fade-duration) both;flex-direction:column;justify-content:space-between;display:flex;position:relative}.breakout-story-heading,.breakout-story-bottom,.breakout-story-inset,.breakout-story-notice-backdrop,.breakout-story-notice{pointer-events:auto}.breakout-story-ui:has(~.breakout-story-log){visibility:hidden}.breakout-story-heading{z-index:1;justify-content:space-between;align-items:center;gap:var(--space-xs);height:var(--story-heading-height);box-sizing:border-box;padding:var(--space-2xs) var(--space-xs);background:var(--breakout-story-surface);border:1px solid var(--breakout-rule);border-left:2px solid var(--breakout-accent);border-radius:var(--breakout-ui-radius);flex-shrink:0;display:flex;position:relative}.breakout-story-heading>div{flex:1;min-width:0}.breakout-story-heading h2{margin:0;margin-top:var(--space-2xs);font:700 var(--font-size-sm) / 1.2 var(--font-body);color:var(--breakout-ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.breakout-story-eyebrow,.breakout-story-position{color:var(--breakout-accent);font:700 var(--font-size-2xs) / 1.2 var(--font-body);letter-spacing:.1em}.breakout-story-bottom{box-sizing:border-box;flex-shrink:0;width:100%;margin:0 auto;position:relative}.breakout-story-dialogue{box-sizing:border-box;width:100%;height:var(--story-dialogue-height);padding:var(--space-sm) var(--space-base);border:1px solid var(--breakout-rule);border-radius:var(--breakout-ui-radius);background:var(--breakout-story-surface);color:var(--color-breakout-ui-text);font:inherit;font-size:calc(min(var(--font-size-base), var(--story-dialogue-fit)));border-top:2px solid var(--breakout-accent);text-align:left;line-height:var(--line-height-body);cursor:pointer;grid-template-rows:minmax(0,1fr);display:grid;position:relative;overflow:hidden}.breakout-story-inset{inset:calc(var(--story-ui-padding-top) + var(--story-heading-height) + var(--space-sm)) var(--story-ui-inset) auto auto;width:min(calc(100% - 2 * var(--space-base)), calc(6 * var(--space-2xl)), 32cqh);box-sizing:border-box;padding:var(--space-xs);border:1px solid var(--breakout-rule);border-radius:var(--breakout-ui-radius);background:var(--breakout-story-surface);animation:storyInsetIn .24s var(--ease-out) both;margin:0;position:absolute}.breakout-story-inset figcaption{height:var(--space-lg);justify-content:space-between;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-2xs);color:var(--breakout-muted);font:700 var(--font-size-2xs) / 1.2 var(--font-body);display:flex}.breakout-story-inset figcaption strong{min-width:0;color:var(--breakout-accent);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.breakout-story-inset-view{position:relative}.breakout-story-inset canvas{aspect-ratio:280/144;background:var(--breakout-game-field);width:100%;height:auto;display:block}.breakout-story-inset p{padding:var(--space-xs);background:var(--breakout-story-surface);font-size:var(--font-size-sm);text-align:center;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;inset:0}.breakout-story-notice-backdrop{cursor:pointer;background:0 0;border:0;position:absolute;inset:0}.breakout-story-notice{box-sizing:border-box;width:min(100% - 2 * var(--space-base), calc(2 * var(--content-max-width)));padding:var(--space-lg) var(--space-sm);border:1px solid var(--breakout-accent);border-radius:var(--breakout-ui-radius);background:var(--breakout-story-surface);color:var(--color-breakout-ui-text);font:inherit;font-size:var(--font-size-base);line-height:var(--line-height-body);text-align:center;cursor:pointer;animation:storyNoticeIn var(--story-fade-duration) var(--ease-out) both;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.breakout-story-notice-name{margin:var(--space-xs) 0 var(--space-base);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-breakout-ui-border);color:var(--color-breakout-ui-accent);font-size:var(--font-size-lg);font-weight:700}@media (width>=640px){.breakout-story-notice{padding:var(--space-lg) var(--space-xl)}.breakout-story-notice-name{font-size:var(--font-size-xl)}}.breakout-story-notice-text,.breakout-story-log-text{white-space:pre-wrap;overflow-wrap:anywhere}.breakout-story-notice:focus-visible{outline:2px solid var(--breakout-accent);outline-offset:2px}.breakout-story-dialogue[hidden]{visibility:hidden}.breakout-story-speaker{top:calc(-1 * var(--space-xs));left:var(--space-base);z-index:1;max-width:calc(100% - 2 * var(--space-base));box-sizing:border-box;padding:var(--space-2xs) var(--space-xs);border-radius:var(--breakout-ui-radius);background:var(--breakout-accent);color:var(--breakout-action-ink);font:700 var(--font-size-xs) / 1.2 var(--font-body);white-space:nowrap;text-overflow:ellipsis;position:absolute;overflow:hidden}.breakout-story-speaker:empty,.breakout-story-speaker[hidden]{display:none}.breakout-story-text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;min-height:0;display:block;overflow:hidden}.breakout-story-next-hint{inset:auto var(--space-xs) var(--space-xs) auto;width:var(--space-sm);height:var(--space-sm);background:var(--color-breakout-ui-accent);clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;position:absolute}.breakout-story-next-hint[data-ready=true]{animation:1s steps(2,jump-none) infinite storyHintBlink}.breakout-story-auto-gauge{background:var(--color-breakout-ui-accent);transform-origin:0;height:2px;animation:storyAutoGauge var(--story-auto-ms) linear both;position:absolute;inset:auto 0 0}@keyframes storyHintBlink{0%{opacity:0}to{opacity:1}}@keyframes storyAutoGauge{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.breakout-story-controls{gap:var(--space-2xs);margin-top:var(--space-xs);padding:var(--space-2xs);border:1px solid var(--breakout-rule);border-radius:var(--breakout-ui-radius);background:var(--breakout-story-surface);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.breakout-story-position{color:var(--breakout-muted);font-variant-numeric:tabular-nums;letter-spacing:0}.breakout-story-control{justify-content:center;align-items:center;gap:var(--space-2xs);min-width:0;min-height:var(--breakout-touch-control-height);padding:var(--space-2xs) var(--space-xs);border-radius:var(--breakout-ui-radius);color:var(--breakout-ink);font:700 var(--font-size-xs) / 1.2 var(--font-body);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;display:inline-flex}.breakout-story-controls .breakout-story-control{flex-direction:column}.breakout-story-control:where([aria-pressed=true]){border-color:var(--breakout-accent);background:var(--breakout-accent-soft);color:var(--breakout-accent)}.breakout-story-icon{width:var(--space-base);height:var(--space-base);flex:none}.breakout-story-caption{justify-content:space-between;align-items:center;gap:var(--space-xs);display:flex}.breakout-story-dialogue:focus-visible{box-shadow:inset 0 0 0 2px var(--breakout-accent);outline:none}.breakout-story-control:focus-visible{outline:2px solid var(--breakout-accent);outline-offset:2px}@media (any-hover:hover){.breakout-story-control:hover{border-color:var(--color-breakout-ui-accent)}}.breakout-story-restore{cursor:pointer;background:0 0;border:0;width:100%;position:absolute;inset:0}.breakout-story-log{z-index:2;background:var(--breakout-story-backdrop);animation:storyFadeIn var(--story-fade-duration) var(--ease-out) both;flex-direction:column;display:flex;position:absolute;inset:0}.breakout-story-log-heading{z-index:1;justify-content:space-between;align-items:center;gap:var(--space-xs);padding:var(--space-base) var(--space-lg);flex-shrink:0;display:flex;position:sticky;top:0}.breakout-story-log-title{color:var(--color-breakout-ui-accent);font-size:var(--font-size-xs)}.breakout-story-log-list{min-height:0;padding:0 var(--space-lg) var(--space-base);flex:auto;margin:0;list-style:none;overflow-y:auto}@media (width<640px){.breakout-story-log-heading{padding:var(--space-base)}.breakout-story-log-list{padding:0 var(--space-base) var(--space-base)}}.breakout-story-log-line{max-width:calc(2 * var(--content-max-width));padding:var(--space-sm) 0;border-bottom:1px solid var(--color-breakout-ui-border);margin:0 auto}.breakout-story-log-line:last-child{border-bottom:0}.breakout-story-log-speaker{margin-bottom:var(--space-2xs);color:var(--color-breakout-ui-accent);font-size:var(--font-size-sm);font-weight:700;display:block}.breakout-story-log-text{font-size:var(--font-size-base);line-height:var(--line-height-body);margin:0}.breakout-story-loading{box-sizing:border-box;border:1px solid var(--color-breakout-ui-border);border-radius:var(--breakout-ui-radius);background:var(--breakout-story-surface);width:max-content;max-width:90%;padding:var(--space-lg);font-size:var(--font-size-base);text-align:center;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}@keyframes storyNoticeIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.94)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes storyFadeIn{0%{opacity:0}to{opacity:1}}@keyframes storyInsetIn{0%{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0)}}@media (prefers-reduced-motion:reduce){.breakout-story-dialog,.breakout-story-dialog.is-ready,.breakout-story-dialog.is-closing,.breakout-story-artboard,.breakout-story-ui,.breakout-story-inset,.breakout-story-notice,.breakout-story-log,.breakout-story-auto-gauge{transition:none;animation:none}.breakout-story-next-hint[data-ready=true]{opacity:1;animation:none}}}