:root{color-scheme:light;--paper:#f5f6f2;--ink:#202a28;--muted:#65716d;--line:#d7ddd7;--green:#176d55;--green-light:#d9eee3;--coral:#d66348;--gold:#e7b84e;--white:#fff;--radius:6px;font-family:Inter,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}body{margin:0;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}button,input{font:inherit}.topbar{height:64px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);background:rgba(245,246,242,.96);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-family:Georgia,serif;font-size:20px}.muted{font-weight:400;color:var(--muted)}.main-nav{display:flex;gap:28px;margin-left:auto}.main-nav a{font-size:13px;color:#47534f}.main-nav a:hover,.main-nav a:focus-visible{color:var(--green)}.icon-button{height:34px;width:34px;border:1px solid var(--line);background:transparent;border-radius:var(--radius);font-size:19px;cursor:pointer}.section-wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}.intro{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:42px;padding-top:62px;padding-bottom:76px;min-height:450px}.eyebrow{margin:0 0 12px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}.intro h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,6vw,74px);font-weight:400;line-height:.98;margin:0 0 20px}.lead{max-width:400px;margin:0 0 26px;color:var(--muted);font-size:17px}.primary-button,.secondary-button,.upload-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:11px 16px;border:1px solid var(--green);border-radius:var(--radius);background:var(--green);color:white;cursor:pointer;font-size:13px;font-weight:600}.primary-button span{font-size:18px}.intro-art{height:300px;position:relative;overflow:hidden;background:#e4eee7;border:1px solid #cbd9ce;border-radius:var(--radius)}.art-label{position:absolute;z-index:1;color:#41544b;font-size:10px;font-weight:700;letter-spacing:1.3px}.label-top{top:20px;left:22px}.label-bottom{bottom:18px;left:22px}.art-circle{position:absolute;width:156px;height:156px;border:2px solid var(--green);border-radius:50%;top:64px;left:14%}.art-triangle{position:absolute;width:0;height:0;top:56px;left:49%;border-left:88px solid transparent;border-right:88px solid transparent;border-bottom:154px solid var(--coral);filter:drop-shadow(0 0 0 var(--coral))}.art-triangle:after{content:"";position:absolute;left:-84px;top:7px;border-left:84px solid transparent;border-right:84px solid transparent;border-bottom:146px solid #e4eee7}.art-square{position:absolute;right:12%;top:108px;width:104px;height:104px;background:var(--gold);transform:rotate(12deg)}.art-line{position:absolute;left:9%;right:7%;top:224px;border-top:1px dashed #778b7d}.art-point{position:absolute;left:29%;top:218px;width:11px;height:11px;border-radius:50%;background:var(--green)}.section-block{padding-top:38px;padding-bottom:60px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}.section-heading h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:34px;line-height:1.12;margin:0}.section-note{color:var(--muted);font-size:12px}.task-layout{display:grid;grid-template-columns:245px 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.task-list{display:flex;flex-direction:column;border-right:1px solid var(--line)}.task-tab{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:18px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;color:#4b5752}.task-tab span{font-size:10px;color:#89948e}.task-tab.active{background:var(--green-light);color:var(--green);font-weight:700}.task-panel{padding:26px 32px;min-height:230px}.task-panel h3{margin:0 0 9px;font-size:20px}.task-panel p{max-width:680px;color:#596560;margin:0 0 18px}.task-fields{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.task-fields label{display:grid;gap:4px;color:var(--muted);font-size:11px}.task-fields input{width:100px;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}.task-fields button{padding:9px 13px;border:0;border-radius:var(--radius);background:var(--green);color:white;cursor:pointer}.task-result{min-height:26px;margin-top:12px;color:var(--green);font-weight:600}.lab-section{background:#eef2ec}.lab-layout{display:grid;grid-template-columns:310px 1fr;min-height:270px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.lab-controls{padding:22px 24px 22px 0}.lab-controls label{display:flex;justify-content:space-between;color:#48544f;font-size:12px;margin-bottom:6px}.lab-controls output{margin-left:auto;color:var(--green);font-weight:700}.lab-controls input[type=range]{width:100%;accent-color:var(--green);margin:0 0 17px}.measure-results{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:14px;margin-top:1px}.measure-results div{display:grid;gap:3px}.measure-results span{font-size:11px;color:var(--muted)}.measure-results strong{font-size:18px}.hint{font-size:11px;color:var(--muted);margin:14px 0 0}.shape-stage{display:grid;place-items:center;border-left:1px solid var(--line);padding:18px}.shape-stage svg{width:min(100%,510px);height:230px}.shape-stage rect{fill:#d9eee3;stroke:#176d55;stroke-width:2}.shape-stage text{fill:#176d55;font:14px "Segoe UI",sans-serif;text-anchor:middle}.vision-layout{display:grid;grid-template-columns:275px 1fr;gap:24px}.vision-tools{padding:6px 0}.vision-tools>p:first-child{font-size:13px;color:var(--muted);margin:0 0 19px}.vision-tools .upload-button,.vision-tools .secondary-button{width:100%;margin-bottom:9px}.upload-button{background:var(--green);color:white}.secondary-button{background:transparent;color:var(--green)}.text-button{display:block;padding:7px 0;border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:12px}.vision-status{font-size:11px!important;color:var(--muted);margin-top:16px!important}.image-stage{position:relative;min-height:290px;max-height:460px;display:grid;place-items:center;overflow:hidden;border:1px dashed #aebbb1;background:#edf0ea;border-radius:var(--radius)}#vision-canvas,#camera-video{max-width:100%;max-height:460px;display:block;cursor:crosshair}#vision-canvas{width:100%;height:100%;object-fit:contain}.image-empty{position:absolute;display:grid;justify-items:center;gap:10px;color:#75817b;font-size:12px;pointer-events:none}.image-empty[hidden]{display:none}.target-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #aebbb1;border-radius:50%;font-size:22px}.teacher-section{padding-bottom:50px}.teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.teacher-item{padding:20px 22px 22px 0}.teacher-item+.teacher-item{padding-left:22px;border-left:1px solid var(--line)}.teacher-number{color:var(--coral);font-size:11px;font-weight:700}.teacher-item h3{margin:10px 0 6px;font-size:16px}.teacher-item p{margin:0;color:var(--muted);font-size:13px}.method-details{margin-top:20px;border-bottom:1px solid var(--line)}.method-details summary{padding:14px 0;cursor:pointer;color:var(--green);font-weight:600;font-size:13px}.method-details>div{padding:4px 0 20px;color:#53605a;font-size:13px}.method-details li{margin:5px 0}.footer{display:flex;justify-content:space-between;padding:20px max(24px,calc((100vw - 1120px)/2));border-top:1px solid var(--line);font-size:11px;color:var(--muted)}body.high-contrast{--paper:#fff;--ink:#000;--muted:#333;--line:#777;--green:#00563c;--green-light:#d6f3e5}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media(max-width:760px){.topbar{height:auto;min-height:58px;flex-wrap:wrap;gap:8px 16px;padding:10px 18px}.main-nav{order:3;width:100%;overflow-x:auto;gap:22px;margin:0;padding:5px 0}.main-nav a{white-space:nowrap}.icon-button{margin-left:auto}.section-wrap{width:calc(100% - 36px)}.intro{grid-template-columns:1fr;padding-top:45px;padding-bottom:44px;gap:28px}.intro h1{font-size:54px}.intro-art{height:230px}.art-circle{width:120px;height:120px;top:55px}.art-triangle{top:47px;border-left-width:66px;border-right-width:66px;border-bottom-width:118px}.art-triangle:after{left:-62px;top:6px;border-left-width:62px;border-right-width:62px;border-bottom-width:106px}.art-square{width:76px;height:76px;top:85px}.art-line{top:190px}.art-point{top:184px}.section-heading{align-items:start;flex-direction:column;gap:8px}.section-heading h2{font-size:29px}.task-layout{grid-template-columns:1fr}.task-list{display:grid;grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:1px solid var(--line)}.task-tab{gap:5px;padding:12px 9px;font-size:11px}.task-panel{padding:22px 16px}.lab-layout{grid-template-columns:1fr}.lab-controls{padding:20px 0}.shape-stage{border-left:0;border-top:1px solid var(--line);padding:12px}.shape-stage svg{height:190px}.vision-layout{grid-template-columns:1fr}.vision-tools{max-width:100%}.image-stage{min-height:220px}.teacher-grid{grid-template-columns:1fr}.teacher-item,.teacher-item+.teacher-item{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}.footer{gap:12px;flex-wrap:wrap;padding:18px}}