:root{--tr:#c4192d;--tb:#174b86;--tw:#fff8e8}
.tutorial-mast{background:linear-gradient(105deg,#05182f 0 58%,#621322);border-bottom:7px solid var(--tr);box-shadow:0 4px 0 var(--tw),0 8px 0 var(--tb)}
.tutorial-mast h1{font-size:clamp(3.5rem,10vw,8rem);text-shadow:5px 5px 0 #8d1726}
.tutorial-mast>p{font:700 clamp(1rem,2vw,1.35rem)/1.45 Georgia;max-width:800px}
.tutorial-shell{display:grid;grid-template-columns:220px minmax(0,960px);gap:28px;align-items:start}
.tutorial-nav{position:sticky;top:18px;display:grid;border:2px solid var(--tw);background:#07172a;box-shadow:5px 5px 0 var(--tr)}
.tutorial-nav strong{padding:15px;background:var(--tr);font:900 .72rem Arial;letter-spacing:.16em;text-transform:uppercase}
.tutorial-nav a{padding:11px 14px;color:#fff;text-decoration:none;border-top:1px solid #476482;font:800 .78rem Arial}
.tutorial-nav a:hover{background:var(--tb)}
.tutorial-content{display:grid;gap:18px}
.lesson{scroll-margin-top:18px;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:clamp(20px,4vw,38px);border:2px solid #69809b;border-top:6px solid var(--tr);background:linear-gradient(135deg,#0d2848,#081424);box-shadow:8px 8px 0 #02060b}
.lesson-number{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--tw);color:#8e1726;font:900 1.3rem Arial;box-shadow:4px 4px 0 var(--tr)}
.lesson h2{margin:.15em 0 .55em;color:var(--tw);font:900 clamp(1.7rem,4vw,3rem)/1 Georgia}
.lesson h3{margin:.1em 0 .35em;color:var(--tw)}
.lesson p,.lesson li,.lesson dd{color:#d9e2ee;line-height:1.6}
.hero-lesson{border-color:var(--tw);background:linear-gradient(115deg,#153d70,#711321)}
.flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.flow b{padding:9px 12px;background:var(--tw);color:#101827;font:900 .8rem Arial;text-transform:uppercase}
.flow i{color:#fff;font-size:1.4rem}
.concept-grid,.glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.concept-grid article,.glossary-grid article{padding:15px;border-left:4px solid var(--tr);background:#06111f}
.concept-grid p,.glossary-grid p{margin:0}
.callout{padding:14px 16px;border:1px solid #82a5cb;background:#153253}
.turn-list li{padding:8px}
.turn-list li::marker{color:#ff8b97}
.action-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.action-demo div{display:grid;gap:7px;padding:16px;background:var(--tw);color:#121b29;border-bottom:5px solid var(--tr)}
.action-demo em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tb);color:#fff;font:900 1rem Arial}
.action-demo small{color:#3b4656}
.compact-definitions{display:grid;grid-template-columns:max-content 1fr;margin-top:22px}
.compact-definitions dt,.compact-definitions dd{margin:0;padding:8px;border-bottom:1px solid #38506a}
.compact-definitions dt{font-weight:bold;color:#fff}
.type-table{display:grid;border:1px solid #607997}
.type-table div{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid #607997}
.type-table b,.type-table span{padding:10px 12px}
.type-table b{background:#153e70;color:#fff;font-family:Arial}
.type-table span{background:#f7edda;color:#182233}
.final-help{padding:18px;border:2px solid var(--tw)}
.primary-link{display:inline-block;padding:13px 18px;background:var(--tr);color:#fff;text-decoration:none;font:900 .85rem Arial;text-transform:uppercase;box-shadow:4px 4px 0 var(--tw)}
@media(max-width:800px){.tutorial-shell{grid-template-columns:1fr}
.tutorial-nav{position:static;grid-template-columns:repeat(2,1fr)}
.tutorial-nav strong{grid-column:1/-1}
.lesson{grid-template-columns:1fr}
.concept-grid,.glossary-grid,.action-demo{grid-template-columns:1fr}
.type-table div{grid-template-columns:1fr}
.type-table span{padding-top:0}
}
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:12px 16px;background:var(--tw);color:#07172a;font:900 .8rem Arial;text-transform:uppercase;transform:translateY(-150%)}
.skip-link:focus{transform:none;outline:4px solid var(--tr);outline-offset:2px}
.tutorial-nav a{display:flex;align-items:center;min-height:44px}
.tutorial-nav a:focus-visible,.primary-link:focus-visible,.top-return a:focus-visible{outline:3px solid #fff;outline-offset:3px;background:var(--tr)}
.tutorial-content:focus{outline:none}
.primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
@media(max-width:800px){.tutorial-mast h1{font-size:clamp(2.7rem,15vw,5rem);overflow-wrap:anywhere}.tutorial-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-definitions{grid-template-columns:1fr}.compact-definitions dt{padding-bottom:2px}.compact-definitions dd{padding-top:2px}.flow{align-items:stretch}.flow b{flex:1 1 120px;text-align:center}.flow i{display:none}}
@media(max-width:480px){.tutorial-shell{padding-left:10px;padding-right:10px}.tutorial-nav{grid-template-columns:1fr}.tutorial-nav strong{grid-column:auto}.lesson{padding:18px 14px;gap:12px}.lesson-number{width:48px;height:48px}.lesson h2{font-size:1.7rem}.tutorial-mast>p{font-size:1rem}.primary-link{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.skip-link{transition:none!important}}