:root{
  --ground:#eaeef3; --surface:#ffffff; --surface-2:#f5f8fc;
  --ink:#161d29; --ink-2:#3a4658; --muted:#6c7889; --faint:#98a3b3;
  --line:#d7dee8; --line-2:#e6ebf2;
  --accent:#a1571f; --accent-ink:#8a4a19;
  --read:#6c7889; --read-bg:#e7ebf1;
  --qemu:#2b62d6; --qemu-bg:#e3ebfb;
  --hw:#a1571f; --hw-bg:#f6e8d9;
  --renode:#0d7a86; --renode-bg:#dcf0f1;
  --spine:#cfd7e2;
  --shadow:0 1px 2px rgba(20,30,45,.05),0 6px 20px rgba(20,30,45,.06);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0f141b; --surface:#191f29; --surface-2:#1e2731;
    --ink:#e9eef5; --ink-2:#b7c1ce; --muted:#7e8a9b; --faint:#5d6879;
    --line:#2a333f; --line-2:#222b36;
    --accent:#dc9560; --accent-ink:#e7a878;
    --read:#8590a1; --read-bg:#242d38;
    --qemu:#6f9bff; --qemu-bg:#1a2740;
    --hw:#dc9560; --hw-bg:#33261a;
    --renode:#39b4bf; --renode-bg:#123035;
    --spine:#2f3a47;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="light"]{
  --ground:#eaeef3; --surface:#ffffff; --surface-2:#f5f8fc;
  --ink:#161d29; --ink-2:#3a4658; --muted:#6c7889; --faint:#98a3b3;
  --line:#d7dee8; --line-2:#e6ebf2;
  --accent:#a1571f; --accent-ink:#8a4a19;
  --read:#6c7889; --read-bg:#e7ebf1;
  --qemu:#2b62d6; --qemu-bg:#e3ebfb;
  --hw:#a1571f; --hw-bg:#f6e8d9;
  --renode:#0d7a86; --renode-bg:#dcf0f1;
  --spine:#cfd7e2;
  --shadow:0 1px 2px rgba(20,30,45,.05),0 6px 20px rgba(20,30,45,.06);
}
:root[data-theme="dark"]{
  --ground:#0f141b; --surface:#191f29; --surface-2:#1e2731;
  --ink:#e9eef5; --ink-2:#b7c1ce; --muted:#7e8a9b; --faint:#5d6879;
  --line:#2a333f; --line-2:#222b36;
  --accent:#dc9560; --accent-ink:#e7a878;
  --read:#8590a1; --read-bg:#242d38;
  --qemu:#6f9bff; --qemu-bg:#1a2740;
  --hw:#dc9560; --hw-bg:#33261a;
  --renode:#39b4bf; --renode-bg:#123035;
  --spine:#2f3a47;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:920px;margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,2rem) 4rem;}

/* ---------- language toggle ---------- */
.lang-btn{position:fixed;top:1rem;right:1rem;z-index:10;
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:.42rem .75rem;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .18s ease,color .18s ease;}
.lang-btn:hover{border-color:var(--accent);color:var(--accent-ink);}

/* ---------- header ---------- */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 .9rem;display:flex;align-items:center;gap:.55rem;}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--accent);opacity:.6;}
h1{font-size:clamp(1.75rem,4.4vw,2.7rem);line-height:1.12;margin:0;letter-spacing:-.02em;
  font-weight:750;text-wrap:balance;}
h1 .code{font-family:var(--mono);color:var(--accent-ink);font-weight:650;}
.lede{margin:1.1rem 0 0;font-size:1.06rem;color:var(--ink-2);max-width:60ch;}
.lede b{color:var(--ink);font-weight:650;}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;}
.badge{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.02em;
  padding:.28rem .6rem;border-radius:6px;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid transparent;white-space:nowrap;}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:2px;flex:none;}
.b-read{color:var(--read);background:var(--read-bg);}   .b-read::before{background:var(--read);}
.b-qemu{color:var(--qemu);background:var(--qemu-bg);}   .b-qemu::before{background:var(--qemu);}
.b-hw{color:var(--hw);background:var(--hw-bg);}         .b-hw::before{background:var(--hw);}

/* ---------- principle strip ---------- */
.rule{height:1px;background:var(--line);border:0;margin:2.4rem 0;}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;}
.p-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow);}
.p-card h3{margin:0 0 .35rem;font-size:.86rem;letter-spacing:.01em;font-weight:700;
  display:flex;align-items:center;gap:.45rem;}
.p-card h3 .k{font-family:var(--mono);font-size:.68rem;color:var(--accent);font-weight:600;}
.p-card p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.5;}

.sec-label{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:2.6rem 0 1.4rem;}

/* ---------- timeline ---------- */
.timeline{position:relative;display:flex;flex-direction:column;gap:1rem;}
.timeline::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(var(--spine),var(--spine));border-radius:2px;}
@media(max-width:640px){.timeline::before{left:15px;}}

