:root{--bg:#f6f4f1;--surface:#fff;--text:#1c1a17;--muted:#6b665e;--line:#e4e0da;--accent:#9a6b1f;--accent-text:#fff;--radius:12px;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#161513;--surface:#211f1c;--text:#f1ede6;--muted:#a39d93;--line:#34312c;--accent:#d9a54a;--accent-text:#1c1a17}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none}button,input,select{font:inherit;color:inherit}h1{letter-spacing:.02em;margin:0;font-size:1.25rem}h3{margin:1.25rem 0 .5rem;font-size:.95rem}button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;min-height:40px;padding:.45rem .9rem}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=text],select{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:100%;min-height:42px;padding:.5rem .75rem}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{background:0 0;border:none;width:56px;height:36px;padding:0}.customizer{flex-direction:column;max-width:1100px;height:100%;margin:0 auto;display:flex}.topbar{padding:calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;justify-content:space-between;align-items:center;gap:1rem;display:flex}.preview{flex:0 0 42vh;min-height:240px;position:relative}.preview canvas{touch-action:none}.summary{text-align:center;color:var(--muted);pointer-events:none;margin:0;font-size:.85rem;position:absolute;bottom:.25rem;left:0;right:0}.tabs{border-bottom:1px solid var(--line);scrollbar-width:none;gap:.25rem;padding:.5rem 1rem;display:flex;overflow-x:auto}.tab{white-space:nowrap;color:var(--muted);background:0 0;border:none;align-items:center;gap:.35rem;display:inline-flex}.tab .ico{width:18px;height:18px}.tab.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px #0000001f}.panel{padding:1rem 1rem calc(env(safe-area-inset-bottom) + 1.5rem);flex:1;overflow-y:auto}@media (width>=900px){.customizer{grid-template-rows:auto auto 1fr;grid-template-columns:1fr 400px;display:grid}.topbar{grid-column:1/-1}.preview{flex:none;grid-row:2/4;height:auto}.tabs{flex-wrap:wrap;grid-column:2}.panel{grid-column:2}}.field{margin-bottom:1.1rem}.field-label{justify-content:space-between;gap:1rem;margin-bottom:.4rem;font-size:.9rem;font-weight:600;display:flex}.field-hint{color:var(--muted);text-align:end;font-weight:400}.chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{min-height:36px;padding:.3rem .8rem;font-size:.9rem}.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}.ico{flex:none;width:20px;height:20px}.field-name{align-items:center;gap:.4rem;display:inline-flex}.field-name .ico,.toggle .ico{color:var(--muted)}.chips.tiles{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.4rem;display:grid}.chips.tiles .chip{text-align:center;border-radius:10px;flex-direction:column;justify-content:flex-start;align-items:center;gap:.3rem;min-height:72px;padding:.5rem .3rem;font-size:.75rem;line-height:1.15;display:flex}.chips.tiles .chip .ico{width:30px;height:30px}.chips.tiles .chip.on{background:var(--surface);color:var(--text);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.chips.tiles .chip.on .ico{color:var(--accent)}.toggle{align-items:center;gap:.6rem;min-height:44px;font-size:.9rem;font-weight:600;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--accent)}.note{color:var(--muted);font-size:.85rem;line-height:1.4}.row{align-items:center;gap:.5rem;display:flex}.row.wrap{flex-wrap:wrap}.templates{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.templates li{gap:.4rem;display:flex}.template{text-align:start;border-radius:10px;flex:1;align-items:center;gap:.6rem;display:flex}.template .ico{width:30px;height:30px}.icon{width:40px;padding:0}.tryon{color:#fff;background:#000;position:fixed;inset:0}.tryon.loading{place-items:center;display:grid}.tryon canvas{position:absolute;inset:0}.tryon button{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000073;border-color:#ffffff4d}.tryon .chip.on{color:#000;background:#fff}.tryon-top{padding:calc(env(safe-area-inset-top) + .6rem) .75rem .6rem;justify-content:space-between;align-items:center;gap:.5rem;display:flex;position:absolute;top:0;left:0;right:0}.status{text-align:center;background:#00000073;border-radius:999px;padding:.35rem .75rem;font-size:.85rem}.status.tracking{background:#1e8246b3}.status.error{background:#a02828cc}.tryon-bottom{padding:.75rem .75rem calc(env(safe-area-inset-bottom) + 1rem);background:linear-gradient(#0000,#0000008c);justify-items:center;gap:.6rem;display:grid;position:absolute;bottom:0;left:0;right:0}.fit{align-items:center;gap:.5rem;font-size:.85rem;display:flex}.fit input{width:140px}.record.on{background:#c62828}.capture-result{background:#000000d9;align-content:center;place-items:center;gap:1rem;padding:1rem;display:grid;position:absolute;inset:0}.capture-result video,.capture-result img{border-radius:var(--radius);max-width:100%;max-height:70vh}.camera-source{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed}.photoreal{top:.5rem;min-height:32px;padding:.2rem .7rem;font-size:.8rem;position:absolute;inset-inline-end:.75rem}.photoreal[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.pathtraced{pointer-events:none;visibility:hidden;width:100%;height:100%;position:absolute;inset:0}.rotate-lock{top:.5rem;min-height:32px;padding:.2rem .7rem;font-size:.8rem;position:absolute;inset-inline-start:.75rem}.rotate-lock[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.photoreal-note{top:2.9rem;color:var(--muted);margin:0;font-size:.75rem;position:absolute;inset-inline-end:.75rem}.crash{gap:1rem;max-width:32rem;margin:0 auto;padding:3rem 1.25rem;display:grid}.crash p{margin:0;line-height:1.5}.crash-actions{flex-wrap:wrap;gap:.5rem;display:flex}.crash pre{color:var(--muted);white-space:pre-wrap;margin:0;font-size:.8rem}
