/* Oscilloscope · Co-Synthesis edition — paper & ink, Helvetica Neue bold, 1px rules */
:root {
  --hue: 0; --sat: 0%;
  --paper: #FFFFFF; --paper-2: #F1F3F1; --paper-3: #E9ECEA;
  --ink: #131917; --ink-2: #667169; --rule: #D9DFDB; --rule-2: #B9C0BC;
  --acc: var(--ink);
  --bar-h: 52px; --foot-h: 34px;
  --sans: "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
svg { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dept { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }

/* ---------- buttons & fields ---------- */
.btn { font: inherit; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 0; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.btn:hover { border-color: var(--ink); }
.btn:active { background: var(--paper-2); }
.btn svg { width: 14px; height: 14px; }
.btn.ghost { border-color: transparent; padding: 0 6px; color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); background: var(--paper-2); }
.btn.icon { width: 32px; padding: 0; }
.btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: #000; border-color: #000; }
.btn.big { height: 40px; padding: 0 22px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn.rec.rec-on { color: #C8102E; border-color: #C8102E; background: var(--paper); }
.btn.rec.rec-on svg { animation: blink 1.1s steps(2) infinite; }
.btn.play { width: 36px; height: 36px; border-radius: 50%; padding: 0; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.play .ic-pause { display: none; }
.btn.play.playing .ic-play { display: none; }
.btn.play.playing .ic-pause { display: block; }
button.close { background: none; border: 1px solid transparent; color: var(--ink-2); width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
button.close:hover { color: var(--ink); border-color: var(--rule-2); }
button.close svg { width: 14px; height: 14px; }
select, input[type=text], textarea, input[type=number] { font: inherit; font-weight: 700; font-size: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 0; padding: 0 9px; height: 32px; width: 100%; }
textarea { height: auto; padding: 7px 9px; }
select:focus, input[type=text]:focus, textarea:focus, input[type=number]:focus { border-color: var(--ink); outline: none; }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
textarea { resize: vertical; font-family: var(--mono); font-weight: 500; }

/* ---------- top bar ---------- */
.bar { height: var(--bar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--rule); white-space: nowrap; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { font-size: 15px; letter-spacing: -0.01em; }
.brand small { color: var(--ink-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.brand .mark { width: 24px; height: 16px; border: 1.5px solid var(--ink); position: relative; overflow: hidden; background: var(--paper); }
.brand .mark span { position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; background: var(--ink); transform: translateY(-50%) rotate(-14deg); }
.transport { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.readout { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.readout #timeLabel { font-size: 13px; }
.readout { min-width: 120px; }
.readout .src { color: var(--ink-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }
.tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tools .group { display: flex; border: 1px solid var(--rule-2); }
.tools .group .btn { height: 30px; border: 0; border-left: 1px solid var(--rule); padding: 0 11px; }
.tools .group .btn:first-child { border-left: 0; }
.tools .group .btn:hover { background: var(--paper-2); }
.tools .group .btn.on { background: var(--ink); color: var(--paper); }
.tools .group .btn.on + .btn { border-left-color: transparent; }
.tools .group .btn.icon { width: 32px; padding: 0; }

/* ---------- stage / screen ---------- */
#main { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
#stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 16px 10px; min-width: 0; min-height: 0; background: var(--paper); }
#crt { position: relative; aspect-ratio: 1 / 1; flex: 0 1 auto; min-height: 0; height: calc(100% - 28px); max-width: 100%; overflow: hidden; background: #000; border: 1px solid var(--ink); }
body.paper #crt { background: var(--paper); border-color: var(--rule-2); }
#scope { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bezel { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.bezel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
body.paper .bezel { display: none; }
#plate { flex: 0 0 auto; display: flex; gap: 18px; align-items: center; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 4px 0; font-weight: 500; }
#plate span:first-child { color: var(--ink); font-weight: 700; }
#plate span:nth-child(2) { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plate a { color: var(--ink); border-bottom: 1px solid var(--ink); }

.gate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); backdrop-filter: blur(2px); z-index: 5; }
body:not(.paper) .gate { background: rgba(0,0,0,.45); }
.gate.hidden { display: none; }
.gate-card { text-align: left; max-width: 440px; padding: 22px 24px 18px; background: var(--paper); border: 1px solid var(--ink); }
.gate-card .dept { color: var(--ink-2); margin-bottom: 10px; }
.gate-mark { display: none; }
.gate-card h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.gate-card p { margin: 6px 0; font-size: 13px; }
.gate-card .hint { color: var(--ink-2); font-size: 12px; }
.gate-card .btn.big { margin: 14px 0 12px; }
.keys { color: var(--ink-2); font-size: 10.5px; display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0; text-transform: uppercase; letter-spacing: 0.04em; }
.keys span { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.panel .keys { margin-top: 16px; }
kbd { font-family: var(--mono); font-size: 10px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-2); padding: 1px 5px; text-transform: none; }

.drop-hint { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: rgba(255,255,255,.85); border: 1px dashed var(--ink); z-index: 6; pointer-events: none; }
body.dragging .drop-hint { display: flex; }
.rec-badge { position: absolute; top: 12px; left: 12px; color: #C8102E; display: none; z-index: 4; font-size: 11px; letter-spacing: 0.08em; background: var(--paper); padding: 3px 8px; border: 1px solid #C8102E; }
body.recording .rec-badge { display: block; }
@keyframes blink { 50% { opacity: .3; } }
.pip { position: absolute; right: 12px; bottom: 12px; width: 28%; max-width: 320px; border: 1px solid var(--ink); background: #000; z-index: 3; display: none; object-fit: cover; aspect-ratio: 16 / 9; }
#crt.video-corner .pip.has-src { display: block; }
#crt.video-large .pip.has-src { display: block; width: 50%; max-width: none; }
#crt.video-bg .pip, #crt.video-hidden .pip { display: none; }

/* ---------- panels ---------- */
.panel { width: 320px; flex: 0 0 auto; border-left: 1px solid var(--rule); background: var(--paper); padding: 14px 16px 24px; overflow-y: auto; display: none; scrollbar-width: thin; }
.panel.open { display: block; }
.panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 2px 0 14px; display: flex; align-items: center; justify-content: space-between; }
.row { margin: 12px 0; }
.row.two { display: flex; gap: 8px; align-items: center; }
.row label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 5px; }
.fine { font-size: 12px; color: var(--ink-2); line-height: 1.45; font-weight: 700; }
.fine b { color: var(--ink); }
.ctl { margin: 10px 0; }
.ctl .lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 2px; }
.ctl .lab b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; }
.ctl .group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); margin: 20px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.ctl.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 0; }
.ctl.presets { display: flex; margin: 8px 0 12px; border: 1px solid var(--rule-2); }
.ctl.presets button { flex: 1 1 0; min-width: 0; font: inherit; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); background: var(--paper); border: 0; border-left: 1px solid var(--rule); height: 28px; padding: 0 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.ctl.presets button:first-child { border-left: 0; }
.ctl.presets button:hover { background: var(--paper-2); }
.ctl.presets button.on { background: var(--ink); color: var(--paper); }
.ctl.presets button.on + button { border-left-color: transparent; }

/* sliders: thin rule with ink fill, square thumb (as the EEG bands) */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(var(--acc), var(--acc)) 0 / var(--pct, 0%) 100% no-repeat, var(--rule); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 0; background: var(--acc); border: 0; margin-top: -4px; box-shadow: 0 0 0 2px var(--paper); }
input[type=range]::-moz-range-track { height: 3px; background: var(--rule); }
input[type=range]::-moz-range-progress { height: 3px; background: var(--acc); }
input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 0; background: var(--acc); border: 0; }

/* switches: square ink box */
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 30px; height: 16px; background: var(--paper); border: 1px solid var(--ink); position: relative; cursor: pointer; flex: none; margin: 0; }
input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--rule-2); transition: transform .12s, background .12s; }
input[type=checkbox]:checked::after { transform: translateX(14px); background: var(--ink); }
label.inline { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* studio bits */
#pad { width: 100%; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--rule-2); cursor: crosshair; touch-action: none; display: block; margin-bottom: 8px; }
#tracePreview { width: 100%; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--rule-2); display: block; }
#traceInfo { color: var(--ink); margin-left: 6px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.only-text, .only-svg, .only-draw, .only-image, .only-video, .only-camera, .only-trace { display: none; }
#studio.shape-text .only-text, #studio.shape-svg .only-svg, #studio.shape-draw .only-draw, #studio.shape-image .only-image, #studio.shape-video .only-video, #studio.shape-camera .only-camera { display: block; }
#studio.shape-image .only-trace, #studio.shape-video .only-trace, #studio.shape-camera .only-trace { display: block; }
details { border-top: 1px solid var(--rule); padding: 8px 0 4px; margin: 14px 0 0; }
details summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; width: 10px; font-family: var(--mono); }
details[open] summary::before { content: "−"; }
.badge { font-size: 10px; color: var(--paper); background: var(--ink); padding: 1px 6px; letter-spacing: 0.02em; text-transform: none; font-family: var(--mono); font-weight: 500; }
.badge:empty { display: none; }

/* lists */
#plist, #seqList { list-style: none; margin: 0 0 10px; padding: 0; border-bottom: 1px solid var(--rule); }
#plist li, #seqList li { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 12px; cursor: pointer; }
#plist li.cur, #seqList li.cur { color: var(--ink); }
#plist li.cur .nm::before, #seqList li.cur .nm::before { content: "▶ "; font-size: 9px; }
#plist li .mono, #seqList li .mono { color: var(--ink-2); font-size: 10.5px; width: 16px; }
#plist li .nm, #seqList li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plist li .rm, #seqList li .rm, #seqList li .up { color: var(--ink-2); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid transparent; }
#plist li .rm:hover, #seqList li .rm:hover, #seqList li .up:hover { border-color: var(--rule-2); background: var(--paper); }
#plist li .rm:hover, #seqList li .rm:hover, #seqList li .up:hover { color: var(--ink); }
#seqList li input[type=number] { width: 56px; padding: 3px 5px; font-family: var(--mono); font-weight: 500; font-size: 11px; }
#plist .empty, #seqList .empty { color: var(--ink-2); font-size: 11.5px; padding: 8px 0; cursor: default; }

/* ---------- footer seek ---------- */
#foot { height: var(--foot-h); flex: 0 0 auto; border-top: 1px solid var(--rule); display: flex; align-items: center; padding: 0 16px; }
#seek { height: 16px; }
#seek::-webkit-slider-runnable-track { height: 2px; }
#seek::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }

/* ---------- hidden UI / fullscreen / responsive ---------- */
body.hide-ui .bar, body.hide-ui #foot, body.hide-ui .panel, body.hide-ui #plate { display: none; }
body.hide-ui #stage { padding: 0; }
body.hide-ui #crt { height: 100%; border: 0; }
#crt:fullscreen { aspect-ratio: auto; border: 0; }
#svgHost { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
@media (max-aspect-ratio: 1/1) { #crt { width: 100%; height: auto; } body.hide-ui #crt { height: auto; } }
@media (max-width: 1040px) { .brand small { display: none; } }
@media (max-width: 900px) {
  .tools .group .btn span { display: none; }
  .tools .group .btn { width: 30px; padding: 0; }
  .readout .src { display: none; }
  .brand small { display: none; }
  .bar { gap: 10px; padding: 0 10px; }
  .panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 7; box-shadow: -20px 0 50px rgba(0,0,0,.12); width: min(320px, 92vw); }
  #plate { display: none; }
  #crt { height: 100%; }
}
@media (max-width: 600px) {
  .brand b { display: none; }
  .readout { display: none; }
  .transport { gap: 0; }
  .tools { gap: 6px; }
  .tools .group .btn, .tools .group .btn.icon { width: 28px; height: 28px; }
  #btnSnap, #btnFull { display: none; }
  #stage { padding: 10px; }
}

/* silent demo screen (home page): fills the frame, no chrome */
body.demo { overflow: hidden; }
body.demo #stage { padding: 0; }
body.demo #crt { aspect-ratio: auto; width: 100%; height: 100%; border: 0; }
body.demo .gate, body.demo .drop-hint, body.demo .pip { display: none !important; }