:root{
  --paper:#F1F1EF;
  --panel:#FFFFFF;
  --device:#E4E4E1;
  --ink:#1C1D1F;
  --muted:#5F6267;
  --rule:#D6D6D2;
  --signal:#E9A800;
  --signal-ink:#1C1D1F;
  --do:#2B7348;
  --dont:#B03D2B;
  --focus:#2457C5;
  --sans:"Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#151617; --panel:#1E1F21; --device:#2A2B2E; --ink:#EDEDEA; --muted:#A3A6AB;
    --rule:#34363A; --signal:#F2BE2E; --signal-ink:#151617; --do:#5DBA84; --dont:#E57C68; --focus:#7FA6FF;
  }
}
:root[data-theme="dark"]{
  --paper:#151617; --panel:#1E1F21; --device:#2A2B2E; --ink:#EDEDEA; --muted:#A3A6AB;
  --rule:#34363A; --signal:#F2BE2E; --signal-ink:#151617; --do:#5DBA84; --dont:#E57C68; --focus:#7FA6FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.62;font-optical-sizing:auto}
a{color:inherit;text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.15;letter-spacing:-0.01em;margin:0}
p{margin:0 0 1em}
.wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;max-width:1160px;margin:0 auto;padding:0 32px}
/* ---------- Index rail ---------- */
.rail{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:40px 0 40px;font-family:var(--sans);font-size:14px;line-height:1.4}
.rail .brand{font-weight:600;font-size:15px;margin-bottom:28px;display:flex;gap:10px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--signal);display:inline-block;flex:none}
.rail h4{font-size:12.5px;font-weight:600;color:var(--muted);margin:22px 0 8px}
.rail ol{list-style:none;margin:0;padding:0}
.rail li a{display:grid;grid-template-columns:24px 1fr;padding:5px 0;text-decoration:none;color:var(--muted)}
.rail li a .n{font-variant-numeric:tabular-nums;color:var(--muted);opacity:.7}
.rail li a:hover,.rail li a.active{color:var(--ink)}
.rail li a.active .n{color:var(--ink);opacity:1}
.rail .plain a{grid-template-columns:1fr}
.theme{margin-top:28px;display:flex;gap:6px}
.theme button{font:inherit;font-size:12.5px;border:1px solid var(--rule);background:transparent;color:var(--muted);border-radius:999px;padding:4px 10px;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mobile-nav{display:none}
main{padding:56px 0 120px;min-width:0}
/* ---------- Opening ---------- */
.opening{max-width:var(--measure);padding-bottom:40px}
.opening h1{font-size:clamp(44px,6.4vw,76px);font-weight:600;letter-spacing:-0.03em;line-height:.98;margin:8px 0 24px}
.opening h1 .soft{color:var(--muted);font-weight:500}
.opening .lede{font-size:21px;line-height:1.5}
.cast{margin:48px 0 0;border-top:1px solid var(--rule)}
.cast-row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.cast-row h3{font-size:16px;font-weight:600}
.cast-row .role{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:2px}
.cast-row p{margin:0;font-size:16.5px;line-height:1.55}
.cast-row .start{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:6px}
/* ---------- Parts & chapters ---------- */
.part{margin:96px 0 0;max-width:var(--measure)}
.part .label{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:500}
.part h2{font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-0.02em;margin-top:6px}
.part p{margin-top:14px;color:var(--muted)}
.chapter{margin-top:72px;padding-top:40px;border-top:1px solid var(--rule)}
.chapter > *{max-width:var(--measure)}
.chapter > .specimen{max-width:none}
.ch-head{display:grid;grid-template-columns:56px 1fr;align-items:baseline}
.ch-head .num{font-family:var(--sans);font-size:30px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ch-head h2{font-size:clamp(28px,3.4vw,36px);font-weight:600;letter-spacing:-0.02em}
.taught{font-family:var(--sans);font-size:14.5px;color:var(--muted);margin:10px 0 24px 56px}
.taught b{color:var(--ink);font-weight:600}
.core{font-size:21px;line-height:1.5;margin-bottom:20px}
h3.sub{font-size:17px;font-weight:600;margin:32px 0 12px}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0 8px;max-width:var(--measure)}
.dodont h4{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid currentColor}
.dodont .do h4{color:var(--do)}
.dodont .dont h4{color:var(--dont)}
.dodont ul{list-style:none;margin:0;padding:0}
.dodont li{font-size:16.5px;line-height:1.5;padding:7px 0 7px 20px;position:relative}
.dodont li::before{position:absolute;left:0;top:7px;font-family:var(--sans);font-weight:700;font-size:14px}
.dodont .do li::before{content:"+";color:var(--do)}
.dodont .dont li::before{content:"–";color:var(--dont)}
.examples{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.examples li{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.5}
.examples .ex-name{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.35}
.examples .ex-name small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.examples .ex-body .lesson{display:block;margin-top:4px;color:var(--muted);font-style:italic}
.try{margin:32px 0 0;padding:18px 22px;background:var(--panel);border-left:4px solid var(--signal);border-radius:0 10px 10px 0}
.try h4{font-size:15px;font-weight:600;margin-bottom:6px}
.try p{margin:0;font-size:16.5px}
.note{font-size:16px;color:var(--muted)}
/* ---------- Specimen (the live demonstration) ---------- */
.specimen{margin:32px 0 8px;background:var(--device);border-radius:22px;padding:18px;font-family:var(--sans);max-width:720px}
.spec-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 4px 14px}
.spec-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}
.seg{display:inline-flex;background:var(--paper);border-radius:999px;padding:3px;gap:2px}
.seg button{font:inherit;font-size:13.5px;font-weight:500;border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer;min-height:32px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.screen{background:var(--panel);border-radius:14px;min-height:200px;padding:20px;position:relative;overflow:hidden;color:var(--ink)}
.pane[hidden]{display:none}
.caption{font-size:13.5px;color:var(--muted);padding:12px 4px 2px;line-height:1.45}
.caption b{color:var(--ink);font-weight:600}
/* demo atoms */
.btn{font:inherit;font-size:14px;font-weight:600;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;background:var(--ink);color:var(--panel);min-height:40px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn:active{transform:translateY(1px)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--rule);font-size:15px}
.row:last-child{border-bottom:0}
.row .meta{color:var(--muted);font-size:13px}
.iconbtn{font:inherit;width:36px;height:36px;border-radius:9px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--panel);border-radius:10px;padding:10px 12px 10px 16px;font-size:14px;display:flex;gap:14px;align-items:center;white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast button{font:inherit;font-weight:600;background:transparent;color:var(--signal);border:0;cursor:pointer;padding:4px 6px}
.modal-back{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.modal{background:var(--panel);border-radius:12px;padding:18px;width:min(280px,90%);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.status{font-size:13.5px;color:var(--muted);margin-left:12px}
.status.ok{color:var(--do)}
.toolbar{display:flex;flex-wrap:wrap;gap:6px}
.toolbar span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--rule);border-radius:8px;font-size:13px;color:var(--muted)}
.toolbar span.primary{color:var(--ink);font-weight:600}
.focuspara{font-family:var(--serif);font-size:18px;line-height:1.65;margin:0}
.focuspara span{transition:opacity .25s;cursor:text}
.focuspara.on span{opacity:.25}
.focuspara.on span.cur{opacity:1}
.type-bad{font-family:Arial, sans-serif;font-size:12.5px;line-height:1.15;color:#9A9A9A;text-align:justify;margin:0}
.type-good{font-family:var(--serif);font-size:18px;line-height:1.6;max-width:56ch;margin:0}
.type-good h5,.type-bad h5{margin:0 0 6px}
.type-bad h5{font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#9A9A9A;text-decoration:underline}
.type-good h5{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-0.01em}
.livebox{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.preview-card{height:120px;background:var(--signal);display:flex;align-items:center;justify-content:center;color:var(--signal-ink);font-weight:600;transition:border-radius .05s}
.ctrl label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.ctrl input[type=number]{font:inherit;width:90px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink)}
.ctrl input[type=range]{width:100%;accent-color:var(--ink)}
.states{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.states button{font:inherit;font-size:13px;border:1px solid var(--rule);background:transparent;color:var(--muted);border-radius:999px;padding:5px 12px;cursor:pointer}
.states button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--device),var(--paper),var(--device));background-size:200% 100%;animation:sh 1.2s infinite linear;margin:14px 0}
@keyframes sh{to{background-position:-200% 0}}
.empty{text-align:center;padding:26px 10px;font-size:14.5px}
.empty p{color:var(--muted);margin:6px 0 14px}
.err{border:1px solid var(--dont);color:var(--ink);border-radius:10px;padding:12px 14px;font-size:14px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.overflow{white-space:nowrap}
.chip{font-size:12px;border-radius:999px;padding:2px 8px;background:var(--paper);color:var(--muted)}
.svgwrap svg{width:100%;height:auto;display:block}
.honest{display:grid;gap:10px;max-width:340px}
.honest .fine{font-size:11px;color:#B5B5B5;line-height:1.3}
.honest .tiny{font-size:12px;color:var(--muted);text-decoration:underline;text-align:center;opacity:.6}
.plan{border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.plan b{font-size:16px}

/* ---------- Illustrations ---------- */
svg text{font-family:var(--sans)}
svg text.serif{font-family:var(--serif)}
svg text.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.f-ink{fill:var(--ink)}.f-mut{fill:var(--muted)}.f-rule{fill:var(--rule)}.f-panel{fill:var(--panel)}.f-paper{fill:var(--paper)}
.f-dev{fill:var(--device)}.f-sig{fill:var(--signal)}.f-sigink{fill:var(--signal-ink)}.f-do{fill:var(--do)}.f-dont{fill:var(--dont)}.f-none{fill:none}
.s-ink{stroke:var(--ink)}.s-mut{stroke:var(--muted)}.s-rule{stroke:var(--rule)}.s-panel{stroke:var(--panel)}.s-sig{stroke:var(--signal)}
.s-sigink{stroke:var(--signal-ink)}.s-do{stroke:var(--do)}.s-dont{stroke:var(--dont)}.s-focus{stroke:var(--focus)}
figure{margin:0}
.diagram{margin:28px 0 8px;max-width:var(--measure)}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption,.pic figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:10px}
.diagram figcaption b,.pic figcaption b{color:var(--ink);font-weight:600}
.pics{max-width:var(--measure);margin:22px 0 4px}
.pics h3{font-size:17px;font-weight:600;margin:0 0 12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.pic{background:var(--device);border-radius:14px;padding:10px 10px 12px}
.pic svg{width:100%;height:auto;display:block}
.pic .tag{font-family:var(--sans);font-size:12.5px;font-weight:600;margin:0 2px 8px;display:flex;align-items:center;gap:6px}
.pic .tag::before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block}
.pic.do .tag{color:var(--do)}.pic.do .tag::before{background:var(--do)}
.pic.dont .tag{color:var(--dont)}.pic.dont .tag::before{background:var(--dont)}
.pic figcaption{margin:8px 2px 0;font-size:13px}
.chapter .examples li{grid-template-columns:168px 1fr;gap:4px 20px;align-items:start}
.examples .ex-fig{grid-row:span 2}
.ex-fig{background:var(--device);border-radius:10px;padding:5px;margin-top:2px}
.ex-fig svg{width:100%;height:auto;display:block}
@media (max-width: 960px){
  .chapter .examples li{grid-template-columns:120px 1fr;gap:4px 14px}
}
@media (max-width: 420px){
  .pair{gap:10px}
  .pic{padding:8px}
  .chapter .examples li{grid-template-columns:96px 1fr}
}
/* ---------- Checklist ---------- */
.checklist{margin-top:28px;max-width:var(--measure)}
.checklist fieldset{border:0;margin:0 0 26px;padding:0}
.checklist legend{font-family:var(--sans);font-weight:600;font-size:16px;margin-bottom:8px;padding:0}
.checklist label{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.45;cursor:pointer}
.checklist input{width:18px;height:18px;margin-top:4px;accent-color:var(--do)}
.checklist label:has(input:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--rule)}
.reset{font-family:var(--sans);font-size:14px;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.loop{counter-reset:s;list-style:none;padding:0;margin:20px 0 0;max-width:var(--measure)}
.loop li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.loop li::before{content:counter(s);font-family:var(--sans);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.reading{list-style:none;padding:0;margin:20px 0 0;max-width:var(--measure)}
.reading li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.reading .t{font-family:var(--sans);font-weight:600;font-size:15.5px}
.reading .w{font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.sources{font-size:14.5px;line-height:1.5;color:var(--muted);columns:2;column-gap:32px;padding-left:18px;margin-top:16px}
.sources li{margin-bottom:6px;break-inside:avoid}
footer{margin-top:56px;font-family:var(--sans);font-size:13.5px;color:var(--muted);max-width:var(--measure)}
/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .wrap{grid-template-columns:1fr;gap:0;padding:0 16px}
  .rail{display:none}
  .mobile-nav{display:block;position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);margin:0 -16px;padding:0 16px;font-family:var(--sans)}
  .mobile-nav summary{list-style:none;cursor:pointer;padding:14px 0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary .cur{font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav ol{list-style:none;padding:0 0 14px;margin:0;max-height:60vh;overflow:auto;font-size:15px}
  .mobile-nav li a{display:block;padding:8px 0;text-decoration:none;color:var(--muted)}
  main{padding-top:32px}
  .opening .lede{font-size:19px}
  .cast-row{grid-template-columns:1fr;gap:6px}
  .examples li{grid-template-columns:1fr;gap:4px}
  .dodont{grid-template-columns:1fr;gap:18px}
  .ch-head{grid-template-columns:44px 1fr}
  .ch-head .num{font-size:24px}
  .taught{margin-left:44px}
  .core{font-size:19px}
  .specimen{border-radius:18px;padding:12px}
  .screen{padding:16px}
  .livebox{grid-template-columns:1fr}
  .sources{columns:1}
  body{font-size:17px}
}

/* =====================================================================
   COURSE ADDITIONS — shared by every guide in "The Product Design Course"
   ===================================================================== */
:root{--accent2:#2F6F8F;--warn:#B7791F;--code:#ECECE8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent2:#7DB8D6;--warn:#E3B04B;--code:#26272A;color-scheme:dark}}
:root[data-theme="dark"]{--accent2:#7DB8D6;--warn:#E3B04B;--code:#26272A;color-scheme:dark}
.wrap{padding-left:max(32px, env(safe-area-inset-left,0px));padding-right:max(32px, env(safe-area-inset-right,0px))}
@media (max-width:960px){.wrap{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}}
h1,h2,h3{text-wrap:balance}
code,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86em;background:var(--code);border-radius:5px;padding:1px 5px}
kbd{border:1px solid var(--rule);border-bottom-width:2px}
pre{background:var(--code);border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:14px;line-height:1.5;max-width:var(--measure)}
pre code{background:none;padding:0}
.chapter ul:not([class]),.chapter ol:not([class]){padding-left:1.3em;max-width:var(--measure)}
.chapter ul:not([class]) li,.chapter ol:not([class]) li{margin-bottom:.4em}
h3.sub{scroll-margin-top:20px}
.chapter,.part{scroll-margin-top:16px}

/* Course bar (top of every guide) */
.coursebar{font-family:var(--sans);font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:28px}
.coursebar a{color:var(--muted);text-decoration:none}
.coursebar a:hover{color:var(--ink)}
.coursebar .sep{opacity:.5}
.rail .home{display:block;font-size:13px;color:var(--muted);text-decoration:none;margin:-14px 0 20px}
.rail .home:hover{color:var(--ink)}
.rail .prog{height:4px;background:var(--rule);border-radius:4px;margin:0 0 6px;overflow:hidden}
.rail .prog i{display:block;height:100%;background:var(--do);width:0;transition:width .3s}
.rail .progtxt{font-size:12.5px;color:var(--muted)}
.rail li a .tick{color:var(--do);margin-left:4px}

/* Opening meta */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px;font-family:var(--sans);font-size:14px;margin:28px 0 0;max-width:var(--measure);border-top:1px solid var(--rule);padding-top:16px}
.meta-grid div b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px}
.objectives{background:var(--panel);border-radius:14px;padding:20px 24px;margin:28px 0 0;max-width:var(--measure)}
.objectives h3{font-size:15px;font-weight:600;margin-bottom:10px}
.objectives ul{margin:0;padding-left:1.2em;font-size:16.5px}
.objectives li{margin-bottom:6px}

/* Key idea / callouts */
.keyidea{margin:28px 0;padding:20px 24px;background:var(--ink);color:var(--paper);border-radius:14px;max-width:var(--measure)}
.keyidea .k{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:6px;font-weight:600}
.keyidea p{margin:0;font-size:19px;line-height:1.5}
.callout{margin:24px 0;padding:16px 20px;border:1px solid var(--rule);border-radius:12px;max-width:var(--measure);font-size:16.5px}
.callout .k{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.callout p:last-child{margin-bottom:0}
.callout.solo .k{color:var(--accent2)}
.callout.solo{border-color:color-mix(in srgb,var(--accent2) 45%,var(--rule))}
.callout.warn .k{color:var(--warn)}
.callout.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--rule))}
.callout.myth .k{color:var(--dont)}
.pullquote{margin:32px 0;max-width:var(--measure);font-size:24px;line-height:1.4;font-style:italic;padding-left:20px;border-left:3px solid var(--signal)}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--muted);margin-top:8px}

