.color-hero{background:var(--silver-canvas);border-bottom:1px solid var(--silver-line);padding:36px 0 32px}.color-hero h1{letter-spacing:-.048em;margin-bottom:20px;font-size:clamp(40px,4.65vw,66px);font-weight:800;line-height:1.02}.color-hero h1 span{color:var(--silver-violet)}.color-hero p{color:var(--silver-muted);max-width:680px;font-size:18px}.color-body{padding-top:32px;padding-bottom:32px}.color-panel{border:1px solid var(--silver-line);background:#fff;border-radius:8px;min-width:0;padding:28px}.color-panel h2{margin-bottom:16px;font-size:22px}.color-toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.color-choose{background:var(--silver-violet);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:100px;justify-content:center;align-items:center;min-height:44px;padding:10px 24px;font-size:14px;font-weight:600;display:inline-flex}.color-choose:hover{background:var(--silver-violet-hover)}.color-choose-loaded,.color-choose-loaded:hover{color:var(--silver-violet-text);font-weight:400;font-size:inherit;background:#fff;border-color:#858ba3;padding:10px 16px}#color-file:focus-visible+.color-choose{outline:3px solid var(--silver-violet-text);outline-offset:5px}#color-file:disabled+.color-choose{background:var(--silver-line);color:var(--silver-muted);cursor:not-allowed}.color-panel input{font:inherit;color:var(--silver-ink);min-width:0;max-width:100%}.color-quiet,.color-copy{min-height:44px;color:var(--silver-violet-text);font:inherit;cursor:pointer;background:#fff;border:1px solid #858ba3;border-radius:100px;padding:10px 16px}.color-help{color:var(--silver-muted);overflow-wrap:anywhere;margin-top:12px;font-size:14px}.color-workspace{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:24px;margin-top:24px;display:grid}.color-view,.color-selection{min-width:0}.color-selection{border:1px solid var(--silver-line);border-radius:8px;padding:20px}.color-stage{background:var(--silver-panel);border:1px solid var(--silver-line);border-radius:8px;justify-content:center;align-items:center;min-height:320px;padding:12px;display:flex}.color-stage p{text-align:center;color:var(--silver-muted);padding:24px}#color-target{cursor:crosshair;border:0;width:100%;max-width:100%;padding:0;line-height:0;display:block;position:relative}#color-preview{width:100%;height:auto;image-rendering:pixelated;display:block}#color-target,.color-swatch-frame{background-color:#f8f8fc;background-image:conic-gradient(#dfe2ed 25%, transparent 0 50%, #dfe2ed 0 75%, transparent 0);background-size:20px 20px}#color-marker{pointer-events:none;color:#fff;text-shadow:1px 1px #1b1d33,-1px -1px #1b1d33,1px -1px #1b1d33,-1px 1px #1b1d33;font:32px/1 Arial,sans-serif;position:absolute;transform:translate(-50%,-50%)}.color-panel fieldset{border:0;min-width:0;margin:16px 0;padding:0}.color-coordinate-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;display:grid}.color-coordinate-row label{color:var(--silver-muted);font-size:14px}.color-coordinate-row input{border:1px solid #858ba3;border-radius:5px;width:100%;min-height:44px;margin-top:6px;padding:8px;display:block}.color-swatch-frame{border:1px solid var(--silver-line);border-radius:8px;margin:20px 0;overflow:hidden}#color-swatch{height:76px}.color-value-row{margin-top:12px}.color-value-row label{color:var(--silver-muted);margin-bottom:4px;font-size:13px;display:block}.color-value-control{display:flex}.color-value-control input{background:var(--silver-panel);border:1px solid #858ba3;border-radius:5px 0 0 5px;width:100%;min-height:44px;padding:8px;font-size:14px}.color-copy{border-left:0;border-radius:0 5px 5px 0;font-size:14px}.color-actions{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.color-body button:disabled{cursor:not-allowed;opacity:.65}.color-error{color:var(--silver-error);margin-top:12px}.color-info{max-width:860px;padding-top:32px}.color-info h2{margin-bottom:8px}.color-info>p{color:var(--silver-muted);margin-top:12px}.color-info ol,.color-info ul{color:var(--silver-muted);margin:16px 0 0;padding-left:24px}.color-info li+li{margin-top:8px}.color-info a{color:var(--silver-violet-text);text-decoration:underline}.color-info details{border:1px solid var(--silver-line);border-radius:5px;margin-top:12px;padding:4px 16px}.color-info summary{cursor:pointer;align-content:center;min-height:44px;font-weight:650}.color-info details p{color:var(--silver-muted);padding-bottom:16px;font-size:15px}.color-body [hidden]{display:none}@media (width<=900px){.color-workspace{grid-template-columns:1fr}}@media (width<=700px){.color-panel{padding:23px}.color-selection{padding:16px}.color-hero h1{font-size:clamp(35px,8.8vw,58px)}}