.phase{position:relative;display:grid;grid-template-columns:40px 1fr;gap:1rem;align-items:start;}
@media(max-width:640px){.phase{grid-template-columns:32px 1fr;gap:.7rem;}}
.node{position:relative;z-index:1;width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-weight:700;font-size:1rem;box-shadow:var(--shadow);font-variant-numeric:tabular-nums;}
@media(max-width:640px){.node{width:32px;height:32px;font-size:.85rem;border-radius:8px;}}
.phase[data-track="hw"] .node,.wrap[data-track="hw"] .node{border-color:var(--hw);color:var(--hw);}
.phase[data-track="qemu"] .node,.wrap[data-track="qemu"] .node{border-color:var(--qemu);color:var(--qemu);}
.phase[data-track="read"] .node,.wrap[data-track="read"] .node{border-color:var(--line);color:var(--muted);}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.25rem 1.2rem;box-shadow:var(--shadow);transition:border-color .18s ease,transform .18s ease;}
.card:hover{border-color:var(--accent);transform:translateY(-1px);}
.card .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem .8rem;}
.card h2{font-size:1.12rem;margin:0;font-weight:700;letter-spacing:-.01em;}
.card .weeks{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-left:auto;
  white-space:nowrap;font-weight:600;}
.more{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap;}
.more:hover{text-decoration:underline;}
.opt{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--renode);
  background:var(--renode-bg);padding:.1rem .4rem;border-radius:5px;letter-spacing:.04em;}
.goal{margin:.6rem 0 0;color:var(--ink-2);font-size:.95rem;}
.goal b{color:var(--ink);font-weight:650;}
.goal code,.check code{font-family:var(--mono);font-size:.85em;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;margin-top:.9rem;}
@media(max-width:560px){.grid2{grid-template-columns:1fr;gap:.9rem;}}
.field .h{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:.4rem;}
ul.tick{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.28rem;}
ul.tick li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--ink-2);line-height:1.45;}
ul.tick li::before{content:"";position:absolute;left:.1rem;top:.55em;width:.32rem;height:.32rem;
  border-radius:1px;background:var(--accent);opacity:.75;}
.check{font-size:.9rem;color:var(--ink-2);line-height:1.45;}
.check .lead{color:var(--accent-ink);font-weight:650;}

.refs{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.refs .rl{font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.06em;
  text-transform:uppercase;margin-right:.2rem;}
.chip{font-family:var(--mono);font-size:.73rem;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:6px;padding:.16rem .45rem;white-space:nowrap;}

/* ---------- closing ---------- */
.foot{margin-top:2.6rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.35rem;box-shadow:var(--shadow);}
.foot h3{margin:0 0 .7rem;font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.5rem;}
.foot h3 .dot{width:.5rem;height:.5rem;border-radius:50%;background:#3ba55c;flex:none;}
.envs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 1.8rem;}
.eg-h{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2);margin:0 0 .5rem;}
.env{display:grid;gap:.4rem;margin:0;}
.env div{font-size:.83rem;color:var(--muted);}
.env code{font-family:var(--mono);color:var(--ink-2);font-size:.8rem;}
.todo{margin:.9rem 0 0;padding-top:.9rem;border-top:1px dashed var(--line);font-size:.85rem;color:var(--muted);}
.todo code{font-family:var(--mono);color:var(--accent-ink);background:var(--surface-2);
  padding:.06rem .3rem;border-radius:4px;font-size:.78rem;}

/* ---------- phase detail pages ---------- */
.back{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.78rem;
  font-weight:600;color:var(--muted);text-decoration:none;margin:0 0 1.6rem -.6rem;
  padding:.35rem .6rem;border-radius:8px;transition:color .18s ease,background .18s ease;}
.back:hover{color:var(--accent-ink);background:var(--surface);}
.d-head{display:flex;align-items:center;gap:1rem;}
.d-head .node{width:48px;height:48px;font-size:1.15rem;border-radius:12px;}
.d-title{font-size:clamp(1.4rem,3.5vw,1.9rem);margin:0;letter-spacing:-.015em;line-height:1.2;}
.d-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.45rem;}
.d-meta .weeks{font-family:var(--mono);font-size:.72rem;color:var(--faint);font-weight:600;}
.d-sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.25rem;box-shadow:var(--shadow);margin-top:1rem;}
.d-sec>.h{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:.6rem;}
.d-sec p{margin:0;font-size:.93rem;color:var(--ink-2);}
.d-sec p b{color:var(--ink);font-weight:650;}
.d-sec ul.tick li{font-size:.93rem;}
.d-sec code{font-family:var(--mono);font-size:.85em;}
.d-sec a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--accent-ink) 45%,transparent);}
.d-sec a:hover{text-decoration-color:var(--accent-ink);}
pre.cmds{margin:0;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;
  padding:.85rem 1rem;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.75;color:var(--ink-2);}
.cl{display:flex;flex-direction:column;gap:.45rem;}
.cl-item{display:flex;gap:.6rem;align-items:baseline;font-size:.93rem;color:var(--ink-2);
  cursor:pointer;line-height:1.45;}
.cl-item input{accent-color:var(--accent);width:.95rem;height:.95rem;flex:none;
  transform:translateY(.12em);cursor:pointer;}
.cl-item input:checked+span{color:var(--faint);text-decoration:line-through;}
.log-empty{color:var(--faint);font-style:italic;}

/* embedded FigJam board */
.figma-embed{display:block;width:100%;height:520px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);}
.figma-note{margin-top:.6rem !important;font-size:.8rem !important;color:var(--muted) !important;}
@media (max-width:640px){.figma-embed{height:360px;}}

/* prev / next phase nav */
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;}
.pn-a{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.7rem 1rem;box-shadow:var(--shadow);transition:border-color .18s ease;}
.pn-a:hover{border-color:var(--accent);}
.pn-a .pn-l{font-family:var(--mono);font-size:.68rem;color:var(--faint);font-weight:600;}
.pn-a .pn-t{font-size:.9rem;font-weight:650;color:var(--ink);}
.pn-next{margin-left:auto;align-items:flex-end;text-align:right;}

@media(prefers-reduced-motion:reduce){*{transition:none!important;}}