@font-face{font-family:system-serif;src:local(Iowan Old Style),local(Palatino Linotype),local(Georgia)}:root{--parchment:#f3ead9;--parchment-dim:#e9dcc2;--walnut:#4a3524;--walnut-dark:#2e2015;--burgundy:#6d2532;--gold:#b08d3e;--gold-bright:#cda54a;--deep-blue:#1f3a5f;--ink:#2a2018;--paper-line:#4a35242e;--serif:"Iowan Old Style", "Palatino Linotype", palatino, georgia, "Times New Roman", serif;--sans:-apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;--focus-ring:0 0 0 3px #b08d3e8c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(ellipse at top, #ffffff40, transparent 60%), var(--parchment);color:var(--ink);font-family:var(--sans);background-attachment:fixed;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;opacity:.5;background-image:repeating-linear-gradient(0deg,#4a352404 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#4a352403 0 1px,#0000 1px 3px);position:fixed;inset:0}a{color:var(--burgundy)}h1,h2,h3{font-family:var(--serif);color:var(--walnut-dark);letter-spacing:.01em;font-weight:600}:focus-visible{box-shadow:var(--focus-ring);border-radius:4px;outline:none}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}header{z-index:2;padding:.75rem 1.5rem;position:relative}header nav a{font-family:var(--serif);color:var(--walnut);font-size:.95rem;text-decoration:none}.hero{z-index:1;flex-direction:column;justify-content:center;min-height:100vh;padding:1.5rem clamp(1rem,4vw,3rem) 3rem;display:flex;position:relative}.hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,.95fr);align-items:center;gap:clamp(1rem,3vw,2.5rem);width:100%;max-width:1400px;margin:0 auto;display:grid}.instructions-panel,.controls-panel{font-family:var(--sans)}.instructions-panel{padding-top:1rem}.page-title{opacity:.92;margin:0 0 1.25rem;font-size:clamp(1.3rem,2vw,1.7rem)}.invite{font-family:var(--serif);color:var(--walnut-dark);margin:0 0 .75rem;font-size:clamp(1.1rem,1.6vw,1.4rem);transition:opacity .8s}body.has-played .invite{opacity:0}.hint{color:var(--walnut);opacity:.85;max-width:28ch;font-size:.92rem}.hint-small{margin-top:.5rem;font-size:.8rem}.harp-stage{aspect-ratio:4/5;max-height:78vh;box-shadow:inset 0 0 0 1px var(--paper-line), 0 20px 50px -25px #2e201573;touch-action:pan-y;background:radial-gradient(at 50% 20%,#fff4d68c,#0000 65%),linear-gradient(#efe4cf 0%,#e3d3af 60%,#d8c496 100%);border-radius:18px;position:relative;overflow:hidden}.harp-3d-container{position:absolute;inset:0}.harp-3d-container canvas{touch-action:pan-y;display:block;width:100%!important;height:100%!important}.reset-view-btn{z-index:2;position:absolute;bottom:.75rem;right:.75rem}.harp-stage.no-webgl{aspect-ratio:auto;max-height:none;padding:1rem .5rem}.svg-harp{width:100%;height:auto;max-height:70vh;margin:0 auto;display:block;overflow:visible}.svg-harp-frame{fill:var(--walnut);opacity:.9}.svg-string{cursor:pointer}.svg-string-hit{stroke:#0000;stroke-width:16px}.svg-string-visual{stroke-width:2px;transition:stroke-width .1s}.svg-string.is-plucked .svg-string-visual,.svg-string.is-active-live .svg-string-visual,.svg-string.is-active-song .svg-string-visual{stroke-width:4.5px}.svg-string-label{fill:var(--walnut);font-size:11px;font-family:var(--sans)}button{font-family:var(--sans);border:1px solid var(--paper-line);color:var(--walnut-dark);cursor:pointer;background:linear-gradient(#fbf5e7,#efe2c6);border-radius:8px;min-height:44px;padding:.5rem .85rem;font-size:.85rem;transition:transform .12s,box-shadow .12s,background .12s}button:hover{background:linear-gradient(#fffaf0,#f2e6c8)}button:active{transform:translateY(1px)}button[aria-pressed=true]{background:linear-gradient(180deg, var(--gold-bright), var(--gold));color:#2e2015}.button-row{flex-wrap:wrap;gap:.5rem;display:flex}.controls-panel section+section{margin-top:1.5rem}.controls-panel h2{margin:0 0 .5rem;font-size:1rem}.key-buttons{grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;display:grid}.key-button{--string-color:#e9ddc0;border-top:3px solid var(--string-color);flex-direction:column;align-items:center;gap:.1rem;min-height:44px;padding:.4rem .2rem;display:flex}.key-button .key-label{font-size:.85rem;font-weight:700}.key-button .note-label{opacity:.75;font-size:.65rem}.key-button.is-active-live{animation:.35s key-flash-live}.key-button.is-active-song{animation:.35s key-flash-song}@keyframes key-flash-live{0%{background:var(--burgundy);color:#fff4e2}to{color:var(--walnut-dark);background:linear-gradient(#fbf5e7,#efe2c6)}}@keyframes key-flash-song{0%{background:var(--gold-bright);color:#2e2015}to{color:var(--walnut-dark);background:linear-gradient(#fbf5e7,#efe2c6)}}.volume-controls label{margin-bottom:.25rem;font-size:.85rem;display:block}.volume-controls input[type=range]{width:100%;accent-color:var(--gold);margin-bottom:.6rem}.song-list{flex-direction:column;gap:.35rem;margin-bottom:.6rem;display:flex}.song-choice{cursor:pointer;align-items:center;gap:.5rem;font-size:.88rem;display:flex}.song-progress{background:var(--parchment-dim);height:6px;box-shadow:inset 0 0 0 1px var(--paper-line);border-radius:3px;margin-top:.6rem;overflow:hidden}.song-progress-bar{background:linear-gradient(90deg, var(--gold), var(--burgundy));width:0%;height:100%;transition:width .1s linear}.ripple-layer{pointer-events:none;z-index:50;position:fixed;inset:0}.ripple{border-radius:50%;width:14px;height:14px;margin-top:-7px;margin-left:-7px;animation:.8s ease-out forwards ripple-out;position:absolute}.ripple-live{background:radial-gradient(circle,#cda54a8c,#6d253259 60%,#0000 70%)}.ripple-song{background:radial-gradient(circle,#cda54a59,#0000 70%)}@keyframes ripple-out{0%{opacity:.85;transform:scale(.4)}to{opacity:0;transform:scale(5.5)}}body.reduced-motion .ripple{animation-duration:.4s}body.reduced-motion .ripple-live,body.reduced-motion .ripple-song{background:radial-gradient(circle,#cda54a8c,#0000 65%)}.scroll-hint{text-align:center;font-family:var(--serif);color:var(--walnut);opacity:.75;margin:1.5rem auto 0;font-size:.9rem;text-decoration:none;animation:3.5s ease-in-out infinite hint-breathe;display:block}@keyframes hint-breathe{0%,to{opacity:.55}50%{opacity:.95}}body.reduced-motion .scroll-hint{opacity:.75;animation:none}.culture{z-index:1;max-width:42rem;margin:0 auto;padding:3rem 1.25rem 5rem;position:relative}.culture h2{border-bottom:1px solid var(--paper-line);padding-bottom:.5rem;font-size:1.7rem}.culture h3{margin-top:2rem;font-size:1.15rem}.culture p{font-size:.98rem}.back-to-harp{margin:2.5rem auto .5rem;display:block}.sources{opacity:.9;padding-left:1.2rem;font-size:.85rem}.sources li{margin-bottom:.35rem}@media (width<=860px){.hero{min-height:auto;padding-top:1rem}.hero-grid{grid-template-columns:1fr}.instructions-panel{text-align:center;order:1;padding-top:0}.hint{max-width:none;margin:0 auto}.harp-stage{aspect-ratio:3/4;order:2;max-height:65vh}.controls-panel{order:3}.key-buttons{grid-template-columns:repeat(7,minmax(0,1fr))}}