@font-face{font-family:Chivo;src:url(fonts/chivo-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:Chivo;src:url(fonts/chivo-900.woff2) format("woff2");font-weight:900}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-700.woff2) format("woff2");font-weight:700}
:root{--paper:#f2f0eb;--ink:#111210;--red:#d42a1e;--hair:#111210;--faint:#cfcbc0;--quiet:#5c594f}
*{box-sizing:border-box;border-radius:0}
html{background:var(--paper);color:var(--ink)}
body{font-family:Chivo,Helvetica,Arial,sans-serif;margin:0;padding:28px 36px 48px;max-width:none}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"zero" 1}
h1{font-weight:900;font-size:64px;letter-spacing:-.03em;margin:0;line-height:.95}
.lede{font-size:19px;margin:8px 0 0}
h2{font-size:13px;font-weight:700;letter-spacing:.09em;border-top:1px solid var(--hair);padding-top:10px;margin:40px 0 4px}
.note{font-size:12px;margin:0 0 14px;line-height:1.5}

/* controls: 1px, square, hover underlines, never inverts */
button,input{font:inherit;background:transparent;color:inherit;border:1px solid var(--hair);padding:4px 10px;border-radius:0}
button{cursor:pointer;font-weight:700}
button:hover,a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
button.on{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input[type=number]{background:var(--paper);padding:2px 6px;appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0;height:18px;width:150px;vertical-align:middle;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink);border:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-6.5px;background:var(--ink);border:0;border-radius:0}
input[type=range]::-moz-range-track{height:1px;background:var(--ink);border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--ink);border:0;border-radius:0}

/* header: wordmark left, transport right; the one 2px rule */
.mast{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;border-bottom:2px solid var(--hair);padding-bottom:14px}
.transport{width:440px;max-width:50%;font-size:13px}
.tline{display:flex;gap:10px;align-items:center}
#clock{margin-left:6px}
#readout{font-weight:700;font-size:16px;margin-top:10px}
#traitline{font-size:11px;line-height:1.45;margin-top:3px;min-height:1.45em}

/* preset index: three family rows, hairline above each */
.presets{margin-top:20px}
.fam{display:grid;grid-template-columns:96px 1fr;align-items:baseline;border-top:1px solid var(--hair);padding:4px 0}
.famlabel{font-size:11px;letter-spacing:.09em}
.fambtns{display:flex;flex-wrap:wrap}
.presets button{border:0;padding:6px 10px;font-size:13px;text-align:left}
.presets button .num{font-weight:400}
.presets button.loaded{box-shadow:inset 0 0 0 1px var(--ink)}
.presets button.playing{background:var(--ink);color:var(--paper);box-shadow:none}
.presets button.playing .num{color:var(--red)}

/* the score: margin | lanes | margin */
#score{display:grid;grid-template-columns:96px 1fr 216px;grid-template-rows:repeat(5,minmax(54px,auto));margin-top:4px}
.lname{grid-column:1;justify-self:start;align-self:center;border:0;padding:2px 4px 2px 0;font-size:11px;letter-spacing:.06em}
#lanes{grid-column:2;grid-row:1/span 5;position:relative;border:1px solid var(--hair);display:grid;grid-template-rows:repeat(5,minmax(54px,auto))}
@supports (grid-template-rows:subgrid){#lanes{grid-template-rows:subgrid}}
.lane{position:relative;display:flex;min-height:52px}
.lane+.lane{border-top:1px solid var(--hair)}
.cell{position:relative;flex:0 0 6.25%;width:6.25%;height:auto;border:0;border-left:1px solid var(--faint);padding:0;font-weight:400}
.cell.beat{border-left-color:var(--hair)}
.cell[data-step="0"]{border-left:0}
.cell:hover{background:rgba(17,18,16,.05)}
.lane:not([data-track=chop]) .cell{touch-action:pan-y;cursor:ew-resize}
.lane[data-track=chop] .cell{touch-action:none;cursor:ns-resize;font-size:12px}
.cell.off,.pad.off{color:var(--faint)}
.lane .dot{position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--ink);pointer-events:none}
.is-playing .lane .dot{background:var(--red)}
#playhead{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none;z-index:3}
.rmargin{grid-column:3;align-self:start;padding:6px 0 4px 14px;display:flex;flex-direction:column;gap:4px;font-size:11px}
.modes{display:flex}
.modeword{border:0;padding:1px 6px;font-size:11px}
.modeword:first-child{margin-left:-6px}
.offline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.offctl{font-weight:700;font-size:13px;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;white-space:nowrap}
.offctl input{width:84px;font-size:12px;padding:1px 4px;font-weight:400}
.offsub{color:var(--quiet);white-space:nowrap}

