/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5.
   Experiment colors are data tokens; the academy chrome keeps the brand palette. */
.mx-color-lab{--lab-a:hsl(235 65% 58%);--lab-b:hsl(55 65% 58%);--lab-c:hsl(235 65% 25%);--lab-wheel:conic-gradient(from 0deg,hsl(0 65% 58%),hsl(60 65% 58%),hsl(120 65% 58%),hsl(180 65% 58%),hsl(240 65% 58%),hsl(300 65% 58%),hsl(360 65% 58%));padding-block:70px;scroll-margin-top:85px;color:var(--color-ink)}
.mx-color-lab *{min-width:0}.mx-color-lab>header{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.mx-lab-kicker{font:600 10px var(--font-mono);letter-spacing:.15em;color:var(--color-accent-text)}.mx-color-lab h2{font:600 clamp(36px,4.5vw,60px)/1.05 var(--font-display);letter-spacing:-.04em;margin-top:15px;overflow-wrap:anywhere}.mx-color-lab h2 em{font-family:var(--font-outlier);color:var(--color-accent-text)}.mx-color-lab>header>p{font-size:13px;color:var(--color-muted);line-height:1.8}
.mx-color-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--color-rule);border-radius:20px;overflow:hidden;background:var(--color-surface)}.mx-color-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:35px;background:var(--color-paper)}
.mx-color-wheel{position:relative;width:min(100%,290px);aspect-ratio:1;border-radius:50%;background:var(--lab-wheel);isolation:isolate}.mx-color-wheel::before{content:'';position:absolute;inset:20%;border-radius:50%;background:var(--color-paper);z-index:-1}.mx-color-wheel>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.mx-color-wheel path{stroke:var(--color-ink);stroke-width:1;fill:none;stroke-dasharray:3 5;opacity:.55}.mx-color-wheel circle{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:3}.mx-color-wheel>span{position:absolute;inset:40% 20%;text-align:center;font:9px/1.7 var(--font-mono);letter-spacing:.13em;color:var(--color-muted);pointer-events:none}
.mx-color-scene{position:relative;width:100%;height:175px;overflow:hidden;border-radius:10px;background:var(--lab-c);isolation:isolate}.mx-color-scene i{position:absolute;display:block}.mx-color-scene i:first-child{background:var(--lab-a);width:80%;height:200%;border-radius:50%;left:-20%;top:-70%;transform:rotate(-20deg)}.mx-color-scene i:nth-child(2){background:var(--lab-b);width:90px;height:90px;border-radius:50%;right:12%;top:20px}.mx-color-scene i:nth-child(3){border:1px solid var(--color-accent-ink);width:60%;height:60%;left:20%;top:20%;transform:rotate(-18deg);border-radius:50%}.mx-color-scene span{position:absolute;bottom:14px;left:15px;font:9px/1.5 var(--font-mono);letter-spacing:.08em;padding:7px 9px;background:var(--color-overlay);color:var(--color-accent-ink)}
.mx-color-controls{padding:36px;border-left:1px solid var(--color-rule)}.mx-color-controls legend{font-size:13px;margin-bottom:14px}.mx-harmony-options{display:flex;flex-wrap:wrap;gap:8px}.mx-harmony-options label{cursor:pointer;position:relative}.mx-harmony-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.mx-harmony-options span{display:flex;align-items:center;min-height:44px;padding:9px 13px;border:1px solid var(--color-rule);border-radius:30px;font-size:11px;white-space:nowrap}.mx-harmony-options input:checked+span{background:var(--color-accent-soft);color:var(--color-accent-text);border-color:var(--color-accent-text)}.mx-harmony-options input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:3px}.mx-harmony-options label:hover span{background:var(--color-surface-hover)}
.mx-color-explanation{font-size:13px;color:var(--color-ink-2);line-height:1.7;min-height:65px;margin:22px 0}.mx-color-range{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:20px}.mx-color-range output{color:var(--color-accent-text);font:11px var(--font-mono)}.mx-color-controls input[type=range]{display:block;width:100%;min-height:36px;accent-color:var(--color-accent-text);cursor:pointer}
.mx-color-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.mx-color-swatch{padding:0;text-align:left;cursor:pointer;background:transparent;border-radius:6px}.mx-color-swatch i{display:block;height:65px;border-radius:6px;background:var(--swatch);border:1px solid var(--color-rule)}.mx-color-swatch strong{display:block;font:11px var(--font-mono);margin-top:10px;color:var(--color-ink)}.mx-color-swatch small{display:block;font-size:10px;color:var(--color-muted);margin-top:5px}.mx-color-swatch:hover i{outline:2px solid var(--color-ink);outline-offset:2px}
.mx-color-note{font-size:10px;line-height:1.7;color:var(--color-muted);margin-top:20px}.mx-color-actions{display:flex;gap:10px;margin-top:22px}.mx-color-actions button{min-height:44px;padding:10px 20px;border-radius:24px;border:1px solid var(--color-rule);font-size:12px;cursor:pointer;white-space:nowrap}.mx-color-actions button:first-child{background:var(--color-accent);color:var(--color-accent-ink)}.mx-color-actions button:hover{filter:brightness(1.15)}.mx-color-actions button:active{translate:0 2px}.mx-color-controls>[role=status]{font-size:11px;line-height:1.6;color:var(--color-muted);margin-top:12px;min-height:35px}.mx-color-controls>a{font-size:12px;color:var(--color-accent-text);display:inline-flex;align-items:center;min-height:44px}.mx-color-credit{font-size:11px;color:var(--color-muted);line-height:2;margin-top:16px}.mx-color-credit a{color:var(--color-accent-text)}
.mx-color-lab :is(button,a,input[type=range]):focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
@media(max-width:767px){.mx-color-lab{padding-block:45px}.mx-color-lab>header{display:block}.mx-color-lab>header>p{margin-top:18px}.mx-color-workbench{grid-template-columns:minmax(0,1fr)}.mx-color-visual{padding:25px;gap:22px}.mx-color-wheel{max-width:240px}.mx-color-scene{height:140px}.mx-color-controls{border-left:0;border-top:1px solid var(--color-rule);padding:24px}.mx-color-explanation{min-height:0}.mx-harmony-options{gap:7px}.mx-harmony-options span{font-size:10px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.mx-color-lab *{transition:none!important}}