@font-face { font-family:'Ivar Mono'; src:url('../assets/fonts/IvarMonoTRIAL-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
:root { --paper:#f0efeb; --panel:#f0efeb; --ink:#070709; --line:#b9b8b2; --muted:#777770; --accent:#070709; --rows:6; --columns:12; --instrument-cell:calc((min(1056px, 100vw - 72px) - 30px) / var(--columns)); }
:root[data-theme="dark"] { --paper:#f0efeb; --panel:#f0efeb; --ink:#070709; --accent:#070709; }
body { background:var(--paper); font-family:Georgia,'Times New Roman',serif; }
main { width:min(1056px,calc(100% - 72px)); margin:0 auto; padding-top:56px; }
.workspace { border:0; border-radius:0; background:transparent; overflow:visible; }
.masthead { display:none; }
.view-switch { position:fixed; left:14px; top:12px; z-index:10; display:flex; align-items:center; gap:7px; font:10px/1.4 ui-monospace,monospace; color:#777770; cursor:pointer; }
.view-switch input { appearance:none; width:25px; height:14px; border:1px solid #777770; border-radius:9px; margin:0; background:transparent; cursor:pointer; }
.view-switch input::before { content:''; display:block; width:8px; height:8px; border-radius:50%; margin:2px; background:#777770; transition:transform .15s; }
.view-switch input:checked::before { transform:translateX(11px); background:#070709; }
.instrument-top { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); width:calc(100% - 30px); height:54px; align-items:center; }
.instrument-slot { height:47px; display:flex; align-items:center; justify-content:center; position:relative; }
.instrument-round { width:39px; height:39px; padding:0; border:var(--ui-round-stroke-width,1.25px) solid var(--ui-stroke,#333); border-radius:50%; display:grid; place-items:center; font:23px/1 Arial,sans-serif; background:transparent; color:var(--ink); }
.instrument-round:hover:not(:disabled):not(.hover-after-click) { background:#deddd7; }
.instrument-round[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ui-stroke,#333); }
.instrument-round,.instrument-round[aria-pressed="true"] { color:transparent; font-size:0; }
.instrument-round svg,.instrument-round img { visibility:hidden; }
.instrument-icon { display:block; width:73.8%; height:73.8%; background:var(--ink); mask-size:contain; mask-position:center; mask-repeat:no-repeat; -webkit-mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; pointer-events:none; transition:background-color .2s ease, opacity .2s ease; }
.instrument-round[aria-pressed="true"] .instrument-icon { background:var(--paper); }
.instrument-slot label { position:relative; }
.instrument-slot label .instrument-icon { position:absolute; left:13.1%; top:13.1%; }
.instrument-slot input:checked ~ .instrument-icon { background:var(--ink); opacity:1; }
.instrument-slot label { display:block; font-size:0; width:39px; height:39px; cursor:pointer; }
.instrument-slot input { appearance:none; display:block; margin:0; width:39px; height:39px; border:var(--ui-round-stroke-width,1.25px) solid var(--ui-stroke,#333); border-radius:50%; background:#070709; cursor:pointer; }
.instrument-slot input:checked { background:transparent; }
.glyph-influence-circle { display:none; position:fixed; transform:translate(-50%,-50%); border:1px dashed #777; border-radius:50%; pointer-events:none; z-index:4; }
.debug-mode .glyph-influence-circle.is-active { display:block; }
.instrument-round:hover:not(:disabled):not(.hover-after-click) .instrument-icon { background:var(--ink); }
.instrument-slot label:hover:not(.hover-after-click) input:not(:disabled) { background:#deddd7; }
.instrument-slot label:hover:not(.hover-after-click) input:not(:disabled) ~ .instrument-icon { background:var(--ink); opacity:1; }
@media(prefers-reduced-motion:reduce) { .instrument-icon { transition:none; } }
.canvas { height:calc(27px + var(--rows) * var(--instrument-cell)); margin-top:22px; background:transparent; overflow:auto; direction:rtl; }
.numbered-canvas { min-width:100%; }
.row-numbers { flex-basis:30px; padding-top:27px; background:var(--paper); }
.row-numbers span { height:var(--instrument-cell); }
.column-numbers { height:27px; grid-auto-columns:calc(100cqw / var(--columns)); }
.row-numbers,.column-numbers { font:12px/22px Georgia,serif; }
.row-numbers,.column-numbers,.counts dd,.sound-fields output,.filter-fields input[type="number"],.sound-fields input[type="number"] { font-family:'Ivar Mono',monospace; font-weight:300; font-variant-numeric:tabular-nums; }
.glyph-grid { grid-template-rows:repeat(var(--rows),var(--instrument-cell)); grid-auto-columns:calc(100cqw / var(--columns)); height:calc(var(--rows) * var(--instrument-cell)); }
.glyph { height:var(--instrument-cell); padding:5px; }
.glyph-grid::after { content:''; display:block; height:var(--instrument-cell); pointer-events:none; }
.input-cursor { position:fixed; z-index:3; pointer-events:none; }
.input-corners { position:absolute; inset:0; animation:input-cursor-blink var(--cursor-blink-period,1.2s) step-end infinite; }
.tian-line { position:absolute; background:var(--ui-stroke,#333); }
.tian-top,.tian-bottom,.tian-horizontal { left:0; width:100%; height:var(--ui-stroke-width,.75px); }
.tian-left,.tian-right,.tian-vertical { top:0; height:100%; width:var(--ui-stroke-width,.75px); }
.tian-top { top:0; }
.tian-bottom { bottom:0; }
.tian-left { left:0; }
.tian-right { right:0; }
.tian-horizontal { top:var(--tian-center-y,50%); }
.tian-vertical { left:var(--tian-center-x,50%); }
.input-corner { position:absolute; width:var(--cursor-corner-size,21%); height:var(--cursor-corner-size,21%); border:0; }
.input-corner::before,.input-corner::after { content:''; position:absolute; background:var(--ui-stroke,#333); }
.input-corner::before { height:var(--ui-stroke-width,1px); width:100%; }
.input-corner::after { width:var(--ui-stroke-width,1px); height:100%; }
.input-corner.tl { top:0; left:0; }
.input-corner.tr { top:0; right:0; }
.input-corner.bl { bottom:0; left:0; }
.input-corner.br { bottom:0; right:0; }
.input-corner.tl::before,.input-corner.tr::before { top:0; }
.input-corner.bl::before,.input-corner.br::before { bottom:0; }
.input-corner.tl::after,.input-corner.bl::after { left:0; }
.input-corner.tr::after,.input-corner.br::after { right:0; }
.input-dot { position:absolute; width:39.474%; height:39.474%; left:30.263%; top:30.263%; overflow:visible; }
.input-dot path { fill:#111; }
@keyframes input-cursor-blink { 0%,49.99% { opacity:1; } 50%,100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .input-corners { animation:none; } }
body[data-writing="horizontal"] .canvas { direction:ltr; }
/* Horizontal writing scrolls rows: keep the column numbers pinned on top (covering older rows)
   and let the row-number strip scroll in step with the canvas (see syncRowNumbers). */
body[data-writing="horizontal"] .column-numbers { position:sticky; top:0; z-index:2; background:var(--paper); }
body[data-writing="horizontal"] .workspace > .row-numbers { overflow:hidden; }
/* Rows grow downwards, so the grid takes their full height; clipping keeps the 170% glyph canvases of the
   last row from adding scroll height, which made "scroll to bottom" overshoot. */
body[data-writing="horizontal"] .glyph-grid { height:auto; overflow:clip; }
body[data-writing="horizontal"] .numbered-canvas { flex-direction:row-reverse; }
body[data-writing="horizontal"] .glyph-grid { grid-auto-flow:row; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); grid-auto-rows:var(--instrument-cell); }
.instrument-bottom { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); align-items:center; width:calc(100% - 30px); height:54px; margin:38px 0 0; position:relative; }
.rail-divider { position:absolute; top:50%; transform:translateY(-50%); height:47px; width:var(--ui-stroke-width,1px); background:var(--ui-stroke,#333); pointer-events:none; }
.instrument-bottom > button,.instrument-bottom > .performance-volume { grid-row:1; align-self:center; }
.instrument-bottom button { justify-self:center; }
.performance-volume { grid-column:2 / span 4; position:relative; display:flex; align-items:center; height:54px; }
.performance-volume::before { content:''; position:absolute; left:var(--marker-x,50%); top:var(--marker-y,9px); height:36px; width:var(--ui-stroke-width,1px); background:var(--ui-stroke,#333); pointer-events:none; }
.performance-volume::after { content:''; position:absolute; left:0; right:0; top:var(--track-y,27px); height:var(--ui-stroke-width,1px); background:var(--ui-stroke,#333); pointer-events:none; }
.performance-volume input { appearance:none; width:100%; height:18px; background:transparent; position:relative; z-index:1; display:block; margin:0; padding:0; cursor:pointer; }
.performance-volume input::-webkit-slider-runnable-track { height:var(--ui-stroke-width,1px); background:transparent; }
.performance-volume input::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border-radius:50%; background:#070709; margin-top:-8.5px; }
.performance-volume input::-moz-range-track { height:var(--ui-stroke-width,1px); background:transparent; }
.performance-volume input::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#070709; }
.instrument-meta { display:none; }
.instrument-meta #status { font:inherit; color:inherit; }
.instrument-meta .counts { gap:20px; }
.instrument-meta .counts div { display:flex; align-items:baseline; gap:6px; }
.instrument-meta dt,.instrument-meta dd { font:inherit; color:inherit; margin:0; }
.instrument-meta #chant { margin-left:auto; padding:2px 8px; font:inherit; min-width:0; border:0; color:#555; background:transparent; }
.canvas-toolbar,.canvas-footer,.structure-controls { display:none; }
body:not(.debug-mode) .sound-controls,body:not(.debug-mode) .filter-controls { display:none; }
.debug-mode .masthead { display:flex; margin-top:42px; font-family:system-ui,sans-serif; }
.debug-mode main { padding-top:24px; }
.debug-mode .sound-controls,.debug-mode .filter-controls { font-family:system-ui,sans-serif; border:1px solid var(--line); border-radius:6px; margin:12px 0; }
.debug-mode .sound-controls { margin-top:24px; }
.debug-mode .sound-fields input { accent-color:#070709; }
.debug-mode .toolbar #help { display:none; }
.debug-mode .toolbar { flex-wrap:wrap; }
dialog { background:var(--paper); }
@media(max-width:740px) {
  :root { --instrument-cell:calc((100vw - 39px) / var(--columns)); }
  main { width:calc(100% - 24px); padding-top:48px; }
  .instrument-top,.instrument-bottom { width:calc(100% - 15px); }
  .instrument-round,.instrument-slot label,.instrument-slot input { width:clamp(14px,4.8vw,32px); height:clamp(14px,4.8vw,32px); font-size:0; }
  .instrument-slot { height:32px; }
  .rail-divider { height:32px; }
  .row-numbers { flex-basis:15px; }
  .row-numbers,.column-numbers { font-size:9px; }
  .glyph { padding:2px; }
  .instrument-bottom { margin-top:25px; }
  .performance-volume::before { height:28px; }
  .instrument-meta { gap:10px; margin-right:15px; }
  .debug-mode .masthead { flex-wrap:wrap; }
}

/* Keep the 2:1 playing area centered, independent of controls and debug UI; zoom only changes --rows / --columns. */
:root {
  --ui-stroke-width:.75px;
  --ui-round-stroke-width:1px;
  --ui-stroke:#333;
  --instrument-width:min(1026px,calc(100vw - 72px),max(160px,calc(200dvh - 320px)));
  --index-gutter:30px;
  --instrument-cell:calc(var(--instrument-width) / var(--columns));
  --instrument-height:calc(var(--instrument-width) / 2);
}
html,body { min-height:100%; }
main,.debug-mode main { width:100%; margin:0; padding:0; }
.canvas {
  position:fixed;
  left:calc(50% + var(--index-gutter) / 2);
  top:calc(50dvh - var(--instrument-height) / 2 - 27px);
  transform:translateX(-50%);
  width:calc(var(--instrument-width) + var(--index-gutter));
  height:calc(var(--instrument-height) + 27px);
  margin:0; border:0; border-radius:0; box-shadow:none;
  scrollbar-width:none; -ms-overflow-style:none;
}
.canvas::-webkit-scrollbar { display:none; width:0; height:0; }
.canvas:focus-visible { outline:none; }
.numbered-canvas { width:calc(100% - var(--index-gutter)); min-width:0; margin-right:var(--index-gutter); }
.workspace > .row-numbers {
  position:fixed;
  left:calc(50% + var(--instrument-width) / 2);
  right:auto;
  top:calc(50dvh - var(--instrument-height) / 2);
  width:var(--index-gutter);
  height:var(--instrument-height);
  padding:0;
  z-index:2;
  pointer-events:none;
  background:transparent;
}
.instrument-top,.instrument-bottom {
  position:fixed; left:calc(50% - var(--instrument-width) / 2); transform:none;
  width:var(--instrument-width); height:54px; margin:0;
}
.instrument-top { top:calc(25dvh - var(--instrument-height) / 4 - 27px); }
.instrument-bottom { top:calc(75dvh + var(--instrument-height) / 4 - 27px); }
.instrument-debug-panel { display:none; }
.debug-drag-handle { position:sticky; top:-14px; z-index:2; margin:-14px -14px 12px; padding:12px 14px; background:color-mix(in srgb, var(--paper) 80%, transparent); border-bottom:1px solid var(--line); font:12px/1.5 ui-monospace,monospace; cursor:grab; touch-action:none; user-select:none; }
.instrument-debug-panel.dragging .debug-drag-handle { cursor:grabbing; }
.debug-mode .instrument-debug-panel {
  display:block; position:fixed; z-index:9; top:44px; right:14px;
  width:min(440px,calc(100vw - 28px)); max-height:calc(100dvh - 64px);
  overflow:auto; padding:14px; background:color-mix(in srgb, var(--paper) 62%, transparent);
  border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 30px #0001;
}
.debug-mode .instrument-debug-panel .masthead { width:100%; margin:0; padding:0 0 12px; }
.debug-mode .instrument-debug-panel .sound-controls { margin-top:12px; }
.debug-mode .instrument-debug-panel .filter-fields { grid-template-columns:1fr; }
.column-motion-controls { margin:12px 0; padding:10px 18px; border:1px solid var(--line); border-radius:6px; font:12px/1.6 system-ui,sans-serif; }
.column-motion-controls summary { cursor:pointer; color:var(--muted); }
.column-motion-controls p { margin:10px 0 0; color:var(--muted); }
.column-motion-controls button { font-size:12px; }
@media(max-width:740px) {
  :root { --index-gutter:15px; --instrument-width:min(calc(100vw - 39px),max(160px,calc(200dvh - 280px))); }
}