:root {
  --bg: #f5f0e8; --paper: #faf7f2; --ink: #1a1612; --ink2: #3d3830;
  --muted: #8a8070; --rule: #d4cec4;
  --amber: #c97d2a; --amber-light: #f5e6cc;
  --green: #2a6b4a; --green-light: #d4ead9;
  --red: #a02828; --red-light: #f0d4d4;
  --blue: #1e4d7a; --blue-light: #cfe0f0;
  --purple: #5a3a7a; --purple-light: #e0d4f0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:14px; line-height:1.6; }
.header { background:var(--ink); color:var(--bg); padding:40px 60px; position:relative; overflow:hidden; }
.header::after { content:"P0"; position:absolute; right:40px; top:50%; transform:translateY(-50%); font-family:"DM Serif Display",serif; font-size:140px; color:rgba(255,255,255,0.04); line-height:1; }
.eyebrow { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); margin-bottom:10px; }
.header h1 { font-family:"DM Serif Display",serif; font-size:clamp(28px,4vw,44px); font-weight:400; margin-bottom:16px; }
.chips { display:flex; gap:12px; flex-wrap:wrap; }
.chip { font-family:"DM Mono",monospace; font-size:11px; padding:5px 12px; border:1px solid rgba(255,255,255,0.15); border-radius:20px; color:rgba(255,255,255,0.55); }
.chip b { color:rgba(255,255,255,0.9); }
.nav { background:var(--paper); border-bottom:2px solid var(--rule); padding:0 60px; display:flex; overflow-x:auto; position:sticky; top:0; z-index:50; }
.tab { padding:16px 18px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all 0.15s; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.sec { display:none; padding:48px 60px; max-width:1100px; }
.sec.active { display:block; }
.sec-title { font-family:"DM Serif Display",serif; font-size:30px; font-weight:400; margin-bottom:4px; }
.sec-sub { font-size:13px; color:var(--muted); font-style:italic; margin-bottom:36px; }
.card { background:var(--paper); border:1px solid var(--rule); border-radius:4px; padding:24px; margin-bottom:20px; }
.card-label { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:20px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
pre, .code { font-family:"DM Mono",monospace; font-size:11.5px; background:var(--ink); color:#e8e0d0; padding:18px 20px; border-radius:4px; margin:12px 0; line-height:1.85; overflow-x:auto; white-space:pre; }
.ca { color:#e8a84a; } .cg { color:#7ec994; } .cr { color:#e87a7a; } .cb { color:#7ab0e8; } .cm { color:#887870; }
table { width:100%; border-collapse:collapse; font-size:12.5px; margin:12px 0; }
th { background:var(--ink); color:var(--bg); padding:9px 14px; text-align:left; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:1px; font-weight:400; }
td { padding:9px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
tr:nth-child(even) td { background:rgba(0,0,0,0.02); }
tr:hover td { background:var(--amber-light); }
.tip { display:flex; gap:12px; padding:14px 16px; border-left:3px solid var(--amber); background:var(--amber-light); border-radius:0 4px 4px 0; font-size:13px; line-height:1.6; margin-bottom:10px; }
.tip-n { font-family:"DM Mono",monospace; font-size:10px; color:var(--amber); min-width:18px; padding-top:2px; }
.badge { display:inline-block; font-family:"DM Mono",monospace; font-size:10px; padding:3px 8px; border-radius:3px; }
.ba { background:var(--amber-light); color:var(--amber); }
.bg { background:var(--green-light); color:var(--green); }
.bb { background:var(--blue-light); color:var(--blue); }
.br { background:var(--red-light); color:var(--red); }
.lat-row { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.lat-lbl { font-family:"DM Mono",monospace; font-size:11px; width:110px; flex-shrink:0; }
.lat-bg { flex:1; background:var(--rule); height:18px; border-radius:2px; overflow:hidden; }
.lat-fill { height:100%; border-radius:2px; }
.lat-val { font-family:"DM Mono",monospace; font-size:11px; width:80px; text-align:right; flex-shrink:0; }
.fw-step { display:flex; gap:14px; padding:16px 18px; border:1px solid var(--rule); border-radius:4px; background:var(--paper); cursor:pointer; transition:all 0.15s; margin-bottom:10px; }
.fw-step:hover, .fw-step.open { border-color:var(--amber); background:var(--amber-light); }
.fw-num { font-family:"DM Serif Display",serif; font-size:30px; color:var(--amber); line-height:1; min-width:36px; }
.fw-title { font-weight:600; font-size:14px; margin-bottom:3px; }
.fw-time { font-family:"DM Mono",monospace; font-size:10px; color:var(--muted); }
.fw-detail { margin-top:10px; display:none; font-size:13px; color:var(--ink2); line-height:1.7; }
.fw-step.open .fw-detail { display:block; }
.calc-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.calc-lbl { font-family:"DM Mono",monospace; font-size:11px; width:180px; color:var(--ink2); }
.calc-inp { border:1px solid var(--rule); border-radius:4px; padding:7px 10px; font-family:"DM Mono",monospace; font-size:12px; background:var(--paper); color:var(--ink); width:160px; }
.calc-inp:focus { outline:none; border-color:var(--amber); }
.calc-btn { background:var(--amber); color:#fff; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-family:"DM Sans",sans-serif; font-size:13px; font-weight:600; margin-top:12px; }
.calc-btn:hover { opacity:0.85; }
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:16px; }
.res-card { background:var(--ink); color:var(--bg); padding:14px 16px; border-radius:4px; }
.res-lbl { font-size:9px; font-family:"DM Mono",monospace; color:rgba(255,255,255,0.45); margin-bottom:4px; letter-spacing:1px; }
.res-val { font-family:"DM Serif Display",serif; font-size:22px; color:#f0d98a; }
.checklist { list-style:none; }
.checklist li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:13px; cursor:pointer; color:var(--ink); }
.checklist li:last-child { border-bottom:none; }
.chk { width:18px; height:18px; border:1.5px solid var(--rule); border-radius:3px; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:11px; }
.checklist li.done .chk { background:var(--green); border-color:var(--green); color:#fff; }
.checklist li.done span { text-decoration:line-through; color:var(--muted); }
.prog-bar { background:var(--rule); height:7px; border-radius:4px; overflow:hidden; margin-bottom:6px; }
.prog-fill { height:100%; background:var(--green); border-radius:4px; transition:width 0.3s; }
.acidsq { text-align:center; padding:16px; border-radius:4px; }
.trrow { display:grid; grid-template-columns:150px 1fr 1fr 1fr; gap:1px; background:var(--rule); margin-bottom:1px; }
.trrow > div { background:var(--paper); padding:11px 13px; font-size:12px; }
.trhead > div { background:var(--ink); color:var(--bg); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:1px; }
@media(max-width:768px){
  .header,.nav,.sec { padding-left:24px; padding-right:24px; }
  .grid2,.grid3,.grid4 { grid-template-columns:1fr; }
  .trrow { grid-template-columns:1fr 1fr; }
}