.assignment-guide-page { color-scheme:dark; --guide-bg:#0a0a1a; --guide-panel:rgba(17,17,40,.85); --guide-line:rgba(127,90,240,.35); --guide-text:#fff; --guide-muted:rgba(255,255,255,.75); --guide-mint:#7f5af0; --guide-gold:#ffd700; --guide-cyan:#00d4ff; }
.assignment-guide-page #guide-main,.assignment-guide-page #guide-main *,.assignment-guide-page .guide-footer * { box-sizing:border-box; }
body.assignment-guide-page { background:#0a0a1a; color:var(--guide-text); font:400 1rem/1.65 var(--font-body,'Outfit',sans-serif); margin:90px 0 0; min-width:0; }
.assignment-guide-page a { color:var(--guide-cyan); }
.assignment-guide-page :focus-visible { outline:3px solid var(--guide-gold); outline-offset:4px; }
.guide-skip { background:var(--guide-gold); color:#122332!important; inset-inline-start:1rem; padding:.65rem 1rem; position:fixed; top:-5rem; z-index:10; }
.guide-skip:focus { top:1rem; }
.guide-hero { isolation:isolate; margin:auto; max-width:1200px; min-height:0; overflow:hidden; padding:72px 24px 56px; position:relative; }
.guide-hero-shot { background:var(--guide-panel); border:1px solid var(--guide-line); border-radius:18px; box-shadow:0 16px 50px rgba(0,0,0,.22); margin:1.8rem 0 0; overflow:hidden; width:100%; }
.guide-hero-shot img { aspect-ratio:16/9; display:block; height:auto; object-fit:contain; width:100%; }
.guide-hero-shot figcaption { color:var(--guide-muted); font-size:.85rem; padding:.45rem .7rem; }
.guide-kicker { color:var(--guide-mint); font-size:.78rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.guide-hero h1 { font-family:var(--font-display,'Fredoka',sans-serif); font-size:clamp(2.7rem,7vw,5rem); font-weight:700; line-height:1.07; margin:.8rem 0; max-width:900px; text-wrap:balance; }
.guide-lede { color:var(--guide-muted); font-size:clamp(1.1rem,2vw,1.4rem); max-width:640px; }
.guide-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.guide-primary,.guide-secondary { align-items:center; border:1px solid var(--guide-mint); border-radius:12px; display:inline-flex; font-weight:700; justify-content:center; min-height:48px; padding:.7rem 1.15rem; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.guide-primary:hover,.guide-secondary:hover { box-shadow:0 8px 24px rgba(127,90,240,.28); transform:translateY(-2px); }
.guide-primary { background:linear-gradient(135deg,#7f5af0,#00b8e6); color:#fff!important; }
.guide-secondary { background:rgba(127,90,240,.11); color:var(--guide-text)!important; }
.guide-layout { display:grid; gap:clamp(1.5rem,4vw,4rem); grid-template-columns:minmax(195px,245px) minmax(0,1fr); margin:auto; max-width:1200px; padding:1rem 24px 5rem; }
.guide-index { align-self:start; background:var(--guide-panel); border:1px solid var(--guide-line); border-radius:16px; display:block; padding:1rem; position:sticky; top:110px; }
.guide-index h2 { color:var(--guide-gold); font-size:1rem; margin:0 0 .6rem; }
.guide-index ol { display:grid; gap:.15rem; list-style:none; margin:0; padding:0; }
.guide-index a { border-radius:6px; color:var(--guide-muted); display:block; font-size:.9rem; padding:.45rem .55rem; text-decoration:none; }
.guide-index a:hover,.guide-index a:focus-visible { background:rgba(127,90,240,.22); color:var(--guide-text); }
.guide-chapters { display:grid; gap:1.1rem; min-width:0; }
.guide-chapter { background:var(--guide-panel); border:1px solid var(--guide-line); border-radius:20px; min-width:0; padding:clamp(1rem,3vw,2rem); scroll-margin-top:110px; }
.guide-chapter-header { align-items:start; display:flex; gap:1rem; }
.guide-number { align-items:center; background:rgba(127,90,240,.16); border:1px solid var(--guide-mint); border-radius:10px; color:#bfaeff; display:inline-flex; flex:none; font-size:.85rem; font-weight:900; height:2.5rem; justify-content:center; width:2.5rem; }
.guide-chapter h2 { font-family:var(--font-display,'Fredoka',sans-serif); font-size:clamp(1.55rem,3vw,2rem); line-height:1.2; margin:.1rem 0 .8rem; }
.guide-chapter p { color:var(--guide-muted); margin:.7rem 0; max-width:72ch; }
.guide-chapter strong { color:var(--guide-text); }
.guide-media { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin-top:1.4rem; }
.guide-media figure { background:#0a0a1a; border:1px solid var(--guide-line); border-radius:12px; margin:0; min-width:0; overflow:hidden; }
.guide-media a { display:block; }
.guide-media img { aspect-ratio:16/10; background:#111128; color:var(--guide-text); display:block; height:auto; object-fit:contain; width:100%; }
.guide-media figcaption { color:var(--guide-muted); font-size:.85rem; padding:.6rem .75rem; }
.guide-media figcaption a { color:var(--guide-cyan); display:inline; font-weight:700; }
.guide-final { background:linear-gradient(110deg,rgba(127,90,240,.20),rgba(0,212,255,.10)); border:1px solid var(--guide-line); border-radius:20px; margin:0 auto 4rem; max-width:1152px; padding:clamp(1.2rem,4vw,3rem); width:calc(100% - 48px); }
.guide-final h2 { font-family:var(--font-display,'Fredoka',sans-serif); font-size:clamp(1.8rem,4vw,2.7rem); margin:.2rem 0; }
.guide-final p:not(.guide-kicker) { color:var(--guide-muted); }
[dir=rtl] .guide-chapter-header { flex-direction:row; }
@media (max-width:760px) { .guide-layout { grid-template-columns:minmax(0,1fr); } .guide-index { position:static; } .guide-index ol { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); } }
@media (max-width:480px) { .guide-hero { padding-top:36px; } .guide-hero-actions > * { width:100%; } .guide-chapter-header { gap:.65rem; } }
@media (prefers-reduced-motion:reduce) { .assignment-guide-page .guide-primary,.assignment-guide-page .guide-secondary { transition:none; } }
.assignment-guide-page .guide-footer .footer-content { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.assignment-guide-page .guide-footer h2 { color:#fff; font-family:var(--font-display,'Fredoka',sans-serif); font-size:1.1rem; margin:0 0 .6rem; }
.assignment-guide-page .guide-footer a { color:var(--guide-cyan); display:inline-flex; min-height:44px; align-items:center; }