@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{
  --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE6; --text:#15181D; --text-2:#3A414B; --muted:#5E6875;
  --border:#DDDAD0; --accent:#4C6800; --accent-fill:#C8FF00; --accent-ink:#0A0D0F; --accent-soft:rgba(110,150,0,.10);
  --warn:#B4540F; --warn-soft:rgba(220,110,40,.12); --info:#1F5FB8; --info-soft:rgba(60,130,230,.10);
  --bad:#B42318; --bad-soft:rgba(220,50,40,.10);
  --mock-bg:#FBFAF7; --mock-field:#FFFFFF;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif; --body:'Space Grotesk',Arial,sans-serif; --mono:'Space Mono',Consolas,monospace;
}
/* Light by default; dark only when the reader picks it (saved in localStorage). */
:root{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1117; --surface:#111418; --surface-2:#161A20; --text:#EDE8DC; --text-2:#D8D2C4; --muted:#A1AAB6;
  --border:#252B34; --accent:#C8FF00; --accent-soft:rgba(200,255,0,.09); --warn:#FF9A5C; --warn-soft:rgba(255,122,60,.12);
  --info:#7DB5FF; --info-soft:rgba(74,158,255,.12); --bad:#FF8A80; --bad-soft:rgba(255,100,90,.12);
  --mock-bg:#0B0E13; --mock-field:#161A20;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text-2);font:15.5px/1.65 var(--body)}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Top bar */
.bar{border-bottom:1px solid var(--border);background:var(--surface)}
.bar .in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font:700 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--text);text-decoration:none}
.brand span{color:var(--muted);font-weight:400}
.bar .right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{font:700 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 10px;border:1px solid transparent}
.tabs a:hover{color:var(--text);background:var(--surface-2)}
.tabs a[aria-current]{color:var(--text);border-color:var(--border);background:var(--accent-soft)}
.ver{font:700 11px/1 var(--mono);letter-spacing:1px;background:var(--accent-fill);color:var(--accent-ink);padding:8px 10px;margin-left:6px}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--text);background:var(--surface);border:1px solid var(--border);padding:7px 10px;cursor:pointer;margin-left:6px}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}

/* Layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px}
nav.side{position:sticky;top:0;align-self:start;padding:36px 0;font-size:13.5px;max-height:100vh;overflow-y:auto}
nav.side p{font:700 10px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
nav.side p:first-child{margin-top:0}
nav.side a{display:block;padding:5px 10px;margin-left:-10px;color:var(--text-2);text-decoration:none;border-left:2px solid transparent}
nav.side a:hover{color:var(--text);background:var(--surface-2)}
nav.side a[aria-current]{border-left-color:var(--accent);color:var(--text);font-weight:600;background:var(--accent-soft)}
nav.side a.other{color:var(--muted);font-size:12.5px}
main{padding:36px 0 64px;min-width:0}

/* Type */
.eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
h1{font:600 clamp(38px,6vw,58px)/1 var(--display);text-transform:uppercase;letter-spacing:.3px;color:var(--text);margin:0 0 16px}
.lead{font-size:18px;line-height:1.6;color:var(--text-2);max-width:68ch;margin:0 0 28px}
.lead strong{color:var(--text)}
h2{font:700 24px/1.25 var(--body);color:var(--text);margin:52px 0 6px;padding-top:24px;border-top:1px solid var(--border)}
h2 + .sub{margin-top:0}
.sub{color:var(--muted);margin:0 0 20px;max-width:70ch}
h3{font:700 17px/1.3 var(--body);color:var(--text);margin:28px 0 8px}
p{max-width:72ch}
ul,ol{padding-left:22px} li{margin:4px 0}
main > ul, main > ol{max-width:72ch}
strong{color:var(--text)}
code{font:400 13px/1 var(--mono);background:var(--surface-2);padding:2px 5px}

/* UI vocabulary: a control's name, a path through the app, a key */
.ui{font-weight:700;color:var(--text);white-space:nowrap}
.path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font:700 12px/1.3 var(--mono);color:var(--text);background:var(--surface-2);border:1px solid var(--border);padding:3px 8px;vertical-align:baseline}
.path i{font-style:normal;color:var(--accent)}
kbd{font:700 11.5px/1 var(--mono);color:var(--text);background:var(--surface);border:1px solid var(--border);border-bottom-width:2px;padding:3px 6px}
.who{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;padding:4px 7px;background:var(--info-soft);color:var(--info);vertical-align:middle;margin-right:4px}

