:root {
  color-scheme: dark;
  --bg: #05070c; --panel: #090d15; --panel-2: #0d1420; --line: rgba(133,166,224,.14);
  --line-hot: rgba(116,158,235,.34); --text: #e6edfa; --muted: #77859d; --soft: #a8b4c8;
  --accent: #7aa7ff; --accent-2: #65e4ff; --glow: rgba(76,126,226,.34);
  --display: "Space Grotesk", sans-serif; --sans: "IBM Plex Sans", sans-serif; --mono: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; }
button, input, textarea, select, label, summary, a, output { font-family: var(--mono); color: inherit; }
button { cursor: pointer; }
.app-shell, .toast { text-transform: lowercase; }
.mono-input, .preset-button code { text-transform: none; }
.space-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background:
  radial-gradient(circle at 17% 20%, rgba(38,75,143,.13), transparent 28%),
  radial-gradient(circle at 78% 76%, rgba(23,78,128,.12), transparent 34%), #05070c; }
.space-field::before { content: ""; position: absolute; inset: 0; opacity: .52; background-image:
  radial-gradient(circle, rgba(183,211,255,.48) 0 1px, transparent 1.2px),
  radial-gradient(circle, rgba(112,151,220,.25) 0 1px, transparent 1.1px); background-size: 137px 149px, 71px 83px; background-position: 23px 11px, 7px 39px; }
