*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Arial,sans-serif;color:#202c33;background:linear-gradient(#83d2f8 0%,#a6e5ff 75%,#69b75c 75%);min-height:100vh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,select{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}header{background:#233640;color:#fff;border-bottom:8px solid #5a9c49;display:flex;align-items:center;gap:15px;padding:12px max(15px,calc((100vw - 1060px)/2))}header img{height:70px;width:70px;object-fit:contain}h1{margin:0;letter-spacing:2px;font-size:clamp(26px,5vw,47px);text-shadow:3px 4px #111}h1 span{color:#ffac2d}header small{letter-spacing:2px;font-weight:800}.badge{margin-left:auto;font-size:11px;background:#ec6b18;padding:8px;border:2px solid #ffb663;font-weight:900}nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:15px}button,.button{background:#168bd0;color:white;font-weight:900;border:0;border-bottom:6px solid #0b567e;border-radius:5px;padding:13px 16px;cursor:pointer;font-size:15px;touch-action:manipulation;text-align:center}button:disabled{opacity:.4;cursor:not-allowed}.red{background:#e84b28;border-color:#a4311c}.green{background:#38a64c;border-color:#20702e}.purple{background:#8746c4;border-color:#582b8b}nav button{background:#4d6a78;border-color:#283d48}nav button.active{background:#f28b25;border-color:#a85b18}.tab{display:none}.tab.active{display:block}main{max-width:1050px;margin:0 auto;padding:0 15px 25px}.card{background:#f8f3df;border:6px solid #7b5837;box-shadow:8px 8px #3f503c;padding:18px;margin-bottom:20px}h2{margin:0 0 7px}.controls{display:flex;gap:10px;margin:15px 0;flex-wrap:wrap}.controls>*{flex:1;min-width:125px}.controls.small button{min-width:160px}.row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:15px 0}.row label{font-weight:700}input:not([type=checkbox]):not([type=range]),select{padding:10px;border:2px solid #8d8d80;border-radius:3px;font-size:16px;max-width:220px}.wavewrap{background:#172b39;border:4px solid #496074;position:relative}#wave{width:100%;height:165px;display:block;touch-action:none}#waveinfo{color:#ffae37;font-weight:900;letter-spacing:1px;padding:5px 12px;font-size:13px}.hint{font-size:14px}.effects{display:flex;flex-wrap:wrap;gap:12px;margin:15px 0}.effects label{background:#e8dfc5;padding:12px 14px;border:2px solid #bcae8b;font-weight:900;white-space:nowrap}.effects input{accent-color:#e76c19;transform:scale(1.25);margin-right:6px}.keyboard{height:190px;display:flex;position:relative;touch-action:none;margin:20px 0}.key{position:absolute;top:0;height:100%;background:#fff;border:2px solid #30343c;border-bottom:10px solid #b6b6b6;border-radius:0 0 6px 6px;padding:0;min-width:0}.key.black{height:60%;z-index:2;background:#20242b;border-color:#15171c;border-bottom-color:#080808}.key:active,.key.pressed{background:#ffab31}.sub{color:#bc5812;font-weight:900}.items{display:grid;gap:12px}.item{background:#fff;border:3px solid #d6c5a5;padding:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.item .info{flex:1;min-width:170px}.item .info strong{display:block}.item button{padding:9px;font-size:13px}.item audio{max-width:220px;width:100%}.item small{display:block;color:#58616a}.item select{max-width:170px}.empty{padding:25px;background:#e6e1ce}footer{text-align:center;background:#233640;color:#fff;padding:18px;font-weight:800;font-size:12px}hr{border:1px solid #d6c5a5}@media(max-width:600px){header img{height:55px;width:55px}.badge{display:none}nav button{font-size:12px;padding:11px 9px}.card{padding:11px}.controls>*{min-width:42%}.keyboard{height:145px}}
.create-player{background:#efe7ce;border:3px solid #c6ae7c;padding:12px;margin:18px 0}.create-player h3{margin:0}.create-player .keyboard{margin:12px 0}.create-player .controls{margin-bottom:0}

/* Separate SYNTH page; existing page styles preserved */
.synth-card{background:#f7f1dc}.synth-top{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;background:#263c4b;color:#fff;padding:15px;border:4px solid #ff8b20}.synth-top label{display:block;font-weight:900;margin-bottom:6px}.synth-top select{max-width:min(80vw,370px);width:340px}.synth-root{max-width:330px;font-weight:800}.synth-root strong{display:block;color:#ffa532;font-size:22px}.synth-root small{display:block;font-weight:400}.synth-wave{margin:14px 0;background:#172b39;border:4px solid #536875;color:#ffac38}.synth-wave canvas{width:100%;height:125px;display:block}.synth-wave #synth-info{padding:7px 12px;font-weight:800}.synth-rack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.synth-rack fieldset{min-width:0;background:#2a3c48;color:#fff;border:4px solid #5b7786;border-bottom-color:#16232a;padding:14px}.synth-rack legend{font-weight:900;color:#ffac38;background:#263b48;padding:5px 9px;border:2px solid #668393}.synth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.synth-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:800}.synth-grid output{color:#ffc36b;font-weight:900}.synth-grid input[type=range]{width:100%;accent-color:#ff891e;height:27px;cursor:pointer;touch-action:pan-y}.synth-grid select{max-width:100%}.synth-switches{display:flex;flex-wrap:wrap;gap:20px;margin:8px 0 12px;font-weight:900}.synth-switches input{width:20px;height:20px;accent-color:#ff891e;vertical-align:middle}.synth-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.synth-actions button{flex:1}.synth-card h3{margin:18px 0 0}.synth-card .keyboard{margin:12px 0}.synth-card #synth-status{color:#a95b15;font-weight:800}#synth-keyboard .key{touch-action:none}#synth-keyboard .key:focus-visible{outline:3px solid #ff8b20;outline-offset:2px}@media(max-width:700px){.synth-rack{grid-template-columns:1fr}.synth-grid{gap:9px}.synth-card .keyboard{height:155px}}

.synth-save{margin-top:18px;padding:16px;border:4px solid #ef912e;background:#fff0c9}.synth-save h3{margin:0;color:#81451b}.synth-save p{line-height:1.45}.synth-save .row{align-items:end}.synth-save input,.synth-save select{min-width:150px}.synth-save small{font-weight:700;color:#665137}

.synth-midi{margin:20px 0 14px;background:#263c4b;color:white;border:4px solid #ff8b20;padding:16px;min-width:0}.synth-midi legend{font-weight:900;color:#ffac38;background:#263c4b;padding:4px 10px}.synth-midi p{margin:0 0 12px}.synth-midi .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}.synth-midi button{margin:4px 6px 4px 0;min-height:46px}.synth-midi strong{color:#ffbd64}.synth-midi small{display:block;line-height:1.5}.synth-midi select{width:100%;max-width:400px}.synth-midi .synth-grid{align-items:end}

/* Schools extension */
.challenge-board{margin:22px 0;padding:20px;border:3px solid #ff891e;border-radius:16px;background:#182e3b}#challenge-text{font-size:1.2rem;font-weight:700;line-height:1.5}#schools ol{line-height:1.8}#schools .controls{flex-wrap:wrap}#schools a{color:#ffb45d}#school-transfer-status{overflow-wrap:anywhere}

/* SYNTH trim: independent, touch-friendly, non-destructive */
#synth-wave{touch-action:none;cursor:ew-resize}.synth-trim{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0 0 16px;padding:13px;background:#263c4b;color:#fff;border:3px solid #ff8b20}.synth-trim>div:first-child{flex:1 1 230px}.synth-trim p{margin:6px 0 0;font-size:13px}.synth-trim-controls{flex:2 1 320px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}.synth-trim-controls label{display:flex;flex-direction:column;font-weight:800;font-size:13px}.synth-trim-controls input{width:100%;accent-color:#ffad36;min-height:32px}.synth-trim-controls span{font-weight:800;color:#ffb94e}.synth-trim-controls button{min-height:42px}@media(max-width:650px){.synth-trim-controls{grid-template-columns:1fr}}


/* SYNTH visual instrument redesign: only scoped to SYNTH */
#synth .synth-redesign{background:#142a39;color:#f4f8f7;border-color:#f5a03c;border-radius:16px;box-shadow:8px 8px #223a43;padding:18px 20px 22px}
#synth .synth-title{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#synth .synth-title h2{font-size:clamp(25px,4vw,38px);margin:2px 0;color:#fff}
#synth .synth-title p{margin:0;color:#d3e6e7}
#synth .synth-eyebrow{color:#ffb66c;font-size:11px;font-weight:900;letter-spacing:1.5px}
#synth .synth-source-badge{background:#29473f;color:#adf5c7;border:2px solid #67b995;border-radius:30px;padding:10px 13px;font-weight:900;font-size:12px}
#synth .synth-top{border-radius:12px;background:#233e50;border:2px solid #456b78;padding:12px 16px}
#synth .synth-root strong{font-size:17px}
#synth .synth-sample-panel{margin:16px 0;padding:14px;border-radius:15px;background:#203848;border:2px solid #446174}
#synth .synth-panel-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
#synth .synth-panel-heading h3{margin:0 0 10px;font-size:18px;color:#fff}
#synth .synth-panel-heading span{font-size:12px;color:#bcd1d9}
#synth .synth-wave{margin:3px 0 10px;border:2px solid #67818b;border-radius:10px;overflow:hidden}
#synth .synth-wave canvas{height:170px}
#synth .synth-trim{margin:0;background:#294455;border:0;border-radius:10px;padding:12px}
#synth .synth-trim p{color:#d1e3e8}
#synth .synth-presets{background:#2b3e53;border:2px solid #647c92;border-radius:14px;padding:14px;margin:16px 0}
#synth .synth-presets strong{display:block;color:#fff;margin-bottom:9px}
#synth .synth-preset-buttons{display:flex;gap:9px;flex-wrap:wrap}
#synth .synth-preset-buttons button{border-radius:25px;min-height:48px;background:#654ca2;border-color:#49337e}
#synth .synth-preset-buttons button[data-sy-preset=underwater]{background:#157d91;border-color:#075463}
#synth .synth-preset-buttons button[data-sy-preset=space]{background:#2868aa;border-color:#184572}
#synth .synth-preset-buttons button[data-sy-preset="tiny-mouse"]{background:#a84683;border-color:#71305b}
#synth .synth-preset-buttons button[data-sy-preset=giant]{background:#855331;border-color:#5e3921}
#synth .synth-preset-buttons button[data-sy-preset=dreamy]{background:#7156a5;border-color:#4e3b78}
#synth .synth-preset-buttons button[data-sy-preset=pingpong]{background:#177d79;border-color:#0b5855}
#synth .synth-preset-buttons button[data-sy-preset=default]{background:#46616e;border-color:#2b404a}
#synth .synth-presets small{display:block;color:#c9dce4;margin-top:10px}
#synth .synth-hero-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
#synth .synth-hero{border-radius:18px;padding:18px 16px 20px;text-align:center;min-width:0;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px rgba(255,255,255,.15)}
#synth .synth-hero.orange{background:#633b20;--accent:#ffa63e}
#synth .synth-hero.violet{background:#49386c;--accent:#d7adff}
#synth .synth-hero.blue{background:#254c75;--accent:#9bdbff}
#synth .synth-hero-icon{font-size:38px;line-height:1.2}
#synth .synth-hero h3{margin:8px 0 0;font-size:clamp(15px,2vw,21px);color:white}
#synth .synth-hero p{margin:3px 0 12px;color:#f4f5fc;font-size:13px}
#synth .synth-hero label{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:900;font-size:0}
#synth .synth-hero output{font-size:20px;color:var(--accent);font-weight:900}
#synth .synth-hero input[type=range]{width:min(100%,240px);accent-color:var(--accent);height:38px;cursor:pointer;touch-action:pan-y}
#synth .synth-envelope-panel{background:#20433f;border:2px solid #5cae91;border-radius:16px;padding:16px;margin:18px 0}
#synth #sy-env-graph{display:block;width:100%;height:170px;border-radius:12px;touch-action:pan-y}
#synth .synth-env-hint{font-size:12px;color:#d0eee2}
#synth .synth-env-sliders .synth-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#synth .synth-env-sliders fieldset{border:0;padding:0;background:transparent;min-width:0}
#synth .synth-env-sliders legend{display:none}
#synth .synth-env-sliders label{color:#f0fff6}
#synth .synth-env-sliders output{color:#9af9cb}
#synth .synth-env-sliders input{accent-color:#73e9b0}
#synth .synth-advanced{margin:18px 0}
#synth .synth-advanced h3{margin:0;color:#fff}
#synth .synth-advanced>p{color:#c2d5dd;margin:6px 0 13px}
#synth .synth-drawers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#synth .synth-drawers details{background:#253e50;border:2px solid #476d80;border-radius:11px;min-width:0}
#synth .synth-drawers summary{padding:14px;cursor:pointer;font-weight:900;color:#fff;min-height:48px}
#synth .synth-drawers details[open]{grid-row:span 2}
#synth .synth-drawers fieldset{border:0;border-top:1px solid #567687;background:transparent;padding:13px;margin:0}
#synth .synth-drawers legend{display:none}
#synth .synth-drawers .synth-grid{grid-template-columns:1fr}
#synth .synth-drawers .synth-midi{margin:0;border:0;background:transparent;padding:12px}
#synth .synth-drawers .synth-midi legend{display:none}
#synth .synth-save{background:#fff0cb;color:#253340;border-radius:14px;border:3px solid #f8a23b}
#synth .synth-save p{color:#354554}
#synth .synth-reset-area{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
#synth .synth-reset-area span{font-size:13px;color:#c2d8dd}
#synth .synth-keyboard-dock{position:sticky;bottom:0;z-index:10;background:#162d3c;border:3px solid #f69b2f;border-radius:14px;padding:10px 12px 5px;box-shadow:0 -5px 22px #091d28b3;margin-top:20px}
#synth .synth-dock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#synth .synth-dock-heading strong{display:block;color:#fff}
#synth .synth-dock-heading small{display:block;color:#c5d9e2;font-size:11px;margin-top:3px}
#synth .synth-dock-heading button{min-height:45px;padding:9px 12px;font-size:13px;flex-shrink:0}
#synth .synth-keyboard-dock .keyboard{height:125px;margin:9px 0 4px}
#synth .synth-keyboard-dock #synth-status{color:#ffc47a;font-size:12px;min-height:17px}
#synth .synth-keyboard-dock .key[data-shortcut]::after{content:attr(data-shortcut);position:absolute;bottom:9px;left:0;right:0;font-size:clamp(9px,1.5vw,13px);font-weight:900;color:#334b59;pointer-events:none}
#synth .synth-keyboard-dock .key.black[data-shortcut]::after{color:#fff;bottom:7px}
#synth .synth-keyboard-dock .key.pressed{background:#ffb44d}
#synth :is(button,input,select,summary):focus-visible{outline:3px solid #fff07c;outline-offset:3px}
#synth .synth-keyboard-dock .key:focus-visible{outline:3px solid #ffcf64}
@media(max-width:750px){#synth .synth-hero-controls{gap:8px}#synth .synth-hero{padding:12px 7px}#synth .synth-hero-icon{font-size:27px}#synth .synth-env-sliders .synth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#synth .synth-drawers{grid-template-columns:1fr}#synth .synth-keyboard-dock .keyboard{height:90px}#synth .synth-dock-heading small{font-size:10px}}
@media(max-width:470px){#synth .synth-redesign{padding:10px}#synth .synth-hero-controls{grid-template-columns:1fr}#synth .synth-hero{display:grid;grid-template-columns:45px 1fr;align-items:center;text-align:left;gap:3px 9px}#synth .synth-hero-icon{grid-row:span 3}#synth .synth-hero p{margin:0}#synth .synth-hero label{grid-column:2}#synth .synth-keyboard-dock .keyboard{height:68px}#synth .synth-keyboard-dock{padding:6px}#synth .synth-dock-heading strong{font-size:12px}#synth .synth-dock-heading button{font-size:11px;padding:6px}#synth .synth-sample-panel{padding:8px}#synth .synth-wave canvas{height:125px}}
@media(prefers-reduced-motion:reduce){#synth *{scroll-behavior:auto;animation:none!important;transition:none!important}}

/* Contextual help: per-page show/hide, without concealing audio or status controls */
.help-hidden{display:none!important}


/* SYNTH shortcut letters only appear when the global Help setting is visible.
   The keys themselves and their accessible names remain available at all times. */
body:not(.synth-shortcuts-visible) #synth .synth-keyboard-dock .key[data-shortcut]::after { content: none; }

/* Performance recordings library shortcut — isolated from other page layouts. */
#library .performances-library-shortcut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border-radius:12px;background:#edf6fb;color:#203847;font-size:14px}
#library .performances-library-shortcut button{min-height:42px;white-space:nowrap}

/* Shared accessibility and layout polish; no audio or storage changes. */
:root{--ss-navy:#233640;--ss-orange:#f28b25;--ss-green:#5a9c49;--ss-focus:#ffb12e}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ss-focus)!important;outline-offset:3px!important}
nav button[aria-current="page"]{box-shadow:inset 0 0 0 2px #fff7dd}
#create #create-recording-state{font-weight:800;color:#245747;margin:8px 0}
#create.is-recording #create-recording-state{background:#9e241b;color:white;border-radius:5px;padding:10px}
#create .create-trim-controls{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0}
#create .create-trim-controls label{flex:1 1 180px;display:grid;gap:4px;font-weight:750}
#create .create-trim-controls input{width:100%;accent-color:#ed8c20}
#create #discard-recording{background:#733a39;border-color:#472524}
#library #library-status{font-weight:700;line-height:1.5}
#packs #packstatus{min-height:1.5em;font-weight:700}
#play .play-empty-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:1000px){#create .card,#play .card,#library .card,#packs .card,#schools .card{max-width:1000px;margin-inline:auto}}
@media(max-width:600px){header{gap:10px;padding:10px 14px}header h1{font-size:clamp(23px,6vw,34px)}main{padding-inline:10px}.card{border-width:3px;box-shadow:3px 3px #3f503c}.controls>*{min-width:0;flex:1 1 42%}}

/* Hide visual shortcut letters on SYNTH piano keys; preserve accessible labels and keyboard controls. */
#synth .synth-keyboard-dock .key[data-shortcut]::after { content: none !important; }

/* Navigation/safety test: prevent the Synth dock from covering the waveform or focused controls. */
#synth .synth-keyboard-dock{position:relative;bottom:auto;z-index:1}
#synth .synth-dock-spacer{display:none}
#library .empty button{display:inline-block;margin:12px 0 0}
#create .create-trim-controls input:disabled{opacity:.45;cursor:not-allowed}
#create #create-trim-availability{display:block;flex-basis:100%;font-size:14px}

/* Visual corrections test: Synth keyboard in normal flow, directly after sound adventures. */
#synth .synth-keyboard-dock{position:static!important;bottom:auto!important;z-index:auto!important;margin:14px 0 22px;box-shadow:0 5px 16px #091d2860}
#synth .synth-dock-spacer{display:none!important}
/* Library cards: name and preview get their own rows; actions remain directly visible. */
#library #items .item{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:10px 12px;padding:16px;border-radius:10px;background:#203a4b;border:2px solid #65879b;color:#f5fbff;min-width:0}
#library #items .item .info{grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
#library #items .item .info strong{font-size:18px;color:#fff}
#library #items .item .info small{color:#c9dce7;margin-top:4px}
#library #items .item audio{grid-column:1/-1;max-width:420px;width:100%;min-width:0}
#library #items .item button,#library #items .item select{min-height:44px;max-width:none;width:100%;min-width:0}
#library #items .item button.red{grid-column:4;background:#c63d3f;border-color:#8e2229}
#library #items .item :is(button,select,audio):focus-visible{outline:3px solid #ffc266;outline-offset:3px}
@media(max-width:680px){#library #items .item{grid-template-columns:repeat(2,minmax(0,1fr))}#library #items .item button.red{grid-column:2}}
@media(max-width:360px){#library #items .item{grid-template-columns:1fr}#library #items .item button.red{grid-column:1}}
/* Avoid overflow at zoom and narrow viewports. */
#library .card,#synth .card,#performance .pf-shell{min-width:0}
#library .row>*{min-width:0;max-width:100%}
@media(max-width:520px){nav{gap:6px;padding:10px 6px}nav button{min-height:44px;white-space:normal}#synth .synth-dock-heading{flex-wrap:wrap}#synth .synth-dock-heading button{min-height:44px}}