/* Stats, cards */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);background:var(--surface);margin:0 0 8px}
.stats div{padding:16px 14px;border-right:1px solid var(--border);text-align:center}
.stats div:last-child{border-right:0}
.stats b{display:block;font:700 20px/1.1 var(--mono);color:var(--accent);margin-bottom:6px}
.stats span{font:700 10.5px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border);border-right:0;border-bottom:0;margin:14px 0}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);padding:20px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.card .verb{font:600 21px/1 var(--display);text-transform:uppercase;letter-spacing:1.3px;color:var(--accent);margin:0 0 8px}
.card h4{font:700 15px/1.35 var(--body);color:var(--text);margin:0 0 6px}
.card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
.card ul{font-size:13.5px;color:var(--muted);margin:8px 0 0;padding-left:18px}
a.card{text-decoration:none;display:block}
a.card:hover{background:var(--surface-2)}
a.card .go{font:700 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-top:12px;display:block}

/* Tables */
.tbl{overflow-x:auto;border:1px solid var(--border);background:var(--surface);margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:700 10.5px/1.3 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);text-align:left;background:var(--surface-2)}
th,td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--text);font-weight:600}
td.c,th.c{text-align:center}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--muted)}

/* Callouts and tags */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);padding:14px 18px;margin:18px 0;max-width:76ch}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}
.callout.info{border-color:var(--info);background:var(--info-soft)}
.callout b.lbl{display:block;font:700 10.5px/1.3 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.callout.warn b.lbl{color:var(--warn)} .callout.info b.lbl{color:var(--info)}
.callout p{margin:0} .callout p + p{margin-top:8px}
.callout ul{margin:6px 0 0}
.tag{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;padding:4px 7px;background:var(--accent-soft);color:var(--accent);vertical-align:middle}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.info{background:var(--info-soft);color:var(--info)}

/* Numbered steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0;max-width:76ch}
.steps > li{counter-increment:s;position:relative;padding:0 0 16px 44px;margin:0}
.steps > li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;font:700 12px/1 var(--mono);background:var(--accent-fill);color:var(--accent-ink)}
.steps > li > b:first-child{display:block;color:var(--text)}
.steps ul{margin:6px 0 0}

/* Personas, stories, journeys */
.persona{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--border);background:var(--surface)}
.persona div{padding:16px 18px;border-right:1px solid var(--border)}
.persona div:last-child{border-right:0}
.persona h4{font:700 10.5px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.persona ul{margin:0;padding-left:18px;font-size:14px}
.story{border:1px solid var(--border);background:var(--surface);margin:14px 0;break-inside:avoid}
.story header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.story header code{font:700 11px/1 var(--mono);color:var(--accent);letter-spacing:1px;background:none;padding:0}
.story header h4{font:700 15.5px/1.3 var(--body);color:var(--text);margin:0;flex:1 1 260px}
.story .body{padding:14px 18px}
.story .as{margin:0 0 12px;font-size:15px}
.story .as em{font-style:normal;font:700 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-right:6px}
.story h5{font:700 10.5px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.story ol{margin:0;padding-left:20px;font-size:14px}
.story .meta{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-right:0;margin:14px 0}
.journey div{background:var(--surface);padding:14px 16px;border-right:1px solid var(--border)}
.journey b{display:block;font:600 18px/1 var(--display);text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:6px}
.journey p{font-size:13.5px;margin:0;color:var(--muted)}

/* Walkthrough: cast, scene, chapter map */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));border:1px solid var(--border);border-right:0;border-bottom:0;margin:14px 0}
.cast div{background:var(--surface);padding:14px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cast b{display:block;font:600 20px/1 var(--display);text-transform:uppercase;letter-spacing:1px;color:var(--text);margin-bottom:4px}
.cast span{display:block;font:700 10px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cast p{font-size:13.5px;color:var(--muted);margin:0}
.scene{border:1px solid var(--border);background:var(--surface);padding:16px 18px;margin:18px 0;max-width:80ch}
.scene .who-line{font:700 10.5px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.scene p{margin:0 0 8px} .scene p:last-child{margin:0}
.chapters{list-style:none;padding:0;margin:14px 0;border:1px solid var(--border);border-bottom:0;max-width:none}
.chapters li{margin:0;border-bottom:1px solid var(--border);background:var(--surface)}
.chapters a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:14px 16px;text-decoration:none;color:var(--text-2)}
.chapters a:hover{background:var(--surface-2)}
.chapters .n{font:600 30px/1 var(--display);color:var(--accent)}
.chapters b{display:block;color:var(--text)}
.chapters small{display:block;color:var(--muted);font-size:13.5px}

/* Screen illustrations: drawn from the real form's fields, not screenshots */
.mock{border:1px solid var(--border);background:var(--mock-bg);margin:18px 0;max-width:640px;break-inside:avoid;font-size:13.5px}
.mock .top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.mock .top b{color:var(--text);font-size:14px}
.mock .top small{font:700 9.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.mock .bd{padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.mock .f{display:flex;flex-direction:column;gap:4px;min-width:0}
.mock .f.w{grid-column:1/-1}
.mock .f label{font-weight:600;color:var(--text);font-size:12.5px}
.mock .f .in{border:1px solid var(--border);background:var(--mock-field);padding:6px 9px;color:var(--text);min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .f .in.ph{color:var(--muted)}
.mock .f .hint{font-size:11.5px;color:var(--muted);line-height:1.4}
.mock .sw{display:flex;align-items:center;gap:8px;color:var(--text)}
.mock .sw i{display:inline-block;width:30px;height:16px;background:var(--accent-fill);position:relative;flex:none}
.mock .sw i::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;background:var(--accent-ink)}
.mock .sw.off i{background:var(--border)}
.mock .sw.off i::after{left:2px;right:auto;background:var(--surface)}
.mock .ft{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--surface)}
.mock .btn{font-weight:600;font-size:12.5px;padding:6px 12px;border:1px solid var(--border);color:var(--text);background:var(--surface)}
.mock .btn.p{background:var(--accent-fill);color:var(--accent-ink);border-color:transparent}
.mock .rows{grid-column:1/-1;border:1px solid var(--border);background:var(--mock-field)}
.mock .rows div{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border)}
.mock .rows div:last-child{border-bottom:0}
.mock .rows span{color:var(--muted)}
.mock .stepper{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}
.mock .stepper span{font:700 10px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;padding:6px 8px;border:1px solid var(--border);color:var(--muted)}
.mock .stepper span.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.mock-cap{font-size:12px;color:var(--muted);margin:-10px 0 18px;max-width:640px}

/* FAQ */
details{border:1px solid var(--border);background:var(--surface);margin:8px 0;max-width:80ch}
details summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--text)}
details > div{padding:0 16px 14px}
details p{margin:6px 0}

