/* GWANCHEON face, in Henge's dress: the model on paper, ink and hairlines, no boxes. Theme variables
   (--paper, --ink, --soft, --faint, --line, --panel, --accent, --glow) are set by scene/theme.js. */
:root {
  --paper: #070707; --ink: #F1EFE8; --soft: rgba(241,239,232,.56); --faint: rgba(241,239,232,.32); --line: rgba(241,239,232,.15);
  --panel: rgba(12,12,12,.88); --accent: #CBDD4C; --glow: #F0B465; --rec: #E5604A; /* dark only */
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --sans: -apple-system, system-ui, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-user-select: none; user-select: none; transition: background .6s, color .6s; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; outline: none; }
canvas#scene.pointer { cursor: grab; }
canvas#scene.grabbing { cursor: grabbing; }

.micro { font: 400 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

/* ---- brand and top row */
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 24px; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; flex-direction: column; pointer-events: none; }
.logo { width: 150px; color: var(--ink); line-height: 0; }
.logo svg { width: 100%; height: auto; }
.word { margin-top: 18px; font: 200 40px/1 var(--sans); letter-spacing: -.02em; }
.word span { display: block; margin-top: 8px; font: 400 10px/1.3 var(--sans); letter-spacing: .02em; color: var(--soft); }
.transport { display: flex; gap: 10px; align-items: center; }

select, .btn {
  all: unset; cursor: pointer; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); transition: color .2s, border-color .2s;
}
select { padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
select option { background: var(--paper); color: var(--ink); }
.btn:hover, select:hover { color: var(--ink); border-color: var(--ink); }
.btn.on { color: var(--ink); border-color: var(--ink); }
.btn.rec.on { color: var(--rec); border-color: var(--rec); }

/* ---- layer list: a quiet column under the title */
.layers { position: fixed; left: 24px; top: 150px; display: flex; flex-direction: column; gap: 2px; }
.layer-row { display: grid; grid-template-columns: 7px 56px 70px; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; color: var(--soft); }
.layer-row:hover, .layer-row.sel { color: var(--ink); }
.layer-row .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--faint); }
.layer-row .dot.play { background: var(--accent); border-color: var(--accent); }
.layer-row .dot.rec { background: var(--rec); border-color: var(--rec); }
.layer-row .name { font: 400 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.layer-row.sel .name::before { content: "— "; }
.layer-row.off .name { text-decoration: line-through; opacity: .5; }
.meter { height: 1px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 60ms linear; }

.hint { position: fixed; left: 50%; top: 26px; transform: translateX(-50%); font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); pointer-events: none; transition: opacity 1s; white-space: nowrap; }

