/* Site chrome. The page itself is dressed in ledger-glass (loaded first). */
a {color:var(--accent-strong)}
code,pre {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}
.site-shell {max-width:1180px;padding-bottom:48px}
.site-hero {padding:28px 4px 20px}
.site-hero h1 {margin:0;font-size:clamp(32px,6vw,56px);line-height:1.08;font-weight:650;letter-spacing:-.05em}
.site-hero h1 span {color:var(--muted);font-weight:500;letter-spacing:-.03em}
.site-hero--detail h1 {font-size:clamp(30px,5vw,46px)}
.site-eyebrow {margin:0 0 10px;color:var(--muted);font-size:13px;letter-spacing:.04em}
.site-lead {max-width:640px;margin:14px 0 0;font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.site-id {padding:2px 8px;border-radius:999px;background:var(--glass-inset);border:1px solid var(--line);color:var(--accent-strong);font-size:12px}
.site-badge {padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-strong);font-size:12px;white-space:nowrap}
.site-index,.site-detail {display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
@media (max-width:960px) {.site-index,.site-detail {grid-template-columns:minmax(0,1fr)}}
.site-aside {position:sticky;top:16px}
@media (max-width:960px) {.site-aside {position:static}}
.site-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.site-card {display:grid;padding:0;overflow:hidden;color:inherit;text-decoration:none;transition:transform var(--duration) var(--ease),box-shadow var(--duration)}
@media (hover:hover) and (pointer:fine) {.site-card:hover {box-shadow:var(--shadow-float),inset 0 1px 0 var(--glass-glint)}}
.site-card:active {transform:scale(.99)}
.site-thumb {position:relative;height:260px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.site-thumb iframe {position:absolute;top:0;left:50%;width:390px;height:620px;border:0;transform:translateX(-50%) scale(.62);transform-origin:50% 0;pointer-events:none}
.site-thumb::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 70%,var(--glass-surface))}
.site-card-body {padding:14px 16px 16px}
.site-card-title {display:flex;align-items:center;justify-content:space-between;gap:8px}
.site-card-title h3 {margin:0;font-size:17px}
.site-card-body p {margin:8px 0 10px;font-size:13px;line-height:1.65;color:var(--muted)}
.site-tags {display:flex;flex-wrap:wrap;gap:6px}
.site-tags span {padding:2px 8px;border-radius:8px;background:var(--glass-inset);font-size:11px;color:var(--muted)}
.site-code {display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:10px 6px 10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--glass-inset)}
.site-code code,.site-code pre {flex:1;min-width:0;margin:0;padding-top:9px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.site-code .rs-button {flex:none}
.site-details {margin-top:10px;font-size:13px}
.site-details summary {min-height:32px;color:var(--accent-strong)}
.site-crumb {margin:8px 0 -8px -10px}
.site-preview {margin:4px 0 16px}
.site-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.site-frame {--frame-width:390px;display:flex;justify-content:center;padding:18px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,var(--glass-field),transparent 70%),var(--glass-inset)}
.site-frame iframe {width:min(100%,var(--frame-width));height:760px;border:1px solid var(--line-strong);border-radius:24px;background:var(--bg);box-shadow:var(--shadow-float);transition:width 320ms var(--ease)}
@media (max-width:600px) {.site-frame {padding:8px;border-radius:22px}.site-frame iframe {height:680px;border-radius:18px}}
.site-sub {margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.site-swatches {display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.site-swatch {display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--glass-field);text-align:left;font-size:12px}
.site-swatch strong {display:block;font-weight:550}
.site-swatch code {color:var(--muted);font-size:11px}
.site-swatch.is-copied {border-color:var(--accent)}
.site-chip {flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line-strong)}
[data-scheme-block=dark] .site-chip {outline:3px solid #161914;outline-offset:-1px}
[data-scheme-block=dark] .site-swatch {background:#161914;color:#f3f2e9;border-color:#2c332a}
[data-scheme-block=dark] .site-swatch code {color:#b7b8a6}
.site-type-sample {display:block;overflow-wrap:anywhere}
.site-radii {display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:8px}
.site-radius {display:grid;justify-items:center;gap:4px;font-size:12px}
.site-radius span {width:64px;height:48px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.site-radius code {color:var(--muted);font-size:11px}
.site-shadows {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:4px 0 12px}
.site-shadow {padding:14px;border-radius:18px;background:var(--panel-strong);font-size:12px}
.site-shadow strong {display:block;margin-bottom:6px}
.site-shadow code {color:var(--muted);font-size:10.5px;overflow-wrap:anywhere}
.site-prose {font-size:14px;line-height:1.75}
.site-prose h2,.site-prose h3 {margin:16px 0 6px;font-size:15px}
.site-prose p {margin:8px 0}
.site-prose ul {margin:8px 0;padding-left:20px}
.site-prose li {margin:4px 0}
.site-prose code {padding:1px 5px;border-radius:6px;background:var(--glass-inset)}
.site-formats .rs-list-row {padding:8px 0}
.site-footer {margin-top:32px;padding:16px 4px;font-size:13px;border-top:1px solid var(--line)}