/* MOSS FROG CHORUS — bauhaus pond. System fonts only. */
*{box-sizing:border-box}
:root{
  --paper:#F4EFE2; --ink:#16130D; --red:#D8402A; --yellow:#F2B705;
  --blue:#2447F5; --moss:#3E6B34; --pond:#0E3B2E;
  --shadow:6px 6px 0 var(--ink);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.45;
}
/* top bar */
.topbar{
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:6px solid var(--red);
}
.shapes{display:flex; align-items:center; gap:10px}
.sh{display:inline-block}
.sh.circle{width:34px;height:34px;border-radius:50%;background:var(--red)}
.sh.square{width:30px;height:30px;background:var(--yellow)}
.sh.tri{width:0;height:0;border-left:19px solid transparent;border-right:19px solid transparent;border-bottom:32px solid var(--blue)}
.titleblock h1{
  margin:0; font-size:clamp(22px,4vw,34px); font-weight:900; letter-spacing:.04em; line-height:1;
}
.titleblock .sub{margin:2px 0 0; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.badges{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.badges span{border:2px solid var(--paper); padding:2px 10px; font-size:11px; font-weight:800; letter-spacing:.12em}
/* ticker */
.ticker{background:var(--yellow); border-bottom:3px solid var(--ink); overflow:hidden; white-space:nowrap; font-weight:800; font-size:12px; letter-spacing:.18em; padding:6px 0}
.ticker span{display:inline-block; padding-left:100%; animation:tick 22s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
/* layout */
.layout{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:18px;
  max-width:1180px; margin:0 auto; padding:18px 18px 8px;
}
.panel{background:#fffdf6; border:3px solid var(--ink); box-shadow:var(--shadow); padding:16px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.panel-head h2{margin:0; font-size:15px; letter-spacing:.14em}
.panel-head h2 b{background:var(--ink); color:var(--paper); padding:2px 8px; margin-right:8px}
.head-actions{display:flex; gap:8px}
.hint{font-size:12.5px; opacity:.72; margin:4px 0 12px}
kbd{background:var(--ink); color:#fff; border-radius:4px; padding:0 6px; font-size:11px; font-family:inherit}
/* pads */
.pads{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.pad{
  position:relative; border:3px solid var(--ink); border-radius:18px; cursor:pointer;
  min-height:118px; padding:10px 8px 8px; text-align:center; color:var(--ink);
  font-family:inherit; box-shadow:5px 5px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
  overflow:hidden;
}
.pad:active,.pad.hit{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.pad .disc{
  width:52px;height:52px; margin:2px auto 6px; border-radius:50%;
  border:3px solid var(--ink); display:grid; place-items:center;
  font-size:24px; background:rgba(255,255,255,.55);
}
.pad .nm{font-weight:900; letter-spacing:.1em; font-size:13px}
.pad .ln{font-size:10.5px; font-weight:700; letter-spacing:.14em; opacity:.7}
.pad .key{position:absolute; top:6px; left:8px; font-size:10px; font-weight:900; border:2px solid var(--ink); border-radius:6px; padding:0 5px; background:#fff}
.pad.muted{filter:grayscale(.85); opacity:.55}
.pad .rip{position:absolute; left:50%; top:44%; width:10px; height:10px; border-radius:50%;
  border:3px solid var(--ink); transform:translate(-50%,-50%); pointer-events:none; opacity:0}
.pad.hit .rip{animation:rip .5s ease-out}
@keyframes rip{0%{opacity:.9; width:12px;height:12px}100%{opacity:0; width:120px;height:120px}}
.pad.flash{outline:4px solid var(--ink); outline-offset:-4px}
/* per-frog colors */
.f0{background:#BFD0FF}.f1{background:#FFD9D2}.f2{background:#FFE9A8}.f3{background:#CFE8C8}
.f4{background:#FFC46B}.f5{background:#D8CBFF}.f6{background:#BFE3D6}.f7{background:#FFB3C8}
/* meter */
.meter-row{display:flex; align-items:center; gap:10px; margin-top:14px}
.meter-label{font-size:11px; font-weight:900; letter-spacing:.16em}
.meter{flex:1; height:16px; border:3px solid var(--ink); background:#fff; position:relative; overflow:hidden}
.meter i{position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--blue),var(--red),var(--yellow))}
.readout{font-size:11.5px; font-weight:800; letter-spacing:.1em}
/* console */
.sliders{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:6px 0 4px}
.slider{font-size:11.5px; font-weight:900; letter-spacing:.14em; display:block; background:var(--paper); border:3px solid var(--ink); padding:8px 10px 10px}
.slider b{float:right}
.slider input{width:100%; margin-top:8px; appearance:none; height:10px; background:var(--ink); outline:none; cursor:pointer}
.slider input::-webkit-slider-thumb{appearance:none; width:24px; height:24px; border-radius:50%; background:var(--red); border:3px solid var(--ink); cursor:pointer}
.slider input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.toggles{display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap}
.evolve-note{font-size:12px; opacity:.7}
/* buttons */
.btn{
  font-family:inherit; font-weight:900; letter-spacing:.1em; font-size:13px;
  border:3px solid var(--ink); background:var(--yellow); color:var(--ink);
  padding:9px 16px; cursor:pointer; box-shadow:4px 4px 0 var(--ink); text-transform:uppercase;
  transition:transform .07s ease, box-shadow .07s ease;
}
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink)}
.btn.small{font-size:11px; padding:6px 10px; box-shadow:3px 3px 0 var(--ink); background:#fff}
.btn.small.on{background:var(--ink); color:var(--yellow)}
.btn.play{background:var(--red); color:#fff; min-width:190px}
.btn.play.playing{background:var(--moss)}
.btn.rec{background:#fff}
.btn.rec.armed{background:var(--red); color:#fff; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{box-shadow:0 0 0 var(--ink)}}
/* lanes */
.lanes{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.lane{border:3px solid var(--ink); background:#fff; display:grid; grid-template-columns:118px 1fr 34px; align-items:center; gap:8px; padding:6px 8px}
.lane.evo{animation:evoflash .8s ease}
@keyframes evoflash{0%{background:var(--yellow)}100%{background:#fff}}
.lane .lname{font-size:11px; font-weight:900; letter-spacing:.08em; display:flex; align-items:center; gap:6px}
.lane .lname i{width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); flex:none}
.lane .steps{display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding:2px}
.st{flex:none; width:22px; height:22px; border:2.5px solid var(--ink); background:#fff; cursor:pointer; padding:0; position:relative}
.st.sq{border-radius:4px}.st.rd{border-radius:50%}.st.tr{background:#fff; clip-path:polygon(50% 0,100% 100%,0 100%); border:none; background:var(--ink)}
.st.tr.on{background:var(--red)}
.st.on{background:var(--ink)}
.lane[data-i="0"] .st.on{background:var(--blue)} .lane[data-i="1"] .st.on{background:var(--red)}
.lane[data-i="2"] .st.on{background:#B88A00} .lane[data-i="3"] .st.on{background:var(--moss)}
.lane[data-i="4"] .st.on{background:#C26A00} .lane[data-i="5"] .st.on{background:#5B3DF0}
.lane[data-i="6"] .st.on{background:#0E6B54} .lane[data-i="7"] .st.on{background:#C2145B}
.st.now{outline:3px solid var(--red); outline-offset:1px}
.mute{border:2.5px solid var(--ink); background:#fff; font-weight:900; cursor:pointer; width:30px; height:30px}
.lane.off .steps{opacity:.3} .lane.off .lname{opacity:.5}
/* rec */
.rec-row{display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap}
.rec-time{font-weight:900; font-variant-numeric:tabular-nums; font-size:13px}
.loopbox{margin-top:10px; border:3px dashed var(--ink); padding:10px}
.loopbox audio{width:100%}
.foot{
  max-width:1180px; margin:10px auto 26px; padding:0 18px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:12px; font-weight:700; letter-spacing:.06em; opacity:.85;
}
#toasts{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:50}
.toast{background:var(--ink); color:var(--paper); font-weight:800; font-size:13px; padding:10px 18px; border:3px solid var(--paper); box-shadow:var(--shadow)}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
@media (max-width:480px){
  .pads{grid-template-columns:repeat(2,1fr)}
  .sliders{grid-template-columns:1fr}
  .lane{grid-template-columns:92px 1fr 32px}
  .st{width:18px;height:18px}
  .btn.play{min-width:0; width:100%}
}