@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden;background:var(--experiments-colors-c070910);color:var(--experiments-colors-ce9edf7)}body{font:13px 'DM Sans',sans-serif}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:1px solid var(--experiments-colors-cc4c9ff);outline-offset:-5px}header{position:absolute;left:42px;right:42px;top:28px;display:flex;align-items:center;gap:26px;pointer-events:none}header>*{pointer-events:auto}.wordmark{font-size:30px;letter-spacing:-1.5px;font-weight:600;text-decoration:none;color:inherit}.wordmark span{color:var(--experiments-colors-cd4b8ff)}.back{margin-left:auto;color:var(--experiments-colors-cbac1d0);text-decoration:none;font-size:12px}button{font:inherit;color:inherit;border:1px solid var(--experiments-colors-cffffff18);background:var(--experiments-colors-c111722d9);border-radius:50%;min-width:42px;height:42px;cursor:pointer}button:hover{background:var(--experiments-colors-c283044)}a:focus-visible,button:focus-visible{outline:2px solid var(--experiments-colors-cc4c9ff);outline-offset:4px}.intro{position:absolute;top:21%;left:7%;pointer-events:none;transition:opacity .8s}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--experiments-colors-ca7acbf);margin:0 0 23px}h1{font:clamp(48px,5.4vw,82px)/.96 'Instrument Serif',serif;letter-spacing:-1.5px;margin:0 0 26px}h1 em{font-weight:400;color:var(--experiments-colors-cd5caff)}.intro>p:last-child{line-height:1.8;color:var(--experiments-colors-ca4abbd)}.playing .intro{opacity:0}footer{position:absolute;bottom:28px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.caption,.status{font-size:8px;letter-spacing:1.5px;color:var(--experiments-colors-c8f99ae)}.dock{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:7px;border:1px solid var(--experiments-colors-cffffff18);border-radius:50px;background:var(--experiments-colors-c121823cc);backdrop-filter:blur(15px);pointer-events:auto}.dock button{background:none;border:0;min-width:40px}.dock .palette{border-radius:30px;padding:0 16px}.palette.active{background:var(--experiments-colors-cffffff12)}.divider{height:18px;width:1px;background:var(--experiments-colors-cffffff20);margin:0 5px}aside{position:absolute;top:88px;right:42px;z-index:3;width:min(330px,calc(100% - 40px));max-height:calc(100dvh - 180px);overflow:auto;background:var(--experiments-colors-c121823f5);border:1px solid var(--experiments-colors-cffffff20);border-radius:16px;padding:25px;line-height:1.7;color:var(--experiments-colors-cbfc7d8)}aside h2,dialog h2{font:29px 'Instrument Serif',serif;color:var(--experiments-colors-cf0ebfa);margin:0 0 18px}aside p:last-child{font-size:11px;color:var(--experiments-colors-c919bb0)}dialog{width:min(660px,calc(100% - 32px));max-height:90dvh;background:var(--experiments-colors-c111722);color:var(--experiments-colors-ce9edf7);border:1px solid var(--experiments-colors-cffffff25);border-radius:18px;padding:22px}dialog::backdrop{background:var(--experiments-colors-c000a);backdrop-filter:blur(6px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}dialog img{width:100%;max-height:60dvh;object-fit:contain;border-radius:8px}dialog a{display:inline-block;margin-top:18px;color:var(--experiments-colors-cd5caff)}dialog p{font-size:12px;color:var(--experiments-colors-ca7acbf)}#message{position:absolute;bottom:95px;text-align:center;width:100%;pointer-events:none;color:var(--experiments-colors-cc6cddd)}.quiet .caption,.quiet .status,.quiet .dock>:not(#pause){opacity:.12}.quiet .dock{background:transparent;border-color:transparent;backdrop-filter:none}.quiet #pause{background:var(--experiments-colors-c121823dd);box-shadow:0 0 0 1px var(--experiments-colors-cffffff20)}.dock>*,.caption,.status{transition:opacity .6s}#help{font-size:17px}
@media(max-width:750px){.caption,.status{display:none}header{left:22px;right:22px;top:23px}.intro{top:17%;left:26px}h1{font-size:62px}footer{left:10px;right:10px;bottom:25px}.dock{padding:6px;gap:1px}.dock .palette{padding:0 11px;font-size:11px}.dock button{min-width:36px;height:42px}.divider{margin:0 3px}aside{right:20px}}@media(max-width:350px){.dock .palette{padding:0 8px}.dock button{min-width:33px}.back{font-size:11px}header{gap:12px}.wordmark{font-size:27px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.dock{bottom:0}
@media(max-width:750px) and (max-height:650px){.intro{top:22%}.intro h1{font-size:46px;margin-bottom:15px}.intro>p:last-child{display:none}.eyebrow{font-size:8px;margin-bottom:16px}}

:root{--ui-accent:var(--experiments-colors-ce7d4c4);--ui-panel:var(--experiments-colors-c111d2be8);--ui-muted:var(--experiments-colors-cadbac9)}html,body,main{background:var(--experiments-colors-c080f1c)}canvas{cursor:crosshair}canvas:active{cursor:grabbing}.intro{transition:opacity 1s}.intro h1{text-shadow:0 2px 26px var(--experiments-colors-c080f1c)}.material{padding:0 15px;color:var(--experiments-colors-cc5c9d1);font-size:11px;white-space:nowrap}.dock button,header button{min-width:44px;width:44px;height:44px}.dock{gap:5px}.quiet .dock>*{opacity:1}.quiet .dock{background:var(--ui-panel);border-color:var(--experiments-colors-cffffff20);backdrop-filter:blur(16px)}.caption,.status{line-height:1.5;max-width:25%}#message{font-size:12px;bottom:100px}body:not(.playing) .intro{pointer-events:none}header{z-index:2}aside{z-index:4}button{cursor:pointer}.quiet header{opacity:.5}header:hover,header:focus-within{opacity:1}header{transition:opacity .7s}body:has(aside:not([hidden])) header{opacity:1}@media(max-width:750px){.dock button{min-width:44px;width:44px}.intro h1{font-size:54px}.material{padding:0 10px;font-size:10px}.intro{max-width:calc(100% - 40px)}header button{min-width:44px}.dock{gap:2px}}@media(max-width:370px){.intro h1{font-size:46px}.material{padding:0 6px}.back{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.dock .palette{width:auto;min-width:54px;padding:0 12px}.sunset{--ui-accent:var(--experiments-colors-cedbf94);--ui-panel:var(--experiments-colors-c241c2be8);--ui-muted:var(--experiments-colors-cc3b5c6)}.sunset .intro h1{text-shadow:0 2px 26px var(--experiments-colors-c100e1b)}@media(max-width:370px){.dock .palette{min-width:48px;padding:0 8px}}

body .dock .palette{width:auto;min-width:54px;padding:0 12px}body .dock button{min-width:44px;height:44px}
body.quiet .dock > :not(#pause){opacity:1}

.dock #pause{width:auto;min-width:80px;padding:0 12px;gap:7px}.dock #pause span{font-size:11px}@media(max-width:370px){.dock #pause{min-width:72px;padding:0 8px}}