.guide-hero { padding-top: 4.6rem; padding-bottom: 2.8rem; }
.guide-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); gap:2.2rem; align-items:center; }
.guide-hero h1 { font-size:clamp(2.7rem,6vw,5.7rem); margin-bottom:1.2rem; }
.guide-hero-copy > p { max-width:760px; color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); }
.guide-summary-card { padding:1.35rem; display:grid; gap:1rem; }
.guide-summary-card h2 { font-size:clamp(1.6rem,3vw,2.5rem); margin:.2rem 0 0; }
.guide-summary-card > p { color:var(--muted); margin:0; }
.guide-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.guide-summary-grid > div { padding:.9rem; border:1px solid var(--line); border-radius:14px; background:rgba(4,13,25,.34); }
.guide-summary-grid strong { display:block; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem; }
.guide-summary-grid span { display:block; color:var(--muted); font-size:.74rem; margin-top:.2rem; }

.guide-section-wrap { padding-top:2.2rem; }
.guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:2rem; align-items:start; }
.guide-toc { position:sticky; top:calc(var(--header-height) + 1rem); padding:.85rem; max-height:calc(100vh - var(--header-height) - 2rem); overflow:auto; }
.guide-toc-head { padding:.45rem .55rem .7rem; border-bottom:1px solid rgba(140,190,255,.09); }
.guide-toc-head .eyebrow { margin-bottom:.35rem; font-size:.68rem; }
.guide-toc-head strong { display:block; font-size:.94rem; }
.guide-toc nav { display:grid; gap:.12rem; padding-top:.5rem; }
.guide-toc a { padding:.56rem .62rem; border-radius:10px; color:var(--muted); font-size:.75rem; line-height:1.25; transition:.18s var(--ease); }
.guide-toc a:hover, .guide-toc a.active { color:var(--text); background:rgba(119,198,255,.075); }