/* Visual compare (do / don't mockups side by side, any HTML or SVG inside) */
.vcompare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 8px;max-width:820px}
.vcompare.three{grid-template-columns:repeat(3,1fr)}
.vcompare > figure{background:var(--device);border-radius:14px;padding:10px 10px 12px;min-width:0}
.vcompare .tag{font-family:var(--sans);font-size:12.5px;font-weight:600;margin:0 2px 8px;display:flex;align-items:center;gap:6px}
.vcompare .tag::before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.vcompare .do .tag{color:var(--do)}.vcompare .do .tag::before{background:var(--do)}
.vcompare .dont .tag{color:var(--dont)}.vcompare .dont .tag::before{background:var(--dont)}
.vcompare svg{width:100%;height:auto;display:block}
.vcompare .canvas{background:var(--panel);border-radius:9px;padding:14px;font-family:var(--sans);font-size:14px;color:var(--ink);overflow:hidden}
.vcompare figcaption{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);margin:8px 2px 0}
.vcompare figcaption b{color:var(--ink)}

/* Wide figure */
.diagram.wide{max-width:900px;overflow-x:auto}
@media (max-width:640px){.diagram.wide svg{min-width:620px}}
.scroll-x{overflow-x:auto;max-width:100%}

/* Common mistakes */
.mistakes{margin:28px 0 8px;max-width:var(--measure);display:grid;gap:12px}
.mistakes > h3{font-size:17px;font-weight:600;margin:0 0 2px}
.mistake{border:1px solid var(--rule);border-left:4px solid var(--dont);border-radius:4px 12px 12px 4px;padding:14px 18px;background:var(--panel)}
.mistake h4{font-size:15.5px;font-weight:600;margin:0 0 6px}
.mistake p{margin:0 0 6px;font-size:16px;line-height:1.5}
.mistake p:last-child{margin:0}
.mistake .fix{color:var(--ink)}
.mistake .fix::before{content:"Fix: ";font-family:var(--sans);font-weight:700;color:var(--do);font-size:14px}
.mistake .why::before{content:"Why it happens: ";font-family:var(--sans);font-weight:600;color:var(--muted);font-size:14px}

