:root{color-scheme:dark;--page:#0c0c0c;--panel:#151515;--raised:#1b1b1b;--line:#272727;--muted:#a8a8a8;--dim:#6e6e6e;--accent:#00c65c;--font:'Geist',sans-serif;--mono:'Geist Mono',monospace;--radius:16px}
*{box-sizing:border-box}body{margin:0;background:var(--page);background-image:radial-gradient(circle,#ffffff1a .9px,transparent 1.2px);background-size:16px 16px;color:#f4f4f4;font:15px/1.5 var(--font)}[hidden]{display:none!important}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:var(--raised);border:1px solid var(--line);border-radius:7px;padding:8px 12px}button:hover{background:#242424;border-color:#444}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
nav{max-width:1328px;height:80px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:24px;font-weight:600;letter-spacing:-1.2px;display:flex;align-items:baseline}.brand>span{color:var(--accent)}.brand small{font-size:13px;font-weight:400;letter-spacing:0;margin-left:16px;color:var(--muted)}.nav-label{font-size:13px;color:var(--muted);margin-right:200px}
h1,h2{font-family:var(--font);font-weight:500;letter-spacing:-.045em}.eyebrow,.number{color:var(--dim);font:11px var(--mono);letter-spacing:.04em}
/* Scene and code share one sticky viewport and leave together at its boundary. */
.scroll-section{position:relative;height:200svh}.sticky{position:sticky;top:0;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;--scene-width:min(1024px,calc(100vw - 64px),calc((100svh - 288px)*1.779))}
.frame{position:relative;border-radius:var(--radius);overflow:hidden;width:var(--scene-width);height:calc(var(--scene-width)*.5620915);min-height:0}.frame.square{--scene-width:min(600px,calc(100vw - 64px),calc(100svh - 288px));height:var(--scene-width)}.media{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.copy{position:relative;z-index:2;width:100%;padding:0 24px;text-align:center;pointer-events:none;flex:none}.copy h2{font-size:30px;line-height:1.1;margin:7px 0}.note{font-size:13px;color:var(--muted);margin:8px 0 0}.stage-hint{position:absolute;top:38px;left:24px;right:24px;text-align:center;font:12px var(--font);color:var(--muted)}
.code{position:absolute;z-index:4;top:12px;right:12px;text-align:left;pointer-events:auto}.copy .code{top:auto;bottom:-28px;left:0;right:0;text-align:center}#code-toggle{position:fixed;z-index:30;top:24px;right:calc(24px + var(--settings-w,100px) + 8px);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:#1b1b1bf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #3a3a3a;border-radius:6px;color:#ddd;box-shadow:0 3px 14px #0005}#code-toggle:hover{background:#242424;border-color:#4a4a4a;color:#fff}#code-toggle[aria-expanded=true]{background:#eee;border-color:#eee;color:#111}.code-card{position:fixed;z-index:30;top:72px;right:24px;width:min(560px,calc(100vw - 48px));max-height:min(440px,60svh);display:flex;flex-direction:column;background:#151515f7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #393939;border-radius:var(--radius);box-shadow:0 16px 60px #0008;overflow:hidden}.code-card[hidden]{display:none}.code-bar{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;border-bottom:1px solid var(--line);font:12px var(--font);color:var(--muted)}.code-actions{display:flex;align-items:center;gap:6px}.code-actions button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:5px;background:var(--panel);color:#bbb}.copy-button,.copy-button:hover{position:relative;background:none;border:0;color:#9a9a9a;width:30px;height:28px;padding:5px}.copy-button:hover,.copy-button:focus-visible{color:#fff}.copy-feedback:not(:empty){position:absolute;bottom:calc(100% + 8px);right:0;white-space:nowrap;border:1px solid #444;background:#222;color:#eee;border-radius:6px;padding:5px 9px;font:12px var(--font);box-shadow:0 4px 14px #0005;pointer-events:none}
.code-card pre{margin:0;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:transparent;padding:12px 14px;color:#d1d1d1;font:12px/1.6 var(--mono);scrollbar-width:thin;scrollbar-color:#444 transparent}.status{font-size:12px;color:var(--muted);margin:8px 0 0}.status:not([data-error]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.status[data-error]{color:#efb0ac;background:#151515;padding:8px;border-radius:6px}
#settings-toggle{position:fixed;z-index:30;top:24px;right:24px;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;background:var(--accent);border-color:var(--accent);color:#071b0d;font:500 13px var(--font);box-shadow:0 3px 14px #0005}#settings-toggle svg circle{fill:var(--accent)}#settings-toggle[aria-expanded=true]{background:#1b1b1b;border-color:#444;color:#eee}#settings-toggle[aria-expanded=true] svg circle{fill:#1b1b1b}
#inspector{position:fixed;z-index:25;top:72px;right:24px;width:256px;max-height:calc(100svh - 92px);display:flex;flex-direction:column;background:#151515f7;backdrop-filter:blur(18px);border:1px solid #393939;border-radius:var(--radius);box-shadow:0 16px 60px #0007;font-size:13px;overflow:hidden}.inspector-heading{display:flex;align-items:center;justify-content:space-between;padding:16px}.inspector-heading h2{font-size:16px;letter-spacing:-.02em;margin:4px 0 0}.inspector-heading .eyebrow{font:11px var(--font);letter-spacing:0}.inspector-heading button{width:30px;height:30px;border:0;background:none;padding:0;font-size:22px;color:var(--muted)}.inspector-navigation{padding:0 16px 14px;border-bottom:1px solid var(--line)}.active-demo{display:block;font-size:13px;color:#eee;margin-bottom:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.inspector-navigation label{display:block;font-size:12px;color:var(--muted)}.inspector-navigation select{margin-top:5px;width:100%;font-size:12px;padding:8px 32px 8px 10px}
.inspector-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#444 transparent;padding:0 16px}.inspector-content details{border-bottom:1px solid var(--line);padding:15px 0}.inspector-content summary{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;cursor:pointer;list-style:none;user-select:none}.inspector-content summary::-webkit-details-marker{display:none}.inspector-content summary>span{color:var(--dim);transition:transform .15s}.inspector-content details[open]>summary>span{transform:rotate(180deg)}.inspector-content fieldset{border:0;margin:0;padding:0;min-width:0}.inspector-content fieldset:disabled{opacity:.4}.inspector-content details>fieldset{margin-top:14px}
.select-row{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:12px 0;color:var(--muted);font-size:13px}select{max-width:100%;min-width:0;border:1px solid #3b3b3b;border-radius:6px;background-color:#222;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a0a0a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5l3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;-webkit-appearance:none;appearance:none;color:#eee;padding:6px 30px 6px 10px;text-overflow:ellipsis;cursor:pointer}select:hover{border-color:#4a4a4a}.select-row select{width:110px;font-size:12px;padding:6px 26px 6px 8px;background-position:right 8px center}.parameter{margin:18px 0}.parameter-label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px;color:var(--muted);font-size:13px}.value-box{display:flex;align-items:center;gap:3px;border:1px solid #383838;border-radius:5px;padding:4px 5px;max-width:88px;background:#222;color:#888;font:11px var(--mono)}.value-box input{width:49px;text-align:right;font:12px var(--mono);color:#eee;border:0;background:none;padding:0;appearance:textfield;outline-offset:5px}.value-box input::-webkit-inner-spin-button,.value-box input::-webkit-outer-spin-button{appearance:none;margin:0}
.fine-slider{display:block;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:ew-resize;touch-action:pan-y}.fine-slider::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(to right,var(--accent) 0 var(--fill),#444 var(--fill) 100%)}.fine-slider::-moz-range-track{height:3px;border-radius:99px;background:#444}.fine-slider::-moz-range-progress{height:3px;border-radius:99px;background:var(--accent)}.fine-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:16px;margin-top:-6.5px;border-radius:3px;background:#eee;border:1px solid #fff;box-shadow:0 1px 5px #0009}.fine-slider::-moz-range-thumb{width:10px;height:16px;border-radius:3px;background:#eee;border:1px solid #fff}.fine-slider:hover::-webkit-slider-thumb,.fine-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #00c65c22}
.switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;margin:12px 0;color:var(--muted);font-size:13px;cursor:pointer}.switch-row input{position:absolute;right:0;width:30px;height:26px;margin:0;opacity:0;cursor:pointer}.switch-track{width:28px;height:16px;flex-shrink:0;border-radius:99px;border:1px solid #555;background:#383838;pointer-events:none}.switch-track:after{content:'';display:block;width:10px;height:10px;margin:2px;border-radius:50%;background:#aaa;transition:transform .15s}.switch-row input:checked+.switch-track{background:var(--accent);border-color:var(--accent)}.switch-row input:checked+.switch-track:after{background:#08210f;transform:translateX(12px)}.switch-row input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:3px}
.text-parameter{display:block;font-size:13px;color:var(--muted);margin:14px 0}.text-parameter textarea{display:block;width:100%;height:66px;margin-top:6px;padding:8px;background:#222;border:1px solid #3a3a3a;border-radius:var(--radius);color:#ddd;resize:vertical;font:12px/1.5 var(--mono)}.text-parameter textarea::placeholder{color:#888}.color-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:14px 0}.color-row input{margin-left:auto;width:24px;height:24px;padding:2px;border:1px solid #555;border-radius:5px;background:none;cursor:pointer}.color-row>span{font:10px var(--mono)}.inspector-note,.inspector-error{font-size:12px}.inspector-error{color:#efb0ac;max-height:55px;overflow:auto;margin:0;padding:0 16px}.inspector-error:not(:empty){padding-top:10px;padding-bottom:10px}.inspector-footer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}.inspector-footer button{flex:1;font-size:12px;padding:7px 5px;white-space:nowrap;color:var(--muted)}
@media(max-width:600px){nav{height:68px;padding:0 18px}.nav-label{display:none}.sticky{--scene-width:min(600px,calc(100vw - 48px),calc(100svh - 288px))}.frame.square{--scene-width:min(600px,calc(100vw - 28px),calc(100svh - 288px))}.copy{padding:0 14px}.copy h2{font-size:27px}.note{max-width:320px;margin:8px auto 0;font-size:12px}.stage-hint{font-size:11px;top:36px}#code-toggle{top:24px;right:calc(12px + var(--settings-w,100px) + 8px);width:36px;height:36px}.code-card{top:72px;right:12px;width:calc(100vw - 24px)}.code-card pre{font-size:11px;padding:10px}.code-bar{font-size:11px}#settings-toggle{top:24px;right:12px;font-size:12px;min-height:36px;padding:7px 10px}#inspector{top:72px;right:12px;max-height:calc(100svh - 84px)}}
@media(max-width:600px){.frame{height:var(--scene-width)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Page title */
.intro{width:min(1200px,calc(100vw - 112px),calc((100svh - 288px)*1.779));margin:0 auto;padding:80px 0 48px}.intro{text-align:center}.intro h1{font-size:clamp(38px,5vw,64px);line-height:1.02;margin:0;letter-spacing:-.055em}.intro h1 span{color:var(--accent)}.intro p{font-size:15px;color:var(--muted);max-width:720px;margin:16px auto 0;text-wrap:balance}
@media(max-width:600px){.intro{width:auto;margin:0 16px;padding:56px 0 24px}.intro p{font-size:13px}}
/* Settings: shapes */
.apply{background:var(--accent);border-color:var(--accent);color:#071b0d;padding:10px 18px;font-size:13px;font-weight:600}.apply:hover{background:#12da6e;border-color:#12da6e}
.shape-field{display:block;font-size:13px;color:var(--muted);margin:14px 0 0}.shape-field textarea{display:block;width:100%;height:64px;margin-top:6px;padding:8px;background:#222;border:1px solid #3a3a3a;border-radius:var(--radius);color:#ddd;resize:vertical;font:11px/1.5 var(--mono)}.shape-field textarea::placeholder{color:#888}.upload-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;font-size:11px;color:var(--dim)}.upload{position:relative;display:inline-flex;padding:5px 8px;border:1px solid #3b3b3b;border-radius:6px;background:#242424;color:#ccc;cursor:pointer;overflow:hidden}.upload:focus-within{outline:2px solid var(--accent);outline-offset:3px}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.apply-shapes{display:block;width:100%;margin:16px 0 4px;padding:10px 14px;font-size:13px;font-weight:600}
/* Code colours */
.code-card code .tk-kw{color:#c79bff}.code-card code .tk-str{color:#8fe3a8}.code-card code .tk-num{color:#ffb86b}.code-card code .tk-lit{color:#ff8fa3}.code-card code .tk-fn{color:#f1d98a}.code-card code .tk-key{color:#7cc4ff}.code-card code .tk-punc{color:#7c7c7c}
/* Soundtrack */

/* A counter that melts away, both stacked in one cell. No text-shadow on the text itself: the melt's ghosts inherit it and its dark halo would weld into the blob and turn it grey. The text is aligned with text-align, not flex, so the melt's ghost words (plain blocks) land exactly where the text sits. */
.word{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 14px #0006);transform-origin:50% 40%;transform:translateY(calc(var(--melt,0)*18px)) scaleY(calc(1 + var(--melt,0)*.4)) scaleX(calc(1 - var(--melt,0)*.06))}
.word-count,.word-value{grid-area:1/1;justify-self:stretch;text-align:center;color:#fff;font:700 clamp(32px,6vw,60px)/1.2 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.word[data-phase="count"] .word-value,.word[data-phase="melt"] .word-count{opacity:0}

/* The final typographic scene uses a quiet surface behind the image-filled words. */
#name-to-role{background:var(--page)}

.media-switch{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border:1px solid #303030;border-radius:99px;background:#151515;z-index:20}
.media-switch button{border:0;border-radius:99px;background:transparent;padding:7px 15px;color:#888;font:500 12px var(--font);cursor:pointer}
.media-switch button[aria-pressed=true]{background:#303030;color:#f4f4f4}
.media-switch button:focus-visible,.video-retry:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.video-retry{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:9px 16px;background:#f4f4f4;color:#111;border:0;border-radius:99px;font:500 12px var(--font);cursor:pointer;z-index:2}
.video-retry[hidden]{display:none}