:root{color-scheme:dark;--bg:#101a22;--ink:#eee9de;--muted:#afbbb9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif;min-height:100svh;background-image:radial-gradient(ellipse at 75% 48%,#24383c88,transparent 55%)}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 5vw;padding:27px 0;font-size:10px;letter-spacing:2px}header{border-bottom:1px solid #52606766}a{color:inherit;text-decoration:none}.brand{font-size:13px;font-weight:bold;letter-spacing:2px}button{font:inherit;color:inherit;cursor:pointer}header button,.controls button{background:transparent;border:1px solid #7b8e9180;border-radius:30px;padding:12px 19px;letter-spacing:0;font-size:12px}button:hover{background:#ffffff13}button:focus-visible,a:focus-visible{outline:3px solid #f5cb8b;outline-offset:6px}main{margin:0 7vw;position:relative;display:grid;grid-template-columns:1fr 1.2fr;padding-top:75px}.eyebrow{font-size:10px;letter-spacing:2px;color:#bbd0c8}h1{font-family:Georgia,serif;font-size:clamp(60px,7.7vw,116px);font-weight:normal;line-height:1.02;letter-spacing:-5px;margin:36px 0}h1 em{color:#e6b785;font-weight:normal}.sub{font-size:15px;line-height:1.85;color:var(--muted)}.instrument{position:relative;min-height:440px;isolation:isolate}.notes{position:absolute;inset:0}.note{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:1px solid var(--c);background:var(--c);color:#15242a;border-radius:50%;width:62px;height:62px;box-shadow:0 0 45px color-mix(in srgb,var(--c) 25%,transparent);font:13px Georgia,serif;transition:box-shadow .4s,filter .4s}.note:hover,.note.hit{filter:brightness(1.2);box-shadow:0 0 70px var(--c),0 0 0 20px #ffffff08}.orbits{position:absolute;inset:25px 0;display:grid;place-items:center;animation:turn 90s linear infinite;pointer-events:none}.orbits i{position:absolute;width:90%;height:65%;border:1px solid #a2bbb32b;border-radius:50%;transform:rotate(-30deg)}.orbits i:nth-child(2){transform:rotate(30deg);width:80%;height:80%}.orbits i:nth-child(3){transform:rotate(90deg);width:80%;height:60%}.caption{position:absolute;bottom:-5px;width:100%;text-align:center;font-size:9px;letter-spacing:2px;color:var(--muted)}.bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:65px;border-top:1px solid #52606766;padding-top:22px;font:20px Georgia,serif}.controls{display:flex;gap:10px}.hint{font-size:11px;color:var(--muted);grid-column:1/-1;margin:8px 0 35px}footer{font-size:9px;color:var(--muted);padding-bottom:25px}body.paused .orbits{animation-play-state:paused}@keyframes turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.orbits{animation:none}.note{transition:none}}@media(max-width:700px){header>span{display:none}header,footer{margin:0 6vw}main{display:block;padding-top:35px}.eyebrow{font-size:8px}h1{font-size:70px;letter-spacing:-3px;margin:25px 0}.sub{font-size:14px}.instrument{min-height:330px;margin-top:15px}.note{height:52px;width:52px}.bottom{display:block;margin-top:40px;font-size:18px}.controls{margin:20px 0}.hint{line-height:1.6}footer{align-items:flex-start;line-height:1.8;letter-spacing:1px}}