:root{--bg:#170d24;--bg-2:#1f1440;--panel:#ffffff0f;--line:#ffffff1f;--text:#f1ecf8;--muted:#b6a9cc;--gold:#e0b95b;--violet:#8d5bd6;--blue:#3d6fd1;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(120% 70% at 0% 0%, #8d5bd659, transparent 60%), radial-gradient(90% 60% at 100% 100%, #3d6fd14d, transparent 60%), var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font:15px/1.4 Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif}button{font:inherit;color:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template-rows:auto 1fr auto;display:grid}.top{justify-content:space-between;align-items:center;padding:10px 16px 4px;display:flex}.brand{letter-spacing:.02em;margin:0;font-size:22px;font-weight:600}.brand span{background:linear-gradient(90deg, var(--gold), #f3dc9b 50%, var(--gold));color:#0000;-webkit-background-clip:text;background-clip:text}.actions{gap:6px;display:flex}.icon{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:12px;place-items:center;width:42px;height:42px;display:grid}.icon:disabled{opacity:.35;cursor:default}.icon.save{background:linear-gradient(135deg, var(--gold), #b98a2e);color:#1a1026;border-color:#0000}.stage{place-items:center;min-height:0;padding:8px 16px;display:grid;container-type:size}.board{aspect-ratio:1;width:min(100cqw,100cqh);position:relative}canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.tilt-arrow{background:var(--gold);transform-origin:0;pointer-events:none;border-radius:2px;height:3px;position:absolute;box-shadow:0 0 8px #0006}.tilt-arrow:after{content:"";border:6.5px solid #0000;border-left:10px solid var(--gold);position:absolute;top:-5px;right:-2px}.intro{pointer-events:none;color:#6c5a86;letter-spacing:.04em;place-items:center;font-size:18px;transition:opacity .6s;display:grid;position:absolute;inset:0}body[data-surface=glass] .intro{color:#8f84a3}.intro.gone{opacity:0}.unsupported{text-align:center;background:var(--bg-2);border-radius:12px;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.unsupported[hidden]{display:none}.panel{gap:10px;padding:4px 16px 12px;display:grid}.tools{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.tools button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:14px;justify-items:center;gap:3px;padding:8px 2px 6px;font-size:12px;transition:background .15s,border-color .15s;display:grid}.tools button[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:linear-gradient(160deg,#8d5bd68c,#3d6fd173)}.tools .clear{color:var(--muted)}.options{gap:8px;display:grid}.swatches{scrollbar-width:none;scroll-snap-type:x proximity;gap:8px;padding:4px 2px 6px;display:flex;overflow-x:auto}.swatches::-webkit-scrollbar{display:none}.swatches[hidden]{display:none}.swatch{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, white), var(--c) 60%);cursor:pointer;scroll-snap-align:start;border:2px solid #ffffff40;border-radius:50%;flex:none;width:36px;height:36px;padding:0;position:relative}.swatch[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--gold)}.swatch.custom{--c:#6a3fb5;background:conic-gradient(#e0457b,#f2c14e,#3bb273,#1b9aaa,#3d6fd1,#8d5bd6,#e0457b);place-items:center;display:grid}.swatch.custom.set{background:var(--c)}.swatch.custom span{color:#fff;text-shadow:0 1px 3px #0009;font-size:20px;font-weight:600}.swatch.custom input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.swatch.metal{width:auto;height:36px;color:var(--text);background:#ffffff0f;border-radius:18px;padding:0 14px 0 34px;font-size:13px}.swatch.metal:before{content:"";background:linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, white), var(--c) 45%, color-mix(in srgb, var(--c) 60%, black) 75%, var(--c));border-radius:50%;width:22px;height:22px;position:absolute;top:6px;left:6px}.swatch.metal.mica:before{background:conic-gradient(#f5d6f0,#d7e9ff,#d9f7e6,#fff3cf,#f5d6f0)}.size{color:var(--muted);align-items:center;gap:12px;font-size:13px;display:flex}.size[hidden]{display:none}.size input,.drying input{accent-color:var(--gold);flex:1}.hint{color:var(--muted);min-height:2.8em;margin:0;font-size:13px}dialog{border:1px solid var(--line);background:var(--bg-2);width:min(440px,100% - 32px);color:var(--text);border-radius:20px;padding:18px}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#08041099}dialog header{justify-content:space-between;align-items:center;display:flex}dialog h2{margin:0 0 10px;font-size:16px;font-weight:600}dialog header h2{margin:0}.surfaces{grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 18px;display:grid}.surfaces label{text-align:center;cursor:pointer;justify-items:center;gap:6px;font-size:12px;display:grid}.surfaces input{opacity:0;position:absolute}.thumb{aspect-ratio:1;border:2px solid #0000;border-radius:10px;width:100%}.surfaces input:checked+.thumb{border-color:var(--gold);box-shadow:0 0 0 2px var(--bg-2), 0 0 0 4px var(--gold)}.surfaces input:focus-visible+.thumb{outline-offset:4px;outline:2px solid #fff}.thumb.yupo{background:#f8f7f3;border-radius:3px}.thumb.tile{background:linear-gradient(135deg,#f3f4f6,#e6e8ec);border-radius:12px}.thumb.glass{background:linear-gradient(135deg,#1d1a26 40%,#2e2940 50%,#111016 60%);border-radius:4px}.thumb.coaster{background:radial-gradient(circle,#f1f2f4 68%,#0000 70%)}.drying{align-items:center;gap:12px;display:flex}.drying output{text-align:right;min-width:90px;color:var(--muted);font-size:13px}.note{color:var(--muted);margin:14px 0 0;font-size:13px}@media (width>=900px) and (aspect-ratio>=1){.app{grid-template-rows:auto 1fr;grid-template-columns:1fr 340px}.top{grid-column:1/-1;padding:16px 24px 4px}.stage{padding:16px 24px 24px}.panel{align-content:start;padding:16px 24px 24px 0}.tools{grid-template-columns:repeat(3,1fr)}.tools button{padding:12px 4px 10px;font-size:13px}.swatches{flex-wrap:wrap;overflow:visible}}