@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#203b3a;--muted:#75817b;--green:#316d64;--teal:#98c9bc;--orange:#f3a268;--paper:#f6f5f0;--cream:#fcfbf7;--line:#e4e6df;--mono:'DM Mono',monospace;--sans:'DM Sans','Noto Sans SC',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}.page-shell{max-width:1520px;margin:auto;padding:0 6.2%}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe3db}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:900;letter-spacing:-1px}.brand-dot,.footer-brand span{color:#e9965d}.brand-mark{width:29px;height:29px;background:var(--ink);border-radius:7px;display:grid;place-items:center;color:#fff;font-size:17px;position:relative;line-height:1}.brand-mark i{position:absolute;width:8px;height:8px;background:#f7ae74;right:-3px;top:-3px;border-radius:2px}.topbar-right{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:600}.grade-badge{background:#e5ebe3;color:#4c6c60;border-radius:30px;padding:8px 13px}.topbar-divider{height:17px;width:1px;background:#d6dbd3}.topbar-caption{color:#828a80}.intro{min-height:386px;display:grid;grid-template-columns:1fr .83fr;gap:55px;align-items:center;padding:41px 0 46px}.eyebrow,.section-kicker,.small-label,.card-label,.label-english,.live-badge,.workspace-aside,.tab-index,.intro-meta,.diagram-footer,.steps-header #step-counter,.art-label,.art-footnote{font-family:var(--mono)}.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:500;letter-spacing:1.5px;color:var(--green)}.eyebrow-line{width:24px;height:2px;background:#e79c67}.intro h1{font-size:clamp(39px,4.1vw,65px);line-height:1.32;letter-spacing:-3px;margin:17px 0 16px;font-weight:900}.intro h1 em{font-style:normal;color:var(--green);position:relative}.intro h1 em:after{content:'';position:absolute;left:2px;right:2px;bottom:-5px;height:7px;background:#f0bb83;border-radius:100%;transform:rotate(-2deg);opacity:.85}.intro p{font-size:14px;line-height:1.9;color:#6b7771;max-width:460px;margin:0}.intro-meta{color:#6b7970;font-size:11px;margin-top:24px;letter-spacing:.3px}.meta-icon{color:#dc9869;font-size:18px;vertical-align:-2px;margin-right:6px}.meta-sep{color:#b4c0b5;margin:0 10px}.intro-art{height:267px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:17px;padding:37px 24px 12px 40px}.intro-art:before{content:'';position:absolute;inset:2px 0 0 0;background:#e9eee7;border-radius:52% 48% 47% 53%/47% 54% 46% 53%;transform:rotate(-4deg)}.art-label{position:absolute;top:31px;right:30px;font-size:10px;color:#57746a;z-index:1}.art-label span{font-size:24px;vertical-align:-7px}.art-bar{position:relative;z-index:1;height:52px;display:flex;gap:5px}.art-bar span{display:block;background:#aacfc2;border:2px solid #729f90;border-radius:4px;box-shadow:0 4px 0 #c6d9cd}.art-bar-a span{width:30%;max-width:110px}.art-bar-a span:not(:first-child){background:#f3bd91;border-color:#dfa471;box-shadow:0 4px 0 #e7d2b4}.art-bar-b span{width:30%;max-width:110px}.art-difference{z-index:1;color:#ad7147;font-size:11px;font-weight:700;margin-left:35%;position:absolute;top:153px;white-space:nowrap}.art-difference b{font-size:23px;margin-left:5px}.art-star{position:absolute;z-index:1;right:48px;bottom:57px;font-size:36px;color:#d99464}.art-footnote{position:absolute;z-index:1;bottom:22px;left:44px;font-size:11px;color:#769084}.workspace{margin-top:5px}.workspace-heading,.explore-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section-kicker{color:#d28756;font-size:10px;font-weight:500;letter-spacing:1.5px}.workspace-heading h2,.explore-heading h2{font-size:26px;letter-spacing:-1px;margin:8px 0 0}.workspace-aside{font-size:10px;color:#8b988c;letter-spacing:.6px;padding-bottom:5px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.tab{height:55px;border:1px solid var(--line);border-radius:8px 8px 0 0;background:#eeefe9;color:#737f77;text-align:left;padding:0 18px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:12px;transition:background .2s,color .2s}.tab:hover{background:#e4eae3;color:var(--ink)}.tab.active{background:var(--ink);border-color:var(--ink);color:#fff}.tab-index{font-size:10px;opacity:.62}.tab-arrow{margin-left:auto;font-size:16px;opacity:.5}.lab-grid,.geometry-grid{display:grid;grid-template-columns:minmax(275px,.82fr) minmax(0,1.42fr);gap:12px;align-items:stretch}.controls-card,.visual-card,.guess-card,.steps-card{background:var(--cream);border:1px solid var(--line);border-radius:9px}.controls-card{padding:27px 28px 20px;display:flex;flex-direction:column}.card-label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:9px}.label-square{width:8px;height:8px;background:#e69c65;border-radius:2px}.label-english{margin-left:auto;color:#a6afa5;font-size:9px;letter-spacing:.7px}.problem-block{padding:25px 0 23px;border-bottom:1px solid var(--line)}.small-label{font-size:10px;font-weight:500;letter-spacing:.7px;color:#7a998a}.problem-text{font-size:17px;line-height:1.85;font-weight:600;margin:9px 0 0}.problem-text strong{color:var(--green);font-weight:800}.control-fields,.geometry-settings{padding-top:10px}.field{display:flex;justify-content:space-between;align-items:center;padding:13px 0;gap:10px;font-weight:700;font-size:13px}.field small{display:block;font-weight:400;color:#9aa59b;margin-top:4px;font-size:10px}.input-wrap{display:flex;align-items:center;justify-content:flex-end;min-width:100px;border:1px solid #d9e1d8;background:#fff;border-radius:5px;padding:0 10px;height:41px}.input-wrap:focus-within{outline:2px solid #91b9a8}.input-wrap input{width:65px;border:0;background:transparent;outline:0;font-size:16px;font-weight:800;color:var(--ink);text-align:right}.input-wrap b{font-size:11px;margin-left:4px;font-weight:500;color:#7e9285}.input-wrap select{border:0;background:transparent;color:var(--ink);font-weight:700;outline:0;cursor:pointer}.form-hint{min-height:34px;color:#819388;font-size:11px;line-height:1.5;margin:5px 0 0}.form-hint.error{color:#bd6d4a}.preset-area{margin-top:13px}.preset-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.preset-button{border:1px solid #dce5da;color:#4c7262;background:#f6faf4;border-radius:5px;font-size:11px;font-weight:600;padding:8px 11px}.preset-button:hover{background:#e0ede2}.controls-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:17px;display:flex;gap:9px;color:#89968a;font-size:10px;line-height:1.65}.lightbulb{font-size:15px;color:#dc9a66}.visual-card{padding:26px 30px 27px;min-height:480px;display:flex;flex-direction:column}.visual-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.visual-top h3{margin:9px 0 0;font-size:19px;letter-spacing:-.4px}.live-badge{color:#649a78;font-size:9px;letter-spacing:.7px;white-space:nowrap;border:1px solid #d7e8d9;background:#f4faf2;padding:8px 9px;border-radius:4px}.live-badge span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#79ba86;margin-right:5px}.diagram{flex:1;min-height:252px;display:flex;flex-direction:column;justify-content:center;gap:31px;padding:30px 3% 12px 1%;overflow:hidden}.bar-row{display:flex;align-items:center;gap:17px;min-width:0}.bar-name{width:25px;flex-shrink:0;font-size:14px;font-weight:800}.bar-main{min-width:0;flex:1}.bar-track{display:flex;gap:3px;max-width:100%;height:46px}.segment{position:relative;min-width:0;background:#a9d0c3;border:1px solid #85b7a4;box-shadow:0 3px 0 #dceae0;border-radius:3px;display:grid;place-items:center;color:#356b5a;font-size:11px;font-family:var(--mono);font-weight:500}.segment.extra{background:#f3bb91;border-color:#e4a775;box-shadow:0 3px 0 #f3e0cf;color:#ad6d43}.segment::after{content:'';position:absolute;inset:5px;border:1px dashed rgba(255,255,255,.5);pointer-events:none}.bar-under{height:23px;display:flex;align-items:end;color:#8b9b8e;font-size:10px;font-family:var(--mono)}.bar-under .extra-label{color:#b7764c;margin-left:auto;font-size:11px;font-weight:700}.bar-question{width:33px;text-align:right;font-size:19px;color:#a0a9a0;font-weight:700}.bar-question.revealed{color:#376e62;font-size:14px}.diagram-footer{border-top:1px solid #e8ebe4;display:flex;align-items:center;justify-content:space-between;color:#a0aa9f;font-size:9px;padding-top:16px;gap:10px}.legend{display:flex;gap:15px;color:#77897c}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:2px;display:inline-block}.legend-dot.teal{background:#9ecbb9}.legend-dot.orange{background:#f3b88a}.insight-box{display:flex;gap:13px;align-items:flex-start;background:#edf3ec;border:1px solid #e0eadf;border-radius:6px;padding:14px 16px;margin-top:19px;color:#547366}.insight-icon{color:#367568;font-size:19px;line-height:1}.insight-box p{font-size:12px;line-height:1.7;margin:0}.explore{margin:53px 0 70px}.explore-heading{margin-bottom:19px}.explore-icon{font-size:28px;color:#d99b69}.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guess-card,.steps-card{padding:26px 29px;min-height:253px}.guess-card h3{font-size:19px;margin:12px 0 25px}.guess-row{display:flex;gap:8px}.guess-row input{width:45%;height:46px;background:#fff;border:1px solid #dae1d7;border-radius:5px;padding:0 13px;outline:0;min-width:0}.guess-row input:focus{border-color:#6eab94}.dark-button{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:22px;border:0;border-radius:5px;background:var(--ink);color:#fff;padding:0 16px;font-size:12px;font-weight:700;white-space:nowrap}.dark-button:hover,.step-button:hover{background:#356e63}.dark-button span{font-size:18px}.guess-feedback{font-size:11px;color:#8a998e;margin:16px 0 0;line-height:1.6}.guess-feedback.success{color:#37745a;font-weight:700}.guess-feedback.error{color:#bd704f}.steps-header{display:flex;align-items:center;justify-content:space-between}.steps-header #step-counter{font-size:10px;color:#9da99c}.step-content{min-height:140px;padding-top:16px}.step-placeholder{display:flex;align-items:center;gap:16px;color:#9da89c;font-size:12px;line-height:1.8}.step-glyph{display:grid;place-items:center;border:1px dashed #c9d7c9;border-radius:7px;width:45px;height:45px;font-family:var(--mono);font-size:22px;flex-shrink:0}.step-content .step-title{font-size:14px;font-weight:800;margin:3px 0 8px}.step-content .step-text{font-size:12px;line-height:1.75;color:#65796c;margin:0}.step-content .step-equation{display:inline-block;background:#e8f1e7;color:#386b58;border-radius:4px;font-family:var(--mono);font-size:13px;font-weight:500;padding:7px 10px;margin-top:11px}.step-button{width:100%;height:42px;border:0;background:var(--ink);border-radius:5px;color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.step-button span{font-size:17px}footer{border-top:1px solid #dee4da;display:flex;align-items:center;justify-content:space-between;padding:26px 0 34px;font-size:11px;color:#93a096}footer .footer-brand{font-size:16px;color:var(--ink);font-weight:900}footer a:hover{color:var(--green)}.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}[hidden]{display:none!important}.geometry-settings{padding-bottom:17px}.geo-prompt{display:flex;gap:12px;background:#f4f3e9;border-radius:6px;padding:13px;margin:8px 0;color:#7b7f66;font-size:11px;line-height:1.7}.geo-prompt span{color:#c48e54;font-size:16px}.geo-prompt p{margin:0}.geo-stat{display:flex;align-items:baseline;gap:7px;border-top:1px solid var(--line);padding-top:17px;font-size:11px;color:#829489;margin-top:auto}.geo-stat strong{font-family:var(--mono);font-size:25px;color:var(--ink)}.geo-stat-slash{color:#b7c1b6}.geo-visual{min-height:480px}.geometry-stage{flex:1;min-height:262px;display:flex;align-items:center;justify-content:center;padding:18px 4px}.geometry-board{position:relative;width:min(100%,390px);aspect-ratio:var(--cols)/var(--rows);max-height:230px;background:#f7faf4;outline:3px solid #577f72;border-radius:2px;background-image:linear-gradient(to right,#a6c2b1 1px,transparent 1px),linear-gradient(to bottom,#a6c2b1 1px,transparent 1px);background-size:calc(100% / var(--cols)) calc(100% / var(--rows));background-position:0 0}.geometry-board:after{content:'';position:absolute;top:0;right:0;bottom:0;border-right:1px solid #a6c2b1;pointer-events:none}.geo-highlight{position:absolute;left:calc(var(--x) * 100% / var(--cols));top:calc(var(--y) * 100% / var(--rows));width:calc(var(--w) * 100% / var(--cols));height:calc(var(--h) * 100% / var(--rows));background:rgba(244,161,96,.44);outline:4px solid #e38b4c;outline-offset:-3px;z-index:2;animation:highlight-in .3s ease-out}.geo-highlight:after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#a7532b;font-size:24px;font-weight:800}@keyframes highlight-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.geo-actions{display:flex;gap:9px}.outline-button{height:46px;border:1px solid #d4dfd6;color:#507263;background:#fff;border-radius:5px;padding:0 16px;font-weight:700;font-size:12px}.outline-button:hover{background:#f0f7ef}@media(max-width:850px){.page-shell{padding:0 4%}.intro{gap:20px}.intro-art{transform:scale(.9);transform-origin:center right}.lab-grid,.geometry-grid{grid-template-columns:1fr 1.2fr}.controls-card{padding:22px 18px}.visual-card{padding:22px 20px}.tab{padding:0 11px;gap:7px;font-size:12px}}@media(max-width:650px){.page-shell{padding:0 18px}.topbar{height:70px}.topbar-caption,.topbar-divider{display:none}.intro{display:block;padding:36px 0 26px;min-height:0}.intro h1{font-size:42px;letter-spacing:-2px}.intro p{font-size:13px}.intro-art{height:168px;max-width:420px;transform:none;padding:26px 30px;margin:28px auto 0}.art-bar{height:31px;gap:4px}.art-label{top:12px}.art-difference{top:99px}.art-star{bottom:30px}.art-footnote{bottom:8px}.workspace-heading h2,.explore-heading h2{font-size:21px}.workspace-aside{display:none}.tabs{grid-template-columns:repeat(2,1fr);gap:6px}.tab{height:45px;border-radius:6px;font-size:12px}.lab-grid,.geometry-grid,.explore-grid{grid-template-columns:1fr}.visual-card{min-height:408px}.diagram{min-height:212px}.explore{margin:40px 0}.guess-card,.steps-card{min-height:0}.guess-card h3{margin-bottom:17px}.step-content{min-height:118px}footer{gap:10px;flex-wrap:wrap}footer span:nth-child(2){order:3;flex-basis:100%}.geometry-stage{min-height:230px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}