:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--hud-width: min(320px, calc(100vw - 28px) );--hud-top: 14px;--hud-left: 14px}:root[data-theme=dark]{color:#e6eef9;--page-bg: radial-gradient(circle at 20% 20%, #0b1428 0%, #030508 60%, #010203 100%);--hud-border: rgba(120, 160, 255, .4);--hud-bg: rgba(4, 8, 15, .78);--hud-shadow: 0 12px 28px rgba(0, 0, 0, .4);--hud-strong: #91d6ff;--field-label: #bddcff;--btn-bg: rgba(15, 24, 45, .9);--btn-bg-hover: rgba(32, 50, 90, .95);--btn-border: rgba(140, 185, 255, .45);--btn-border-hover: rgba(165, 210, 255, .9);--input-bg: rgba(12, 20, 38, .88);--input-border: rgba(150, 190, 255, .4);--input-text: #eff7ff;--hint: #9eb8d6;--panel-bg: rgba(9, 16, 31, .72);--draw-grid: rgba(124, 170, 255, .16)}:root[data-theme=light]{color:#1b2b48;--page-bg: radial-gradient(circle at 20% 20%, #ffffff 0%, #edf3ff 65%, #dce7ff 100%);--hud-border: rgba(66, 110, 178, .35);--hud-bg: rgba(252, 254, 255, .84);--hud-shadow: 0 12px 28px rgba(27, 43, 72, .16);--hud-strong: #1e5ea7;--field-label: #31578c;--btn-bg: rgba(235, 243, 255, .95);--btn-bg-hover: rgba(217, 231, 253, .98);--btn-border: rgba(83, 133, 205, .45);--btn-border-hover: rgba(52, 104, 179, .7);--input-bg: rgba(248, 251, 255, .95);--input-border: rgba(102, 149, 216, .5);--input-text: #16335c;--hint: #4d6f9f;--panel-bg: rgba(233, 241, 255, .82);--draw-grid: rgba(80, 116, 188, .14)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background:var(--page-bg);color:inherit}canvas{display:block}.app-shell{width:100%;height:100%;position:relative}.hud-shell{position:fixed;top:var(--hud-top);left:var(--hud-left);display:flex;align-items:center;gap:8px;transition:transform .22s ease;transform:translate(0);z-index:20}.hud-shell.collapsed{transform:translate(calc(-1 * (var(--hud-width) + var(--hud-left) + 2px)))}.hud{width:var(--hud-width);max-height:calc(100vh - 28px);overflow:auto;padding:12px;border:1px solid var(--hud-border);border-radius:10px;background:var(--hud-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--hud-shadow)}.hud-toggle{width:36px;height:74px;padding:0;border-radius:0 9px 9px 0;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}.hud-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;font-size:13px}.hud-row.compact{margin-bottom:6px}.hud-row strong{color:var(--hud-strong)}.hud-row.split{justify-content:stretch}.hud-row.split>*{flex:1}.hud-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}.hud-field{display:block;margin-bottom:10px}.hud-field span{display:block;font-size:12px;margin-bottom:4px;color:var(--field-label)}.hud-panel{margin-bottom:12px;padding:10px;border:1px solid var(--hud-border);border-radius:9px;background:var(--panel-bg)}.hue-label{display:flex;align-items:center;justify-content:space-between}.hue-swatch{width:16px;height:16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 0 1px #00000029}button,input{font:inherit}button{appearance:none;border:1px solid var(--btn-border);border-radius:7px;background:var(--btn-bg);color:inherit;padding:6px 8px;cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}button:hover:not(:disabled){background:var(--btn-bg-hover);border-color:var(--btn-border-hover)}button.active{border-color:var(--btn-border-hover);box-shadow:0 0 0 1px var(--btn-border-hover) inset}button:disabled{opacity:.45;cursor:not-allowed}input[type=text],input[type=file],input:not([type]){width:100%;border-radius:7px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:7px 8px}input[type=file]{padding:6px}input[type=range]{width:100%}.hue-slider{appearance:none;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(90deg,#ff2b2b,#ffa12b 17%,#ffe733 33%,#40f05a,#35d9ff 67%,#5d53ff 83%,#ff2bff)}.hue-slider::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:999px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px #0000004d;background:#fff;cursor:pointer}.hue-slider::-moz-range-thumb{width:17px;height:17px;border-radius:999px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px #0000004d;background:#fff;cursor:pointer}.draw-pad-shell{display:grid;gap:10px}.draw-canvas{width:100%;height:auto;aspect-ratio:296 / 168;border:1px solid var(--input-border);border-radius:10px;background-color:#050a14e6;background-image:linear-gradient(var(--draw-grid) 1px,transparent 1px),linear-gradient(90deg,var(--draw-grid) 1px,transparent 1px);background-size:24px 24px;cursor:crosshair;touch-action:none}:root[data-theme=light] .draw-canvas{background-color:#fffffff2}.draw-canvas.erasing{cursor:cell}.file-field{margin-bottom:8px}.source-status{margin-top:0}.hint{margin:6px 0 0;font-size:11px;line-height:1.35;color:var(--hint)}@media(max-width:700px){:root{--hud-width: calc(100vw - 18px) ;--hud-top: 9px;--hud-left: 9px}.hud-shell{align-items:flex-start}.hud{max-height:58vh}}