.manual-body { margin:0; background:var(--color-canvas); color:var(--color-text-primary); font:var(--text-md)/1.75 var(--font-sans); }
.manual-body *, .manual-body *::before, .manual-body *::after { box-sizing:border-box; }
.manual-body [hidden] { display:none !important; }
.manual-body a { color:var(--color-link); text-underline-offset:4px; }
.manual-body button,.manual-body input,.manual-body summary { font:inherit; }
.manual-body button,.manual-body summary,.manual-body a { touch-action:manipulation; }
.manual-body :focus-visible { outline:var(--border-focus) solid var(--color-focus); outline-offset:var(--focus-offset); }
.manual-header { height:var(--header-height); background:var(--color-surface); border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6); gap:var(--space-4); }
.manual-brand { display:flex; align-items:center; gap:var(--space-2); text-decoration:none; color:var(--color-text-primary)!important; font-weight:700; }
.manual-brand img { width:164px; height:auto; }
.manual-workspace-link { min-height:var(--target-touch); display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:700; }
.manual-shell { max-width:1280px; margin:auto; padding:var(--space-12) var(--space-6) 0; }
.manual-intro { max-width:900px; margin-bottom:var(--space-12); }
.manual-kicker { font-size:var(--text-xs); color:var(--color-text-secondary); font-weight:700; }
.manual-intro h1 { font-size:var(--text-display); line-height:var(--line-display); margin:var(--space-3) 0 var(--space-4); letter-spacing:-.01em; }
.manual-intro>p:not(.manual-kicker) { color:var(--color-text-secondary); font-size:var(--text-lg); margin:0 0 var(--space-6); }
.manual-intro-meta { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); font-size:var(--text-sm); color:var(--color-text-secondary); }
.manual-search { margin-top:var(--space-8); max-width:640px; }
.manual-search label { display:block; font-weight:700; font-size:var(--text-sm); margin-bottom:var(--space-2); }
.manual-search>div { display:flex; gap:var(--space-2); }
.manual-search input { min-width:0; flex:1; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); min-height:48px; padding:var(--space-3); color:var(--color-text-primary); }
.manual-search button { min-height:44px; padding:var(--space-2) var(--space-4); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text-primary); cursor:pointer; }
.manual-search button:hover { background:var(--color-surface-subtle); }
.manual-search>p { margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--color-text-secondary); }
.manual-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:var(--space-10); align-items:start; }
.manual-sidebar { position:sticky; top:var(--space-6); max-height:calc(100dvh - 48px); overflow:auto; }
.manual-sidebar>details>summary { padding:var(--space-3) 0; font-weight:700; cursor:pointer; min-height:44px; }
.manual-sidebar nav { display:flex; flex-direction:column; padding-top:var(--space-2); }
.manual-sidebar nav a { display:flex; gap:var(--space-3); color:var(--color-text-secondary); padding:var(--space-3) var(--space-2); border-left:2px solid transparent; text-decoration:none; font-size:var(--text-sm); min-height:44px; }
.manual-sidebar nav a span { color:var(--color-text-muted); min-width:20px; font-variant-numeric:tabular-nums; }
.manual-sidebar nav a:hover,.manual-sidebar nav a[aria-current] { background:var(--color-primary-subtle); border-left-color:var(--color-primary); color:var(--color-link); }
.manual-start { border-top:2px solid var(--color-primary); padding:var(--space-4) 0 var(--space-6); }
.manual-start p { margin:var(--space-2) 0 0; color:var(--color-text-secondary); }
.manual-chapter { border-top:1px solid var(--color-border-strong); padding:var(--space-8) 0 var(--space-12); scroll-margin-top:var(--space-6); }
.manual-chapter-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.manual-reading { font-size:var(--text-xs); color:var(--color-text-secondary); }
.manual-chapter h2 { font-size:var(--text-xl); line-height:1.45; margin:var(--space-3) 0; letter-spacing:-.01em; }
.manual-lead { margin:0 0 var(--space-6); color:var(--color-text-secondary); }
.manual-media video { display:block; width:100%; aspect-ratio:16/9; background:var(--color-surface-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.manual-video-start { display:flex; justify-content:center; align-items:center; width:100%; min-height:48px; margin-bottom:var(--space-3); padding:var(--space-3); border:1px solid var(--color-primary); border-radius:var(--radius-md); color:var(--color-link); background:var(--color-surface); cursor:pointer; font-weight:700!important; }
.manual-video-start:disabled { cursor:wait; opacity:.7; }
.manual-media-caption { font-size:var(--text-xs); color:var(--color-text-secondary); margin:var(--space-2) 0; }
.manual-transcript { margin:var(--space-3) 0 var(--space-6); font-size:var(--text-sm); }
.manual-transcript summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; color:var(--color-link); }
.manual-transcript p { color:var(--color-text-secondary); }
.manual-steps { list-style:none; counter-reset:step; margin:var(--space-6) 0; padding:0; }
.manual-steps li { counter-increment:step; position:relative; padding:0 0 var(--space-6) var(--space-12); }
.manual-steps li::before { content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0; color:var(--color-link); font-size:var(--text-lg); font-weight:700; font-variant-numeric:tabular-nums; }
.manual-steps h3 { font-size:var(--text-lg); line-height:var(--line-lg); margin:0 0 var(--space-2); }
.manual-steps p { margin:0; color:var(--color-text-secondary); }
.manual-note { background:var(--color-primary-subtle); border-left:2px solid var(--color-primary); padding:var(--space-4) var(--space-5); }
.manual-note p { margin:var(--space-2) 0 0; color:var(--color-text-secondary); font-size:var(--text-sm); }
.manual-faq details { border-bottom:1px solid var(--color-border); padding:var(--space-3) 0; }
.manual-faq summary { min-height:44px; align-content:center; font-weight:700; cursor:pointer; }
.manual-faq p { margin:var(--space-2) 0 var(--space-4); color:var(--color-text-secondary); }
.manual-footer { border-top:1px solid var(--color-border); padding:var(--space-6) 0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); font-size:var(--text-sm); }
.manual-footer p { margin:0; flex:1 1 320px; }
.manual-footer a { min-height:44px; display:inline-flex; align-items:center; }
.manual-video-error,#manual-no-results { border-left:2px solid var(--color-warning); padding:var(--space-4); background:var(--color-warning-subtle); }
.manual-route { display:flex; flex-wrap:wrap; gap:12px 28px; margin:0 0 36px; padding:20px 0; border-block:1px solid var(--color-border); }
.manual-route a { display:inline-flex; align-items:center; min-height:44px; gap:12px; font-weight:700; text-decoration:none; }
.manual-route span { color:var(--color-text-muted); font-size:12px; }
.manual-nav-group { margin:24px 8px 4px; color:var(--color-text-primary); font-size:12px; font-weight:700; }
.manual-group-heading { padding:40px 0 20px; border-top:3px solid var(--color-primary); scroll-margin-top:24px; }
.manual-group-heading h2 { font-size:24px; margin:0 0 8px; }
.manual-group-heading p { color:var(--color-text-secondary); margin:0; }
.manual-group[hidden] { display:none; }
.manual-goal { margin:0 0 24px; padding:12px 0; border-block:1px solid var(--color-border); }
.manual-goal span,.manual-related>span { display:block; font-size:12px; font-weight:700; color:var(--color-text-secondary); }
.manual-goal p { margin:6px 0 0; }
.manual-complete { border-left:3px solid #28936c; padding:12px 16px; margin:0 0 16px; background:#f1faf5; }
.manual-complete p { margin:6px 0 0; font-size:14px; }
.manual-related { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.manual-related>span { width:100%; }
.manual-related a { min-height:36px; display:inline-flex; align-items:center; font-size:14px; }
.manual-chapter-pagination { display:flex; justify-content:space-between; gap:24px; padding-top:24px; margin-top:24px; border-top:1px solid var(--color-border); }
.manual-chapter-pagination a { flex:1; min-height:44px; align-content:center; font-size:14px; }
.manual-chapter-pagination a:last-child { text-align:right; }
.manual-step-play { margin-top:12px; min-height:36px; background:transparent; border:1px solid var(--color-border-strong); border-radius:6px; padding:6px 12px; color:var(--color-link); cursor:pointer; font-size:13px!important; }
.manual-steps li { scroll-margin-top:24px; }
.manual-steps li.is-playing h3 { color:var(--color-link); }
.manual-steps li.is-playing::before { color:#28936c; }
.manual-transcript p span { font-variant-numeric:tabular-nums; font-weight:700; }
@media(max-width:1023px) { .manual-layout { grid-template-columns:1fr; gap:var(--space-6); } .manual-sidebar { position:static; max-height:none; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); } .manual-sidebar nav { display:grid; grid-template-columns:1fr 1fr; } .manual-shell { padding-top:var(--space-8); } }
@media(max-width:599px) { .manual-header { padding:0 var(--space-4); } .manual-brand { gap:var(--space-1); font-size:var(--text-sm); } .manual-brand img { width:116px; } .manual-workspace-link { max-width:144px; font-size:var(--text-xs); } .manual-shell { padding-left:var(--space-4); padding-right:var(--space-4); } .manual-intro h1 { font-size:var(--text-2xl); line-height:var(--line-2xl); } .manual-intro>p:not(.manual-kicker) { font-size:var(--text-md); } .manual-intro-meta { gap:var(--space-2) var(--space-4); font-size:var(--text-xs); } .manual-sidebar nav { grid-template-columns:1fr; } .manual-intro { margin-bottom:var(--space-8); } .manual-steps li { padding-left:var(--space-10); } .manual-chapter h2 { font-size:var(--text-xl); } }
@media(prefers-reduced-motion:no-preference) { .manual-body { scroll-behavior:smooth; } }
@media print { .manual-header,.manual-sidebar,.manual-search,.manual-media,.manual-workspace-link,.manual-step-play { display:none!important; } .manual-layout { display:block; } .manual-body { background:white; } .manual-chapter { break-before:page; } .manual-steps li { break-inside:avoid; } }