/* Hallmark · redesign · genre: playful-craft · theme: custom "dye house"
 * vibe: unbleached linen, natural dyes, risograph ink, a working loom
 * paper oklch(94% 0.018 85) · accent oklch(52% 0.17 32) madder
 * display: Bricolage Grotesque 800 · body: Instrument Sans · numerals: JetBrains Mono
 * axes: light / display-heavy grotesk / warm
 * layout: full-bleed canvas + bottom tool rail (no floating glass) · no italics, no glow, no blur
 */

:root {
  --color-paper:    oklch(94% 0.018 85);
  --color-paper-2:  oklch(90.5% 0.022 82);
  --color-paper-3:  oklch(86.5% 0.026 80);
  --color-ink:      oklch(23% 0.02 55);
  --color-ink-2:    oklch(44% 0.022 60);
  --color-ink-3:    oklch(58% 0.02 65);
  --color-rule:     oklch(79% 0.025 75);
  --color-accent:   oklch(52% 0.17 32);
  --color-accent-2: oklch(46% 0.16 32);
  --color-focus:    oklch(42% 0.14 265);
  --color-scrim:    oklch(94% 0.018 85 / 0.9);

  /* dyes — one per instrument, read by app.js */
  --dye-glass:   oklch(58% 0.1 200);
  --dye-harp:    oklch(78% 0.15 88);
  --dye-marimba: oklch(55% 0.18 30);
  --dye-kalimba: oklch(60% 0.13 135);
  --dye-choir:   oklch(42% 0.15 268);
  --dye-chip:    oklch(64% 0.22 355);
  --dye-bass:    oklch(38% 0.055 50);
  --dye-strings: oklch(70% 0.16 55);

  --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.9375rem; --text-lg: 1.125rem;
  --text-xl: 1.5rem; --text-2xl: 2rem; --text-display: clamp(3.25rem, 8vw + 1rem, 6.5rem);

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem;
  --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem;

  --radius-sm: 3px; --radius-md: 6px;
  --rule: 1px solid var(--color-rule);
  --rule-ink: 1px solid var(--color-ink);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms; --dur-med: 240ms;

  --rail-h: 76px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .fill { fill: currentColor; stroke: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.dim { color: var(--color-ink-3); }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0 0 var(--rail-h) 0; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#main { touch-action: none; }
#weave { mix-blend-mode: multiply; }
body[data-tool="draw"] #main { cursor: crosshair; }
body[data-tool="spout"] #main { cursor: copy; }
body[data-tool="erase"] #main { cursor: not-allowed; }

/* ---------- wordmark ---------- */
.brand { position: fixed; top: var(--space-md); left: var(--space-md); pointer-events: none; user-select: none; }
.logo {
  pointer-events: auto; font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl);
  font-variation-settings: "opsz" 96; letter-spacing: -0.035em; line-height: 1; color: var(--color-ink);
}
.stats { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.stats span { color: var(--color-ink); }
#modes .mode { margin-left: var(--space-2xs); color: var(--color-accent); }

/* ---------- top actions ---------- */
.topbar { position: fixed; top: var(--space-md); right: var(--space-md); display: flex; gap: var(--space-3xs); align-items: flex-start; }
.tb {
  display: flex; align-items: center; gap: var(--space-2xs); height: 34px; padding: 0 var(--space-xs);
  border-radius: var(--radius-md); border: var(--rule); background: var(--color-paper); color: var(--color-ink); white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.tb svg { width: 16px; height: 16px; }
.tb.icon { width: 34px; padding: 0; justify-content: center; }
.tb:hover { border-color: var(--color-ink); }
.tb:active { background: var(--color-paper-2); }
#recBtn svg { color: var(--color-accent); }
.tb.rec { border-color: var(--color-accent); color: var(--color-accent); }
.tb.rec svg { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

.menu-wrap { position: relative; }
.menu {
  position: absolute; top: 40px; right: 0; width: 280px; padding: var(--space-3xs); display: none; z-index: 20;
  background: var(--color-paper); border: var(--rule-ink); border-radius: var(--radius-md);
}
.menu.open { display: block; }
.menu button { width: 100%; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); text-align: left; }
.menu button:hover { background: var(--color-paper-2); }
.menu .dots { display: flex; gap: 3px; width: 34px; flex: none; }
.menu .dots i { width: 8px; height: 8px; border-radius: 50%; }
.menu small { display: block; color: var(--color-ink-2); font-size: var(--text-xs); margin-top: 1px; }
.menu hr { border: 0; border-top: var(--rule); margin: var(--space-3xs) var(--space-2xs); }

/* ---------- panel (drawers, help) ---------- */
.panel { background: var(--color-paper); border: var(--rule-ink); border-radius: var(--radius-md); }

/* ---------- tool rail ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--rail-h);
  display: flex; align-items: center; padding: 0 var(--space-sm);
  background: var(--color-paper-2); border: 0; border-top: var(--rule-ink); border-radius: 0;
  overflow-x: auto; scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
.group { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-md); height: 44px; border-left: var(--rule); flex: none; }
.play {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex: none; margin-right: var(--space-md);
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-paper);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.play:hover { background: var(--color-accent-2); }
.play:active { transform: translateY(1px); }
.play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.play .i-pause, .playing .play .i-play { display: none; }
.playing .play .i-pause { display: block; }
.playing .play { background: var(--color-ink); }

.tools { gap: 2px; }
.tool {
  display: flex; align-items: center; gap: var(--space-2xs); height: 36px; padding: 0 var(--space-xs);
  border-radius: var(--radius-md); color: var(--color-ink-2); border: 1px solid transparent;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.tool:hover { color: var(--color-ink); }
.tool.on { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); }

.yarns { gap: var(--space-xs); }
.swatches { display: flex; gap: 6px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--c); transition: transform var(--dur-short) var(--ease-out); }
.swatch:hover { transform: translateY(-2px); }
.swatch.on { box-shadow: 0 0 0 2px var(--color-paper-2), 0 0 0 3.5px var(--color-ink); }
.inst-name { width: 70px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1; color: var(--color-ink); }

.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.field > span { font-size: var(--text-xs); color: var(--color-ink-2); display: flex; gap: var(--space-2xs); justify-content: space-between; }
.field > span b { color: var(--color-ink); font-weight: 500; }
.field.grow { flex: 1; }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; height: 28px; font-size: var(--text-sm);
  background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23574d44' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center / 9px;
  border: var(--rule); border-radius: var(--radius-sm); padding: 0 26px 0 var(--space-2xs);
}
select:hover { border-color: var(--color-ink); }
.tempo .field { width: 140px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--color-ink) var(--p, 50%), var(--color-rule) var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--color-rule); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--color-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; border-radius: 2px; background: var(--color-ink); margin-top: -7px; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 16px; border: 0; border-radius: 2px; background: var(--color-ink); }

.chip { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--color-ink-2); border: var(--rule); background: var(--color-paper); }
.chip:hover { color: var(--color-ink); border-color: var(--color-ink); }
.chip.on { color: var(--color-paper); background: var(--color-ink); border-color: var(--color-ink); }

/* ---------- drawers ---------- */
.drawer { position: fixed; left: var(--space-sm); bottom: calc(var(--rail-h) + var(--space-sm)); padding: var(--space-md); width: min(740px, calc(100vw - 2 * var(--space-sm))); }
#mixDrawer { left: auto; right: var(--space-sm); width: min(560px, calc(100vw - 2 * var(--space-sm))); }
.drawer-head { display: flex; gap: var(--space-md); align-items: flex-end; margin-bottom: var(--space-sm); }
.grid { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--space-2xs); }
.row-name { font-size: var(--text-xs); color: var(--color-ink-2); display: flex; align-items: center; gap: 6px; }
.row-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.step { aspect-ratio: 1; max-height: 30px; border-radius: 2px; background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.step:nth-child(4n+1) { background: var(--color-paper-3); }
.step:hover { border-color: var(--color-ink); }
.step.on { background: var(--c); border-color: var(--c); }
.step.head { border-color: var(--color-ink); border-width: 2px; }

.mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
.toggles { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs) var(--space-md); }
.check { display: flex; align-items: center; gap: var(--space-2xs); cursor: pointer; color: var(--color-ink-2); }
.check:hover { color: var(--color-ink); }
.check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 2px; border: 1.5px solid var(--color-ink-2); background: var(--color-paper); cursor: pointer; margin: 0; display: grid; place-items: center; }
.check input:checked { background: var(--color-ink); border-color: var(--color-ink); }
.check input:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--color-paper); border-bottom: 2px solid var(--color-paper); transform: translateY(-1px) rotate(-45deg); }
.check input:checked + span { color: var(--color-ink); }
.actions { grid-column: 1 / -1; display: flex; gap: var(--space-2xs); flex-wrap: wrap; padding-top: var(--space-sm); border-top: var(--rule); }
.ghost { height: 30px; padding: 0 var(--space-xs); border-radius: var(--radius-sm); border: var(--rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out); }
.ghost:hover { border-color: var(--color-ink); }
.ghost.danger { color: var(--color-accent); }
.ghost.danger:hover { border-color: var(--color-accent); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: var(--space-md); bottom: calc(var(--rail-h) + var(--space-sm)); z-index: 50;
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-sm); opacity: 0; pointer-events: none; max-width: calc(100vw - 2 * var(--space-md));
  transition: opacity var(--dur-med) var(--ease-out);
}
.toast.show { opacity: 1; }
.toast.secret { background: var(--color-accent); }

