:root{--edge-gap:28px;--panel-bg:#f6f5f2;--frame:#161616;--mullion:#1c1c1d;--accent:#b4583a;--text:#161616;--text-muted:#5c584f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:15px/145% system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}.toolbar:not(.bare),.confirm-dialog{--panel-bg:#161616;--text:#f3f1ec;--text-muted:#a8a29a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}.app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100vw;height:100dvh;position:relative}.app canvas{touch-action:none;display:block}.loading-overlay{background:#f3f1ec;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:opacity .4s;display:flex;position:absolute;inset:0}.loading-overlay-done{opacity:0;pointer-events:none}.loading-percent{letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text);font-size:32px;font-weight:700;line-height:1}.loading-bar{border:2px solid var(--frame);width:200px;height:12px}.loading-bar-fill{background:var(--frame);height:100%;transition:width .3s}@media (prefers-reduced-motion:reduce){.loading-bar-fill{transition:none}}.toolbar{top:var(--edge-gap);left:var(--edge-gap);width:280px;max-height:calc(100vh - 2 * var(--edge-gap));max-height:calc(100dvh - 2 * var(--edge-gap));background:var(--panel-bg);border:2px solid var(--frame);color:var(--text);border-radius:0;padding:16px;position:absolute;overflow-y:auto}.toolbar h1{letter-spacing:-.2px;text-transform:uppercase;margin:0 0 12px;font-size:17px}.toolbar.bare{background:0 0;border-color:#0000;border-left-width:0;padding-left:0}.toolbar.bare h1{letter-spacing:-1.5px;font-size:44px;line-height:.95}.title-tagline{color:var(--text);margin:-4px 0 0;font-size:14px;line-height:1.3}.toolbar.bare .title-word{display:block}@media (width>=641px){.toolbar.bare h1{letter-spacing:-2.5px;font-size:64px}.title-tagline{font-size:15px}}.toolbar h1:last-child{margin-bottom:0}.toolbar h2{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--frame);margin:0 0 8px;padding-bottom:4px;font-size:12px}.toolbar section{margin-bottom:16px}.swatches{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;border:2px solid var(--frame);cursor:pointer;background:0 0;border-radius:0;width:100%;padding:0;overflow:hidden}.swatch:disabled{cursor:not-allowed;opacity:.35;filter:grayscale()}.swatch.active{border-color:var(--accent);border-width:3px}.panel-preview{width:100%;height:100%;display:block}.panel-preview-grid{background:var(--mullion);gap:2px;display:grid}.panel-preview-tiltwindow{background-image:linear-gradient(45deg,#0000 47%,#6b6a63 48% 52%,#0000 53%),linear-gradient(-45deg,#0000 47%,#6b6a63 48% 52%,#0000 53%);border-left:1px solid #6b6a63;border-right:1px solid #6b6a63}.panel-preview-door{background-image:linear-gradient(60deg,#0000 47%,#6b6a63 48% 52%,#0000 53%);border-left:1px solid #6b6a63;border-right:1px solid #6b6a63}.panel-preview-opening{background:linear-gradient(45deg,#0000 48%,#9a968a 49% 51%,#0000 52%),linear-gradient(-45deg,#0000 48%,#9a968a 49% 51%,#0000 52%),#fff}.floating-bar{background:var(--panel-bg);border:2px solid var(--frame);max-width:calc(100vw - 32px);color:var(--text);align-items:center;gap:10px;padding:10px 14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.floating-bar.bottom{bottom:calc(36px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:4px}.swatch-strip{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.swatch-strip::-webkit-scrollbar{display:none}.swatch-strip .swatch{flex:none;width:48px;height:48px}.swatch-divider{background:var(--frame);flex:0 0 2px;align-self:stretch;margin:0 4px}.floating-bar.bottom{box-shadow:none;background:0 0;border:none;padding:0}.floating-bar.bottom .swatch-strip{padding:6px 8px 8px}.floating-bar.bottom .swatch{border:2px solid var(--frame);box-shadow:none;border-radius:0;transition:transform .1s}.floating-bar.bottom .swatch:hover:not(:disabled){transform:translateY(-1px)}.floating-bar.bottom .swatch.active{border-color:var(--frame);box-shadow:0 0 0 2px #f3f1ec, 0 0 0 4px var(--accent);border-width:2px}.kind-button{cursor:pointer;background:#000000d9;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:48px;height:48px;padding:0;transition:transform .1s;display:flex}.kind-button:hover{transform:translateY(-1px)}.kind-button.active{box-shadow:0 0 0 2px #f3f1ec, 0 0 0 4px var(--accent)}.kind-icon{width:100%;height:100%;display:block}.floating-bar.bottom .swatch-divider{background:#16161640;flex-basis:1px;margin:4px 6px}.toolbar button:not(.swatch){font:inherit;border:2px solid var(--frame);color:var(--text);cursor:pointer;background:#fff;border-radius:0;padding:8px 10px;transition:background .1s,color .1s}.toolbar button:not(.swatch):hover:not(:disabled){background:var(--frame);color:#fff}.toolbar button:not(.swatch):disabled{opacity:.4;cursor:not-allowed}.toolbar section>button{width:100%}.row{flex-wrap:wrap;gap:6px;display:flex}.checkbox-row{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.checkbox-row input{cursor:pointer;margin:0}.debug-panel{left:auto;right:16px}.slider-row{grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin-bottom:8px;display:grid}.slider-row label{color:var(--text-muted);font-size:12px}.slider-row input[type=range]{grid-column:1/-1;width:100%;margin:0}.slider-value{font-variant-numeric:tabular-nums;text-align:right;font-size:12px}.hint{color:var(--text-muted);margin:0;font-size:12px;line-height:1.5}@media (width<=640px){:root{--edge-gap:20px}.toolbar{width:calc(100vw - 2 * var(--edge-gap))}.floating-bar.bottom{max-width:none;left:0;right:0;transform:none}.floating-bar.bottom .swatch-strip{padding-left:max(var(--edge-gap), env(safe-area-inset-left));padding-right:max(var(--edge-gap), env(safe-area-inset-right))}}.corner-actions{left:var(--edge-gap);flex-direction:column;gap:10px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.corner-actions.walk-mode{left:auto;right:calc(16px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));transform:none}.round-action{cursor:pointer;background:#000000d9;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;padding:0;transition:transform .1s;display:flex}.round-action:hover{transform:translateY(-1px)}.round-action-off svg{opacity:.45}.confirm-overlay{z-index:10;background:#16161673;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-dialog{background:var(--panel-bg);border:2px solid var(--frame);width:320px;max-width:calc(100vw - 32px);color:var(--text);padding:16px}.confirm-dialog.wide{width:400px}@media (width<=440px){.confirm-dialog.wide .confirm-actions{grid-template-columns:1fr 1fr;display:grid}.confirm-dialog.wide .confirm-actions button{padding-left:6px;padding-right:6px}.confirm-dialog.wide .confirm-actions button:not(.confirm-danger){order:1;grid-column:1/-1}}.confirm-dialog h1{letter-spacing:-.2px;text-transform:uppercase;margin:0 0 8px;font-size:17px}.confirm-dialog .hint{margin:0 0 16px}.confirm-dialog .hint a{color:var(--accent)}.confirm-dialog.legal{width:520px;max-height:80vh;overflow-y:auto}.confirm-dialog.legal h1{margin-top:20px;font-size:14px}.confirm-dialog.legal h1:first-child{margin-top:0}.confirm-dialog.legal .hint{font-size:13px;line-height:1.5}.confirm-actions{justify-content:flex-end;gap:8px;display:flex}.confirm-actions button{font:inherit;white-space:nowrap;border:2px solid var(--text);color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:8px 14px;transition:background .1s,color .1s}.confirm-actions button:hover{background:var(--text);color:var(--panel-bg)}.confirm-actions .confirm-danger{background:var(--accent);border-color:var(--accent);color:#fff}.confirm-actions .confirm-danger:hover{background:#961f14;border-color:#961f14}.legal-footer{bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;color:#16161673;align-items:center;gap:6px;font-size:11px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.legal-footer button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:4px}.legal-footer button:hover{color:var(--text)}.touch-joystick{bottom:calc(28px + env(safe-area-inset-bottom));touch-action:none;-webkit-tap-highlight-color:transparent;background:#00000059;border:3px solid #ffffffe6;border-radius:50%;width:130px;height:130px;position:absolute;left:24px}.touch-joystick-right{left:auto;right:24px}.touch-joystick-knob{pointer-events:none;background:#ffffffe6;border-radius:50%;width:56px;height:56px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}