:root{font-family:Arial,Helvetica,sans-serif;color:#343b40;background:#f5f6f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1800px;margin:auto;padding:30px 36px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#777e81}h1{font-weight:400;font-size:30px;letter-spacing:-.035em;margin:9px 0 0}h1 span{font-size:14px;letter-spacing:0;color:#858b8d;margin-left:20px}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #d0d5d4;border-radius:5px;background:transparent;padding:12px 17px;color:inherit;transition:background .15s}button:hover{background:#e6eae7}button:disabled{opacity:.5;cursor:wait}.primary{background:#35433e;color:#fff;border-color:#35433e;min-width:132px}.primary:hover{background:#24352d}.quiet{border:none;font-size:12px}.score{border:1px solid #d9dfdc;background:#e9eef0}#mapWrap{position:relative;aspect-ratio:1733/866;overflow:hidden}.base,.clefs,#overlay{position:absolute;width:100%;height:100%;top:0;left:0}.base{filter:saturate(.73) contrast(.88) brightness(1.09)}.clefs{pointer-events:none}#overlay{z-index:2}.dot{fill:#303739;cursor:pointer;stroke:#f5f5ef;stroke-width:.5;transition:fill .12s}.dot:hover,.dot:focus{fill:#af5346;outline:none;stroke:#fff;stroke-width:2}.hit{fill:transparent;stroke:none;cursor:pointer}.halo{pointer-events:none}.staff{stroke:#b5b8ba;stroke-width:1.15;vector-effect:non-scaling-stroke;opacity:.9}#cursor{stroke:#b26759;stroke-width:1.25;vector-effect:non-scaling-stroke;pointer-events:none}#tooltip{display:none;position:absolute;z-index:4;pointer-events:none;padding:8px 11px;border-radius:4px;background:#f8faf5f0;color:#333;font-size:12px;box-shadow:0 2px 18px #253b331c;white-space:nowrap}.transport{display:flex;gap:30px;align-items:center;padding:22px 0 8px}.buttons{display:flex;gap:8px}.seek{flex:1}.time{display:flex;justify-content:space-between;font-size:11px;color:#838987;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#647d70;cursor:pointer;height:18px}.volume{width:130px;font-size:11px;color:#7d8581}.readout{display:flex;justify-content:space-between;gap:20px;font-size:12px;min-height:30px;padding:5px 0;color:#64736b}#active{color:#4b5551;text-align:right}.settings{display:flex;align-items:end;gap:24px;padding:20px 0 30px;border-bottom:1px solid #dce0dd}.settings label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#7c8580;min-width:175px}select{background:transparent;color:#37453d;border:0;border-bottom:1px solid #bdc9c1;padding:9px 25px 9px 0;border-radius:0;font-size:13px}.settings button{margin-left:auto;font-size:12px}details{border-bottom:1px solid #dce0dd}summary{padding:18px 0;font-size:13px;cursor:pointer;color:#68786e}.explanation{max-width:980px;font-size:13px;line-height:1.75;color:#6c7770;padding-bottom:16px}.catalog-controls{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:20px;padding-bottom:15px}.catalog-controls input{margin-left:15px;padding:9px;border:1px solid #ccd5ce;border-radius:3px;background:transparent}.table-wrap{max-height:360px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:9px;border-bottom:1px solid #e0e4e1}th{position:sticky;top:0;background:#f5f6f4;color:#748076;font-weight:400}td button{padding:4px 14px}footer{display:flex;justify-content:space-between;gap:35px;font-size:10px;line-height:1.6;color:#8b938d;padding-top:24px}footer span:last-child{max-width:700px}a{color:inherit}body:fullscreen{overflow:auto;background:#f5f6f4}button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #ad6858;outline-offset:4px}@media(max-width:780px){main{padding:20px 14px}h1{font-size:25px}h1 span{display:block;margin:7px 0 0;font-size:12px}header{margin-bottom:18px}.transport{gap:12px;flex-wrap:wrap}.buttons{order:0}.volume{margin-left:auto;width:95px}.seek{order:2;flex-basis:100%}.settings{flex-wrap:wrap;gap:20px}.settings label{min-width:calc(50% - 12px)}.settings button{margin-left:0}.readout{font-size:11px}footer{flex-direction:column;gap:9px}.catalog-controls{align-items:start;flex-direction:column}.catalog-controls input{margin-left:0;display:block;margin-top:8px}.quiet{max-width:115px}.time{font-size:10px}}
:root{--score-width:calc((100svh - 220px)*2.00115)}
@media(min-width:781px){main{max-width:min(1600px,calc(var(--score-width) + 72px));padding-top:22px;padding-bottom:20px}header{margin-bottom:18px}.score{max-width:var(--score-width);margin-inline:auto}.transport{padding-top:16px}.settings{padding-top:14px;padding-bottom:20px}}
#northKey,#southKey{transform-box:fill-box;transform-origin:center;transition:fill .2s,filter .12s;will-change:filter,transform}
.crater-ring{pointer-events:none;filter:drop-shadow(0 0 3px rgba(244,195,154,.85))}
@media(prefers-reduced-motion:reduce){#northKey,#southKey{transform:none!important;transition:none}}


.settings{flex-wrap:wrap}.settings label{min-width:145px;flex:1}.settings button{white-space:nowrap}#tooltip{max-width:90%;white-space:normal}.table-wrap{overflow-x:auto}table{min-width:750px}
:root{color-scheme:dark}

/* Graphite night theme. The source map and geographic data stay intact. */
:root{color-scheme:dark;color:#d9dfdc;background:#151a1c}
.score{background:#12191e;border-color:#343e43}
.base{filter:invert(1) hue-rotate(180deg) saturate(.64) brightness(.78) contrast(.95)}
.eyebrow,h1 span{color:#94a29d}
button{border-color:#46534e;color:#d9e1dc}
button:hover{background:#29352f}
.primary{background:#b7cbbf;border-color:#b7cbbf;color:#17231d}
.primary:hover{background:#cfdfd4}
.quiet{color:#b0bdb6}
.time,.volume{color:#a2afa8}
input[type=range]{accent-color:#abc5b5}
.readout{color:#a9bfb1}
#active{color:#c1cdc5}
.settings,details{border-color:#343f39}
.settings label{color:#a1b0a7}
select{color:#e0e7e1;border-bottom-color:#526258}
select option{background:#1b2420;color:#e0e7e1}
summary{color:#b8c9bd}
.explanation{color:#aebcb2}
.catalog-controls input{border-color:#46584c;color:#e0e7e1;background:#1b2420}
.catalog-controls input::placeholder{color:#8b9d91}
th,td{border-bottom-color:#303d34}
th{background:#151a1c;color:#b4c6b8}
footer{color:#93a298}
a:hover{color:#d3e1d7}
body:fullscreen{background:#151a1c}
.dot{fill:#d3dbd6;stroke:#111b18;stroke-width:.7}
.dot:hover,.dot:focus{fill:#f1bb99;stroke:#f5e1cf}
.staff{stroke:#c5cfca;opacity:.42;stroke-width:1}
#cursor{stroke:#e0ab8e}
#tooltip{background:#202c26f5;color:#e6eee7;box-shadow:0 3px 20px #0008;border:1px solid #526559}
.clefs path{fill:inherit}
.crater-ring{filter:drop-shadow(0 0 3px rgba(239,190,145,.8))}
button:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#edb792}

/* Ambient cobalt and rose palette, drawn from the artist's video. */
:root{background:#051c68;color:#e1e8fa}
body{background:linear-gradient(145deg,#0634acdd 0%,#071c65ed 55%,#030d32 100%);min-height:100svh;isolation:isolate}
.ambient-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.32}
.ambient-background video{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.3) brightness(.8);transform:scale(1.08)}
main{position:relative}
.score{border-color:#5367a2;background:#111b2c;box-shadow:0 14px 60px #010b3670}
.eyebrow,h1 span,.volume,.time{color:#abbce2}
button{border-color:#5d70a3;color:#e0e8fa}
button:hover{background:#385aa04d}
.primary{background:#edb6d4;border-color:#edb6d4;color:#22152d}
.primary:hover{background:#ffd5e9}
.quiet{color:#c1cdec}
input[type=range]{accent-color:#ed9cc8}
.readout{color:#b7c8ee}#active{color:#d7e1fa}
.settings,details{border-color:#51689a80}
.settings label{color:#b2c2e6}
select{color:#e4ebfb;border-bottom-color:#8195be}
select option{background:#0a2058;color:#e4ebfb}
summary{color:#c0d1f0}.explanation{color:#b8c8e7}
.catalog-controls input{border-color:#687eb1;color:#e4ebfb;background:#07184299}
.catalog-controls input::placeholder{color:#9db0d7}
th,td{border-bottom-color:#4b639280}th{background:#081e5b;color:#bfd0ed}
footer{color:#9bb0d6}a:hover{color:#f6c6e2}
body:fullscreen{background:#061951}
#cursor{stroke:#ff82bb}.dot:hover,.dot:focus{fill:#ffadd4;stroke:#ffe1ef}
.crater-ring{filter:drop-shadow(0 0 4px rgba(255,107,179,.85))}
#tooltip{background:#0c1947f5;color:#e4ebfb;border-color:#6475a5}
button:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#ffafd6}
@media(prefers-reduced-motion:reduce){.ambient-background video{display:none}.ambient-background{background:radial-gradient(ellipse at top left,#1456e2,#040e35)}}

.transport .buttons button{padding:8px 12px;font-size:12px;border-radius:4px}.transport .primary{min-width:88px}.transport{gap:20px}.settings label{min-width:145px}.explanation a{color:#d7b2d5}#credits summary{font-size:11px;color:#9bb0d6}footer{padding-top:16px}@media(max-width:780px){.transport .buttons button{padding:8px 10px;font-size:12px}.transport .primary{min-width:78px}.transport{gap:12px}}

footer{justify-content:flex-end;text-align:right}@media(max-width:780px){footer{align-items:center;justify-content:center;text-align:center}}