/* ---------- start screen ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-lg) var(--space-md); background: var(--color-scrim); overflow-y: auto; }
#splash { background: var(--color-paper); place-items: start center; }
.splash { width: min(1040px, 100%); padding-top: clamp(1rem, 6vh, 4rem); }
.splash h1 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); font-variation-settings: "opsz" 96;
  line-height: 0.88; letter-spacing: -0.045em; margin: 0; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0;
}
.lede { max-width: 46ch; margin: var(--space-md) 0 var(--space-xl); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; }
.pick { margin: 0 0 var(--space-xs); padding-bottom: var(--space-2xs); border-bottom: var(--rule-ink); font-weight: 600; font-size: var(--text-md); }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.preset-card { text-align: left; display: block; transition: transform var(--dur-short) var(--ease-out); }
.preset-card canvas { display: block; width: 100%; aspect-ratio: 16 / 10; border: var(--rule); border-radius: var(--radius-sm); transition: border-color var(--dur-short) var(--ease-out); }
.preset-card:hover canvas { border-color: var(--color-ink); }
.preset-card:active { transform: translateY(1px); }
.preset-card .meta { padding: var(--space-2xs) 0 0; }
.preset-card b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.15; }
.preset-card small { color: var(--color-ink-2); font-size: var(--text-sm); }
.splash-foot { margin: var(--space-lg) 0; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-sm); border-top: var(--rule); }

.helpcard { width: min(760px, 100%); padding: var(--space-lg); position: relative; }
.helpcard h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.03em; margin: 0 0 var(--space-sm); }
.help-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-lg); }
.helpcard p { color: var(--color-ink-2); line-height: 1.6; margin: 0 0 var(--space-xs); }
.helpcard p b { color: var(--color-ink); font-weight: 600; }
.close { position: absolute; top: var(--space-sm); right: var(--space-sm); font-size: var(--text-xl); line-height: 1; color: var(--color-ink-2); width: 34px; height: 34px; border-radius: var(--radius-sm); }
.close:hover { color: var(--color-ink); background: var(--color-paper-2); }
kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding: 1px 5px; border-radius: var(--radius-sm); border: var(--rule); border-bottom: 2px solid var(--color-ink-3); background: var(--color-paper-2); }
.keys { border-collapse: collapse; width: 100%; }
.keys td { padding: 6px 0; border-bottom: var(--rule); color: var(--color-ink-2); }
.keys td:first-child { white-space: nowrap; padding-right: var(--space-sm); }
.secrets { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-ink); }
.secrets-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: var(--space-2xs); }
.secrets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--space-md); }
.secrets li { color: var(--color-ink-3); }
.secrets li.found { color: var(--color-ink); }
.secrets li.found::before { content: "✓ "; color: var(--color-accent); }
.secrets li:not(.found)::before { content: "· "; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  :root { --rail-h: 68px; }
  .topbar .tb span { display: none; }
  .topbar .tb { width: 34px; padding: 0; justify-content: center; }
  .brand { top: var(--space-sm); left: var(--space-sm); }
  .topbar { top: var(--space-sm); right: var(--space-sm); }
  .logo { font-size: var(--text-xl); }
  .group { padding: 0 var(--space-sm); }
  .tool span { display: none; }
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-cols, .mix, .toggles { grid-template-columns: 1fr; }
  .secrets ul { grid-template-columns: 1fr; }
  #mixDrawer { left: var(--space-sm); right: auto; }
  .drawer { max-height: calc(100vh - var(--rail-h) - 5rem); overflow-y: auto; }
  .drawer-head { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .preset-grid { gap: var(--space-xs); }
  .preset-card small { display: none; }
  .lede { font-size: var(--text-md); }
}