:root { color-scheme: dark; --ink: #edf1f5; --muted: #8e9cad; --panel: #111821; --panel-deep: #080d14; --line: #2a3747; --field: #050824; --accent: #a9c3ff; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow: hidden; background: var(--panel-deep); color: var(--ink); font: 13px/1.42 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.shell { height: 100vh; display: grid; grid-template-columns: 274px minmax(0, 1fr); overflow: hidden; }
.panel { min-height: 0; padding: 23px 18px 17px; overflow-y: auto; background: linear-gradient(180deg, #151d28, #0f151e); border-right: 1px solid #344252; box-shadow: 8px 0 24px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 22px; }
.kicker, .section-label { margin: 0; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 4px 0 9px; font-size: 24px; letter-spacing: -.04em; font-weight: 650; }
.description { margin: 0; color: #bac3ce; font-size: 12px; }
.control-section { display: grid; gap: 8px; }
.section-row { display: flex; align-items: baseline; justify-content: space-between; }
.value { color: #ced8e3; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.mode-toggle, .preset-row { display: grid; gap: 5px; }
.mode-toggle { grid-template-columns: 1fr 1.25fr; }
.preset-row { grid-template-columns: repeat(4, 1fr); }
button { border: 1px solid #384758; border-radius: 2px; padding: 7px 8px; color: #dce4ee; background: linear-gradient(180deg, #1b2532, #151e29); font: inherit; cursor: pointer; }
button:hover { border-color: #8da4c0; background: #263346; }
button.active { color: #f7f9fb; border-color: #afc9e7; background: #364a63; box-shadow: inset 0 1px rgba(255,255,255,.08); }
select { width: 100%; min-height: 30px; border: 1px solid #384758; border-radius: 2px; padding: 5px 8px; color: #dce4ee; background: #121b27; font: inherit; outline: none; }
select:focus { border-color: #a9c3ff; box-shadow: 0 0 0 2px rgba(169,195,255,.14); }
.range-label { display: flex; justify-content: space-between; margin-top: 4px; color: #d7dfe8; font-size: 12px; }
output { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
input[type="range"] { width: 100%; height: 16px; margin: -2px 0 1px; accent-color: #a5bee0; }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; color: #d7dfe8; cursor: pointer; }
.check-row input { accent-color: #90a8ca; }
footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.reset { width: 100%; }
.reset + .reset { margin-top: 6px; }
.subtle { color: #b9c5d2; background: transparent; }
.view-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
footer p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.workspace { min-width: 0; padding: 16px; background: #080d14; }
.canvas-wrap { position: relative; height: calc(100vh - 32px); min-height: 560px; overflow: hidden; background: var(--field); border: 1px solid #1f2c3d; box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 18px 45px rgba(0,0,0,.28); }
.canvas-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(169,195,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(169,195,255,.16) 1px, transparent 1px); background-size: 48px 48px; mix-blend-mode: screen; }
canvas { position: relative; z-index: 2; }
.readout, .busy, .refine, .legend { z-index: 3; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.readout { position: absolute; top: 16px; left: 18px; pointer-events: none; text-shadow: 0 1px 5px #050821; }
.readout strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.readout span { color: #c3cee0; font-size: 11px; }
.busy { position: absolute; top: 14px; right: 16px; padding: 3px 6px; color: #ced8e7; background: rgba(5, 9, 31, .76); border: 1px solid rgba(199,218,255,.24); font: 10px ui-monospace, monospace; opacity: 0; transition: opacity .12s; }
.busy.visible { opacity: 1; }
.refine { position: absolute; top: 41px; right: 16px; display: flex; gap: 7px; color: #aebdd0; font: 10px ui-monospace, monospace; text-transform: lowercase; pointer-events: none; }
.refine b { color: #e0e8f2; font-weight: 500; }
.engine { position: absolute; top: 57px; right: 16px; color: #7f91a9; font: 9px ui-monospace, monospace; letter-spacing: .02em; pointer-events: none; }
.legend { position: absolute; right: 17px; bottom: 15px; display: flex; align-items: center; gap: 8px; color: #cbd5e2; font-size: 10px; pointer-events: none; text-shadow: 0 1px 4px #050821; }
.legend i { width: 82px; height: 5px; background: linear-gradient(90deg, #ffb13b, #43d4a1, #456bf3, #c74dcd); }
.panel::-webkit-scrollbar { width: 7px; }
.panel::-webkit-scrollbar-thumb { background: #40526a; border-radius: 9px; }
@media (max-width: 780px) { body { overflow: auto; } .shell { height: auto; min-height: 100vh; overflow: visible; grid-template-columns: 1fr; } .panel { min-height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); gap: 16px; } .control-section { grid-template-columns: 1fr 1fr; column-gap: 16px; } .control-section > .section-label, .control-section > .section-row, .control-section > .mode-toggle, .control-section > .preset-row { grid-column: 1 / -1; } .workspace { padding: 8px; } .canvas-wrap { height: 620px; min-height: 0; } }