.qt-game{min-height:100dvh;padding:68px 12px 20px;color:#243f5d;background:linear-gradient(180deg,#b8eff7,#d8f4fb 52%,#ede6ff)}.qt-page-heading{width:min(940px,calc(100% - 120px));margin:0 auto 12px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:center}.qt-page-heading p{margin:0 0 2px;color:#39748d;font-size:12px;font-weight:1000;letter-spacing:.18em}.qt-page-heading h1{margin:0;color:#fff;font-size:clamp(32px,4.7vw,56px);font-weight:1000;line-height:1;letter-spacing:-.05em;paint-order:stroke fill;text-shadow:0 3px 0 #568fa8,0 6px 0 #37738f,0 10px 18px #28566f52;-webkit-text-stroke:1px #2e687e}.qt-page-heading>span{display:block;margin-top:5px;color:#315f73;font-size:clamp(13px,1.6vw,17px);font-weight:850}.qt-stage{position:relative;isolation:isolate;width:min(1180px,100%);min-height:clamp(650px,calc(100svh - 188px),790px);margin:0 auto;overflow:hidden;border:6px solid #fff;border-radius:38px;background:#8be4ec;box-shadow:0 10px 0 #4f9fb8,0 24px 48px #31577d40;perspective:1200px}.qt-background{position:absolute;z-index:-3;inset:-2%;background:url(/games/grade-3/math/quadrilateral-transform-lab/assets/backgrounds/geometry-lab-bg.webp) 50%/cover no-repeat;transform:scale(1.025);animation:qt-lab-drift 26s ease-in-out infinite alternate}.qt-stage:after{position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(180deg,#ffffff10,transparent 37%,#123a6c24);content:""}.qt-prompt{position:absolute;z-index:28;top:16px;left:50%;display:flex;align-items:center;gap:12px;width:min(730px,calc(100% - 360px));min-height:88px;padding:10px 12px 10px 17px;transform:translateX(-50%);border:4px solid #fff!important;border-radius:24px!important;color:#283f68;background:#fffdf2!important;box-shadow:none!important}.qt-prompt-icon{display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;border-radius:16px;color:#fff;background:#6956c9}.qt-prompt-icon svg{width:29px;height:29px;stroke-width:3}.qt-prompt>div{min-width:0;flex:1}.qt-prompt>div>span{display:block;color:#8a427b;font-size:11px;font-weight:1000;letter-spacing:.11em}.qt-prompt h2{margin:2px 0 0;color:#283f68;font-size:clamp(18px,2.2vw,27px);font-weight:1000;line-height:1.13;letter-spacing:-.025em;text-shadow:none}.qt-prompt button{display:grid;flex:0 0 54px;width:54px;height:54px;place-items:center;cursor:pointer;border:3px solid #fff;border-radius:18px;color:#fff;background:#ee7b5d;box-shadow:none;touch-action:manipulation}.qt-prompt button svg{width:27px;height:27px;stroke-width:3}.qt-hud{position:absolute;z-index:27;top:24px;right:18px;display:grid;min-width:148px;padding:7px 10px;grid-template-columns:auto auto;gap:5px 8px;border-radius:17px;color:#42396f;background:#fffffff0;box-shadow:0 7px 16px #35597e35;font-size:12px;font-weight:1000}.qt-hud,.qt-score{align-items:center}.qt-score{display:flex;gap:4px;color:#986022}.qt-score svg{width:16px;height:16px;fill:#ffd75c;stroke:#bd7722}.qt-progress{display:grid;grid-column:1/-1;grid-template-columns:repeat(5,1fr);gap:4px}.qt-progress i{height:6px;border-radius:999px;background:#d8d9e5;box-shadow:inset 0 2px 2px #25335e1d}.qt-progress i.current{background:#55dbe5;box-shadow:0 0 0 2px #fff,0 0 8px #44dbea}.qt-progress i.done{background:linear-gradient(90deg,#ffd65f,#ff8f55)}.qt-streak{color:#6d59b8;text-align:right}.qt-rig{position:absolute;z-index:7;top:105px;left:50%;width:min(900px,calc(100% - 190px));aspect-ratio:3/2;transform:translateX(-50%)}.qt-rig-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.qt-frame{position:absolute;z-index:4;top:22%;left:18%;width:64%;height:47%;overflow:visible}.qt-frame-beam,.qt-frame-glow{fill:#50dcef24;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.qt-frame-glow{stroke:#67efff73;stroke-width:20}.qt-frame-beam{stroke:#eefcff;stroke-width:9}.qt-frame-correct .qt-frame-beam{stroke:#fff074}.qt-frame-wrong .qt-frame-beam{stroke:#ff9aa9}.qt-parallel-marks path,.qt-right-marks path{fill:none;stroke:#493d84;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.qt-shape-name{position:absolute;z-index:8;top:42%;left:50%;display:flex;min-height:48px;padding:8px 16px;transform:translate(-50%,-50%);align-items:center;gap:7px;border:3px solid #fff;border-radius:999px;color:#225946;background:#bcffbf;font-size:clamp(15px,2vw,22px);font-weight:1000;letter-spacing:.04em;white-space:nowrap}.qt-shape-name svg{width:22px;height:22px;stroke-width:4}.qt-control-dock{position:absolute;z-index:22;bottom:58px;left:50%;display:grid;width:min(760px,calc(100% - 250px));transform:translateX(-50%);grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.qt-station,.qt-test{position:relative;display:grid;min-width:0;min-height:84px;padding:8px 7px 7px;cursor:pointer;place-items:center;border:3px solid #fff;border-radius:19px;color:#263d63;background:linear-gradient(180deg,#fff7bc,#ffc55d);box-shadow:0 6px 0 #aa633d,0 10px 16px #233e5a4a;font-family:inherit;text-align:center;touch-action:manipulation}.qt-parallel-icon,.qt-station>svg{position:absolute;top:7px;left:8px;width:20px;height:20px;color:#7a4c9e;font-size:24px;font-weight:1000;line-height:18px}.qt-station>span:not(.qt-parallel-icon),.qt-test>span{align-self:end;color:#79548f;font-size:9px;font-weight:1000;letter-spacing:.1em}.qt-station strong{overflow:hidden;max-width:100%;color:#263d63;font-size:clamp(13px,1.55vw,17px);font-weight:1000;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.qt-station small,.qt-test small{display:flex;align-items:center;gap:3px;color:#6e526f;font-size:9px;font-weight:900}.qt-station small svg{width:11px;height:11px}.qt-station:hover:not(:disabled),.qt-test:hover:not(:disabled){transform:translateY(-3px)}.qt-station:active:not(:disabled),.qt-test:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 #aa633d}.qt-test{color:#fff;background:linear-gradient(180deg,#78e9bc,#26b980);box-shadow:0 6px 0 #147353,0 10px 16px #233e5a4a}.qt-test>svg{width:28px;height:28px;fill:#fff;stroke-width:3}.qt-test>span{color:#fff;font-size:13px}.qt-test small{color:#eafff6}.qt-station:disabled,.qt-test:disabled{cursor:default}.qt-prompt button:focus-visible,.qt-station:focus-visible,.qt-test:focus-visible{outline:5px solid #fff06c;outline-offset:3px}.qt-feedback{position:absolute;z-index:24;bottom:12px;left:50%;width:min(740px,calc(100% - 290px));min-height:34px;transform:translateX(-50%);color:#fff;text-align:center}.qt-feedback p{display:flex;margin:0;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:clamp(13px,1.55vw,17px);font-weight:1000;line-height:1.2;text-shadow:none;-webkit-text-stroke:0}.qt-feedback svg{width:19px;height:19px;color:#fff47a}.qt-mascot{z-index:12;right:2px;bottom:2%;width:clamp(126px,17vw,205px)}@keyframes qt-lab-drift{to{transform:translate3d(-.4%,.18%,0) scale(1.032)}}@media (max-width:1000px){.qt-prompt{width:min(760px,calc(100% - 36px))}.qt-hud{top:112px;right:15px}.qt-rig{top:122px;width:min(820px,calc(100% - 90px))}.qt-control-dock{width:min(720px,calc(100% - 170px))}.qt-feedback{width:min(700px,calc(100% - 170px))}.qt-mascot{right:-16px;bottom:0;width:142px}}@media (max-width:700px){.qt-game{padding:66px 5px 10px}.qt-page-heading{width:calc(100% - 78px);margin-bottom:9px}.qt-page-heading p{font-size:9px}.qt-page-heading h1{font-size:clamp(25px,7.2vw,34px);line-height:.96}.qt-page-heading>span{display:none}.qt-stage{min-height:max(calc(100svh - 126px),760px);border-width:4px;border-radius:25px}.qt-background{background-position:50%}.qt-prompt{top:10px;width:calc(100% - 18px);min-height:94px;gap:8px;padding:8px 8px 8px 11px;border-width:3px!important;border-radius:19px!important}.qt-prompt-icon{display:none}.qt-prompt>div>span{font-size:9px}.qt-prompt h2{font-size:clamp(14px,4.05vw,18px);line-height:1.16}.qt-prompt button{flex-basis:48px;width:48px;height:48px;border-radius:15px}.qt-hud{top:112px;right:8px;left:8px;min-width:0;padding:5px 8px;grid-template-columns:auto minmax(80px,1fr) auto;border-radius:13px;font-size:10px}.qt-progress{grid-column:2;grid-row:1}.qt-streak{grid-column:3}.qt-rig{top:142px;width:590px;max-width:none}.qt-frame{top:22%}.qt-frame-glow{stroke-width:15}.qt-frame-beam{stroke-width:7}.qt-parallel-marks path,.qt-right-marks path{stroke-width:5}.qt-shape-name{min-height:40px;padding:6px 11px;border-width:2px;font-size:13px}.qt-control-dock{right:93px;bottom:58px;left:8px;width:auto;transform:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.qt-station,.qt-test{min-height:70px;padding:6px 4px 5px;border-width:2px;border-radius:16px;box-shadow:0 5px 0 #94573a,0 8px 12px #233e5a42}.qt-test{box-shadow:0 5px 0 #147353,0 8px 12px #233e5a42}.qt-parallel-icon,.qt-station>svg{top:6px;left:6px;width:16px;height:16px;font-size:19px}.qt-station>span:not(.qt-parallel-icon),.qt-test>span{font-size:8px}.qt-station strong{font-size:clamp(11px,3.2vw,14px)}.qt-station small,.qt-test small{font-size:8px}.qt-test>svg{width:24px;height:24px}.qt-test>span{font-size:11px}.qt-feedback{top:500px;right:92px;bottom:auto;left:8px;width:auto;min-height:34px;transform:none}.qt-feedback p{display:inline-flex;padding:5px 8px;border-radius:10px;color:#263d63;background:#fffdf2e8;font-size:10px}.qt-mascot{right:-22px;bottom:1px;width:112px}}@media (max-width:390px){.qt-page-heading h1{font-size:24px}.qt-rig{top:146px;width:560px}.qt-control-dock{right:84px}.qt-mascot{width:103px}}@media (min-width:701px) and (max-height:760px){.qt-game{min-height:0;padding:5px 8px}.qt-page-heading{height:35px;margin:0 auto 3px}.qt-page-heading p,.qt-page-heading>span{display:none}.qt-page-heading h1{font-size:29px}.qt-stage{height:calc(100svh - 47px);min-height:620px;border-width:4px;border-radius:27px}.qt-prompt{top:8px;min-height:76px;padding-block:7px}.qt-prompt h2{font-size:16px}.qt-hud{top:91px}.qt-rig{top:84px;width:min(760px,calc(100% - 190px))}.qt-control-dock{bottom:49px}.qt-station,.qt-test{min-height:70px}.qt-feedback{bottom:7px}}@media (prefers-reduced-motion:reduce){.qt-background{animation:none;transform:scale(1.025)}.qt-station,.qt-test{transition:none!important}}