/* SOUND SPARKS — SYNTH-INSPIRED PALETTE / VISUAL ONLY
   Deliberately scoped to legacy pages; SYNTH and PERFORMANCE keep their own layouts. */
:root{--ss-ink:#142b3a;--ss-surface:#243f50;--ss-panel:#203848;--ss-outline:#496d7c;--ss-orange:#ffa342;--ss-orange-deep:#d65b12;--ss-sky:#83cff4;--ss-paper:#f4fafc;--ss-muted:#d4e7ed}
body{background:linear-gradient(to bottom,#83cff4 0%,#b4e9ff 77%,#69b75c 77%);color:var(--ss-ink)}
header{background:#142b3a;border-bottom-color:#69b75c}
nav{gap:7px;padding:12px 12px 14px}
nav button{background:#2a4b5d;border-bottom-color:#142b3a;min-height:44px}
nav button.active{background:#ed852a;border-bottom-color:#ad5217}
footer{background:#142b3a}
/* Shared instrument shell for the five older pages. */
:is(#create,#play,#library,#packs,#schools)>.card{
 background:var(--ss-ink);color:var(--ss-paper);border:3px solid var(--ss-orange);
 border-radius:17px;box-shadow:0 8px 0 #234350;padding:clamp(15px,2.3vw,25px);
 width:100%;max-width:1000px;margin:0 auto 25px;
}
:is(#create,#play,#library,#packs,#schools)>.card>h2{
 color:#fff;font-size:clamp(24px,3.3vw,36px);letter-spacing:.015em;margin:0 0 8px;
}
:is(#create,#play,#library,#packs,#schools)>.card>p{color:var(--ss-muted);line-height:1.55}
:is(#create,#play,#library,#packs,#schools) .hint{color:var(--ss-muted);line-height:1.5}
:is(#create,#play,#library,#packs,#schools) h3{color:#fff}
:is(#create,#play,#library,#packs,#schools) :is(.row,.controls){gap:12px}
:is(#create,#play,#library,#packs,#schools) .row label{color:#edf7fb}
:is(#create,#play,#library,#packs,#schools) :is(button,.button){min-height:44px;border-radius:8px}
:is(#create,#play,#library,#packs,#schools) :is(input:not([type=checkbox]):not([type=range]),select){
 background:#fff;color:#142b3a;border:2px solid #86a5b4;border-radius:7px;min-height:44px;
 max-width:min(100%,330px)
}
:is(#create,#play,#library,#packs,#schools) input[type=range]{accent-color:var(--ss-orange)}
:is(#create,#play,#library,#packs,#schools) :is(.sub,#playingname){color:#ffb363}
:is(#create,#play,#library,#packs,#schools) .effects label{
 background:#294759;color:#f3f9fc;border:1px solid #668495;border-radius:8px;
 padding:12px 15px;white-space:normal
}
:is(#create,#play,#library,#packs,#schools) .create-player{
 background:var(--ss-surface);color:#f4fafc;border:2px solid var(--ss-outline);
 border-radius:13px;padding:clamp(12px,2vw,20px)
}
:is(#create,#play,#library,#packs,#schools) .create-player h3{margin:0 0 9px}
#create .wavewrap{border:2px solid #628393;border-radius:11px;overflow:hidden}
#create #waveinfo{color:#ffb45c}
#create .create-trim-controls{background:#243f50;border-radius:10px;padding:10px 13px}
#create .create-trim-controls label{color:#eaf7fb}
#create #create-recording-state{color:#b9f0d3}
#create.is-recording #create-recording-state{color:white}
#create .controls button{flex:1 1 150px}
#create .keyboard,#play .keyboard{margin:16px 0 12px}
#play .effects{margin-top:15px}
#play #stopkeys{width:100%}
#library .items{gap:12px}
#library .item{background:#243f50;color:#f4fafc;border:1px solid #547487;border-radius:12px;padding:15px}
#library .item .info strong{color:#fff;font-size:16px}
#library .item small{color:#cbdde6}
#library .empty{background:#243f50;color:#e5f2f8;border:1px dashed #7392a0;border-radius:11px}
#library .performances-library-shortcut{background:#243f50;color:#e5f2f8;border:1px solid #567789}
#library #library-status{color:#c9e8f1}
#packs #packstatus{color:#ffbb78}
#packs hr{border:0;border-top:1px solid #547282;margin:23px 0}
#schools .challenge-board{background:#243f50;border:2px solid #ed9238}
#schools :is(ol,ul){line-height:1.75}
#schools a{color:#ffbe78}
#schools #school-transfer-status{color:#cfe8ed}
:is(#create,#play,#library,#packs,#schools) :is(button,a,input,select):focus-visible{outline:3px solid #ffce72!important;outline-offset:3px!important}
@media(min-width:1100px){main{max-width:1100px}}
@media(max-width:600px){
 :is(#create,#play,#library,#packs,#schools)>.card{padding:13px;border-width:2px;border-radius:13px}
 :is(#create,#play,#library,#packs,#schools) .row{gap:10px}
 :is(#create,#play,#library,#packs,#schools) .effects label{padding:10px}
 #create .create-player{padding:10px}
}

/* Consistent top-level page titles — typography only. */
:is(#create,#play,#synth,#performance,#library,#packs,#schools) h2:is(:first-child),
#library-sounds>h2, #synth .synth-title h2, #performance .pf-heading h2 {
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:clamp(24px,3.3vw,36px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.015em;
  color:#fff;
}
#performance .pf-heading{flex-wrap:wrap;align-items:center}
#performance .pf-heading h2{margin:0}

/* One Library page, using the existing navigation and original section styling. */
#library:not(.active),#library #library-sounds[hidden],#library #packs[hidden]{display:none!important}
#library .library-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}
#library .library-tabs [role=tab]{background:#2a4b5d;border-bottom-color:#142b3a;color:#fff}
#library .library-tabs [aria-selected=true]{background:#ed852a;border-bottom-color:#ad5217;box-shadow:inset 0 0 0 2px #ffce72}

/* Library-only shared panel. Sections stay in normal flow inside one shell. */
#library .library-shell{min-width:0}
#library .library-header{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--ss-outline)}
#library .library-header>h2{margin:0 0 12px;color:var(--ss-paper);font-size:clamp(24px,3vw,30px);line-height:1.15;font-weight:800;letter-spacing:.015em}
#library .library-tabs{margin:0;gap:8px}
#library .library-tabs [role=tab]{flex:0 1 auto;max-width:100%;min-height:44px}
#library .library-section,#library #packs{min-width:0}
#library .library-section>p:first-of-type{margin-top:0;color:var(--ss-muted);line-height:1.55}
#library .library-pack-section{min-width:0}
#library .library-pack-section+.library-pack-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--ss-outline)}
#library .library-pack-section>h3{margin:0 0 8px;font-size:20px;line-height:1.25;color:var(--ss-paper)}
#library .library-pack-section>p{color:var(--ss-muted);line-height:1.55}
@media(max-width:600px){#library .library-header{padding-bottom:13px;margin-bottom:15px}#library .library-tabs [role=tab]{padding:11px 12px;font-size:14px}}