/* Matrix composition: tap-to-build with two outcomes on one shared scale. */
.cmp-lab{--cmp-blue:#587cde;--cmp-violet:#8574cf;--cmp-pink:var(--plot-pink,#d63384);color:var(--ink);margin-top:24px;font-variant-numeric:tabular-nums}
.cmp-intro{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:20px}.cmp-eyebrow{display:block;font-size:.65rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--strong);margin-bottom:7px}.math-lab .cmp-intro h3{margin:0;font-size:clamp(1.25rem,2.6vw,1.8rem);letter-spacing:-.035em;line-height:1.15}.math-lab .cmp-intro p{margin:9px 0 0;line-height:1.5}.cmp-badge{white-space:nowrap;padding:6px 9px;border:1px solid var(--line);border-radius:6px;font-size:.65rem;color:var(--ink2)}
.cmp-lab button{font:inherit;cursor:pointer;color:var(--ink);background:var(--tile);border:1px solid var(--line);border-radius:10px;min-height:44px;padding:10px 13px}.cmp-lab button:focus-visible,.cmp-algebra summary:focus-visible{outline:3px solid var(--cmp-blue);outline-offset:3px}.cmp-builder{border:1px solid var(--line);border-radius:16px;background:var(--tile);padding:16px}.cmp-slots{display:flex;align-items:center;gap:10px}.cmp-slot{flex:1;display:flex;align-items:center;gap:10px;text-align:left;min-width:0}.cmp-slot[aria-pressed=true]{border-color:var(--cmp-violet);box-shadow:inset 0 0 0 1px var(--cmp-violet);background:color-mix(in srgb,var(--cmp-violet) 7%,var(--tile))}.cmp-slot-index{flex-shrink:0;white-space:nowrap;font-family:Georgia,serif;font-size:1.5rem;font-style:italic;color:var(--cmp-violet);opacity:.8}.cmp-slot small{display:block;font-size:.61rem;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}.cmp-slot strong{font-size:.83rem;display:block}.cmp-edit{margin-left:auto;color:var(--ink2)}.cmp-flow{color:var(--ink2);font-size:1.3rem}.cmp-lab .cmp-reverse{font-size:.71rem;display:flex;align-items:center;gap:7px}.cmp-reverse>span{font-size:1.2rem}.cmp-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.cmp-palette button{display:flex;gap:9px;align-items:center;text-align:left;padding:9px;min-height:65px}.cmp-palette button[aria-pressed=true]{background:var(--accent-ink);color:var(--accent);border-color:transparent}.cmp-op-symbol{font-size:1.3rem;width:24px;flex-shrink:0;text-align:center}.cmp-palette strong{display:block;font-size:.68rem}.cmp-palette small{display:block;font-size:.59rem;line-height:1.4;opacity:.75;margin-top:3px}
.cmp-stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px}.cmp-step-status{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:.73rem;line-height:1.4}.cmp-step-dot{width:7px;height:7px;border-radius:50%;background:var(--cmp-pink);flex-shrink:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--cmp-pink) 12%,transparent)}.cmp-complete{background:var(--strong)}.cmp-actions{display:flex;gap:7px;flex-shrink:0}.cmp-actions button{font-size:.72rem;padding:8px 12px}.cmp-lab .cmp-play{background:var(--accent-ink);color:var(--accent);border-color:transparent;min-width:110px}.cmp-play>span{margin-right:5px;font-size:.65rem}.cmp-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cmp-card{overflow:hidden;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--tile)}.cmp-card-heading{padding:15px 17px 0}.cmp-card-label{font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:700}.cmp-card h4{margin:6px 0 0;font-size:.92rem;font-weight:650;letter-spacing:-.015em}.cmp-card h4 span{padding:0 6px;color:var(--cmp-violet)}.cmp-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;overflow:visible;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--cmp-violet) 6%,var(--tile)),var(--tile));touch-action:pan-y}.cmp-grid{stroke:var(--line);stroke-width:.7;opacity:.65}.cmp-axis{stroke:var(--ink2);stroke-width:.95;opacity:.48}.cmp-axis-label{fill:var(--ink2);font:10px system-ui,sans-serif;text-anchor:middle;opacity:.8}.cmp-original{fill:var(--cmp-blue);fill-opacity:.045;stroke:var(--cmp-blue);stroke-width:1.5;stroke-dasharray:5 4}.cmp-warp-grid{stroke:var(--cmp-violet);stroke-width:.8;opacity:.15}.cmp-shape{fill:var(--cmp-pink);fill-opacity:.14;stroke:var(--cmp-pink);stroke-width:2;stroke-linejoin:round}.cmp-basis-one{stroke:var(--cmp-blue);stroke-width:3;stroke-linecap:round}.cmp-basis-two{stroke:var(--cmp-violet);stroke-width:3;stroke-linecap:round}.cmp-origin{fill:var(--ink2);stroke:var(--tile);stroke-width:1}.cmp-end-halo{fill:var(--cmp-pink);opacity:.13}.cmp-end{fill:var(--cmp-pink);stroke:var(--tile);stroke-width:2}.cmp-coordinate{fill:var(--cmp-pink);font:650 13px system-ui,sans-serif;paint-order:stroke;stroke:var(--tile);stroke-width:4px;stroke-linejoin:round}.cmp-card-result{padding:0 17px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.cmp-point-equation{display:flex;gap:9px;align-items:center;font-size:.82rem}.cmp-point-equation>span{color:var(--ink2)}.cmp-point-equation strong{font-size:.93rem;color:var(--cmp-pink)}.cmp-area{font-size:.65rem;color:var(--ink2);white-space:nowrap;border:1px solid var(--line);border-radius:6px;padding:4px 6px}.cmp-equation{display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--line);background:var(--hub-soft,var(--bg));padding:11px;font-size:.88rem;min-height:77px}.cmp-product-name{font-family:Georgia,serif;font-size:1.18rem;font-style:italic}.cmp-matrix{display:inline-grid;grid-template-columns:repeat(2,minmax(1.7em,1fr));gap:5px 12px;padding:3px 10px;position:relative;text-align:center;font-size:.8rem;line-height:1.4;vertical-align:middle;white-space:nowrap}.cmp-matrix:before,.cmp-matrix:after{content:'';position:absolute;top:0;bottom:0;width:5px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}.cmp-matrix:before{left:0;border-left:1.5px solid currentColor}.cmp-matrix:after{right:0;border-right:1.5px solid currentColor}.cmp-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin:14px 0 18px;color:var(--ink2);font-size:.62rem}.cmp-legend>span{display:flex;align-items:center;gap:7px}.cmp-legend i{display:inline-block;width:13px;height:9px;flex-shrink:0}.cmp-legend-original{border:1px dashed var(--cmp-blue)}.cmp-legend-result{border:1px solid var(--cmp-pink);background:color-mix(in srgb,var(--cmp-pink) 15%,transparent)}.cmp-legend .cmp-legend-point{width:6px;height:6px;border-radius:50%;background:var(--cmp-pink)}.cmp-insight{display:flex;align-items:center;gap:15px;border:1px solid color-mix(in srgb,var(--cmp-violet) 30%,var(--line));border-radius:13px;padding:17px;background:color-mix(in srgb,var(--cmp-violet) 5%,var(--tile));min-height:100px}.cmp-insight-mark{display:grid;place-items:center;font-size:2rem;font-family:Georgia,serif;width:40px;flex-shrink:0;color:var(--cmp-violet)}.cmp-insight strong{display:block;font-size:.9rem}.math-lab .cmp-insight p{font-size:.78rem;line-height:1.6;margin:5px 0 0}.cmp-algebra{margin:16px 0 0;font-size:.77rem}.cmp-algebra>summary{min-height:44px;padding:12px 0;cursor:pointer;font-weight:650;color:var(--ink2);width:fit-content}.cmp-factor-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:8px 0}.cmp-factor-list>div{display:flex;flex-direction:column;align-items:center;gap:12px;padding:13px;background:var(--hub-soft,var(--bg));border-radius:10px}.cmp-factor-list>div>span:first-child{font-size:.68rem}.math-lab .cmp-algebra p{font-size:.73rem;line-height:1.6}
@media(max-width:900px){.cmp-palette button{flex-direction:column;gap:6px;text-align:center}.cmp-palette small{font-size:.55rem}.cmp-palette strong{font-size:.65rem}.cmp-lab .cmp-reverse{font-size:0;min-width:44px;padding:9px}.cmp-reverse>span{font-size:1.4rem}.cmp-factor-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cmp-edit{display:none}.cmp-badge{display:none}.cmp-builder{padding:11px}.cmp-slots{gap:6px}.cmp-slot{gap:7px;padding:9px!important}.cmp-slot-index{font-size:1.2rem}.cmp-slot strong{font-size:.71rem}.cmp-slot small{font-size:.53rem}.cmp-flow{font-size:1rem}.cmp-palette{gap:5px;padding-top:11px;margin-top:11px}.cmp-palette button{padding:7px 3px;min-height:70px}.cmp-palette strong{font-size:.57rem}.cmp-palette small{display:none}.cmp-op-symbol{font-size:1.35rem}.cmp-stage-toolbar{align-items:start}.cmp-step-status{font-size:.66rem;max-width:140px;padding-top:10px}.cmp-actions{gap:5px}.cmp-actions button{font-size:.66rem;padding:8px}.cmp-lab .cmp-play{min-width:95px}.cmp-card-heading{padding:13px 12px 0}.cmp-card h4{font-size:.76rem;line-height:1.35}.cmp-card h4 span{padding:0 3px}.cmp-card-label{font-size:.54rem}.cmp-card-result{padding:0 10px 10px;flex-wrap:wrap;justify-content:center;gap:6px}.cmp-point-equation{font-size:.65rem;gap:5px}.cmp-point-equation strong{font-size:.75rem}.cmp-area{font-size:.59rem}.cmp-equation{gap:8px;padding:9px 6px;min-height:72px}.cmp-matrix{font-size:.68rem;gap:4px 8px;padding:3px 7px}.cmp-product-name{font-size:.93rem}.cmp-comparison{grid-template-columns:1fr;gap:12px}.cmp-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.cmp-card h4{margin:0;font-size:.86rem}.cmp-card-result{justify-content:space-between}.cmp-point-equation{font-size:.8rem}.cmp-point-equation strong{font-size:.9rem}.cmp-legend{font-size:.58rem;gap:8px 12px}.cmp-insight{padding:13px;gap:8px}.cmp-insight-mark{width:29px;font-size:1.7rem}.cmp-insight strong{font-size:.8rem}.math-lab .cmp-insight p{font-size:.73rem}}
@media(max-width:380px){.cmp-comparison{grid-template-columns:1fr}.cmp-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.cmp-card h4{margin:0}.cmp-card-result{justify-content:space-between}.cmp-svg{aspect-ratio:4/3}.cmp-edit{display:none}.cmp-stage-toolbar{flex-wrap:wrap}.cmp-step-status{max-width:none}.cmp-actions{margin-left:auto}}
@media(prefers-reduced-motion:no-preference){.cmp-lab button{transition:background-color .16s,border-color .16s,box-shadow .16s}.cmp-lab button:hover{border-color:var(--cmp-violet)}.cmp-lab button:active{transform:translateY(1px)}}