:root{
  --paper:#F4F0E8; --card:#FBF8F2; --ink:#1A1916; --ink-soft:#3A362E;
  --muted:#6E665A; --amber:#C27A1B; --amber-tint:#F7F1E5; --line:#D6CDBD;
  --fable:#C0562F; --opus:#3B6EA5; --sonnet:#2E8B6F; --haiku:#C9861F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(120% 60% at 50% -8%,#FCFAF4,#F4F0E8 60%,#EFEADF);
  color:var(--ink); font-family:-apple-system,"Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:840px; margin:0 auto; padding:44px 22px 90px}
.back{display:inline-block; color:var(--amber); text-decoration:none; font-weight:700; font-size:.95rem; margin-bottom:26px}
.back:hover{text-decoration:underline}
.badge{
  display:inline-flex; align-items:center; gap:9px; border:1px solid var(--amber); color:var(--amber);
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:7px 15px; border-radius:999px;
}
h1{font-family:Georgia,serif; font-weight:700; font-size:clamp(2.1rem,5.5vw,3.5rem); line-height:1.06; letter-spacing:-.01em; margin:22px 0 0}
h1 .two{display:block; font-style:italic; color:var(--amber)}
.lede{color:var(--muted); font-size:1.14rem; max-width:640px; margin:20px 0 0}
.chips{display:flex; flex-wrap:wrap; gap:11px; margin:30px 0 0}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 7px; font-weight:600; font-size:.9rem; color:var(--ink-soft)}
.chip .lt{width:24px; height:24px; border-radius:6px; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center}
section{margin-top:66px}
.kicker{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:12px}
h2{font-family:Georgia,serif; font-weight:700; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.12; margin:0 0 6px}
.sub{color:var(--muted); font-size:1.08rem; margin:10px 0 26px; max-width:640px}
.callout{background:var(--amber-tint); border-left:4px solid var(--amber); border-radius:0 14px 14px 0; padding:22px 26px; font-size:1.12rem; color:var(--ink-soft)}
.callout .tag{display:block; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:10px}
.callout b{color:var(--ink)}
/* drain / price bars */
.bars{display:flex; flex-direction:column; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px}
.bar{display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:16px}
.bar .who b{display:block; font-size:1.02rem}
.bar .who span{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.bar .track{height:16px; background:#EDE6D8; border-radius:8px; overflow:hidden}
.bar .fill{height:100%; border-radius:8px}
.bar .val{font-size:.92rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.finenote{font-family:"Consolas",ui-monospace,monospace; font-size:.8rem; color:#9a8f7d; margin-top:16px}
.note-h{font-family:Georgia,serif; font-weight:700; font-size:1.15rem; margin:26px 0 6px}
.note-p{color:var(--muted)}
/* model cards */
.models{display:flex; flex-direction:column; gap:16px}
.model{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.model .lt{width:44px; height:44px; border-radius:11px; color:#fff; font-size:16px; font-weight:800; display:grid; place-items:center}
.model .name{font-family:Georgia,serif; font-weight:700; font-size:1.28rem; line-height:1}
.model .role{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 0 10px}
.model p{margin:0; color:var(--ink-soft)}
/* table */
.sheet{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.sheet th,.sheet td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); font-size:.98rem; vertical-align:top}
.sheet th{background:#F0EADD; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sheet tr:last-child td{border-bottom:none}
.sheet .job b{display:block; color:var(--ink)}
.sheet .job span{color:var(--muted); font-size:.9rem}
.sheet .pick{font-weight:800; color:var(--amber); white-space:nowrap}
/* numbered moves */
.moves{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.move{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.move .n{font-family:Georgia,serif; font-weight:700; color:var(--amber); font-size:1.3rem}
.move h4{margin:8px 0 8px; font-size:1.08rem}
.move p{margin:0; color:var(--muted); font-size:.98rem}
/* dial */
.dial{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.dcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.dcard .st{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--amber); display:inline-block; padding:4px 9px; border-radius:6px; margin-bottom:12px}
.dcard.hold .st{background:var(--sonnet)} .dcard.bail .st{background:var(--fable)}
.dcard h4{font-family:Georgia,serif; margin:0 0 8px; font-size:1.15rem}
.dcard p{margin:0; color:var(--muted); font-size:.96rem}
/* prompt */
.steps{counter-reset:s; margin:0 0 22px; padding:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:6px 0 6px 40px; color:var(--ink-soft)}
.steps li::before{content:counter(s); position:absolute; left:0; top:5px; width:26px; height:26px; background:var(--amber); color:#fff; border-radius:7px; font-weight:800; font-size:.85rem; display:grid; place-items:center}
.promptbox{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card)}
.promptbox .ph{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#F0EADD; border-bottom:1px solid var(--line)}
.promptbox .ph span{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.copybtn{border:none; background:var(--amber); color:#fff; font-weight:700; font-size:.85rem; padding:8px 16px; border-radius:8px; cursor:pointer}
.copybtn:hover{filter:brightness(1.05)}
.promptbox pre{margin:0; padding:20px; max-height:340px; overflow:auto; font-family:"Consolas",ui-monospace,monospace; font-size:.82rem; line-height:1.55; color:var(--ink-soft); white-space:pre-wrap}
.tip{margin-top:16px; font-size:.9rem; color:#8a7d66}
.foot{margin-top:70px; padding-top:26px; border-top:1px solid var(--line); text-align:center}
.foot h2{font-family:Georgia,serif}
.foot .brand{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:24px}
@media (max-width:640px){
  .bar{grid-template-columns:1fr; gap:6px} .bar .val{justify-self:start}
  .moves,.dial{grid-template-columns:1fr}
  .model{grid-template-columns:1fr}
}