:root{color-scheme:dark;font-family:Georgia,serif;background:#080e18;color:#e9d4b0}*{box-sizing:border-box}body{margin:0}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}header{position:absolute;top:5vh;left:6vw;pointer-events:none}h1{font-size:clamp(36px,6vw,76px);font-weight:400;letter-spacing:-.04em;margin:12px 0}.eyebrow{font:10px system-ui;letter-spacing:.35em;color:#a5b6c2}header>p:last-child{font-style:italic;color:#b6bbc0}aside{position:fixed;bottom:5vh;left:6vw;width:min(380px,88vw);padding:18px 22px;background:#080e18db;border:1px solid #35566b;border-radius:3px}summary,button,select{cursor:pointer}nav{max-height:30vh;overflow:auto}a{display:block;color:#dfc49a;font:13px/1.5 system-ui;margin:12px 0;text-decoration:none}a:hover{text-decoration:underline}.clock{display:flex;justify-content:space-between;align-items:center;margin:18px 0;font:12px system-ui;color:#99aebd}button,select{padding:7px 10px;background:#19232d;color:#e9d4b0;border:1px solid #35566b}button:disabled{opacity:.35}#note{font-style:italic}#error{position:absolute;right:5vw;bottom:5vh;max-width:350px;color:#ffbcab}*:focus-visible{outline:2px solid #e8bb70;outline-offset:3px}@media(max-width:600px){header{top:2vh}aside{bottom:2vh;padding:12px 16px}h1{margin:5px 0}}
/* Reserve real space for the controls so the instrument never sits behind them. */
canvas{left:420px;top:0;width:calc(100% - 420px);height:100%}
header{left:32px;top:40px;width:340px}h1{font-size:56px}aside{left:32px;bottom:32px;width:340px}
.clock{color:#c5d5df}header>p:last-child{color:#ccd2d8}
@media(max-width:600px){
 canvas{left:0;top:132px;width:100%;height:calc(100% - 307px)}
 header{left:6vw;top:18px;width:88vw}h1{font-size:38px}
 header>p:last-child{font-size:14px}
 aside{left:6vw;bottom:12px;width:88vw;padding:10px 16px}
 aside>p{margin:6px 0}.clock{margin:10px 0}
 nav{max-height:100px}details[open]{max-height:140px;overflow:auto}
 button,select,summary{min-height:44px}
 nav a{display:block;padding:12px 0;min-height:44px}
 body::after{content:"";position:fixed;top:132px;left:0;width:100%;height:40px;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,#080e18,transparent)}
}
@media(max-width:600px){
 summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid #35566b;border-radius:3px;background:#19232d;list-style:none}
 summary::-webkit-details-marker{display:none}
 summary::before{content:"";width:7px;height:7px;border-right:2px solid #e8bb70;border-bottom:2px solid #e8bb70;transform:rotate(-45deg);transition:transform .15s}
 details[open]>summary::before{transform:rotate(45deg)}
}