:root{--ink:#30323a;--muted:#6d7079;--paper:#fffdf9;--line:#e8e4df;--aqua:#cef4f8;--pink:#fed3d9;--yellow:#fff06a;--red:#ef5444;--green:#c5ebd5;--violet:#d1cceb;--shadow:0 22px 58px rgba(48,50,58,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 8% 20%,rgba(206,244,248,.68),transparent 26rem),radial-gradient(circle at 92% 32%,rgba(254,211,217,.52),transparent 27rem),var(--paper);color:var(--ink);font-family:"Source Sans 3",sans-serif;margin:0;min-height:100vh}button,input,select{font:inherit}.topbar{align-items:center;background:rgba(255,253,249,.93);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:12px clamp(16px,4vw,52px)}.brand{align-items:center;color:inherit;display:flex;gap:11px;text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font:900 21px/1 Nunito,sans-serif}.brand small{color:var(--muted);font-size:11px;margin-top:3px}.back-link{background:#fdf0d7;border:1px solid #eadbbd;border-radius:999px;color:var(--ink);font:900 13px Nunito,sans-serif;padding:9px 15px;text-decoration:none}main{margin:auto;max-width:1240px;padding:40px clamp(12px,3vw,34px) 64px}.hero{margin:0 auto 24px;max-width:850px;text-align:center}.eyebrow,.panel-kicker,.teacher-eyebrow{color:#8a6924;font:900 12px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase}.hero h1{font:900 clamp(34px,5vw,58px)/1.05 Nunito,sans-serif;letter-spacing:-.04em;margin:7px 0 12px}.hero h1 em{color:#d66d86;font-style:normal}.hero p{color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.55;margin:0}.lab-shell{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);overflow:hidden}.lab-toolbar{align-items:center;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;padding:11px 15px}.mini-legend,.toolbar-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.mini-legend>span{align-items:center;background:#f8f7f4;border-radius:10px;display:flex;font-size:12px;font-weight:800;gap:6px;padding:6px 9px}.legend-chip{align-items:center;border:2px solid var(--ink);border-radius:50%;display:inline-flex;font:900 14px Nunito,sans-serif;height:25px;justify-content:center;width:25px}.positive{background:var(--yellow)}.negative{background:var(--red);color:#fff}.zero-pair{display:flex}.zero-pair b{align-items:center;border:1px solid var(--ink);border-radius:50%;display:flex;font:900 10px Nunito,sans-serif;height:21px;justify-content:center;width:21px}.zero-pair b:first-child{background:var(--yellow)}.zero-pair b:last-child{background:var(--red);color:#fff;margin-left:-5px}.toolbar-actions button{background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer;font:900 12px Nunito,sans-serif;padding:9px 11px}.toolbar-actions button:hover{background:var(--aqua)}.lab-layout{display:grid;gap:18px;grid-template-columns:300px minmax(0,1fr);padding:18px}.control-card,.model-card{border:1px solid var(--line);border-radius:19px}.control-card{align-self:start;background:linear-gradient(155deg,#fff,#fff9ef);padding:19px}.expression-controls{display:grid;gap:11px;margin-top:14px}.expression-controls label{display:grid;gap:5px}.expression-controls label>span{color:var(--muted);font-size:12px;font-weight:800}.expression-controls input,.expression-controls select{background:#fff;border:2px solid var(--line);border-radius:11px;color:var(--ink);font:900 18px Nunito,sans-serif;min-height:46px;padding:7px 11px;width:100%}.expression-controls input:focus,.expression-controls select:focus{border-color:#65bcc8;outline:3px solid rgba(85,185,199,.18)}.primary-action,.secondary-action{border-radius:11px;cursor:pointer;font:900 14px Nunito,sans-serif;min-height:44px;padding:9px 15px}.primary-action{background:var(--ink);border:1px solid var(--ink);color:#fff}.secondary-action{background:#fff;border:1px solid var(--line);color:var(--ink)}.control-card>.primary-action{margin-top:14px;width:100%}.input-help{color:var(--muted);font-size:11px;line-height:1.4;margin:8px 0 0}.idea-card{background:rgba(206,244,248,.58);border:1px solid #b9e3e8;border-radius:14px;margin-top:18px;padding:13px}.idea-card strong{font:900 13px Nunito,sans-serif}.idea-card p{color:#52636a;font-size:12px;line-height:1.48;margin:5px 0 0}.model-card{background:#fff;min-width:0;padding:20px}.step-head{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.step-head h2{font:900 clamp(19px,2.5vw,25px)/1.15 Nunito,sans-serif;margin:4px 0 0}.step-dots{display:flex;gap:5px;padding-top:5px}.step-dot{background:#e8e4df;border:0;border-radius:999px;height:8px;padding:0;width:22px}.step-dot.done{background:#86cfa2}.step-dot.active{background:#55b9c7;width:31px}.equation{font:900 clamp(32px,5vw,52px)/1 Nunito,sans-serif;letter-spacing:-.035em;margin:20px 0 7px;text-align:center}.step-explanation{color:var(--muted);font-size:15px;font-weight:700;line-height:1.45;margin:0 auto 15px;max-width:720px;min-height:44px;text-align:center}.chip-board{background:linear-gradient(90deg,rgba(255,240,106,.08),rgba(255,255,255,.85) 49%,rgba(239,84,68,.07));border:1px solid var(--line);border-radius:17px;display:grid;grid-template-columns:1fr 42px 1fr;min-height:300px;overflow:hidden}.board-half{padding:14px}.board-label{color:var(--muted);display:block;font:900 11px Nunito,sans-serif;letter-spacing:.07em;text-align:center;text-transform:uppercase}.chip-field{align-content:center;display:flex;flex-wrap:wrap;gap:11px;justify-content:center;min-height:245px;padding:13px}.board-divider{align-items:center;display:flex;justify-content:center;position:relative}.board-divider::before{border-left:2px dashed #d8d4ce;content:"";inset:13px auto;position:absolute}.board-divider span{background:#fff;border:1px solid var(--line);border-radius:50%;font:900 12px Nunito,sans-serif;padding:5px;position:relative;z-index:1}.chip{align-items:center;border:3px solid var(--ink);border-radius:50%;box-shadow:0 5px 0 rgba(48,50,58,.12);display:flex;font:900 25px Nunito,sans-serif;height:61px;justify-content:center;position:relative;transform:scale(0);width:61px}.chip.enter{animation:chipIn .35s cubic-bezier(.2,.9,.3,1.25) forwards}.chip.paired{animation:pairPulse 1s ease infinite alternate;opacity:.58}.chip.paired::after{background:var(--ink);content:"";height:3px;position:absolute;transform:rotate(-45deg);width:72px}.chip.removing{animation:removePulse .7s ease infinite alternate;opacity:.45}.chip.removing::after{color:#a92e3d;content:"×";font:900 54px/1 Nunito,sans-serif;position:absolute;text-shadow:0 1px #fff}.empty-chips{align-self:center;color:#a7a3a0;font-size:13px;font-style:italic}.step-actions{display:flex;gap:9px;justify-content:space-between;margin-top:15px}.step-actions button:disabled{cursor:default;opacity:.38}.step-actions .primary-action{min-width:160px}.result-banner{background:linear-gradient(135deg,var(--green),var(--aqua));border-radius:12px;color:#285143;font-weight:800;margin:12px auto 0;max-width:560px;padding:10px;text-align:center}.teacher-guide{align-items:start;background:linear-gradient(135deg,rgba(206,244,248,.5),rgba(253,240,215,.58));border:1px solid var(--line);border-radius:18px;display:grid;gap:18px;grid-template-columns:270px 1fr;margin-top:22px;padding:21px}.teacher-guide h2{font:900 22px/1.2 Nunito,sans-serif;margin:5px 0 0}.teacher-guide p{color:var(--muted);line-height:1.65;margin:0}footer{border-top:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;font-size:13px;gap:14px 22px;justify-content:center;padding:17px}footer a{color:inherit;text-decoration:none}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@keyframes chipIn{to{transform:scale(1)}}@keyframes pairPulse{to{filter:saturate(.45);transform:scale(.92)}}@keyframes removePulse{to{transform:scale(.88)}}.lab-shell:fullscreen,.lab-shell:-webkit-full-screen{background:var(--paper);border:0;border-radius:0;height:100vh;height:100dvh;overflow:auto}.lab-shell:fullscreen .lab-layout,.lab-shell:-webkit-full-screen .lab-layout{min-height:calc(100dvh - 70px)}
.chip-field.has-groups{align-content:center;align-items:stretch;gap:9px}.chip-group{align-items:center;background:rgba(255,255,255,.78);border:2px dashed #cfc9c1;border-radius:14px;display:flex;flex-direction:column;gap:7px;justify-content:center;min-height:82px;min-width:82px;padding:7px}.chip-group small{color:var(--muted);font:900 10px Nunito,sans-serif;letter-spacing:.03em}.group-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:126px}.group-chips i{color:var(--muted);font:900 22px Nunito,sans-serif}.chip.grouped{border-width:2px;box-shadow:0 3px 0 rgba(48,50,58,.11);font-size:16px;height:34px;width:34px}.chip.flipped{animation:chipFlip .7s ease forwards}@keyframes chipFlip{0%{transform:scale(0) rotateY(0)}55%{transform:scale(1.08) rotateY(100deg)}100%{transform:scale(1) rotateY(180deg)}}
@media(max-width:820px){main{padding:28px 9px 44px}.lab-layout{grid-template-columns:1fr}.control-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-card>.panel-kicker,.control-card>.input-help{grid-column:1/-1}.expression-controls{grid-column:1/-1;grid-template-columns:1fr 1.15fr 1fr;margin-top:0}.control-card>.primary-action{align-self:end;margin:0}.idea-card{margin:0}.chip-board{min-height:260px}.chip-field{min-height:205px}.teacher-guide{grid-template-columns:1fr}}
@media(max-width:560px){.brand small{display:none}.back-link{font-size:11px;padding:8px 10px}.lab-toolbar{align-items:stretch;flex-direction:column}.mini-legend{justify-content:center}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.control-card{display:block}.expression-controls{grid-template-columns:1fr}.control-card>.primary-action{margin-top:12px}.idea-card{margin-top:14px}.model-card{padding:15px 10px}.chip-board{grid-template-columns:1fr 30px 1fr}.board-half{padding:9px 4px}.chip-field{gap:7px;padding:8px}.chip{border-width:2px;font-size:19px;height:46px;width:46px}.chip.paired::after{width:52px}.step-actions .primary-action{min-width:0}.teacher-guide{padding:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}