:root{--bg:#170d24;--bg-2:#1f1440;--panel:#ffffff0f;--line:#ffffff1f;--text:#f1ecf8;--muted:#b6a9cc;--gold:#e0b95b;--violet:#8d5bd6;--blue:#3d6fd1;--pro:#e5484d;--ease:cubic-bezier(.2, .8, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}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;-webkit-user-select:none;user-select:none;-webkit-touch-callout: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}.top .home{flex-shrink:0;margin-right:-2px}.brand{letter-spacing:.02em;flex:1;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;padding:0;display:grid}.icon:disabled{opacity:.35;cursor:default}a.icon{color:inherit;text-decoration:none}.icon.flip svg{transform:scaleX(-1)}.icon[hidden]{display:none}.icon.save{background:linear-gradient(135deg, var(--gold), #b98a2e);color:#1a1026;border-color:#0000}.stage{place-items:center;min-height:0;padding:8px 16px 26px;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}.toast{pointer-events:none;opacity:0;width:max-content;max-width:calc(100% - 24px);transition:opacity .25s, transform .25s var(--ease);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);text-align:center;background:#170d24db;border-radius:12px;padding:8px 12px;font-size:13px;position:absolute;top:12px;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.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}.tools{-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);background:#1f1440b8;border-radius:20px;grid-template-columns:repeat(7,1fr);justify-self:center;gap:3px;width:min(560px,100% - 24px);margin:4px 12px 12px;padding:6px;display:grid;box-shadow:0 10px 30px #00000059}.tools button{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:14px;justify-items:center;gap:2px;padding:7px 2px 5px;font-size:11.5px;transition:background .15s,border-color .15s;display:grid}.tools button[aria-pressed=true]{border-color:var(--gold);background:linear-gradient(160deg,#8d5bd699,#3d6fd180)}.tools .clear{color:var(--muted)}.scrim{z-index:30;opacity:0;transition:opacity .28s var(--ease);pointer-events:none;background:#08041073;position:fixed;inset:0}.scrim.show{opacity:1;pointer-events:auto}.scrim[hidden]{display:block}.drawer{z-index:40;width:min(86vw,360px);padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 18px;-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--line);overscroll-behavior:contain;visibility:hidden;transition:transform .32s var(--ease), visibility 0s linear .32s;background:linear-gradient(#26184cf7,#180f30f7);border-radius:22px 0 0 22px;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(105%);box-shadow:-18px 0 40px #00000073}.drawer.open{visibility:visible;transition:transform .32s var(--ease), visibility 0s;transform:translate(0)}.drawer:not(.open){pointer-events:none}.drawer header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.drawer h2{margin:0;font-size:18px;font-weight:600}.drawer h3{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 10px;font-size:13px;font-weight:600}.drawer .close{width:38px;height:38px}@media (prefers-reduced-motion:reduce){.drawer,.drawer.open,.scrim,.toast{transition:none}}.swatches{flex-wrap:wrap;gap:12px 10px;display:flex}.capsule{justify-items:center;width:42px;display:grid}.swatch{z-index:1;cursor:pointer;background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, white), var(--c) 60%);border:2px solid #ffffff47;border-radius:50%;width:42px;height:42px;padding:0;position:relative}.swatch[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--bg-2), 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.metal{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))}.swatch.mica{background:conic-gradient(#f5d6f0,#d7e9ff,#d9f7e6,#fff3cf,#f5d6f0)}.swatch-tab{cursor:pointer;border:1px solid var(--line);width:40px;height:30px;color:var(--muted);background:#1f1440e6;border-top:none;border-radius:0 0 10px 10px;place-items:center;margin-top:-8px;padding:8px 0 0;transition:color .2s,border-color .2s;display:grid}.swatch-tab svg{stroke-width:2.2px;width:22px;height:22px;transition:transform .2s var(--ease)}.swatch-tab:hover{color:var(--gold)}.swatch-tab[aria-expanded=true]{color:var(--gold);border-color:var(--gold)}.swatch-tab[aria-expanded=true] svg{transform:rotate(180deg)}.swatch-options{opacity:0;transition:grid-template-rows .28s var(--ease), opacity .2s, margin .28s var(--ease);flex:0 0 100%;grid-template-rows:0fr;display:grid}.swatch-options.open{opacity:1;grid-template-rows:1fr;margin:2px 0 4px}.opt-inner{min-height:0;overflow:clip}.swatch-options:not(.open) .opt-inner{visibility:hidden}.swatch-options .opt-inner>*{margin:0 12px}.swatch-options .opt-inner{border:1px solid var(--line);background:#ffffff12;border-radius:14px;gap:10px;display:grid}.swatch-options header{align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:600;display:flex}.opt-name{flex:1}.opt-dot{background:var(--c);border:2px solid #ffffff80;border-radius:50%;width:18px;height:18px}.swatch-options .icon{width:32px;height:32px}.swatch-options .icon svg{width:16px;height:16px}.swatch-options label{color:var(--muted);grid-template-columns:1fr auto;gap:6px;font-size:13px;display:grid}.swatch-options label input{width:100%;accent-color:var(--gold);grid-column:1/-1}.swatch-options output{font-size:12px}.swatch-options label[hidden]{display:none}.opt-mix{gap:8px;display:grid}.opt-mix[hidden]{display:none}.opt-mix-title{color:var(--muted);font-size:13px}.opt-mix-title>span{padding:2px 30px 2px 0;display:inline-block}.mix-chips{flex-wrap:wrap;gap:6px;display:flex}.mix-chip{cursor:pointer;border:1px solid var(--line);background:0 0;border-radius:14px;align-items:center;gap:6px;padding:5px 10px 5px 6px;font-size:12px;display:inline-flex}.mix-chip[aria-checked=true]{border-color:var(--gold);background:#e0b95b29}.mix-dot{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:16px;height:16px}.mix-chip.none .mix-dot{border:1.5px dashed var(--muted);background:0 0}.mix-chip.mica .mix-dot{background:conic-gradient(#f5d6f0,#d7e9ff,#d9f7e6,#fff3cf,#f5d6f0)}.swatch-options .opt-colour{grid-template-columns:1fr auto;align-items:center}.swatch-options .opt-colour input{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:10px;grid-column:auto;width:56px;height:32px;padding:0}.swatch-options .opt-colour input::-webkit-color-swatch-wrapper{padding:3px}.swatch-options .opt-colour input::-webkit-color-swatch{border:none;border-radius:7px}.swatch-options .opt-colour input::-moz-color-swatch{border:none;border-radius:7px}.opt-reset{cursor:pointer;border:1px solid var(--line);color:var(--muted);background:0 0;border-radius:10px;justify-self:start;padding:6px 12px;font-size:13px;margin-bottom:12px!important}.size{color:var(--muted);gap:8px;font-size:13px;display:grid}.size input,.drying input{width:100%;accent-color:var(--gold)}.modes{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.modes button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:14px;justify-items:center;gap:4px;padding:12px 4px 10px;font-size:13px;display:grid}.modes button[aria-checked=true]{border-color:var(--gold);background:#8d5bd659}.mode-note{color:var(--muted);margin:12px 0 0;font-size:13px}.pro{position:relative}.pro:before{content:"";background:var(--pro);pointer-events:none;border-radius:2px;height:2px;position:absolute;top:50%;left:8%;right:8%;transform:rotate(-16deg);box-shadow:0 0 0 1px #00000040}.pro:after{content:"PRO";pointer-events:none;background:var(--pro);color:#fff;letter-spacing:.08em;border-radius:7px;padding:2px 6px;font-size:9.5px;font-weight:700;position:absolute;top:-8px;right:-6px;box-shadow:0 2px 6px #00000059}.surfaces{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.surfaces label{text-align:center;cursor:pointer;justify-items:center;gap:6px;font-size:13px;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%)}.seal{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:14px;align-items:center;gap:10px;width:100%;padding:12px 14px;font-size:14px;font-weight:600;display:flex}.seal:active{background:#8d5bd659}.seal-row .note{margin-top:10px}.seal.pro:before{transform:rotate(-5deg)}.drying-block{color:var(--muted);gap:6px;margin-top:16px;font-size:13px;display:grid}.drying-head,.drying-ends{justify-content:space-between;display:flex}.drying-head output{color:var(--text)}.drying-ends{font-size:11px}.drying-block input{width:100%;accent-color:var(--gold)}.drying-block .note{margin:4px 0 0}.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){.top{padding:16px 24px 4px}.stage{padding:16px 24px 30px}.tools button{padding:9px 4px 7px;font-size:13px}}.switch-row{justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.switch-row input{appearance:none;cursor:pointer;background:#ffffff2e;border-radius:14px;width:46px;height:28px;margin:0;transition:background .2s;position:relative}.switch-row input:after{content:"";width:22px;height:22px;transition:transform .2s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0006}.switch-row input:checked{background:var(--gold)}.switch-row input:checked:after{transform:translate(18px)}.level-btn{margin:10px 0 0!important}.level-btn:disabled{opacity:.4;cursor:default}.sizes{gap:8px;display:grid}.sizes button{cursor:pointer;border:1px solid var(--line);background:var(--panel);text-align:left;border-radius:14px;justify-content:space-between;align-items:baseline;padding:12px 14px;display:flex}.sizes button strong{font-size:16px}.sizes button small{color:var(--muted);font-size:12px}.sizes button[aria-checked=true]{border-color:var(--gold);background:#8d5bd64d}.sizes .pro:before{transform:rotate(-4deg)}.save-actions{gap:8px;margin-top:18px;display:grid}.save-action{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:13px;font-size:15px;font-weight:600;display:flex}.save-action[hidden]{display:none}.save-action.primary{background:linear-gradient(135deg, var(--gold), #b98a2e);color:#1a1026;border-color:#0000}.save-action:disabled{opacity:.5;cursor:progress}.save-status{min-height:1.4em;color:var(--text)!important}.drawer.about{font-size:14px;line-height:1.55}.drawer.about p,.drawer.about li,.drawer.about dd{color:#ddd4ea}.drawer.about ul{margin:6px 0;padding-left:18px}.drawer.about li{margin:4px 0}.drawer.about dt{margin-top:10px;font-weight:600}.drawer.about dd{margin:2px 0 0}.drawer.about a{color:var(--gold)}noscript p{text-align:center;color:#333;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.account-drawer form:not([hidden]),.account-drawer #signed-in:not([hidden]){gap:12px;display:grid}.account-drawer label{color:var(--muted);gap:6px;font-size:13px;display:grid}.account-drawer input{font:inherit;color:var(--text);border:1px solid var(--line);background:#00000040;border-radius:12px;padding:11px 12px;font-size:16px}.account-drawer input:focus{border-color:var(--gold);outline:none}.account-drawer .note{margin:0}.account-drawer .error{color:#ff8f8f;margin:0;font-size:13px}.account-drawer .forgot{color:var(--gold);justify-self:center;font-size:13px}.icon.account.signed-in{color:var(--gold)}.tools button.toggle{position:relative}.tools button.toggle[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#e0b95b29}.tools button.toggle[aria-pressed=true]:after{content:"";background:var(--gold);width:6px;height:6px;box-shadow:0 0 6px var(--gold);border-radius:50%;position:absolute;top:5px;right:8px}.top{gap:8px}.brand{white-space:nowrap;text-overflow:clip;min-width:0;overflow:hidden}.top .actions{flex-shrink:0}@media (width<=420px){.brand{font-size:19px}.top .actions{gap:4px}.top .icon{width:38px;height:38px}}.tools .slot{display:grid;position:relative}.tools .more{z-index:1;border:1px solid var(--line);width:46px;height:25px;color:var(--muted);background:#1f1440e6;border-bottom:none;border-radius:10px 10px 0 0;place-items:center;padding:0;display:grid;position:absolute;top:-26px;left:50%;transform:translate(-50%)}.tools .more[hidden]{display:none}.tools .more svg{stroke-width:2.2px;width:22px;height:22px}.tools .more:hover,.tools .more[aria-expanded=true]{color:var(--gold);border-color:var(--gold)}.tools .settings-btn[aria-expanded=true],.tools .surface-btn[aria-expanded=true]{border-color:var(--line);background:#ffffff0f}.tools [data-tool=ink] .paint{fill:var(--c,transparent);fill-opacity:.85}.drawer.sheet{width:auto;max-width:560px;max-height:min(74dvh,680px);padding:10px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));border-left:none;border-top:1px solid var(--line);border-radius:22px 22px 0 0;margin:0 auto;inset:auto 0 0;transform:translateY(105%);box-shadow:0 -18px 40px #00000073}.drawer.sheet.open{transform:translateY(0)}.drawer.sheet:before{content:"";background:#ffffff40;border-radius:2px;width:40px;height:4px;margin:0 auto 8px;display:block}.drawer.sheet .size{margin-top:14px}.drawer.sheet .drying-block{margin-top:18px}.drawer.sheet h3{margin-top:16px}.confirm .note{margin:0 0 16px}.confirm-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.save-action.danger{background:var(--pro);color:#fff;border-color:#0000}.pro-on{position:relative}.pro-on:after{content:"";border:2px solid var(--pro);border-radius:inherit;pointer-events:none;position:absolute;inset:-4px}.opt-mix-title .pro-on{border-radius:999px;padding:2px 8px}.opt-mix-title .pro-on:after{inset:0}@media (width<=400px){.tools{width:calc(100% - 16px);margin-left:8px;margin-right:8px;padding:5px}.tools button:not(.more){padding-left:0;padding-right:0;font-size:10.5px}}.socials{grid-template-columns:1fr 1fr;gap:10px;display:grid}.social{border:1px solid var(--line);background:var(--panel);border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:11px;font-weight:600;text-decoration:none;display:flex;color:var(--text)!important}.social svg{width:20px;height:20px}.social:hover{border-color:var(--gold)}#drawer-save .note a{color:var(--gold)}.drawer.about .guide-links{padding:0;list-style:none}.drawer.about .guide-links li{margin:6px 0}.suppress-row{margin-top:20px}.tools .settings-btn{position:relative}.tools .settings-btn.flag{color:var(--gold)}.tools .settings-btn.flag:after{content:"";background:var(--gold);width:6px;height:6px;box-shadow:0 0 6px var(--gold);border-radius:50%;position:absolute;top:5px;right:8px}.persist-block{margin-top:22px}.persist-block input{width:100%;accent-color:var(--gold)}