:root{font-family:system-ui,sans-serif;color:#203f46;background:#f7f5ef}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #176aad;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4%;border-bottom:1px solid #ccd4cf}header a{color:inherit;text-decoration:none}button{border:1px solid #a9b9af;border-radius:8px;background:#fff;padding:10px 15px}main{max-width:1150px;margin:auto;padding:22px}h1{text-align:center;font-family:Georgia,serif;font-size:clamp(28px,4vw,40px);margin:8px}.intro{text-align:center;font-size:20px}.instructions{max-width:790px;margin:12px auto;line-height:1.6;text-align:center;color:#52645f}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:22px 0;gap:12px}#comparisons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.comparison{border:1px solid #bcc9bf;border-radius:16px;background:#fffefb;padding:18px;text-align:center}.comparison h2{font-size:14px;font-weight:500;color:#667b73;margin:0 0 14px}.tray,.equation{display:flex;justify-content:center;align-items:center;gap:12px}.tray{min-height:74px;margin-bottom:18px}.tile,.home,.slot{width:68px;height:68px;border-radius:8px;flex-shrink:0}.tile{font-size:24px;font-weight:700;border:2px solid #677b70;touch-action:none;user-select:none;padding:0}.positive{background:#d7efd6}.negative{background:#f9d8dc}.zero{background:#e6eaf0}.selected{outline:4px solid #387bb9;outline-offset:3px}.home{border:1px dashed #c3cec5;display:grid;place-items:center}.slot{padding:0;border:2px dashed #92a398;background:#f2f3ef;display:grid;place-items:center}.slot:has(.tile){border:0}.symbol{font-size:40px;width:36px}.feedback{min-height:24px;margin:16px 0 0;font-weight:700;color:#365f46}.wrong .tile{outline:3px solid #c9444e}.wrong .feedback{color:#a52a39}.correct .tile{border-color:#28804b;box-shadow:0 0 0 2px #61b979,0 0 16px #54b87765}.tile:disabled{cursor:default;color:#203f46}.footnote{text-align:center;color:#64776d;font-size:14px;margin-top:24px}#number-line{background:white;border:1px solid #bdcec3;border-radius:12px;padding:14px;margin-bottom:20px}#number-line p{margin:4px 0 12px}.line-scroll{overflow:auto;padding:20px 8px 8px}.ticks{display:flex;min-width:1050px;border-top:3px solid #536c60}.tick{flex:1;text-align:center;position:relative;font-size:12px;padding-top:12px}.tick:before{content:'';height:9px;width:1px;background:#536c60;position:absolute;top:0;left:50%}.tick.origin{font-weight:800;color:#144b90}.line-note{font-size:13px;color:#66776c;margin-top:12px!important}#celebration{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;background:#f5fff0b8;color:#218245;font-size:clamp(42px,10vw,110px);font-weight:900;text-shadow:0 3px 0 white;z-index:20}#celebration[hidden],[hidden]{display:none!important}.drag-ghost{position:fixed;z-index:30;pointer-events:none;transform:translate(-50%,-50%);opacity:.9}.skip{position:fixed;top:-100px}.skip:focus{top:0;background:white;padding:12px;z-index:50}@media(max-width:900px){#comparisons{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){#comparisons{grid-template-columns:1fr}main{padding:16px}header span{display:none}.comparison{padding:16px}.instructions{font-size:14px}}@media(prefers-reduced-motion:no-preference){.correct .tile{transition:box-shadow .2s}}
