@font-face{font-family:Remnant UI;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/oxanium-400.woff2) format("woff2")}@font-face{font-family:Remnant UI;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/oxanium-600.woff2) format("woff2")}@font-face{font-family:Remnant Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/share-tech-mono-400.woff2) format("woff2")}:root{--app-gap: 1rem;--controls-width: 430px;--controls-height: 620px;--stage-size: 620px;--swarm-font-ui: "Remnant UI", system-ui, -apple-system, "Segoe UI", sans-serif;--swarm-font-mono: "Remnant Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--swarm-frame-radius: 0px;--swarm-frame-stroke: 1px;--swarm-frame-page-bg: #04080d;--swarm-frame-bg: rgba(6, 10, 16, .64);--swarm-frame-bg-elevated: #0f2430;--swarm-frame-edge: rgba(0, 104, 128, .62);--swarm-frame-edge-strong: rgba(68, 152, 176, .86);--swarm-frame-edge-inset: rgba(0, 0, 0, .86);--swarm-frame-shadow: 0 0 0 1px var(--swarm-frame-edge-inset) inset;--swarm-frame-shadow-elevated: var(--swarm-frame-shadow), 0 0 18px rgba(28, 152, 252, .16);--text-main: #d7e8f7;--text-muted: #9fb4ca;--text-weak: #8da3ba;--border-soft: rgba(68, 152, 176, .36);--button-bg: #12384d;--button-bg-active: #1f556f;--control-bg: rgba(4, 12, 18, .82)}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--swarm-frame-edge-strong) rgba(3,10,15,.75)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#030a0fbf}*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4498b0e6,#16526af2);border:1px solid rgba(0,0,0,.65)}html,body{width:100%;height:100%;background:var(--swarm-frame-page-bg);font-family:var(--swarm-font-ui);overflow:hidden}body{margin:0;color:var(--text-main)}.swarm-frame,.swarm-surface{border-radius:var(--swarm-frame-radius);border:var(--swarm-frame-stroke) solid var(--swarm-frame-edge);background:var(--swarm-frame-bg);box-shadow:var(--swarm-frame-shadow)}.swarm-surface-elevated{border-radius:var(--swarm-frame-radius);border:var(--swarm-frame-stroke) solid var(--swarm-frame-edge-strong);background:var(--swarm-frame-bg-elevated);box-shadow:var(--swarm-frame-shadow-elevated)}#app{width:100%;height:100dvh;max-height:100dvh;min-height:100dvh;padding:1rem;display:grid;grid-template-rows:minmax(0,1fr);gap:var(--app-gap)}.layout{min-height:0;width:100%;display:grid;grid-template-columns:auto var(--controls-width) var(--stage-size) auto;grid-template-areas:"title controls preview download";gap:var(--app-gap);justify-content:center;align-items:start;overflow:hidden}.lane-title{grid-area:title;align-self:start;display:flex;align-items:center}.lane-title h1{margin:0;font-size:1.42rem;line-height:1;padding:.34rem .56rem;border:1px solid #d98937;cursor:pointer;user-select:none;text-transform:lowercase}.lane-title h1:active{transform:translateY(1px)}.controls{grid-area:controls;width:var(--controls-width);height:var(--controls-height);min-height:0;padding:.75rem;display:grid;gap:.58rem;align-content:start;overflow:auto}.global-header{display:flex;justify-content:space-between;align-items:center;gap:.45rem}.global-header h2,.palette-controls h2{margin:0;font-size:.88rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.header-actions{display:flex;gap:.35rem}.header-actions button{padding:.2rem .38rem;font-size:.7rem}.panel-grid{padding:.56rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.palette-controls{padding:.56rem;display:grid;gap:.5rem}#palette-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .45rem}.palette-row{display:grid;grid-template-columns:1.4rem minmax(0,1fr);align-items:center;gap:.4rem}.palette-row .swatch-label{color:var(--text-weak);font-size:.72rem}.palette-row input[type=color]{width:100%;padding:0;height:1.75rem;border:1px solid var(--border-soft);background:transparent}.controls label{display:grid;gap:.3rem;font-size:.78rem;color:var(--text-main)}.range-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.45rem}.range-value,output{min-width:2.4rem;text-align:right;color:var(--text-muted);font-size:.72rem}.preview{grid-area:preview;width:var(--stage-size);height:var(--stage-size);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:.45rem;padding:.45rem}#error{margin:0;color:#f09aa0;font-size:.82rem;white-space:pre-wrap}#preview-canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#02060b;border:1px solid var(--border-soft)}.lane-download{grid-area:download;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;height:var(--stage-size)}.action-stack{display:grid;gap:.36rem}.action-stack button{width:100%;min-width:6.3rem;padding:.22rem .34rem;font-size:.7rem}input,select,button{font:inherit}input:not([type=range]):not([type=checkbox]):not([type=color]),select{width:100%;background:var(--control-bg);color:var(--text-main);border:1px solid var(--border-soft);border-radius:0;padding:.28rem .4rem}input[type=range]{width:100%;appearance:none;height:.56rem;border:1px solid var(--border-soft);background:linear-gradient(180deg,#061a26f2,#020a10e6);padding:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:.58rem;height:.95rem;background:#9fd7ea;border:1px solid #0b1a25;box-shadow:0 0 0 1px #00000073 inset;cursor:pointer}input[type=range]::-moz-range-thumb{width:.58rem;height:.95rem;background:#9fd7ea;border:1px solid #0b1a25;border-radius:0;cursor:pointer}button{background:var(--button-bg);color:var(--text-main);border:1px solid var(--swarm-frame-edge);border-radius:0;padding:.32rem .48rem;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}button:hover{background:var(--button-bg-active)}button:disabled{opacity:.5;cursor:not-allowed}html.layout-stacked .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,var(--controls-height)) var(--stage-size) auto;grid-template-areas:"title" "controls" "preview" "download";gap:.5rem;justify-items:stretch;align-items:start}html.layout-stacked .lane-title h1{font-size:clamp(.96rem,3.9vw,1.18rem);padding:.26rem .44rem}html.layout-stacked .controls{width:min(calc(100vw - 2rem),var(--stage-size));height:100%;max-height:var(--controls-height)}html.layout-stacked .panel-grid,html.layout-stacked #palette-colors{grid-template-columns:1fr}html.layout-stacked .lane-download{height:auto;align-self:start}html.layout-stacked .action-stack{grid-template-columns:repeat(2,minmax(0,1fr))}