/* Quiz */
.quiz{margin:28px 0;padding:18px 22px;border-radius:14px;background:var(--panel);max-width:var(--measure);font-family:var(--sans)}
.quiz .q-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.quiz .q{font-size:16.5px;font-weight:600;margin:0 0 12px;line-height:1.4}
.quiz .opts{display:grid;gap:8px}
.quiz .opts button{font:inherit;font-size:15px;text-align:left;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:10px;padding:10px 14px;cursor:pointer;line-height:1.4}
.quiz .opts button:hover{border-color:var(--ink)}
.quiz .opts button.right{border-color:var(--do);background:color-mix(in srgb,var(--do) 12%,transparent)}
.quiz .opts button.wrong{border-color:var(--dont);background:color-mix(in srgb,var(--dont) 10%,transparent)}
.quiz .explain{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink);font-family:var(--serif)}
.quiz .explain b{font-family:var(--sans)}

/* Exercise */
.exercise{margin:32px 0 8px;border:2px solid var(--ink);border-radius:16px;padding:20px 24px;max-width:var(--measure)}
.exercise .ex-k{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.exercise .ex-k span{font-weight:500;color:var(--muted);letter-spacing:.02em;text-transform:none;font-size:13px}
.exercise h4{font-size:19px;font-weight:600;margin:0 0 10px}
.exercise ol,.exercise ul{padding-left:1.3em;font-size:16.5px;margin:0 0 12px}
.exercise li{margin-bottom:6px}
.exercise .deliver{font-family:var(--sans);font-size:14.5px;background:var(--paper);border-radius:10px;padding:10px 14px;margin:8px 0 0}
.exercise .deliver b{font-weight:600}
.rubric{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px;margin-top:12px}
.rubric th,.rubric td{border-top:1px solid var(--rule);padding:8px 8px;text-align:left;vertical-align:top;line-height:1.4}
.rubric th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}

