:root{
  --ink:#191918;--ink-2:#37352f;--gray:#73726e;--gray-light:#a8a7a3;
  --border:#ebeae8;--bg:#fff;--bg-alt:#faf9f5;--bg-hover:#f1f1ef;
  --blue:#2383e2;--blue-dark:#0d6cc2;--blue-bg:#dce8f2;--blue-ink:#28456c;
  --orange-bg:#fadec9;--orange-ink:#49290e;--green-bg:#dfece2;--green-ink:#1c3829;
  --yellow-bg:#fbeec6;--yellow-ink:#402c1b;--radius:12px;
  --font:'Inter','Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}.wrap{width:min(1080px,calc(100% - 48px));margin:auto;padding-bottom:92px}
.masthead{position:relative;padding:82px 0 56px;text-align:center;border-bottom:1px solid var(--border)}
.back-link{position:absolute;left:0;top:26px;padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none}
.back-link:hover{background:var(--bg-hover)}
.eyebrow{display:inline-flex;align-items:center;margin-bottom:26px;padding:6px 14px;border-radius:999px;background:var(--yellow-bg);color:var(--yellow-ink);font-size:13.5px;font-weight:700}
h1,h2,h3{font-family:'Noto Sans TC','Inter',sans-serif;letter-spacing:-.02em}
h1{max-width:900px;margin:0 auto;font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1.16}
h1 em,h2 em{color:var(--blue);font-style:normal}
.lead{max-width:690px;margin:24px auto 0;color:var(--gray);font-size:18px;line-height:1.85}
.toc{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:32px}
.toc a{padding:9px 15px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,transform .15s}
.toc a:hover{background:var(--bg-hover);transform:translateY(-1px)}
main>section{margin-top:88px;scroll-margin-top:24px}
.card{padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.card.clay{border-color:#f2debd;background:var(--yellow-bg);color:var(--yellow-ink)}
.card h3{margin:0 0 7px;font-size:19px;font-weight:800}.card p{margin:0;color:inherit}
.screen-figure{margin:26px 0 8px}
.screen-frame{display:block;width:100%;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.screen-figure figcaption{margin-top:10px;color:var(--gray);font-size:13px;line-height:1.65}.screen-figure figcaption strong{color:var(--ink-2)}
.timeline{position:relative;margin-left:16px}
.scene{position:relative;padding:0 0 52px 48px;scroll-margin-top:24px}
.scene:before{content:"";position:absolute;left:8px;top:9px;z-index:2;width:14px;height:14px;border:4px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1.5px var(--blue)}
.scene:after{content:"";position:absolute;left:15px;top:27px;bottom:0;width:1px;background:var(--border)}
.scene:last-child:after{display:none}
.kicker{margin-bottom:14px;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.04em}
.speech{padding:30px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.055)}
.speech>p{color:var(--ink-2)}.speech .question{margin:0 0 15px;color:var(--ink);font-size:clamp(21px,2.5vw,28px);font-weight:900;line-height:1.45}
.prompt-box{position:relative;margin:20px 0;padding:18px 132px 18px 18px;border-radius:10px;background:var(--ink);color:#fff;font:13px/1.65 ui-monospace,'SF Mono',Menlo,monospace;overflow-wrap:anywhere}
.copy-btn{position:absolute;right:11px;top:11px;padding:7px 11px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:transparent;color:#fff;font:12px var(--font);cursor:pointer}
.copy-btn:hover,.copy-btn:focus-visible{background:#fff;color:var(--ink);outline:none}
.result-card{display:flex;align-items:flex-start;gap:15px;margin-top:18px;padding:18px;border-radius:10px;background:var(--green-bg);color:var(--green-ink)}
.result-icon{font-size:23px}.result{font-size:18px;font-weight:900}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mode-card{border-left:4px solid #e58d57;background:var(--orange-bg);color:var(--orange-ink)}
.mode-card.olive-line{border-left-color:#58a86b;background:var(--green-bg);color:var(--green-ink)}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}.index{color:var(--blue);font-size:13px;font-weight:800}
h2{margin:0;font-size:clamp(29px,4vw,42px);font-weight:900;line-height:1.25}
.big-number{margin-bottom:12px;color:var(--blue);font-size:46px;font-weight:900;line-height:1}
.note{padding:19px 21px;border-left:4px solid var(--blue);border-radius:0 10px 10px 0;background:var(--blue-bg);color:var(--blue-ink)}
footer{margin-top:76px;padding-top:28px;border-top:1px solid var(--border);color:var(--gray-light);font-size:13px}
.vt-comment-pill{position:fixed;right:18px;bottom:18px;z-index:20;padding:9px 14px;border:1px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue-dark);box-shadow:0 5px 18px rgba(0,0,0,.12);font-size:12px;cursor:pointer}
.vt-comment-panel{position:fixed;right:18px;bottom:66px;z-index:21;display:none;width:min(360px,calc(100vw - 36px));padding:16px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 14px 38px rgba(0,0,0,.16)}
.vt-comment-panel.open{display:block}.vt-comment-panel textarea{width:100%;min-height:90px;padding:10px;border:1px solid var(--border);border-radius:9px;font:14px var(--font)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:600;cursor:pointer}.btn-primary{border-color:var(--blue);background:var(--blue);color:#fff}

/* Compatibility for the existing tutorial story semantics. */
.before .section-head{margin-bottom:18px}
.learning-card{height:100%}
.speech>.processing{margin:18px 0 0;color:var(--gray);font-size:14px}
.caution{margin:8px 0 0;color:var(--green-ink);font-size:13px;line-height:1.6}
.next-step{margin:20px 0 0;color:var(--blue-ink);font-weight:700}
#ending>.note{margin-top:20px}

@media(max-width:720px){.wrap{width:min(1080px,calc(100% - 40px));padding-bottom:64px}.masthead{padding:68px 0 42px}.back-link{top:18px}.lead{font-size:16px}.timeline{margin-left:0}.scene{padding-left:35px}.scene:before{left:0}.scene:after{left:7px}.speech{padding:22px}.grid.two{grid-template-columns:1fr}.prompt-box{padding:18px 18px 58px}.copy-btn{top:auto;right:11px;bottom:11px}main>section{margin-top:66px}.vt-comment-pill{position:static;display:block;margin:18px 0 0 auto;box-shadow:none}}
@media(max-width:480px){.wrap{width:calc(100% - 32px)}h1{font-size:36px}.toc{display:grid;grid-template-columns:1fr 1fr}.toc a{text-align:center}.scene{padding-left:28px}.speech{padding:18px}.section-head{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}