.ct-action{margin:22px 0 0;font-family:var(--sans);font-size:16px;font-weight:700}
.ct-temperature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:980px}
.ct-temperature-grid article,.ct-harmonies article,.ct-workflow article{min-width:0;padding:18px 20px 22px;border:1.5px solid var(--rule);border-radius:16px}
.ct-temperature-grid h3,.ct-harmonies h3,.ct-workflow h3{margin:14px 0 7px}
.ct-temperature-grid p,.ct-harmonies p,.ct-workflow p{margin:0;font-size:16px;line-height:1.5}
.ct-depth-figure{margin:0}
.ct-depth-figure svg{display:block;width:100%;height:auto;border-radius:10px}
.ct-depth-figure figcaption{margin:8px 0 0;font:700 13px/1.35 var(--sans);color:var(--muted)}
.ct-harmonies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1040px}
.ct-harmonies article{display:flex;flex-direction:column}
.ct-harmonies h3{margin:0 0 12px}
.ct-harmony-visual{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;margin:0 0 16px}
.ct-mini-wheel{position:relative;width:150px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#f00 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#00f 240deg,#f0f 300deg,#f00 360deg)}
.ct-mini-wheel::before{content:"";position:absolute;inset:19%;border-radius:50%;background:var(--paper)}
.ct-mini-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ct-mini-wheel .ct-wheel-path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ct-mini-wheel circle{stroke:#14181b;stroke-width:3;filter:drop-shadow(0 0 2px #fff)}
.ct-mini-wheel--single .ct-wheel-center{position:absolute;inset:19%;display:grid;place-items:center;z-index:1;color:var(--ink);font:800 12px/1.1 var(--sans);letter-spacing:.05em;text-align:center;text-transform:uppercase;pointer-events:none}
.ct-harmonies .ct-hue-label{margin:8px 0 0;font:800 14px/1.35 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.ct-harmony-strip{display:flex;height:90px;overflow:hidden;border-radius:9px}
.ct-harmony-strip i{flex:1;background:var(--color)}
.ct-swatch-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:5px;color:var(--muted);font:700 12px var(--sans);text-align:center}
.ct-harmonies strong{font-family:var(--sans)}
.ct-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1050px}
.ct-workflow article>span{font:800 13px var(--sans);letter-spacing:.04em;color:var(--amber-dim)}
.ct-ratio-example{max-width:900px;margin:28px 0 0}
.ct-ratio-bar{display:flex;min-height:105px;border-radius:12px;overflow:hidden;font:800 14px/1.2 var(--sans);color:#fff;text-shadow:0 1px 3px #0008}
.ct-ratio-bar span{display:grid;place-items:center;padding:12px;text-align:center}
.ct-ratio-bar span:nth-child(1){width:60%;background:#325779}
.ct-ratio-bar span:nth-child(2){width:30%;background:#458a8e}
.ct-ratio-bar span:nth-child(3){width:10%;background:#dc742c}
.ct-ratio-example figcaption{margin-top:8px;font:600 14px/1.4 var(--sans);color:var(--muted)}
@media(max-width:850px){.ct-workflow,.ct-harmonies{grid-template-columns:1fr}}
@media(max-width:650px){.ct-temperature-grid{grid-template-columns:1fr}.ct-ratio-bar{font-size:12px}.ct-ratio-bar span:nth-child(3){padding:4px;writing-mode:vertical-rl}}
@media(max-width:390px){.ct-harmony-visual{grid-template-columns:120px minmax(0,1fr);gap:10px}.ct-mini-wheel{width:120px}.ct-harmony-strip{height:72px}}