:root{color:#21445e;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#21445e;--blue:#3a9df5;--blue-dark:#2364b2;--mint:#83d379;--peach:#f87;--yellow:#ffd45f;--panel:#fff;--panel-soft:#f7fcff;--line:#d8ebf8;--shadow:0 18px 34px #4884a733;background:#dff4ff;font-family:Nunito,"Baloo 2",PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button{font:inherit}button:focus-visible{outline-offset:3px;outline:4px solid #3a9df552}.app-shell{background:linear-gradient(#dff5ff 0%,#eefaff 58%,#e8f7d5 100%);place-items:center;min-height:100svh;padding:20px;display:grid}.lesson-frame{aspect-ratio:16/10;background:var(--panel);width:min(96vw,1220px,147.2svh);box-shadow:var(--shadow);border:5px solid #16293a;border-radius:22px;grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:hidden}.topbar{border-bottom:2px solid var(--line);background:#eef9ff;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:74px;padding:12px 18px;display:grid}.icon-button,.round-nav,.page-dot,.page-tab,.big-action,.spin-button,.quiz-random-button,.tool-button,.choice-card,.color-swatch,.build-cell,.scene-view-button,.solid-view-card--button,.solid-chip{cursor:pointer;border:0}.icon-button{color:#fff;background:linear-gradient(#58b9ff 0%,#2c87e7 100%);border-radius:50%;place-items:center;width:48px;height:48px;display:inline-grid;box-shadow:inset 0 2px #ffffff73,0 5px 10px #3d8acd40}.lesson-title{min-width:0;color:var(--blue-dark);align-items:center;gap:12px;font-size:1.35rem;display:flex}.lesson-title strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lesson-title__number{color:#fff;background:var(--blue-dark);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:900;display:inline-grid;box-shadow:inset 0 2px #ffffff47}.page-tabs{align-items:center;gap:8px;display:flex}.page-tab{color:#35627f;background:#fff;border-radius:16px;min-width:54px;min-height:42px;padding:0 12px;font-size:1rem;font-weight:800;box-shadow:inset 0 0 0 2px #d9ecf8}.page-tab--active{color:#fff;background:linear-gradient(#57b9ff 0%,#2e8ae9 100%);box-shadow:inset 0 2px #fff6}.lesson-content{background:linear-gradient(#ffffffe6,#f8fcffd6),linear-gradient(135deg,#ffd45f24,#83d3791f);min-height:0;padding:18px}.lesson-page{height:100%;min-height:0}.lesson-footer{border-top:2px solid var(--line);background:#f8fcff;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:66px;padding:10px 18px;display:grid}.round-nav{color:#fff;background:linear-gradient(#5cbcff 0%,#3189e9 100%);border-radius:50%;place-items:center;width:52px;height:52px;display:inline-grid;box-shadow:inset 0 2px #ffffff6b,0 5px 10px #3a8ede3d}.round-nav:disabled{cursor:default;opacity:.42}.page-dots{justify-content:center;gap:13px;display:flex}.page-dot{background:#cad6e4;border-radius:50%;width:14px;height:14px;padding:0}.page-dot--active{background:var(--blue);width:18px}.intro-page{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;height:100%;display:grid}.intro-copy{align-content:center;align-self:stretch;gap:28px;padding-left:30px;display:grid}.intro-copy h1{color:#2364b2;text-shadow:0 4px #ffffffe6;max-width:7.5em;margin:0;font-size:3.25rem;line-height:1.05}.intro-actions{flex-wrap:wrap;gap:16px;display:flex}.big-action{color:#fff;border-radius:26px;justify-content:center;align-items:center;gap:12px;min-width:162px;min-height:72px;font-size:1.45rem;font-weight:900;display:inline-flex;box-shadow:inset 0 3px #ffffff73,0 8px 14px #6b7b892e}.big-action--start{background:linear-gradient(#ff9485 0%,#f06455 100%)}.big-action--build{background:linear-gradient(#8dda7f 0%,#58b966 100%)}.big-action--solid{background:linear-gradient(#8fc8ff 0%,#5596df 100%)}.hero-stage,.main-stage,.projection-stage,.quiz-stage,.builder-work,.solid-stage-panel,.solid-stage-wrap,.solid-side-panel,.solid-scene{min-width:0;min-height:0}.block-scene{border:2px solid var(--line);background:var(--panel-soft);border-radius:8px;width:100%;height:100%;overflow:hidden}.block-scene canvas{display:block}.block-scene--interactive{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.block-scene--interactive:active{cursor:grabbing}.webgl-fallback{background:linear-gradient(145deg,#ffffffdb,#f0f9ffe6),repeating-linear-gradient(30deg,#dceef9 0 1px,#0000 1px 38px);place-items:center;width:100%;height:100%;display:grid;position:relative}.webgl-fallback span{background:var(--cube-color);width:64px;height:64px;transform:translate(calc((var(--cube-x) - 1) * 56px + (var(--cube-y) - 1) * -18px), calc((1 - var(--cube-y)) * 30px + (1 - var(--cube-z)) * 58px)) rotate(-12deg) skewY(9deg);border-radius:8px;position:absolute;box-shadow:inset 10px 10px #fff3,inset -10px -10px #1c2f4114,0 10px 16px #2d536c29}.hero-stage{height:100%;padding:8px}.block-scene--hero{background:#f7fcff;border-color:#cbe7f9}.views-page{grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:16px;height:100%;display:grid}.views-stack,.projection-views,.builder-views{grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;min-height:0;display:grid}.view-card{border:2px solid var(--view-color);background:var(--view-soft);min-width:0;min-height:0;color:var(--view-color);border-radius:8px;grid-template-rows:auto auto minmax(0,1fr);place-items:center;padding:12px;display:grid}.view-card--compact{grid-template-rows:auto minmax(0,1fr);padding:10px}.view-card__title{justify-content:center;align-items:center;gap:8px;width:100%;font-size:1.18rem;font-weight:900;display:flex}.view-card__hint{color:#628099;font-size:.92rem;font-weight:700}.view-card__svg{width:100%;height:100%;min-height:0}.choice-badge{color:#fff;background:var(--view-color);border-radius:50%;place-items:center;width:30px;height:30px;font-weight:900;display:inline-grid}.view-card--selected,.view-card--correct{box-shadow:0 0 0 4px #3a9df52e}.view-card--wrong{box-shadow:0 0 0 4px #ff708633}.projection-page{grid-template-columns:minmax(0,1fr) 120px minmax(250px,.76fr);gap:14px;height:100%;display:grid}.projection-stage{display:grid;position:relative}.spin-button{color:#fff;background:linear-gradient(#ffd45f 0%,#f5a936 100%);border-radius:22px;justify-content:center;align-items:center;gap:10px;min-width:172px;min-height:58px;font-size:1.22rem;font-weight:900;display:inline-flex;position:absolute;bottom:20px;left:24px;box-shadow:inset 0 3px #ffffff6b,0 7px 12px #c0862d3b}.projection-arrows{place-self:center;width:100%;height:100%}.quiz-page{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:18px;height:100%;display:grid}.quiz-stage{position:relative}.quiz-feedback{color:#4c6a2a;opacity:0;background:#fff9ec;border:2px solid #ffdca8;border-radius:20px;justify-content:center;align-items:center;gap:8px;min-width:132px;min-height:54px;padding:0 16px;font-size:1.22rem;font-weight:900;transition:opacity .18s,transform .18s;display:inline-flex;position:absolute;bottom:18px;left:18px;transform:translateY(8px);box-shadow:0 8px 16px #58788f24}.quiz-feedback--show{opacity:1;transform:translateY(0)}.quiz-choices{grid-template-rows:auto minmax(0,1fr);gap:14px;min-width:0;min-height:0;display:grid}.quiz-random-button{color:#fff;background:linear-gradient(#8dda7f 0%,#58b966 100%);border-radius:16px;justify-content:center;align-items:center;gap:8px;min-width:112px;min-height:44px;font-size:1rem;font-weight:900;display:inline-flex;box-shadow:inset 0 2px #ffffff61,0 6px 11px #406f8f29}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:0;display:grid}.choice-card{background:0 0;border-radius:8px;min-width:0;min-height:0;padding:0}.choice-card .view-card{color:#3873b8;background:#fffdf8;border-color:#e8d7c8;height:100%}.choice-card--correct .view-card{background:#f1fbec;border-color:#68c75d}.choice-card--wrong .view-card{background:#fff1f3;border-color:#ff7b89}.builder-page{grid-template-columns:104px minmax(0,1fr) minmax(236px,.62fr);gap:14px;height:100%;display:grid}.builder-tools{align-content:start;gap:10px;min-height:0;display:grid}.tool-button{color:#fff;border-radius:8px;place-items:center;gap:4px;min-height:76px;font-size:.98rem;font-weight:900;display:grid;box-shadow:inset 0 2px #ffffff61,0 6px 11px #406f8f29}.tool-button--add{background:linear-gradient(#8edd80 0%,#59b967 100%)}.tool-button--remove{background:linear-gradient(#ffd264 0%,#f0a83a 100%)}.tool-button--clear{background:linear-gradient(#8fc8ff 0%,#5596df 100%)}.builder-work{grid-template-rows:minmax(0,1fr) 112px;gap:12px;display:grid}.builder-scene-wrap{min-width:0;min-height:0;position:relative}.scene-view-buttons{z-index:2;gap:8px;display:flex;position:absolute;top:10px;right:10px}.scene-view-button{min-width:58px;min-height:38px;color:var(--blue-dark);background:#ffffffeb;border-radius:14px;padding:0 12px;font-size:.96rem;font-weight:900;box-shadow:inset 0 0 0 2px #d7e9f7,0 5px 10px #3d749a24}.scene-view-button:active{transform:translateY(1px)}.scene-view-button--active{color:#fff;background:linear-gradient(#57b9ff 0%,#2e8ae9 100%);box-shadow:inset 0 2px #ffffff6b,0 0 0 4px #3a9df529,0 6px 12px #3d749a2e}.builder-controls{grid-template-columns:124px minmax(0,1fr);gap:12px;min-width:0;min-height:0;display:grid}.build-grid{background:#fff;border:2px solid #d7e9f7;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px;display:grid}.build-cell{aspect-ratio:1;color:#4f6b80;background:#edf6ff;border-radius:8px;place-items:center;min-width:0;min-height:0;font-size:1.16rem;font-weight:900;display:grid;box-shadow:inset 0 0 0 2px #d2e8f8}.build-cell--active{color:#fff;background:var(--blue);box-shadow:inset 0 2px #ffffff59,0 0 0 4px #3a9df52e}.color-palette{background:#fff;border:2px solid #d7e9f7;border-radius:8px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:10px;min-width:0;padding:10px;display:grid}.color-swatch{background:#f8fcff;border-radius:8px;place-items:center;min-width:0;min-height:0;display:grid;box-shadow:inset 0 0 0 2px #e1edf6}.color-swatch span{border-radius:8px;width:34px;height:34px;display:block;box-shadow:inset 0 2px #ffffff73,0 5px 10px #2b425424}.color-swatch--active{box-shadow:inset 0 0 0 3px var(--blue), 0 0 0 4px #3a9df52e}.solid-page{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) minmax(288px,.82fr);gap:14px;height:100%;min-height:0;display:grid}.solid-stage-panel,.solid-side-panel,.solid-picker{background:#ffffffdb;border:2px solid #d7e9f7;border-radius:8px}.solid-stage-panel{grid-template-rows:auto minmax(0,1fr);gap:12px;padding:12px;display:grid}.solid-stage-header{grid-template-columns:minmax(0,1fr);align-items:center;gap:12px;min-width:0;display:grid}.solid-stage-header h2{color:var(--blue-dark);margin:0 0 5px;font-size:1.86rem;line-height:1}.solid-stage-header p{color:#55768f;margin:0;font-size:1rem;font-weight:800;line-height:1.28}.solid-stage-wrap{position:relative}.solid-scene{border:2px solid var(--line);background:var(--panel-soft);border-radius:8px;width:100%;height:100%;overflow:hidden}.solid-scene canvas{display:block}.solid-scene--interactive{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.solid-scene--interactive:active{cursor:grabbing}.solid-fallback{background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--solid-color) 26%, #fff), transparent 34%), repeating-linear-gradient(30deg, #dceef9 0 1px, transparent 1px 38px), #f8fcff;place-items:center;width:100%;height:100%;display:grid}.solid-fallback span{border:4px solid var(--solid-accent);min-width:112px;min-height:112px;color:var(--solid-accent);background:var(--solid-color);border-radius:50%;place-items:center;font-size:1.35rem;font-weight:900;display:grid}.solid-side-panel{grid-template-rows:auto minmax(0,1fr);gap:12px;padding:12px;display:grid}.solid-explain{color:#6b4c28;background:#fff9ec;border-radius:8px;gap:5px;min-width:0;padding:12px 14px;display:grid;box-shadow:inset 0 0 0 2px #ffe2ad}.solid-explain span{color:#a46418;font-size:.88rem;font-weight:900}.solid-explain strong{color:#4e5f2b;font-size:1.08rem;line-height:1.2}.solid-explain p{color:#6f7b49;margin:0;font-size:.94rem;font-weight:800;line-height:1.28}.solid-view-stack{grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;min-height:0;display:grid}.solid-view-card{border:2px solid var(--view-color);min-width:0;min-height:0;color:var(--view-color);background:var(--view-soft);border-radius:8px;grid-template-rows:auto auto minmax(0,1fr);place-items:center;padding:9px;display:grid}.solid-view-card--button{width:100%;height:100%;font:inherit;text-align:center}.solid-view-card--active{box-shadow:0 0 0 4px #3a9df52e}.solid-view-card__title{width:100%;font-size:1.08rem;font-weight:900}.solid-view-card__hint{color:#628099;font-size:.84rem;font-weight:800;line-height:1.18}.solid-view-card__svg{width:100%;height:100%;min-height:0}.solid-picker{grid-column:1/-1;grid-template-columns:minmax(210px,.35fr) minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:12px;display:grid}.solid-picker__copy{color:#4f6b80;font-size:.98rem;font-weight:900;line-height:1.26}.solid-chip-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;min-width:0;display:grid}.solid-chip{color:#35627f;background:#fff;border-radius:8px;place-items:center;min-width:0;min-height:54px;padding:0 8px;font-size:1rem;font-weight:900;display:grid;box-shadow:inset 0 0 0 2px #d9ecf8}.solid-chip--active{color:#fff;background:linear-gradient(#57b9ff 0%,#2e8ae9 100%);box-shadow:inset 0 2px #fff6,0 0 0 4px #3a9df524}@media (width<=980px),(height<=690px){:root{font-size:14px}.app-shell{padding:10px}.lesson-frame{border-width:4px;border-radius:18px}.topbar{min-height:62px;padding:9px 12px}.icon-button{width:42px;height:42px}.page-tab{min-width:46px;min-height:36px;padding:0 8px}.lesson-content{padding:12px}.lesson-footer{min-height:58px;padding:8px 12px}.round-nav{width:46px;height:46px}.intro-copy{gap:18px;padding-left:16px}.intro-copy h1{font-size:2.55rem}.big-action{border-radius:20px;min-width:130px;min-height:58px}.views-page{grid-template-columns:minmax(0,1fr) minmax(220px,.82fr);gap:12px}.projection-page{grid-template-columns:minmax(0,1fr) 84px minmax(210px,.72fr);gap:10px}.spin-button{min-width:142px;min-height:50px;bottom:14px;left:16px}.builder-page{grid-template-columns:86px minmax(0,1fr) minmax(200px,.6fr);gap:10px}.tool-button{min-height:64px}.builder-work{grid-template-rows:minmax(0,1fr) 96px;gap:9px}.builder-controls{grid-template-columns:104px minmax(0,1fr);gap:9px}.color-swatch span{width:28px;height:28px}.solid-page{grid-template-columns:minmax(0,1fr) minmax(248px,.76fr);gap:10px}.solid-stage-panel,.solid-side-panel,.solid-picker{padding:9px}.solid-stage-header h2{font-size:1.5rem}.solid-stage-header p,.solid-picker__copy{font-size:.88rem}.solid-explain{padding:9px 10px}.solid-explain strong{font-size:.96rem}.solid-explain p,.solid-view-card__hint{font-size:.78rem}.solid-chip{min-height:46px;padding:0 5px;font-size:.9rem}}@media (width<=760px){.lesson-frame{aspect-ratio:auto;width:98vw;height:calc(100svh - 20px)}.lesson-content{overflow-y:auto}.lesson-page{height:auto;min-height:100%}.page-tabs{display:none}.intro-page,.views-page,.projection-page,.quiz-page,.builder-page,.solid-page{grid-template-columns:1fr}.solid-page{grid-template-rows:minmax(0,1fr) auto auto;min-height:760px}.projection-arrows{display:none}.builder-page{grid-template-rows:auto minmax(0,1fr) auto}.builder-tools{grid-template-columns:repeat(3,1fr)}.builder-views{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}.solid-side-panel{grid-template-rows:auto auto}.solid-view-stack{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}.solid-view-card{min-height:132px}.solid-picker{grid-column:auto;grid-template-columns:1fr}.solid-chip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.quiz-heading{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;display:grid}.quiz-heading h2{color:#6b3f2e;text-align:center;margin:0;font-size:2rem;line-height:1.1}.quiz-random-button{color:#fff;min-width:112px;min-height:44px;font:inherit;cursor:pointer;background:linear-gradient(#8dda7f 0%,#58b966 100%);border:0;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-size:1rem;font-weight:900;display:inline-flex;box-shadow:inset 0 2px #ffffff61,0 6px 11px #406f8f29}.quiz-feedback{padding:0 16px}@media (width<=980px),(height<=690px){.quiz-random-button{min-width:96px;min-height:38px}}@media (width<=760px){.quiz-heading{grid-template-columns:1fr;justify-items:stretch}}.quiz-page:not(.quiz-page--answered) .choice-grid .view-card__title span:not(.choice-badge){display:none}