.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:.12s ease;--t-base:.18s cubic-bezier(.4, 0, .2, 1);--shadow-1:0 1px 2px #0006;--shadow-2:0 20px 50px -22px #000c;--glow:0 6px 26px -10px #a78bfa80;color:var(--text)}.wwm-colors-root ::selection{color:#fff;background:#a78bfa52}.wwm-colors-root .studio{grid-template-columns:minmax(0,1.55fr) minmax(330px,.82fr);align-items:start;gap:clamp(12px,1.2vw,18px);display:grid}.wwm-colors-root .studio-main{gap:var(--sp-2);flex-direction:column;min-width:0;display:flex}.wwm-colors-root .studio-side{gap:var(--sp-3);flex-direction:column;display:flex;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{align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) 0;display:flex}.wwm-colors-root .panel-pad{padding:var(--sp-2) var(--sp-4) var(--sp-3)}.wwm-colors-root .panel-num{width:22px;height:22px;color:var(--accent);background:#a78bfa1f;border:1px solid #a78bfa40;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:800;display:inline-flex}.wwm-colors-root .panel-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-size:11px;font-weight:700}.wwm-colors-root .panel-title .sub{letter-spacing:0;text-transform:none;color:var(--text-dim);margin-top:4px;font-size:11.5px;font-weight:500;display:block}.wwm-colors-root .mode-seg{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.wwm-colors-root .mode-tab{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--t-base), border-color var(--t-base), color var(--t-base);background:0 0;border:1px solid #0000;border-radius:2px;justify-content:center;align-items:center;gap:9px;padding:7px 10px;display:flex}.wwm-colors-root .mode-tab:hover{background:var(--surface-2)}.wwm-colors-root .mode-tab.active{background:#a78bfa1f;border-color:#a78bfa66}.wwm-colors-root .mode-tab .mt-name{color:var(--text-muted);font-size:13.5px;font-weight:700}.wwm-colors-root .mode-tab .mt-limit{letter-spacing:.04em;color:var(--text-dim);background:#ffffff0a;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800}.wwm-colors-root .mode-tab.active .mt-name{color:#fff}.wwm-colors-root .mode-tab.active .mt-limit{color:var(--accent-soft);background:#a78bfa29}.wwm-colors-root textarea.msg{resize:vertical;width:100%;min-height:44px;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);transition:border-color var(--t-base), box-shadow var(--t-base);font-family:Inter,sans-serif;font-size:15px;line-height:1.5}.wwm-colors-root textarea.msg:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #a78bfa29}.wwm-colors-root .hint{color:var(--text-muted);margin-top:var(--sp-2);font-size:11.5px;line-height:1.5}.wwm-colors-root .stage{border:1px solid var(--border-light);border-radius:var(--r-lg);box-shadow:var(--shadow-2);background:linear-gradient(#131316,#0d0d0f);position:relative;overflow:hidden}.wwm-colors-root .stage:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.6;height:1px;position:absolute;top:0;left:0;right:0}.wwm-colors-root .stage-grid{grid-template-columns:minmax(0,1fr) 230px;display:grid}.wwm-colors-root .stage-main{padding:var(--sp-4);min-width:0}.wwm-colors-root .preview-chrome{margin-bottom:var(--sp-2);align-items:center;gap:7px;display:flex}.wwm-colors-root .preview-chrome .dot{background:var(--border-light);border-radius:50%;width:9px;height:9px}.wwm-colors-root .preview-chrome .dot:first-child{background:#a78bfa80}.wwm-colors-root .preview-chrome .tag{letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);align-items:center;gap:6px;margin-left:auto;font-size:9px;font-weight:700;display:inline-flex}.wwm-colors-root .preview-chrome .tag:before{content:"";background:var(--ok);width:6px;height:6px;box-shadow:0 0 8px var(--ok);border-radius:50%}.wwm-colors-root .preview{word-break:break-word;white-space:pre-wrap;letter-spacing:.2px;text-shadow:0 1px 3px #00000080;min-height:38px;font-size:clamp(18px,1.9vw,23px);font-weight:600;line-height:1.45}.wwm-colors-root .stage-meter{border-left:1px solid var(--border);padding:var(--sp-4);gap:var(--sp-2);background:#0003;flex-direction:column;display:flex}.wwm-colors-root .pm-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-size:9px;font-weight:700}.wwm-colors-root .counter{display:block}.wwm-colors-root .counter .pm-figure{align-items:baseline;gap:6px;display:flex}.wwm-colors-root .counter .cnt-num{letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ok);transition:color var(--t-base);font-size:28px;font-weight:900;line-height:1}.wwm-colors-root .counter .cnt-lim{color:var(--text-muted);font-size:14px;font-weight:600}.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;margin-top:var(--sp-2);background:#ffffff12;border-radius:999px;overflow:hidden}.wwm-colors-root .pm-fill{height:100%;width:var(--pct,2%);background:var(--ok);transition:width .35s cubic-bezier(.4, 0, .2, 1), background var(--t-base);border-radius:999px;display:block}.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{margin-top:var(--sp-1);align-items:center;gap:7px;font-size:12px;font-weight:700;display:flex}.wwm-colors-root .pm-state:before{content:"";background:var(--ok);border-radius:50%;width:7px;height:7px}.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{color:var(--text-muted);padding-top:var(--sp-2);margin-top:auto;font-size:11px;line-height:1.5}.wwm-colors-root .over-note{color:var(--over);font-size:11.5px;font-weight:600;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);-webkit-user-select:none;user-select:none;cursor:text;flex-wrap:wrap;gap:2px;min-height:40px;font-size:19px;line-height:1.35;display:flex}.wwm-colors-root .cc-char{transition:outline-color var(--t-fast), background var(--t-fast);white-space:pre;border-radius:2px;outline:2px solid #0000;padding:1px 1.5px;position:relative}.wwm-colors-root .cc-char.sel{outline-color:var(--accent);background:#a78bfa2e}.wwm-colors-root .cc-char.space{min-width:9px}.wwm-colors-root .cc-char.space.sel{background:#a78bfa47}.wwm-colors-root .canvas-empty{color:var(--text-dim);font-size:14px;font-style:italic}.wwm-colors-root .canvas-hint{color:var(--text-dim);margin-top:var(--sp-2);font-size:11px;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{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--sp-3);font-size:10px;font-weight:700;display:block}.wwm-colors-root .swatches{gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(40px,1fr));display:grid}.wwm-colors-root .swatch{aspect-ratio:1.55;border-radius:var(--r-sm);cursor:pointer;transition:transform var(--t-fast), border-color var(--t-base), box-shadow var(--t-base);border:1px solid #ffffff14;justify-content:flex-end;align-items:flex-end;padding:3px 5px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0003}.wwm-colors-root .swatch:hover{z-index:2;border-color:#ffffff73;transform:translateY(-2px);box-shadow:0 6px 16px #00000080}.wwm-colors-root .swatch:active{transform:translateY(0)}.wwm-colors-root .swatch .sw-key{color:#000;text-shadow:0 0 3px #ffffffb3;opacity:.8;font-size:10px;font-weight:900}.wwm-colors-root .toolbar{gap:var(--sp-2);flex-wrap:wrap;align-items:center;display:flex}.wwm-colors-root .custom-color{background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-sm);align-items:center;gap:4px;padding:4px 8px 4px 5px;display:inline-flex}.wwm-colors-root .custom-color input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:2px;width:30px;height:30px;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{color:var(--text);background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--r-sm);cursor:pointer;min-height:38px;transition:border-color var(--t-base), color var(--t-base), background var(--t-base), transform var(--t-fast);align-items:center;gap:6px;padding:9px 13px;font-family:Inter,sans-serif;font-size:12px;font-weight:700;display:inline-flex}.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:0 0}.wwm-colors-root .grad-presets{gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;display:flex}.wwm-colors-root .grad-chip{cursor:pointer;border:1px solid var(--border-light);border-radius:var(--r-sm);color:var(--text);background:var(--surface-3);align-items:center;gap:var(--sp-2);transition:border-color var(--t-base), transform var(--t-fast);padding:6px 11px 6px 6px;font-size:11px;font-weight:700;display:inline-flex}.wwm-colors-root .grad-chip:hover{border-color:var(--accent);transform:translateY(-1px)}.wwm-colors-root .grad-chip .gc-bar{border-radius:2px;width:36px;height:13px;box-shadow:inset 0 0 0 1px #00000040}.wwm-colors-root .toggle-row{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);display:flex}.wwm-colors-root .switch{flex-shrink:0;width:40px;height:22px;margin-top:1px;position:relative}.wwm-colors-root .switch input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute}.wwm-colors-root .switch .track{background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--r-pill);transition:var(--t-base);pointer-events:none;position:absolute;inset:0}.wwm-colors-root .switch .track:before{content:"";background:var(--text-muted);width:16px;height:16px;transition:var(--t-base);border-radius:50%;position:absolute;top:2px;left:2px}.wwm-colors-root .switch input:checked+.track{border-color:var(--accent);background:#a78bfa4d}.wwm-colors-root .switch input:checked+.track:before{background:var(--accent);transform:translate(18px)}.wwm-colors-root .toggle-label{color:var(--text);font-size:12px;font-weight:700}.wwm-colors-root .toggle-label small{color:var(--text-muted);margin-top:3px;font-size:11px;font-weight:500;line-height:1.5;display:block}.wwm-colors-root .out-box{background:var(--surface-3);border:1px solid var(--border-light);border-radius:var(--r-md);padding:var(--sp-3);color:var(--accent-soft);word-break:break-all;white-space:pre-wrap;min-height:38px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55}.wwm-colors-root .copy-cta{width:100%;margin-top:var(--sp-3);letter-spacing:.01em;color:#0a0a0a;border-radius:var(--r-md);cursor:pointer;background:linear-gradient(120deg, var(--accent-soft), var(--accent) 52%, var(--accent-strong));box-shadow:var(--glow);transition:transform var(--t-fast), box-shadow var(--t-base), filter var(--t-base);border:none;justify-content:center;align-items:center;gap:9px;padding:10px 18px;font-family:Inter,sans-serif;font-size:13.5px;font-weight:800;display:inline-flex}.wwm-colors-root .copy-cta:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 34px -10px #a78bfaa6}.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{cursor:pointer;padding:var(--sp-4) var(--sp-5);align-items:center;gap:var(--sp-2);letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-size:11px;font-weight:700;list-style:none;display:flex}.wwm-colors-root details.help-details>summary::-webkit-details-marker{display:none}.wwm-colors-root details.help-details>summary .chevron{color:var(--text-dim);transition:transform var(--t-base);margin-left:auto}.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{color:#c0c0c8;margin-bottom:var(--sp-3);font-size:13px;line-height:1.65}.wwm-colors-root .help-body code{background:var(--surface-2);color:var(--accent-soft);border-radius:2px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12px}.wwm-colors-root .ref-block-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:var(--sp-5) 0 var(--sp-3);font-size:10px;font-weight:700}.wwm-colors-root .ref-grid{gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(72px,1fr));display:grid}.wwm-colors-root .ref-cell{color:var(--text-muted);background:var(--surface-3);border:1px solid var(--border);border-radius:2px;align-items:center;gap:6px;padding:5px 8px;font-size:11px;display:flex}.wwm-colors-root .ref-cell .rc-dot{border:1px solid #ffffff1f;border-radius:2px;flex-shrink:0;width:16px;height:16px}.wwm-colors-root .ref-cell code{color:var(--accent-soft);font-size:11px}.wwm-colors-root .toast{background:var(--accent);color:#0a0a0a;border-radius:var(--r-md);opacity:0;pointer-events:none;z-index:50;padding:11px 20px;font-size:13px;font-weight:800;transition:opacity .25s,transform .25s;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 12px 30px #00000080}.wwm-colors-root .toast.show{opacity:1;transform:translate(-50%)translateY(0)}.wwm-colors-root a:focus-visible,.wwm-colors-root button:focus-visible,.wwm-colors-root .swatch:focus-visible,.wwm-colors-root .grad-chip:focus-visible,.wwm-colors-root .mode-tab:focus-visible,.wwm-colors-root [tabindex]: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);align-items:center;gap:var(--sp-4);flex-flow:wrap}.wwm-colors-root .stage-meter .pm-meta{flex-basis:100%;margin-top:0;padding-top:0}}@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 :before,.wwm-colors-root :after{transition-duration:.001ms!important;animation-duration:.001ms!important}}