/* nickkwas.com palette: white, #111 ink, monospace, bordered boxes.
   grey (#ccc) for fills; red only for record / arm. */
:root{
  --ink:#111; --bg:#fff; --grey:#ccc; --faint:#e6e6e6; --mid:#777; --red:#cc2222;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;
}
button{font-family:inherit}

/* enable gate */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#fff}
.overlay.hidden{display:none}
.enable-box{max-width:460px;text-align:center;padding:2rem}
.enable-box h1{font-size:2.6rem;letter-spacing:.32em;margin:0 0 .5rem;font-weight:normal}
.enable-box p{margin:.4rem 0;color:var(--mid)}
#enable-btn{margin:1.2rem 0;padding:.6rem 1.4rem;background:var(--ink);color:#fff;border:1px solid var(--ink);
  font:inherit;cursor:pointer;text-transform:lowercase;letter-spacing:.05em}
#enable-btn:hover{background:#fff;color:var(--ink)}
.enable-box .hint{font-size:.72rem;color:var(--mid)}
.enable-box a{color:inherit}

/* layout: two stacked wide boxes, all visible */
.app{width:1300px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem;padding-bottom:2.2rem}
.app[hidden]{display:none}
.intro .back{margin:0;font-size:.75rem;color:var(--mid)}
.intro .back a{color:inherit;text-decoration:none}
.intro .back a:hover{text-decoration:underline}
.box{border:1px solid var(--ink);padding:.6rem .9rem}
.section-label{font-size:.75rem;font-weight:normal;text-transform:lowercase;letter-spacing:.15em;
  margin:0 0 .85rem;padding-bottom:.4rem;border-bottom:1px solid var(--ink)}

/* levels (VU) */
.vus{display:flex;gap:1rem}
.vu{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;border:1px solid var(--faint);padding:.4rem .4rem .3rem}
.vu canvas{width:100%;height:58px;display:block}
.vu-label{font-size:.65rem;color:var(--mid)}

/* mixer */
.mixer{display:flex;gap:1rem;align-items:stretch;flex-wrap:nowrap}
.strip{flex:0 0 auto;width:96px;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  border:1px solid var(--faint);padding:.5rem .35rem}
.strip-num{font-size:.8rem}
.strip button{font-family:inherit;font-size:.62rem;background:#fff;color:var(--ink);border:1px solid var(--ink);
  padding:.2rem .35rem;cursor:pointer;text-transform:lowercase;width:100%}
