*{box-sizing:border-box}:root{--ink:#222a43;--muted:#6f7890;--line:#e1e5ef;--indigo:#645ee8;--violet:#8d73ef;--mint:#16af8c;--coral:#ff765f;--panel:#fff;--shadow:0 18px 55px rgba(37,44,75,.12)}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#eff2f8}.app-shell{width:100vw;height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr);background:radial-gradient(circle at 5% 95%,rgba(22,175,140,.1),transparent 28%),radial-gradient(circle at 95% 4%,rgba(100,94,232,.13),transparent 30%),linear-gradient(135deg,#fafbfe,#eef1f7)}button,input{font:inherit}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(77,88,119,.12);backdrop-filter:blur(14px);z-index:5}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;font:800 13px Manrope,sans-serif;background:linear-gradient(145deg,var(--indigo),var(--violet));box-shadow:0 9px 22px rgba(100,94,232,.28)}.brand p,.kicker{margin:0;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--indigo)}h1,h2,p{margin-top:0}h1{font:800 20px/1.05 Manrope,sans-serif;margin:3px 0 0}.top-actions{display:flex;gap:8px}.button{border:0;border-radius:10px;padding:10px 15px;color:inherit;font-weight:700;cursor:pointer;transition:.2s transform,.2s box-shadow}.button:hover,.step-button:hover,.preset:hover,.quick-grid button:hover,.challenge-options button:hover{transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid rgba(100,94,232,.3);outline-offset:2px}.ghost{background:#efefff;color:#4b47cb}.ghost[aria-pressed=true]{background:var(--indigo);color:#fff}.quiet{background:#eef1f5;color:#5f687d}.small{padding:7px 10px;font-size:10px}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;padding:14px}.stage,.controls{min-height:0;border:1px solid rgba(91,103,134,.12);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}.stage{position:relative;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:linear-gradient(145deg,#fff,#f9faff)}.stage-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:19px 22px 8px;gap:16px}.stage-heading h2{font:800 clamp(17px,1.7vw,24px)/1.2 Manrope,sans-serif;margin:4px 0 0}.legend{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:4px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:3px;background:var(--mint)}.equation-card{justify-self:center;display:flex;align-items:center;gap:17px;padding:8px 18px;color:#697188;font:700 clamp(15px,1.5vw,21px) Manrope,sans-serif}.equation-card strong{color:#fff;padding:8px 16px;border-radius:12px;background:linear-gradient(135deg,#293451,#435079);box-shadow:0 8px 20px rgba(38,47,76,.18);font-size:1.12em}.chart-wrap{min-height:0;margin:5px 22px 12px;padding-top:29px;position:relative;display:grid;place-items:stretch}.direction{position:absolute;top:0;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.03em}.direction.left{left:0;color:#4e52c9}.direction.right{right:0;color:#16876e}.place-chart{min-height:175px;display:grid;grid-template-columns:repeat(4,minmax(62px,1fr)) 25px repeat(3,minmax(62px,1fr));grid-template-rows:62px minmax(90px,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#f7f8fc;box-shadow:inset 0 1px #fff}.place-label{display:grid;place-items:center;text-align:center;padding:8px 4px;border-right:1px solid var(--line);background:#eef0f7;color:#656e83;font-size:10px;font-weight:800}.place-label small{display:block;font-size:9px;font-weight:500;color:#929aad}.place-label.ones{background:#efefff;color:#4f4acb}.place-label.decimal{font:800 26px Manrope,sans-serif;color:#fff;background:#303a5e;border:0}.digit-slot{position:relative;display:grid;place-items:center;border-top:1px solid var(--line);border-right:1px solid var(--line);background:#fff}.digit-slot.ones{background:#fafaff}.digit-slot::after{content:"";width:44%;aspect-ratio:1;border:1px dashed #d9ddea;border-radius:12px}.decimal-slot{display:grid;place-items:center;border-top:1px solid #273150;color:#fff;background:#303a5e;font:800 34px Manrope,sans-serif}.digit{position:absolute;width:min(58px,72%);aspect-ratio:1;border-radius:17px;display:grid;place-items:center;color:#fff;font:800 clamp(25px,3vw,43px) Manrope,sans-serif;background:linear-gradient(145deg,var(--indigo),#817af2);box-shadow:0 11px 24px rgba(100,94,232,.27);animation:land .32s cubic-bezier(.2,.8,.2,1)}.digit.zero{background:linear-gradient(145deg,#a8afc1,#7f889e);box-shadow:0 8px 18px rgba(61,71,98,.16)}@keyframes land{from{transform:translateY(-8px) scale(.9);opacity:.35}to{transform:none;opacity:1}}.explanation-row{display:grid;grid-template-columns:1fr auto;gap:12px;margin:0 22px 18px}.movement,.power{border-radius:15px;padding:12px 14px}.movement{display:flex;align-items:center;gap:12px;border:1px solid #dfe4ef;background:#f7f9fc}.movement span{flex:none;color:#4b47cc;background:#ebeaff;border-radius:9px;padding:7px 10px;font-size:11px;font-weight:800}.movement p{margin:0;font-size:12px;color:var(--muted)}.power{min-width:150px;color:#fff;background:linear-gradient(135deg,#12987b,#19b692);display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:center}.power span{font-size:9px;text-transform:uppercase;letter-spacing:.11em}.power strong{grid-row:1 / span 2;grid-column:2;font:800 25px Manrope,sans-serif}.power small{font-size:9px;color:#d7fff5}.controls{overflow:hidden;display:flex;flex-direction:column}.control-section{padding:18px;border-bottom:1px solid #eceef4}.control-section.grow{flex:1}.section-title{display:flex;align-items:center;gap:9px;margin-bottom:13px}.section-title>span{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;color:var(--indigo);background:#efefff;font-size:10px;font-weight:800}.section-title h2{font:800 13px Manrope,sans-serif;margin:0}.section-title p{margin:1px 0 0;color:var(--muted);font-size:9px}.number-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:#fafbfe;color:var(--muted);font-size:10px;font-weight:700}.number-field input{width:125px;border:0;border-radius:8px;padding:7px 9px;background:#fff;color:var(--ink);font-weight:800;text-align:right;box-shadow:inset 0 0 0 1px #e1e5ee}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.preset,.quick-grid button,.challenge-options button{border:1px solid #e1e5ef;border-radius:10px;padding:9px 4px;background:#f7f8fb;color:#646d82;font-weight:700;font-size:10px;cursor:pointer;transition:.18s}.preset.active{border-color:#aaa6f4;color:#4d49ca;background:#efefff}.operation-display{display:grid;grid-template-columns:34px 1fr 34px;gap:8px;align-items:center}.step-button{height:34px;border:0;border-radius:10px;background:#eff0f6;color:#59637b;font-size:19px;font-weight:800;cursor:pointer}.operation-display output{padding:10px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--indigo),var(--violet));font:800 17px Manrope,sans-serif;text-align:center;box-shadow:0 8px 18px rgba(100,94,232,.22)}.shift-range{appearance:none;width:100%;height:5px;border-radius:6px;background:linear-gradient(90deg,var(--mint),#d8dde8 50%,var(--indigo));margin:19px 0 5px}.shift-range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--indigo);box-shadow:0 3px 9px rgba(42,50,79,.24);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:7px;color:#8e96a8}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.quick-grid button{padding:10px}.notice{margin:13px 18px 18px;padding:12px;display:grid;grid-template-columns:31px 1fr;gap:9px;border-radius:14px;background:#f1f9f7;border:1px solid #d8eee9}.notice>div{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--mint)}.notice p{margin:0}.notice strong{display:block;font-size:10px;color:#14735f}.notice span{display:block;font-size:9px;line-height:1.4;color:#668279;margin-top:2px}.challenge-panel{position:absolute;inset:auto 30px 30px 30px;max-width:650px;padding:15px;border:1px solid rgba(100,94,232,.2);border-radius:17px;background:rgba(255,255,255,.97);box-shadow:0 18px 50px rgba(34,42,70,.2);backdrop-filter:blur(14px);z-index:4}.challenge-panel[hidden]{display:none!important}.challenge-head>div{display:flex;align-items:center;justify-content:space-between;gap:16px}.challenge-head{display:flex;justify-content:space-between}.challenge-head>div{flex:1}.challenge-head span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:var(--indigo)}.challenge-head strong{font-size:9px;color:#168469;background:#def6ef;border-radius:99px;padding:4px 8px}.icon-button{border:0;background:transparent;color:#71798d;font-size:21px;cursor:pointer;margin:-6px -4px 0 10px}.challenge-panel>p{font:700 14px Manrope,sans-serif;margin:8px 0}.challenge-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.challenge-options button{font-size:12px}.challenge-options button.correct{background:#dff8ef;border-color:#7edabd;color:#0e765d}.challenge-options button.wrong{background:#fff0ed;border-color:#ffb3a7;color:#bd4f3f}.feedback{min-height:16px!important;margin:7px 0 3px!important;font:600 10px DM Sans,sans-serif!important;color:var(--muted)}.feedback.good{color:#11785e}.feedback.try{color:#c04e3d}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:920px){.workspace{grid-template-columns:minmax(0,1fr) 325px}.place-chart{grid-template-columns:repeat(4,minmax(48px,1fr)) 21px repeat(3,minmax(48px,1fr))}.control-section{padding:14px}.notice{margin:10px 14px 14px}}
@media(max-width:700px){.app-shell{grid-template-rows:56px minmax(0,1fr)}.topbar{padding:0 10px}.brand-mark{width:34px;height:34px;border-radius:10px;font-size:10px}.brand p{display:none}h1{font-size:15px}.button{padding:8px 9px;font-size:10px}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,57%) minmax(0,43%);gap:7px;padding:7px}.stage,.controls{border-radius:16px}.stage-heading{padding:9px 11px 3px}.stage-heading h2{font-size:12px}.kicker{font-size:8px}.legend{display:none}.equation-card{padding:3px 10px;gap:10px;font-size:13px}.equation-card strong{padding:5px 9px;border-radius:8px}.chart-wrap{margin:2px 8px 7px;padding-top:18px}.direction{font-size:7px}.place-chart{min-height:125px;grid-template-columns:repeat(4,minmax(38px,1fr)) 17px repeat(3,minmax(38px,1fr));grid-template-rows:42px minmax(70px,1fr);border-radius:12px}.place-label{padding:3px 1px;font-size:7px}.place-label small{font-size:6px}.place-label.decimal{font-size:18px}.decimal-slot{font-size:25px}.digit{width:min(42px,72%);border-radius:11px;font-size:23px}.explanation-row{margin:0 8px 8px;gap:6px}.movement,.power{padding:7px 8px;border-radius:10px}.movement{gap:6px}.movement span{padding:5px 6px;font-size:7px}.movement p{font-size:7px}.power{min-width:108px;gap:0 5px}.power span,.power small{font-size:6px}.power strong{font-size:17px}.controls{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}.control-section{padding:8px 10px}.control-section.grow{border-right:0}.section-title{margin-bottom:6px;gap:5px}.section-title>span{width:18px;height:18px;font-size:7px}.section-title h2{font-size:9px}.section-title p{font-size:6px}.number-field{display:block;padding:5px 6px;font-size:7px}.number-field input{width:100%;margin-top:3px;padding:5px;font-size:9px}.preset-grid{gap:3px;margin-top:5px}.preset{padding:5px 1px;font-size:7px}.operation-display{grid-template-columns:26px 1fr 26px;gap:4px}.step-button{height:27px;font-size:14px}.operation-display output{padding:6px 2px;font-size:10px}.shift-range{margin:12px 0 2px}.range-labels{font-size:5px}.quick-grid{gap:3px;margin-top:7px}.quick-grid button{padding:6px 2px;font-size:7px}.notice{grid-column:1 / -1;margin:0 8px 7px;padding:6px;grid-template-columns:24px 1fr;gap:6px}.notice>div{width:24px;height:24px;font-size:9px}.notice strong{font-size:7px}.notice span{font-size:6px}.challenge-panel{left:12px;right:12px;bottom:12px;padding:10px}.challenge-panel>p{font-size:10px;margin:5px 0}.challenge-options{gap:4px}.challenge-options button{padding:6px 2px;font-size:9px}.feedback{font-size:8px!important;margin:4px 0 2px!important}.small{padding:5px 7px;font-size:8px}}
@media(max-width:430px){.workspace{grid-template-rows:minmax(0,56%) minmax(0,44%)}.top-actions{gap:4px}.place-label{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.02em}.place-label small{display:none}.place-chart{grid-template-rows:40px minmax(67px,1fr)}.movement p{display:none}.power{min-width:99px}}
@media(min-width:701px) and (max-height:700px){.stage-heading{padding-top:11px}.chart-wrap{margin-bottom:7px}.place-chart{min-height:140px;grid-template-rows:48px minmax(75px,1fr)}.control-section{padding-top:11px;padding-bottom:11px}.section-title{margin-bottom:7px}.quick-grid{margin-top:9px}.notice{margin-bottom:10px}.explanation-row{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}