/* flashes: red only while sound happens */
.flashbtn{background:var(--red)!important;color:var(--paper);box-shadow:0 0 0 2px var(--red);z-index:2}
.flashbtn .dot,.is-playing .flashbtn .dot{background:var(--paper)!important;box-shadow:0 0 0 1px var(--red)}

/* phone edit strip (hidden on desktop) */
#editlane{display:none}
.edithead{font-size:11px;letter-spacing:.06em;padding:10px 0 6px}
.pads{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.pad{position:relative;min-height:44px;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:0;font-size:13px;font-weight:400;touch-action:manipulation}
.pad.on{background:var(--ink);color:var(--paper)}
.pad .dot{display:inline-block;width:9px;height:9px;background:var(--paper);vertical-align:middle}
.chopmode .pad{touch-action:none}

.temporow{margin:12px 0 0 96px;font-size:12px}
.temporow input{width:64px}
.sep{margin:0 4px}

/* chop + bus */
#drop{border:1px solid var(--hair);padding:14px;text-align:center;cursor:pointer;font-size:12px;letter-spacing:.06em}
#drop:hover #droplabel{text-decoration:underline;text-underline-offset:3px}
#drop.over,#drop.loaded{background:var(--ink);color:var(--paper)}
.chopctl,.busctl{display:flex;gap:14px 28px;flex-wrap:wrap;font-size:12px;margin:14px 0;align-items:center}
.chopctl label,.busctl label{display:flex;align-items:center;gap:8px;white-space:nowrap}
#choppitch{width:56px}
#exportbtn{margin-left:auto;font-size:12px;font-weight:400}

/* notes + footer */
#notes{border-top:1px solid var(--hair);margin-top:40px;padding-top:10px}
#notes summary{font-size:13px;font-weight:700;letter-spacing:.09em;cursor:pointer}
#notes p{font-size:14px;max-width:72ch;line-height:1.45;margin:10px 0}
footer{border-top:1px solid var(--hair);margin-top:32px;padding-top:10px;font-size:12px;line-height:1.6}
footer p{max-width:110ch}

@media (max-width:760px){
  body{padding:16px}
  h1{font-size:40px}
  .lede{font-size:15px}
  .mast{display:contents}
  .wordmark{border-bottom:2px solid var(--hair);padding-bottom:12px}
  .transport{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--hair);padding:8px 16px;margin:0 -16px;width:auto;max-width:none}
  #readout{font-size:14px;margin-top:6px}
  #traitline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
  .presets{margin-top:14px}
  .fam{grid-template-columns:1fr;padding:6px 0 2px}
  .presets button{padding:7px 10px 7px 0;margin-right:8px;font-size:12px}
  .presets button.loaded,.presets button.playing{padding-left:6px;padding-right:6px}
  #score{grid-template-columns:46px 1fr 96px;grid-template-rows:repeat(5,minmax(64px,auto))}
  #lanes{grid-template-rows:repeat(5,minmax(64px,auto))}
  .lane{min-height:62px}
  .lane[data-track=chop] .cell{font-size:9px;letter-spacing:-.06em}
  .lname{font-size:10px;padding:2px 3px;margin-left:-3px}
  .lname.sel{background:var(--ink);color:var(--paper)}
  .rmargin{padding:4px 0 2px 6px;gap:2px;font-size:10px}
  .modeword{padding:1px 3px;font-size:10px}
  .modeword:first-child{margin-left:-3px}
  .offctl{font-size:11px}
  .offsub{white-space:normal}
  #editlane{display:block}
  .temporow{margin-left:0;line-height:1.7}
  input[type=range]{width:120px}
  #exportbtn{margin-left:0}
}
@media (prefers-reduced-motion: reduce){.flashbtn{box-shadow:none}}