/* Touching Sound /learn — same phosphor language as lab.html */
:root{
  --bg:#060a08; --panel:#0b120e; --line:#1b2a21;
  --ink:#c8e6d0; --dim:#5c7a66;
  --phos:#4ade80; --phos-dim:#166534;
  --amber:#fbbf24; --red:#f87171;
  --mono:"IBM Plex Mono",monospace; --disp:"Instrument Serif",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:var(--mono); color:var(--ink); font-size:14px;
  max-width:720px; margin:0 auto; padding:0 12px 80px;
  background:
    radial-gradient(1200px 500px at 50% -100px, #0d1a12 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(74,222,128,.012) 3px 4px);
}
#bar{position:sticky;top:0;z-index:10;background:#060a08f2;backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);padding:8px 0;margin:0 -12px 12px;padding-left:12px;padding-right:12px}
#bar .row1{display:flex;gap:8px;align-items:center}
#bar h1{font-family:var(--disp);font-style:italic;font-weight:400;
  font-size:20px;color:var(--phos);white-space:nowrap}
#bar h1 a{color:inherit;text-decoration:none}
#status{font-size:11px;color:var(--dim);padding-top:4px;min-height:1.2em}
#status.err{color:var(--red);white-space:pre-wrap}
#midi-badge{font-size:10px;color:var(--amber);letter-spacing:1px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:12px;margin-bottom:12px}
.panel h2{font-size:10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:10px}
.panel h2 span{color:#3a4f42;text-transform:none;letter-spacing:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
select,button,textarea{font-family:var(--mono);font-size:13px;color:var(--ink);
  background:#0f1813;border:1px solid var(--line);border-radius:4px}
select{padding:8px;flex:1;min-width:90px}
button{padding:8px 12px;cursor:pointer;transition:all .12s}
button:active{transform:translateY(1px)}
button.primary{background:var(--phos-dim);border-color:var(--phos);color:#eafff0;font-weight:600}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pad{padding:18px 0;font-weight:600;font-size:11px;letter-spacing:1px;
  background:#0f1813;border:1px solid var(--line);border-radius:6px;
  color:var(--phos);touch-action:manipulation;user-select:none}
.pad:active{background:var(--phos-dim);border-color:var(--phos)}
canvas{width:100%;display:block;border-radius:4px;background:#04070560}
/* sequencer */
#seq{display:grid;grid-template-columns:52px repeat(16,1fr);gap:2px;margin-bottom:8px}
#seq .lane{font-size:9px;color:var(--dim);align-self:center;letter-spacing:.5px}
#seq .cell{aspect-ratio:1;border:1px solid var(--line);border-radius:2px;
  background:#0f1813;touch-action:manipulation}
#seq .cell.q{border-color:#2a4033}
#seq .cell.on{background:var(--phos-dim);border-color:var(--phos)}
#seq .cell.now{box-shadow:inset 0 0 0 1px var(--amber)}
#arm.rec{color:var(--red);border-color:var(--red);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:.5}}
#bands{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:4px}
.band{text-align:center}
.band .bar{height:90px;background:#0f1813;border:1px solid var(--line);
  border-radius:3px;position:relative;overflow:hidden}
.band .fill{position:absolute;bottom:0;left:0;right:0;height:0%;
  background:linear-gradient(to top,var(--phos-dim),var(--phos));transition:height .1s}
.band .pct{font-size:11px;color:var(--phos);margin-top:4px;min-height:1.2em}
.band .name{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.band .hz{font-size:8px;color:#3a4f42}
#describe{font-family:var(--disp);font-size:19px;line-height:1.45;color:#dff2e4}
#describe em{color:var(--amber);font-style:italic}
#describe .hint{color:var(--dim);font-size:16px}
#describe .who{font-family:var(--mono);font-size:11px;color:var(--phos);
  display:block;margin-bottom:6px;letter-spacing:1px}
#params details{border:1px solid var(--line);border-radius:4px;margin-bottom:8px;background:#0f1813}
#params summary{padding:8px 10px;font-size:11px;color:var(--phos);cursor:pointer;
  text-transform:uppercase;letter-spacing:1.5px;user-select:none}
#params .group-body{padding:4px 10px 8px}
#params .param{margin-bottom:8px}
#params label{display:flex;justify-content:space-between;font-size:12px;
  color:var(--dim);margin-bottom:2px}
#params label b{color:var(--ink);font-weight:400}
#params input[type=range]{width:100%;accent-color:var(--phos);height:26px}
textarea{width:100%;min-height:320px;padding:10px;font-size:12px;line-height:1.5;
  color:#b7d9c1;resize:vertical;white-space:pre;tab-size:4}
.foot{font-size:10px;color:#3a4f42;text-align:center;margin-top:16px;line-height:1.8}
.foot a{color:var(--dim)}

/* ---- keyboard ---- */
#keys{display:grid;grid-template-rows:96px 64px;grid-auto-columns:1fr;gap:0 2px}
.key{border:1px solid var(--line);border-radius:0 0 4px 4px;background:#dfeee3;
  touch-action:manipulation;user-select:none;padding:0;
  font-size:9px;color:#3a4f42;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:4px}
.key.black{background:#0f1813;border-color:#000;z-index:2;border-radius:0 0 3px 3px;
  margin:0 10%}
.key.held{background:var(--phos)}
.key.black.held{background:var(--phos-dim)}
@media (pointer:coarse){ #keys{grid-template-rows:130px 90px} }

/* ---- mixer ---- */
#mixer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.strip{background:#0f1813;border:1px solid var(--line);border-radius:6px;padding:10px;text-align:center}
.strip .sname{font-size:10px;color:var(--phos);letter-spacing:1.5px;margin-bottom:8px}
.strip .fader{width:100%;accent-color:var(--phos);height:34px}
.strip .ms{display:flex;gap:6px;justify-content:center;margin-top:6px}
.strip .ms button{padding:6px 12px;font-size:11px;font-weight:600}
.strip .mute.on{background:var(--red);border-color:var(--red);color:#160606}
.strip .solo.on{background:var(--amber);border-color:var(--amber);color:#161006}
#autowrite.rec{color:var(--red);border-color:var(--red);animation:blink 1s step-end infinite}
@media (pointer:coarse){ .strip .ms button{padding:10px 16px} }

/* ---- lesson prose ---- */
.listen{font-family:var(--disp);font-size:19px;line-height:1.5;color:#dff2e4}
ol.tinker{margin-left:1.4em}
ol.tinker li{margin-bottom:10px;line-height:1.5}
.make-text{font-size:15px;line-height:1.5;color:var(--amber)}
#reflect{min-height:90px;white-space:pre-wrap;font-size:14px;color:var(--ink)}
.pn{display:flex;justify-content:space-between;margin-top:8px}
.pn a{color:var(--phos);text-decoration:none;font-size:13px}

/* ---- index cards ---- */
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:14px;margin-bottom:10px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.card:hover{border-color:var(--phos-dim)}
.card h3{font-family:var(--disp);font-style:italic;font-weight:400;font-size:20px;color:var(--phos)}
.card p{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}
.card.jam h3{color:var(--amber)}
.card.now-exploring{border-color:var(--phos);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 14px #4ade8055}}

/* ---- class overlay ---- */
#class-overlay{display:none}
#class-overlay.lecture,#class-overlay.timer{
  display:flex;position:fixed;inset:0;z-index:100;
  background:#060a08f7;align-items:center;justify-content:center;text-align:center}
#class-overlay .big{font-family:var(--disp);font-style:italic;color:var(--phos);
  font-size:clamp(3rem,16vw,9rem);line-height:1.1}