
:root{--navy:#182d43;--blue:#235fba;--muted:#667482;--line:#dce2e7;--paper:#f5f6f7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--navy);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #3274d0;outline-offset:5px}.container{width:calc(100% - 64px);max-width:1220px;margin:auto}.site-header{background:white;border-bottom:1px solid var(--line)}.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{height:39px;width:49px;background:var(--navy);color:white;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:-.5px;border-radius:3px}.brand-name{font-size:19px;display:block;font-weight:700;letter-spacing:-.5px}.brand-sub{font-size:10px;color:var(--muted);display:block;margin-top:4px;letter-spacing:1.3px;text-transform:uppercase}.top-nav{display:flex;gap:27px;font-size:13px;align-items:center}.top-nav a:hover{color:var(--blue)}.top-nav .nav-test{border:1px solid #bccbdc;border-radius:5px;padding:10px 15px}.intro{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:32px 0 28px}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);margin:0 0 11px}h1{font-size:36px;line-height:1.18;font-weight:700;letter-spacing:-1.3px;margin:0 0 10px}.intro-copy{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:660px}.intro-aside{border-left:1px solid #ccd6df;padding-left:25px;min-width:200px}.intro-aside strong{font-size:13px;font-weight:600;display:block;margin-bottom:7px}.intro-aside span{font-size:12px;color:var(--muted);line-height:1.7;display:block}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 13px}.section-heading h2{font-size:17px;font-weight:700;letter-spacing:-.3px;margin:0}.section-heading p{font-size:12px;color:var(--muted);margin:0}.section-number{color:#96a2af;font-size:12px;font-weight:400;margin-right:11px;font-variant-numeric:tabular-nums}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.tool{background:white;border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column;padding:20px;transition:border-color .15s,box-shadow .15s}.tool:hover{border-color:#88a7d0;box-shadow:0 3px 12px #152a4210}.tool-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}.course-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #dce4ed;border-radius:5px;color:#315372;background:#f5f8fb;font-size:14px;font-weight:bold}.course-icon svg{height:20px;width:20px}.category{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;font-weight:bold;color:var(--muted)}.tool h3{font-size:20px;letter-spacing:-.4px;margin:0 0 8px;line-height:1.25}.description{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 13px}.meta{font-size:11px;color:#62788b;margin:0 0 16px}.card-link{margin-top:auto;border-top:1px solid #e9edf1;padding-top:13px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--blue)}.arrow{font-size:19px;font-weight:400}.practice-section{margin-top:25px}.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.practice-grid .tool{padding:19px 20px;display:grid;grid-template-columns:1fr auto;column-gap:18px}.practice-grid .tool h3{font-size:19px;margin:7px 0}.practice-grid .description{margin-bottom:0;max-width:430px}.practice-grid .card-link{border:0;padding:0;margin:0;gap:16px;align-self:center;white-space:nowrap}.practice-grid .meta{margin:9px 0 0}.exam{border-left:3px solid #315f94}.coming{margin-top:23px;padding:14px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.coming h2{font-size:12px;margin:0;font-weight:600}.coming-list{display:flex;gap:25px;align-items:center;font-size:12px;color:var(--muted)}.coming-item{display:flex;align-items:center;gap:9px}.soon{font-size:9px;letter-spacing:.5px;text-transform:uppercase;border:1px solid #d7dfe5;border-radius:3px;padding:4px 6px;color:#74818c}.footer{border-top:1px solid var(--line);margin-top:5px;padding:17px 0 22px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;line-height:1.6}.footer strong{color:#435467;font-weight:600}.skip{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}
@media(min-width:1400px){.container{max-width:1260px}.intro{padding:35px 0 30px}.tool{padding:22px}}
@media(max-width:1000px){.intro-aside{display:none}.practice-grid .tool{display:flex}.practice-grid .card-link{margin-top:14px;align-self:stretch;border-top:1px solid #e9edf1;padding-top:12px}.course-grid{gap:10px}.tool{padding:17px}.tool h3{font-size:18px}.top-nav{gap:16px}}
@media(max-width:700px){.container{width:calc(100% - 32px)}.header-inner{height:68px}.brand-name{font-size:17px}.brand-sub{font-size:8px}.top-nav>a:not(.nav-test){display:none}.top-nav .nav-test{font-size:11px;padding:9px}.intro{padding:26px 0}h1{font-size:29px;letter-spacing:-.8px}.intro-copy{font-size:13px}.section-heading{display:block}.section-heading p{margin:7px 0 0;padding-left:26px}.course-grid,.practice-grid{grid-template-columns:1fr}.tool-top{margin-bottom:12px}.tool h3{font-size:20px}.coming,.footer{align-items:flex-start;flex-direction:column;gap:12px}.coming-list{flex-wrap:wrap;gap:14px}.practice-section{margin-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tool{transition:none}}
/* Shared homepage presentation for both entry points. */
body{background:#eaf0f6}.site-header{background:#142c46;border-bottom:3px solid #3b7cdb;box-shadow:0 3px 15px #152a4215}.brand-name{color:#fff}.brand-sub{color:#bdcde0}.brand-mark{background:#fff;color:#173753;border-radius:7px}.top-nav{color:#e5edf8}.top-nav a:hover{color:white}.top-nav .nav-test{background:#fff;color:#193f6c;border-color:white}.intro{margin:23px 0;background:#fff;border:1px solid #d6e1ed;border-left:5px solid #376bc2;border-radius:12px;padding:28px;box-shadow:0 4px 14px #17355205}.intro-aside{background:#f0f5fc;border:1px solid #dbe6f3;border-radius:9px;padding:17px;min-width:235px}.intro-aside strong{color:#28568e}h1{font-size:32px}#courses,#practice,#games{background:white;border:1px solid #d6e0eb;border-radius:12px;margin:20px 0;padding:23px;box-shadow:0 5px 18px #17355206}.section-heading{padding-bottom:16px;margin-bottom:19px;border-bottom:1px solid #e2e9f0}.section-heading h2{font-size:20px;display:flex;align-items:center}.section-number{display:inline-grid;place-items:center;background:#e9f0fc;border:1px solid #d8e4f6;color:#315c9c;width:32px;height:32px;border-radius:8px;font-size:12px;font-weight:700;margin-right:12px}#practice .section-number{background:#e8f3ef;border-color:#d6e9e1;color:#266f53}#games .section-number{background:#f1edfa;border-color:#e4daf5;color:#72539e}.tool{border:1px solid #cdd9e6;border-top:3px solid #386cc1;background:#fdfefe;border-radius:9px;box-shadow:0 2px 4px #142c4604;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.course-grid>.tool:nth-child(2){border-top-color:#b4773e}.course-grid>.tool:nth-child(3){border-top-color:#8261ad}.practice-grid>.tool{border-top-color:#34836e}.tool:hover,.tool:focus-visible{transform:translateY(-4px);border-color:#6e97cc;box-shadow:0 10px 23px #193c6112}.course-icon{width:41px;height:41px;background:#eff4fc}.card-link{color:#235aab}.arrow{transition:transform .2s ease}.tool:hover .arrow{transform:translateX(4px)}.practice-grid .exam{border-left:1px solid #cdd9e6}.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.game-card{border-top-color:#8b73af;background:#fcfbfe;padding:18px 20px}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.game-symbol{width:35px;height:35px;color:#755895;background:#eee8f7;border-radius:7px;display:grid;place-items:center}.game-symbol svg{width:23px;height:23px}.game-card h3{font-size:19px}.game-card .description{margin-bottom:14px}.soon{background:#f1edf8;border:1px solid #e3d9ef;color:#735593;font-size:10px;font-weight:700;padding:5px 8px;border-radius:5px}.site-footer{background:#142c46;margin-top:28px;border-top:3px solid #284b72}.site-footer .footer{border:0;margin:0;padding:23px 0;color:#c2d0df}.site-footer .footer strong{color:white}.intro,#courses,#practice,#games{animation:section-in .45s ease-out both}#practice{animation-delay:.06s}#games{animation-delay:.12s}@keyframes section-in{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.intro{padding:24px}.section-heading p{max-width:290px;line-height:1.6}.practice-grid .tool{padding:18px}}
@media(max-width:700px){.intro{margin:16px 0;padding:20px}.intro h1{font-size:27px}#courses,#practice,#games{padding:16px;margin:16px 0}.section-heading h2{font-size:18px}.section-heading p{padding-left:0;margin-top:10px;max-width:none}.games-grid{grid-template-columns:1fr}.top-nav .nav-test{padding:8px}.tool:hover{transform:none}.site-footer .footer{padding:20px 0}}
@media(prefers-reduced-motion:reduce){.intro,#courses,#practice,#games{animation:none}.tool,.arrow{transition:none}.tool:hover,.tool:focus-visible,.tool:hover .arrow{transform:none}}
/* Light, individually framed tool cards inspired by the supplied reference. */
body{background:#f3f6fb}.site-header{background:#fff;border-bottom:1px solid #dce5f0;box-shadow:0 2px 12px #284d7810}.brand-name{color:#1c3553}.brand-sub{color:#667b92}.brand-mark{color:#fff;background:#285b94}.top-nav{color:#425c79}.top-nav a:hover{color:#245daa}.top-nav .nav-test{background:#edf4ff;border:1px solid #c8dbf5;color:#275c9f}.intro{background:transparent;border:0;box-shadow:none;margin:0;padding:30px 0 24px}.intro-aside{background:#fff;border:1px solid #dce5f0;box-shadow:0 3px 12px #234b7310}.intro h1{font-size:34px}#courses,#practice,#games{padding:0;background:transparent;border:0;box-shadow:none;margin:0 0 25px}.section-heading{border-bottom:0;margin-bottom:13px;padding-bottom:0}.section-heading h2{font-size:18px}.section-heading p{font-size:12px}.section-number{width:28px;height:28px;border-radius:8px}.course-grid,.practice-grid,.games-grid{gap:18px}.tool{--card-accent:#407dcb;--card-border:#b7cfee;--card-tint:#edf5ff;background:linear-gradient(125deg,#fff 45%,var(--card-tint));border:1px solid var(--card-border);border-top:1px solid var(--card-border);border-radius:15px;padding:21px;box-shadow:0 5px 17px #2549750d,inset 0 0 0 1px #ffffffb3;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.tool::before{content:'';position:absolute;left:22px;right:22px;top:0;height:3px;background:var(--card-accent);opacity:.65;border-radius:0 0 4px 4px}.tool:hover,.tool:focus-visible{border-color:var(--card-accent);transform:translateY(-4px);box-shadow:0 10px 25px #25497519,inset 0 0 0 1px #fff}.course-grid>.tool:nth-child(2){--card-accent:#bb793c;--card-border:#e7c9aa;--card-tint:#fff5e9;border-top-color:var(--card-border)}.course-grid>.tool:nth-child(3){--card-accent:#348e9b;--card-border:#add5dc;--card-tint:#eaf9fa;border-top-color:var(--card-border)}.practice-grid>.tool{--card-accent:#4c809f;--card-border:#bdd3df;--card-tint:#edf7fb;border-top-color:var(--card-border)}.practice-grid>.exam{--card-accent:#577dca;--card-border:#bbccee;--card-tint:#eff3ff;border-left:1px solid var(--card-border)}.tool-top{margin-bottom:14px}.course-icon{background:var(--card-tint);border-color:var(--card-border);color:var(--card-accent);width:40px;height:40px;border-radius:10px}.tool h3{font-size:20px;color:#213c58}.tool .description{color:#60758c}.tool .meta{color:#637a91}.tool .card-link{border-color:var(--card-border);color:var(--card-accent)}.practice-grid .tool{padding:21px;display:flex}.practice-grid .card-link{margin-top:15px;padding-top:12px;border-top:1px solid var(--card-border);align-self:stretch;white-space:normal}.game-card{--card-accent:#9270b7;--card-border:#d4c4e9;--card-tint:#f7f1ff;border-top-color:var(--card-border)}.game-card:nth-child(2){--card-accent:#528c78;--card-border:#badbce;--card-tint:#effaf4}.game-symbol{background:var(--card-tint);color:var(--card-accent);border:1px solid var(--card-border);border-radius:10px}.soon{background:white;border-color:var(--card-border);color:#6c6480}.site-footer{background:#fff;border-top:1px solid #d9e3ee;margin-top:27px}.site-footer .footer{color:#6c7e90;padding:20px 0}.site-footer .footer strong{color:#294967}
@media(max-width:1000px){.tool,.practice-grid .tool{padding:18px}.intro h1{font-size:31px}}
@media(max-width:700px){.intro{padding:24px 0}.intro h1{font-size:28px}#courses,#practice,#games{margin:0 0 24px;padding:0}.section-heading p{margin:8px 0 0}.course-grid,.practice-grid,.games-grid{gap:13px}.tool,.practice-grid .tool{padding:20px}.tool:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.tool{transition:none}.tool:hover,.tool:focus-visible{transform:none}}
/* Distinct title bands make every tool name easy to scan. */
.tool h3{background:var(--card-tint);border:1px solid var(--card-border);border-left:4px solid var(--card-accent);border-radius:7px;padding:10px 12px;margin:0 0 12px;color:#193751;line-height:1.35;font-weight:700}
.practice-grid .tool h3{background:var(--card-tint);margin:10px 0 12px;padding:10px 12px;font-size:19px}
.game-card h3{margin:0 0 12px;font-size:19px}
@media(max-width:700px){.tool h3,.practice-grid .tool h3,.game-card h3{font-size:19px;padding:10px}}