/* Interactive checklist (persistent) */
.cklist{margin:24px 0;max-width:var(--measure);font-family:var(--sans)}
.cklist .ck-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.cklist .ck-head h3,.cklist .ck-head h4{font-size:16px;font-weight:600;margin:0}
.cklist .ck-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cklist label{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:9px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:16.5px;line-height:1.45;cursor:pointer}
.cklist input{width:18px;height:18px;margin-top:4px;accent-color:var(--do)}
.cklist label:has(input:checked) span{color:var(--muted)}
.cklist .grp{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 0 2px}

/* Translation table: physical → software */
.table-wrap{overflow-x:auto;margin:24px 0;max-width:900px}
table.t{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.45}
table.t:has(th:nth-child(3)){min-width:560px}
table.t th{font-family:var(--sans);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:8px 12px 8px 0;border-bottom:2px solid var(--ink)}
table.t td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.t td:first-child{font-family:var(--sans);font-weight:600;font-size:14.5px}
table.t.num td{font-variant-numeric:tabular-nums}

/* Glossary */
dl.gloss{max-width:var(--measure);margin:20px 0}
dl.gloss dt{font-family:var(--sans);font-weight:600;font-size:15.5px;margin-top:14px}
dl.gloss dd{margin:2px 0 0;font-size:16.5px;line-height:1.5;padding-bottom:12px;border-bottom:1px solid var(--rule)}

