@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}}