.guide-page{background:#101516}
.guide-header{height:100px;display:flex;align-items:center;gap:36px;padding:0 var(--gutter);border-bottom:1px solid var(--line);background:#111719}
.guide-back{margin-left:auto;font-size:12px;color:#b5bcb9}
.guide-back:hover,.guide-play:hover{color:var(--accent)}
.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,6vw,90px);max-width:1600px;margin:auto;padding:60px var(--gutter) 100px}
.guide-sidebar{align-self:start;position:sticky;top:30px}
.guide-sidebar-copy{font:25px/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:20px 0 35px;color:#c4ccc7}
#guide-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.guide-nav-link{display:flex;gap:15px;align-items:baseline;padding:15px 8px;border-bottom:1px solid var(--line);font-size:12px;color:#a5b0aa;transition:background .2s,color .2s}
.guide-nav-link span{font:10px var(--mono);color:#7e8882}
.guide-nav-link:hover{background:#1c2424;color:var(--ink)}
.guide-nav-link[aria-current=page]{color:var(--accent);background:#b8926010;border-left:2px solid var(--accent);padding-left:6px}
.guide-nav-link[aria-current=page] span{color:var(--accent)}
.guide-play{display:block;font:11px/1.5 var(--mono);margin-top:30px;color:var(--accent)}
.guide-content{min-width:0;outline:none!important}
.guide-status{display:flex;justify-content:space-between;gap:20px;font:10px/1.7 var(--mono);letter-spacing:.1em;color:#a99574;text-transform:uppercase;margin-bottom:27px}
.guide-content h1{font:clamp(46px,6.6vw,96px)/.99 var(--display);letter-spacing:-.02em;text-transform:uppercase;max-width:1000px;overflow-wrap:anywhere}
.guide-lead{font-size:clamp(21px,2.3vw,29px);line-height:1.45;max-width:820px;margin-top:30px;color:#d6dcd5}
.guide-intro{max-width:820px;font-size:15px;line-height:1.9;margin-top:24px;color:#a8b3ad}
.guide-figure{margin:42px 0 52px;border:1px solid var(--line);background:#0d1112}
.guide-figure img{display:block;width:100%;max-height:480px;object-fit:cover;object-position:center;opacity:.9}
.guide-figure figcaption{display:flex;gap:20px;align-items:baseline;justify-content:space-between;padding:15px 20px;font:10px/1.6 var(--mono);color:#99a89d}
.guide-figure figcaption span:first-child{color:var(--accent);white-space:nowrap}
.guide-section{margin-top:52px}
.guide-section>h2{font:clamp(27px,3vw,39px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;max-width:850px}
.guide-section>p{margin-top:20px;max-width:830px;font-size:15px;line-height:1.85;color:#b2bdb5}
.guide-section .guide-prose p{max-width:820px;line-height:1.85;color:#b2bdb5;font-size:15px;margin-top:22px}
.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:25px;gap:14px}
.guide-card{padding:27px;border:1px solid var(--line);background:linear-gradient(145deg,#20292980,#111819)}
.guide-card .guide-card-index{font:10px var(--mono);color:var(--accent);display:block;margin-bottom:25px}
.guide-card h3{font-size:18px;line-height:1.35;color:#e1e6dd}
.guide-card p{font-size:13px;line-height:1.85;color:#a4b3aa;margin-top:15px}
.guide-system{border-top:1px solid var(--line)}
.guide-system {scroll-margin-top:20px}
.guide-system:target > summary {color:var(--accent)}
.guide-figure img[width] {height:auto}
.guide-system-index {margin-top:30px;border-block:1px solid var(--line)}
.guide-system-index summary {display:flex;align-items:center;gap:12px;min-height:54px;cursor:pointer;list-style:none;color:var(--ink);font-weight:600}
.guide-system-index summary::-webkit-details-marker {display:none}
.guide-system-index summary:after {content:'+';margin-left:auto;color:var(--accent);font:22px var(--mono)}
.guide-system-index[open] summary:after {content:'−'}
.guide-system-index summary small {font:12px var(--mono);color:var(--accent)}
.guide-system-index nav {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 20px;padding-bottom:14px}
.guide-system-index a,.guide-system-link {display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:14px;line-height:1.5}
.guide-system-index a {border-top:1px solid var(--line);padding-block:7px}
.guide-system-index a:hover,.guide-system-index a[aria-current],.guide-system-link:hover {text-decoration:underline;text-underline-offset:4px}
.guide-system-links {display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;padding-bottom:16px}
.guide-system:last-child{border-bottom:1px solid var(--line)}
.guide-system summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:24px 0;font-size:18px;line-height:1.3}
.guide-system summary::-webkit-details-marker{display:none}
.guide-system summary:after{content:'+';font:24px var(--mono);margin-left:auto;color:var(--accent)}
.guide-system[open] summary:after{content:'−'}
.guide-system summary>span{font:10px var(--mono);color:var(--accent);min-width:20px}
.guide-system summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.guide-system-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px 30px;padding:8px 20px 30px 40px;margin:0}
.guide-system-grid dt{font:10px/1.8 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.guide-system-grid dd{margin:0;color:#b3bdb6;font-size:14px;line-height:1.9;max-width:720px}
.guide-example{padding:28px 32px;background:#b9936010;border-left:2px solid var(--accent);margin-top:28px}
.guide-example>span{font:10px var(--mono);letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.guide-example h3{font-size:20px;margin-top:14px}
.guide-example p{font-size:14px;line-height:1.85;margin-top:16px;color:#bdc5bb}
.guide-table-wrap{overflow-x:auto;margin-top:26px}
.guide-table{border-collapse:collapse;width:100%;text-align:left;font-size:13px;line-height:1.7;min-width:540px}
.guide-table th{font:10px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:#1c2526}
.guide-table th,.guide-table td{padding:16px 20px;border:1px solid var(--line);vertical-align:top}
.guide-table td{color:#b8c2ba}.guide-table td:first-child{color:var(--ink);width:23%}
.guide-note{padding:22px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.8;color:#8c9b91;margin-top:45px}
.guide-next{border-top:1px solid var(--line);margin-top:25px;padding:30px 0 0;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--accent);font:14px var(--mono)}
.guide-next span{color:#8c9b91;font-size:10px;text-transform:uppercase}
.guide-footer{padding:28px var(--gutter) 45px;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;border-top:1px solid var(--line);font:10px/1.6 var(--mono);letter-spacing:.06em;color:#89988f}
.guide-footer a{color:var(--accent)}
.guide-directory{margin:45px 0 0;padding:32px;border:1px solid var(--line);background:#151d1e}
.guide-directory h3{font:32px/1.15 var(--display);text-transform:uppercase;margin:14px 0 16px}
.guide-directory>p{max-width:760px;color:#a6b0a9;font-size:14px;line-height:1.8}
.guide-directory-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:25px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.guide-directory-links a{padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;display:flex;gap:15px;justify-content:space-between}
.guide-directory-links a:hover{color:var(--accent);background:#b8926010}
.mode-content>.guide-mode-link{display:inline-block;color:var(--accent);font:11px/1.6 var(--mono);margin-top:20px;border-bottom:1px solid #c19b6840;padding-bottom:7px}
@media(max-width:1050px){.guide-layout{grid-template-columns:180px minmax(0,1fr);gap:30px}.guide-system-grid{grid-template-columns:110px minmax(0,1fr);gap:15px;padding-left:0}.guide-directory-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.guide-header{height:80px;gap:18px}.guide-back{font-size:10px}.guide-layout{display:block;padding-top:30px}.guide-sidebar{position:static}.guide-sidebar-copy{font-size:27px;margin:12px 0 22px}.guide-sidebar-copy br{display:none}#guide-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line)}.guide-nav-link{padding:11px 12px;border-right:1px solid var(--line);font-size:11px;gap:9px}.guide-nav-link[aria-current=page]{padding-left:10px}.guide-play{margin-top:18px;font-size:10px}.guide-content{padding-top:45px}.guide-status{font-size:8px}.guide-content h1{font-size:51px}.guide-lead{font-size:22px;margin-top:22px}.guide-figure{margin:30px 0}.guide-figure figcaption{display:block;padding:12px 15px;font-size:9px}.guide-figure figcaption span{display:block}.guide-figure figcaption span+span{margin-top:6px}.guide-cards{grid-template-columns:1fr}.guide-card{padding:24px}.guide-card .guide-card-index{margin-bottom:16px}.guide-section{margin-top:38px}.guide-section>h2{font-size:31px}.guide-section>p,.guide-intro{font-size:14px}.guide-system summary{font-size:17px;gap:12px}.guide-system-grid{grid-template-columns:1fr;gap:8px;padding:0 0 22px 32px}.guide-system-grid dt:not(:first-child){margin-top:12px}.guide-system-grid dd{font-size:13px}.guide-example{padding:24px}.guide-table th,.guide-table td{padding:12px 14px}.guide-next{font-size:12px;flex-wrap:wrap}.guide-footer{display:block}.guide-footer>*{display:block;margin:0 0 14px}.guide-directory{padding:24px}.guide-directory-links a{padding:14px;font-size:11px}.guide-directory h3{font-size:29px}}
@media(prefers-reduced-motion:reduce){.guide-nav-link{transition:none}}