@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#101716;--line:#34413b;--muted:#a0ada6;--accent:#c6f078;--purple:#b077cf}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f0f1e9;font-family:'DM Sans',sans-serif}main{max-width:1440px;margin:auto;padding:0 5%}header{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:2px}.brand{font-size:16px;color:inherit;text-decoration:none}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6%;padding:70px 0}.eyebrow{font-size:13px;letter-spacing:2px;color:var(--accent)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,5.7vw,82px);line-height:1.04;font-weight:400;letter-spacing:-4px;margin:24px 0}em{font-style:normal;color:var(--accent)}.lede{max-width:390px;color:var(--muted);font-size:16px;line-height:1.7}.download{display:flex;justify-content:space-between;max-width:280px;background:var(--accent);color:#162017;padding:17px 20px;text-decoration:none;border-radius:3px;margin-top:30px;font-weight:600}.small{font-size:14px;color:var(--muted)}.art{position:relative;border:1px solid var(--line);padding:20px 0 0;background:radial-gradient(ellipse,#203329,transparent 70%)}.art svg{width:100%;display:block}.art-label{display:flex;justify-content:space-between;padding:16px;font-size:13px;letter-spacing:1px;color:var(--muted);border-top:1px solid var(--line)}.instrument{padding:28px;background:#1c2622;border:1px solid #3b4940;border-radius:8px}.toolbar{display:flex;align-items:center;gap:25px;margin-bottom:24px}.toolbar>div{flex:1}h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:400;margin:12px 0}.toolbar label{font-size:14px;letter-spacing:1px;display:flex;align-items:center;gap:12px}input{accent-color:var(--accent);width:100px}button{font:inherit;cursor:pointer}#stop{background:transparent;border:1px solid #89988d;color:#eff0e9;border-radius:4px;padding:10px 15px}.keyboard-scroll{overflow-x:auto;padding-bottom:6px}.keyboard{position:relative;height:205px;min-width:780px;touch-action:pan-x}.key{appearance:none;-webkit-appearance:none;position:absolute;top:0;border-radius:0 0 5px 5px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 15px;border:1px solid #24332b;gap:7px;user-select:none;touch-action:manipulation}.white{height:200px;background:linear-gradient(#ffffff,#eeeeee);color:#313131;z-index:1}.black{height:125px;background:linear-gradient(#171717,#050505);color:#f0f0f0;z-index:2;box-shadow:0 4px 2px #0008}.key span{font-size:12px}.key kbd{font-family:inherit;font-size:12px}.key.active{background:var(--accent);color:#172017;box-shadow:0 0 24px #c6f055}.black.active{background:var(--purple);color:#100b14;box-shadow:0 0 24px #b077cf55}.key:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #ffffff;outline-offset:3px;box-shadow:0 0 0 6px #101716}.hint{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:14px;letter-spacing:1px;margin-top:15px}#status{font-size:14px;color:var(--accent);margin:14px 0 0}.notes{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:35px;padding:65px 0}.notes h3{font-size:15px;font-weight:500}.notes article p{font-size:16px;color:var(--muted);line-height:1.8}footer{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;font-size:13px;color:var(--muted);letter-spacing:1px}@media(max-width:760px){header>span{display:none}.intro{grid-template-columns:1fr;padding:40px 0;gap:35px}h1{letter-spacing:-2px}.art{max-width:550px}.instrument{padding:16px}.toolbar{flex-wrap:wrap;gap:12px}.toolbar>div{flex-basis:100%}.notes{grid-template-columns:1fr 1fr;gap:20px}.hint,footer{flex-direction:column}.hint{line-height:1.7}footer{gap:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.population{margin-top:50px;padding:28px;border:1px solid var(--line);border-radius:8px}.population svg{width:100%;min-height:180px}.population svg text{fill:#a0ada6;font:16px sans-serif}.population a{color:var(--accent);font-size:14px}.population .small{line-height:1.8}.legend{display:flex;gap:20px;font-size:14px}.legend .legend-lvk{color:var(--purple)}.legend .legend-played{color:var(--accent)}.legend .legend-sounding{color:#ffffff}#reset{background:transparent;color:var(--accent);border:1px solid #89988d;border-radius:4px;padding:10px}#chart-status{font-size:14px}
.brand{display:block;line-height:0}.brand img{display:block;width:220px;height:auto}.university{display:block;padding:8px 0 8px 24px}.university img{display:block;width:94px;height:auto}header{gap:28px;padding:24px 0}@media(max-width:500px){.brand img{width:180px}.university{padding-left:12px}.university img{width:74px}header{gap:16px}}