/* Breakdown card (product teardown) */
.bd-head{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start;max-width:900px}
.bd-facts{font-family:var(--sans);font-size:13.5px;background:var(--panel);border-radius:14px;padding:14px 16px}
.bd-facts div{display:grid;grid-template-columns:90px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--rule)}
.bd-facts div:last-child{border:0}
.bd-facts b{color:var(--muted);font-weight:500}
.decisions{counter-reset:d;list-style:none;padding:0;margin:20px 0;max-width:var(--measure)}
.decisions li{counter-increment:d;display:grid;grid-template-columns:36px 1fr;gap:4px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.5}
.decisions li::before{content:counter(d);font-family:var(--sans);font-weight:700;color:var(--signal-ink);background:var(--signal);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;margin-top:2px}
.decisions li b{font-family:var(--sans);font-size:15px}
.steal{margin:20px 0;padding:16px 20px;background:var(--panel);border-radius:14px;max-width:var(--measure)}
.steal h4{font-size:15px;font-weight:600;margin:0 0 8px;color:var(--do)}
.steal ul{margin:0;padding-left:1.2em;font-size:16.5px}

/* Annotated mock (numbered pins on a picture) */
.annot{position:relative;max-width:720px;margin:24px 0 8px}
.annot svg{width:100%;height:auto;display:block}

