:root{
    --wine:#8a0f12; --wine-dark:#5e090b; --red:#c8102e; --gold:#c9962b; --cream:#fdf6e6;
    --ink:#1f1a17; --muted:#6b625a; --line:#e9dfcf; --bg:#fffdf8;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 Roboto,system-ui,sans-serif}
  a{color:var(--wine)}
  header.hero{background:linear-gradient(135deg,var(--wine-dark),var(--wine));color:#fff;padding:56px 24px 48px;border-bottom:5px solid var(--gold)}
  .hero-in{max-width:1180px;margin:0 auto}
  .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:#f3d48a;font-weight:700}
  h1{font-family:Roboto,sans-serif;font-weight:500;font-size:clamp(34px,5vw,54px);line-height:1.05;margin:10px 0 14px}
  .hero p{max-width:720px;font-size:19px;color:#f6ece6;margin:0}
  .layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:48px;padding:40px 24px 80px}
  nav.toc{position:sticky;top:20px;align-self:start;font-size:15px;max-height:calc(100vh - 40px);overflow-y:auto}
  nav.toc h4{margin:0 0 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  nav.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
  nav.toc li{counter-increment:t}
  nav.toc a{display:block;padding:5px 10px;border-left:3px solid transparent;text-decoration:none;color:var(--ink)}
  nav.toc a::before{content:counter(t) ". ";color:var(--gold);font-weight:700}
  nav.toc a:hover,nav.toc a.on{border-left-color:var(--red);background:var(--cream)}
  main section{padding-top:8px;margin-bottom:64px;scroll-margin-top:16px}
  h2{font-family:Roboto,sans-serif;font-weight:500;font-size:32px;line-height:1.1;color:var(--wine);margin:0 0 6px}
  h2 .n{color:var(--gold);margin-right:10px}
  h3{font-size:20px;margin:30px 0 6px}
  .lede{font-size:19px;color:var(--muted);margin:0 0 20px}
  figure{margin:22px 0 26px}
  figure.map svg{width:100%;height:auto;display:block;background:var(--cream);border-radius:10px;border:1px solid var(--line)}
  figure img{width:100%;display:block;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(60,20,10,.10);cursor:zoom-in;background:#fff}
  figcaption{font-size:14px;color:var(--muted);margin-top:8px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .two figure{margin:10px 0}
  ol.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0}
  ol.steps>li{counter-increment:s;position:relative;padding:4px 0 12px 46px}
  ol.steps>li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}
  .tip{background:var(--cream);border-left:4px solid var(--gold);padding:12px 16px;border-radius:6px;margin:18px 0}
  .tip b:first-child{color:var(--wine)}
  table.ref{width:100%;border-collapse:collapse;margin:14px 0;font-size:16px}
  table.ref th,table.ref td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
  table.ref th{background:var(--wine);color:#fff;font-weight:600}
  table.ref td:first-child{font-weight:600;white-space:nowrap}
  .pill{display:inline-block;background:var(--red);color:#fff;border-radius:999px;padding:0 10px;font-size:14px;font-weight:600;line-height:24px}
  .pill.o{background:#fff;color:var(--red);border:1.5px solid var(--red)}
  ul.benefits{columns:2;column-gap:32px;padding-left:20px}
  ul.benefits li{break-inside:avoid;margin-bottom:6px}
  footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px;text-align:center;padding:24px}
  #lb{position:fixed;inset:0;background:rgba(20,8,6,.88);display:none;align-items:center;justify-content:center;padding:24px;z-index:9;cursor:zoom-out}
  #lb img{max-width:100%;max-height:100%;border-radius:8px}
  @media (max-width:900px){.layout{grid-template-columns:1fr}nav.toc{position:static}.two{grid-template-columns:1fr}ul.benefits{columns:1}}

  #mbar{display:none;position:sticky;top:0;z-index:7;height:52px;background:var(--wine);color:#fff;align-items:center;justify-content:space-between;padding:0 8px 0 16px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
  #mbar .t{font:500 16px Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #tocbtn{background:none;border:0;color:#fff;font:500 15px Roboto,sans-serif;padding:10px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:6px}
  #tocbtn:active{background:rgba(255,255,255,.15)}
  #tocbtn span{font-size:22px;line-height:1}
  #tocback{display:none;position:fixed;inset:0;background:rgba(20,8,6,.45);z-index:8}
  @media (max-width:900px){
    #mbar{display:flex}
    .hero .eyebrow{display:none}
    main section{scroll-margin-top:64px}
    nav.toc{position:fixed;top:0;bottom:0;right:0;left:auto;height:100vh;height:100dvh;margin:0;width:min(300px,85vw);background:#fff;z-index:9;padding:24px 18px;overflow-y:auto;transform:translateX(105%);transition:transform .25s;box-shadow:-4px 0 20px rgba(0,0,0,.2)}
    body.tocopen nav.toc{transform:none}
    body.tocopen #tocback{display:block}
    nav.toc h4{display:flex;justify-content:space-between;align-items:center}
  }
  #tocclose{display:none;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
  @media (max-width:900px){#tocclose{display:inline}}

  /* guides menu */
  .gnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
  .gnav a{white-space:nowrap;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:500}
  .gnav a:hover{background:rgba(255,255,255,.12)}
  .gnav a.cur{background:#fff;color:var(--wine);border-color:#fff}
  .gnav a.all{border-style:dashed}
  .dguides{display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
  .dguides h4{margin:0 0 8px}
  .dguides a{display:block;padding:5px 10px;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
  .dguides a.cur{border-left-color:var(--gold);background:var(--cream);font-weight:500}
  .dguides a::before{content:none!important}
  @media (max-width:900px){ .gnav{display:none} }
  /* hub */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;max-width:1180px;margin:40px auto 80px;padding:0 24px}
  .card{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;box-shadow:0 6px 24px rgba(60,20,10,.06);transition:transform .15s,box-shadow .15s}
  .card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(60,20,10,.12)}
  .card .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .card h3{margin:8px 0 8px;color:var(--wine);font-weight:500;font-size:22px}
  .card p{margin:0;color:var(--muted);font-size:16px}
  .card .go{display:inline-block;margin-top:14px;color:var(--red);font-weight:500}

  /* looping demo videos */
  figure.vid video{width:100%;display:block;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(60,20,10,.10);background:#fff}
  figure.vid figcaption{color:var(--wine);font-weight:500}

  /* links back to the guides index */
  .crumb{display:inline-block;color:#f3d48a;text-decoration:none;font-size:14px;font-weight:500;margin-bottom:14px}
  .crumb:hover{text-decoration:underline}
  .endnav{border-top:2px solid var(--gold);margin-top:24px;padding-top:20px}
  .endnav h3{margin:0 0 12px}
  #endguides{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
  #endguides a{display:block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:var(--wine);font-weight:500}
  #endguides a:hover{background:var(--cream)}
  .endnav .back{font-weight:500}

  /* animated link map (Getting Started, section 6) */
  #linkmap .nd{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
  #linkmap .ln{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
  #linkmap .dots,#linkmap .hint{opacity:0}
  #linkmap.on .nd{animation:nd-pop .55s cubic-bezier(.3,1.6,.5,1) var(--d) forwards}
  #linkmap.on .ln{animation:ln-draw .6s ease-out var(--d) forwards}
  #linkmap.on .hint{transition:opacity .6s 2s;opacity:1}
  #linkmap.on .dots{transition:opacity .8s 2.2s;opacity:1}
  #linkmap .nd:hover{animation:none;transform:scale(1.08);opacity:1;transition:transform .2s}
  @keyframes nd-pop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
  @keyframes ln-draw{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){
    #linkmap .nd,#linkmap .ln,#linkmap .hint{animation:none!important;transform:none;opacity:1;stroke-dashoffset:0}
    #linkmap .dots{display:none}
  }