.color-wheel{--cw-ink: #2c2c2c;--cw-muted: #5f5a52;--cw-sage: #4f6b43;--cw-sage-dark: #3a4f33;--cw-sage-light: #eef3eb;--cw-line: #e4dccf;--cw-paper: #fbf8f3;--cw-surface: #ffffff;--cw-radius: 14px;--cw-font-body: "Inter", system-ui, sans-serif;--cw-font-serif: "Crimson Text", Georgia, serif;container-type:inline-size;margin:2.5rem 0;padding:clamp(1.25rem,4vw,2rem);background:var(--cw-paper);border:1px solid var(--cw-line);border-radius:calc(var(--cw-radius) + 4px);color:var(--cw-ink);font-family:var(--cw-font-body);font-size:1rem;line-height:1.5;scroll-margin-top:6rem}.color-wheel *,.color-wheel *:before,.color-wheel *:after{box-sizing:border-box}.color-wheel__header{margin-bottom:1.25rem}.color-wheel .color-wheel__title{margin:0 0 .35rem;font-family:var(--cw-font-serif);font-size:clamp(1.45rem,3.5vw,1.8rem);font-weight:600;line-height:1.2;color:var(--cw-ink)}.color-wheel__intro{margin:0;color:var(--cw-muted)}.color-wheel__layout{display:grid;gap:1.5rem}@container (min-width: 700px){.color-wheel__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}@container (max-width: 699px){.color-wheel__layout{display:flex;flex-direction:column}.color-wheel__stage{display:contents}.color-wheel__svg{order:1;max-width:300px}.color-wheel__panel{order:2}.color-wheel__controls{order:3;margin-top:0}.color-wheel__panel{padding:.85rem}.color-wheel__harmonies{gap:.35rem}.color-wheel__pill span{min-height:40px;padding:.3rem .75rem;font-size:.85rem}}.color-wheel__stage{min-width:0}.color-wheel__svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;overflow:visible;touch-action:manipulation}.color-wheel__cell{cursor:pointer;transition:fill .25s ease,opacity .15s ease}.color-wheel__cell:hover{opacity:.85}.color-wheel__cell--pure{stroke:transparent;stroke-width:3}.color-wheel__cell--pure:focus{outline:none}.color-wheel__cell--pure:focus-visible{stroke:var(--cw-ink)}.color-wheel__cell--pure[aria-checked=true]{stroke:var(--cw-surface)}.color-wheel__center{stroke:var(--cw-surface);stroke-width:3;transition:fill .25s ease}.color-wheel__shape{fill:#ffffff1f;stroke:var(--cw-ink);stroke-width:1.6;stroke-dasharray:4 3;stroke-linejoin:round;pointer-events:none}.color-wheel__marker{stroke:var(--cw-surface);stroke-width:2.5;filter:drop-shadow(0 1px 1.5px rgb(0 0 0 / .35));pointer-events:none}.color-wheel__marker--base{stroke:var(--cw-ink)}.color-wheel__controls{display:grid;gap:.9rem;margin-top:1.1rem}.color-wheel__field{min-width:0;margin:0;padding:0;border:0}.color-wheel__legend{padding:0;margin-bottom:.45rem;font-size:.9rem;font-weight:600;color:var(--cw-muted)}.color-wheel__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.color-wheel__option,.color-wheel__pill{position:relative;display:block;cursor:pointer}.color-wheel__option input,.color-wheel__pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.color-wheel__option span{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:.45rem .75rem;font-size:.92rem;font-weight:600;line-height:1.25;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius)}.color-wheel__option small{font-size:.78rem;font-weight:400;color:var(--cw-muted)}.color-wheel__pill span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;font-size:.9rem;font-weight:600;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:999px}.color-wheel__option input:checked+span,.color-wheel__pill input:checked+span{color:#fff;background:var(--cw-sage);border-color:var(--cw-sage)}.color-wheel__option input:checked+span small{color:#ffffffd9}.color-wheel__option input:focus-visible+span,.color-wheel__pill input:focus-visible+span{outline:3px solid var(--cw-sage);outline-offset:2px}.color-wheel__harmonies{display:flex;flex-wrap:wrap;gap:.45rem}.color-wheel__custom{position:relative;display:inline-flex;align-items:center;gap:.6rem;justify-self:start;min-height:44px;padding:.35rem 1rem .35rem .4rem;font-size:.92rem;font-weight:600;color:var(--cw-sage-dark);background:var(--cw-surface);border:1px dashed var(--cw-sage);border-radius:999px;cursor:pointer}.color-wheel__custom-swatch{width:2rem;height:2rem;border-radius:50%;background:var(--swatch, conic-gradient(#fdd835, #fb8c00, #e53935, #7b1fa2, #1e88e5, #43a047, #fdd835));box-shadow:inset 0 0 0 1px #00000026}.color-wheel__custom-input{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0;cursor:pointer}.color-wheel__custom:has(.color-wheel__custom-input:focus-visible){outline:3px solid var(--cw-sage);outline-offset:2px}.color-wheel--free .color-wheel__custom{border-style:solid;background:var(--cw-sage-light)}.color-wheel__panel{min-width:0;padding:1rem;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius)}.color-wheel__effect{margin:.8rem 0 0;font-size:.95rem;color:var(--cw-muted)}.color-wheel__colors-title{margin:1rem 0 .45rem;font-family:var(--cw-font-serif);font-size:1.15rem;font-weight:600}.color-wheel__colors{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.color-wheel__color{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:.7rem}.color-wheel__swatch{width:2.6rem;height:2.6rem;border-radius:10px;background:var(--swatch);box-shadow:inset 0 0 0 1px #00000024}.color-wheel__color-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}.color-wheel__color-name{font-weight:600;font-size:.95rem}.color-wheel__code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88rem;letter-spacing:.03em;color:var(--cw-muted);background:none;padding:0}.color-wheel__copy{min-height:40px;padding:.4rem .9rem;font:inherit;font-size:.85rem;font-weight:600;white-space:nowrap;color:var(--cw-sage-dark);background:var(--cw-sage-light);border:0;border-radius:999px;cursor:pointer}.color-wheel__copy:hover{background:#e0eadb}.color-wheel__copy:focus-visible,.color-wheel__shade-link:focus-visible{outline:3px solid var(--cw-sage);outline-offset:2px}.color-wheel__preview{margin:1rem 0 0}.color-wheel__preview .harmony-drawing{max-width:360px;margin:0 auto;overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px #00000014}.color-wheel__preview-caption{margin-top:.35rem;font-size:.82rem;color:var(--cw-muted);text-align:center}.color-wheel__shade-link{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;font-weight:600;color:var(--cw-sage-dark);text-decoration:underline;text-underline-offset:3px}.color-wheel__shade-link:after{content:"→";margin-left:.35rem;text-decoration:none}.color-wheel__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.color-wheel__copy--done{color:#fff;background:var(--cw-sage)}.color-wheel__privacy{margin:1rem 0 0;font-size:.82rem;color:var(--cw-muted)}@media(prefers-reduced-motion:reduce){.color-wheel__cell,.color-wheel__center{transition:none}}