.colors-studio{--paper: var(--color-paper, #f7f3ea);--paper-2: var(--color-paper-2, #f1ebdd);--panel: var(--color-panel, #fbf8f2);--ink: var(--color-ink, #1c1815);--ink-soft: var(--color-ink-soft, #5a5047);--line: var(--color-line, #ddd2be);--line-2: #c9bfac;--accent: #b5462f;--radius: 14px;max-width:980px;margin:0 auto;padding:30px 22px 64px;font-family:var(--font-body);background:radial-gradient(900px 480px at 92% -12%,rgba(181,70,47,.07),transparent 60%);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}.colors-studio *,.colors-studio *:before,.colors-studio *:after{box-sizing:border-box}.colors-studio button,.colors-studio input,.colors-studio select{font:inherit}.colors-studio button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.colors-studio :focus-visible{outline:2px solid var(--accent);outline-offset:3px}.top{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}.brandmark{font-family:var(--font-display);font-weight:600;font-size:clamp(25px,4vw,31px);letter-spacing:-.02em;line-height:1}.brandmark em{font-style:italic;color:var(--accent)}.tagline{font-size:13px;color:var(--ink-soft);max-width:420px;margin:8px 0 0}.kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.presets{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.p-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px}.dot{width:23px;height:23px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:var(--preset);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.dot:hover{transform:translateY(-1px) scale(1.08);box-shadow:0 5px 14px #1c18151f}.btn{min-height:38px;padding:0 14px;border:1px solid var(--line-2);background:#fff;border-radius:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;cursor:pointer;color:var(--ink);transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}.colorbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:22px}.ctab{display:flex;align-items:center;gap:8px;min-height:39px;padding:0 13px 0 11px;border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);transition:border-color .14s ease,box-shadow .14s ease,color .14s ease,transform .14s ease}.ctab:hover{border-color:var(--line-2);transform:translateY(-1px)}.ctab.active{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 2px #1c1a1712}.ctab .chip{width:15px;height:15px;border-radius:5px;border:1px solid rgba(0,0,0,.12);flex:none}.ctab.add{color:var(--ink-soft);font-size:15px;padding:0 15px;justify-content:center}.editor{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-top:14px;border:1px solid var(--line);background:#ffffffc7;border-radius:13px;padding:12px 13px;box-shadow:0 10px 30px #1c181508}.hexfield{display:flex;flex-direction:column;gap:5px}.hexgroup{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff}.hexgroup.invalid{border-color:#a43d2e;box-shadow:0 0 0 2px #a43d2e14}.swatch-input{width:44px;height:40px;border:0;padding:0;cursor:pointer;background:transparent}.swatch-input::-webkit-color-swatch-wrapper{padding:4px}.swatch-input::-webkit-color-swatch{border:0;border-radius:7px}.hexin{border:0;outline:0;font-family:var(--font-mono);font-size:14px;width:102px;padding:0 10px;height:40px;background:transparent;color:var(--ink);text-transform:uppercase}.field-status{min-height:14px;font-size:11px;color:#8f3529}.fieldwrap{display:flex;align-items:center;gap:8px;min-height:40px}.fieldwrap label,.ck-row label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.namein{border:1px solid var(--line-2);border-radius:10px;height:40px;padding:0 12px;font-family:var(--font-mono);font-size:13px;outline:0;background:#fff;color:var(--ink);width:136px}.hexgroup:focus-within,.namein:focus{border-color:var(--accent)}.editor .spacer{flex:1}.editor .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:1px}.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:#fff;border-radius:10px;cursor:pointer;color:var(--ink-soft);font-size:17px;line-height:1;transition:border-color .15s ease,color .15s ease}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 12px;gap:14px;flex-wrap:wrap}.section-head-tight{margin-bottom:0}.section-head h2{font-family:var(--font-display);font-weight:600;font-size:19px;margin:0;letter-spacing:-.01em}.section-head .hint{font-size:11.5px;color:var(--ink-soft);max-width:430px}.scale{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 12px 34px #1c181509}.stop{flex:1 1 0;min-width:0;position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;min-height:112px;padding:9px 8px;border:0;border-radius:0;text-align:left;transition:filter .12s ease,transform .12s ease}.stop:hover{filter:brightness(.96)}.stop .lvl{font-family:var(--font-mono);font-size:12px;font-weight:500}.stop .meta{font-family:var(--font-mono);font-size:9.5px;line-height:1.5;opacity:.92;white-space:nowrap}.stop .badge{display:inline-block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.03em;padding:1px 5px;border-radius:5px;border:1px solid currentColor;opacity:.82}.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mini-card{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffc7;padding:16px;min-width:0;box-shadow:0 10px 28px #1c181508}.mini-card-head h3{font-family:var(--font-display);font-size:17px;line-height:1.1;margin:0;letter-spacing:-.01em}.mini-card-head p{color:var(--ink-soft);font-size:12px;margin:6px 0 14px}.copy-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:9px 10px;cursor:pointer;text-align:left}.copy-row+.copy-row{margin-top:7px}.copy-row span:first-child{color:var(--ink-soft);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.copy-row span:last-child{font-family:var(--font-mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pair-list{display:grid;gap:8px}.pair-card{border:1px solid rgba(0,0,0,.09);border-radius:11px;min-height:54px;padding:10px;cursor:pointer;text-align:left}.pair-card strong{display:block;font-family:var(--font-display);font-size:15px;line-height:1.1}.pair-card span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:10px;opacity:.82}.empty-state{border:1px dashed var(--line-2);border-radius:11px;padding:13px;color:var(--ink-soft);font-size:12px}.gradient-preview{min-height:78px;border-radius:12px;border:1px solid rgba(0,0,0,.08);margin-bottom:12px}.gradient-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gradient-code{margin-top:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-action{margin-top:10px}.tabs{display:flex;gap:5px;margin:12px 0 0;flex-wrap:wrap}.tab{font-family:var(--font-mono);font-size:11.5px;padding:9px 13px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--paper-2);cursor:pointer;color:var(--ink-soft);min-height:38px}.tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.codewrap{position:relative;border:1px solid var(--line);border-radius:0 var(--radius) var(--radius) var(--radius);overflow:hidden;background:#161310;box-shadow:0 12px 34px #1c181509}pre{margin:0;padding:18px;overflow:auto;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:#e9e2d4;max-height:312px}.copyall{position:absolute;top:11px;right:11px;font-family:var(--font-mono);font-size:11px;padding:6px 12px;border:1px solid #443e34;background:#221e19;color:#e9e2d4;border-radius:8px;cursor:pointer}.copyall:hover{border-color:var(--accent);color:#fff}.tok-key{color:#e0a86b}.tok-val{color:#9fc7a6}.tok-cmt{color:#6f675a;font-style:italic}.tok-sel{color:#c98a7d}.checker{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:#ffffffc7;padding:20px;box-shadow:0 12px 34px #1c181509}.preview{border-radius:12px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:170px;border:1px solid rgba(0,0,0,.06)}.preview .big{font-family:var(--font-display);font-size:clamp(26px,5vw,34px);font-weight:600;line-height:1.05}.preview .small{font-size:13px;opacity:.95}.ck-controls{display:flex;flex-direction:column;gap:14px}.ck-row{display:flex;flex-direction:column;gap:6px}.colors-studio select{width:100%;font-family:var(--font-mono);font-size:13px;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}.colors-studio select:focus{outline:0;border-color:var(--accent)}.swap{align-self:flex-start}.ratio{font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1}.ratio small{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--ink-soft);margin-left:4px}.grades{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}.grade{font-family:var(--font-mono);font-size:10.5px;padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);display:flex;gap:6px;align-items:center}.grade b{font-weight:500}.pass{color:#1f6b3a;border-color:#bcdcc4;background:#eef7f0}.fail{color:#9a3322;border-color:#e6c4bc;background:#faeeea}.studio-foot{margin-top:40px;border-top:1px solid var(--line);padding-top:15px;font-size:11.5px;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:var(--color-ink, #1c1815);color:var(--color-paper, #f7f3ea);font-family:var(--font-mono);font-size:12px;padding:10px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:50}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:860px){.mini-grid,.checker{grid-template-columns:1fr}}@media(max-width:720px){.colors-studio{padding:24px 16px 52px}.top{align-items:flex-start}.presets{width:100%}.colorbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.ctab{flex:0 0 auto}.editor{display:grid;grid-template-columns:1fr}.hexgroup,.hexfield,.fieldwrap,.namein,.hexin{width:100%}.fieldwrap{align-items:flex-start;flex-direction:column;gap:6px}.editor .right{width:100%;display:grid;grid-template-columns:1fr 1fr 38px}.btn,.icon-btn{width:100%}.scale{overflow-x:auto;scrollbar-width:thin}.stop{flex:0 0 58px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tab{border:1px solid var(--line);border-radius:10px}.codewrap{border-radius:var(--radius)}.copyall{position:static;margin:12px 12px 0 auto;display:block}pre{padding-top:14px;max-height:280px}.checker{padding:15px}.preview{padding:20px}.gradient-controls{grid-template-columns:1fr}}@media(max-width:420px){.editor .right{grid-template-columns:1fr}.icon-btn{width:100%}.tabs{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.colors-studio *,.toast{transition:none!important;scroll-behavior:auto!important}}.colors-hub-section[data-astro-cid-ocvyovdk]{padding:clamp(48px,7vw,86px) clamp(16px,4vw,30px);border-top:1px solid color-mix(in srgb,var(--color-line) 72%,transparent);background:radial-gradient(720px 360px at 92% 0%,rgba(240,80,46,.045),transparent 64%),linear-gradient(180deg,#fbf8f27a,#f7f3ea00)}.colors-hub-panel[data-astro-cid-ocvyovdk]{width:min(100%,1060px);margin:0 auto;border:1px solid var(--color-line);border-radius:28px;background:color-mix(in srgb,var(--color-panel) 90%,white 10%);box-shadow:0 20px 60px #1c18150e;padding:clamp(24px,4vw,36px);overflow:hidden}.colors-hub-header[data-astro-cid-ocvyovdk]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,4vw,44px);align-items:end}.colors-hub-copy[data-astro-cid-ocvyovdk]{max-width:660px}.colors-hub-kicker[data-astro-cid-ocvyovdk]{margin:0 0 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-coral)}.colors-hub-copy[data-astro-cid-ocvyovdk] h2[data-astro-cid-ocvyovdk]{margin:0;max-width:650px;font-family:var(--font-display);font-size:clamp(36px,5vw,60px);line-height:.97;letter-spacing:-.045em;color:var(--color-ink)}.colors-hub-copy[data-astro-cid-ocvyovdk] p[data-astro-cid-ocvyovdk]:last-child{max-width:600px;margin:15px 0 0;color:var(--color-ink-soft);font-size:clamp(15px,1.8vw,17px);line-height:1.58}.colors-hub-meta[data-astro-cid-ocvyovdk]{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;max-width:280px}.colors-hub-meta[data-astro-cid-ocvyovdk] span[data-astro-cid-ocvyovdk]{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid color-mix(in srgb,var(--color-line) 90%,transparent);border-radius:999px;background:#ffffff9e;color:var(--color-ink-soft);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;white-space:nowrap}.colors-hub-steps[data-astro-cid-ocvyovdk]{margin-top:clamp(24px,4vw,34px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.colors-hub-steps[data-astro-cid-ocvyovdk] div[data-astro-cid-ocvyovdk]{min-width:0;border:1px solid color-mix(in srgb,var(--color-line) 82%,transparent);border-radius:18px;background:#ffffff7a;padding:14px 15px}.colors-hub-steps[data-astro-cid-ocvyovdk] span[data-astro-cid-ocvyovdk]{display:block;margin-bottom:7px;color:var(--color-coral);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em}.colors-hub-steps[data-astro-cid-ocvyovdk] strong[data-astro-cid-ocvyovdk]{display:block;color:var(--color-ink);font-family:var(--font-display);font-size:18px;line-height:1}.colors-hub-steps[data-astro-cid-ocvyovdk] p[data-astro-cid-ocvyovdk]{margin:7px 0 0;color:var(--color-ink-soft);font-size:12.5px;line-height:1.45}.colors-hub-divider[data-astro-cid-ocvyovdk]{margin-top:clamp(22px,4vw,34px);height:1px;background:color-mix(in srgb,var(--color-line) 88%,transparent)}.colors-hub-panel[data-astro-cid-ocvyovdk] .colors-studio{padding:clamp(20px,4vw,30px) 0 0;background:transparent}@media(max-width:860px){.colors-hub-header[data-astro-cid-ocvyovdk]{grid-template-columns:1fr;align-items:start}.colors-hub-meta[data-astro-cid-ocvyovdk]{justify-content:flex-start;max-width:none}}@media(max-width:640px){.colors-hub-section[data-astro-cid-ocvyovdk]{padding:34px 14px 58px}.colors-hub-panel[data-astro-cid-ocvyovdk]{border-radius:22px;padding:20px 16px 18px}.colors-hub-copy[data-astro-cid-ocvyovdk] h2[data-astro-cid-ocvyovdk]{font-size:clamp(34px,12vw,46px)}.colors-hub-steps[data-astro-cid-ocvyovdk]{grid-template-columns:1fr}}