:root { --ink:#101820; --brand-navy:#06213c; --brand-orange:#ad4e16; --paper:#f4f1e8; --blue:#3765ff; --aqua:#80f0d0; --coral:#ff7d62; --line:rgba(16,24,32,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
a { color:inherit; }
button,input { font:inherit; }
.skip-link { position:absolute; left:-9999px; top:0; background:white; padding:.75rem; z-index:5; }
.skip-link:focus { left:1rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.nav { min-height:82px; padding:.65rem clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); }
.nav a { text-decoration:none; }
.nav nav { display:flex; gap:1.5rem; font-size:.85rem; font-weight:700; }
.brand { display:flex; gap:.85rem; align-items:center; color:var(--brand-navy); }
.brand-logo { width:48px; height:45px; object-fit:contain; flex:0 0 auto; }
.brand-lockup { display:grid; gap:.15rem; line-height:1; }
.brand-lockup small { color:var(--brand-orange); font-size:.58rem; font-weight:900; letter-spacing:.16em; }
.brand-lockup small em { font-family:Georgia,serif; font-size:1.08em; }
.brand-lockup strong { font-size:.92rem; font-weight:900; letter-spacing:-.015em; }
.hero .eyebrow em { color:var(--brand-orange); font-family:Georgia,serif; }
.hero { padding:clamp(4rem,8vw,8rem) clamp(1.25rem,7vw,7rem); display:grid; grid-template-columns:1.2fr .8fr; gap:4rem; align-items:center; min-height:680px; }
.eyebrow { font-size:.72rem; letter-spacing:.16em; font-weight:900; text-transform:uppercase; }
h1 { font-size:clamp(3.5rem,8vw,7.8rem); line-height:.86; letter-spacing:-.075em; margin:1.5rem 0 2rem; }
h1 span { color:var(--blue); }
.lede { max-width:680px; font-size:clamp(1.05rem,2vw,1.4rem); line-height:1.55; }
.actions { display:flex; align-items:center; gap:1.4rem; margin-top:2rem; flex-wrap:wrap; }
.button { border:0; display:inline-block; padding:.95rem 1.3rem; font-weight:900; text-decoration:none; cursor:pointer; }
.primary { background:var(--ink); color:white; }
.text-link { font-weight:800; }
.viewfinder { aspect-ratio:1; max-width:430px; width:100%; justify-self:center; position:relative; background:var(--ink); overflow:hidden; }
.viewfinder::before { content:""; position:absolute; inset:9%; background:radial-gradient(circle at center,#c7ffe7 0 11%,#2755ce 12% 29%,#18333f 30% 52%,#101820 53%); filter:contrast(1.2); }
.corner { position:absolute; width:48px; height:48px; border-color:white; z-index:2; }
.top-left { top:7%; left:7%; border-top:3px solid; border-left:3px solid; }
.top-right { top:7%; right:7%; border-top:3px solid; border-right:3px solid; }
.bottom-left { bottom:7%; left:7%; border-bottom:3px solid; border-left:3px solid; }
.bottom-right { bottom:7%; right:7%; border-bottom:3px solid; border-right:3px solid; }
.axis { position:absolute; background:rgba(255,255,255,.55); z-index:2; }
.horizontal { left:15%; right:15%; height:1px; top:50%; }
.vertical { top:15%; bottom:15%; width:1px; left:50%; }
.viewfinder small { position:absolute; left:8%; bottom:3%; color:white; letter-spacing:.12em; }
.method { border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.method article { padding:2.3rem clamp(1.25rem,4vw,4rem); border-right:1px solid var(--line); }
.method article:last-child { border-right:0; }
.method span { color:var(--blue); font-weight:900; }
.method h3 { margin:.5rem 0; }
.method p { line-height:1.5; margin:0; }
.pathway,.setup,.curriculum,.workspace { padding:clamp(4rem,7vw,7rem) clamp(1.25rem,7vw,7rem); }
.pathway { background:var(--ink); color:white; }
.pathway .section-heading>p { color:rgba(255,255,255,.72); }
.pathway-list { margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); border:1px solid rgba(255,255,255,.22); }
.pathway-list article { min-height:210px; padding:1.6rem; border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); }
.pathway-list article:nth-child(2n) { border-right:0; }
.pathway-list article:nth-last-child(-n+2) { border-bottom:0; }
.pathway-list span { color:var(--aqua); font-size:.7rem; letter-spacing:.15em; font-weight:900; }
.pathway-list h3 { font-size:1.65rem; margin:1.6rem 0 .8rem; }
.pathway-list p { margin:0; line-height:1.6; color:rgba(255,255,255,.76); }
.pathway-actions { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin-top:2rem; }
.pathway .primary { background:var(--aqua); color:var(--ink); }
.setup { background:#fff; border-bottom:1px solid var(--line); }
.setup-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.setup-grid article { min-width:0; background:#fff; padding:1.7rem; min-height:260px; }
.setup-grid span { color:var(--blue); font-size:.7rem; letter-spacing:.15em; font-weight:900; }
.setup-grid h3 { font-size:1.6rem; margin:1.5rem 0 .8rem; }
.setup-grid p { line-height:1.55; }
.setup-grid pre { background:var(--ink); color:var(--aqua); padding:1rem; overflow:auto; line-height:1.5; font-size:.78rem; }
.section-heading,.workspace-heading { display:flex; justify-content:space-between; gap:3rem; align-items:end; }
.section-heading h2,.workspace-heading h2 { font-size:clamp(2.8rem,6vw,5rem); line-height:.95; letter-spacing:-.055em; margin:.8rem 0 0; }
.section-heading>p { max-width:560px; line-height:1.6; }
.level-tabs,.workspace-tabs { display:flex; gap:.5rem; margin:3rem 0 1.5rem; flex-wrap:wrap; }
.level-tabs button,.workspace-tabs button { border:1px solid var(--line); background:transparent; padding:.8rem 1rem; font-weight:800; cursor:pointer; }
.level-tabs button[aria-selected="true"],.workspace-tabs button[aria-selected="true"] { background:var(--blue); color:white; border-color:var(--blue); }
.lesson-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.lesson-card { min-height:280px; border:0; padding:1.5rem; background:var(--paper); color:var(--ink); text-align:left; position:relative; }
button.lesson-card { cursor:pointer; }
.lesson-card.selected { background:var(--aqua); }
.lesson-card.completed::after { content:"✓"; position:absolute; top:3.1rem; right:1.5rem; width:1.7rem; height:1.7rem; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:white; font-weight:900; }
.lesson-card h3 { font-size:1.45rem; margin:2.8rem 0 1rem; }
.lesson-card p { line-height:1.55; }
.pill,.status { font-size:.65rem; letter-spacing:.12em; font-weight:900; }
.status { float:right; }
.arrow { position:absolute; right:1.5rem; bottom:1.2rem; font-size:2rem; }
.workspace { background:#fff; border-top:1px solid var(--line); }
.workspace[hidden] { display:none; }
.duration { font-size:.72rem; letter-spacing:.1em; font-weight:900; }
.view { display:grid; grid-template-columns:1.4fr .6fr; gap:4rem; border-top:1px solid var(--line); padding-top:3rem; min-height:340px; }
.view[hidden] { display:none; }
.outcome { font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.28; max-width:850px; }
.signal-panel { background:var(--ink); color:white; padding:2rem; }
.signal-panel li { margin:1rem 0; }
.view pre { background:var(--ink); color:var(--aqua); padding:2rem; overflow:auto; line-height:1.7; }
fieldset { border:1px solid var(--line); margin:0 0 1.3rem; padding:1.4rem; }
legend { font-weight:850; padding:0 .5rem; }
label { display:block; margin:.9rem 0; line-height:1.4; }
.quiz-result { font-weight:900; min-height:1.5rem; }
.answer-feedback { margin:.8rem 0 0; padding:.8rem 1rem; border-left:4px solid var(--blue); background:rgba(55,101,255,.08); line-height:1.45; }
.answer-feedback.correct { border-color:#087f5b; background:rgba(8,127,91,.08); }
.answer-feedback.review { border-color:var(--coral); background:rgba(255,125,98,.1); }
.progress-panel { display:grid; grid-template-columns:minmax(230px,1fr) minmax(220px,1fr) auto; gap:2rem; align-items:center; margin:2.5rem 0 1rem; padding:1.4rem; border:1px solid var(--line); background:#fff; }
.progress-panel p { margin:.3rem 0; }
.progress-panel small { line-height:1.4; }
.progress-panel progress { width:100%; height:1rem; accent-color:var(--blue); }
.progress-reset { background:transparent; color:var(--ink); border:1px solid var(--line); }
.site-footer { background:var(--brand-navy); color:white; padding:2rem clamp(1.25rem,7vw,7rem); display:grid; grid-template-columns:minmax(250px,1.2fr) minmax(190px,.8fr) auto; align-items:center; gap:2rem; font-size:.7rem; letter-spacing:.08em; font-weight:800; }
.footer-brand { display:flex; align-items:center; gap:1rem; width:max-content; max-width:100%; text-decoration:none; letter-spacing:normal; }
.footer-logo-tile { width:62px; height:58px; display:grid; place-items:center; flex:0 0 auto; padding:.35rem; background:var(--paper); border-radius:.25rem; }
.footer-logo-tile img { width:100%; height:100%; object-fit:contain; }
.footer-brand>span:last-child { display:grid; gap:.28rem; }
.footer-brand strong { font-size:1rem; }
.footer-brand strong em { color:#e47a32; font-family:Georgia,serif; }
.footer-brand small { color:rgba(255,255,255,.72); font-size:.72rem; line-height:1.35; }
.footer-meta { display:grid; gap:.45rem; }
.footer-links { display:grid; gap:.6rem; justify-items:end; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { text-decoration:underline; text-underline-offset:.25rem; }
:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } .viewfinder { max-width:340px; } .lesson-grid { grid-template-columns:repeat(2,1fr); } .setup-grid { grid-template-columns:1fr; } .progress-panel { grid-template-columns:1fr; } .view { grid-template-columns:1fr; } .section-heading { display:block; } .site-footer { grid-template-columns:1fr 1fr; } .footer-links { justify-items:start; } }
@media (max-width:620px) { .nav nav a:not(:last-child) { display:none; } .brand-logo { width:42px; height:40px; } .brand-lockup small { font-size:.52rem; } .brand-lockup strong { font-size:.78rem; } .hero { min-height:auto; } .method,.pathway-list,.lesson-grid { grid-template-columns:1fr; } .method article { border-right:0; border-bottom:1px solid var(--line); } .pathway-list article,.pathway-list article:nth-child(2n),.pathway-list article:nth-last-child(-n+2) { border-right:0; border-bottom:1px solid rgba(255,255,255,.22); } .pathway-list article:last-child { border-bottom:0; } .workspace-heading { align-items:flex-start; flex-direction:column; } .lesson-card { min-height:220px; } .site-footer { grid-template-columns:1fr; align-items:start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }