@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;600;700&display=swap');*{box-sizing:border-box}html,body,main,.screen{margin:0;width:100%;height:100%;overflow:hidden;font-family:Mitr,sans-serif;color:#173d5c}button{font-family:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/bridge-city-bg.png') center/cover}.hide{display:none!important}.center,.overlay{display:grid;place-items:center;background-image:linear-gradient(#087ab044,#063b6766),url('assets/bridge-city-bg.png')}.panel{border:5px solid white;border-radius:30px;background:#fffdf1f2;box-shadow:0 10px #267ca6,0 20px 40px #073e5d55}.intro{width:min(650px,92vw);padding:28px;text-align:center}.logo{font-size:72px;line-height:1}.tag,#kind{display:inline-block;padding:5px 16px;border-radius:99px;background:#f05e4a;color:white}.intro h1,.finish h1{margin:5px;font-size:clamp(40px,6vw,62px)}.primary{border:3px solid white;border-radius:15px;padding:10px 25px;background:linear-gradient(#56d979,#22a850);color:#fff;font-size:19px;font-weight:700;box-shadow:0 5px #17763b}.tutorial{position:relative;width:min(760px,94vw);min-height:480px;padding:24px 35px;text-align:center}.step-head{display:flex;justify-content:space-between}.dots{display:flex;gap:7px}.dots i{width:18px;height:18px;border-radius:50%;background:#b8d0db}.dots i.on{background:#ffb92e}.teacher{font-size:72px}.tutorial h2{margin:3px}.demo{margin:15px auto;padding:18px;border:4px solid white;border-radius:20px;background:#e8f7ff;font-size:clamp(28px,5vw,48px);font-weight:700}.tutorial p{min-height:58px;font-size:18px}header{position:absolute;z-index:5;top:8px;left:10px;right:10px;height:60px;display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border:4px solid white;border-radius:19px;background:#f7fff5ef;box-shadow:0 5px #267ca6}header button{border:0;border-radius:10px;background:white;padding:6px;font-size:18px}.progress{width:min(380px,35vw);text-align:center}.progress i{display:block;height:9px;border-radius:9px;background:#bfd4dc;overflow:hidden}.progress i span{display:block;width:8.33%;height:100%;background:linear-gradient(90deg,#52d874,#ffd141)}.bridge{position:absolute;top:82px;left:50%;transform:translateX(-50%);display:flex;gap:4px}.bridge i{width:34px;height:15px;border:3px solid white;border-radius:5px;background:#a9bec9;transform:skewY(-5deg)}.bridge i.done{background:#f15d45}.play{position:absolute;left:50%;top:120px;bottom:4%;transform:translateX(-50%);width:min(1400px,94vw);display:grid;grid-template-columns:1.15fr .8fr .7fr;gap:26px;align-items:center;padding:30px}.mission{text-align:center}.mission h2{margin:8px}.equation{padding:25px 15px;border:4px solid white;border-radius:22px;background:#e8f7ff;font-size:clamp(34px,5vw,64px);font-weight:700}.blank{display:inline-grid;place-items:center;min-width:1.6em;border:4px dashed #2d85aa;border-radius:14px;background:#fff}.transform{min-height:55px;margin-top:13px;padding:9px;border-radius:15px;background:#fff4d5;font-size:24px;font-weight:700;opacity:.35}.transform.show{opacity:1}.work{padding:20px;border:4px solid white;border-radius:23px;background:#fff8dd;box-shadow:0 7px #d69b2e;text-align:center}.work h3{margin-top:0}.move{padding:9px 18px;border:3px solid white;border-radius:14px;background:#ffb735;font-weight:700;box-shadow:0 5px #c87424}.work-line{min-height:55px;margin:14px 0;padding:10px;border-radius:13px;background:#fff;font-size:22px;font-weight:700}.answer{display:flex;justify-content:space-between;align-items:center}.answer b{display:grid;place-items:center;width:80px;height:58px;border:3px dashed #2d85aa;border-radius:13px;background:white;font-size:30px}aside{padding:18px;border:4px solid white;border-radius:23px;background:#eafff1;box-shadow:0 7px #389970;text-align:center}aside h3{margin-top:0}.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.keypad button{min-height:48px;border:3px solid white;border-radius:11px;background:#dcefff;color:#173d5c;font-size:20px;font-weight:700;box-shadow:0 4px #79a7bb}#erase{width:100%;margin-top:10px;padding:7px;border:2px solid white;border-radius:11px;background:#ffe3dc;color:#933e35}aside .primary{width:100%;margin-top:9px}.primary:disabled{filter:grayscale(1);opacity:.55}.toast{position:fixed;z-index:20;left:50%;top:48%;transform:translate(-50%,-50%);padding:12px 25px;border-radius:20px;background:white;font-weight:700;opacity:0}.toast.show{animation:toast 1s}.overlay{position:fixed;inset:0;width:100vw;height:100dvh;z-index:30;background-size:cover}.finish{padding:30px;text-align:center}@keyframes toast{20%,75%{opacity:1}}@media(max-width:950px){.play{grid-template-columns:1fr 1fr;grid-template-areas:'mission work' 'mission keys';gap:13px;padding:18px}.mission{grid-area:mission}.work{grid-area:work}aside{grid-area:keys}.equation{font-size:40px;padding:18px}}
@media(max-height:600px) and (orientation:landscape){header{height:45px;font-size:12px}.bridge{top:59px}.play{top:82px;bottom:2%;grid-template-columns:1.1fr .8fr .75fr;grid-template-areas:'mission work keys';padding:10px;gap:9px}.equation{font-size:32px;padding:10px}.mission h2{font-size:18px}.transform{min-height:38px;font-size:17px}.work,aside{padding:8px}.work h3,aside h3{font-size:15px;margin:0}.work-line{min-height:36px;margin:7px;font-size:16px}.keypad{gap:3px}.keypad button{min-height:31px}.teacher{font-size:42px}.tutorial{min-height:0;height:92vh;padding:10px}.demo{margin:7px;padding:8px}.tutorial p{min-height:35px;margin:5px}}
@media(max-width:600px) and (orientation:portrait){html,body,main,.screen{overflow:auto}.play{position:absolute;top:105px;bottom:auto;width:96vw;min-height:calc(100dvh - 115px);grid-template-columns:1fr;grid-template-areas:'mission' 'work' 'keys';padding:12px}.bridge{top:75px}.equation{font-size:34px}.tutorial{margin:12px;min-height:0}.progress{width:auto}header strong{max-width:100px;line-height:1.05}}