:root{--navy:#0b1730;--navy2:#13264a;--gold:#f5b83b;--cream:#fffaf0;--ink:#172033;--muted:#60708b;--line:#dce3ee;--green:#14866d;--red:#c94b4b;--shadow:0 18px 50px rgba(11,23,48,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f8fc;color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.7}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem;z-index:100}.site-header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);position:sticky;top:0;z-index:20;background:rgba(11,23,48,.95);backdrop-filter:blur(12px);color:#fff}.brand{font-weight:800;color:#fff;text-decoration:none;letter-spacing:.04em}.brand span{color:var(--gold);font-size:1.4rem;margin-right:.4rem}nav{display:flex;gap:1.4rem}nav a{color:#dfe8f8;text-decoration:none;font-weight:600;font-size:.95rem}nav a:hover,nav a:focus{color:var(--gold)}.nav-toggle{display:none}.hero{min-height:calc(100vh - 68px);background:radial-gradient(circle at 75% 25%,#284a7b 0,transparent 33%),linear-gradient(135deg,#081226,#0d1e3e 60%,#172e50);color:#fff;padding:8vw max(6vw,24px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;overflow:hidden}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#bb7a10;font-weight:900;font-size:.78rem;margin:0 0 .6rem}.hero .eyebrow{color:var(--gold)}h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(3rem,7vw,6.5rem);line-height:1.06;margin:.2rem 0 1.4rem;letter-spacing:-.04em}h1 em{color:var(--gold);font-style:normal}.lead{font-size:clamp(1.05rem,2vw,1.35rem);color:#d6e1f3;max-width:36rem}.hero-actions{display:flex;gap:.8rem;margin:2rem 0 1rem}.button{border:1px solid transparent;border-radius:999px;padding:.8rem 1.35rem;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:#201603;box-shadow:0 10px 28px rgba(245,184,59,.25)}.ghost{background:transparent;color:inherit;border-color:currentColor}.sound-tip{font-size:.85rem;color:#aab9d1}.stage{position:relative;min-height:500px;border-radius:50% 50% 12% 12%;background:radial-gradient(ellipse at 50% 90%,#9b581a 0,#63300c 28%,#121b2b 62%);box-shadow:inset 0 -20px 60px #090d16,0 40px 90px #0007}.spotlight{position:absolute;top:-40%;left:22%;width:58%;height:100%;background:linear-gradient(#ffeab377,transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}.section,.conductor{position:absolute;display:grid;place-items:center;font-size:clamp(2rem,5vw,4rem);filter:drop-shadow(0 8px 8px #0008)}.section span,.conductor span{font-size:.75rem;background:#071126cc;border:1px solid #ffffff44;border-radius:999px;padding:.15rem .55rem;color:#fff}.conductor{left:44%;top:18%}.strings{left:16%;bottom:16%}.woodwinds{left:44%;bottom:28%}.brass{right:13%;bottom:22%}.percussion{right:8%;top:22%}.section{padding:5.5rem max(5vw,22px)}.section-heading{max-width:760px;margin-bottom:2.4rem}.section-heading h2{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(2rem,4vw,3.7rem);line-height:1.18;margin:.2rem 0 .7rem}.section-heading>p:last-child{color:var(--muted);font-size:1.08rem}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.fact-grid article,.instrument-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:0 8px 25px rgba(24,43,77,.06)}.fact-grid span{font-size:2rem}.fact-grid h3{margin:.6rem 0 .25rem}.fact-grid p{margin:0;color:var(--muted)}.conductor-card{margin-top:2rem;background:var(--navy);color:#fff;border-radius:24px;padding:2rem;display:grid;grid-template-columns:130px 1fr;gap:2rem;align-items:center;box-shadow:var(--shadow)}.conductor-card h3{font-size:1.8rem;margin:.2rem 0}.conductor-card p:last-child{color:#cdd8eb;margin:0}.baton{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#f9c85f 0 6%,transparent 7%),linear-gradient(55deg,transparent 47%,#fff 48% 51%,transparent 52%);border:1px solid #ffffff33}.families{background:#eef2f8}.filter-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.3rem}.chip{border:1px solid #bdc8d8;background:#fff;border-radius:999px;padding:.55rem 1rem;font-weight:800;cursor:pointer}.chip.active{background:var(--navy);color:#fff}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.instrument-card{position:relative;overflow:hidden;transition:.25s}.instrument-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.instrument-card .icon{height:130px;display:grid;place-items:center;font-size:4.5rem;border-radius:12px;background:var(--tint)}.family-tag{display:inline-block;color:var(--accent);font-weight:900;font-size:.78rem;margin-top:1rem}.instrument-card h3{font-size:1.3rem;margin:.2rem 0}.instrument-card p{color:var(--muted);font-size:.92rem;min-height:3.2rem}.play-instrument{width:100%;border:0;background:#eef2f8;border-radius:12px;padding:.7rem;font-weight:800;color:var(--navy);cursor:pointer}.play-instrument.playing{background:var(--gold)}.lab{background:var(--navy);color:#fff}.lab .section-heading>p:last-child{color:#cdd8eb}.lab .eyebrow{color:var(--gold)}.listening-game{display:grid;grid-template-columns:minmax(220px,.65fr) 1.35fr;background:#fff;color:var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 24px 80px #0005}.sound-orb{background:radial-gradient(circle,#f6c65d 0 7%,#21406d 8% 35%,#0e1c36 36%);min-height:420px;display:grid;place-items:center;position:relative}.sound-orb span{font-family:serif;font-size:7rem;color:#fff}.sound-orb i{position:absolute;width:60%;aspect-ratio:1;border:1px solid #fff4;border-radius:50%;animation:pulse 2s infinite}.sound-orb i:nth-child(3){width:78%;animation-delay:.45s}.sound-orb i:nth-child(4){width:95%;animation-delay:.9s}@keyframes pulse{50%{transform:scale(1.08);opacity:.2}}.listen-panel{padding:2rem}.listen-panel>p{color:var(--muted);font-weight:800}.listen-panel h3{font-size:1.7rem}.sound-button{background:var(--navy2);color:#fff;border-radius:12px}.answer-grid,.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.3rem 0}.option{border:1px solid var(--line);background:#fff;border-radius:12px;padding:.8rem;text-align:left;font-weight:800;cursor:pointer}.option:hover{border-color:#6b7f9c;background:#f4f7fb}.option.correct{border-color:var(--green);background:#e5f6f0}.option.wrong{border-color:var(--red);background:#fff0f0}.option:disabled{cursor:default;color:inherit}.feedback{min-height:2rem;font-weight:700}.feedback.good{color:var(--green)}.feedback.bad{color:var(--red)}.hidden{display:none!important}.audio-note{color:#aebcd2;font-size:.86rem;margin-top:1rem}.quiz-section{background:var(--cream)}.quiz-shell{background:#fff;border:1px solid #eadfc7;border-radius:26px;box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,3rem);max-width:900px}.quiz-start,.results{text-align:center}.medal{font-size:4rem}.quiz-start h3,.results h3{font-size:2rem;margin:.4rem}.quiz-top{display:flex;justify-content:space-between;font-weight:800}.progress{height:8px;background:#e8edf4;border-radius:9px;margin:.7rem 0 1.5rem;overflow:hidden}.progress span{display:block;height:100%;background:var(--gold);width:10%;transition:.3s}.question-type{color:#a66b0e;font-weight:900;font-size:.85rem;letter-spacing:.08em}.quiz h3{font-size:1.55rem}.result-ring{width:150px;height:150px;border-radius:50%;display:grid;place-content:center;margin:0 auto 1rem;background:conic-gradient(var(--gold) var(--score,0%),#edf0f4 0);position:relative}.result-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}.result-ring strong,.result-ring span{position:relative;z-index:1}.result-ring strong{font-size:3rem;line-height:1}.review-item{text-align:left;padding:.8rem 1rem;background:#fff4e0;border-radius:10px;margin:.5rem 0}footer{background:#071126;color:#c5d0e1;padding:2rem max(5vw,22px);display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}footer strong{color:var(--gold)}@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:5rem}.stage{min-height:410px}.instrument-grid{grid-template-columns:repeat(2,1fr)}.listening-game{grid-template-columns:1fr}.sound-orb{min-height:250px}.sound-orb span{font-size:5rem}}@media(max-width:640px){.site-header{height:60px}.nav-toggle{display:block;border:1px solid #fff6;background:transparent;color:#fff;border-radius:8px;padding:.4rem .7rem}nav{position:absolute;top:60px;left:0;right:0;background:var(--navy);padding:1rem 24px;flex-direction:column;display:none}nav.open{display:flex}.hero{min-height:auto}.stage{min-height:340px}.fact-grid,.instrument-grid{grid-template-columns:1fr}.conductor-card{grid-template-columns:1fr}.baton{display:none}.answer-grid,.quiz-options{grid-template-columns:1fr}.section{padding-top:4rem;padding-bottom:4rem}.hero-actions{flex-direction:column;align-items:stretch}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* The stage labels and content sections both use .section. Reset the actual page panels. */
.page-panel{position:static;display:block;place-items:initial;font-size:inherit;filter:none;width:100%;min-height:calc(100vh - 68px)}
.page-panel[hidden]{display:none!important}
nav a.active{color:var(--gold);text-decoration:underline;text-underline-offset:.35rem}
.instrument-card .icon img{display:block;width:72px;height:118px;object-fit:contain}
.option img{width:28px;height:48px;object-fit:contain;vertical-align:middle;margin-right:.45rem}

/* Prevent positioned stage labels from widening narrow mobile viewports. */
html,body{overflow-x:hidden}
@media(max-width:640px){
  .site-header{padding-inline:20px}
  .brand{font-size:.95rem}
  .hero{padding-inline:30px}
  .hero-copy,.stage{min-width:0;width:100%}
  .hero .lead{overflow-wrap:anywhere}
  .stage{min-height:320px}
  .stage .section{padding:0}
}
.credits{padding:2rem max(5vw,22px);background:#101d36;color:#c5d0e1;font-size:.82rem}
.credits h2{font-size:1rem;color:#fff;margin:0 0 .35rem}
.credits p{max-width:1000px;margin:0}
.credits a{color:var(--gold)}