.guide-article { min-width:0; display:grid; gap:1.25rem; }
.guide-section { position:relative; scroll-margin-top:calc(var(--header-height) + 1.2rem); padding:2.1rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(13,28,49,.73),rgba(7,18,32,.62)); box-shadow:var(--shadow-soft); overflow:hidden; }
.guide-section::before { content:""; position:absolute; width:260px; height:260px; right:-150px; top:-160px; border-radius:50%; background:var(--accent); filter:blur(80px); opacity:.04; pointer-events:none; }
.guide-section h2 { font-size:clamp(1.8rem,3.5vw,3rem); margin:.15rem 0 1rem; }
.guide-section > p { color:#c2d3e6; max-width:90ch; }
.guide-section code { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; color:#c8ebff; font-size:.92em; }
.section-number { position:absolute; top:1.2rem; right:1.45rem; font-size:3.6rem; line-height:1; font-weight:800; letter-spacing:-.08em; color:rgba(119,198,255,.055); user-select:none; }

.guide-callout { margin:1.2rem 0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px; background:rgba(119,198,255,.04); }
.guide-callout strong { display:block; color:var(--accent); margin-bottom:.35rem; }
.guide-callout p { margin:0; color:var(--muted); }
.guide-callout.important { border-color:rgba(113,255,209,.24); background:rgba(113,255,209,.045); }
.guide-callout.important strong { color:var(--accent-2); }
.guide-callout.warning { border-color:rgba(255,212,119,.25); background:rgba(255,212,119,.04); }
.guide-callout.warning strong { color:var(--warning); }
.guide-callout.final-rule { border-color:rgba(119,198,255,.33); background:linear-gradient(135deg,rgba(119,198,255,.07),rgba(113,255,209,.04)); }

.code-panel { margin:1.2rem 0; overflow:hidden; background:#04101d; }
.code-panel-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.72rem .9rem; border-bottom:1px solid var(--line); color:#bed3e8; font-size:.76rem; font-weight:700; }
.code-copy { border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); color:var(--muted); padding:.38rem .65rem; cursor:pointer; font-size:.7rem; font-weight:750; }
.code-copy:hover { color:var(--text); border-color:var(--line-strong); }
.code-copy.copied { color:var(--accent-2); border-color:rgba(113,255,209,.3); }
.code-panel pre { margin:0; padding:1rem; overflow:auto; font-size:.78rem; line-height:1.62; tab-size:2; }
.code-panel pre code { color:#c5def4; }

.frame-diagram { padding:1rem; margin:1rem 0 1.2rem; overflow:auto; }
.frame-bytes, .frame-labels { display:grid; grid-template-columns:repeat(8,minmax(74px,1fr)); gap:.35rem; min-width:690px; }
.frame-bytes span { display:grid; place-items:center; min-height:56px; border:1px solid var(--line); border-radius:10px; background:rgba(3,12,22,.55); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:800; color:#c9dcef; }
.frame-bytes .data-byte { border-color:rgba(113,255,209,.38); color:var(--accent-2); box-shadow:0 0 20px rgba(113,255,209,.06); }
.frame-labels { margin-top:.4rem; }
.frame-labels span { text-align:center; color:var(--muted); font-size:.67rem; }
.frame-labels .data-label { color:var(--accent-2); font-weight:700; }

.guide-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin:1rem 0; }
.mini-guide-card { padding:1rem; }
.mini-guide-card h3 { margin:0 0 .45rem; font-size:1rem; }
.mini-guide-card p { margin:0; color:var(--muted); font-size:.8rem; }

.precedence-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.7rem; align-items:center; margin:1rem 0; }
.precedence-flow .tech-card { padding:1rem; display:flex; gap:.8rem; align-items:center; min-height:82px; }
.precedence-flow strong { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:rgba(119,198,255,.09); color:var(--accent); }
.precedence-flow span { color:var(--muted); font-size:.8rem; }
.flow-arrow { color:var(--accent); opacity:.65; font-size:1.4rem; }

.evidence-grid { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 0; }
.evidence-grid span { padding:.38rem .58rem; border:1px solid var(--line); border-radius:999px; color:#adc4da; background:rgba(255,255,255,.022); font-size:.66rem; font-weight:720; }

.signal-kind-table { margin:1rem 0; overflow:hidden; }
.signal-kind-table > div { display:grid; grid-template-columns:120px 1fr 1fr; gap:1rem; padding:.78rem 1rem; border-bottom:1px solid rgba(140,190,255,.08); align-items:center; }
.signal-kind-table > div:last-child { border-bottom:0; }
.signal-kind-table .table-head { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; background:rgba(119,198,255,.035); }
.signal-kind-table > div:not(.table-head) > span { color:var(--muted); font-size:.78rem; }

.formula-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.formula-cards > div { padding:.85rem; display:grid; gap:.35rem; }
.formula-cards code { color:var(--accent-2); font-size:.8rem; }
.formula-cards span { color:var(--muted); font-size:.7rem; }

.conversion-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; margin:1rem 0; }
.conversion-flow > div { border:1px solid var(--line); border-radius:14px; padding:1rem; background:rgba(4,13,25,.34); }
.conversion-flow strong { display:block; color:var(--accent); font-size:.75rem; margin-bottom:.35rem; }
.conversion-flow > span { color:var(--accent-2); font-size:1.5rem; }

.workflow-list { list-style:none; padding:0; margin:1rem 0; display:grid; gap:.7rem; counter-reset:workflow; }
.workflow-list li { counter-increment:workflow; display:grid; grid-template-columns:auto 190px 1fr; gap:.8rem; align-items:center; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:rgba(4,13,25,.3); }
.workflow-list li::before { content:counter(workflow); width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(119,198,255,.08); color:var(--accent); font-weight:800; font-size:.74rem; }
.workflow-list strong { font-size:.8rem; }
.workflow-list span { color:var(--muted); font-size:.78rem; }

.checklist { padding:.85rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem .7rem; }
.checklist label { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem; color:#bed0e2; font-size:.77rem; border-radius:10px; }
.checklist label:hover { background:rgba(119,198,255,.035); }
.checklist input { accent-color:var(--accent-2); margin-top:.18rem; }
.terminal-command { margin-top:1rem; padding:1rem; display:grid; gap:.45rem; }
.terminal-command span { color:var(--muted); font-size:.72rem; }
.terminal-command code { overflow:auto; white-space:nowrap; color:var(--accent-2); }

.limitations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.limitations-grid > div { padding:1rem; display:grid; gap:.35rem; }
.limitations-grid strong { color:#d7e6f5; font-size:.85rem; }
.limitations-grid span { color:var(--muted); font-size:.75rem; }

@media (max-width: 980px) {
    .guide-hero-grid { grid-template-columns:1fr; }
    .guide-layout { grid-template-columns:1fr; }
    .guide-toc { position:relative; top:auto; max-height:none; }
    .guide-toc nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .formula-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .guide-section { padding:1.35rem; border-radius:20px; }
    .guide-summary-grid, .guide-grid-2, .limitations-grid, .checklist { grid-template-columns:1fr; }
    .guide-toc nav { grid-template-columns:1fr; }
    .precedence-flow, .conversion-flow { grid-template-columns:1fr; }
    .flow-arrow, .conversion-flow > span { transform:rotate(90deg); justify-self:center; }
    .signal-kind-table > div { grid-template-columns:90px 1fr; gap:.55rem; }
    .signal-kind-table > div > :nth-child(3) { grid-column:2; }
    .signal-kind-table .table-head > :nth-child(3) { display:none; }
    .workflow-list li { grid-template-columns:auto 1fr; }
    .workflow-list span { grid-column:2; }
}