#fullscreen{background:var(--purple);color:#130d19;border:1px solid var(--purple);border-radius:4px;padding:10px 15px;font-weight:600;min-height:44px}.key{touch-action:none}.outreach-open{overflow:hidden}.instrument.outreach{position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;max-width:none;display:flex;flex-direction:column;border:0;border-radius:0;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#101716}.instrument.outreach .toolbar{flex-shrink:0;flex-wrap:wrap}.instrument.outreach .toolbar h2{font-size:clamp(18px,2.5vw,32px)}.instrument.outreach .keyboard-scroll{flex:1;min-height:160px;display:flex;overflow:visible}.instrument.outreach .keyboard{min-width:0;width:100%;height:100%}.instrument.outreach .white{height:calc(100% - 5px)}.instrument.outreach .black{height:62%}.instrument.outreach .key span{font-size:clamp(12px,1.4vw,18px)}.instrument.outreach .key kbd{font-size:12px}.instrument.outreach .hint{flex-shrink:0}.instrument.outreach #status{min-height:20px}.instrument:fullscreen{background:#101716}@media(max-width:600px){.instrument.outreach{padding:16px 8px}.instrument.outreach .toolbar{gap:8px}.instrument.outreach .toolbar>div{flex-basis:100%}.instrument.outreach .key kbd{display:none}.instrument.outreach .hint{font-size:12px;gap:4px}.instrument.outreach .key{padding-bottom:12px}}

