:root { --ink:#101c38; --muted:rgba(16,28,56,.68); --navy:#101c38; --blue:#2675d8; --teal:#168c86; --leaf:#557f54; --gold:#f1c64a; --coral:#ef6a45; --paper:#fff5d9; --cream:#fffdf8; --sky:#eaf3fb; }
body { background:linear-gradient(180deg,#fffdf8 0%,#eaf3fb 48%,#fff5d9 100%); }.guide-header { background:rgba(255,253,248,.88); }.hero { grid-template-columns:minmax(0,1fr) minmax(360px,.62fr); }.hero h1 { font-size:clamp(3.2rem,7.7vw,7.2rem); line-height:.83; }.hero h1 span,.hero h1 strong { display:block; overflow-wrap:normal; word-break:normal; }.hero h1 strong { color:var(--coral); font-weight:950; }.button.primary { background:var(--navy); }.button.secondary { background:var(--gold); }
.systems-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-radius:8px; padding:18px; background:var(--navy); color:white; box-shadow:var(--shadow); }.system { min-height:300px; border-radius:8px; padding:22px; }.system.fast { background:var(--coral); }.system.slow { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); }.system > span { font-size:3rem; font-weight:950; opacity:.3; }.system > p { margin:34px 0 5px; font-size:.72rem; font-weight:950; letter-spacing:.12em; }.system h2 { font-size:1.6rem; }.system ul { margin:24px 0 0; padding-left:17px; color:rgba(255,255,255,.78); line-height:1.8; }.handoff { display:grid; grid-column:1/-1; grid-template-columns:1fr auto auto auto 1fr; gap:10px; align-items:center; border-top:1px solid rgba(255,255,255,.14); padding:16px 8px 4px; color:rgba(255,255,255,.62); font-size:.75rem; text-align:center; }.handoff b { color:var(--gold); }.handoff i { font-style:normal; }.systems-panel > small { grid-column:1/-1; padding:2px 8px 8px; color:rgba(255,255,255,.48); line-height:1.4; }
.snap-strip article:nth-child(1) { border-top:5px solid var(--coral); }.snap-strip article:nth-child(2) { border-top:5px solid var(--blue); }.snap-strip article:nth-child(3) { border-top:5px solid var(--gold); }.snap-strip article:nth-child(4) { border-top:5px solid var(--teal); }
.part-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }.part-grid article,.bias-grid article { border:1px solid var(--line); border-radius:8px; padding:24px; background:white; box-shadow:0 14px 36px rgba(16,28,56,.06); }.part-grid article:nth-child(1) { border-top:5px solid var(--coral); }.part-grid article:nth-child(2) { border-top:5px solid var(--blue); }.part-grid article:nth-child(3) { border-top:5px solid var(--gold); }.part-grid article:nth-child(4) { border-top:5px solid var(--teal); }.part-grid article:nth-child(5) { border-top:5px solid #8059a7; }.part-grid span,.bias-grid span { color:var(--coral); font-size:.7rem; font-weight:950; letter-spacing:.1em; }.part-grid h3,.bias-grid h3 { margin-top:22px; font-size:1.32rem; }.part-grid p,.bias-grid p { color:var(--muted); line-height:1.53; }.part-grid b,.bias-grid b { display:block; margin-top:20px; color:var(--teal); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }.part-grid b + p,.bias-grid b + p { margin-top:6px; }
.bias-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; }.bias-grid article { border-left:5px solid var(--blue); }
.slow-check { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px; border-radius:8px; padding:24px; background:var(--navy); color:white; }.slow-check b { grid-column:1/-1; margin-bottom:6px; color:var(--gold); font-size:.72rem; letter-spacing:.1em; }.slow-check span { border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:14px; color:rgba(255,255,255,.76); font-size:.86rem; line-height:1.4; }.workout-section { background:linear-gradient(135deg,var(--navy),#2b4b87); }
@media (max-width:980px) { .part-grid { grid-template-columns:repeat(2,1fr); }.slow-check { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .guide-brand > span:last-child { display:none; }.hero { grid-template-columns:1fr; }.hero h1 { font-size:clamp(2.7rem,13vw,4rem); line-height:.88; }.systems-panel { padding:12px; }.system { min-height:250px; padding:16px; }.system h2 { font-size:1.25rem; }.system ul { padding-left:15px; font-size:.84rem; }.part-grid,.bias-grid,.slow-check { grid-template-columns:1fr; }.slow-check b { grid-column:auto; }.handoff { grid-template-columns:1fr auto auto auto 1fr; } }
@media (max-width:380px) { .hero h1 { font-size:12.4vw; }.systems-panel { grid-template-columns:1fr; }.handoff,.systems-panel > small { grid-column:auto; }.system { min-height:auto; }.system > p { margin-top:20px; } }