/* Sibilance — modern minimal. Teal on ivory / navy. Open-ring controls, hairlines, restraint. */
@font-face { font-family: "Familjen Grotesk"; font-weight: 300; font-display: swap; src: url("./fonts/FamiljenGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400; font-display: swap; src: url("./fonts/FamiljenGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-display: swap; src: url("./fonts/FamiljenGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 600; font-display: swap; src: url("./fonts/FamiljenGrotesk-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./fonts/Manrope-Regular.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./fonts/Manrope-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("./fonts/Manrope-SemiBold.woff2") format("woff2"); }

:root {  /* LIGHT — primary */
  --ground: #F3F0E9; --slot: rgba(40,64,62,.10); --ink: #1b2e2e; --muted: #8a938f;
  --hair: rgba(40,64,62,.11); --hair2: rgba(40,64,62,.06);
  --peri: #1c8079; --lav: #2fa199; --green: #c2a06a; --amber: #d98a4e;
  --bg1: #FBF9F3; --bg2: #EDEAE1; --bg3: #E6E4DA;
  --panelA: #F7F4ED; --panelB: #EDEAE1; --surf: #F6F3EC;
  --clipoff: #cdd0ca; --hover: rgba(28,128,121,.08);
  --face-a: #F6F3EC; --face-b: #EDEAE1; --track: rgba(40,64,62,.10);
  --display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --label: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] {  /* DARK — deep teal-charcoal (lifted off black for readable contrast) */
  --ground: #172325; --slot: rgba(160,196,190,.18); --ink: #EFF2EE; --muted: #9aa6a1;
  --hair: rgba(160,196,190,.16); --hair2: rgba(160,196,190,.09);
  --peri: #3fb3aa; --lav: #5fccc2;
  --bg1: #22322f; --bg2: #182422; --bg3: #131f21;
  --panelA: #1e2b2d; --panelB: #182426; --surf: #1b2729;
  --clipoff: #35423f; --hover: rgba(63,179,170,.15);
  --face-a: #1e2b2d; --face-b: #16221f; --track: rgba(160,196,190,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { font-family: var(--label); color: var(--ink); -webkit-font-smoothing: antialiased; background: var(--ground); transition: background .4s; }

/* Clean surface backdrop (no photo): a soft warm/cool wash */
.bg { position: fixed; inset: 0; z-index: 0; transition: background .4s;
  background: radial-gradient(120% 90% at 50% -8%, var(--bg1), var(--bg2) 60%, var(--bg3)); }
:root[data-theme="dark"] .bg { background: radial-gradient(120% 90% at 50% -8%, #223330, #182422 58%, #131f20); }
.aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .7; }
.motes { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .7; }
.grain { display: none; }
.vignette { position: fixed; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 160px 30px rgba(40,60,58,.05); }
:root[data-theme="dark"] .vignette { box-shadow: inset 0 0 170px 34px rgba(0,10,10,.2); }
.edge { position: fixed; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(224,101,95,0); transition: box-shadow .12s; }
.edge.clip { box-shadow: inset 0 0 70px 3px rgba(224,101,95,.4); }
.face { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 20px; padding: 32px 52px 26px; transition: opacity .35s, filter .35s; will-change: transform, filter; }
.face.bypassed { opacity: .45; filter: saturate(.4); }

/* Header */
.head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 13px; }
.mark { width: 28px; height: 28px; border-radius: 8px; background: var(--peri); display: grid; place-items: center; }
.mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--surf); }
.word { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: .26em; text-transform: uppercase; }
.preset { justify-self: center; position: relative; }
.pbtn { display: flex; align-items: center; gap: 10px; justify-content: center; min-width: 190px; color: var(--ink); background: none; border: 1px solid var(--hair); border-radius: 100px; padding: 9px 18px; cursor: pointer; transition: .18s var(--ease); }
.pbtn:hover { border-color: var(--muted); }
.pcar { color: var(--muted); font-size: 9px; transition: transform .2s; }
.pbtn.open .pcar { transform: rotate(180deg); }
.browser { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px) scale(.98); width: 320px; background: var(--panelA); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 24px 60px -22px rgba(20,40,38,.4); padding: 8px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 30; max-height: 62vh; overflow-y: auto; }
.browser.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
/* Dark: lift the dropdown into a distinct floating card (it otherwise blends into the near-black page) */
:root[data-theme="dark"] .browser { background: #27332f; border-color: rgba(160,196,190,.18); box-shadow: 0 26px 64px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .browser::-webkit-scrollbar-thumb { border-color: #27332f; }
:root[data-theme="dark"] .pbtn { background: rgba(160,196,190,.06); }
.browser::-webkit-scrollbar { width: 9px; }
.browser::-webkit-scrollbar-track { background: transparent; }
.browser::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 9px; border: 2px solid var(--panelA); }
.browser::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.seclabel { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 9px 12px 5px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.prow:hover, .prow.cur { background: var(--hover); }
.prow.kfocus { background: var(--hover); box-shadow: inset 0 0 0 1.5px var(--peri); }
.prow .tick { width: 14px; flex: 0 0 14px; color: var(--peri); font-size: 12px; opacity: 0; }
.prow.cur .tick { opacity: 1; }
.prow .ptxt { flex: 1; min-width: 0; }
.prow .ppn { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .02em; }
.prow .ppd { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pdel { opacity: 0; color: var(--muted); font-size: 16px; padding: 0 4px; border-radius: 6px; }
.prow:hover .pdel { opacity: .7; } .prow .pdel:hover { opacity: 1; color: #d98a4e; }
.bdivide { height: 1px; background: var(--hair2); margin: 6px 8px; }
.saverow { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; }
.saverow input { flex: 1; font-family: var(--label); font-size: 12px; color: var(--ink); background: none; border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; outline: none; -webkit-user-select: text; user-select: text; }
.saverow input:focus { border-color: var(--peri); }
.saverow .sgo { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #F4F1EA; background: var(--peri); border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.pname { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.pname.flip { animation: flip .4s cubic-bezier(.2,.8,.2,1); }
@keyframes flip { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
.util { justify-self: end; display: flex; align-items: center; gap: 15px; }
.clip { width: 7px; height: 7px; border-radius: 50%; background: var(--clipoff); transition: background .1s, box-shadow .1s; }
.clip.on { background: #d98a4e; box-shadow: 0 0 8px rgba(217,138,78,.8); }
/* Signal-integrity annunciator: nominal is a faint "monitoring" dot; caution flashes amber when the
   input guard flushes a NaN/Inf; the load-time lamp-test (.test) is an aerospace bulb-check. */
.integ { width: 7px; height: 7px; border-radius: 50%; background: var(--clipoff); box-shadow: none;
         opacity: .5; transition: background .3s, box-shadow .3s, opacity .3s; }
.integ.nominal { background: var(--peri); opacity: .32; }
.integ.test { background: var(--peri); opacity: 1; box-shadow: 0 0 8px 1px rgba(23,113,115,.6); }
.integ.caution { background: #d98a4e; opacity: 1; box-shadow: 0 0 9px 1px rgba(217,138,78,.9);
                 animation: integPulse .55s ease-in-out infinite alternate; }
@keyframes integPulse { from { opacity: .55; } to { opacity: 1; } }

/* Ghost / outline controls */
.delta { font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 100px; padding: 9px 15px; cursor: pointer; transition: .18s var(--ease); display: inline-flex; align-items: center; gap: 7px; }
.delta .g { font-family: var(--display); font-size: 11px; line-height: 1; }
.delta:hover { color: var(--ink); border-color: var(--muted); }
.delta.active { color: #F4F1EA; background: var(--peri); border-color: transparent; }
:root[data-theme="dark"] .delta.active { color: #0a1413; }
.power { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: none; position: relative; cursor: pointer; transition: .2s var(--ease); }
.power::before { content: ""; position: absolute; top: 8px; left: 50%; width: 1.6px; height: 9px; background: var(--muted); transform: translateX(-50%); transition: .2s; }
.power.active { border-color: var(--peri); }
.power.active::before { background: var(--peri); }
.theme { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; transition: .2s var(--ease); display: grid; place-items: center; font-size: 13px; line-height: 1; }
.theme:hover { color: var(--ink); border-color: var(--muted); }

/* Console layout */
.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 224px; gap: 38px; align-items: stretch; }
.work { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.rail { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 20px; border-left: 1px solid var(--hair2); padding: 4px 0 4px 10px; }

/* Hush dial */
.amount { position: relative; width: 206px; height: 206px; cursor: ns-resize; transition: filter .18s var(--ease), transform .18s var(--ease); }
.amount:active { transform: scale(.994); }
.adial { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Reduction — minimal thin bar */
/* Tracking Assistant: a quiet "Auto" pill under the Hush dial */
.autohush { font-family: var(--label); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 100px; padding: 6px 17px; margin-top: -6px; cursor: pointer; transition: .16s var(--ease); }
.autohush:hover { color: var(--peri); border-color: var(--peri); }
.autohush:active { transform: scale(.96); }
.autohush.flash { color: #F4F1EA; background: var(--peri); border-color: transparent; }
.grtrace { width: 190px; }
.grrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.grlab { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.grval { font-family: var(--display); font-size: 12px; font-weight: 500; color: var(--peri); font-variant-numeric: tabular-nums; }
.grbox { position: relative; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.grcv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Vertical I/O meters */
.railio { display: flex; align-items: flex-end; gap: 16px; }
.iorow { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ioscale { display: flex; flex-direction: column; justify-content: space-between; height: 120px; text-align: center;
  font-size: 7.5px; letter-spacing: .04em; color: var(--muted); opacity: .75; font-variant-numeric: tabular-nums; }
.iobar.tall { width: 3px; height: 120px; border-radius: 2px; display: flex; align-items: flex-end; background: var(--track); overflow: hidden; }
.iobar.tall i { width: 100%; height: 0; background: linear-gradient(0deg, var(--peri), var(--lav) 70%, var(--green)); border-radius: 2px; transition: height .08s linear; }
.iobar.tall i.hot { background: linear-gradient(0deg, var(--green), #d98a4e); }

/* Monitor */
.monitor { min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.mrow { display: flex; justify-content: space-between; align-items: baseline; }
.mtitle { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mtitle b { color: var(--peri); font-weight: 600; }
.phtrail { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; height: 15px; align-items: center; }
.phchip { padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #F4F1EA; background: var(--peri); white-space: nowrap; }
:root[data-theme="dark"] .phchip { color: #0a1413; }
.phchip.protect { background: var(--amber); }
.mscale { font-size: 10px; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.mwrap { position: relative; height: 186px; border-radius: 14px; background: none; box-shadow: inset 0 0 0 1px var(--hair2); overflow: hidden; }
.mcanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Control strip */
.strip { display: flex; align-items: center; gap: 10px; }
.strip .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 100px; overflow: hidden; }
.seg button { font-family: var(--label); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: none; border: none; padding: 9px 15px; cursor: pointer; transition: .16s var(--ease); }
.seg button + button { border-left: 1px solid var(--hair2); }
.seg button.active { color: #F4F1EA; background: var(--peri); }
:root[data-theme="dark"] .seg button.active { color: #0a1413; }
.seg button:not(.active):hover { color: var(--ink); }
.tog { font-family: var(--label); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 100px; padding: 10px 16px; cursor: pointer; transition: .16s var(--ease); }
.tog:hover { color: var(--ink); border-color: var(--muted); }
.tog.active { color: #F4F1EA; background: var(--peri); border-color: transparent; }
:root[data-theme="dark"] .tog.active { color: #0a1413; }
.ab { display: inline-flex; align-items: center; gap: 10px; }
.abtrack { display: inline-flex; border: 1px solid var(--hair); border-radius: 100px; overflow: hidden; }
.ab button { font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); background: none; border: none; padding: 8px 15px; cursor: pointer; transition: .16s var(--ease); }
.abtrack button + button { border-left: 1px solid var(--hair2); }
.abtrack button.active { color: #F4F1EA; background: var(--peri); }
:root[data-theme="dark"] .abtrack button.active { color: #0a1413; }
.ab button:not(.active):hover { color: var(--ink); }
#abCopy { letter-spacing: .16em; text-transform: uppercase; font-family: var(--label); font-size: 9.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--hair); border-radius: 100px; padding: 10px 15px; }
#abCopy:hover { color: var(--ink); border-color: var(--muted); }
.io { display: inline-flex; align-items: center; gap: 6px; }
.iol { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.iobar { width: 46px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.iobar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--peri); transition: width .08s linear; }
.iobar i.hot { background: var(--green); }

/* Knobs */
.rack { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding: 0 12px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: ns-resize; }
.kc { position: relative; width: 112px; height: 112px; transition: transform .18s var(--ease); }
.knob:active .kc { transform: scale(.98); }
.knob:hover .klabel { color: var(--ink); }
.kcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.klabel { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-left: .28em; transition: color .18s; }
/* Warmth flavour: a quiet cycling label under the knob (Transformer / Tube / Tape) */
.kflav { font-family: var(--label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: none; border: 1px solid var(--hair); border-radius: 100px; padding: 4px 11px; margin-top: -9px; cursor: pointer; transition: .18s var(--ease); }
.kflav::before { content: "\2039\2009"; color: var(--green); }
.kflav::after  { content: "\2009\203A"; color: var(--green); }
.kflav:hover { color: var(--ink); border-color: var(--muted); }
.kflav:active { transform: scale(.96); }

/* Footer */
.foot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--hair2); padding-top: 14px; gap: 16px; }
.foot .mid { color: var(--ink); font-weight: 600; letter-spacing: .14em; }
.foot .macros em { color: var(--green); font-style: normal; margin: 0 .5em; opacity: .8; }
.foot .ver { font-variant-numeric: tabular-nums; opacity: .8; }
.upreset { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; }
.upreset input { font-family: var(--label); font-size: 11px; color: var(--ink); background: none; border: 1px solid var(--hair); border-radius: 7px; padding: 5px 9px; width: 108px; outline: none; -webkit-user-select: text; user-select: text; }
.upreset input:focus { border-color: var(--peri); }
.upreset input::placeholder { color: var(--muted); }
.upreset button, .upreset select { font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 7px; padding: 6px 10px; cursor: pointer; transition: .16s; }
.upreset button:hover, .upreset select:hover { color: var(--ink); border-color: var(--muted); }
#usave { color: #F4F1EA; background: var(--peri); border-color: transparent; }
#udel { padding: 6px 9px; font-size: 13px; letter-spacing: 0; }

/* Delight layer */
.sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
#bubble { position: fixed; z-index: 50; pointer-events: none; font-family: var(--display); font-weight: 500; font-size: 13px; color: #F4F1EA; background: var(--peri); padding: 4px 9px; border-radius: 8px; opacity: 0; transform: translate(-50%, -100%) scale(.9); transition: opacity .12s, transform .12s; }
:root[data-theme="dark"] #bubble { color: #0a1413; }
#bubble.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
#tip { position: fixed; z-index: 60; pointer-events: none; font-family: var(--label); font-size: 11px; line-height: 1.4; color: var(--ink); background: var(--panelA); border: 1px solid var(--hair); padding: 7px 10px; border-radius: 9px; max-width: 232px; opacity: 0; transition: opacity .14s; box-shadow: 0 14px 34px -16px rgba(20,40,38,.5); }
#tip.on { opacity: 1; }
.typein { position: fixed; z-index: 60; font-family: var(--display); font-weight: 500; font-size: 20px; text-align: center; color: var(--ink); background: var(--panelA); border: 1.5px solid var(--peri); border-radius: 9px; width: 88px; padding: 5px; outline: none; -webkit-user-select: text; user-select: text; }
.enter { opacity: 0; transform: translateY(10px); animation: rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.face.lst .head, .face.lst .rack, .face.lst .strip, .face.lst .rail, .face.lst .foot { opacity: .32; filter: saturate(.6); transition: opacity .4s, filter .4s; }
.face.lst .monitor { box-shadow: 0 0 0 1px var(--amber), 0 0 34px -6px rgba(217,138,78,.4); border-radius: 14px; transition: box-shadow .4s; }

/* Tactile press */
.pbtn, .delta, .tog, .theme, .power, .seg button, .ab button, #abCopy { transition-timing-function: var(--ease); will-change: transform; }
.pbtn:active, .delta:active, .tog:active, .theme:active, .seg button:active, .ab button:active, #abCopy:active { transform: translateY(1px) scale(.98); }
.power:active { transform: scale(.92); }

button:focus-visible, .knob:focus-visible, .amount:focus-visible { outline: 2px solid var(--peri); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .enter { opacity: 1 !important; transform: none !important; } }