:root{--ink:#20241f;--paper:#f5f6f0;--lime:#c8f34a;--line:#252a24;--muted:#61665e;--pink:#e9bbef;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,iframe:focus-visible{outline:3px solid #7256d9;outline-offset:4px}button:disabled{cursor:default}button,a{touch-action:manipulation}button{color:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--lime);padding:12px;border:2px solid}.skip-link:focus{top:12px}
.site-header{height:100px;padding:0 4.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--line);gap:28px;background:#fff}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;flex-shrink:0}.brand-mark{display:grid;place-items:center;width:49px;height:49px;background:var(--lime);border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);font-size:29px;font-weight:900;border-radius:13px 13px 13px 2px}.brand strong{font-size:24px;letter-spacing:1px;line-height:1.3;display:block}.brand small{display:block;font-size:10px;letter-spacing:2.7px;font-weight:800;margin-top:3px}.site-header nav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:auto}.nav-link{text-decoration:none;font-weight:700;font-size:15px;position:relative;padding:10px 0}.nav-link.active:after{content:"";position:absolute;bottom:0;height:4px;background:var(--ink);left:0;right:0}.upcoming{color:#757b72;font-weight:500}.upcoming small{font-size:12px;border:1px solid #c9cdc5;border-radius:4px;padding:2px 5px;margin-left:4px}.header-note{font-size:14px;color:var(--muted)}.header-note span{font-size:24px;color:var(--ink);vertical-align:middle;margin-left:12px}main{max-width:1660px;margin:auto;padding:40px 4.2% 0}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:0 0 32px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:2px;display:flex;align-items:center;gap:10px}.eyebrow>span:last-child{color:#6b7168;margin-left:10px}.mini-square{width:10px;height:10px;background:var(--lime);border:1.5px solid;transform:rotate(-12deg)}h1{font-size:clamp(28px,3vw,45px);line-height:1.4;letter-spacing:-1.6px;margin:11px 0 12px;font-weight:850}mark{background:none;box-shadow:inset 0 -.34em var(--lime);color:inherit;padding:0 4px}h1+p{margin:0;color:var(--muted);font-size:15px}.subject-stamp{transform:rotate(5deg);border:2px solid;padding:10px 22px;display:flex;flex-direction:column;text-align:center;background:var(--pink);box-shadow:4px 4px 0 var(--line);flex-shrink:0}.subject-stamp strong{font-size:21px;letter-spacing:3px}.subject-stamp span:first-child{font-size:13px}.subject-stamp span:last-child{font-size:10px;letter-spacing:1px;border-top:1px solid;margin-top:4px;padding-top:4px}
.lab{border:2px solid var(--line);border-radius:12px;box-shadow:6px 6px 0 var(--line);background:#fff;overflow:hidden;scroll-margin-top:18px}.lab-header{min-height:90px;display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:2px solid;gap:18px}.lab-heading{display:flex;align-items:center;gap:15px}.lab-number{display:grid;place-items:center;width:42px;height:46px;background:var(--lime);border:1.5px solid;font:800 20px Consolas,monospace;border-radius:7px}.lab-heading h2{font-size:22px;margin:0;line-height:1.35}.lab-heading p{font-size:12px;color:var(--muted);margin:4px 0 0;letter-spacing:1px}.tag{font-size:12px;padding:3px 9px;border:1px solid #ccd0c7;border-radius:5px;align-self:flex-start;margin-top:1px;white-space:nowrap}.lab-actions{display:flex;gap:10px;align-items:center}.button{display:inline-flex;justify-content:center;align-items:center;gap:7px;font-size:14px;line-height:1.4;text-decoration:none;min-height:40px;padding:9px 14px;border:1.5px solid var(--line);border-radius:6px;font-weight:650;transition:background .15s,transform .15s}.button:hover{transform:translateY(-1px)}.button.light{background:#fff}.button.light:hover{background:#eef2e7}.button.dark{background:var(--ink);color:#fff}.button.dark:hover{background:#3a4932}.button.dark span{font-size:19px;line-height:1}.lab-body{display:grid;grid-template-columns:246px minmax(0,1fr);height:590px}.guide{padding:24px 22px 14px;background:#fcfdf9;border-right:1.5px solid var(--line);overflow:auto}.guide-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}.guide-label span:last-child{font-size:25px;color:var(--ink);line-height:1}h3{font-size:17px;margin:5px 0 18px}.steps{padding:0;margin:0;list-style:none;display:grid;gap:20px}.steps li{display:flex;align-items:flex-start;gap:11px}.step-no{flex-shrink:0;display:grid;place-items:center;width:22px;height:23px;border:1px solid;border-radius:50%;font:700 12px Consolas,monospace;margin-top:2px;background:#fff}.steps strong{font-size:14px}.steps p{font-size:13px;color:var(--muted);line-height:1.75;margin:4px 0 0}.try-card{margin-top:23px;background:#ecf7d9;padding:13px 14px;border:1px solid #bacb9d;border-radius:6px}.try-label{font-size:12px;font-weight:700}.formula{font:italic 25px Georgia,serif;margin:9px 0}.formula span{font-size:19px;margin:0 7px}.try-card p{font-size:12px;color:#556148;margin:0}.touch-tip{font-size:12px;color:var(--muted);line-height:1.8;margin:17px 0 0}.canvas-shell{position:relative;background:#f4f1ea;min-width:0;height:100%;isolation:isolate}iframe{border:0;display:block;width:100%;height:100%;background:#f4f1ea}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f4f1ea;color:var(--muted);z-index:2;pointer-events:none}.load-error{position:absolute;inset:0;z-index:3;background:#f4f1ea;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;gap:15px;text-align:center;padding:30px}.load-error strong,.load-error p{width:100%;margin:0}.lab-footer{display:flex;justify-content:space-between;gap:20px;padding:11px 21px;border-top:1.5px solid;font-size:12px;color:var(--muted);background:#fff}.key-hint{font:700 10px Consolas,monospace;background:var(--lime);color:var(--ink);padding:3px 5px;border:1px solid;border-radius:3px;margin-right:8px}.lab-caption{white-space:nowrap;letter-spacing:1px}.guide-hidden .lab-body{grid-template-columns:minmax(0,1fr)}.guide-hidden .guide{display:none}
.notes{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:30px;margin:32px 0 37px;align-items:center}.note{display:flex;align-items:flex-start;gap:14px}.note-symbol{display:grid;place-items:center;flex-shrink:0;background:#cbe5ef;width:42px;height:42px;border:1.5px solid;border-radius:7px;font-size:25px;line-height:1}.note-symbol.pink{background:var(--pink);font-family:Georgia,serif}.note h3,.next-note h3{font-size:15px;margin:0 0 5px}.note p,.next-note p{font-size:13px;margin:0;color:var(--muted);line-height:1.8}.next-note{border-left:1px dashed #9ca291;padding-left:30px}.next-kicker{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.next-note h3{margin-top:5px}.next-note h3 span{font-size:11px;font-weight:400;border:1px solid #aeb6a4;border-radius:4px;padding:2px 5px;margin-left:5px}.site-footer{max-width:1660px;margin:auto;border-top:1px solid #ccd1c6;padding:23px 4.2%;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}.site-footer strong{color:var(--ink)}.site-footer a{text-underline-offset:3px}.focus-mode{overflow:hidden}.focus-mode .lab{position:fixed;inset:0;z-index:30;border-radius:0;display:flex;flex-direction:column;box-shadow:none}.focus-mode .lab-body{flex:1;min-height:0;height:auto;grid-template-columns:minmax(0,1fr)}.focus-mode .guide{display:none}.focus-mode .lab-header{min-height:76px}.focus-mode #guide-toggle{display:none}.focus-mode .lab-footer{flex-shrink:0}
@media(min-width:1600px){.lab-body{height:650px;grid-template-columns:270px minmax(0,1fr)}.guide{padding:28px}.steps p{font-size:14px}.steps{gap:24px}}
@media(max-width:1100px){.site-header{padding-inline:3%;gap:18px}.header-note{display:none}main{padding:28px 3% 0}.site-header nav{margin-right:0}.lab-header{padding:16px}.tag{display:none}.lab-body{grid-template-columns:220px minmax(0,1fr)}.guide{padding:20px 16px}.button{padding:9px 11px}.notes{gap:22px}.note{gap:10px}.next-note{padding-left:20px}.subject-stamp{padding:8px 16px}}
@media(max-width:760px){.site-header{height:auto;min-height:86px;gap:16px;flex-wrap:wrap;padding:18px 5% 0}.brand strong{font-size:21px}.brand-mark{width:42px;height:43px;font-size:25px}.brand small{font-size:9px}.site-header nav{width:100%;justify-content:flex-start;gap:25px}.nav-link{font-size:14px;padding:8px 0 12px}.upcoming small{font-size:11px}.intro{padding-bottom:25px;display:block}.subject-stamp{display:none}main{padding:26px 4% 0}.eyebrow{font-size:10px;letter-spacing:1.5px}h1{font-size:29px;letter-spacing:-1px;line-height:1.5}h1+p{font-size:14px;line-height:1.9;max-width:34em}.lab{border-radius:9px;box-shadow:4px 4px 0}.lab-header{padding:15px 13px;display:block}.lab-heading{gap:10px}.lab-heading h2{font-size:20px}.lab-heading p{font-size:11px}.lab-number{height:39px;width:36px;font-size:18px}.lab-actions{margin-top:15px;gap:8px}.button{font-size:13px;min-height:40px;padding:9px 10px}.lab-actions .button{flex:1}.lab-actions .standalone{display:none}.lab-body{display:flex;flex-direction:column;height:auto}.guide{border-right:0;border-bottom:1.5px solid;padding:20px;max-height:320px}.guide h3{margin-bottom:15px}.guide-label,.try-card,.touch-tip{display:none}.steps{gap:12px}.steps p{font-size:13px}.canvas-shell{height:560px;flex-shrink:0}.lab-footer{padding:10px 13px;font-size:12px}.lab-caption{display:none}.notes{grid-template-columns:1fr;gap:23px;margin:30px 0}.note p,.next-note p{font-size:14px}.next-note{border-left:0;border-top:1px dashed #a6ad9e;padding:20px 0 0}.site-footer{display:block;padding:20px 5%;font-size:12px}.site-footer>span{display:block;margin-bottom:10px}.focus-mode .lab-header{padding:10px 12px;min-height:0;display:flex;gap:10px}.focus-mode .lab-heading p,.focus-mode .lab-number{display:none}.focus-mode .lab-heading h2{font-size:17px;white-space:nowrap}.focus-mode .lab-actions{margin:0}.focus-mode .lab-body{display:block;position:relative}.focus-mode .canvas-shell{height:100%;position:absolute;inset:0}.focus-mode .lab-footer{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}