.cc-controls{grid-template-columns:1fr;align-items:start;gap:.75rem;display:grid}@media (width>=760px){.cc-controls{grid-template-columns:1fr 1fr auto auto}}.cc-control-row{align-items:center;gap:.5rem;display:flex}.cc-swatch{width:var(--control-h);height:var(--control-h);border:1px solid var(--border);border-radius:6px;flex:none}.cc-color-input{appearance:none;cursor:pointer;background:0 0;padding:0}.cc-color-input::-webkit-color-swatch-wrapper{padding:0}.cc-color-input::-webkit-color-swatch{border:none;border-radius:5px}.cc-color-input::-moz-color-swatch{border:none;border-radius:5px}.cc-hex-input{width:100%;min-width:0;font-family:var(--font-mono);text-transform:lowercase}.cc-swap-field{flex-direction:column;display:flex}.cc-swap-btn{height:var(--control-h);white-space:nowrap}.cc-size-select{width:100%;height:var(--control-h)}.cc-canvas-wrap{margin-top:.9rem;position:relative}.cc-canvas-wrap:fullscreen{background:var(--bg);justify-content:center;align-items:center;padding:.75rem;display:flex}#cc-canvas{width:100%;height:auto;display:block}.cc-canvas-wrap:fullscreen #cc-canvas{width:100%;height:100%}.cc-fullscreen-btn{z-index:3;border:1px solid var(--border);background:color-mix(in srgb, var(--bg-surface) 88%, transparent);width:2rem;height:2rem;color:var(--text);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:1.1rem;line-height:1;display:inline-flex;position:absolute;top:.55rem;right:.55rem}.cc-fullscreen-btn:hover,.cc-fullscreen-btn:focus-visible{border-color:var(--accent);outline:none}.cc-result-box{margin-top:.9rem}.cc-calc-table{border-collapse:collapse;width:100%;margin-top:.55rem;font-size:.92rem}.cc-calc-table th,.cc-calc-table td{border-top:1px solid var(--border);text-align:left;vertical-align:top;padding:.5rem .55rem}.cc-calc-table th{color:var(--text-dim);letter-spacing:.02em;text-transform:uppercase;font-size:.76rem;font-weight:700}.cc-calc-table td:first-child{width:11rem;color:var(--text-dim)}.cc-calc-table td.cc-row-old:first-child{color:#c99a5b;font-weight:600}.cc-calc-table td.cc-row-new:first-child{color:var(--accent);font-weight:600}.cc-calc-table td:nth-child(2){min-width:16rem;overflow-x:auto}.cc-calc-table td:last-child{white-space:nowrap;width:10rem}@media (width<=640px){.cc-calc-table{display:block;overflow-x:auto}}.cc-badge{border-radius:5px;margin-right:.3rem;padding:.12rem .45rem;font-size:.78rem;font-weight:700;animation:.22s both cc-badge-pop;display:inline-block}.cc-badge.pass{color:#22c55e;background:#22c55e38}.cc-badge.fail{color:#ef4444;background:#ef444438}.cc-cite{color:var(--text-dim);white-space:normal;font-size:.82rem;font-style:italic;font-weight:400}@keyframes cc-badge-pop{0%{opacity:0;transform:scale(.65)}55%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.cc-copy-btn{border:1px solid var(--border);background:var(--bg-surface);width:28px;height:28px;color:var(--text-dim);cursor:pointer;border-radius:5px;flex:none;justify-content:center;align-items:center;padding:0;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.cc-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--bg-surface))}.cc-copy-btn.cc-copied{color:#22c55e;background:color-mix(in srgb, #22c55e 10%, var(--bg-surface));border-color:#22c55e}.cc-rgb-hint{font-size:.72rem;font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.01em;min-height:1.1em;margin-top:.25rem;padding-left:.1rem}.cc-swatch-preview{border:1px solid var(--border);border-radius:10px;grid-template-columns:1fr 1fr;min-height:88px;margin-top:1rem;display:grid;overflow:hidden}.cc-swatch-panel{flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:1rem .75rem;transition:background-color .35s;display:flex}.cc-swatch-panel-hex{font-family:var(--font-mono);letter-spacing:.04em;font-size:.95rem;font-weight:700;transition:color .35s}.cc-swatch-panel-label{text-transform:uppercase;letter-spacing:.08em;opacity:.8;font-size:.65rem;font-weight:600;transition:color .35s}.cc-gauge-wrap{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;margin-top:1rem;padding:.8rem 1rem 2.2rem;overflow:visible}.cc-gauge-header{justify-content:space-between;align-items:baseline;margin-bottom:.65rem;display:flex}.cc-gauge-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700}.cc-gauge-value{font-size:1.35rem;font-weight:700;font-family:var(--font-mono);transition:color .35s}.cc-gauge-track-wrap{height:10px;position:relative;overflow:visible}.cc-gauge-track{opacity:.9;background:linear-gradient(90deg,#dd2c2c 0% 10%,#f2952c 10% 17.5%,#76a329 17.5% 30%,#2c9658 30% 100%);border-radius:5px;position:absolute;inset:0}.cc-gauge-needle{background:var(--text);z-index:2;border-radius:2px;width:3px;height:20px;transition:left .45s cubic-bezier(.34,1.56,.64,1);position:absolute;top:-5px;left:0%;transform:translate(-50%);box-shadow:0 1px 6px #00000059}.cc-gauge-ticks{position:absolute;inset:0;overflow:visible}.cc-gauge-tick{background:var(--bg);opacity:.55;width:1px;height:14px;position:absolute;top:-2px}.cc-gauge-tick-lbl{color:var(--text-dim);white-space:nowrap;pointer-events:none;font-size:.64rem;position:absolute;top:16px;left:50%;transform:translate(-50%)}.cc-gauge-zone-row{height:1rem;margin-top:1.5rem;position:relative}.cc-gauge-zone-lbl{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:.6rem;font-weight:600;position:absolute;top:0;transform:translate(-50%)}.cc-cvd-wrap{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem 1rem}.cc-cvd-header{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.65rem;font-size:.72rem;font-weight:700}.cc-cvd-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}@media (width<=560px){.cc-cvd-grid{grid-template-columns:repeat(2,1fr)}}.cc-cvd-cell{flex-direction:column;align-items:center;gap:.3rem;display:flex}.cc-cvd-mini{border:1px solid #80808026;border-radius:6px;justify-content:center;align-items:center;width:100%;height:52px;font-family:system-ui,sans-serif;font-size:1.4rem;font-weight:700;display:flex}.cc-cvd-cell-label{color:var(--text-dim);font-size:.65rem;font-weight:600}.cc-cvd-cell-cr{font-size:.64rem;font-family:var(--font-mono);color:var(--text-dim);align-items:center;gap:.2rem;display:flex}.cc-suggest-wrap{flex-direction:column;gap:.5rem;display:flex}.cc-suggest-pre{font-size:.82rem;font-weight:600}.cc-suggest-chips{flex-wrap:wrap;gap:.5rem;display:flex}.cc-suggest-chip{cursor:pointer;border:1px solid #8080804d;border-radius:8px;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:140px;padding:.45rem .7rem;transition:transform .15s,box-shadow .15s;display:flex}.cc-suggest-chip:hover{transform:translateY(-2px);box-shadow:0 4px 14px #00000040}.cc-suggest-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cc-suggest-chip-hex{font-family:var(--font-mono);font-size:.88rem;font-weight:700}.cc-suggest-chip-cr{opacity:.85;font-size:.72rem}