/* ── 9. Collapsing sidebar with peek ─────────────────── */
.s9 { height: 600px; background: var(--gray-0); color: var(--gray-700); }
.sb9 { position: absolute; left: 0; top: 0; bottom: 0; width: 248px; z-index: 6; background: var(--gray-30); padding: 10px 8px; display: flex; flex-direction: column; will-change: transform; }
.sb9-row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--gray-700); white-space: nowrap; cursor: default; border: 0; background: none; width: 100%; text-align: left; }
.sb9-row:is(:hover, [data-hover]) { background: color-mix(in srgb, var(--gray-700) 7%, transparent); }
.sb9-row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--gray-450); }
.sb9-row.on { background: color-mix(in srgb, var(--gray-700) 8%, transparent); font-weight: 550; }
.sb9-ws { font-weight: 550; margin-bottom: 8px; }
.sb9-ws i { width: 22px; height: 22px; border-radius: 6px; background: var(--gray-90); display: grid; place-items: center; font-style: normal; font-weight: 550; font-size: 12px; flex: none; }
.sb9-b { margin-left: auto; font-size: 12px; color: var(--gray-350); }
.sb9-sec { margin: 14px 0 4px 10px; font-size: 12px; color: var(--gray-350); }
.sb9-sub { overflow: hidden; }
.sb9-sub .sb9-row { padding-left: 38px; }
.sb9-chev { transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.sb9-grp[aria-expanded="false"] .sb9-chev { transform: rotate(-90deg); }
.sb9-end { margin-top: auto; }
.m9 { position: absolute; top: 0; right: 0; bottom: 0; left: 248px; padding: 0 0 0 0; background: var(--gray-0); }
.m9-top { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; font-size: 13px; color: var(--gray-450); }
.m9-open { width: 30px; height: 30px; border-radius: 6px; border: 0; background: none; display: grid; place-items: center; cursor: default; color: var(--gray-450); opacity: 0; pointer-events: none; }
.m9-open:is(:hover, [data-hover]) { background: color-mix(in srgb, var(--gray-700) 7%, transparent); }
.m9-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m9-doc { max-width: 620px; padding: 44px 40px; }
.m9-doc h4 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 550; letter-spacing: -0.02em; color: var(--gray-700); }
.m9-doc p { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.m9-l { height: 12px; border-radius: 6px; background: var(--gray-50); margin: 12px 0; }
@container (max-width: 700px) { .m9-doc { padding: 28px 22px; } .m9-doc h4 { font-size: 24px; } }