:root{--bg: #f7f7fb;--fg: #1a1d29;--muted: #5e6273;--accent: #4f46e5;--gold: #fde047;--shadow: 0 6px 24px rgba(20, 24, 40, .12);--safe-top: env(safe-area-inset-top, 0px);--safe-bot: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;padding:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app{display:flex;flex-direction:column;position:fixed;inset:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + var(--safe-top)) 14px 8px;font-weight:600;letter-spacing:.02em;z-index:5}.topbar .title{display:flex;align-items:center;gap:8px;font-size:17px}.topbar .title-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#4f46e5,#06b6d4);box-shadow:var(--shadow)}.topbar .stats{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);display:flex;gap:14px}.topbar .actions{display:flex;gap:6px}.icon-btn{background:#fff;border:1px solid #e6e8f0;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;box-shadow:var(--shadow)}.icon-btn:active{transform:scale(.97)}.canvas-host{flex:1;position:relative;overflow:hidden}.canvas-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.color-bar{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:8px;padding:12px 12px calc(14px + var(--safe-bot));background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #e8eaf2;z-index:5}.color-btn{flex:1 1 0;min-width:0;max-width:60px;aspect-ratio:1 / 1;border-radius:14px;border:3px solid #fff;cursor:pointer;box-shadow:0 6px 18px #1418282e;position:relative;transition:transform .12s ease}.color-btn:active{transform:scale(.92)}.color-btn.current{outline:3px solid var(--accent);outline-offset:3px}.color-btn[disabled]{opacity:.4;cursor:not-allowed}.overlay{position:fixed;inset:0;background:#f7f7fbeb;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:fade .25s ease}@keyframes fade{0%{opacity:0}}.overlay-card{max-width:360px;width:100%;background:#fff;border-radius:24px;padding:28px 24px;text-align:center;box-shadow:0 20px 60px #14182840}.overlay-card h1{margin:0 0 8px;font-size:26px;letter-spacing:-.01em}.overlay-card p{margin:0 0 20px;color:var(--muted);line-height:1.5}.overlay-card .big-btn{background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;border:none;border-radius:14px;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 25px #4f46e559}.overlay-card .big-btn:active{transform:scale(.97)}.overlay-card .ghost-btn{background:transparent;border:none;color:var(--muted);margin-top:12px;font-size:13px;cursor:pointer}.help-card{max-width:380px;text-align:left}.help-card h1{text-align:center}.help-card .lead{font-size:14px;color:var(--muted);margin-bottom:18px}.help-card .big-btn{display:block;margin:18px auto 0}.help-card .tip{font-size:13px;color:var(--muted);background:#f4f5fa;padding:10px 12px;border-radius:12px;margin:18px 0 0}.legend{display:flex;flex-direction:column;gap:12px;margin:4px 0 0}.legend-row{display:flex;align-items:center;gap:14px}.legend-swatch{width:40px;height:40px;border-radius:10px;flex-shrink:0;position:relative;box-shadow:0 4px 10px #14182829;border:2px solid #fff}.legend-marker{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff}.legend-locked{background-color:#2c3142;background-image:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 60%),linear-gradient(45deg,transparent 38%,rgba(255,255,255,.85) 38%,rgba(255,255,255,.85) 62%,transparent 62%),linear-gradient(135deg,transparent 38%,rgba(255,255,255,.85) 38%,rgba(255,255,255,.85) 62%,transparent 62%)}.legend-speckled{background-color:#3a3f4e;background-image:radial-gradient(circle at 22% 28%,rgba(255,220,100,.95) 2px,transparent 3px),radial-gradient(circle at 78% 35%,rgba(120,200,255,.95) 2px,transparent 3px),radial-gradient(circle at 30% 78%,rgba(255,180,200,.9) 2px,transparent 3px),radial-gradient(circle at 70% 72%,rgba(180,255,200,.9) 2px,transparent 3px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 2px,transparent 3px)}.legend-pill{width:64px;height:28px;border-radius:8px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.04em;flex-shrink:0;box-shadow:0 4px 10px #14182829;border:1.5px solid rgba(0,0,0,.06)}.legend-text{font-size:14px;color:var(--fg);line-height:1.35}.legend-picker{display:flex;gap:4px;width:76px;height:40px;align-items:center;flex-shrink:0;background:#f4f5fa;border-radius:12px;padding:4px;border:1px solid #e6e8f0}.legend-picker-dot{width:12px;height:24px;border-radius:4px;border:1.5px solid #fff;box-shadow:0 2px 4px #14182826}.toast{position:fixed;bottom:calc(110px + var(--safe-bot));left:50%;transform:translate(-50%);background:#1a1d29;color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;z-index:200;pointer-events:none;animation:toastIn .2s ease}@keyframes toastIn{0%{transform:translate(-50%,8px);opacity:0}}