:root{--bg: #0d0d10;--bg-2: #141418;--panel: rgba(28, 28, 34, .72);--panel-solid: #1a1a20;--line: rgba(255, 255, 255, .08);--line-2: rgba(255, 255, 255, .14);--ink: #f2efe9;--ink-dim: #9a978f;--ink-faint: #66645e;--accent: #e8b04b;--accent-ink: #1a1508;--radius: 16px;--radius-sm: 11px;--shadow: 0 18px 50px rgba(0, 0, 0, .5);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:radial-gradient(120% 90% at 50% 0%,#17171c 0%,var(--bg) 60%);color:var(--ink);font-family:var(--font);overflow:hidden;user-select:none}#app{height:100dvh;width:100vw;position:relative}button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none}.topbar{position:absolute;top:calc(var(--safe-t) + 14px);left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:20;pointer-events:none}.brand{font-weight:800;letter-spacing:.32em;font-size:13px;color:var(--ink);text-transform:uppercase;pointer-events:auto}.brand span{color:var(--accent)}.tabs{display:flex;gap:6px;pointer-events:auto}.tab{padding:8px 15px;border-radius:40px;font-size:12.5px;font-weight:600;color:var(--ink-dim);background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);transition:.2s}.tab.active{color:var(--accent-ink);background:var(--accent);border-color:transparent}.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s}.screen.show{opacity:1;pointer-events:auto}#viewport{position:absolute;inset:0}#viewport canvas{display:block}.stage-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--ink-faint);font-size:14px;letter-spacing:.02em;pointer-events:none;line-height:1.6}.draw-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);width:min(78vw,66vh);aspect-ratio:1;z-index:6;border-radius:22px;border:1.5px dashed var(--line-2);background:#ffffff04;transition:opacity .3s,transform .3s}.draw-wrap.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-54%) scale(.96)}.draw-wrap canvas{width:100%;height:100%;display:block}.draw-tag{position:absolute;top:14px;left:16px;font-size:11px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase}.dock{position:absolute;left:0;right:0;bottom:0;z-index:12;padding:16px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:12px;align-items:center}.dock-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.btn{height:46px;padding:0 22px;border-radius:40px;font-weight:700;font-size:14px;background:var(--panel-solid);border:1px solid var(--line-2);color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:transform .12s,background .2s}.btn:active{transform:scale(.95)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 8px 24px #e8b04b47}.btn.ghost{background:var(--panel);backdrop-filter:blur(12px)}.btn.icon{width:46px;padding:0;justify-content:center;font-size:18px}.btn:disabled{opacity:.4;pointer-events:none}.style-card{width:min(560px,94vw);background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:14px;transition:opacity .3s,transform .3s}.style-card.hidden{opacity:0;pointer-events:none;transform:translateY(14px);height:0;padding:0;overflow:hidden}.ctl-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{padding:8px 13px;border-radius:30px;font-size:12.5px;font-weight:600;background:#ffffff0d;border:1px solid var(--line);color:var(--ink-dim);transition:.15s}.chip.active{color:var(--ink);border-color:var(--accent);background:#e8b04b1f}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;transition:.15s}.swatch.active{border-color:var(--ink);transform:scale(1.12)}.slider-row{display:flex;align-items:center;gap:12px}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--line-2);flex:1}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-2)}.gallery{position:absolute;inset:0;overflow-y:auto;padding:calc(var(--safe-t) + 70px) 18px calc(30px + var(--safe-b))}.gallery h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:4px 0}.gallery .sub{color:var(--ink-dim);font-size:13px;margin:0 0 20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.cell{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;position:relative;background:var(--bg-2);border:1px solid var(--line);transition:transform .15s}.cell:active{transform:scale(.97)}.cell img{width:100%;height:100%;object-fit:cover;display:block}.cell .meta{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:11px;color:var(--ink-dim);background:linear-gradient(transparent,#0009)}.empty-gallery{text-align:center;color:var(--ink-faint);padding:60px 20px;font-size:14px;line-height:1.7}.onb{position:absolute;inset:0;z-index:60;background:#08080ae6;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:opacity .35s}.onb.hidden{opacity:0;pointer-events:none}.onb-card{width:min(400px,88vw);text-align:center;padding:32px 28px}.onb-card .big{font-size:26px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.onb-card .big span{color:var(--accent)}.onb-card p{color:var(--ink-dim);font-size:15px;line-height:1.7;margin:18px 0 28px}.lightbox{position:absolute;inset:0;z-index:70;background:#060608f0;backdrop-filter:blur(10px);display:none;flex-direction:column;padding:calc(var(--safe-t) + 20px) 20px calc(20px + var(--safe-b))}.lightbox.show{display:flex}.lightbox img{flex:1;min-height:0;object-fit:contain;border-radius:14px}.lightbox .lb-actions{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}.toast{position:absolute;bottom:calc(120px + var(--safe-b));left:50%;transform:translate(-50%) translateY(10px);background:var(--panel-solid);border:1px solid var(--line-2);color:var(--ink);padding:11px 20px;border-radius:30px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:80;pointer-events:none;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 520px){.draw-wrap{width:82vw}}