@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color-scheme:dark;--bg:#080c11;--panel:#10171f;--panel2:#0c1218;--text:#eff3f6;--muted:#9aa6b2;--line:#25313b;--lime:#b9f575;--mono:"Space Grotesk",monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:radial-gradient(ellipse 900px 600px at 84% 0%,#b9f5750a,transparent 64%),var(--bg);color:var(--text);font-family:Space Grotesk,Noto Sans TC,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}::selection{background:var(--lime);color:#101710}.lime{color:var(--lime)}.wrap{width:min(1120px,calc(100% - 56px));margin-inline:auto}.pc-header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em;font-size:14px}.brand img{object-fit:contain}.pc-header nav{display:flex;gap:30px;color:var(--muted);font-size:12px}.pc-header nav a:hover,.pc-footer a:hover,.text-link:hover{color:var(--lime)}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(245px,.65fr);gap:70px;align-items:center;padding:92px 0 110px}.eyebrow{margin:0 0 18px;font:600 10px/1.3 var(--mono);letter-spacing:.18em;color:var(--lime)}h1,h2,h3,p{margin-top:0}.hero h1,.tutorial-hero h1{font-size:clamp(40px,6vw,72px);line-height:1.18;letter-spacing:-.045em;margin:0 0 24px}.hero-deck{font-size:19px;line-height:1.75;max-width:680px;margin-bottom:17px}.hero-intro{max-width:700px;color:var(--muted);font-size:14px;line-height:2;margin:0 0 28px}.button{display:inline-flex;align-items:center;gap:34px;padding:12px 17px;background:var(--lime);color:#121a10;border-radius:3px;font-size:12px;font-weight:700}.button:hover{background:#d1ffa0}.hero-aside{background:linear-gradient(145deg,#131d24,#0c1117);border:1px solid var(--line);padding:25px 27px;position:relative}.hero-aside:before{content:"";position:absolute;width:5px;left:-1px;top:22px;bottom:22px;background:var(--lime)}.aside-label{font:10px var(--mono);letter-spacing:.16em;color:var(--muted)}.metric{display:flex;align-items:baseline;gap:15px;margin:20px 0}.metric strong{font-size:68px;line-height:1;color:var(--lime);letter-spacing:-.06em}.metric span,.aside-note{font-size:11px;color:var(--muted)}.aside-rule{height:1px;background:var(--line);margin:22px 0}.metric-small{display:flex;justify-content:space-between;padding:8px 0;font:10px var(--mono);letter-spacing:.08em}.metric-small span{color:var(--muted)}.metric-small b{font-weight:500}.aside-note{margin:17px 0 0;line-height:1.8}.section{padding:86px 0}.section.alt{background:linear-gradient(100deg,#0c1218,#0a0f14);border-block:1px solid #1b252d}.section-head{max-width:720px;margin-bottom:38px}.section-head h2,.closing h2{font-size:clamp(30px,4vw,46px);line-height:1.3;letter-spacing:-.035em;margin:0 0 12px}.section-head>p:last-child{color:var(--muted);font-size:14px;line-height:1.9;margin:0}.cap-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.cap-grid li{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:12px;padding:20px 15px 20px 0;border-bottom:1px solid var(--line);font-size:13px}.cap-index,.cap-mark{font:10px var(--mono);color:var(--lime)}.cap-mark{text-align:right;color:#53606b}.architecture{max-width:670px;margin:auto}.arch-step{display:flex;flex-direction:column;align-items:center}.arch-node{display:grid;grid-template-columns:42px 1fr;align-items:center;width:min(100%,440px);padding:15px 18px;background:#101820;border:1px solid #2a3740;border-radius:3px}.arch-node.highlight{border-color:#83b74e;background:linear-gradient(110deg,#18241a,#101820)}.arch-num{grid-row:span 2;color:var(--lime);font:11px var(--mono)}.arch-node strong{font-size:14px}.arch-node small{font-size:10px;color:var(--muted)}.arch-arrow{color:var(--lime);font:19px var(--mono);height:41px;display:grid;place-items:center}.timeline{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.timeline li{display:grid;grid-template-columns:72px 1fr 74px;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}.phase-no{color:var(--lime);font:16px var(--mono)}.timeline h3{font-size:17px;margin:0 0 5px}.timeline p{font-size:13px;color:var(--muted);margin:0;line-height:1.85}.phase-state{font:9px var(--mono);letter-spacing:.12em;color:#72808b;text-align:right;padding-top:5px}.split-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}.tool-list{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.tool-list article{border-top:1px solid var(--line);padding:17px 0 13px}.tool-list h3{font-size:15px;margin:0 0 7px}.tool-list h3 span{font:9px var(--mono);color:var(--lime);margin-left:6px}.tool-list p{color:var(--muted);font-size:12px;line-height:1.8;margin:0}.static-flow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px 22px;background:#10171e;border:1px solid var(--line);font:12px var(--mono)}.static-flow b{color:var(--lime)}.static-explain{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:20px 0 54px}.static-explain p,.static-explain ul{font-size:13px;color:var(--muted);line-height:2;margin:0}.static-explain ul{padding-left:19px}.upgrade{border:1px solid var(--line);background:var(--panel2);padding:27px;display:grid;grid-template-columns:1fr 210px;gap:20px}.upgrade h3{font-size:21px;margin:0 0 12px}.upgrade>div>p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.9;margin:0}.dynamic-flow{display:flex;flex-direction:column;align-items:center;gap:2px;font:10px var(--mono);color:var(--muted)}.dynamic-flow b{color:var(--lime)}.compare{grid-column:1/-1;border-top:1px solid var(--line);padding-top:15px;margin:4px 0 0;font-size:11px;color:var(--muted)}.evidence-section{background:#0c1117;border-block:1px solid var(--line)}.screenshot-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.screenshot-card{margin:0;min-width:0;border:1px solid var(--line);background:#10171b}.screenshot-card img{display:block;width:100%;height:auto}.screenshot-card figcaption{padding:13px 15px;color:var(--muted);font-size:12px;line-height:1.8}.evidence-note{display:flex;gap:15px;max-width:760px;padding:21px;border:1px dashed #536048;background:#10171b}.evidence-dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--lime);margin-top:8px}.evidence-note b{font-size:13px}.evidence-note p{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.9}.closing{padding:92px 0 104px}.closing h2{margin-bottom:25px}.pc-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.pc-footer .brand{font-size:11px;color:var(--text)}.pc-footer .brand img{width:30px;height:30px}.tutorial-hero{padding:78px 0 55px;border-bottom:1px solid var(--line)}.tutorial-hero h1{font-size:clamp(38px,5.5vw,64px)}.tutorial-hero>p:not(.eyebrow){max-width:650px;font-size:15px;color:var(--muted);line-height:1.9}.text-link{display:inline-block;color:var(--lime);font-size:12px;margin-top:8px}.tutorial-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px;padding-top:54px;padding-bottom:90px}.toc{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;max-height:calc(100vh - 50px);overflow:auto}.toc .eyebrow{margin-bottom:15px}.toc a{font-size:11px;color:var(--muted);padding:8px 0;border-bottom:1px solid #1b252d}.toc a:hover{color:var(--lime)}.guide-part{padding:32px 0 40px;border-top:1px solid var(--line);scroll-margin-top:25px}.guide-part:first-child{padding-top:0;border:0}.guide-part>header{display:flex;gap:17px;align-items:center;margin-bottom:24px}.guide-part>header .phase-no{font-size:19px}.guide-part>header .eyebrow{font-size:9px;margin-bottom:5px}.guide-part>header h2{font-size:25px;margin:0}.guide-block{margin:20px 0}.guide-block h3,.copy-prompt h3{font:600 10px var(--mono);letter-spacing:.1em;color:var(--lime);margin:0 0 8px}.guide-block p,.guide-block li,.common-error p{font-size:12px;color:var(--muted);line-height:1.95}.guide-block p{margin:0}.guide-block ol{padding-left:20px;margin:0}.guide-block li{padding:2px 0}.copy-prompt{margin:22px 0;padding:17px;background:#10171e;border:1px solid var(--line)}.copy-prompt pre{white-space:pre-wrap;margin:0;color:#dce5dc;font:11px/1.8 var(--mono)}.common-error{padding:14px 16px;border-left:2px solid #edbd66;background:#171612}.common-error b{font-size:11px;color:#edbd66}.common-error p{margin:5px 0 0}@media (max-width:760px){.wrap{width:calc(100% - 40px)}.pc-header{height:72px}.brand{gap:8px;font-size:11px}.brand img{width:38px;height:38px}.pc-header nav{gap:15px;font-size:10px}.hero{display:block;padding:55px 0 67px}.hero h1{font-size:clamp(39px,10vw,57px)}.hero-deck{font-size:16px}.hero-intro{font-size:13px}.hero-aside{margin-top:35px}.metric strong{font-size:56px}.section{padding:60px 0}.section-head{margin-bottom:26px}.section-head h2,.closing h2{font-size:30px}.cap-grid{grid-template-columns:1fr}.cap-grid li{padding:15px 3px}.timeline li{grid-template-columns:42px 1fr;gap:10px;padding:19px 0}.phase-state{grid-column:2;text-align:left;font-size:8px}.split-section{grid-template-columns:1fr;gap:20px}.tool-list{gap:0 16px}.tool-list article{padding:14px 0}.static-flow{gap:9px;padding:15px;font-size:10px}.static-explain{grid-template-columns:1fr;gap:12px;padding-bottom:38px}.upgrade{grid-template-columns:1fr;padding:20px}.dynamic-flow{align-items:flex-start;margin-top:7px;gap:4px}.screenshot-gallery{grid-template-columns:1fr}.compare{font-size:10px}.pc-footer{flex-wrap:wrap;justify-content:space-between;font-size:10px}.pc-footer>span{width:100%}.tutorial-hero{padding:55px 0 38px}.tutorial-layout{display:block;padding-top:30px}.toc{position:relative;top:auto;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-bottom:35px}.toc .eyebrow{grid-column:1/-1}.guide-part{padding:25px 0 30px}.guide-part>header h2{font-size:22px}.guide-block p,.guide-block li,.common-error p{font-size:12px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body.tutorial-v2-page{background:radial-gradient(ellipse 800px 440px at 85% 0%,#b9f5750a,transparent 68%),var(--bg);color:var(--text)}.tutorial-v2-page .wrap{width:min(1120px,calc(100% - 56px))}.tutorial-v2-page .tutorial-header{height:74px}.tutorial-v2-page .tutorial-hero-v2{display:block;max-width:1120px;padding:76px 0 46px}.tutorial-hero-v2 .eyebrow{margin-bottom:16px}.tutorial-hero-v2 h1{max-width:900px;margin:0 0 16px;font-size:clamp(40px,6.1vw,68px);line-height:1.13;letter-spacing:-.045em}.tutorial-lead{max-width:760px;margin:0 0 17px;color:#d9e1e4;font-size:19px;line-height:1.75}.tutorial-intro{max-width:810px;color:var(--muted);font-size:14px;line-height:1.95}.tutorial-intro p{margin:0 0 10px}.tutorial-return{display:inline-flex;margin-top:8px;color:var(--lime);font-size:12px}.workshop-outcomes{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start;padding:26px 0 30px;border-block:1px solid var(--line)}.outcomes-heading .eyebrow{margin-bottom:7px}.outcomes-heading h2{margin:0;font-size:22px;line-height:1.35}.outcome-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 20px;list-style:none;margin:0;padding:0}.outcome-list li{position:relative;padding-left:19px;color:#ccd6db;font-size:11px;line-height:1.65}.outcome-list li:before{content:"✓";position:absolute;left:0;color:var(--lime);font-family:var(--mono)}.safety-note{display:grid;grid-template-columns:145px 1fr;gap:18px;margin-top:23px;margin-bottom:51px;padding:16px 18px;border:1px solid #515b39;border-radius:5px;background:#111810}.safety-label{color:var(--lime);font:600 9px/1.7 var(--mono);letter-spacing:.12em}.safety-note p{margin:0;color:#d3dcce;font-size:11px;line-height:1.85}.workshop{display:grid;grid-template-columns:230px minmax(0,1fr);gap:45px;align-items:start}.workshop-toc{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow:auto;padding:18px 14px;border:1px solid var(--line);border-radius:5px;background:#0d1419}.workshop-toc .eyebrow{margin-bottom:4px;font-size:8px}.workshop-toc h2{margin:0 0 14px;font-size:20px}.workshop-toc ol{display:grid;gap:3px;list-style:none;margin:0;padding:0}.workshop-toc a{display:flex;gap:10px;align-items:baseline;padding:7px 6px;border-radius:3px;color:#aebbc2;font-size:10px;line-height:1.5}.workshop-toc a span{flex:0 0 25px;color:var(--lime);font:600 9px var(--mono)}.workshop-toc a:hover{background:#19231d;color:var(--ink)}.workshop-chapters{min-width:0}.workshop-chapter{scroll-margin-top:24px;padding:0 0 34px;margin:0 0 40px;border-bottom:1px solid var(--line)}.chapter-header{display:flex;align-items:center;gap:16px;padding:0 0 22px;border-bottom:1px solid var(--line)}.chapter-index{display:grid;place-items:center;flex:0 0 57px;height:57px;border:1px solid #4b6736;border-radius:50%;color:var(--lime);font:600 13px var(--mono);box-shadow:0 0 20px #b9f5750a}.chapter-header .eyebrow{margin:0 0 3px;font-size:8px}.chapter-header h2{margin:0;font-size:clamp(23px,3vw,30px);line-height:1.25;letter-spacing:-.03em}.chapter-block{padding:20px 0 3px}.chapter-block h3,.chapter-errors h3{display:flex;align-items:baseline;gap:11px;margin:0 0 9px;font-size:14px;line-height:1.5}.chapter-block h3>span,.chapter-errors h3>span{color:var(--lime);font:600 9px var(--mono);letter-spacing:.08em}.chapter-block>p{margin:0;color:#bac6cc;font-size:12px;line-height:1.9}.chapter-block ol,.chapter-block ul,.chapter-errors ul{display:grid;gap:8px;margin:0;padding-left:21px;color:#bac6cc;font-size:11px;line-height:1.85}.chapter-block li::marker,.chapter-errors li::marker{color:var(--lime)}.copy-block{padding-top:22px}.tutorial-code{overflow:hidden;margin:11px 0 13px;border:1px solid #29383e;border-radius:5px;background:#080d11}.tutorial-code figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:7px 10px 7px 13px;border-bottom:1px solid #243139;color:#aab8bf;font:10px/1.5 var(--mono)}.copy-code{min-width:64px;min-height:34px;padding:5px 10px;border:1px solid #4b603a;border-radius:3px;background:#141e13;color:var(--lime);font:600 10px var(--mono);cursor:pointer}.copy-code:hover{background:#202d1d}.copy-code:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.tutorial-code pre{overflow:auto;max-width:100%;margin:0;padding:14px 15px;color:#e0e8e7;font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2;white-space:pre}.tutorial-code code{font:inherit}.expected-block ul{list-style:none;padding-left:0}.expected-block li{position:relative;padding-left:19px}.expected-block li:before{content:"✓";position:absolute;left:0;color:var(--lime)}.tutorial-visual{margin:21px 0 5px;overflow:hidden;border:1px solid #34413f;border-radius:5px;background:#0a1014}.tutorial-visual img{display:block;width:100%;max-width:100%;height:auto;max-height:500px;object-fit:cover;object-position:top}.tutorial-visual figcaption{padding:10px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.65}.chapter-errors{margin-top:19px;padding:15px 16px;border:1px solid #3c3730;border-radius:4px;background:#15130f}.chapter-errors h3{margin-bottom:8px;color:#e4c18b}.chapter-errors h3>span{color:#e4c18b}.chapter-errors li::marker{color:#e4c18b}.chapter-next{display:grid;grid-template-columns:105px 1fr auto;gap:13px;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:10px}.chapter-next>span{color:var(--lime);font:600 9px var(--mono);letter-spacing:.08em}.chapter-next .next-index{margin-right:5px;color:#78887f}.chapter-next p{margin:0;color:var(--muted);line-height:1.7}.chapter-next a{color:var(--lime);white-space:nowrap}.chapter-next a:hover{color:#dcffb7}.tutorial-final-workflow{margin-top:12px;margin-bottom:45px;padding:24px 28px;border:1px solid #354632;border-radius:6px;background:#0d1414}.tutorial-final-workflow>.eyebrow{margin:0 0 7px;color:var(--lime);font:600 9px/1.7 var(--mono);letter-spacing:.12em}.tutorial-final-workflow h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);line-height:1.3}.tutorial-final-workflow>p:not(.eyebrow){margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.8}.tutorial-final-workflow>ol{display:grid;gap:10px;margin:0;padding-left:22px;color:#bac6cc;font-size:11px;line-height:1.85}.tutorial-final-workflow>ol li::marker{color:var(--lime)}.tutorial-final-workflow>ol strong{color:#e7eee9}.tutorial-final-workflow .tutorial-code{margin-top:18px}.tutorial-final-workflow .chapter-errors{margin-bottom:0}.tutorial-finish{margin-top:16px;margin-bottom:54px;padding:28px 30px;border:1px solid #354632;border-radius:6px;background:radial-gradient(ellipse 45% 100% at 100% 100%,#b9f57510,transparent 72%),#0e1514}.tutorial-finish .eyebrow{margin-bottom:8px}.tutorial-finish h2{margin:0 0 8px;font-size:clamp(23px,3.2vw,34px);line-height:1.3}.tutorial-finish>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:12px;line-height:1.8}.tutorial-finish .button{min-height:44px}.tutorial-footer{min-height:72px}@media (max-width:900px){.tutorial-v2-page .wrap{width:calc(100% - 44px)}.workshop{grid-template-columns:190px minmax(0,1fr);gap:25px}.workshop-outcomes{grid-template-columns:190px 1fr}.outcome-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:700px){.tutorial-v2-page .wrap{width:calc(100% - 36px)}.tutorial-v2-page .tutorial-header{height:64px}.tutorial-v2-page .brand{gap:7px;font-size:10px}.tutorial-v2-page .brand img{width:32px;height:32px}.tutorial-v2-page .pc-header nav{gap:12px;font-size:9px}.tutorial-v2-page .tutorial-hero-v2{padding:43px 0 28px}.tutorial-hero-v2 .eyebrow{font-size:8px;margin-bottom:11px}.tutorial-hero-v2 h1{font-size:clamp(36px,9vw,47px);line-height:1.15;margin-bottom:13px}.tutorial-lead{font-size:15px;line-height:1.8}.tutorial-intro{font-size:12px;line-height:1.85}.tutorial-return{font-size:11px}.workshop-outcomes{display:block;padding:20px 0 22px}.outcomes-heading h2{font-size:20px}.outcome-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:14px}.outcome-list li{font-size:11px}.safety-note{grid-template-columns:1fr;gap:5px;margin-top:15px;margin-bottom:31px;padding:13px}.safety-note p{font-size:11px}.workshop{display:block}.workshop-toc{position:relative;top:auto;max-height:none;margin-bottom:25px;padding:14px 12px}.workshop-toc h2{font-size:18px}.workshop-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}.workshop-toc a{padding:7px 4px;font-size:10px}.workshop-chapter{padding-bottom:25px;margin-bottom:29px}.chapter-header{gap:12px;padding-bottom:16px}.chapter-index{flex-basis:47px;height:47px;font-size:11px}.chapter-header h2{font-size:23px}.chapter-block{padding-top:16px}.chapter-block h3,.chapter-errors h3{font-size:13px}.chapter-block>p{font-size:12px}.chapter-block ol,.chapter-block ul,.chapter-errors ul{padding-left:18px;gap:7px;font-size:11px}.tutorial-code figcaption{min-height:42px;font-size:9px}.copy-code{min-height:40px;min-width:66px}.tutorial-code pre{padding:12px;font-size:10px;line-height:1.7}.tutorial-visual img{max-height:330px}.chapter-errors{padding:13px 12px}.chapter-next{grid-template-columns:1fr auto;gap:7px 12px;align-items:start}.chapter-next>span{grid-column:1/-1}.chapter-next p{font-size:10px}.chapter-next a{font-size:9px}.tutorial-finish{margin-top:6px;margin-bottom:34px;padding:21px 17px}.tutorial-finish h2{font-size:25px}.tutorial-finish>p:not(.eyebrow){font-size:11px}.tutorial-v2-page .pc-footer{min-height:62px;gap:10px;font-size:9px}}@media (max-width:700px){.tutorial-final-workflow{margin-bottom:30px;padding:18px 14px}.tutorial-final-workflow>ol{gap:8px;font-size:10px;line-height:1.8}}@media (max-width:360px){.tutorial-v2-page .pc-header nav{gap:8px}.tutorial-v2-page .tutorial-hero-v2 h1{font-size:34px}.chapter-next{grid-template-columns:1fr}.chapter-next a{justify-self:start}}@media (prefers-reduced-motion:reduce){.tutorial-v2-page{scroll-behavior:auto}}