:root {
  --bg: #050908;
  --surface: rgba(10, 18, 17, 0.91);
  --surface-2: rgba(14, 25, 23, 0.86);
  --surface-3: rgba(21, 35, 32, 0.76);
  --line: rgba(149, 222, 196, 0.16);
  --line-strong: rgba(149, 222, 196, 0.34);
  --ink: #ecf5ed;
  --muted: #8da49a;
  --mint: #83efc2;
  --amber: #e0b86b;
  --cyan: #68d9eb;
  --coral: #f08a78;
  --blue: #7da6ff;
  --rose: #e993bf;
  --lime: #c7f36e;
  --danger: #ff6f7e;
  --research: #ffb15c;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --ui: Bahnschrift, "Trebuchet MS", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background:
  radial-gradient(circle at 48% -20%, rgba(64, 150, 124, .18), transparent 34rem),
  radial-gradient(circle at 106% 30%, rgba(77, 132, 160, .12), transparent 38rem),
  linear-gradient(145deg, #050908 0%, #07100e 48%, #050707 100%); font: 500 13px/1.45 var(--ui); }
button, input, select, textarea { font: inherit; }
button, select, input, textarea { color: var(--ink); }
button { border: 1px solid var(--line); background: rgba(14, 26, 23, .86); border-radius: 8px; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
button:hover { border-color: var(--line-strong); color: var(--mint); background: rgba(24, 43, 38, .92); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
input[type="range"] { accent-color: var(--mint); cursor: pointer; }
input[type="search"], input[type="text"], select, textarea { border: 1px solid var(--line); border-radius: 8px; background: rgba(4, 10, 9, .76); padding: 10px 12px; }
textarea { resize: vertical; }
small { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; }
p { color: var(--muted); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050908; }
::-webkit-scrollbar-thumb { border: 3px solid #050908; border-radius: 10px; background: linear-gradient(var(--mint), #285a4b); }

.field-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .55; }
.field-layer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(127, 231, 194, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 231, 194, .026) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, #000, transparent 82%); }
.field-layer i { position: absolute; border: 1px solid rgba(109, 232, 191, .1); border-radius: 50%; animation: field-drift 18s linear infinite; }
.field-layer i:nth-child(1) { width: 540px; height: 540px; top: 8%; left: 32%; }
.field-layer i:nth-child(2) { width: 780px; height: 780px; top: -10%; right: -22%; animation-duration: 28s; animation-direction: reverse; }
.field-layer i:nth-child(3) { width: 380px; height: 380px; bottom: -14%; left: -5%; animation-duration: 22s; }
@keyframes field-drift { to { transform: rotate(360deg) scale(1.04); } }

.topbar { position: sticky; top: 0; z-index: 30; min-height: 112px; display: grid; grid-template-columns: 245px minmax(520px, 1fr) minmax(390px, 520px); gap: 12px; align-items: stretch; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(5, 10, 9, .9); backdrop-filter: blur(24px) saturate(130%); box-shadow: 0 10px 38px rgba(0,0,0,.3); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { position: relative; width: 52px; aspect-ratio: 1; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: inset 0 0 24px rgba(111, 238, 194, .08), 0 0 28px rgba(111,238,194,.06); }
.brand-mark i { position: absolute; inset: 9px; border: 1px solid rgba(131,239,194,.26); border-radius: 50%; }
.brand-mark i:nth-child(2) { inset: 17px; border-color: rgba(224,184,107,.5); }
.brand-mark i:nth-child(3) { inset: 23px; background: var(--mint); box-shadow: 0 0 16px var(--mint); }
.brand b { display: block; font: 500 31px/.9 var(--serif); letter-spacing: -.04em; }
.brand small { display: block; margin-bottom: 7px; font-size: 8px; color: var(--mint); }
.tool-nav { display: grid; grid-template-columns: repeat(9, minmax(58px, 1fr)); align-items: center; gap: 5px; overflow-x: auto; }
.tool-nav button { min-height: 68px; padding: 8px 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .055em; color: var(--muted); }
.tool-nav button i { display: block; width: 14px; height: 14px; margin: 0 auto 8px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255,255,255,.02); }
.tool-nav button:nth-child(1) { --tool: var(--amber); }
.tool-nav button:nth-child(2) { --tool: var(--mint); }
.tool-nav button:nth-child(3) { --tool: var(--rose); }
.tool-nav button:nth-child(4) { --tool: var(--blue); }
.tool-nav button:nth-child(5) { --tool: var(--coral); }
.tool-nav button:nth-child(6) { --tool: var(--cyan); }
.tool-nav button:nth-child(7) { --tool: var(--lime); }
.tool-nav button:nth-child(8) { --tool: var(--research); }
.tool-nav button:nth-child(9) { --tool: #f0a6ff; }
.tool-nav button.active { color: var(--tool); border-color: color-mix(in srgb, var(--tool) 45%, transparent); background: color-mix(in srgb, var(--tool) 9%, rgba(8,16,14,.9)); }
.mini-player { display: grid; grid-template-columns: minmax(130px, 1fr) auto; grid-template-rows: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(16,30,26,.9), rgba(7,14,13,.94)); }
.mini-title { min-width: 0; }
.mini-title small { display: block; color: var(--amber); }
.mini-title b { display: block; overflow: hidden; margin-top: 5px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.transport { display: flex; gap: 5px; }
.transport button { min-width: 38px; height: 34px; padding: 0 8px; font-size: 9px; }
.transport .play { min-width: 52px; border-color: rgba(131,239,194,.35); color: var(--mint); }
.transport .record { color: var(--coral); }
.transport .record.active { background: var(--coral); color: #170806; box-shadow: 0 0 18px rgba(240,138,120,.35); }
.timeline-row { grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; font-size: 9px; color: var(--muted); }
.timeline-row input { width: 100%; }

.workspace { display: grid; grid-template-columns: 294px minmax(0, 1fr) 118px; gap: 12px; padding: 12px 14px 48px; }
.panel-shell, .module-card { border: 1px solid var(--line); background: linear-gradient(145deg, var(--surface), rgba(7,13,12,.91)); box-shadow: var(--shadow); }
.library-rail, .master-rail { position: sticky; top: 124px; height: calc(100vh - 160px); min-height: 580px; border-radius: 15px; overflow: hidden; }
.library-rail { display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; }
.rail-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 11px; }
.rail-header h1 { margin: 4px 0 0; font-size: 22px; }
.icon-button { width: 34px; height: 34px; font-size: 18px; }
.vault-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-block: 1px solid var(--line); background: var(--line); }
.vault-stats span { padding: 9px 7px; text-align: center; background: rgba(7,14,13,.94); }
.vault-stats b { display: block; color: var(--amber); font-size: 12px; }
.vault-stats small { font-size: 7px; }
.library-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px 12px 0; }
.library-switch button { min-height: 34px; font-size: 9px; text-transform: uppercase; }
.library-switch .active { color: var(--amber); border-color: rgba(224,184,107,.35); }
.search-box { display: block; margin: 10px 12px 0; }
.search-box span { display: block; margin: 0 0 5px 2px; font-size: 8px; letter-spacing: .16em; color: var(--muted); }
.search-box input { width: 100%; }
.filter-row { display: grid; grid-template-columns: 1.4fr .8fr; gap: 5px; padding: 8px 12px; }
.filter-row select { min-width: 0; padding: 8px; font-size: 10px; }
.library-list { overflow: auto; padding: 0 8px 8px 12px; }
.library-item { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 8px; border: 0; border-bottom: 1px solid rgba(149,222,196,.08); border-radius: 0; text-align: left; background: transparent; }
.library-item:hover, .library-item.active { background: rgba(131,239,194,.055); }
.library-item.active { box-shadow: inset 2px 0 var(--mint); }
.library-item .item-index { font: 10px var(--ui); color: #4f6b61; }
.library-item span { min-width: 0; }
.library-item b { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.library-item small { display: block; margin-top: 3px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-item em { font-size: 8px; font-style: normal; color: var(--amber); }
.empty-library { padding: 26px 14px; text-align: center; color: var(--muted); }
.rail-footer { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 5px; padding: 10px 12px; border-top: 1px solid var(--line); }
.rail-footer button, .import-button { display: grid; place-items: center; min-height: 34px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; text-align: center; cursor: pointer; }
.import-button input { display: none; }

.stage { min-width: 0; }
.status-ribbon { min-height: 34px; display: flex; align-items: center; gap: 18px; margin-bottom: 9px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,15,13,.75); font-size: 8px; letter-spacing: .09em; color: var(--muted); }
.status-ribbon > b { margin-right: auto; color: var(--mint); }
.status-ribbon span b { color: var(--ink); }
.live-dot { width: 7px; height: 7px; margin: 0 !important; border-radius: 50%; background: var(--mint); box-shadow: 0 0 11px var(--mint); }
.tool-panel { display: none; animation: reveal .45s ease both; }
.tool-panel.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.panel-heading { min-height: 118px; display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 10px; padding: 22px 24px; border: 1px solid rgba(224,184,107,.17); border-radius: 15px; background: linear-gradient(115deg, rgba(53,43,25,.2), rgba(8,16,14,.88) 62%), radial-gradient(circle at 90% 0, rgba(224,184,107,.1), transparent 34%); }
.panel-heading h2 { margin: 4px 0 6px; font-size: clamp(30px, 3vw, 48px); line-height: .98; }
.panel-heading p { max-width: 780px; margin-bottom: 0; font-size: 11px; }
.panel-heading > div:first-child > small { color: var(--amber); }
.heading-actions { flex: 0 0 auto; display: flex; gap: 7px; }
.heading-actions button { min-height: 38px; padding: 0 14px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.primary-action { border-color: rgba(131,239,194,.45); color: var(--mint); background: rgba(131,239,194,.1); }
.neural-heading { border-color: rgba(131,239,194,.2); background: linear-gradient(115deg, rgba(27,74,60,.22), rgba(8,16,14,.88) 62%), radial-gradient(circle at 90% 0, rgba(131,239,194,.1), transparent 34%); }
.neural-heading > div:first-child > small { color: var(--mint); }
.meta-heading { border-color: rgba(233,147,191,.22); background: linear-gradient(115deg, rgba(73,35,61,.24), rgba(8,16,14,.88) 62%); }
.meta-heading > div:first-child > small { color: var(--rose); }
.spatial-heading { border-color: rgba(125,166,255,.22); background: linear-gradient(115deg, rgba(37,50,92,.25), rgba(8,16,14,.88) 62%); }
.spatial-heading > div:first-child > small { color: var(--blue); }
.fx-heading { border-color: rgba(240,138,120,.22); background: linear-gradient(115deg, rgba(82,41,34,.24), rgba(8,16,14,.88) 62%); }
.fx-heading > div:first-child > small { color: var(--coral); }
.analyze-heading { border-color: rgba(104,217,235,.22); background: linear-gradient(115deg, rgba(26,66,72,.23), rgba(8,16,14,.88) 62%); }
.analyze-heading > div:first-child > small { color: var(--cyan); }
.preset-heading { border-color: rgba(199,243,110,.2); background: linear-gradient(115deg, rgba(60,76,29,.2), rgba(8,16,14,.88) 62%); }
.preset-heading > div:first-child > small { color: var(--lime); }
.research-heading { border-color: rgba(255,177,92,.23); background: linear-gradient(115deg, rgba(92,55,23,.24), rgba(8,16,14,.88) 62%), radial-gradient(circle at 88% 0, rgba(255,177,92,.1), transparent 36%); }
.research-heading > div:first-child > small { color: var(--research); }
.mobile-heading { border-color: rgba(240,166,255,.2); background: linear-gradient(115deg, rgba(78,43,84,.21), rgba(8,16,14,.88) 62%); }
.mobile-heading > div:first-child > small { color: #f0a6ff; }
.module-card { position: relative; border-radius: 15px; overflow: hidden; }
.module-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.025); }

.vault-hero { min-height: 470px; }
.vault-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.vault-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,11,.96) 0%, rgba(6,12,11,.55) 45%, transparent 72%), linear-gradient(0deg, rgba(6,12,11,.88), transparent 50%); z-index: 1; pointer-events: none; }
.vault-orbit { position: absolute; right: 10%; top: 50%; z-index: 2; width: 270px; aspect-ratio: 1; transform: translateY(-50%); border: 1px solid rgba(224,184,107,.2); border-radius: 50%; display: grid; place-items: center; animation: orbit-pulse 8s ease-in-out infinite; }
.vault-orbit i { position: absolute; inset: 18%; border: 1px solid rgba(131,239,194,.22); border-radius: 50%; }
.vault-orbit i:nth-child(2) { inset: 35%; border-color: rgba(104,217,235,.3); }
.vault-orbit i:nth-child(3) { inset: 47%; background: var(--amber); box-shadow: 0 0 30px rgba(224,184,107,.5); }
.vault-orbit span { font: 74px var(--serif); color: rgba(236,245,237,.15); }
@keyframes orbit-pulse { 50% { transform: translateY(-50%) scale(1.04) rotate(8deg); } }
.track-identity { position: absolute; z-index: 3; left: 28px; bottom: 100px; max-width: 54%; }
.track-identity small { color: var(--amber); }
.track-identity h3 { margin: 6px 0; font-size: clamp(32px, 4vw, 62px); line-height: .93; }
.track-identity p { font-size: 11px; }
.hero-controls { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 20px; display: flex; gap: 8px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line); }
.hero-controls label { display: grid; gap: 5px; min-width: 110px; font-size: 8px; letter-spacing: .1em; color: var(--muted); }
.hero-controls button { min-height: 32px; padding: 0 10px; font-size: 9px; }
.vault-lower-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 10px; }
.queue-card, .integrity-card { min-height: 180px; padding: 15px; }
.module-card > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.module-card > header b { font-size: 10px; color: var(--mint); }
.queue-list { display: flex; gap: 7px; overflow-x: auto; }
.queue-chip { flex: 0 0 160px; min-height: 80px; padding: 10px; text-align: left; }
.queue-chip b, .queue-chip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue-chip small { margin-top: 8px; }
.integrity-card dl, .coherence-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.integrity-card dl div, .coherence-card dl div { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
dt { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
dd { margin: 4px 0 0; overflow: hidden; font-size: 10px; color: var(--ink); text-overflow: ellipsis; }

.neural-layout, .spatial-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .7fr); gap: 10px; }
.neural-map, .spatial-field { min-height: 610px; background: radial-gradient(circle at center, rgba(34,90,72,.18), rgba(4,9,8,.96) 64%); }
.neural-map canvas, .spatial-field canvas { width: 100%; height: 100%; }
.band-selector, .dimension-selector { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,10,9,.82); backdrop-filter: blur(12px); }
.band-selector button { min-height: 52px; background: transparent; }
.band-selector button b, .band-selector button small { display: block; }
.band-selector button.active { color: var(--mint); border-color: rgba(131,239,194,.4); background: rgba(131,239,194,.08); }
.control-stack { display: grid; gap: 10px; align-content: start; }
.control-card { padding: 17px; }
.control-card > header { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.control-card label, .master-rail > label, .fx-module label { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(100px, 1.4fr) 48px; gap: 8px; align-items: center; margin: 11px 0; font-size: 9px; color: var(--muted); }
.control-card label output, .master-rail label output, .fx-module label output { text-align: right; color: var(--ink); font-size: 9px; }
.control-card select { min-width: 0; padding: 8px; }
.toggle-line { grid-template-columns: auto 1fr !important; padding-top: 10px; border-top: 1px solid var(--line); }
.boundary-note { padding: 16px; border: 1px solid rgba(224,184,107,.22); border-radius: 14px; background: rgba(224,184,107,.055); }
.boundary-note b { font-size: 9px; letter-spacing: .16em; color: var(--amber); }
.boundary-note p { margin: 8px 0 0; font-size: 10px; }

.meta-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .7fr); gap: 10px; }
.text-sonifier { min-height: 610px; padding: 20px; }
.text-sonifier > label { display: grid; gap: 8px; font-size: 9px; letter-spacing: .14em; color: var(--rose); }
.text-sonifier textarea { width: 100%; min-height: 178px; font: 25px/1.42 var(--serif); color: #eadfe6; background: rgba(15,8,14,.7); }
.sonic-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.sonic-modes button { padding: 8px 10px; font-size: 9px; }
.sonic-modes .active { color: var(--rose); border-color: rgba(233,147,191,.42); background: rgba(233,147,191,.09); }
.token-field { min-height: 245px; display: flex; flex-wrap: wrap; align-content: center; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(circle at center, rgba(119,60,95,.15), transparent 67%); }
.token-field span { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(233,147,191,.2); border-radius: 50%; font: 13px var(--serif); color: var(--rose); animation: token-in .4s both; }
@keyframes token-in { from { opacity: 0; transform: scale(.4); } }
.lexicon-card, .coherence-card { padding: 16px; }
.lexicon-card #lexiconReadout { display: grid; gap: 7px; }
.lexicon-card span { padding: 9px; border-left: 2px solid var(--rose); background: rgba(233,147,191,.04); color: var(--muted); font-size: 10px; }

.dimension-selector { grid-template-columns: repeat(5, 1fr); }
.dimension-selector button { min-height: 42px; font: 16px var(--serif); }
.dimension-selector button.active { color: var(--blue); border-color: rgba(125,166,255,.44); background: rgba(125,166,255,.09); }
.coherence-card dd { color: var(--blue); font: 24px var(--serif); }

.fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fx-module { --fx: var(--mint); min-height: 230px; padding: 18px; border-top: 2px solid var(--fx); }
.fx-module.amber { --fx: var(--amber); }
.fx-module.coral { --fx: var(--coral); }
.fx-module.cyan { --fx: var(--cyan); }
.fx-module.blue { --fx: var(--blue); }
.fx-module.rose { --fx: var(--rose); }
.fx-module header { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; }
.fx-module header > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--fx) 45%, transparent); border-radius: 50%; color: var(--fx); }
.fx-module header small, .fx-module header b { display: block; }
.fx-module header b { margin-top: 3px; font: 20px var(--serif); }
.bypass { width: 38px; height: 28px; font-size: 8px; }
.bypass.active { color: var(--fx); border-color: color-mix(in srgb, var(--fx) 45%, transparent); }
.fx-module label { grid-template-columns: 62px 1fr 52px; }

