@font-face{font-family:Syne Fallback;font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:104.3%;ascent-override:88.7%;descent-override:26.4%;line-gap-override:0%}@font-face{font-family:Syne Fallback;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:113.5%;ascent-override:81.5%;descent-override:24.2%;line-gap-override:0%}@font-face{font-family:Syne Fallback;font-weight:800;src:local("Arial Black"),local("Arial-Black"),local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:115%;ascent-override:80.4%;descent-override:23.9%;line-gap-override:0%}@font-face{font-family:IBM Plex Sans Fallback;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");size-adjust:100.7%;ascent-override:101.8%;descent-override:27.3%;line-gap-override:0%}@font-face{font-family:IBM Plex Mono Fallback;src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono");size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}:root{--bg: #F3F0EA;--panel: #FCFBF8;--ink: #1B1A17;--muted: #68645C;--line: #DFD9CE;--copper: #C4703A;--brass: #D4A64A;--accent: #C4703A;--accent-ink: #FFFFFF;--stage-hi: #FFFEFB;--stage-lo: #E4DDD0;--blueprint: #2C5A8C;--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.28'/></svg>");--shadow-soft: 0 1px 2px rgb(40 30 10 / .06), 0 8px 24px -8px rgb(40 30 10 / .14);--track: color-mix(in srgb, var(--ink) 16%, transparent);--font-display: "Syne", "Syne Fallback", sans-serif;--font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;color-scheme:light dark}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0B1622;--panel: #0F1D2C;--ink: #E6EDF5;--muted: #8C9DB2;--line: #1F3348;--copper: #E0915A;--brass: #E0B65C;--accent: #E0915A;--accent-ink: #0B1622;--stage-hi: #173250;--stage-lo: #07101A;--blueprint: #7CC8F2;--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.12'/></svg>");--shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -10px rgb(0 0 0 / .6)}}:root[data-theme=dark]{--bg: #0B1622;--panel: #0F1D2C;--ink: #E6EDF5;--muted: #8C9DB2;--line: #1F3348;--copper: #E0915A;--brass: #E0B65C;--accent: #E0915A;--accent-ink: #0B1622;--stage-hi: #173250;--stage-lo: #07101A;--blueprint: #7CC8F2;--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.12'/></svg>");--shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -10px rgb(0 0 0 / .6);color-scheme:dark}:root[data-theme=light]{color-scheme:light}*{box-sizing:border-box}html,body{height:100%}::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}@view-transition{navigation: auto;}::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}@media (prefers-reduced-motion: reduce){@view-transition{navigation: none;}}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5}a{color:inherit}.kicker{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:10px 16px;border-radius:8px;font:500 14px/1.2 var(--font-body);cursor:pointer;touch-action:manipulation}.btn:hover:not(:disabled){border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,.step:focus-visible,a:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--accent);touch-action:pan-y}input[type=range]:focus-visible{outline-offset:0;border-radius:6px}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--fill, 0%),var(--track) 0)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent),0 1px 3px #00000040}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent),0 1px 3px #00000040}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}.app{display:grid;grid-template-columns:1fr 360px;height:100%;min-height:560px}.stage{position:relative;overflow:hidden;background:var(--grain),radial-gradient(115% 85% at 50% 42%,var(--stage-hi) 0%,var(--bg) 52%,var(--stage-lo) 100%)}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage>.brand,.stage>.hud{z-index:2}.callouts{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease}.callouts.on{opacity:1}.callout-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.callout-lines .leader{fill:none;stroke:color-mix(in srgb,var(--ink) 62%,transparent);stroke-width:1.2;stroke-dasharray:1;stroke-linejoin:round}.callouts.draw .leader{animation:callout-draw .7s cubic-bezier(.3,.6,.2,1) both}.callout-dot{fill:var(--accent);stroke:var(--panel);stroke-width:1.5}.callout-halo{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:callout-halo 2s ease-out infinite}.callout-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;padding:4px 13px 4px 4px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft);font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink);will-change:transform}.callouts.draw .callout-label{animation:callout-in .5s .25s cubic-bezier(.2,.8,.2,1) both}.callout-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:10px;letter-spacing:0;font-variant-numeric:tabular-nums}@keyframes callout-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes callout-halo{0%{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}@keyframes callout-in{0%{opacity:0;clip-path:inset(0 100% 0 0 round 999px)}to{opacity:1;clip-path:inset(0 0 0 0 round 999px)}}@media (max-width: 800px){.callout-label{font-size:9.5px;gap:6px;padding:3px 10px 3px 3px}.callout-n{width:18px;height:18px;font-size:9px}}@media (prefers-reduced-motion: reduce){.callouts.draw .leader,.callouts.draw .callout-label,.callout-halo{animation:none}}.brand{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:20px;pointer-events:none}.brand a{text-decoration:none;pointer-events:auto}.crumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.home-link{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 13px/1 var(--font-body);color:var(--ink);transition:border-color .15s,transform .15s}.home-link:hover svg{transform:translate(-2px)}.home-link svg{transition:transform .15s}.home-link:before{content:"";position:absolute;top:-4px;right:-2px;bottom:-4px;left:-2px}.home-link:hover{border-color:var(--accent)}.home-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brand h1{font:800 clamp(30px,3.8vw,54px)/1 var(--font-display);letter-spacing:-.015em;margin:12px 0 0;max-width:60%;text-wrap:balance}.brand:has(.readout) :is(.crumbs,h1){max-width:calc(100% - 240px)}.brand h1{text-shadow:0 0 10px var(--bg),0 0 4px var(--bg)}.crumbs .kicker{white-space:nowrap;padding:6px 8px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent)}.readout{position:absolute;top:0;right:0;margin:0;display:grid;gap:6px;padding:12px 14px;min-width:170px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft)}.readout div{display:flex;justify-content:space-between;gap:12px}.readout dt{font:500 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.readout dd{margin:0;font:500 13px/1.4 var(--font-mono);font-variant-numeric:tabular-nums}.hud{position:absolute;left:max(20px,env(safe-area-inset-left));right:20px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hud label,.step .n,.part{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.play{width:44px;padding:0;border-radius:50%;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)}.play svg{width:20px;height:20px;fill:currentColor}.play[aria-pressed=true] .i-play,.play[aria-pressed=false] .i-pause{display:none}.controls-toggle{display:none;border-radius:999px}.controls-toggle svg{width:18px;height:18px;fill:var(--panel);stroke:currentColor;stroke-width:2;stroke-linecap:round}.hud-controls{display:flex;gap:10px;flex-wrap:wrap}.control{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;background:color-mix(in srgb,var(--panel) 78%,transparent);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control output{font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;min-width:4ch;color:var(--ink)}.panel{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding-right:env(safe-area-inset-right)}.panel-head{padding:20px 20px 14px;border-bottom:1px solid var(--line)}.panel-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.count{font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}.progress{height:4px;margin-top:12px;border-radius:2px;background:var(--track);overflow:hidden}.progress:before{content:"";display:block;height:100%;width:var(--progress, 0%);background:var(--accent);border-radius:inherit;transition:width .3s ease}.hint{color:var(--muted);font-size:13px;margin:10px 0 0}.keys{display:none;color:var(--muted);font-size:12px;margin:6px 0 0}.keys kbd{display:inline-block;min-width:20px;text-align:center;font:500 12px/1 var(--font-body);padding:2px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--bg);color:var(--ink)}@media (hover: hover) and (pointer: fine) and (min-width: 801px){.keys{display:block}}.steps{overflow:auto;padding:8px 0;flex:1;min-height:0;overscroll-behavior:contain}.step{--rail: var(--line);position:relative;display:grid;grid-template-columns:26px 1fr;gap:14px;width:100%;min-height:44px;text-align:left;padding:12px 20px;border:0;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;transition:background-color .2s}.step:before{content:"";position:absolute;left:32.5px;top:0;bottom:0;width:1px;background:var(--rail)}.step:first-child:before{top:24px}.step:last-child:before{bottom:calc(100% - 24px)}.step.done{--rail: var(--accent)}.step:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}.step.active{background:color-mix(in srgb,var(--accent) 9%,transparent)}.step .n{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:10.5px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;transition:background-color .25s,border-color .25s,color .25s}.step.done .n{border-color:var(--accent);color:var(--copper)}.step.active .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}.step .t{padding-top:3px}.step .t{display:block;font:600 15.5px/1.3 var(--font-display)}.step .d{display:none;color:var(--ink);font-size:14.5px;line-height:1.6;margin-top:8px}.step.active .d{animation:step-open .35s ease both}@keyframes step-open{0%{opacity:0;transform:translateY(-4px)}}.part{color:var(--copper);margin-top:10px;display:none;line-height:1.4}.step.active .d,.step.active .part{display:block}.panel-foot{padding:12px 20px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:8px}.btn.primary:hover:not(:disabled){filter:brightness(1.06)}.btn{transition:border-color .15s,background-color .15s,filter .15s,transform .1s}.btn:active:not(:disabled){transform:scale(.97)}.panel-foot .btn{flex:1}.panel-foot .btn.primary{flex:2}@media (max-width: 800px){.app{grid-template-columns:1fr;grid-template-rows:46vh 1fr;grid-template-rows:46dvh 1fr;height:100vh;height:100dvh;min-height:0}.panel{border-left:0;border-top:1px solid var(--line);padding-right:0}.brand{top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}.brand h1{font-size:24px;margin-top:8px;max-width:none}.readout{position:static;display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding:0;min-width:0;background:none;border:0;border-radius:0}.readout div{flex:none;align-items:baseline;gap:5px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line)}.readout dt{font-size:9px;letter-spacing:.08em}.readout dd{font-size:11.5px}.brand:has(.readout) :is(.crumbs,h1){max-width:none}.hud{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:12px}.panel-head{padding:12px 16px 10px}.progress{margin-top:10px}.hint{font-size:12.5px;margin-top:6px}.step{padding:10px 16px}.step:before{left:28.5px}.step:first-child:before{top:23px}.step:last-child:before{bottom:calc(100% - 23px)}.panel-foot{padding:10px 16px max(10px,env(safe-area-inset-bottom))}}@media (max-width: 1100px){.hud{flex-wrap:nowrap}.controls-toggle{display:inline-flex}.hud-controls{display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:min(100%,340px);flex-direction:column;gap:0;padding:4px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px #0000002e}.hud.open .hud-controls{display:flex}.hud.open .controls-toggle{border-color:var(--accent)}.control{display:grid;grid-template-columns:1fr auto;height:auto;padding:10px 0 0;gap:0 8px;background:none;border:0;border-radius:0}.control+.control{border-top:1px solid var(--line)}.control input[type=range]{grid-column:1 / -1;width:100%}}@media (max-width: 400px){.site-name{display:none}}@media (prefers-reduced-motion: reduce){.progress:before{transition:none}.step.active .d{animation:none}input[type=range]:active::-webkit-slider-thumb{transform:none}}.site-tools{display:flex;gap:8px;align-items:center}.btn.tool{width:44px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--panel) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.btn.tool[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.share{position:relative}.share-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:10;width:240px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0000002e}.share-menu[hidden]{display:none}.share-menu.below,.site-header .share-menu{bottom:auto;top:calc(100% + 8px)}.share-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14px/1.2 var(--font-body);text-align:left;cursor:pointer}.share-item:hover,.share-item:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent);outline:none}.share-item svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.share-status{margin:0;padding:0 10px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}.share-status:not(:empty){padding:6px 10px 4px}.hud .site-tools{margin-left:auto}@media (max-width: 420px){.hud,.hud .site-tools{gap:6px}.controls-toggle{padding:10px 12px}}@media (max-width: 380px){.controls-toggle .label{display:none}.controls-toggle{width:44px;padding:0}}