:root{color-scheme:light;--paper:#dbd4ce;--ink:#272727;--rust:#6f2e1c;--line:#bcb3aa}
#stage{--caption-space:clamp(90px,11vh,128px)}#scene-view{position:absolute;inset:0 0 var(--caption-space)}.caption-band{position:absolute;inset:auto 0 28px;height:calc(var(--caption-space) - 28px);display:grid;place-items:center;padding:0 24px;pointer-events:none}#sequence-caption{margin:0;max-width:36em;text-align:center;text-wrap:balance;color:var(--rust);font:700 clamp(20px,2.4vw,42px)/1.2 'Public Sans',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font:16px/1.4 Roboto,Arial,sans-serif}
#stage{position:absolute;inset:0 0 215px}body.clean #stage{bottom:0}canvas{display:block;width:100%;height:100%;outline-offset:-5px}#loading,#countdown{position:absolute;inset:0;display:grid;place-items:center;margin:0;pointer-events:none}#loading{background:var(--paper);padding:30px;text-align:center}#countdown{font:700 clamp(64px,10vw,140px)/1 'Public Sans',Arial,sans-serif;color:var(--rust);background:#dbd4cebb}
[hidden]{display:none!important}#controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));padding:14px 20px 12px;border:1px solid var(--line);border-radius:12px;background:#e8e2ddf5;box-shadow:0 4px 24px #40332c0a}
.topline{display:flex;align-items:center;gap:18px;font-size:14px;color:#635b54}.topline a{font:700 20px/1 'Public Sans',Arial,sans-serif;color:var(--rust);text-decoration:none}.topline output{margin-left:auto}fieldset{border:0;padding:0;margin:0;min-width:0}.timeline{display:flex;align-items:center;gap:14px;margin:13px 0}.timeline label{font-size:14px}.timeline input{flex:1;min-width:30px;accent-color:var(--rust);cursor:pointer}.timeline output{font-size:14px;font-variant-numeric:tabular-nums}
.buttons{display:flex;gap:9px}.buttons button{flex:1;border:1px solid #a99c91;background:transparent;border-radius:6px;min-height:44px;padding:9px 12px;font:14px/1.2 Roboto,Arial,sans-serif;color:var(--ink);cursor:pointer}.buttons button:hover{background:#d9cfc6}.buttons .primary{background:var(--rust);color:white;border-color:var(--rust)}.buttons .primary:hover{background:#542215}.buttons button:disabled{opacity:.45;cursor:default}.hint{margin:10px 0 0;font-size:12px;color:#72685e;text-align:center}a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--rust);outline-offset:3px}body.clean{cursor:none}body.clean #controls{display:none}body.clean canvas{outline:none;cursor:none}
.sample-label{position:absolute;top:22px;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap}.sample-label strong{display:block;color:var(--rust);font:700 clamp(16px,1.7vw,30px)/1.2 'Public Sans',Arial,sans-serif}.sample-label span{display:block;margin-top:5px;color:#73685e;font-size:clamp(12px,1.1vw,16px)}#basaltra-label{left:30%}#sand-label{left:70%}.concept-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:#786e64;pointer-events:none}
@media(max-width:600px){#stage{bottom:265px}#controls{bottom:12px;padding:12px}.topline{gap:10px;font-size:12px;flex-wrap:wrap}.topline output{font-size:12px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.hint{font-size:12px}.timeline{gap:8px}.timeline output{font-size:12px}.sample-label{top:12px}.sample-label strong{font-size:14px}.sample-label span{font-size:10px}.concept-label{font-size:10px}}

/* Homepage mode keeps the same film, captions and accessible playback control. */
.hero-embed #stage{inset:0;--caption-space:88px}
.hero-embed #scene-view{top:44px;transition:opacity .35s}
.hero-embed .sample-label{top:0}
.hero-embed .sample-label strong{font-size:17px}
.hero-embed .sample-label span{font-size:12px;margin-top:4px}
.hero-embed .caption-band{bottom:35px;height:53px;padding:0 25px}
.hero-embed #sequence-caption{font-size:clamp(17px,2.8vw,24px);max-width:30em}
.hero-embed .concept-label{bottom:15px;font-size:11px}
.hero-embed #controls{inset:auto 12px 12px auto;transform:none;width:auto;margin:0;padding:0;border:0;box-shadow:none;background:transparent}
.hero-embed #controls .topline,.hero-embed #controls .timeline,.hero-embed #controls .hint,.hero-embed #restart,.hero-embed #fullscreen,.hero-embed #take{display:none}
.hero-embed .buttons{display:block}
.hero-embed #play{min-height:44px;min-width:78px;padding:10px 13px;border:1px solid #b7aba2;background:#dbd4ceec;border-radius:22px;font-size:13px}
.hero-embed #play:hover{background:#e8e2dd}
.hero-embed #loading{font-size:15px}
@media(max-width:420px){.hero-embed #stage{--caption-space:98px}.hero-embed #scene-view{top:38px}.hero-embed .sample-label strong{font-size:14px}.hero-embed .sample-label span{font-size:10px}.hero-embed #sequence-caption{font-size:17px}.hero-embed .caption-band{bottom:42px;height:56px;padding-inline:16px}.hero-embed #play{font-size:12px;min-width:70px}.hero-embed .concept-label{left:16px;transform:none;bottom:23px}}
@media(prefers-reduced-motion:reduce){.hero-embed #scene-view{transition:none}}