@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;color:var(--experiments-colors-cf0eee7);background:var(--experiments-colors-c101218);font-family:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}canvas.dragging{cursor:grabbing}canvas:focus-visible{outline:2px solid var(--experiments-colors-cd9dedf);outline-offset:-6px}header{position:fixed;top:27px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}.brand{font-size:27px;font-weight:600;letter-spacing:-1.2px}.brand span{color:var(--experiments-colors-cd9dedf)}.study{font-size:9px;letter-spacing:2px;color:var(--experiments-colors-caeb4bf)}.intro{position:fixed;top:20%;left:7%;pointer-events:none;max-width:270px;transition:opacity .5s;z-index:1}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--experiments-colors-cb4bcc8)}h1{font:400 clamp(60px,7vw,100px)/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-2px;margin:18px 0}p{font-size:13px;line-height:1.8;color:var(--experiments-colors-cb9bfca);max-width:255px}.playing .intro{opacity:0}.dock{position:fixed;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;border:1px solid var(--experiments-colors-cffffff24);background:var(--experiments-colors-c151922ec);backdrop-filter:blur(16px);border-radius:50px;z-index:3;max-width:calc(100% - 20px)}button,select{font:12px 'DM Sans',Arial,sans-serif;color:var(--experiments-colors-cf0eee7);background:transparent;border:0;cursor:pointer}button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}button:hover,button[aria-pressed=true]{background:var(--experiments-colors-cffffff12)}button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}button:focus-visible,select:focus-visible{outline:2px solid var(--experiments-colors-cddd);outline-offset:2px}.palette{display:flex;align-items:center;padding:0 10px;gap:7px}.palette span{font-size:10px;color:var(--experiments-colors-ca3adb8)}select{max-width:120px;padding:10px 4px}select option{background:var(--experiments-colors-c171d28);color:var(--experiments-colors-cf5f5ed)}.divider{width:1px;height:20px;background:var(--experiments-colors-cffffff24)}.footnote{position:fixed;bottom:43px;left:36px;font-size:9px;letter-spacing:1.6px;color:var(--experiments-colors-c8e96a3);pointer-events:none}aside{position:fixed;z-index:4;top:80px;right:26px;width:min(350px,calc(100% - 40px));max-height:calc(100dvh - 175px);overflow:auto;background:var(--experiments-colors-c171d28f8);border:1px solid var(--experiments-colors-cffffff25);border-radius:18px;padding:24px}aside h2{font:32px 'Instrument Serif',Georgia,serif;margin:0 0 14px}aside p{max-width:none}aside small{font-size:11px;line-height:1.8;color:var(--experiments-colors-cb2bbc8)}#status{position:fixed;left:20px;right:20px;bottom:95px;pointer-events:none;text-align:center;font-size:12px;color:var(--experiments-colors-cdbe3ed)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:750px){header{top:22px;left:22px;right:22px}.brand{font-size:25px}.study{font-size:8px;letter-spacing:1px}.intro{top:100px;left:26px;max-width:290px}.intro h1{font-size:57px;margin:10px 0}.intro p{font-size:12px;max-width:290px}.eyebrow{font-size:8px}.footnote{display:none}.dock{padding:5px;gap:1px}.dock button{width:40px;min-width:40px}.palette{padding:0 4px}.palette span{display:none}select{max-width:99px;font-size:11px}}
@media(max-height:550px){header{top:15px}.intro{top:95px}.intro h1{font-size:48px}.intro p{max-width:180px}.dock{bottom:12px}.footnote{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
body:not(.keyboard-mode) canvas:focus-visible{outline:none}

.drawing-tools{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px;white-space:nowrap}.modes{display:flex;border:1px solid var(--experiments-colors-cffffff30);border-radius:30px;padding:4px;background:var(--experiments-colors-c151922f5)}.modes button{width:auto;padding:0 18px;border-radius:25px;height:38px}.modes button[aria-pressed=true]{background:var(--experiments-colors-cdde7e0);color:var(--experiments-colors-c142019)}.clear-trails{width:auto;padding:0 12px;border-radius:20px;height:40px;background:var(--experiments-colors-c151922f5);border:1px solid var(--experiments-colors-cffffff30)}button[hidden]{display:none}#mode-hint{position:fixed;z-index:2;bottom:156px;left:15px;right:15px;text-align:center;font-size:12px;color:var(--experiments-colors-cc5cbd4);pointer-events:none}.drawing canvas,.drawing canvas.dragging{cursor:crosshair}
@media(max-width:750px){.drawing-tools{bottom:91px}#mode-hint{bottom:145px;font-size:11px}.modes button{padding:0 14px}.drawing-tools{gap:8px}.dock{white-space:nowrap}.clear-trails{font-size:11px}}

.drawing-tools{bottom:145px}#mode-hint{bottom:198px}.layer-tools{position:fixed;z-index:3;bottom:96px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--experiments-colors-c151922f5);border:1px solid var(--experiments-colors-cffffff30);border-radius:30px}.layer-tools span{font-size:12px;color:var(--experiments-colors-cbbc4d0);margin-right:8px}.layer-tools button{width:37px;height:30px;border-radius:18px}.layer-tools button[aria-pressed=true]{background:var(--experiments-colors-cdde7e0);color:var(--experiments-colors-c142019)}
@media(max-width:750px){.drawing-tools{bottom:137px}.layer-tools{bottom:91px}#mode-hint{bottom:188px}.intro{top:84px}.intro h1{font-size:45px}.intro p{line-height:1.4;margin-top:6px}}

/* Keep creation and playback primary; individual layer controls live in Options. */
.dock{gap:6px}.dock #pause{width:auto;display:flex;gap:7px;padding:0 12px;min-width:81px;border-radius:25px}.dock #help{width:auto;padding:0 14px;border-radius:25px}.dock>button:first-child{width:auto;padding:0 15px;border-radius:25px}.dock>button:first-child[aria-pressed=true]{background:var(--experiments-colors-cdde7e0);color:var(--experiments-colors-c142019)}.clear-trails{position:fixed;left:50%;transform:translateX(-50%);bottom:94px;z-index:3}#mode-hint{bottom:148px}.layer-tools{position:static;transform:none;justify-content:center;margin-top:18px}.layer-tools span{margin-right:0}.footnote{bottom:38px}
@media(max-width:750px){.dock{flex-wrap:wrap;justify-content:center;width:340px;max-width:calc(100% - 22px);border-radius:24px;bottom:18px;gap:3px}.dock #pause{min-width:78px}.dock .divider{display:none}.dock #help{padding:0 10px}.dock select{max-width:95px}.clear-trails{bottom:118px}#mode-hint{bottom:168px;font-size:11px}.intro{max-width:285px}}

@media(max-width:750px){.clear-trails{bottom:132px}#mode-hint{bottom:181px}}

.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-heading h2{margin:0}.panel-heading button{font-size:25px;width:32px;height:32px}.speed-row{display:grid;grid-template-columns:48px 1fr 74px;align-items:center;gap:10px;margin:16px 0;font-size:11px}.speed-row input{width:100%;min-width:0;accent-color:var(--experiments-colors-cc0d9d2);cursor:pointer;touch-action:pan-y}.speed-row output{font-size:10px;text-align:right;color:var(--experiments-colors-cccd6df)}.motion-note{font-size:11px;line-height:1.5;margin:10px 0}.layer-tools{margin:12px 0}.layer-tools span{white-space:nowrap;font-size:10px}.layer-tools button{flex-shrink:0}details{margin-top:14px;font-size:11px;color:var(--experiments-colors-cb2bbc8)}summary{cursor:pointer}details p{font-size:11px}aside{padding:20px;width:350px}.settings-open .intro{opacity:0}
@media(max-width:750px){aside{top:auto;bottom:115px;right:12px;width:calc(100% - 24px);max-height:calc(100dvh - 210px);padding:14px 18px}.panel-heading{margin-bottom:4px}.panel-heading h2{font-size:25px}.speed-row{margin:11px 0}.motion-note{margin:8px 0}.layer-tools{margin:8px 0}details{margin-top:8px}.settings-open #mode-hint,.settings-open .clear-trails{display:none}}

header{pointer-events:auto}.wordmark{color:inherit;text-decoration:none;font-size:27px;font-weight:600;letter-spacing:-1.2px}.wordmark span{color:inherit}.back,.studio-return{color:inherit;text-decoration:none;font-size:12px}.back{margin-left:auto}.studio-return{margin-left:20px}.experiment-skip{position:fixed;z-index:10;left:15px;top:-80px;padding:12px;background:var(--color-brand-secondary);color:var(--color-brand-primary)}.experiment-skip:focus{top:10px}noscript{position:fixed;left:20px;top:100px;z-index:9}@media(max-width:600px){.studio-return{display:none}.back{font-size:11px}}