.analyzer-main { height: 520px; padding: 8px; background: radial-gradient(circle at 50% 100%, rgba(30,98,105,.2), transparent 65%), rgba(4,10,10,.94); }
.analyzer-main canvas { width: 100%; height: calc(100% - 24px); }
.frequency-scale { display: flex; justify-content: space-between; padding: 0 12px; font-size: 8px; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 9px; }
.metric-grid article { min-height: 90px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.metric-grid b { display: block; margin-top: 13px; color: var(--cyan); font: 25px var(--serif); }

.preset-toolbar { display: flex; gap: 10px; margin: 10px 0; }
.preset-toolbar > input { width: 260px; }
.preset-toolbar > div { display: flex; flex-wrap: wrap; gap: 5px; }
.preset-toolbar button { padding: 7px 10px; font-size: 8px; text-transform: uppercase; }
.preset-toolbar button.active { color: var(--lime); border-color: rgba(199,243,110,.35); }
.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.preset-card { min-height: 164px; position: relative; padding: 16px; text-align: left; overflow: hidden; }
.preset-card::before { content: ""; position: absolute; width: 120px; height: 120px; right: -50px; top: -50px; border: 1px solid var(--preset-color, var(--lime)); border-radius: 50%; opacity: .18; }
.preset-card small { color: var(--preset-color, var(--lime)); }
.preset-card b { display: block; margin: 9px 0 12px; font: 22px/1 var(--serif); }
.preset-card p { margin: 0; font-size: 9px; }
.preset-card em { position: absolute; right: 12px; bottom: 10px; color: var(--muted); font-size: 8px; font-style: normal; }

.research-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.research-stat { min-height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(18,31,28,.95), rgba(7,12,11,.9)); }
.research-stat b { display: block; margin: 9px 0 5px; font: 28px/1 var(--serif); }
.research-stat span { color: var(--muted); font-size: 8px; }
.research-stat.lab b { color: var(--research); }
.research-stat.eeg b { color: var(--cyan); }
.research-stat.orchestra b { color: var(--amber); }
.research-stat.neural b { color: var(--mint); }
.research-stat.mobile b { color: #f0a6ff; }
.research-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 10px; }
.research-grid > article { padding: 18px; }
.eeg-matrix { grid-column: 1 / -1; border-color: rgba(104,217,235,.22); }
.eeg-matrix > header, .source-router > header, .neural-contract > header, .research-mobile > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.eeg-matrix > header b, .source-router > header b, .neural-contract > header b, .research-mobile > header b { display: block; margin-top: 3px; font: 20px var(--serif); }
.eeg-matrix > header span { color: var(--cyan); font-size: 9px; }
.research-total { display: flex; align-items: baseline; gap: 9px; padding: 10px 0 14px; border-top: 1px solid var(--line); }
.research-total b { color: var(--cyan); font: 26px var(--serif); }
.research-total span { margin-right: 20px; color: var(--muted); font-size: 8px; }
.eeg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.eeg-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 9px; }
.eeg-table th, .eeg-table td { padding: 9px 11px; border-bottom: 1px solid rgba(149,222,196,.1); text-align: left; }
.eeg-table th { color: var(--cyan); background: rgba(104,217,235,.055); font-size: 8px; letter-spacing: .12em; }
.eeg-table td:last-child { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.research-caution { margin: 13px 0 0; padding-left: 10px; border-left: 2px solid var(--cyan); font-size: 9px; }
.source-router { border-color: rgba(255,177,92,.2); }
.source-router > button { width: 100%; display: grid; grid-template-columns: 34px 1fr; padding: 13px; margin-top: 7px; text-align: left; }
.source-router > button span { grid-row: span 2; color: var(--research); font: 17px var(--serif); }
.source-router > button b { font-size: 10px; }
.source-router > button small { margin-top: 3px; font-size: 7px; }
.neural-contract { border-color: rgba(131,239,194,.2); }
.kernel-lines { display: flex; align-items: center; gap: 7px; padding: 16px 0; }
.kernel-lines span { padding: 6px 8px; border: 1px solid rgba(131,239,194,.22); border-radius: 99px; color: var(--mint); font-size: 7px; text-align: center; }
.kernel-lines i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--mint), transparent); }
.neural-contract p { font-size: 9px; }
.neural-contract dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 14px 0 0; }
.neural-contract dl div { padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.neural-contract dt { color: var(--muted); font-size: 7px; }
.neural-contract dd { margin: 3px 0 0; color: var(--mint); font-size: 9px; }
.research-mobile { grid-column: 1 / -1; border-color: rgba(240,166,255,.2); }
#researchMobileFiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mobile-file { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,15,14,.72); }
.mobile-file b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-file small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-file button { grid-row: span 2; padding: 0 10px; color: #f0a6ff; font-size: 8px; }

.mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-grid > article { min-height: 310px; padding: 18px; }
.mobile-integrity { grid-row: span 2; }
.mobile-integrity > header b { color: #f0a6ff; }
.hash-orbit { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin: 20px auto; border: 1px solid rgba(240,166,255,.25); border-radius: 50%; }
.hash-orbit i { position: absolute; inset: 18px; border: 1px solid rgba(131,239,194,.22); border-radius: 50%; }
.hash-orbit i:nth-child(2) { inset: 42px; border-color: rgba(224,184,107,.34); }
.hash-orbit span { color: #f0a6ff; font: 30px var(--serif); }
.mobile-integrity dl { display: grid; gap: 6px; margin: 0; }
.mobile-integrity dl div { padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.mobile-integrity dd { word-break: break-all; }
.mobile-dependencies ol, .mobile-boundary ol { margin: 0; padding-left: 22px; color: var(--muted); }
.mobile-dependencies li, .mobile-boundary li { margin: 9px 0; padding-left: 5px; }
.mobile-boundary { grid-column: 2; }
.mobile-boundary code { color: var(--mint); word-break: break-word; }

.master-rail { display: flex; flex-direction: column; align-items: stretch; padding: 14px 12px; }
.master-rail header { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.master-rail h2 { margin: 3px 0; font-size: 23px; }
.master-rail header span { display: inline-block; padding: 3px 7px; border: 1px solid rgba(131,239,194,.26); border-radius: 99px; font-size: 7px; color: var(--mint); }
.vertical-meters { height: 200px; display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.vertical-meters > div { width: 18px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: rgba(2,6,5,.8); }
.vertical-meters i { position: absolute; left: 2px; right: 2px; bottom: 16px; height: 2%; border-radius: 2px; background: linear-gradient(0deg, var(--mint), var(--lime) 70%, var(--coral)); transition: height .06s linear; }
.vertical-meters span { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 7px; color: var(--muted); }
.master-rail > label { display: block; margin: 9px 0; font-size: 8px; text-align: center; }
.master-rail > label input { width: 100%; margin-top: 5px; }
.master-rail > label output { display: block; margin-top: 4px; text-align: center; }
.master-fader { flex: 1; min-height: 140px; display: grid !important; grid-template-rows: auto 1fr auto; justify-items: center; }
.master-fader input { width: 130px !important; align-self: center; transform: rotate(-90deg); }
.master-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.master-actions button { min-height: 34px; font-size: 8px; }
.master-actions button.active { color: var(--danger); border-color: rgba(255,111,126,.4); }
.safety-seal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; }
.safety-seal i { width: 22px; height: 22px; display: block; margin: 0 auto 6px; border: 1px solid var(--mint); border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(131,239,194,.07); }
.safety-seal b, .safety-seal small { display: block; }
.safety-seal b { color: var(--mint); font-size: 8px; }
.safety-seal small { margin-top: 3px; font-size: 6px; }

.footer-bar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 18px; padding: 0 14px; border-top: 1px solid var(--line); background: rgba(4,9,8,.94); backdrop-filter: blur(16px); font-size: 8px; color: var(--muted); }
.footer-bar span:nth-child(2) { margin-right: auto; }
.footer-bar button { height: 24px; padding: 0 10px; font-size: 8px; }
dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 17px; color: var(--ink); background: #091311; box-shadow: 0 40px 120px #000; }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
dialog form { position: relative; padding: 28px; }
dialog h2 { margin: 7px 0 14px; font-size: 34px; }
dialog li, dialog p { color: var(--muted); margin-bottom: 8px; }
dialog form > button:last-child { min-height: 38px; padding: 0 15px; color: var(--mint); }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; font-size: 20px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 50px; max-width: min(460px, calc(100% - 30px)); transform: translate(-50%, 20px); padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(8,17,15,.96); opacity: 0; pointer-events: none; transition: .25s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1260px) {
  .topbar { grid-template-columns: 220px 1fr; }
  .mini-player { grid-column: 1 / -1; }
  .workspace { grid-template-columns: 260px minmax(0,1fr) 100px; }
  .library-rail, .master-rail { top: 201px; height: calc(100vh - 237px); }
  .fx-grid { grid-template-columns: repeat(2, 1fr); }
  .preset-grid { grid-template-columns: repeat(3, 1fr); }
  .research-stats { grid-template-columns: repeat(3, 1fr); }
  #researchMobileFiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .topbar { position: relative; grid-template-columns: 1fr; }
  .tool-nav { order: 3; overflow-x: auto; grid-template-columns: repeat(9, minmax(100px,1fr)); }
  .mini-player { grid-column: auto; }
  .workspace { grid-template-columns: 1fr; }
  .library-rail, .master-rail { position: relative; top: auto; height: auto; min-height: 0; }
  .library-rail { max-height: 620px; }
  .master-rail { display: grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: 10px; align-items: center; }
  .vertical-meters { height: 110px; }
  .master-fader { min-height: 100px; }
  .safety-seal { display: none; }
  .neural-layout, .spatial-layout, .meta-grid { grid-template-columns: 1fr; }
  .mobile-grid { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .eeg-matrix, .research-mobile { grid-column: auto; }
  .mobile-integrity { grid-row: auto; }
  .mobile-boundary { grid-column: auto; }
  .control-stack { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  body { font-size: 12px; }
  .topbar { padding: 8px; }
  .brand b { font-size: 27px; }
  .mini-player { grid-template-columns: 1fr; }
  .transport { grid-row: 2; }
  .timeline-row { grid-row: 3; }
  .workspace { padding: 8px 8px 45px; }
  .status-ribbon { overflow-x: auto; white-space: nowrap; }
  .panel-heading { display: block; min-height: 0; padding: 18px; }
  .panel-heading h2 { font-size: 34px; }
  .heading-actions { margin-top: 14px; overflow-x: auto; }
  .vault-hero { min-height: 520px; }
  .vault-orbit { right: -55px; width: 230px; opacity: .7; }
  .track-identity { max-width: calc(100% - 45px); }
  .hero-controls { overflow-x: auto; }
  .vault-lower-grid, .control-stack { grid-template-columns: 1fr; }
  .neural-map, .spatial-field { min-height: 470px; }
  .band-selector button { min-height: 44px; }
  .band-selector button b { font-size: 8px; }
  .band-selector button small { font-size: 6px; }
  .fx-grid, .preset-grid, .metric-grid { grid-template-columns: 1fr; }
  .research-stats, #researchMobileFiles { grid-template-columns: 1fr; }
  .kernel-lines { align-items: stretch; flex-direction: column; }
  .kernel-lines i { width: 1px; min-height: 15px; margin: 0 auto; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .analyzer-main { height: 380px; }
  .master-rail { grid-template-columns: 1fr 1fr; }
  .footer-bar span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}