.guide-page{max-width:1240px;margin:auto;padding:48px clamp(20px,4vw,64px) 80px}.guide-heading{max-width:820px;padding:20px 0 52px}.guide-heading h1{font:600 clamp(36px, 5vw, 60px)/1.22 var(--font-display);margin:18px 0}.guide-heading>p{line-height:1.9}.guide-intro{max-width:640px;color:var(--ink-soft);margin-bottom:26px}.guide-layout{border-top:1px solid var(--rule);grid-template-columns:210px minmax(0,1fr);gap:48px;display:grid}.guide-toc{padding:28px 0;position:sticky;top:24px}.guide-toc p{color:var(--ink-soft);font-size:13px}.guide-toc a{padding:12px 0;font-size:14px;line-height:1.5;display:block}.guide-toc a:hover{color:var(--sky-dark);text-decoration:underline}.guide-chapters{min-width:0}.guide-section{border-bottom:1px solid var(--rule);overflow-wrap:anywhere;padding:40px 0;scroll-margin-top:24px;line-height:1.95}.guide-kicker{color:var(--signal);margin:0 0 8px;font-size:13px}.guide-section h2{font:600 clamp(25px, 3vw, 32px)/1.4 var(--font-display);margin:0 0 24px}.guide-section h3{margin:26px 0 12px;font-size:18px;line-height:1.6}.guide-section>p{color:var(--ink-soft)}.guide-section a:not(.button):not(.thread-parent),.guide-finish>a:not(.button){color:var(--sky-dark);text-underline-offset:4px;text-decoration:underline}.guide-section li{margin-bottom:12px}.guide-section>ul,.guide-steps{padding-left:24px}.guide-steps{list-style:decimal}.guide-section>ul{list-style:outside}.guide-steps>li{margin-bottom:18px;padding-left:8px}.guide-steps>li::marker{color:var(--signal);font-family:var(--font-mono)}.guide-section code{background:var(--paper-soft);font-family:var(--font-mono);overflow-wrap:anywhere;padding:2px 5px;font-size:.9em}.guide-routes,.guide-definitions,.guide-syntax{margin:24px 0}.guide-routes>div,.guide-definitions>div,.guide-syntax>div{border-bottom:1px solid var(--rule-soft);grid-template-columns:160px minmax(0,1fr);gap:18px;padding:16px 0;display:grid}.guide-definitions>div{grid-template-columns:180px minmax(0,1fr)}.guide-section dt{font-weight:650}.guide-section dd{color:var(--ink-soft);margin:0}.guide-section .guide-note{background:var(--paper-soft);border-left:3px solid var(--sky);color:var(--ink);padding:18px 22px}.guide-practice{border:1px solid var(--rule);background:#fff;margin:32px 0;padding:clamp(14px,2vw,24px)}.guide-practice-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.guide-practice-heading h3{margin:0}.guide-practice-heading>span,.guide-caption{color:var(--ink-soft);font-size:13px}.guide-practice button,.guide-practice select,.guide-practice input{font:inherit}.guide-practice-heading>button{min-height:44px;color:var(--sky-dark);background:var(--paper-soft);border:1px solid var(--rule);cursor:pointer;padding:8px 12px}.guide-practice-controls{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:20px;display:grid}.guide-practice-controls label{gap:5px;font-size:14px;display:grid}.guide-practice-controls input,.guide-practice-controls select{border:1px solid var(--rule);background:var(--paper);width:100%;min-width:0;min-height:44px;color:var(--ink);padding:8px}.guide-practice-status{color:var(--sky-dark);font-size:14px}.guide-practice .thread-node{margin-bottom:0}.guide-practice .thread-branch{list-style:none}.guide-details{border-top:1px solid var(--rule);padding:8px 0}.guide-details summary{cursor:pointer;padding:12px 0;font-weight:600}.guide-details p{color:var(--ink-soft)}.guide-page :is(summary,select,textarea):focus-visible{outline:3px solid var(--sky);outline-offset:3px}.guide-finish{flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px;display:flex}.guide-capture{margin:32px 0 44px}.guide-capture figcaption{margin-bottom:20px}.guide-capture figcaption h3{margin:0 0 4px}.guide-capture figcaption>span{color:var(--ink-soft);font-size:12px}.guide-capture-image{outline:1px solid var(--rule);outline-offset:8px;background:#fff;margin:26px 8px 24px;display:block;position:relative}.guide-capture-image img{width:100%;height:auto;display:block}.guide-capture-mark{border:2px solid var(--signal);pointer-events:none;border-radius:3px;position:absolute}.guide-capture-mark b,.guide-legend-number{background:var(--signal);color:#fff;width:24px;height:24px;font:700 13px/1 var(--font-mono);border-radius:50%;place-items:center;display:grid}.guide-capture-mark b{position:absolute;top:0;left:0;transform:translate(-15%,-80%);box-shadow:0 0 0 2px #fff}.guide-capture-legend{margin:0;padding:0;list-style:none}.guide-capture-legend li{border-bottom:1px solid var(--rule-soft);grid-template-columns:24px minmax(0,1fr);gap:12px;margin:0;padding:12px 0;display:grid}.guide-legend-number{margin-top:4px}.guide-capture-legend p{color:var(--ink-soft);margin:3px 0 0;font-size:15px}.guide-exercise{margin:24px 0}.guide-exercise>summary{color:var(--sky-dark)}@media (max-width:800px){.guide-layout{grid-template-columns:minmax(0,1fr);gap:0}.guide-toc{border-bottom:1px solid var(--rule);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;display:grid;position:static}.guide-toc p{grid-column:1/-1}.guide-heading{padding-top:0}}@media (max-width:480px){.guide-routes>div,.guide-definitions>div,.guide-syntax>div,.guide-practice-controls{grid-template-columns:minmax(0,1fr);gap:6px}.guide-practice-controls{gap:12px}.guide-page{padding-top:28px}.guide-section .guide-note{padding:14px 16px}.guide-capture-mark{border-width:1px}.guide-capture-mark b{width:18px;height:18px;font-size:11px}}.guide-import-code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper,#faf8f1);border:1px solid var(--line,#d4cebf);padding:1rem;font-size:.88rem;line-height:1.7}
