:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#737373;
  --faint:#a3a3a3;
  --line:#ebebeb;
  --hover:#f5f5f5;
  --accent:var(--ink);
  --gutter:max(clamp(20px, 5vw, 48px), calc((100% - 1280px) / 2));
  --chip:var(--hover);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a;
    --ink:#fafafa;
    --muted:#a1a1a1;
    --faint:#6b6b6b;
    --line:#222222;
    --hover:#171717;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0a;
  --ink:#fafafa;
  --muted:#a1a1a1;
  --faint:#6b6b6b;
  --line:#222222;
  --hover:#171717;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.view{min-height:100vh;}
[hidden]{display:none !important;}

/* Present keeps the shared header (assets/header.css) fixed and compact. */
body .site-head{border-bottom-color:var(--line)}
.site-head > .site-head-in{align-items:center;padding:16px var(--gutter)}
.site-head > .site-head-in .brand-tag{display:none}
.site-head > .site-head-in .brand-name{font-size:18px}
.menu .site-head-in{padding:16px var(--gutter)}
.menu .brand-tag{display:none}

/* ---------- picker ---------- */
.picker{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 0 80px;
}
.picker-body{
  width:100%;
  max-width:680px;
  padding:140px 6vw 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kicker{
  margin:0 0 10px;
  color:var(--muted);
  font-size:0.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.picker-body h1{
  margin:0;
  font-weight:600;
  font-size:clamp(2.2rem,6vw,3.2rem);
}

.picker-list{
  margin-top:48px;
  border-top:1px solid var(--line);
}
.pick-row{
  position:relative;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  background:none;
  border-left:none;
  border-right:none;
  border-top:none;
  color:inherit;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.pick-row .pick-title{
  font-weight:600;
  font-size:1.1rem;
}
.pick-row .pick-meta{
  flex-shrink:0;
  color:var(--muted);
  font-size:0.82rem;
}
.pick-row:hover .pick-title{color:var(--muted);}

.empty{color:var(--muted);padding:20px 4px;}

/* ---------- deck ---------- */
.deck{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.slides{
  position:relative;
  width:100%;
  height:100%;
}
.slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  padding:max(12vh,110px) 8vw 10vh;
  max-width:980px;
  margin:0 auto;
  overflow-y:auto;
  opacity:0;
  pointer-events:none;
}
.slide.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

.slide-eyebrow{
  color:var(--muted);
  font-size:0.8rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.slide-title{
  margin:0;
  font-weight:600;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.05;
}
.slide-meta{
  color:var(--muted);
  font-size:0.95rem;
}
.slide-tags{
  color:var(--muted);
  font-size:0.85rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.slide-body{
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.5;
  max-width:820px;
  color:var(--ink);
}
.slide-h2{
  margin:0;
  font-weight:600;
  font-size:clamp(1.6rem,3.6vw,2.2rem);
  line-height:1.15;
}
.slide-lead{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.5;
  max-width:760px;
}
.slide-tail{
  margin-top:4px;
  color:var(--ink);
  font-size:1.05rem;
  line-height:1.5;
  max-width:760px;
}
.slide-caption{
  color:var(--muted);
  font-size:0.9rem;
  line-height:1.5;
  max-width:640px;
}

/* image-right process slides */
.slide-media{
  flex-direction:row;
  align-items:center;
  gap:56px;
  max-width:1080px;
}
.slide-media .media-col{flex:1;min-width:0;}
.slide-media .media-frame{
  flex-shrink:0;
  width:380px;
  margin:0;
}
.slide-media .media-frame img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
.slide-media .media-frame figcaption{
  margin-top:10px;
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.5;
}
@media (max-width:900px){
  .slide-media{flex-direction:column;align-items:flex-start;gap:24px;}
  .slide-media .media-frame{width:100%;max-width:420px;}
}

/* for-the-room */
.room-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.room-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.room-tag{
  color:var(--muted);
  font-size:0.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  white-space:nowrap;
}
.room-text{
  margin:0;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--ink);
}

/* two-column */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  width:100%;
}
.two-col-block ul{
  margin:0;
  padding-left:18px;
  color:var(--ink);
  font-size:0.98rem;
  line-height:1.6;
}
.two-col-label{
  margin:0 0 8px;
  color:var(--muted);
  font-size:0.76rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

/* numbered steps */
.step-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.step-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.step-n{
  color:var(--muted);
  font-weight:500;
  font-size:0.95rem;
}
.step-h{
  margin:0 0 4px;
  font-weight:600;
  font-size:1.05rem;
}
.step-d{
  margin:0;
  color:var(--muted);
  font-size:0.92rem;
  line-height:1.5;
}

/* definition list */
.def-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.def-item{
  padding-top:12px;
  border-top:1px solid var(--line);
}
.def-h{
  margin:0 0 4px;
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
}
.def-d{
  margin:0;
  color:var(--muted);
  font-size:0.94rem;
  line-height:1.5;
}

/* trade-offs */
.trade-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.trade-item{
  padding-top:12px;
  border-top:1px solid var(--line);
}
.trade-gave{
  margin:0 0 4px;
  font-weight:600;
  font-size:1rem;
  color:var(--muted);
}
.trade-cost{
  margin:0;
  color:var(--ink);
  font-size:0.94rem;
  line-height:1.5;
}

/* stats */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  width:100%;
}
.stat-tile{
  border:1px solid var(--line);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-v{
  font-weight:600;
  font-size:clamp(1.4rem,3vw,2rem);
}
.stat-l{
  color:var(--muted);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* quote */
.slide-quote{justify-content:center;}
.slide-quote-text{
  font-weight:600;
  font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.35;
  max-width:820px;
  color:var(--ink);
}

/* token diagram */
.tokendiagram{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.tokendiagram-prim{
  border:1px solid var(--accent);
  color:var(--muted);
  padding:14px 20px;
  font-weight:500;
  font-size:1rem;
}
.tokendiagram-arrows{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
}
.tokendiagram-arrows span{display:block;width:28px;height:1px;background:var(--line);position:relative;}
.tokendiagram-arrows span::after{content:"→";position:absolute;right:-14px;top:-9px;color:var(--muted);}
.tokendiagram-roles{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tokendiagram-role{
  border:1px solid var(--line);
  padding:10px 16px;
  font-size:0.92rem;
  color:var(--ink);
}

/* tier diagram */
.tierdiagram{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  width:100%;
}
.tier{
  background:var(--bg);
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 20px;
}
.tier-name{
  font-weight:600;
  font-size:1.02rem;
  color:var(--ink);
}
.tier-desc{
  color:var(--muted);
  font-size:0.88rem;
  line-height:1.5;
}
.tier-1{border-left:3px solid var(--accent);}
.tier-2{border-left:3px solid var(--accent);opacity:0.85;}
.tier-3{border-left:3px solid var(--accent);opacity:0.7;}

/* funnel */
.funnel{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.funnel-row{
  display:grid;
  grid-template-columns:110px 1fr 80px;
  align-items:center;
  gap:12px;
}
.funnel-label{
  font-size:0.85rem;
  color:var(--muted);
}
.funnel-bar{
  height:16px;
  background:var(--accent);
  opacity:0.85;
}
.funnel-row-cliff .funnel-bar{background:var(--muted);opacity:1;}
.funnel-val{
  font-size:0.85rem;
  color:var(--ink);
  text-align:right;
  white-space:nowrap;
}

/* order lifecycle (tna) */
.tna{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  width:100%;
}
.tna-step{
  border:1px solid var(--line);
  padding:8px 12px;
  font-size:0.82rem;
  color:var(--muted);
  white-space:nowrap;
}
.tna-arrow{
  color:var(--line);
  font-size:0.9rem;
}
.tna-gate{
  border-color:var(--muted);
  color:var(--muted);
  font-weight:500;
}

.slide-actions{
  display:flex;
  gap:14px;
  margin-top:12px;
  flex-wrap:wrap;
}
.slide-actions a,
.slide-actions button{
  padding:13px 20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font-family:inherit;
  font-size:0.9rem;
  font-weight:500;
  cursor:pointer;
}
.slide-actions a:hover,
.slide-actions button:hover{border-color:var(--muted);color:var(--muted);}

.nav-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  z-index:10;
}
.nav-btn:hover{border-color:var(--muted);color:var(--muted);}
.nav-btn:disabled{opacity:0.25;cursor:default;}
.nav-btn:disabled:hover{border-color:var(--line);color:var(--ink);}
.nav-prev{left:24px;}
.nav-next{right:24px;}

.dots{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}
.dot{
  width:22px;
  height:2px;
  background:var(--line);
}
.dot.is-active{background:var(--accent);}

@media (max-width:640px){
  .slide{padding:9vh 7vw 16vh;justify-content:flex-start;}
  .nav-btn{
    top:auto;
    bottom:24px;
    transform:none;
    width:38px;
    height:38px;
  }
  .nav-prev{left:12px;}
  .nav-next{right:12px;}
  .dots{bottom:34px;}

  .two-col{grid-template-columns:1fr;gap:20px;}
  .room-item{grid-template-columns:1fr;gap:4px;}
  .step-item{grid-template-columns:32px 1fr;}
  .funnel-row{grid-template-columns:80px 1fr 64px;gap:8px;}
}