:root{--paper:#fcfbf8;--white:#fff;--ink:#243d3c;--body:#415553;--muted:#687975;--teal:#256d69;--teal-wash:#e7f1ed;--orange:#b55e30;--peach:#f9ebdc;--line:#dce3dd;--code:#f0f3ef;--sidebar:242px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:98px}body{margin:0;background:var(--paper);color:var(--body);font-family:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;text-wrap:pretty}a{color:var(--teal);text-decoration:none}button{font:inherit;cursor:pointer}a,button{transition:background .16s,color .16s,border-color .16s}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{cursor:wait}a:hover{color:var(--orange)}h1,h2,h3,strong{color:var(--ink)}h1,h2,h3,p{margin:0}h2{font-size:29px;line-height:1.5;letter-spacing:-.03em}h3{font-size:21px;line-height:1.5}p+p{margin-top:16px}code{font-family:"JetBrains Mono",Menlo,Consolas,monospace;font-size:.82em;background:var(--code);padding:3px 5px;border-radius:3px;overflow-wrap:anywhere}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:8px}.topbar{height:78px;position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:0 40px;background:rgba(252,251,248,.97);border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:16px;letter-spacing:.025em}.mark{font-family:Georgia,serif;font-size:30px;font-style:italic;font-weight:700;background:var(--teal);color:var(--white);height:38px;width:38px;border-radius:10px;text-align:center;line-height:31px}.wordmark strong{font-weight:600;margin-left:6px}.header-end{display:flex;align-items:center;gap:22px}.edition{font:11px Menlo,monospace;letter-spacing:.1em;color:var(--muted)}.preview-tag{font-size:12px;border:1px solid var(--line);border-radius:4px;padding:2px 10px}.menu-btn{display:none}.sidebar{position:fixed;top:78px;left:0;bottom:0;width:var(--sidebar);border-right:1px solid var(--line);padding:34px 24px;background:var(--paper);overflow:auto;font-size:14px}.sidebar-heading{color:var(--muted);font-size:12px;margin-bottom:16px}.nav-home{display:flex;justify-content:space-between;color:var(--ink);font-weight:600;padding:8px 0;margin-bottom:32px}.nav-caption{font:10px Menlo,monospace;letter-spacing:.14em;color:var(--muted)}.previous,.nav-current{display:flex;gap:12px;line-height:1.6;padding:14px 8px;margin-top:10px}.previous{color:var(--muted)}.previous small,.nav-current small{display:block;font-size:10px;margin-top:4px}.step-dot{font:11px Menlo,monospace;line-height:24px}.nav-current{background:var(--teal-wash);border-radius:6px;color:var(--teal);font-weight:600}.chapters{padding:14px 0 14px 12px}.chapters a{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);padding:9px 0}.chapters a span{font-size:10px;font-family:Menlo,monospace;color:var(--muted)}.chapters a.active{color:var(--teal);font-weight:700}.chapters a:hover{color:var(--teal)}.sidebar-note{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}.sidebar-note>span{font-size:12px;color:var(--ink)}.sidebar-note p{font-size:11px;color:var(--muted);line-height:1.9;margin-top:8px}main{margin-left:var(--sidebar)}.hero{max-width:1240px;margin:auto;padding:36px 64px 0}.breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:12px;margin-bottom:42px}.breadcrumb span{opacity:.5}.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}.eyebrow{font-size:11px;font-weight:600;color:var(--teal);letter-spacing:.16em;display:flex;gap:9px;align-items:center}.tiny-line{width:20px;height:2px;background:var(--teal)}h1{font-size:clamp(40px,4.4vw,65px);line-height:1.28;letter-spacing:-.045em;margin:22px 0}.accent-word{color:var(--teal);position:relative}.accent-word:after{content:"";position:absolute;bottom:1px;left:0;right:4px;height:5px;background:#d6b78f;opacity:.7;border-radius:40%;z-index:-1}.hero-copy{font-size:17px;color:var(--muted);line-height:1.95}.primary{display:inline-flex;gap:32px;background:var(--teal);color:#fff;border-radius:5px;font-size:14px;padding:12px 20px;margin-top:28px;font-weight:600}.primary:hover{background:var(--ink);color:white}.route-map{padding:24px 26px;background:#f0f3eb;border:1px solid #dee5d7;border-radius:12px;position:relative}.map-label{font:10px Menlo,monospace;color:var(--muted);letter-spacing:.07em;display:flex;justify-content:space-between;gap:8px;padding-bottom:18px;border-bottom:1px solid #d5dfd1}.map-label span{font-family:inherit;letter-spacing:0}.route-stop{display:flex;align-items:center;gap:16px;padding:22px 0;position:relative}.route-stop:not(:nth-last-child(2)):after{content:"";position:absolute;left:15px;top:61px;height:25px;border-left:1px solid #b7c6b7}.route-index{display:grid;place-items:center;background:var(--paper);width:32px;height:32px;flex-shrink:0;border:1px solid #c8d5c5;border-radius:50%;font:11px Menlo,monospace;color:var(--teal)}.route-stop strong{display:block;font-size:17px;font-weight:600}.route-stop small{display:block;color:var(--muted);font-size:12px}.route-stop code{margin-left:auto;background:transparent;font-size:10px;color:var(--muted)}.map-foot{font-size:11px;color:var(--muted);border-top:1px solid #d5dfd1;padding-top:16px;display:flex;gap:8px;align-items:center}.small-dot{height:5px;width:5px;border-radius:50%;background:var(--teal)}.topic-strip{display:flex;gap:24px;align-items:center;margin-top:46px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.topic-strip b{font-weight:500;color:var(--ink)}.strip-end{margin-left:auto}.reading-layout{max-width:1240px;margin:auto;padding:56px 64px 0;display:grid;grid-template-columns:minmax(0,760px) 150px;gap:48px}article{min-width:0}article section{margin-bottom:68px;scroll-margin-top:96px}.intro h2{margin:12px 0 20px}.lead{font-size:19px;line-height:1.9;color:var(--ink)}.intro .lead{margin-bottom:18px}.screen-flow{display:flex;align-items:center;gap:12px;margin-top:28px;padding:22px;background:var(--white);border:1px solid var(--line);border-radius:8px}.screen-flow>div{flex:1;text-align:center}.screen-flow span:not(.connector){display:block;font-size:11px;color:var(--muted)}.screen-flow strong{display:block;font-size:16px}.connector{color:var(--teal)}.caption{font-size:12px;color:var(--muted);margin:10px 0 20px}.section-title{display:flex;align-items:center;gap:15px;margin-bottom:22px}.section-num{font:12px Menlo,monospace;color:var(--orange);border-top:2px solid #d1a780;padding-top:4px;align-self:flex-start;margin-top:13px}.code-block{border:1px solid var(--line);background:var(--code);border-radius:7px;margin-top:24px;overflow:hidden}.code-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.copy-btn{background:transparent;border:1px solid #bfcfc6;font-size:11px;border-radius:4px;padding:4px 12px;color:var(--teal)}.copy-btn:hover{background:var(--white)}pre{margin:0;padding:22px;overflow:auto;line-height:1.85}pre code{padding:0;background:none;font-size:12px;white-space:pre}.field-notes{margin-top:26px}.field-notes>div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}dt{font-size:13px;color:var(--ink);font-weight:600}dd{margin:0;font-size:15px}.experiment{margin:26px 0;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:24px}.experiment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.experiment-head h3{margin-top:6px;font-size:20px}.local-label{font-size:10px;color:var(--muted)}.state-controls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}.state-controls button{border:1px solid var(--line);background:var(--white);font-size:12px;padding:7px 12px;border-radius:5px;color:var(--body)}.state-controls button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--white)}.state-controls button:hover{border-color:var(--teal)}.demo-window{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--paper)}.demo-top{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:12px 18px;font-size:11px;color:var(--ink)}.demo-subtitle{color:var(--muted)}#state-screen{min-height:195px;padding:20px}.device-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.device-row:last-child{border:0}.device-row small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.status-pill{font-size:10px;padding:3px 8px;border-radius:4px;background:var(--teal-wash);color:var(--teal);white-space:nowrap}.status-pill.offline{background:#edece6;color:#686b5e}.demo-site{font-size:10px;color:var(--muted);letter-spacing:.05em}.empty-state{text-align:center;padding:30px 12px}.empty-state strong{display:block;font-size:15px}.empty-state p{font-size:12px;color:var(--muted);margin-top:5px}.retry{margin-top:12px;border:1px solid var(--teal);color:var(--teal);background:transparent;border-radius:4px;font-size:12px;padding:5px 15px}.skeleton{height:13px;background:#dce6e0;margin:18px 0;border-radius:3px;width:65%}.skeleton.short{width:40%;height:9px}.experiment-explanation{font-size:12px;margin-top:16px;color:var(--muted)}.figure-label{font:10px Menlo,monospace;color:var(--teal);display:flex;justify-content:space-between}.figure-label span{font-family:"PingFang TC",sans-serif;color:var(--muted)}.sequence{margin:28px 0;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px}.sequence svg{width:100%;height:auto;display:block}.sequence .actor{font-size:17px;font-weight:600;fill:var(--ink)}.seq-row text{font:13px Menlo,monospace;fill:var(--ink)}.seq-row text.reply{font-size:11px;fill:var(--muted)}.seq-row path{stroke:var(--teal);stroke-width:1.5;marker-end:url(#arrow)}.seq-row path.return{stroke-dasharray:4 4}.seq-foot{font-size:11px;fill:var(--muted)}figcaption{font-size:11px;color:var(--muted);margin-top:10px}.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}.status-grid>div{border-top:1px solid var(--line);padding-top:15px}.status-grid b{font:21px Menlo,monospace;color:var(--orange);display:block;margin-bottom:6px}.status-grid span{font-size:12px;font-weight:600;color:var(--ink)}.status-grid p{font-size:12px;color:var(--muted);margin-top:5px}.aside-note{background:var(--peach);padding:16px 20px;font-size:13px;border-radius:5px;color:#755135}.platform-tabs{display:flex;margin-top:26px;border-bottom:1px solid var(--line)}.platform-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;flex:1;text-align:left;padding:12px 18px;color:var(--muted);font-size:17px;font-weight:600}.platform-tabs button span{display:block;font:10px Menlo,monospace;margin-top:5px;font-weight:400}.platform-tabs button[aria-selected="true"]{color:var(--teal);border-color:var(--teal);background:var(--teal-wash)}.platform-panel{padding:24px 0}.platform-panel h3{margin-bottom:14px}.practice-steps{padding-left:24px;margin:24px 0}.practice-steps li{padding:8px 0 8px 6px;font-size:15px}.practice-steps strong,.practice-steps span{display:block}.practice-steps span{font-size:14px;color:var(--muted)}.text-link{font-size:13px;font-weight:600;border-bottom:1px solid #b0c6b8;padding-bottom:3px}.download-list{margin:25px 0}.download-list>a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);color:var(--ink);gap:12px}.download-list>a:last-child{border-bottom:1px solid var(--line)}.download-list>a:hover{color:var(--teal);background:var(--teal-wash)}.file-type{font:9px Menlo,monospace;letter-spacing:.05em;display:inline-block;min-width:70px;color:var(--teal)}.download-list strong{font-size:14px}.download-list small{display:block;font-size:12px;color:var(--muted);padding-left:70px;margin-top:3px}details{padding:16px 0;font-size:14px}summary{cursor:pointer;font-weight:600;color:var(--ink)}details ol{padding-left:24px}.resource-links{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}.resource-links a{padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:8px}.closing{padding-top:30px;border-top:2px solid var(--teal);margin-bottom:32px}.closing h2{margin:16px 0}.closing p{margin-bottom:24px}.right-note{position:sticky;top:116px;align-self:start;margin-top:34px}.right-note p{font-size:18px;line-height:1.9;margin-top:20px}.right-note strong{color:var(--teal)}.mini-rule{width:24px;height:1px;background:var(--line);margin:20px 0}.right-note small{font-size:11px;line-height:1.9;color:var(--muted);display:block}.right-note a{font-size:11px;display:block;margin-top:18px}footer{max-width:1112px;margin:0 64px;padding:22px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:9px 18px;border-radius:5px;font-size:12px;z-index:50}.toast:empty{display:none}[hidden]{display:none!important}
@media(min-width:1650px){.hero{padding-top:48px}h1{font-size:68px}}
@media(max-width:1200px){:root{--sidebar:220px}.topbar{padding:0 24px}.hero{padding:30px 40px 0}.hero-grid{gap:28px}.route-map{padding:20px}.reading-layout{padding:44px 40px 0;grid-template-columns:minmax(0,1fr)}.right-note{display:none}footer{margin:0 40px}.hero-copy{font-size:15px}.map-label{font-size:9px}.map-label span{display:none}.route-stop{gap:12px}.topic-strip{gap:18px}}
@media(max-width:900px){:root{--sidebar:0px}.sidebar{width:260px;transform:translateX(-100%);transition:transform .18s;box-shadow:10px 0 30px #243d3c0a;z-index:25}.sidebar.open{transform:translateX(0)}.menu-btn{display:block;background:none;border:1px solid var(--line);color:var(--teal);font-size:12px;border-radius:4px;min-height:42px;padding:8px 12px}.edition{display:none}.topbar{height:68px}.sidebar{top:68px}.header-end{gap:12px}.hero{max-width:820px}.reading-layout{max-width:820px}h1{font-size:52px}.breadcrumb{margin-bottom:30px}}
@media(max-width:600px){body{font-size:16px}.topbar{padding:0 18px}.wordmark{font-size:13px;gap:8px}.wordmark strong{margin-left:3px}.mark{width:30px;height:30px;font-size:24px;line-height:24px;border-radius:8px}.preview-tag{display:none}.hero{padding:24px 24px 0}.hero-grid{grid-template-columns:1fr;gap:32px}h1{font-size:48px;margin:20px 0}.hero-copy{font-size:16px}.route-map{padding:20px 22px}.map-label span{display:block}.route-stop{padding:17px 0}.route-stop:not(:nth-last-child(2)):after{top:52px;height:20px}.route-stop strong{font-size:15px}.route-stop small{font-size:11px}.primary{margin-top:22px}.topic-strip{gap:18px;margin-top:30px}.strip-end{display:none}.reading-layout{padding:38px 24px 0}h2{font-size:24px}.lead{font-size:17px}.section-title{gap:12px}.section-num{margin-top:10px}article section{margin-bottom:48px}.screen-flow{padding:16px 10px;gap:6px}.screen-flow strong{font-size:14px}.field-notes>div{grid-template-columns:1fr;gap:4px}pre{padding:16px;font-size:12px}.code-bar{padding:9px 12px}.experiment{padding:16px}.local-label{font-size:9px}.state-controls{gap:5px}.state-controls button{padding:8px 9px;min-height:42px;font-size:11px}.sequence{padding:14px 8px}.figure-label{padding:0 6px;font-size:9px}.sequence svg{min-width:0}.seq-row text{font-size:15px}.seq-row text.reply{font-size:13px}.seq-foot{font-size:12px}.status-grid{grid-template-columns:1fr;gap:12px}.status-grid>div{display:grid;grid-template-columns:45px 1fr;gap:3px 12px}.status-grid b{grid-row:span 2;font-size:18px;margin:0}.status-grid p{margin:0}.platform-tabs button{padding:12px;font-size:16px}.platform-tabs button span{font-size:9px}.download-list small{padding-left:0}.file-type{min-width:60px;font-size:8px}.download-list strong{font-size:13px}.resource-links{grid-template-columns:1fr}footer{margin:0 24px;gap:16px;font-size:10px}.aside-note{padding:14px}.caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.topbar,.sidebar,.right-note,.toast,.menu-btn,.copy-btn{display:none}main{margin:0}.hero,.reading-layout{padding:20px;display:block}.hero-grid{grid-template-columns:1fr 1fr}.platform-panel[hidden]{display:block!important}article section{break-inside:auto}.sequence,.code-block,.experiment{break-inside:avoid}body{background:white}h2,h3{break-after:avoid}.hero{break-after:page}footer{margin:0 20px}@page{size:A4;margin:15mm}}

.mobile-sequence{display:none}@media(max-width:600px){.sequence svg{display:none}.mobile-sequence{display:block;padding:12px 8px}.mobile-sequence>div{position:relative;padding:16px 12px;border:1px solid var(--line);border-radius:6px;margin-bottom:24px;background:var(--paper)}.mobile-sequence>div:last-child{margin-bottom:0}.mobile-sequence>div:not(:last-child):after{content:"↓";position:absolute;bottom:-27px;left:50%;color:var(--teal);font-size:18px}.mobile-sequence span{font:10px Menlo,monospace;color:var(--teal);display:block}.mobile-sequence strong{font:11px Menlo,monospace;display:block;margin:10px 0;overflow-wrap:anywhere}.mobile-sequence p{font-size:12px}.mobile-sequence small{font-size:11px;color:var(--muted)}.sequence figcaption{padding:0 8px}}

.previous:hover{background:var(--teal-wash);color:var(--teal);border-radius:6px}article section>h3{margin:28px 0 12px}.git-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 0;padding:22px 16px;background:var(--teal-wash);border-radius:8px}.git-flow>div{flex:1;min-width:70px;text-align:center}.git-flow b{display:block;font-size:13px}.git-flow div span{display:block;font-size:10px;color:var(--muted)}.flow-command{font:10px Menlo,monospace;color:var(--teal)}@media(max-width:600px){.git-flow{flex-direction:column;gap:14px}.git-flow>div{width:100%}.flow-command{font-size:11px}.git-flow>div b{font-size:15px}.git-flow>div span{font-size:12px}}