.guide-shell { width: min(calc(100% - 40px), 1080px); margin: 0 auto; padding: 86px 0 120px; }
.guide-hero { max-width: 850px; padding: 28px 0 55px; }
.guide-hero h1 { font-size: clamp(3rem, 7vw, 6rem); }
.guide-hero > p:last-child { max-width: 760px; margin: 28px 0 0; color: #a6b9b0; font-size: 1.12rem; line-height: 1.75; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card { min-height: 330px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(16,35,29,.86), rgba(7,17,15,.82)); transition: transform .2s, border-color .2s; }
.guide-card:hover { transform: translateY(-4px); border-color: rgba(95,245,179,.35); }
.guide-card small, .article-kicker { color: var(--mint); font: 700 .65rem ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.guide-card h2 { margin: 26px 0 18px; font-size: 2rem; line-height: 1.05; letter-spacing: -.045em; }
.guide-card p { margin: 0 0 28px; color: var(--muted); line-height: 1.65; }
.guide-card a { margin-top: auto; color: var(--mint); font-weight: 700; }
.guide-card a::after { content: " ↗"; }
.guide-article { width: min(calc(100% - 40px), 800px); margin: 0 auto; padding: 90px 0 120px; }
.guide-article header { padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.guide-article h1 { margin-top: 18px; font-size: clamp(3rem, 7vw, 5.8rem); }
.guide-article .summary { margin: 28px 0 0; color: #b4c8bf; font-size: 1.16rem; line-height: 1.75; }
.guide-article h2 { margin: 62px 0 20px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; }
.guide-article h3 { margin: 34px 0 12px; color: var(--mint); font: 700 .76rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.guide-article p, .guide-article li { color: #a6b9b0; line-height: 1.8; }
.guide-article li + li { margin-top: 10px; }
.guide-article a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.guide-article pre { max-width: 100%; padding: 24px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #050d0b; }
.guide-article pre code { color: #c7e5d6; font: .78rem/1.75 ui-monospace, monospace; }
.guide-table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: .9rem; }
.guide-table th, .guide-table td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.guide-table th { color: var(--mint); font: 700 .68rem ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.guide-table td { color: #a6b9b0; }
.guide-callout { margin: 30px 0; padding: 22px; border: 1px solid rgba(95,245,179,.24); border-radius: 14px; background: rgba(95,245,179,.045); }
.guide-callout b { display: block; margin-bottom: 8px; color: var(--mint); }
.guide-callout p { margin: 0; }
.guide-cta { margin-top: 70px; padding: 32px; border: 1px solid rgba(95,245,179,.25); border-radius: 20px; background: linear-gradient(145deg, rgba(18,47,37,.8), rgba(7,17,15,.9)); }
.guide-cta h2 { margin-top: 0; }
.guide-cta .hero-actions { margin-top: 24px; }
.guide-cta .button { color: #04100c; text-decoration: none; }
.guide-cta .button-ghost { color: var(--ink); }
.guide-sources { margin-top: 65px; padding-top: 30px; border-top: 1px solid var(--line); }
.guide-sources h2 { margin-top: 0; font-size: 1.6rem; }
.guide-sources li { font-size: .84rem; }
.trademark-note { max-width: 800px; margin: 42px auto 0; padding: 18px 20px; color: var(--faint); border-top: 1px solid var(--line); font-size: .74rem; line-height: 1.65; }
.guide-tool { margin: 34px 0 56px; padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(95,245,179,.22); border-radius: 20px; background: linear-gradient(145deg, rgba(16,35,29,.92), rgba(5,13,11,.96)); box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.guide-tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.guide-tool-head h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.guide-tool-head p { margin: 0; }
.tool-badge { flex: none; padding: 6px 9px; color: var(--mint); border: 1px solid rgba(95,245,179,.28); border-radius: 999px; font: 700 .58rem ui-monospace, monospace; letter-spacing: .1em; }
.guide-tool label { display: grid; gap: 8px; min-width: 0; color: var(--faint); font: 700 .62rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.guide-tool textarea, .guide-tool input { box-sizing: border-box; width: 100%; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(255,255,255,.025); font: 1rem/1.6 ui-monospace, monospace; }
.guide-tool textarea { min-height: 150px; margin: 0; padding: 16px; resize: vertical; }
.guide-tool input { min-height: 46px; padding: 10px 12px; }
.guide-tool textarea:focus, .guide-tool input:focus { border-color: rgba(95,245,179,.58); box-shadow: 0 0 0 3px rgba(95,245,179,.08); }
.tool-row { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 12px; margin: 16px 0; }
.tool-variable-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.tool-variable { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.tool-variable label + label { margin-top: 12px; }
.tool-variable textarea { min-height: 108px; }
.tool-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.tool-actions small { color: var(--faint); line-height: 1.5; }
.guide-tool .button { color: #04100c; }
.guide-tool .button:disabled { cursor: wait; opacity: .55; transform: none; }
.tool-error { margin: 16px 0 0 !important; color: var(--red) !important; }
.tool-results { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.tool-results[hidden] { display: none; }
.tool-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tool-metrics div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.tool-metrics small { display: block; color: var(--faint); font: 650 .55rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tool-metrics strong { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--mint); font-size: 1.35rem; }
.tool-note { margin: 18px 0 0 !important; padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(220,212,154,.035); overflow-wrap: anywhere; }
.tool-preview { margin-top: 18px; padding: 18px; border: 1px solid rgba(220,212,154,.16); border-radius: 12px; background: rgba(220,212,154,.035); }
.tool-preview small { color: var(--faint); font: 700 .58rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tool-preview p { margin: 12px 0 5px; color: #d4e0db; overflow-wrap: anywhere; }
.tool-preview span { color: var(--gold); font: .68rem ui-monospace, monospace; }
.related-guides { margin-top: 58px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-guides h2 { margin-top: 0; font-size: 1.6rem; }
@media (max-width: 850px) { .guide-grid { grid-template-columns: 1fr; }.guide-card { min-height: 260px; }.guide-shell, .guide-article { padding-top: 58px; }.docs-header nav a:not(.nav-cta) { display: none; }.guide-table { font-size: .78rem; }.guide-table th, .guide-table td { padding-inline: 7px; } }
@media (max-width: 650px) { .guide-tool-head, .tool-actions { align-items: stretch; flex-direction: column; }.tool-row, .tool-variable-grid, .tool-metrics { grid-template-columns: 1fr; }.guide-tool .button { width: 100%; }.tool-metrics div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.tool-metrics strong { margin: 0; }.guide-article h1 { overflow-wrap: anywhere; } }