/* hover tag with a leader line (Henge) */
.tip { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tip i { position: absolute; left: 0; top: 0; width: 46px; height: 1px; background: var(--ink); transform-origin: 0 0; transform: rotate(-38deg); }
.tip div { position: absolute; left: 38px; top: -46px; white-space: nowrap; }
.tip span { display: block; font: 400 9px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.tip b { display: block; font-weight: 400; font-size: 13px; margin-top: 2px; }

/* ---- the inspector: paper fading in under the model, columns between hairlines */
.inspector { position: fixed; left: 0; right: 0; bottom: 0; min-height: 214px; padding: 34px 24px 18px; display: grid; grid-template-columns: 236px 300px 250px minmax(0, 1fr); background: linear-gradient(to bottom, transparent, var(--panel) 30px); transition: transform 400ms cubic-bezier(.2,.8,.2,1), opacity 400ms; }
.inspector.hidden { transform: translateY(24px); opacity: 0; pointer-events: none; }
.inspector.fx { grid-template-columns: 1.1fr 1.9fr; }
.inspector.presets { grid-template-columns: 1fr; }
.col { padding: 4px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.col:first-child { border-left: 0; padding-left: 0; }
.title { font: 200 26px/1 var(--sans); letter-spacing: -.01em; text-transform: capitalize; }
.sub { font: 400 11px/1.45 var(--sans); color: var(--soft); }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }

.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.chip { cursor: pointer; font: 400 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border: 1px solid transparent; border-radius: 999px; color: var(--soft); transition: color .2s, border-color .2s; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--ink); border-color: var(--ink); }

.stones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.stone { min-width: 0; aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; cursor: pointer; padding: 5px; color: var(--soft); }
.stone:hover { color: var(--ink); }
.stone canvas { width: 100%; height: auto; display: block; }
.stone.on { border-color: var(--ink); color: var(--ink); }

/* knobs: hairline rings */
.knobs { display: flex; gap: 10px; justify-content: space-between; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: ns-resize; min-width: 46px; color: var(--ink); }
.knob svg { display: block; }
.knob .lbl { font: 400 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.knob .val { font: 400 10px/1 var(--mono); color: var(--ink); min-height: 10px; }
.knob.locked .lbl, .knob.locked .val { color: var(--glow); }
.knob.small { min-width: 40px; }

.wave { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.wave canvas { width: 100%; height: 46px; }
.wave-name { display: flex; align-items: center; gap: 6px; font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wave-name .arrow { cursor: pointer; color: var(--soft); padding: 2px 4px; }
.wave-name .arrow:hover { color: var(--ink); }
.yin { width: 28px; height: 28px; cursor: pointer; color: var(--ink); transition: transform 500ms cubic-bezier(.3,1.4,.5,1); }
.yin.rev { transform: rotate(180deg); }

/* sequencer: 64 hairline steps */
.seq-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.cell { height: 15px; border: 1px solid var(--line); border-radius: 2px; position: relative; cursor: pointer; }
.cell.beat { border-color: var(--faint); }
.cell.out { opacity: .25; }
.cell.note::after { content: ""; position: absolute; left: 2px; right: 2px; top: 3px; bottom: 3px; border-radius: 1px; background: var(--ink); }
.cell.lock::before { content: ""; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 2px; margin-left: -2.5px; background: var(--glow); }
.cell.sel { border-color: var(--glow); }
.cell.head { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.cell.head.rec { background: color-mix(in srgb, var(--rec) 22%, transparent); border-color: var(--rec); }

/* effects */
.fx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; }
.tile { padding: 4px 0 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; opacity: .55; transition: opacity .2s; }
.tile.on { opacity: 1; border-top-color: var(--ink); }
.tile .head { display: flex; justify-content: space-between; align-items: center; font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 6px; }
.switch { width: 24px; height: 12px; border-radius: 6px; border: 1px solid var(--faint); position: relative; cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: left 160ms, background 160ms; }
.switch.on { border-color: var(--ink); }
.switch.on::after { left: 14px; background: var(--ink); }

.preset-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 18px; }
.preset { padding: 10px 0; border-top: 1px solid var(--line); font: 300 13px/1.2 var(--sans); cursor: pointer; color: var(--soft); }
.preset:hover { color: var(--ink); border-top-color: var(--ink); }

.drop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, var(--paper) 70%, transparent); opacity: 0; pointer-events: none; transition: opacity 150ms; }
.drop.show { opacity: 1; }
.progress { height: 1px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--rec); width: 0; }

/* three states: quiet = only the stone and the logo; simple = one thin strip; advanced = everything */
.transport, .layers, .hint, .word span, .strip, .inspector { transition: opacity .45s, transform .45s; }
body:not(.advanced) .transport, body:not(.advanced) .layers { opacity: 0; pointer-events: none; }
body.quiet .hint { opacity: 0; }
body:not(.advanced) .inspector { opacity: 0; transform: translateY(16px); pointer-events: none; }
body:not(.simple) .strip { opacity: 0; transform: translateY(12px); pointer-events: none; }

.strip { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 22px; padding: 12px 18px; white-space: nowrap; }
body.simple .strip { transform: translateX(-50%); }
body:not(.simple) .strip { transform: translate(-50%, 12px); }
.strip .arp { min-width: 150px; }
.strip .arp b { display: block; font: 300 18px/1 var(--sans); }
.strip .arp span { display: block; margin-top: 4px; font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.fader { display: flex; flex-direction: column; gap: 6px; width: 92px; font: 400 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.fader input { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; margin: 0; cursor: pointer; }
.fader input::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); margin-top: -5px; }
.strip .more { font-size: 14px; letter-spacing: .2em; padding: 6px 12px; }

.fader.picked { color: var(--ink); }
.fader.picked input::-webkit-slider-runnable-track { background: var(--ink); }