.learn-shell { width:min(1440px,calc(100% - 64px)); margin:120px auto 64px; font-family:"Century Gothic FormaFX","Century Gothic",sans-serif; }
.learn-breadcrumb,.learn-tabs { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.learn-breadcrumb { color:var(--muted); font-size:.85rem; }
.learn-breadcrumb a,.learn-tabs a { color:inherit; text-decoration:none; }
.learn-heading { margin:42px 0 30px; max-width:1040px; }
.learn-heading h1 { font:600 clamp(2rem,4vw,3.7rem)/1.12 "Century Gothic FormaFX",sans-serif; letter-spacing:-.045em; margin:10px 0 20px; }
.learn-heading>p:not(.learn-overline) { color:var(--muted); font-size:1.1rem; line-height:1.7; max-width:850px; }
.learn-overline { color:var(--primary); font-size:.78rem; font-weight:600; letter-spacing:.08em; }
.learn-tabs { margin-top:30px; border-bottom:1px solid var(--border); }
.learn-tabs a { padding:12px 0; border-bottom:2px solid transparent; }
.learn-tabs a[aria-current] { color:var(--primary); border-color:var(--primary); }
.learn-search { margin:0 0 32px; max-width:560px; }
.learn-search label { display:block; font-size:.85rem; margin:0 0 8px; }
.learn-search input { width:100%; color:var(--foreground); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; font:inherit; }
.learn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.learn-card { display:flex; flex-direction:column; padding:26px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.learn-card>img { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:10px; margin-bottom:20px; background:#101820; }
.learn-capture { margin:24px 0; }
.learn-capture img { width:100%; height:auto; border-radius:12px; border:1px solid var(--border); }
.learn-card .learn-overline { display:flex; justify-content:space-between; margin:0 0 20px; }
.learn-card .learn-overline span { color:var(--muted); }
.learn-card h2 { font-size:1.2rem; font-weight:600; line-height:1.4; margin:0; }
.learn-card>p:not(.learn-overline) { color:var(--muted); font-size:.94rem; line-height:1.65; margin:16px 0 26px; }
.learn-card>a { margin-top:auto; color:var(--primary); font-size:.9rem; text-decoration:none; display:flex; justify-content:space-between; gap:8px; }
.learn-doc-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:64px; }
.learn-toc { align-self:start; position:sticky; top:110px; max-height:calc(100vh - 130px); overflow-y:auto; }
.learn-toc h2,.learn-playlist h2 { font-size:1rem; margin:0 0 16px; }
.learn-toc a,.learn-playlist a { display:flex; gap:12px; padding:12px 8px; color:var(--muted); text-decoration:none; font-size:.86rem; line-height:1.5; border-radius:8px; }
.learn-toc a span,.learn-playlist a span { flex-shrink:0; color:var(--primary); }
.learn-toc a:hover,.learn-playlist a:hover,.learn-playlist a[aria-current] { color:var(--foreground); background:var(--surface-soft); }
.learn-document { scroll-margin-top:110px; padding:0 0 42px; margin:0 0 42px; border-bottom:1px solid var(--border); max-width:880px; }
.learn-document h2 { font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.3; margin:8px 0 16px; font-weight:600; }
.learn-document h3 { font-size:1rem; margin:28px 0 12px; }
.learn-document p,.learn-document li { line-height:1.85; }
.learn-document li { padding-left:6px; margin-bottom:8px; }
.learn-intro { color:var(--muted); }
.learn-note { background:var(--surface-soft); border-left:3px solid var(--primary); padding:14px 18px; border-radius:0 10px 10px 0; font-size:.9rem; }
.learn-help { margin:26px 0; padding:16px; background:var(--surface-soft); border-radius:12px; }
.learn-help summary,.learn-transcript summary { cursor:pointer; font-size:.9rem; line-height:1.6; }
.learn-help p { margin-bottom:0; }
.learn-watch { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:32px; }
.learn-stage { min-width:0; }
.learn-player { aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#07090e; color:#fff; }
.learn-player>p { padding:24px; }
.learn-player .ffx-player { height:100%; }
.learn-media-note { color:var(--muted); font-size:.8rem; line-height:1.7; }
.learn-playlist { align-self:start; position:sticky; top:110px; }
.learn-chapters { margin:30px 0 40px; }
.learn-chapters h2 { font-size:1rem; }
.learn-chapters>div { display:flex; gap:8px; flex-wrap:wrap; }
.learn-chapters button { border:1px solid var(--border); color:var(--foreground); background:var(--surface); border-radius:9px; padding:10px 14px; cursor:pointer; font:inherit; font-size:.85rem; }
.learn-transcript { margin:30px 0; }
.learn-transcript>div { max-height:380px; overflow:auto; margin-top:20px; }
.learn-transcript p { line-height:1.8; }
.learn-endnote { max-width:850px; color:var(--muted); font-size:.82rem; line-height:1.7; margin:42px 0 0; }
.learn-resource-links { display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; font-size:.9rem; }
.learn-resource-links a { color:var(--primary); }
.learn-catalog-card .learn-resource-links { margin:10px 0 4px; padding:0 18px; font-size:.8rem; }
.learn-document,.learn-transcript { overflow-wrap:anywhere; }
.learn-shell :focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.learn-shell [hidden] { display:none!important; }
@media(max-width:1100px) { .learn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.learn-watch { grid-template-columns:minmax(0,1fr) 240px; gap:20px; }.learn-doc-layout { gap:32px; grid-template-columns:220px minmax(0,1fr); } }
@media(max-width:800px) { .learn-shell { width:calc(100% - 32px); margin-top:100px; }.learn-grid { grid-template-columns:1fr; }.learn-doc-layout,.learn-watch { grid-template-columns:1fr; }.learn-toc,.learn-playlist { position:static; max-height:none; }.learn-toc { border-bottom:1px solid var(--border); padding-bottom:24px; }.learn-player { border-radius:10px; }.learn-heading { margin-top:28px; }.learn-card { padding:22px; }.learn-playlist { margin-top:16px; } }
@media(prefers-reduced-motion:reduce) { .learn-shell { scroll-behavior:auto; } }