/* Dual-color focus indicators remain visible on light keys and dark controls. */
.key:focus-visible{outline:3px solid #ffffff;outline-offset:-6px;box-shadow:inset 0 0 0 9px #101716}
input:focus-visible,.chart-scroll:focus-visible{outline:3px solid #ffffff;outline-offset:3px;box-shadow:0 0 0 6px #101716}
button{min-height:44px}

.keyboard-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-bottom:16px;font-size:14px;color:var(--muted)}
.keyboard-options label{display:flex;align-items:center;gap:8px;min-height:44px;color:#f0f1e9}
.keyboard-options input{width:24px;height:24px;margin:0}
.chart-scroll{overflow-x:auto;margin:12px 0}
.population .chart-scroll svg{min-width:1000px;display:block}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;min-height:44px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#89988d}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#89988d}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:26px;margin-top:-10px;border:2px solid #101716;border-radius:5px;background:#c6f078}
input[type=range]::-moz-range-thumb{width:22px;height:26px;border:2px solid #101716;border-radius:5px;background:#c6f078}
.instrument.outreach .keyboard-options{flex-shrink:0;margin-bottom:8px}
@media(max-width:600px){.notes{grid-template-columns:1fr}.toolbar{gap:12px}.legend{flex-wrap:wrap}.instrument.outreach .keyboard-options{gap:4px 12px;font-size:12px}}
@media(forced-colors:active){.key{forced-color-adjust:none}.key:focus-visible{outline-color:#000000;box-shadow:inset 0 0 0 9px #ffffff}}
.instrument.outreach{overflow:auto}
.instrument.outreach .toolbar{position:sticky;top:0;z-index:5;background:#101716}
.skip-link{position:fixed;left:16px;top:-100px;z-index:2000;background:#c6f078;color:#101716;padding:12px 18px;font-size:16px}
.skip-link:focus{top:12px}
section:focus-visible{outline:3px solid #ffffff;outline-offset:3px}

#retry-audio{background:#c6f078;color:#101716;border:1px solid #c6f078;border-radius:4px;padding:10px 15px}.playback-note{font-size:14px;color:var(--muted);line-height:1.5;margin:8px 0 0}.key:disabled{cursor:wait}.key:disabled span,.key:disabled kbd{color:inherit}.instrument.outreach .playback-note{font-size:12px;flex-shrink:0}

.pack-download{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line);padding:36px 0 44px}.pack-download .download{margin:0;min-width:260px}.pack-download .small{line-height:1.6}

.legend{flex-wrap:wrap}.note-legend{color:#a0ada6}.note-swatch{display:inline-block;width:42px;height:4px;margin-right:6px;vertical-align:middle;border-radius:2px;background:linear-gradient(90deg,hsl(0,85%,70%),hsl(60,85%,70%),hsl(120,85%,70%),hsl(180,85%,70%),hsl(240,85%,70%),hsl(275,85%,70%))}.population svg text.note-label{font-size:12px;font-weight:500;stroke:#101716;stroke-width:3px;paint-order:stroke;stroke-linejoin:round}.population svg text.played-note{font-weight:800;text-decoration:underline}

.note-labels{pointer-events:none}

#play-events{background:#c6f078;color:#101716;border:1px solid #c6f078;border-radius:4px;padding:10px 15px;font-weight:600}#play-events:disabled{background:#a0ada6;border-color:#a0ada6;cursor:wait}

.note-marker.sounding-note line{stroke:#fff;stroke-opacity:1;stroke-width:3}.population svg text.note-label.sounding-note{fill:#fff!important;font-weight:800;text-decoration:underline}

.played-bar{fill:url(#played-stripes);fill-opacity:1;stroke:none}.played-bar.sounding-bin{fill:#fff}

.run-track{position:relative;height:36px;margin:22px 0;background:#26332e;border:1px solid #68756e}#run-segments a{position:absolute;top:0;height:100%;background:#684480;color:white;text-align:center;font-size:12px;padding-top:6px;box-sizing:border-box;overflow:hidden}#timeline-cursor{position:absolute;top:-5px;bottom:-5px;width:3px;background:#fff;pointer-events:none}#timeline-date{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:#fff;font-size:14px}

header nav{margin-left:auto;margin-right:28px}.chirp-lab{display:inline-flex;align-items:center;gap:10px;color:#c6f078;font-size:15px;font-weight:600;letter-spacing:0;text-underline-offset:4px;white-space:nowrap}@media(max-width:600px){header{flex-wrap:wrap;gap:20px}header nav{margin-left:0;margin-right:0;order:3;width:100%}}

.chirp-lab{border:1px solid #c6f078;border-radius:5px;padding:8px 14px;text-decoration:underline;min-height:44px}.chirp-lab:hover{background:#26382a;color:#fff}.chirp-lab:focus-visible{outline:3px solid #fff;outline-offset:4px}

.population .toolbar{flex-wrap:wrap}.population .toolbar>div:first-child{flex:1 0 100%}.toolbar>.timeline-toggle{flex:0 0 auto;display:inline-flex;border:1px solid #c6f078;border-radius:6px;padding:3px;gap:3px;max-width:100%}.timeline-toggle button{appearance:none;-webkit-appearance:none;display:block;margin:0;border:0;min-height:44px;padding:8px 14px;border-radius:3px;color:#f0f1e9;background:transparent;font:inherit;font-size:14px;line-height:1.3;white-space:nowrap}.timeline-toggle button[aria-checked="true"]{background:#c6f078;color:#101716;font-weight:700}.timeline-toggle button:focus-visible{outline:3px solid #fff;outline-offset:4px}.timeline-toggle button:hover{box-shadow:inset 0 0 0 1px #c6f078}

@media(max-width:600px){.toolbar>.timeline-toggle{flex:1 1 100%;width:100%;min-width:0}.timeline-toggle button{flex:1 1 0;min-width:0;white-space:normal}}

#pause-events{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:10px 15px;font-weight:600}#pause-events[aria-pressed="true"]{background:var(--accent);color:#101716}
.credits{border-top:1px solid var(--line);padding:20px 0 0;margin:0 0 20px}.credits a{color:var(--accent)}