:root{font-family:SF Pro Text,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#1d1d1f;background:#f5f5f7;font-synthesis:none;--primary: #0066cc;--primary-focus: #0071e3;--primary-dark: #2997ff;--ink: #1d1d1f;--muted: #7a7a7a;--canvas: #ffffff;--paper: #f5f5f7;--hairline: #e0e0e0;--black: #000000}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%}body{overflow-x:hidden}button,a{font:inherit}button{min-width:44px;min-height:44px}a{color:inherit;text-decoration:none}.app{min-height:100vh;background:var(--paper)}.topbar{height:52px;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:44px 1fr auto;align-items:center;background:#f5f5f7d1;border-bottom:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.brand{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--black);color:#fff;font-size:12px;font-weight:600}.topbar nav{justify-self:center;display:flex;height:100%}.topbar nav a{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;font-size:12px;letter-spacing:-.12px}.topbar nav a span{color:var(--muted)}.topbar nav a b{font-weight:400}.topbar nav a[aria-current=page]:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--primary)}.pause{padding:7px 15px;border:0;border-radius:9999px;background:var(--primary);color:#fff;font-size:12px;cursor:pointer}.pause:active,.palette button:active{transform:scale(.95)}.pause:focus-visible,.palette button:focus-visible,.topbar a:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}.intro{position:absolute;top:84px;left:max(32px,6vw);z-index:8;pointer-events:none;max-width:460px;color:#fff}.demo-scroll .intro,.demo-float .intro,.demo-gradient .intro{color:var(--ink)}.eyebrow{margin:0 0 10px;color:var(--primary-dark);font-size:12px;font-weight:600;letter-spacing:.08em}.demo-scroll .eyebrow,.demo-float .eyebrow{color:var(--primary)}.intro h1{margin:0;font-family:SF Pro Display,system-ui,sans-serif;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.03em;font-weight:600}.hint{margin:16px 0 0;font-size:17px;line-height:1.47;letter-spacing:-.374px;opacity:.75}.stage{position:relative;width:100%;height:min(88vh,920px);min-height:650px;overflow:hidden}.stage canvas{display:block}.stage-dark{background:var(--black)}.stage-paper{background:var(--paper)}.stage-gallery{background:#fafafc}.stage-note{position:absolute;right:6vw;bottom:9vh;color:#fff;text-align:right;pointer-events:none}.stage-note span{font-size:10px;letter-spacing:.16em;color:#ccc}.stage-note p{margin:8px 0 0;font-size:17px}.scroll-stage>div:first-child{position:absolute!important;inset:0}.scroll-copy{position:absolute;left:7vw;width:min(70vw,760px);color:var(--ink)}.scroll-copy small{color:var(--primary);letter-spacing:.14em}.scroll-copy h2{margin:12px 0;font-family:SF Pro Display,system-ui,sans-serif;font-size:clamp(42px,8vw,96px);line-height:.98;letter-spacing:-.035em}.scroll-copy-a{top:60vh}.scroll-copy-b{top:178vh;left:28vw;text-align:right}.scroll-copy-c{top:274vh}.scroll-marker{position:absolute;right:28px;bottom:30px;color:var(--muted);font-size:10px;line-height:1.8;text-align:center;letter-spacing:.14em;pointer-events:none}.material-caption{position:absolute;left:6vw;bottom:7vh;max-width:340px;pointer-events:none}.material-caption b{font-size:10px;letter-spacing:.14em;color:var(--primary)}.material-caption p{margin:10px 0 0;font-size:17px;line-height:1.47}.gradient-stage{background:var(--black)}.gradient-copy{position:absolute;inset:auto auto 6vh 6vw;z-index:3;max-width:min(860px,88vw);padding:24px;border-radius:18px;color:#fff;background:#0000009e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}.gradient-copy small{font-size:10px;letter-spacing:.16em}.gradient-copy h2{max-width:760px;margin:14px 0 24px;font-family:SF Pro Display,system-ui,sans-serif;font-size:clamp(42px,7vw,82px);line-height:1.02;letter-spacing:-.03em;word-break:keep-all}.palette{display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto}.palette button{padding:10px 18px;border:1px solid rgba(255,255,255,.55);border-radius:9999px;color:#fff;background:#00000038;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.palette button[aria-pressed=true]{background:#fff;color:var(--ink)}.loading,.fallback{height:min(88vh,920px);min-height:650px;display:grid;place-content:center;text-align:center;background:var(--black);color:#fff}.fallback span{font-size:64px;color:var(--primary-dark)}.fallback strong{margin-top:12px;font-size:21px}.fallback p{color:#ccc;font-size:17px}footer{min-height:96px;padding:32px 6vw max(32px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px;color:#333;background:var(--paper);font-size:12px}@media(max-width:833px){.topbar{grid-template-columns:40px 1fr auto}.topbar nav a{padding:0 8px}.topbar nav a b{display:none}.topbar nav a[aria-current=page]:after{left:8px;right:8px}.intro{top:82px;left:24px;right:24px}.intro h1{font-size:clamp(34px,10vw,52px)}.hint{font-size:14px}.stage{height:82vh;min-height:600px}.stage-note,.material-caption{left:24px;right:24px;bottom:26px;text-align:left}.gradient-copy{inset:auto 24px 28px;max-width:none;padding:18px}.gradient-copy h2{font-size:clamp(34px,11vw,56px)}.scroll-copy{left:24px;width:calc(100vw - 48px)}.scroll-copy-b{left:24px;text-align:left}footer{padding-inline:24px;flex-direction:column}}@media(max-width:419px){.pause{width:44px;padding:0;font-size:0}.pause:before{content:"Ⅱ";font-size:13px}.pause[aria-pressed=true]:before{content:"▶"}.intro h1{font-size:34px}.hint{max-width:260px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.finish-controls{display:flex;gap:8px;pointer-events:auto}.finish-controls button{min-height:44px;padding:10px 16px;border:1px solid var(--muted);border-radius:9999px;background:var(--paper);color:var(--ink);cursor:pointer}.finish-controls button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}.finish-controls button:focus-visible{outline:2px solid var(--primary-focus);outline-offset:3px}.demo-float .material-caption{max-width:none}