:root{--bg: #f4f1ec;--panel: #ffffff;--ink: #23211e;--muted: #5d584f;--line: #d9d1c2;--accent: #b33125;--accent-dark: #8d241a;--focus: #1c6fbf;--radius: 12px;--shadow: 0 8px 28px rgba(35, 33, 30, .12);--top-h: 60px;--space-1: 8px;--space-2: 12px;--space-3: 16px;color-scheme:light}*{box-sizing:border-box}html,body{width:100%;max-width:100%;min-height:100%;overflow-x:clip}body{margin:0;font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}body.modal-open{overflow:hidden}img,svg,canvas,table{max-width:100%}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:200}.skip:focus{left:8px;top:8px}.muted{color:var(--muted)}.small{font-size:12px}svg{display:block}svg :is(path,circle,rect):not([fill]){fill:currentColor}.icon-button svg,.toolbar-button svg,.stage-action svg,.overview-button svg,.close-button svg{width:20px;height:20px;flex:none}.topbar{min-height:var(--top-h);display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}.header-row{display:contents}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:40px;height:40px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}.brand-mark svg{width:24px;height:24px}.brand strong{display:block;font-size:16px;line-height:1.25}.brand small{color:var(--muted);font-size:11px;display:block}.top-actions,.desktop-only-actions{display:contents}.quote-button{margin-left:auto}.icon-button,.toolbar-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 12px;font-weight:600;white-space:nowrap}.toolbar-button:hover,.icon-button:hover{border-color:var(--accent);color:var(--accent)}.toolbar-button.active,.icon-button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.icon-button.accent,.quote-button{background:var(--accent);border-color:var(--accent);color:#fff}.icon-button.accent:hover,.quote-button:hover{background:var(--accent-dark);color:#fff}button.accent{background:var(--accent);border-color:var(--accent);color:#fff}button.accent:hover{background:var(--accent-dark);color:#fff}.quote-button b{min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#ffffff40;display:inline-grid;place-items:center;font-size:13px}.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 14px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.ghost{background:var(--panel)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;padding:12px;width:100%;max-width:1560px;margin:0 auto;min-height:480px}.stage{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-width:0}.category-wrap{display:none}.cat-bar{display:flex;gap:8px;flex:1;min-width:0;padding:4px 2px;overflow-x:auto}#viewport{position:relative;border-radius:var(--radius);overflow:hidden;background:#e9e4db;box-shadow:var(--shadow);min-height:320px}#canvas-wrap,#canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#canvas-wrap canvas{touch-action:none}body.sheet-open #canvas-wrap canvas{pointer-events:none}#hotspots{position:absolute;inset:0;pointer-events:none;z-index:5}.hotspot{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;padding:0;pointer-events:auto}.hotspot-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 8px #00000052}.hotspot-tag{position:absolute;left:calc(100% - 12px);top:50%;transform:translateY(-50%);display:none;align-items:center;max-width:148px;background:#fffffff5;border:1px solid var(--line);border-radius:999px;padding:6px 10px;box-shadow:0 2px 10px #0000002e;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hotspot.active .hotspot-tag{display:inline-flex}.hotspot.flip .hotspot-tag{left:auto;right:calc(100% - 12px)}.hotspot.leader{overflow:visible}.hotspot.leader:after{content:"";position:absolute;left:50%;top:50%;width:34px;height:2px;background:#fff;box-shadow:0 0 0 1px #0000002e;transform-origin:left center}.hotspot.flip.leader:after{transform-origin:right center}#preset-bar{position:absolute;left:10px;bottom:10px;z-index:6;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}#preset-bar .chip{background:#fffffff0;font-size:12px;padding:8px 12px}.overview-button{position:absolute;right:10px;bottom:10px;z-index:6;display:none;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fffffff5;font-weight:600}#explore-help{position:absolute;top:10px;left:50%;transform:translate(-50%);background:#23211ee6;color:#fff;font-size:12px;padding:8px 12px;border-radius:9px;z-index:6;max-width:calc(100% - 20px)}#joystick{position:absolute;right:16px;bottom:64px;z-index:7;width:112px;height:112px;border-radius:50%;background:#ffffff59;border:1px solid rgba(255,255,255,.7);touch-action:none}#joy-nub{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:#fffffff5;box-shadow:var(--shadow);margin:-24px 0 0 -24px}#toast{position:absolute;left:50%;bottom:60px;transform:translate(-50%) translateY(8px);background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .25s,transform .25s;z-index:8;width:max-content;max-width:calc(100% - 20px);font-size:13px;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.gl-fallback{position:absolute;inset:auto 10px 10px;z-index:6;background:#fff8e6;border:1px solid #e3c76f;border-radius:10px;padding:10px 12px}.no-gl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}.mobile-stage-actions{display:none}.dock{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;min-height:0}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;overflow:auto;max-height:300px;min-width:0}.card h2{font-size:14px;margin:0 0 4px;overflow-wrap:anywhere}.card h3{font-size:12px;margin:12px 0 6px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.card p{margin:4px 0;overflow-wrap:anywhere}.product-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.prod{width:100%;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;min-height:56px}.prod:hover{border-color:var(--accent)}.prod.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.prod-thumb{width:38px;height:38px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:20px;flex:none}.prod-text{min-width:0}.prod-text strong{display:block;font-size:13px;overflow-wrap:anywhere}.prod-text small{color:var(--muted);display:block;overflow-wrap:anywhere}.filter-note .prod{border-style:dashed}.settings-panel .variants{margin-bottom:8px}.settings-panel .variant{text-align:left}.settings-panel .variant small{font-weight:400;color:var(--muted)}.sheet-spec .thumb{height:88px;font-size:44px}.sheet-spec h2{font-size:16px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:44px;height:44px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0}.swatch.active{box-shadow:0 0 0 2px var(--accent)}.ct-list{display:flex;gap:8px;flex-wrap:wrap}.cts{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;min-height:44px}.cts.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.spec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;overflow:auto;box-shadow:var(--shadow);min-width:0}.spec-empty{color:var(--muted)}.pill{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}.spec h2{font-size:18px;margin:8px 0;overflow-wrap:anywhere}.thumb{height:110px;border-radius:10px;background:linear-gradient(135deg,#efe9df,#e0d6c6);display:grid;place-items:center;font-size:52px;color:#8a8478}.price{font-size:22px;font-weight:700;color:var(--accent);margin-top:10px}.spec-rows{margin:10px 0}.spec-rows .row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line)}.spec-rows dt{color:var(--muted);flex:none}.spec-rows dd{margin:0;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}.variants{display:flex;gap:8px;flex-wrap:wrap}.variant{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;min-height:44px}.variant.active{background:var(--ink);color:#fff;border-color:var(--ink)}.fit-msg{font-size:13px;overflow-wrap:anywhere}.fit-msg.warn{color:var(--accent);font-weight:600}.desc{font-size:13px;overflow-wrap:anywhere}.spec-actions{display:grid;gap:8px;margin-top:12px}.spec-actions button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;min-height:48px;font-weight:600}.spec-actions button:hover{border-color:var(--accent)}.scrim{position:fixed;inset:0;background:#0000006b;opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}.scrim.on{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);z-index:95;background:var(--panel);box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translate(105%);transition:transform .28s ease}.drawer.open{transform:none}.drawer header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.drawer header h2{margin:0;font-size:16px;min-width:0;overflow-wrap:anywhere}.close-button{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px}.close-button svg{width:18px;height:18px}.close-button:hover{border-color:var(--accent);color:var(--accent)}.quote-items{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:10px;align-content:start}.qline{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:8px}.qline-info strong{display:block;overflow-wrap:anywhere}.qline-info small{color:var(--muted);display:block;overflow-wrap:anywhere}.qline-ctl{display:flex;align-items:center;gap:8px}.qline-ctl button{border:1px solid var(--line);background:#fff;border-radius:8px;min-width:44px;min-height:44px;padding:6px 10px;font-size:16px}.qline-sub{font-weight:700}.drawer footer{border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}.total{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px;margin-bottom:10px}.total strong{color:var(--accent);font-size:20px}.drawer-actions{display:flex;gap:8px}.drawer-actions button{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;min-height:48px;font-weight:600}.mobile-sheet{position:fixed;left:0;right:0;bottom:0;z-index:96;max-height:75dvh;display:none;flex-direction:column;background:var(--panel);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px #00000038;transform:translateY(105%);transition:transform .28s ease}.mobile-sheet.open{display:flex;transform:none}.mobile-sheet.closing{transform:translateY(105%)}.sheet-handle{width:44px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 2px;flex:none}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px 10px;border-bottom:1px solid var(--line);flex:none}.sheet-header h2{margin:0;font-size:16px;min-width:0;overflow-wrap:anywhere}.sheet-content{overflow-y:auto;overscroll-behavior:contain;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}.sheet-content .spec-actions{position:sticky;bottom:0;background:var(--panel);padding:8px 0 2px}.colophon{text-align:center;padding:8px 12px 12px;color:var(--muted)}.print-only{display:none}@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 300px}}@media(max-width:900px){.topbar{flex-wrap:wrap;height:auto;padding:8px 10px}.brand{min-width:0}.brand small{display:none}.cat-bar{order:3;flex-basis:100%}.layout{grid-template-columns:1fr;height:auto}#viewport{height:62dvh;min-height:380px}.dock{grid-template-columns:1fr}.card{max-height:none}}@media(max-width:767px){body{font-size:14px}.topbar{flex-direction:column;align-items:stretch;gap:0;height:auto;min-height:0;max-height:120px;padding:6px 8px;overflow:hidden}.header-row{display:flex;align-items:center;gap:8px;min-width:0}.primary-row{min-height:48px;padding-bottom:6px}.controls-row{min-height:48px;border-top:1px solid var(--line);padding-top:6px}.brand{flex:1;min-width:0;gap:8px}.brand-mark{width:36px;height:36px}.brand strong{font-size:15px}.controls-row .toolbar-button{flex:1;min-width:0;padding:8px 5px;font-size:13px;gap:6px}.controls-row .toolbar-button span{overflow:hidden;text-overflow:ellipsis}.controls-row .toolbar-button svg{width:19px;height:19px}.desktop-only-actions{display:none}.category-wrap{display:block;position:sticky;top:0;z-index:55;background:var(--bg);padding:8px 0;border-bottom:1px solid var(--line)}.cat-bar{order:0;flex-basis:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;padding:2px 12px 6px;scroll-padding-right:12px;-webkit-overflow-scrolling:touch}.cat-bar::-webkit-scrollbar{display:none}.cat-bar .chip{flex:none}.cat-bar .chip:last-child{margin-right:12px}.layout{padding:8px;gap:8px;min-height:0}.stage{grid-template-rows:auto auto;gap:8px}#viewport{height:clamp(280px,48svh,460px);min-height:280px;border-radius:10px}#preset-bar{display:none}.overview-button{display:inline-flex}.mobile-stage-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stage-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-weight:700}.stage-action.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.dock,.spec{display:none}.drawer{width:min(430px,100vw)}#explore-help{font-size:11px}#joystick{right:12px;bottom:70px}.colophon{font-size:11px}}@media print{.topbar,.layout,.colophon,#toast,.drawer,.scrim,.category-wrap,.mobile-sheet{display:none!important}.print-only{display:block;color:#000}.print-only table{width:100%;border-collapse:collapse}.print-only th,.print-only td{border:1px solid #999;padding:6px 8px;text-align:left;font-size:12px}}@media(prefers-reduced-motion:reduce){.drawer,.mobile-sheet,#toast,.scrim{transition:none}}