@font-face{font-family:Figtree;src:url('assets/Figtree.ttf') format('truetype');font-weight:300 900;font-display:swap}
:root{--ground:#dfe9e3;--ink:#1d2925;--secondary:#4c6056;--line:#b9cac0;--paper:#f2f3ed;--white:#fafbf7;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{color-scheme:light;scrollbar-color:var(--secondary) var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Figtree,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--white)}
button,input,textarea,a{-webkit-tap-highlight-color:transparent}
button,a,input,textarea{outline-offset:5px}
:focus-visible{outline:2px solid var(--ink)}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none;text-underline-offset:4px}
svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.masthead{height:98px;max-width:1440px;margin:auto;padding:0 52px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.wordmark-light{font-weight:400}
.wordmark .mark{width:34px;height:28px;fill:currentColor;stroke:none}
.masthead-note{font-size:14px;color:var(--secondary);margin-left:auto;margin-right:24px}
.download{font-size:14px;display:flex;align-items:center;gap:9px;padding:12px 0;transition:opacity .2s var(--ease)}
.download:hover{opacity:.65}
main{max-width:1200px;margin:0 auto;padding:0 34px}
.stage{position:relative;max-width:1060px;margin:0 auto;aspect-ratio:4/3}
canvas{display:block;width:100%;height:100%;object-fit:contain}
.stage.screen-mode{max-width:920px;margin-top:30px;margin-bottom:35px}
.loading,.load-error{position:absolute;inset:0;display:grid;place-content:center;background:var(--ground);font-size:18px;color:var(--secondary);text-align:center}
.load-error button{display:block;margin:18px auto 0;padding:10px 18px;background:var(--ink);color:var(--paper);border:0;border-radius:6px}
.cast-picker{max-width:980px;margin:0 auto 22px;display:flex;align-items:center;gap:36px}
.cast-label{font-size:16px;font-weight:600;white-space:nowrap}
.cast-options{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1}
.dot-choice{display:flex;align-items:center;gap:8px;min-width:146px;padding:5px 12px 5px 5px;border:0;border-radius:12px;background:transparent;color:var(--secondary);font-size:13px;transition:background .2s var(--ease),color .2s var(--ease)}
.dot-choice:hover{background:#d0dfd6;color:var(--ink)}
.dot-choice.active{background:#c7d8cd;color:var(--ink);font-weight:600}
.dot-choice:disabled{opacity:.5;cursor:wait}
.dot-choice .dot-avatar{width:64px;height:60px;object-fit:contain}
.controls{max-width:980px;min-height:64px;margin:0 auto;display:flex;align-items:center;gap:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.transport{display:flex;align-items:center;gap:8px}
.icon-button{width:34px;height:34px;display:grid;place-items:center;background:transparent;border:0;border-radius:50%;transition:background .2s var(--ease)}
.icon-button:hover{background:#c7d8cd}
.play{background:var(--ink);color:var(--white);width:38px;height:38px}
.play:hover{background:#40544a}
.play svg{stroke-width:2}
.play #play-icon{fill:currentColor;stroke:none;width:17px;height:17px}
.state-label{font-size:13px;margin-left:5px;min-width:88px}
.scrub-label{display:flex;align-items:center;gap:18px;flex:1;min-width:70px}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;flex:1;width:100%;min-width:40px;cursor:pointer;height:24px;margin:0;accent-color:var(--ink)}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:var(--ink);border-radius:50%;margin-top:-4px}
input[type=range]::-moz-range-track{height:3px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--ink);border:0;border-radius:50%}
.time{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap;color:var(--secondary)}
.view-switch,.material-switch{display:flex;align-items:center;gap:2px;white-space:nowrap}
.view-switch button,.material-switch button{border:0;background:transparent;padding:7px 12px;border-radius:5px;color:var(--secondary);font-size:12px;transition:background .2s var(--ease),color .2s var(--ease)}
.view-switch button:hover,.material-switch button:hover{color:var(--ink);background:#d0dfd6}
.view-switch button.active,.material-switch button.active{background:var(--ink);color:var(--white)}
.studio-tools{max-width:980px;margin:0 auto;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}
.material-switch{gap:2px}
.demo-note{color:var(--secondary);font-size:12px}
.text-button{background:transparent;border:0;padding:6px 0;display:flex;align-items:center;gap:8px;font-size:13px}
.text-button svg{width:13px;height:13px}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}
.answer-editor{max-width:980px;margin:8px auto 30px;padding:25px 0 0;border-top:1px solid var(--line)}
.answer-editor>label{display:block;font-size:17px;font-weight:600;margin-bottom:12px}
.answer-row{display:flex;gap:12px;align-items:flex-start}
.answer-row textarea{font:inherit;line-height:1.5;flex:1;width:100%;min-width:0;min-height:160px;resize:vertical;padding:12px 15px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);caret-color:var(--ink)}
.example-switch{max-width:980px;margin:0 auto 16px;display:flex;flex-wrap:wrap;gap:9px}
.example-switch button{font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--secondary)}
.example-switch button.active{background:var(--paper);color:var(--ink);border-color:var(--secondary)}
.solid-button{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:6px;padding:12px 20px;background:var(--ink);color:var(--white)}
.solid-button:hover{background:#40544a}
.answer-editor p{font-size:12px;color:var(--secondary);margin-top:10px}
footer{max-width:980px;margin:18px auto 0;padding:22px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:11px;color:var(--secondary)}
footer a{display:flex;align-items:center;gap:6px}
footer svg{width:12px;height:12px}
footer a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.stage{max-width:1180px}main{max-width:1320px}.masthead{max-width:1580px}.controls,.studio-tools,footer{max-width:1080px}}
@media(max-width:700px){.masthead{height:80px;padding:0 22px;gap:16px}.wordmark{font-size:19px}.wordmark .mark{width:29px}.masthead-note{display:none}.download{font-size:12px;gap:6px}.download svg{width:16px}main{padding:0 18px}.stage{width:calc(100% + 24px);margin-left:-12px;margin-bottom:12px}.controls{gap:10px;flex-wrap:wrap;padding:14px 0 12px}.transport{order:1;flex:1}.view-switch{order:2}.scrub-label{order:3;flex-basis:100%;margin-top:6px}.state-label{font-size:12px}.view-switch button{padding:6px 8px}.studio-tools{flex-wrap:wrap;padding:14px 0;gap:14px}.demo-note{order:3;flex-basis:100%;font-size:11px}.material-switch button{padding:6px 9px}.text-button{font-size:12px}.answer-row{flex-direction:column}.solid-button{align-self:flex-start;font-size:13px}.answer-editor{padding-top:18px}.stage.screen-mode{width:100%;margin-left:0;margin-top:25px;margin-bottom:25px}footer{margin:15px 18px 0;align-items:flex-start;line-height:1.5}footer>span{max-width:210px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:900px){.cast-picker{gap:18px}.cast-options{gap:6px}.dot-choice{min-width:0;flex:1;justify-content:center;padding-right:9px;gap:3px}.dot-choice .dot-avatar{width:51px;height:48px}}
@media(max-width:700px){.cast-picker{margin:0 auto 18px;display:block}.cast-label{display:block;font-size:13px;margin-bottom:8px}.cast-options{justify-content:space-between;gap:7px}.dot-choice{flex-direction:column;gap:1px;padding:5px 4px 8px;border-radius:10px;font-size:11px;min-height:78px}.dot-choice .dot-avatar{width:62px;height:58px}}

html[data-trial=true] .controls,html[data-trial=true] .studio-tools,html[data-trial=true] .example-switch{display:none}html[data-trial=true] h1{font-size:clamp(30px,5vw,48px);letter-spacing:-.03em;margin:18px 0}html[data-trial=true] .masthead{flex-wrap:wrap;gap:12px}html[data-trial=true] .masthead-note{display:block;font-size:13px}html[data-trial=true] .answer-editor{margin-block:25px}html[data-trial=true] .answer-editor[hidden]{display:none}.trial-text{max-width:70ch;margin:25px auto;padding:20px 0}.trial-text h2{font-size:18px}.trial-text p{font-size:17px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.trial-text a{display:inline-block;margin-top:18px;color:#24382c}.trial-text button{margin-top:20px;min-height:44px}html[data-trial=true] footer{font-size:14px}@media(max-width:520px){html[data-trial=true] .masthead-note{order:3;flex-basis:100%}html[data-trial=true] .answer-row{display:block}html[data-trial=true] .answer-row textarea{width:100%}html[data-trial=true] .answer-row button{margin-top:14px}}