:root{
    --ink:#231f20; --paper:#f1efe8; --card:#ffffff;
    --text:#2a2622; --muted:#6f6b62; --line:#e2ddcf;
    --green:#8dc63f; --green-ink:#46701e;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--text);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace}
  a{color:inherit}

  /* dark top bar */
  .bar{background:var(--ink);color:#f4f2ec}
  .bar .inner{max-width:820px;margin:0 auto;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px}
  .bar .bl{display:flex;align-items:center;gap:16px;min-width:0}
  .bar .barhome{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--green);text-decoration:none;white-space:nowrap}
  .bar .barhome:hover{color:#a0d64f}
  .bar .barback{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b6b2a8;text-decoration:none;white-space:nowrap}
  .bar .barback:hover{color:var(--green)}
  .bar .hlinks{display:flex;align-items:center;gap:8px}
  .bar .ico{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
  .bar .hlink{font-size:12.5px;color:#d7d3c8;border:1px solid #48423f;border-radius:8px;padding:5px 11px;display:inline-flex;align-items:center;text-decoration:none;transition:all .15s}
  .bar .hlink:hover{border-color:var(--green);color:var(--green)}
  .bar .hlink.solid{background:var(--green);border-color:var(--green);color:var(--ink);font-weight:600}
  .bar .hlink.solid:hover{background:#a0d64f}

  .wrap{max-width:820px;margin:0 auto;padding:34px 22px 80px}
  .back{display:none} /* renderer's inline back link hidden; bar has it */
  .phead .meta-line{font-family:"JetBrains Mono",monospace;color:var(--green-ink);font-size:12.5px;letter-spacing:.03em;margin:0 0 8px}
  .phead h1{font-size:32px;line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
  .lede{font-size:17px;line-height:1.55;color:#3f3a34;margin:0 0 18px;max-width:64ch}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
  .chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 10px;background:#faf8f2}
  .links{display:flex;gap:16px;margin-bottom:8px}
  .ext{color:var(--green-ink);font-size:13px;text-decoration:none;font-weight:600}
  .ext:hover{text-decoration:underline}
  .subsec{border-top:1px solid var(--line);margin-top:28px;padding-top:20px}
  .subsec h2{font-size:19px;margin:0 0 8px;color:var(--ink)}
  .body,.subsec{font-size:15px;line-height:1.65;color:#3f3a34}
  .body p,.subsec p{margin:0 0 14px}
  .gallery{margin-top:34px;display:grid;gap:26px}
  .media{margin:0}
  .media img,.media video{width:100%;border:1px solid var(--line);border-radius:10px;display:block;background:#fff;box-shadow:0 2px 8px rgba(35,31,32,.06)}
  .media img{cursor:zoom-in}
  /* click-to-view diagram thumbnails */
  .media-thumb{display:inline-block;width:330px;max-width:100%;vertical-align:top;margin:6px 16px 12px 0}
  .media-thumb img{border-radius:8px}
  .media-thumb figcaption{font-size:12px;margin-top:6px}
  .media-thumb .mt-cta{color:var(--green-ink);font-weight:600;white-space:nowrap}
  .media-thumb .mt-cta::before{content:"⤢ "}
  /* phone-framed thumbnails — app screenshots shown "on device" (clipped to the frame) */
  .media-phone{width:200px}
  .media-phone .phone-frame{display:block;width:200px;aspect-ratio:9/19;border-radius:26px;border:7px solid #1c1a19;overflow:hidden;background:#000;box-shadow:0 4px 14px rgba(35,31,32,.22)}
  .media-phone .phone-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;border:0;border-radius:0;box-shadow:none;background:#000}
  /* keep gallery videos a sane size */
  .gallery .media video{max-width:420px;margin:0 auto}
  /* lightbox */
  #pf-lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(20,18,16,.9);cursor:zoom-out;padding:24px}
  #pf-lightbox.open{display:flex}
  #pf-lightbox img{max-width:96vw;max-height:92vh;width:auto;border:none;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#eceae5}
  #pf-lightbox .lb-close{position:fixed;top:16px;right:24px;background:none;border:none;color:#fff;font-size:38px;line-height:1;cursor:pointer;opacity:.85}
  #pf-lightbox .lb-close:hover{opacity:1}
  .media.embed iframe{width:100%;min-height:520px;border:1px solid var(--line);border-radius:10px;display:block;background:#fff;box-shadow:0 2px 8px rgba(35,31,32,.06)}
  /* walkthrough player embed: the player supplies its own frame, so the iframe is borderless */
  .walkthrough-sec{margin-top:22px}
  .walkthrough-embed{margin:0}
  .walkthrough-embed iframe{border:none;box-shadow:none;background:transparent;min-height:360px;transition:height .2s ease}
  .media figcaption{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.5}
  .media figcaption b{color:var(--ink);font-weight:600}
  /* collapsible diagram */
  .media-collapse{margin:20px 0;border:1px solid var(--line);border-radius:10px;background:#faf8f2;overflow:hidden}
  .media-collapse>summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--green-ink);display:flex;align-items:center;gap:8px}
  .media-collapse>summary::-webkit-details-marker{display:none}
  .media-collapse>summary::before{content:"▸";font-size:11px}
  .media-collapse[open]>summary::before{content:"▾"}
  .media-collapse[open]>summary{border-bottom:1px solid var(--line)}
  .media-collapse .media{margin:14px 16px 16px}
  /* features: outlined container + list-group selector + panels */
  .feat-wrap{border:1px solid var(--line);border-radius:12px;padding:18px;background:#faf8f2;display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:20px;margin-top:14px}
  @media(max-width:640px){.feat-wrap{grid-template-columns:1fr;gap:14px}}
  .lg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;align-self:start}
  .lg-item{text-align:left;font-family:inherit;font-size:13px;line-height:1.35;color:var(--text);background:#fff;border:0;border-bottom:1px solid var(--line);padding:11px 13px;cursor:pointer;display:flex;gap:8px;align-items:baseline;transition:background .15s,color .15s}
  .lg-item:last-child{border-bottom:0}
  .lg-item .lg-emoji{font-size:14px;line-height:1}
  .lg-item:hover{background:#f2f7e8;color:var(--green-ink)}
  .lg-item.active{background:var(--green);color:var(--ink);font-weight:600}
  .lg-item:focus-visible{outline:2px solid var(--green-ink);outline-offset:-2px}
  .feat-panel{display:none;font-size:14.5px;line-height:1.62;color:#3f3a34}
  .feat-panel.active{display:block}
  .feat-panel p:first-child{margin-top:0}
  .feat-panel ul{margin:0;padding-left:0;list-style:none}
  .feat-panel li{margin:0 0 10px;padding-left:0}
  .feat-panel li:last-child{margin-bottom:0}
  /* skills table mode */
  .skstack{display:flex;flex-direction:column;gap:22px}
  .skgroup2 h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink);margin:0 0 8px;font-weight:600}
  .sktable{width:100%;border-collapse:collapse;font-size:13px}
  .sktable th{text-align:left;vertical-align:top;width:32%;padding:7px 14px 7px 0;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}
  .sktable td{vertical-align:top;padding:7px 0;color:#4a453f;line-height:1.5;border-top:1px solid var(--line)}
  .skills-sec{margin-top:34px}
  .skgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px;margin-top:4px}
  .skgroup h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink);margin:0 0 8px;font-weight:600}
  .skgroup ul{list-style:none;margin:0;padding:0}
  .skgroup li{font-size:13.5px;line-height:1.55;color:#3f3a34;padding:2px 0 2px 14px;position:relative}
  .skgroup li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--green)}
  .soon-note{color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:16px 18px;margin-top:30px;background:#faf8f2}
  footer{color:var(--muted);font-size:12px;margin-top:48px;border-top:1px solid var(--line);padding-top:16px}
  footer a{text-decoration:none;color:var(--green-ink)} footer a:hover{text-decoration:underline}