/* Pager, footer */
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:56px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;flex-wrap:wrap}
.pager a{text-decoration:none}
.pager a.next{text-align:right;margin-left:auto}
.pager small{display:block;font:700 10px/1.4 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
footer{border-top:1px solid var(--border);background:var(--surface)}
footer .in{max-width:1180px;margin:0 auto;padding:16px;font:400 11px/1.6 var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr;gap:0}
  nav.side{position:static;max-height:none;padding:20px 0 0;display:flex;flex-wrap:wrap;gap:6px}
  nav.side p{display:none}
  nav.side a{margin:0;border:1px solid var(--border);padding:5px 9px;font-size:12.5px;background:var(--surface)}
  nav.side a[aria-current]{border-color:var(--accent)}
  nav.side a.other{display:none}
  .cards,.cards.three,.persona,.journey{grid-template-columns:1fr}
  .persona div{border-right:0;border-bottom:1px solid var(--border)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .mock .bd{grid-template-columns:1fr}
}
@media print{
  nav.side,.pager,.tabs,.theme-toggle{display:none}
  .wrap{display:block;max-width:none}
  body{background:#fff;font-size:12.5px}
  :root[data-theme="dark"]{--bg:#fff;--surface:#fff;--surface-2:#EFEDE6;--text:#15181D;--text-2:#3A414B;--muted:#5E6875;--border:#DDDAD0;--accent:#4C6800;--mock-bg:#FBFAF7;--mock-field:#fff}
  h2{break-after:avoid} .card,.story,.callout,tr,.mock,.scene{break-inside:avoid}
}