@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;font-family:'DM Sans',sans-serif;color:var(--experiments-colors-cf1eee6);background:var(--experiments-colors-c101713)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid var(--experiments-colors-cece9d0);outline-offset:-5px}a,button{color:inherit}a{text-decoration:none}header{position:absolute;inset:25px 32px auto;display:flex;align-items:center;gap:18px;pointer-events:none;z-index:2}header>*{pointer-events:auto}.wordmark{font-size:25px;letter-spacing:-1px;font-weight:500}.label{font-size:9px;letter-spacing:2px;opacity:.7}.back{margin-left:auto;font-size:12px}button{font:inherit;cursor:pointer;border:1px solid var(--experiments-colors-cffffff30);background:var(--experiments-colors-c101713bb);border-radius:50%;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}button:hover{background:var(--experiments-colors-cffffff24)}button:focus-visible,a:focus-visible{outline:2px solid var(--experiments-colors-cf3e7ad);outline-offset:4px}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.intro{position:absolute;left:7%;top:18%;pointer-events:none;transition:opacity .7s;max-width:360px;text-shadow:0 2px 22px var(--experiments-colors-c0006)}.intro .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:20px}h1{font:clamp(52px,6vw,86px)/.95 'Instrument Serif',Georgia,serif;font-weight:400;margin:0 0 21px;letter-spacing:-1.5px}.intro p{line-height:1.65;font-size:13px;max-width:255px;opacity:.8}.playing .intro{opacity:0}.dock{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;border:1px solid var(--experiments-colors-cffffff27);border-radius:36px;background:var(--experiments-colors-c111916cb);backdrop-filter:blur(18px);padding:6px;z-index:3;max-width:calc(100% - 24px)}.dock button{border:0;background:transparent}.dock button:hover{background:var(--experiments-colors-cffffff16)}.dock .palette{border-radius:25px;padding:0 17px;font-size:12px;white-space:nowrap;gap:9px}.dot{height:11px;width:11px;border-radius:50%;background:linear-gradient(140deg,var(--experiments-colors-cd9d7a4),var(--experiments-colors-c668976))}.divider{height:18px;width:1px;background:var(--experiments-colors-cffffff24)}.caption{position:absolute;bottom:45px;left:32px;font-size:9px;letter-spacing:1.4px;opacity:.55;pointer-events:none}.keyhint{position:absolute;bottom:45px;right:32px;font-size:10px;opacity:.55;pointer-events:none}aside{position:absolute;top:88px;right:30px;z-index:4;width:min(345px,calc(100% - 40px));max-height:calc(100dvh - 190px);overflow:auto;padding:25px;border-radius:18px;border:1px solid var(--experiments-colors-cffffff30);background:var(--experiments-colors-c111b19f5);line-height:1.6;font-size:13px}aside h2{font:30px 'Instrument Serif',serif;margin:0 0 12px}aside small{opacity:.7}#message{position:absolute;bottom:95px;left:20%;right:20%;text-align:center;font-size:12px;pointer-events:none}.key-cursor{position:absolute;width:22px;height:22px;border:1px solid var(--experiments-colors-cfff9);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);display:none;box-shadow:0 0 0 4px var(--experiments-colors-c0002)}.key-cursor.visible{display:block}.paused #pause{background:var(--experiments-colors-cffffff1d)}.alloy{background:var(--experiments-colors-c172225)}.fold{background:var(--experiments-colors-c1c2429)}body.light .intro,body.light header{color:var(--experiments-colors-c26372d);text-shadow:none}body.light .label{opacity:.75}
@media(max-width:800px){header{inset:21px 22px auto;gap:12px}.label{display:none}.intro{left:7%;top:16%}.intro h1{font-size:62px}.caption,.keyhint{display:none}.dock{bottom:max(20px,env(safe-area-inset-bottom))}.dock .palette{padding:0 10px}.dock button{min-width:42px}aside{right:20px}.intro p{font-size:12px}.back{font-size:11px}}
@media(max-height:550px){.intro{top:24%}.intro h1{font-size:44px}.intro p{display:none}.intro .eyebrow{margin-bottom:10px}header{top:15px}.dock{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(min-width:801px){.intro{max-width:520px;top:15%}.intro h1{font-size:clamp(52px,5vw,76px)}.meadow .intro{top:13%}.meadow .intro h1{font-size:clamp(50px,4.7vw,70px)}.meadow .intro p{max-width:350px}}


body.alloy .dock{bottom:max(25px,env(safe-area-inset-bottom));max-width:calc(100% - 24px)}body.alloy .wordmark{font-size:30px}.experiment-skip{position:absolute;z-index:20;left:12px;top:-80px}.experiment-skip:focus{top:12px}body.alloy #main-content{height:100%}