.strip .strip-row{display:flex;gap:.25rem;width:100%}
.strip .strip-row button{width:auto;flex:1}
.strip button.on{background:var(--ink);color:#fff}
.strip .arm.on{background:var(--red);color:#fff;border-color:var(--red)}
.strip .inmode.stereo{background:var(--ink);color:#fff}
.pan{width:100%;accent-color:var(--ink)}
.fader-wrap{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:3px;padding:.4rem 0 .2rem} /* push fader to strip bottom so all faders align */
.fader-scale{position:relative;width:9px;height:90px;flex:0 0 auto} /* tick marks alongside the level fader */
.fader-scale i{position:absolute;right:0;width:4px;height:1px;background:var(--mid);opacity:.4;transform:translateY(-50%)}
.fader-scale i.med{width:6px;opacity:.65}
.fader-scale i.maj{width:9px;opacity:.95}
.panrow{width:100%}
.vol,.fxvol,.mvol{writing-mode:vertical-lr;direction:rtl;width:4px;height:90px;accent-color:var(--ink)}
.fx{width:100%;display:flex;flex-direction:column;gap:.18rem;border-top:1px solid var(--faint);padding-top:.3rem}
.fx .tape{width:100%}
.tape-row{display:flex;gap:.25rem;width:100%}
.tape-row button{width:auto}
.tape-row .tape,.tape-row .mtape{flex:1}
.tape-edit{flex:0 0 auto;padding:.2rem .35rem;line-height:1}
.fxk{display:flex;flex-direction:column;align-items:stretch;font-size:.5rem;color:var(--mid);gap:1px;text-transform:lowercase}
.fxk input[type=range]{width:100%;accent-color:var(--ink)}
.sends{width:100%;display:flex;flex-direction:column;gap:.18rem;border-top:1px solid var(--faint);padding-top:.3rem}

/* fx + master channel strips */
.fxstrip select.fxtype{width:100%;font-family:inherit;font-size:.62rem;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:.2rem .35rem;cursor:pointer;text-transform:lowercase;text-align:center;-webkit-appearance:none;appearance:none}
.fxstrip select.fxtype:hover{border-color:var(--ink)}
.masterstrip{border-color:var(--ink)}
.masterstrip .strip-num{font-weight:700;letter-spacing:.05em}

/* middle column: cassette fills the gap; transport sub-box below it */
.mixer-mid{flex:1 1 auto;min-width:130px;display:flex;flex-direction:column;gap:.7rem}
.cassette{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:.2rem .4rem}
.cassette svg{width:100%;height:100%}
.cassette svg *{vector-effect:non-scaling-stroke} /* 1px lines regardless of scale */
.reel{transform-box:fill-box;transform-origin:center}
/* save/load UI written onto the cassette label (inside an SVG foreignObject, so it scales with the drawing) */
.tape-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;font-family:ui-monospace,Menlo,monospace}
.tl-name{width:96%;border:0;background:transparent;text-align:center;font:inherit;font-size:13px;color:var(--ink);padding:0;outline:none}
.tl-name::placeholder{color:var(--mid)}
.tl-actions{display:flex;gap:6px}
.tl-actions button{font:inherit;font-size:9px;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:1px 7px;cursor:pointer;text-transform:lowercase;line-height:1.5}
.tl-actions button:hover{background:var(--ink);color:#fff}
.cassette.spinning .reel{animation:reelspin 1.8s linear infinite}
@keyframes reelspin{to{transform:rotate(360deg)}}

/* transport sub-box (inside the mixer, below the cassette) */
.transport-sub{border:1px solid var(--ink);padding:.45rem .7rem}
.ts-label{font-size:.72rem;text-transform:lowercase;letter-spacing:.12em;border-bottom:1px solid var(--ink);padding-bottom:.3rem;margin-bottom:.5rem}
.ts-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ts-controls button{font-family:inherit;font-size:.7rem;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:.3rem .6rem;cursor:pointer;text-transform:lowercase}
.ts-controls button.on{background:var(--ink);color:#fff}
.ts-controls .rec{color:var(--red);border-color:var(--red)}
.ts-controls .rec.on{background:var(--red);color:#fff;animation:blink 1s steps(1) infinite}
.ts-controls .counter{font-size:1.3rem;min-width:80px;text-align:center}
.ts-controls button:disabled{opacity:.35;cursor:default}

/* master locked to the right (the flex:1 mid column pushes it to the edge) */
.masterstrip{margin-left:auto}
.master-modes{display:flex;flex-direction:column;gap:.2rem;width:100%;border-top:1px solid var(--faint);padding-top:.3rem}
.master-modes button{width:100%}
.mbounce{color:var(--red);border-color:var(--red)}
.mbounce.on{background:var(--red);color:#fff;animation:blink 1s steps(1) infinite}
.mmode.on{background:var(--ink);color:#fff}

/* transport */
.transport-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.85rem}
.tgroup{display:flex;align-items:center;gap:.4rem}
.transport-controls button{font-family:inherit;font-size:.7rem;background:#fff;color:var(--ink);
  border:1px solid var(--ink);padding:.3rem .65rem;cursor:pointer;text-transform:lowercase}
.transport-controls button.on{background:var(--ink);color:#fff}
.transport-controls button:disabled{opacity:.35;cursor:default}
.transport-controls .rec{color:var(--red);border-color:var(--red)}
.transport-controls .rec.on{background:var(--red);color:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.5}}
.counter{font-size:1.3rem;min-width:88px;text-align:center}
.tlabel{font-size:.72rem}
.tlabel input{width:54px;font:inherit;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:.15rem .3rem}
.zoomgroup{margin-left:auto}
.snaptoggle{display:flex;align-items:center;gap:.2rem}
.snaptoggle input{accent-color:var(--ink);cursor:pointer}

/* timeline */
.ruler-row{display:flex;height:20px;border:1px solid var(--faint);border-bottom:0}
.ruler-spacer{flex:0 0 28px;width:28px;border-right:1px solid var(--faint)}
.ruler{flex:1;min-width:0;cursor:pointer}
.ruler canvas{display:block;width:100%;height:100%}
.timeline{display:flex;flex-direction:column;border:1px solid var(--faint)}
.lane-row{display:flex;border-bottom:1px solid var(--faint);height:65px}
.lane-row:last-child{border-bottom:0}
.lane-row.master-lane{height:86px;border-top:2px solid var(--ink)} /* bounce lane: taller + divider */
.lane-num{width:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--mid);border-right:1px solid var(--faint)}
.lane{flex:1;position:relative;min-width:0;background:#fff}
.lane canvas{display:block;width:100%;height:100%}

.tl-scrollbar{display:flex;padding-left:28px;margin-top:5px}
.tl-track{position:relative;flex:1;height:12px;background:#f4f4f4;border:1px solid var(--faint)}
.tl-thumb{position:absolute;top:0;bottom:0;left:0;width:40px;background:var(--grey);border:1px solid var(--mid);cursor:grab}
.tl-thumb:active{cursor:grabbing}

.status{position:fixed;left:0;right:0;bottom:0;padding:.35rem 1.25rem;font-size:.72rem;
  color:var(--mid);background:#fff;border-top:1px solid var(--faint)}

/* tape emulation editor modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.22)}
.modal-card{position:relative;background:#fff;border:1px solid var(--ink);width:360px;max-width:92vw;max-height:88vh;overflow:auto;box-shadow:0 10px 34px rgba(0,0,0,.2)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;border-bottom:1px solid var(--ink);font-size:.8rem;text-transform:lowercase;letter-spacing:.1em}
.modal-head button{font-family:inherit;background:#fff;border:0;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 .2rem}
.modal-body{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.55rem}
.td-field{display:grid;grid-template-columns:5.5rem 1fr 3.5rem;align-items:center;gap:.5rem;font-size:.72rem;color:var(--ink);text-transform:lowercase}
.td-field input[type=range]{width:100%;accent-color:var(--ink)}
.td-val{font-size:.66rem;color:var(--mid);text-align:right;font-variant-numeric:tabular-nums}
.modal-foot{display:flex;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border-top:1px solid var(--ink)}
.modal-foot button{font-family:inherit;font-size:.72rem;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:.32rem .9rem;cursor:pointer;text-transform:lowercase}
.modal-foot button:hover{background:var(--ink);color:#fff}
.tl-spacer{flex:1}
.tl-list{list-style:none;margin:0 0 .6rem;padding:0;max-height:40vh;overflow:auto;border:1px solid var(--faint)}
.tl-list li{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-bottom:1px solid var(--faint);cursor:pointer}
.tl-list li:last-child{border-bottom:0}
.tl-list li:hover{background:#f3f3f3}
.tl-list .tl-pname{flex:1;font-size:.78rem}
.tl-list .tl-del{flex:0 0 auto;border:0;background:none;color:var(--mid);cursor:pointer;font-size:1.05rem;line-height:1;padding:0 .2rem}
.tl-list .tl-del:hover{color:var(--red)}
.tl-empty{font-size:.75rem;color:var(--mid);padding:.3rem .2rem .7rem}
.tl-meter{display:flex;align-items:center;gap:.5rem;font-size:.66rem;color:var(--mid)}
.tl-meter-bar{flex:1;height:6px;background:#f0f0f0;border:1px solid var(--faint);position:relative}
#tl-meter-fill{position:absolute;left:0;top:0;bottom:0;background:var(--mid);width:0}
.tl-meter-text{white-space:nowrap;font-variant-numeric:tabular-nums}