:root{--color-bg: #121212;--color-surface: #1e1e1e;--color-surface-2: #2a2a2a;--color-gutter: #0b0b0d;--color-text: #e8e8e8;--color-text-muted: #9a9a9a;--color-accent: #bdbdbd;--color-border: #3a3a3a;--color-bubble-bg: #ffffff;--color-bubble-text: #111111;--color-narration-bg: #f3f0e6;--color-narration-text: #111111;--color-caption-bg: rgba(0,0,0,.72);--color-caption-text: #ffffff;--kw-terratopia: #6b6b6b;--kw-ignis: #6b6b6b;--kw-hydrosia: #4d6a85;--kw-aero-nebula: #7a8a99;--kw-umbra-nox: #555555;--kw-great-tree: #8a7a50;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-lettering: system-ui, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--gap-small: 8px;--gap-medium: 48px;--gap-long: 160px;--gutter-bubble: 88px;--radius: 8px;--motion-fast: .15s;--motion-med: .3s;--motion-ease: cubic-bezier(.2,.7,.2,1)}@media (prefers-reduced-motion: reduce){:root{--motion-fast: 0ms;--motion-med: 0ms}}[data-skin=light]{--color-bg:#f4f4f4;--color-surface:#fff;--color-surface-2:#e6e6e6;--color-text:#111;--color-text-muted:#555;--color-border:#ccc}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui)}button{font:inherit;color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);cursor:pointer}button[aria-pressed=true]{background:var(--color-accent);color:var(--color-bg)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-2);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.topbar .pos{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-muted)}.stage{flex:1;min-height:0;position:relative}.mockup-ph{font-size:var(--text-xs);color:var(--color-text-muted);border:1px dashed var(--color-border);padding:2px 6px;border-radius:4px}.bubble{position:absolute;max-width:70%;background:var(--color-bubble-bg);color:var(--color-bubble-text);font-family:var(--font-lettering);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:16px;box-shadow:0 1px 3px #0006}.narration{position:absolute;left:4%;bottom:4%;max-width:80%;background:var(--color-narration-bg);color:var(--color-narration-text);font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.kw{font-weight:700}.scroll{height:100%;overflow-y:auto;overflow-x:hidden;background:var(--color-gutter, #0b0b0d)}.scroll .panel{position:relative;width:100%;max-width:none;margin:0;padding:0}.scroll .panel .art{position:relative}.scroll .panel.gutter-top{padding-top:var(--gutter-bubble)}.scroll .panel.gutter-bottom{padding-bottom:var(--gutter-bubble)}.bubble.in-gutter.anchor-gutter-top{bottom:100%;transform:translateY(35%)}.bubble.in-gutter.anchor-gutter-bottom{top:100%;transform:translateY(-35%)}.scroll .bubble{border-radius:50%;padding:var(--space-3) var(--space-4, 20px);text-align:center;max-width:60%;z-index:1}.scroll .bubble:after{content:"";position:absolute;left:30%;border:9px solid transparent}.scroll .bubble.anchor-gutter-top:after,.scroll .bubble.anchor-overlay:after{top:100%;margin-top:-2px;border-top-color:var(--color-bubble-bg);border-bottom:0}.scroll .bubble.anchor-gutter-bottom:after{bottom:100%;margin-bottom:-2px;border-bottom-color:var(--color-bubble-bg);border-top:0}.scroll .panel img{display:block;width:100%;height:auto;background:var(--color-surface-2)}.gap-small{margin-bottom:var(--gap-small)}.gap-medium{margin-bottom:var(--gap-medium)}.gap-long{margin-bottom:var(--gap-long)}.flip{height:100%;display:flex;flex-direction:column}.spread{flex:1;min-height:0;padding:var(--space-2);touch-action:none;-webkit-user-select:none;user-select:none;perspective:1800px;overflow:hidden}.spread-inner{height:100%;display:flex;justify-content:center;align-items:center;gap:0;transform-style:preserve-3d;transform:rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));transition:transform .12s linear;will-change:transform}.flip.rtl .spread-inner{flex-direction:row-reverse}.page-box{position:relative;height:100%;aspect-ratio:2/3;max-width:100%;transform-style:preserve-3d}.spread.double .page-box{max-width:50%}.page,.page-face-content,.page-blank{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-surface)}.page-blank{background:transparent}.cover{display:flex;align-items:center;justify-content:center;background:var(--color-surface-2)}.cover img{width:100%;height:100%;object-fit:cover}.leaf{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;transform-style:preserve-3d;will-change:transform;--curl: 0}.leaf-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 0 calc(var(--curl) * 24px) #0009}.leaf-face.back{transform:rotateY(180deg);background:var(--color-surface)}.leaf-face .shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:var(--curl);background:linear-gradient(90deg,#00000059,#ffffff14 55%,#00000040)}.spread.fade .spread-inner{animation:flipfade .22s ease-out}@keyframes flipfade{0%{opacity:0}to{opacity:1}}.spine{position:relative;height:22px;margin:0 var(--space-2);background:var(--color-surface-2);border-radius:4px;touch-action:none;cursor:ew-resize}.spine i{position:absolute;top:7px;width:2px;height:8px;background:var(--color-border);transform:translate(-1px)}.spine i.on{background:var(--color-accent);height:14px;top:4px;width:4px}.scrub-pop{position:absolute;bottom:28px;transform:translate(-50%);background:var(--color-surface);border:1px solid var(--color-border);padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--text-sm);pointer-events:none;z-index:10}.scrub-pop img{width:72px;height:96px;object-fit:cover}@media (prefers-reduced-motion: reduce){.spread-inner{transform:none;transition:none}}.slot{position:absolute;overflow:hidden;border:2px solid var(--color-bg);padding:0;border-radius:0;background:var(--color-surface-2)}.slot img{width:100%;height:100%;object-fit:cover;display:block}.slot.current{outline:3px solid var(--color-accent);outline-offset:-3px;z-index:1}.slot .bubble{font-size:9px;padding:2px 5px}.controls{display:flex;gap:var(--space-2);justify-content:center;align-items:center;padding:var(--space-2);background:var(--color-surface);font-size:var(--text-sm)}.watch{height:100%;display:flex;flex-direction:column}.screen{flex:1;min-height:0;position:relative;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}.screen img{max-width:100%;max-height:100%;will-change:transform;transform-origin:center}.captions{position:absolute;left:0;right:0;bottom:0;padding:var(--space-3);background:var(--color-caption-bg);color:var(--color-caption-text);font-size:var(--text-md)}.captions .speaker{color:var(--color-text-muted);font-size:var(--text-xs)}.tapzone{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:0;border-radius:0}.progress{height:3px;background:var(--color-surface-2)}.progress>div{height:100%;background:var(--color-accent)}.flip img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}