.aurora { position: absolute; width: 55vw; height: 22vw; border-radius: 50%; filter: blur(80px); opacity: .09; background: #3176dc; animation: drift 18s ease-in-out infinite alternate; }
.aurora-one { left: -15%; top: 12%; transform: rotate(-15deg); }.aurora-two { right: -17%; bottom: 2%; background: #20b7d8; animation-delay: -7s; }
.orbit { position: absolute; width: 50vw; aspect-ratio: 1; border: 1px solid rgba(111,156,230,.08); border-radius: 50%; transform: rotateX(68deg) rotateZ(-20deg); }
.orbit::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 50%; left: -3px; background: #80b5ff; box-shadow: 0 0 18px 5px #528be9; }
.orbit-one { left: -18%; top: -3%; animation: orbit 24s linear infinite; }.orbit-two { width: 65vw; right: -27%; bottom: -21%; animation: orbit 32s linear infinite reverse; }
@keyframes drift { to { transform: translate3d(10vw,5vh,0) rotate(8deg); }} @keyframes orbit { to { transform: rotateX(68deg) rotateZ(340deg); }}
.app-shell { position: relative; z-index: 1; height: 100vh; display: grid; grid-template-rows: 72px minmax(0,1fr); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(5,8,14,.76); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }.brand > span:last-child { display: grid; gap: 1px; }
.brand b { font: 600 14px/1 var(--display); letter-spacing: .22em; }.brand small { color: var(--muted); font: 500 8px/1 var(--sans); letter-spacing: .18em; text-transform: lowercase; }
.brand-mark { width: 32px; height: 32px; position: relative; display: grid; place-items: center; border: 1px solid var(--line-hot); transform: rotate(45deg); box-shadow: 0 0 25px rgba(87,138,230,.12), inset 0 0 16px rgba(91,145,238,.07); }
.brand-mark i { position: absolute; border: 1px solid rgba(112,171,255,.55); width: 3px; height: 3px; border-radius: 50%; box-shadow: 0 0 8px #70aaff; }.brand-mark i:nth-child(2){ transform: translate(7px,-5px) }.brand-mark i:nth-child(3){ transform: translate(-6px,6px) }
.topbar-meta { display: flex; align-items: center; gap: 13px; }.signal-pill { border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: lowercase; }
.signal-pill i, .status-pulse i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 7px; background: #63e6bc; box-shadow: 0 0 9px #45dca9; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(12,18,29,.72); border-radius: 7px; transition: .2s; }
.icon-button:hover { border-color: var(--line-hot); background: #101827; }.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 370px; transition: grid-template-columns .35s cubic-bezier(.2,.8,.2,1); }
body.panel-collapsed .workspace { grid-template-columns: minmax(0,1fr) 0; }.preview-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 68px minmax(0,1fr) 42px; padding: 20px 22px 18px; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 4px; }.eyebrow { display: block; color: #6685b9; font: 500 8px/1 var(--mono); letter-spacing: .18em; text-transform: lowercase; margin-bottom: 7px; }
h1,h2 { margin: 0; font-family: var(--display); font-weight: 500; } h1 { font-size: 17px; letter-spacing: -.02em; }h1 span { color: var(--muted); font-weight: 400; margin-left: 7px; } h2 { font-size: 15px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); background: rgba(7,11,18,.8); padding: 3px; border-radius: 8px; }
.segmented button { border: 0; background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 5px; font: 500 10px/1 var(--mono); transition: .2s; }.segmented button.active { color: #dce9ff; background: #17243a; box-shadow: inset 0 0 0 1px rgba(107,153,231,.22), 0 0 16px rgba(53,101,182,.1); }
.segmented.compact button { padding: 7px 11px; font-size: 9px; }
.viewport-shell { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(105,142,203,.18); border-radius: 4px; background: rgba(2,4,8,.82); box-shadow: 0 22px 90px rgba(0,0,0,.38), inset 0 0 90px rgba(28,59,111,.06); display: grid; grid-template-columns: 1fr; gap: 1px; padding: 28px; }
.viewport-shell::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(23,48,89,.19), transparent 57%); }
.viewport-grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(108,151,222,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(108,151,222,.12) 1px,transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle,black,transparent 80%); }
.canvas-pane { position: relative; z-index: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity .25s; }.canvas-pane canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.source-pane { display: none; }.viewport-shell[data-view="source"] .source-pane { display:flex; }.viewport-shell[data-view="source"] .output-pane { display:none; }.viewport-shell[data-view="compare"] { grid-template-columns: 1fr 1fr; }.viewport-shell[data-view="compare"] .source-pane { display:flex; border-right: 1px solid var(--line); padding-right: 14px; }.viewport-shell[data-view="compare"] .output-pane { padding-left: 14px; }
.compare-label { display:none; position:absolute; top:13px; z-index:3; color:#6685a8; font:500 8px/1 var(--mono); letter-spacing:.15em; text-transform:lowercase; }.viewport-shell[data-view="compare"] .compare-label { display:block }.source-label { left:14px }.render-label { left:calc(50% + 14px) }
.corner { position:absolute; z-index:4; width:11px; height:11px; border-color:rgba(114,169,255,.65); }.corner-tl{top:8px;left:8px;border-top:1px solid;border-left:1px solid}.corner-tr{top:8px;right:8px;border-top:1px solid;border-right:1px solid}.corner-bl{bottom:8px;left:8px;border-bottom:1px solid;border-left:1px solid}.corner-br{bottom:8px;right:8px;border-bottom:1px solid;border-right:1px solid}
.viewport-hud { position:absolute; z-index:4; left:13px; right:13px; bottom:12px; display:flex; justify-content:space-between; color:rgba(114,142,183,.5); font:500 8px/1 var(--mono); letter-spacing:.12em; pointer-events:none; }
.statusbar { display:flex; align-items:end; gap:25px; padding: 13px 4px 0; color:var(--muted); font:500 8px/1 var(--mono); letter-spacing:.08em; text-transform:lowercase; }.status-item { display:flex; gap:7px; }.status-item b{color:#aab9cf;font-weight:500}.status-pulse { margin-left:auto; }
.control-panel { min-width:0; border-left:1px solid var(--line); background:rgba(7,10,16,.9); backdrop-filter:blur(28px); overflow:hidden; box-shadow:-20px 0 70px rgba(0,0,0,.2); transition:opacity .25s; }.panel-collapsed .control-panel { opacity:0; pointer-events:none; }.panel-head { height:68px; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.panel-scroll{height:calc(100vh - 140px);overflow:auto;scrollbar-width:thin;scrollbar-color:#263653 transparent}.mobile-close{display:none;font-size:22px}.control-section{border-bottom:1px solid var(--line)}.control-section summary{height:48px;display:grid;grid-template-columns:28px 1fr 14px;align-items:center;padding:0 18px;list-style:none;cursor:pointer;color:#b7c3d5;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:lowercase}.control-section summary::-webkit-details-marker{display:none}.section-index{color:#4e6385;font-size:8px}.control-section summary i{width:7px;height:7px;border-right:1px solid #61728e;border-bottom:1px solid #61728e;transform:rotate(45deg);transition:.2s}.control-section[open] summary i{transform:rotate(225deg) translate(-2px,-2px)}.section-body{padding:4px 18px 18px;display:grid;gap:14px}
.local-preset-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.local-preset-save input{min-width:0;border:1px solid var(--line);border-radius:6px;background:#080d15;padding:9px 10px;outline:none;font:500 9px/1 var(--mono)}.local-preset-save input:focus{border-color:var(--line-hot)}.local-preset-save button{border:1px solid rgba(105,153,231,.4);border-radius:6px;background:#14233a;padding:0 13px;color:#a9c8fa;font:500 9px/1 var(--mono)}.local-preset-list{display:grid;gap:6px}.local-preset-empty{margin:0;padding:12px;border:1px dashed var(--line);border-radius:6px;color:#627087;text-align:center;font:400 8px/1.4 var(--mono)}.local-preset-item{display:grid;grid-template-columns:minmax(0,1fr) 30px;border:1px solid var(--line);border-radius:6px;background:#0a1019;overflow:hidden}.local-preset-item.active{border-color:rgba(112,161,240,.5);background:#101c2d}.local-preset-load,.local-preset-delete{border:0;background:transparent}.local-preset-load{min-width:0;padding:9px 10px;text-align:left}.local-preset-load b,.local-preset-load small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.local-preset-load b{color:#c4d0e2;font:500 9px/1 var(--mono)}.local-preset-load small{margin-top:5px;color:#60718b;font:400 7px/1 var(--mono)}.local-preset-delete{border-left:1px solid var(--line);color:#687891;font:400 14px/1 var(--mono)}.local-preset-delete:hover{color:#f09aa3;background:rgba(112,31,43,.13)}.local-preset-note{margin:-4px 0 0;color:#627087;font:400 9px/1.4 var(--sans)}
.drop-zone{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:13px;border:1px dashed rgba(112,153,220,.28);border-radius:8px;background:rgba(28,46,75,.16);transition:.2s}.drop-zone.dragover{border-color:#76aaff;background:rgba(57,95,154,.24)}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone span:nth-of-type(2){display:grid;gap:4px}.drop-zone b{font-size:11px}.drop-zone small{font:400 8px/1.4 var(--mono);color:var(--muted)}.drop-zone em{font:500 8px/1 var(--mono);font-style:normal;color:#8eb4f3;text-transform:lowercase;letter-spacing:.08em}.upload-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;background:#0e1827}.upload-icon svg,.export-button svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.preset-button{height:48px;text-align:left;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#0b111b;overflow:hidden}.preset-button span{display:block;color:#d5deec;font:500 9px/1 var(--mono);margin-bottom:7px}.preset-button code{display:block;color:#61728e;font:400 8px/1 var(--mono);white-space:nowrap}.preset-button.active{border-color:rgba(114,163,242,.52);background:#111d30;box-shadow:inset 0 0 14px rgba(65,111,189,.08)}
.field-label{font:500 9px/1 var(--mono);color:#8b99ae;text-transform:lowercase;letter-spacing:.06em;margin-bottom:-7px}.mono-input,select{width:100%;border:1px solid var(--line);border-radius:6px;background:#080d15;padding:9px 10px;outline:none}.mono-input{resize:vertical;min-height:48px;font:400 10px/1.4 var(--mono);color:#b9c9e2}.mono-input:focus,select:focus{border-color:var(--line-hot)}select{font:500 9px/1 var(--mono);color:#9cabc0;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64748d 50%),linear-gradient(135deg,#64748d 50%,transparent 50%);background-position:calc(100% - 14px) 13px,calc(100% - 10px) 13px;background-size:4px 4px;background-repeat:no-repeat}
.inline-control{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px}.inline-control>div{display:grid;gap:4px}.inline-control label{font-size:10px;color:#b5c0d1}.inline-control small{font:400 8px/1.3 var(--mono);color:var(--muted)}.switch{position:relative;display:inline-block!important}.switch input{position:absolute;opacity:0}.switch>span{display:block;width:31px;height:17px;padding:2px;border:1px solid #283650;border-radius:99px;background:#0a1019;transition:.2s}.switch>span::after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#58667b;transition:.2s}.switch input:checked+span{border-color:#456da9;background:#14253d;box-shadow:0 0 14px rgba(75,127,213,.15)}.switch input:checked+span::after{transform:translateX(14px);background:#84aff8;box-shadow:0 0 8px #5f99f8}
.color-modes{grid-template-columns:repeat(4,1fr);grid-auto-flow:unset}.color-modes button{padding:8px 3px;font-size:8px}.color-row,.split-fields{display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px}.color-row label{font:500 9px/1 var(--mono);color:#8b99ae}.split-fields{grid-template-columns:minmax(0,1fr) 44px}.split-fields input[type=color],.color-row input[type=color]{width:44px;height:34px;border:1px solid var(--line);background:#090e17;border-radius:6px;padding:3px}.mode-palette{display:grid;gap:14px}.palette-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.palette-swatch{height:29px;border:1px solid var(--line);border-radius:5px;padding:3px;background:#080d14}.palette-swatch i{display:block;width:100%;height:100%;border-radius:3px}.palette-swatch.active{border-color:#6e9ce5}.palette-editor{display:grid;gap:9px}.palette-track{position:relative;height:33px;border:1px solid var(--line);border-radius:5px;margin:9px 5px 0}.palette-stop{position:absolute;top:50%;width:14px;height:20px;transform:translate(-50%,-50%);border:2px solid #d2def0;border-radius:3px;box-shadow:0 2px 7px #000;cursor:ew-resize;padding:0}.palette-stop::after{content:"";position:absolute;left:4px;bottom:-7px;border:2px solid transparent;border-top-color:#d2def0}.palette-editor-actions{display:flex;justify-content:space-between;color:var(--muted);font:400 8px/1 var(--mono)}.palette-editor-actions button{border:0;background:none;color:#87adf0;font:500 8px/1 var(--mono)}
.range-control{display:grid;gap:8px}.range-control>div{display:flex;justify-content:space-between;align-items:center}.range-control label{font-size:10px;color:#aeb9ca}.range-control output{color:#6f8fbe;font:500 8px/1 var(--mono)}input[type=range]{width:100%;height:3px;margin:0;appearance:none;background:linear-gradient(90deg,#355a96 var(--range,50%),#1a2434 var(--range,50%));border-radius:99px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#9bc0ff;border:2px solid #1b2a43;box-shadow:0 0 9px #5994ef}input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#9bc0ff;border:2px solid #1b2a43;box-shadow:0 0 9px #5994ef}.compact-control{height:34px;min-height:0;border:1px solid var(--line);border-radius:6px;padding:0 9px;font:500 9px/1 var(--mono)}
.export-grid{grid-template-columns:1fr 1fr;gap:8px}.export-button{min-height:55px;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:6px;background:#0b111b;padding:9px;color:#8ca5cb;transition:.2s}.export-button:hover{border-color:var(--line-hot);background:#111c2e;color:#bcd2f5}.export-button span{display:grid;gap:4px}.export-button b{font-size:9px;color:#c8d3e3}.export-button small{font:500 7px/1 var(--mono);color:#60708a}.compat-note{grid-column:1/-1;margin:5px 0 0;color:#627087;font:400 9px/1.5 var(--sans)}.recording-progress{grid-column:1/-1;border:1px solid rgba(244,102,102,.25);background:rgba(97,24,35,.12);border-radius:6px;padding:9px}.recording-progress>div{display:flex;align-items:center;gap:8px;font:500 8px/1 var(--mono);color:#f2a7ad}.recording-progress i{width:6px;height:6px;border-radius:50%;background:#f45d69;box-shadow:0 0 9px #f45d69;animation:blink 1s infinite}.recording-progress button{margin-left:auto;border:0;background:none;color:#f3bdc1;font:500 8px/1 var(--mono)}progress{width:100%;height:3px;margin-top:8px;display:block;appearance:none}progress::-webkit-progress-bar{background:#271821}progress::-webkit-progress-value{background:#ed6873}@keyframes blink{50%{opacity:.35}}
.toast{position:fixed;z-index:20;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 14px;border:1px solid var(--line-hot);border-radius:6px;background:rgba(10,17,28,.95);box-shadow:0 15px 45px #000;color:#c9d8ed;font:500 9px/1 var(--mono);transition:.3s}.toast.visible{opacity:1;transform:translate(-50%,0)}
body.fullscreen-preview .topbar,body.fullscreen-preview .control-panel,body.fullscreen-preview .preview-toolbar,body.fullscreen-preview .statusbar{display:none}body.fullscreen-preview .app-shell{grid-template-rows:1fr}body.fullscreen-preview .workspace{grid-template-columns:1fr}body.fullscreen-preview .preview-column{padding:0;grid-template-rows:1fr}body.fullscreen-preview .viewport-shell{border:0;border-radius:0}
@media(max-width:900px){body{overflow:auto}.app-shell{min-height:100vh;height:auto;display:block}.topbar{height:62px}.workspace{display:block}.preview-column{height:calc(100vh - 62px);padding:14px;grid-template-rows:62px minmax(0,1fr) 40px}.control-panel{position:fixed;z-index:10;right:0;top:0;bottom:0;width:min(390px,92vw);transform:translateX(105%);transition:transform .3s;opacity:1!important}.panel-open .control-panel{transform:translateX(0)}.panel-head{height:62px}.panel-scroll{height:calc(100vh - 62px)}.mobile-close{display:grid}.viewport-shell{padding:20px}.statusbar{gap:12px}.status-item:nth-child(2){display:none}}
@media(max-width:560px){.signal-pill{display:none}.topbar{padding:0 15px}.preview-column{padding:10px}.preview-toolbar h1{font-size:14px}.preview-toolbar h1 span{display:none}.toolbar-actions .segmented button{padding:7px 6px;font-size:8px}.viewport-shell{padding:12px}.viewport-shell[data-view="compare"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.viewport-shell[data-view="compare"] .source-pane{border-right:0;border-bottom:1px solid var(--line);padding:0 0 7px}.viewport-shell[data-view="compare"] .output-pane{padding:7px 0 0}.compare-label{display:none!important}.status-item:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}