@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#18221c;--paper:#f3f2ea;--green:#c7f56b;--muted:#647066}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk','Noto Sans TC',sans-serif}header,main,footer{max-width:1280px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #d8dcd1}.brand{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:800;letter-spacing:-.7px;text-decoration:none;color:inherit}.logo{background:var(--ink);color:var(--green);padding:8px 10px;font-size:23px;border-radius:9px}.logo span{font-size:17px}nav{display:flex;align-items:center;gap:25px}nav a{color:inherit;text-decoration:none;font-size:13px}.pill{border:1px solid #cdd2c6;padding:8px 12px;border-radius:30px;font-size:10px;letter-spacing:1px}.hero{padding:64px 48px 52px}.eyebrow{font-size:11px;letter-spacing:2.7px;font-weight:700}.hero h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-2.6px;line-height:1.27;font-weight:900;margin:25px 0 28px}.hero em{font-style:normal;color:#63745e}.hero-bottom{display:flex;justify-content:space-between;align-items:end}.hero p{font-size:14px;line-height:1.9;color:#687063}.round-link{display:flex;align-items:center;gap:30px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}.round-link span{display:grid;place-items:center;border:1px solid #b6c2ad;border-radius:50%;width:52px;height:52px;font-size:27px}.lab{margin:0 28px;background:#e7ebdf;border-radius:24px;padding:30px 28px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-title h2{font-size:20px;letter-spacing:-.5px;margin:0}.section-title h2 span{color:#819078;font-size:13px;margin-right:12px}.small{font-size:11px;color:#73806b}.presets{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 20px}button{cursor:pointer;font-family:inherit;border:0;font-size:12px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #657e23;outline-offset:4px}.presets button{padding:10px 16px;border-radius:30px;background:transparent;border:1px solid #bdc8b4;color:#5a6954}.presets .active{background:var(--ink);color:var(--green);border-color:var(--ink)}.lab-grid{display:grid;grid-template-columns:300px 1fr;gap:20px}.controls{background:#f7f8f2;border-radius:17px;padding:24px}.controls h3{font-size:14px;margin:0 0 26px}.controls label{display:flex;justify-content:space-between;font-size:11px;align-items:center;margin-top:22px}.controls output{font-weight:700;font-size:13px}input[type=range]{width:100%;accent-color:#5e773b;margin:14px 0 4px}.actions{display:flex;gap:10px;margin-top:28px}.actions button{padding:10px 14px;border-radius:8px;background:#dce7ca}.actions .text-button{background:transparent}.caption{font-size:10px;line-height:1.8;color:#8b9483;margin-top:23px}.visual{background:#17231d;border-radius:17px;color:white;padding:23px 26px;overflow:hidden}.visual-head{display:flex;justify-content:space-between;color:#b4c3ad;font-size:10px;letter-spacing:1px}.visual-head i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px}.diagram{display:flex;align-items:center;padding:52px 5px 45px;min-height:190px}.node{width:75px;flex-shrink:0;border:1px solid #4b5c4c;border-radius:12px;text-align:center;padding:12px 3px;font-size:25px;color:var(--green);background:#243428}.node strong{display:block;font-size:9px;letter-spacing:1px;color:#edf5e7;margin:7px 0 3px}.node small{display:block;font-size:9px;color:#92a48b}.wire{flex:1;height:45px;position:relative}.line{height:1px;background:#4c614b;position:absolute;top:18px;width:100%}.wire>span{position:absolute;width:100%;text-align:center;top:36px;font-size:10px;color:#93a78b}.packet{position:absolute;width:8px;height:8px;top:14px;background:var(--green);border-radius:2px;box-shadow:0 0 12px #c7f56855;animation:travel var(--speed,2s) linear infinite;left:0}.packet.lost{background:#f7ac77;animation-name:drop}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #344737;padding-top:22px;gap:13px}.metrics span{font-size:9px;color:#a5b49d;display:block;line-height:1.5}.metrics strong{display:block;font-size:29px;letter-spacing:-1px;margin-top:8px;font-weight:500;color:#e1f9c1}.metrics small{font-size:11px;color:#8b9e83;letter-spacing:0}.insight{border-top:1px solid #344737;margin-top:22px;padding-top:17px}.insight>span{font-size:9px;letter-spacing:1px;color:#b5cf9b}.insight p{font-size:12px;line-height:1.8;color:#b9c7b2;margin:9px 0 0}details{font-size:11px;color:#687860;margin:20px 4px 0}summary{cursor:pointer}details p{line-height:1.9;max-width:900px}.learn{padding:55px 48px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:28px}.cards article{border-top:1px solid #bfc8b6;padding-top:18px}.card-num{font-size:11px;color:#829174}.cards h3{font-size:17px;margin:20px 0 13px}.cards p{font-size:12px;line-height:1.9;color:#687460;min-height:91px}.cards button{background:transparent;color:#4d6639;padding:8px 0;font-weight:600;text-align:left}.cards ul{font-size:12px;line-height:2;color:#5e6d52;padding-left:18px}.closing{margin:10px 48px 50px;padding:35px;border-radius:18px;background:var(--green);position:relative}.closing>span{font-size:10px;font-weight:700;letter-spacing:1.5px}.closing h2{font-size:29px;letter-spacing:-1px;line-height:1.5;margin:17px 0}.closing a{color:inherit;font-size:12px}footer{padding:24px 48px 36px;display:flex;gap:20px;justify-content:space-between;border-top:1px solid #d8dcd1;font-size:10px;color:#7b8573}footer strong{color:var(--ink);letter-spacing:1px}@keyframes travel{from{left:0}to{left:calc(100% - 8px)}}@keyframes drop{0%{left:0;opacity:1}50%{left:50%;opacity:1}55%,100%{left:53%;opacity:0}}.paused .packet{animation-play-state:paused}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.packet{animation:none;left:50%}}@media(max-width:800px){header{padding:0 22px;height:78px}nav .pill,nav a:nth-child(2){display:none}.hero{padding:40px 24px}.hero h1{letter-spacing:-1.5px}.hero-bottom{align-items:center;gap:15px}.hero p{font-size:12px}.round-link{gap:8px;font-size:11px}.round-link span{width:36px;height:36px}.lab{margin:0 12px;padding:23px 16px}.lab-grid{grid-template-columns:1fr}.controls{padding:20px}.controls label{margin-top:12px}.controls h3{margin-bottom:10px}.caption{margin-bottom:0}.section-title .small{display:none}.section-title h2{font-size:18px}.visual{padding:22px 17px}.learn{padding:40px 24px}.cards{grid-template-columns:1fr;gap:24px}.cards p{min-height:0}.cards h3{margin-top:12px}.closing{margin:0 20px 35px;padding:25px}.closing h2{font-size:25px}footer{padding:22px;flex-wrap:wrap;gap:12px}.metrics strong{font-size:25px}.presets{gap:6px}.presets button{padding:9px 11px;font-size:10px}}