.wwm-colors-root{--bg:#0a0a0a;--surface:#111;--surface-2:#0f0f0f;--border:#1f1f1f;--border-soft:#1a1a1a;--accent:#a78bfa;--accent-strong:#8b5cf6;--text:#fafafa;--text-muted:#9a9a9a;--text-faint:#8a8a8a;font-family:var(--font-inter),Inter,system-ui,sans-serif;--surface-3:#0d0d0f;--border-light:#2b2b31;--text-dim:#5e5e66;--accent-soft:#c4b5fd;--ok:#34d399;--warn:#fbbf24;--over:#fb7185;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--r-sm:9px;--r-md:12px;--r-lg:16px;--r-pill:999px;--t-fast:0.12s ease;--t-base:0.18s cubic-bezier(0.4,0,0.2,1);--shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 20px 50px -22px rgba(0,0,0,.8);--glow:0 6px 26px -10px rgba(167,139,250,.5);color:var(--text)}.wwm-colors-root ::-moz-selection{background:rgba(167,139,250,.32);color:#fff}.wwm-colors-root ::selection{background:rgba(167,139,250,.32);color:#fff}.wwm-colors-root .studio{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.82fr);gap:clamp(12px,1.2vw,18px);align-items:start}.wwm-colors-root .studio-main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}.wwm-colors-root .studio-side{display:flex;flex-direction:column;gap:var(--sp-3);position:sticky;top:12px}.wwm-colors-root .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}.wwm-colors-root .panel-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) 0}.wwm-colors-root .panel-pad{padding:var(--sp-2) var(--sp-4) var(--sp-3)}.wwm-colors-root .panel-num{flex-shrink:0;width:22px;height:22px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--accent);background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25)}.wwm-colors-root .panel-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}.wwm-colors-root .panel-title .sub{display:block;margin-top:4px;font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--text-dim)}.wwm-colors-root .mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:4px}.wwm-colors-root .mode-tab{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:2px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;background:transparent;transition:background var(--t-base),border-color var(--t-base),color var(--t-base)}.wwm-colors-root .mode-tab:hover{background:var(--surface-2)}.wwm-colors-root .mode-tab.active{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.4)}.wwm-colors-root .mode-tab .mt-name{font-size:13.5px;font-weight:700;color:var(--text-muted)}.wwm-colors-root .mode-tab .mt-limit{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--text-dim);padding:2px 7px;border-radius:999px;background:hsla(0,0%,100%,.04)}.wwm-colors-root .mode-tab.active .mt-name{color:#fff}.wwm-colors-root .mode-tab.active .mt-limit{color:var(--accent-soft);background:rgba(167,139,250,.16)}.wwm-colors-root textarea.msg{width:100%;min-height:44px;resize:vertical;margin-top:var(--sp-3);background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);color:var(--text);font-family:Inter,sans-serif;font-size:15px;line-height:1.5;transition:border-color var(--t-base),box-shadow var(--t-base)}.wwm-colors-root textarea.msg:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(167,139,250,.16)}.wwm-colors-root .hint{font-size:11.5px;color:var(--text-muted);margin-top:var(--sp-2);line-height:1.5}.wwm-colors-root .stage{position:relative;overflow:hidden;background:linear-gradient(180deg,#131316,#0d0d0f);border:1px solid var(--border-light);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}.wwm-colors-root .stage:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}.wwm-colors-root .stage-grid{display:grid;grid-template-columns:minmax(0,1fr) 230px}.wwm-colors-root .stage-main{padding:var(--sp-4);min-width:0}.wwm-colors-root .preview-chrome{display:flex;align-items:center;gap:7px;margin-bottom:var(--sp-2)}.wwm-colors-root .preview-chrome .dot{width:9px;height:9px;border-radius:50%;background:var(--border-light)}.wwm-colors-root .preview-chrome .dot:first-child{background:rgba(167,139,250,.5)}.wwm-colors-root .preview-chrome .tag{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);display:inline-flex;align-items:center;gap:6px}.wwm-colors-root .preview-chrome .tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.wwm-colors-root .preview{font-size:clamp(18px,1.9vw,23px);line-height:1.45;word-break:break-word;white-space:pre-wrap;min-height:38px;font-weight:600;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.5)}.wwm-colors-root .stage-meter{border-left:1px solid var(--border);padding:var(--sp-4);background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:var(--sp-2)}.wwm-colors-root .pm-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.wwm-colors-root .counter{display:block}.wwm-colors-root .counter .pm-figure{display:flex;align-items:baseline;gap:6px}.wwm-colors-root .counter .cnt-num{font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ok);transition:color var(--t-base)}.wwm-colors-root .counter .cnt-lim{font-size:14px;font-weight:600;color:var(--text-muted)}.wwm-colors-root .counter.ok .cnt-num{color:var(--ok)}.wwm-colors-root .counter.warn .cnt-num{color:var(--warn)}.wwm-colors-root .counter.over .cnt-num{color:var(--over)}.wwm-colors-root .pm-bar{height:6px;border-radius:999px;background:hsla(0,0%,100%,.07);overflow:hidden;margin-top:var(--sp-2)}.wwm-colors-root .pm-fill{display:block;height:100%;width:var(--pct,2%);border-radius:999px;background:var(--ok);transition:width .35s cubic-bezier(.4,0,.2,1),background var(--t-base)}.wwm-colors-root .counter.ok .pm-fill{background:var(--ok)}.wwm-colors-root .counter.warn .pm-fill{background:var(--warn)}.wwm-colors-root .counter.over .pm-fill{background:var(--over)}.wwm-colors-root .pm-state{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;margin-top:var(--sp-1)}.wwm-colors-root .pm-state:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}.wwm-colors-root .counter.ok .pm-state{color:var(--ok)}.wwm-colors-root .counter.ok .pm-state:before{background:var(--ok)}.wwm-colors-root .counter.ok .pm-state:after{content:"Fits the limit"}.wwm-colors-root .counter.warn .pm-state{color:var(--warn)}.wwm-colors-root .counter.warn .pm-state:before{background:var(--warn)}.wwm-colors-root .counter.warn .pm-state:after{content:"Getting close"}.wwm-colors-root .counter.over .pm-state{color:var(--over)}.wwm-colors-root .counter.over .pm-state:before{background:var(--over)}.wwm-colors-root .counter.over .pm-state:after{content:"Over the limit"}.wwm-colors-root .pm-meta{font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:auto;padding-top:var(--sp-2)}.wwm-colors-root .over-note{font-size:11.5px;font-weight:600;color:var(--over);line-height:1.45;display:none}.wwm-colors-root .over-note.show{display:block}.wwm-colors-root .canvas{background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-md);padding:var(--sp-3);min-height:40px;display:flex;flex-wrap:wrap;gap:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:text;font-size:19px;line-height:1.35}.wwm-colors-root .cc-char{position:relative;padding:1px 1.5px;border-radius:2px;outline:2px solid transparent;transition:outline-color var(--t-fast),background var(--t-fast);white-space:pre}.wwm-colors-root .cc-char.sel{outline-color:var(--accent);background:rgba(167,139,250,.18)}.wwm-colors-root .cc-char.space{min-width:9px}.wwm-colors-root .cc-char.space.sel{background:rgba(167,139,250,.28)}.wwm-colors-root .canvas-empty{color:var(--text-dim);font-size:14px;font-style:italic}.wwm-colors-root .canvas-hint{font-size:11px;color:var(--text-dim);margin-top:var(--sp-2);line-height:1.4}.wwm-colors-root .field-block+.field-block{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}.wwm-colors-root .field-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--sp-3);display:block}.wwm-colors-root .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--sp-2)}.wwm-colors-root .swatch{position:relative;aspect-ratio:1.55;border-radius:var(--r-sm);cursor:pointer;border:1px solid hsla(0,0%,100%,.08);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:transform var(--t-fast),border-color var(--t-base),box-shadow var(--t-base);display:flex;align-items:flex-end;justify-content:flex-end;padding:3px 5px}.wwm-colors-root .swatch:hover{transform:translateY(-2px);border-color:hsla(0,0%,100%,.45);box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:2}.wwm-colors-root .swatch:active{transform:translateY(0)}.wwm-colors-root .swatch .sw-key{font-size:10px;font-weight:900;color:#000;text-shadow:0 0 3px hsla(0,0%,100%,.7);opacity:.8}.wwm-colors-root .toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.wwm-colors-root .custom-color{display:inline-flex;align-items:center;gap:4px;background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-sm);padding:4px 8px 4px 5px}.wwm-colors-root .custom-color input[type=color]{width:30px;height:30px;border:none;border-radius:2px;background:transparent;cursor:pointer;padding:0}.wwm-colors-root .custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.wwm-colors-root .custom-color input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.wwm-colors-root .btn{font-family:Inter,sans-serif;font-size:12px;font-weight:700;color:var(--text);background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--r-sm);padding:9px 13px;cursor:pointer;min-height:38px;transition:border-color var(--t-base),color var(--t-base),background var(--t-base),transform var(--t-fast);display:inline-flex;align-items:center;gap:6px}.wwm-colors-root .btn:hover{border-color:var(--accent);color:var(--accent-soft)}.wwm-colors-root .btn:active{transform:translateY(1px)}.wwm-colors-root .btn.ghost{background:transparent}.wwm-colors-root .grad-presets{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}.wwm-colors-root .grad-chip{cursor:pointer;border:1px solid var(--border-light);border-radius:var(--r-sm);padding:6px 11px 6px 6px;font-size:11px;font-weight:700;color:var(--text);background:var(--surface-3);display:inline-flex;align-items:center;gap:var(--sp-2);transition:border-color var(--t-base),transform var(--t-fast)}.wwm-colors-root .grad-chip:hover{border-color:var(--accent);transform:translateY(-1px)}.wwm-colors-root .grad-chip .gc-bar{width:36px;height:13px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}.wwm-colors-root .toggle-row{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3)}.wwm-colors-root .switch{position:relative;width:40px;height:22px;flex-shrink:0;margin-top:1px}.wwm-colors-root .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.wwm-colors-root .switch .track{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--r-pill);transition:var(--t-base);pointer-events:none}.wwm-colors-root .switch .track:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--text-muted);border-radius:50%;transition:var(--t-base)}.wwm-colors-root .switch input:checked+.track{background:rgba(167,139,250,.3);border-color:var(--accent)}.wwm-colors-root .switch input:checked+.track:before{transform:translateX(18px);background:var(--accent)}.wwm-colors-root .toggle-label{font-size:12px;font-weight:700;color:var(--text)}.wwm-colors-root .toggle-label small{display:block;margin-top:3px;font-size:11px;color:var(--text-muted);font-weight:500;line-height:1.5}.wwm-colors-root .out-box{background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-md);padding:var(--sp-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--accent-soft);word-break:break-all;white-space:pre-wrap;min-height:38px;line-height:1.55}.wwm-colors-root .copy-cta{width:100%;margin-top:var(--sp-3);font-family:Inter,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:#0a0a0a;border:none;border-radius:var(--r-md);padding:10px 18px;cursor:pointer;background:linear-gradient(120deg,var(--accent-soft),var(--accent) 52%,var(--accent-strong));box-shadow:var(--glow);display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform var(--t-fast),box-shadow var(--t-base),filter var(--t-base)}.wwm-colors-root .copy-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(167,139,250,.65);filter:brightness(1.05)}.wwm-colors-root .copy-cta:active{transform:translateY(0)}.wwm-colors-root details.help-details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}.wwm-colors-root details.help-details>summary{list-style:none;cursor:pointer;padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;gap:var(--sp-2);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}.wwm-colors-root details.help-details>summary::-webkit-details-marker{display:none}.wwm-colors-root details.help-details>summary .chevron{margin-left:auto;color:var(--text-dim);transition:transform var(--t-base)}.wwm-colors-root details.help-details[open]>summary .chevron{transform:rotate(90deg)}.wwm-colors-root details.help-details>summary:hover{color:var(--accent-soft)}.wwm-colors-root .help-body{padding:0 var(--sp-5) var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}.wwm-colors-root .help-body p{font-size:13px;color:#c0c0c8;line-height:1.65;margin-bottom:var(--sp-3)}.wwm-colors-root .help-body code{background:var(--surface-2);padding:1px 6px;border-radius:2px;font-size:12px;color:var(--accent-soft);font-family:ui-monospace,monospace}.wwm-colors-root .ref-block-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:var(--sp-5) 0 var(--sp-3)}.wwm-colors-root .ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:var(--sp-2)}.wwm-colors-root .ref-cell{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);background:var(--surface-3);border:1px solid var(--border);border-radius:2px;padding:5px 8px}.wwm-colors-root .ref-cell .rc-dot{width:16px;height:16px;border-radius:2px;border:1px solid hsla(0,0%,100%,.12);flex-shrink:0}.wwm-colors-root .ref-cell code{font-size:11px;color:var(--accent-soft)}.wwm-colors-root .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--accent);color:#0a0a0a;font-weight:800;font-size:13px;padding:11px 20px;border-radius:var(--r-md);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;box-shadow:0 12px 30px rgba(0,0,0,.5)}.wwm-colors-root .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.wwm-colors-root .grad-chip:focus-visible,.wwm-colors-root .mode-tab:focus-visible,.wwm-colors-root .swatch:focus-visible,.wwm-colors-root [tabindex]:focus-visible,.wwm-colors-root a:focus-visible,.wwm-colors-root button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}@media (max-width:980px){.wwm-colors-root .studio{grid-template-columns:1fr}.wwm-colors-root .studio-side{position:static}.wwm-colors-root .stage-grid{grid-template-columns:1fr}.wwm-colors-root .stage-meter{border-left:none;border-top:1px solid var(--border);flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}.wwm-colors-root .stage-meter .pm-meta{margin-top:0;padding-top:0;flex-basis:100%}}@media (max-width:560px){.wwm-colors-root .stage-main{padding:var(--sp-5)}.wwm-colors-root .canvas{font-size:20px}.wwm-colors-root .stage-meter{flex-direction:column;align-items:stretch}}@media (prefers-reduced-motion:reduce){.wwm-colors-root *,.wwm-colors-root :after,.wwm-colors-root :before{animation-duration:.001ms!important;transition-duration:.001ms!important}}