/* Summary / takeaways */
.takeaways{margin:40px 0 0;padding:22px 26px;background:var(--panel);border-radius:16px;max-width:var(--measure)}
.takeaways h3{font-size:18px;font-weight:600;margin-bottom:10px}
.takeaways ol{margin:0;padding-left:1.3em;font-size:16.5px}
.takeaways li{margin-bottom:6px}

/* Chapter complete button */
.done-row{margin:36px 0 0;display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:14px;color:var(--muted);max-width:var(--measure)}
.done-btn{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;min-height:38px}
.done-btn[aria-pressed="true"]{background:var(--do);border-color:var(--do);color:var(--panel)}

/* Guide navigation at end */
.guide-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;max-width:var(--measure);font-family:var(--sans)}
.guide-nav a{display:block;border:1px solid var(--rule);border-radius:14px;padding:14px 18px;text-decoration:none}
.guide-nav a:hover{border-color:var(--ink)}
.guide-nav small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:2px}
.guide-nav .next{text-align:right}

/* Tabs (generic) */
.tabs{margin:24px 0;max-width:var(--measure)}
.tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tabs [role=tab]{font:inherit;font-family:var(--sans);font-size:13.5px;border:1px solid var(--rule);background:transparent;color:var(--muted);border-radius:999px;padding:6px 14px;cursor:pointer}
.tabs [role=tab][aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Lab (bigger interactive playground) */
.lab{margin:32px 0 8px;background:var(--device);border-radius:22px;padding:18px;font-family:var(--sans);max-width:820px}
.lab .lab-k{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;padding:2px 4px 14px}
.lab .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 18px;padding:12px 4px 4px;font-size:13px}
.lab .controls label{display:block;color:var(--muted);margin-bottom:4px}
.lab input[type=range]{width:100%;accent-color:var(--ink)}
.lab select,.lab input[type=text],.lab input[type=number],.lab textarea{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink);width:100%}
.lab .out{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

/* Timeline / steps */
.steps{list-style:none;padding:0;margin:20px 0;max-width:var(--measure);counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:0 0 18px 44px;border-left:2px solid var(--rule);margin-left:13px;font-size:16.5px}
.steps li:last-child{border-color:transparent}
.steps li::before{content:counter(st);position:absolute;left:-14px;top:0;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.steps li b{font-family:var(--sans)}

/* Cards grid (hub, reference) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:20px 0}
.card{background:var(--panel);border-radius:14px;padding:16px 18px;font-family:var(--sans);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;border:1px solid transparent}
a.card:hover{border-color:var(--ink)}
.card .n{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.card h3{font-size:17px;font-weight:600}
.card p{font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--muted);margin:0}
.card .bar{height:4px;background:var(--rule);border-radius:4px;overflow:hidden;margin-top:auto}
.card .bar i{display:block;height:100%;background:var(--do);width:0}

/* Tags */
.pill{display:inline-block;font-family:var(--sans);font-size:12px;border-radius:999px;padding:2px 9px;background:var(--paper);color:var(--muted);border:1px solid var(--rule);margin:0 4px 4px 0}

@media (max-width:960px){
  .vcompare,.vcompare.three{grid-template-columns:1fr}
  .bd-head{grid-template-columns:1fr}
  .guide-nav{grid-template-columns:1fr}
  .exercise{padding:16px 18px}
  .keyidea p{font-size:17.5px}
  .pullquote{font-size:20px}
}
@media (min-width:600px) and (max-width:960px){.vcompare{grid-template-columns:1fr 1fr}}
.f-focus{fill:var(--focus)}.f-acc2{fill:var(--accent2)}.f-warn{fill:var(--warn)}.s-acc2{stroke:var(--accent2)}.s-warn{stroke:var(--warn)}
.annot figcaption,figure.annot + figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:10px}.annot figcaption b{color:var(--ink);font-weight:600}