.web-course{--web-html: #e34f26;--web-css: #1572b6;color:var(--cream);padding-bottom:4rem}.web-course :where(.web-hero,.web-duo,.web-skills,.web-program){width:min(1400px,calc(100% - 3rem));margin-inline:auto}.web-kicker,.web-actions,.web-facts,.web-module__selector,.web-module time{font-family:var(--ff-mono)}.web-kicker{color:color-mix(in srgb,var(--web-css) 72%,var(--muted));font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.web-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,.75fr) minmax(260px,.38fr);gap:1rem;padding-block:2.5rem 1.25rem;align-items:stretch}.web-hero__copy,.web-browser,.web-facts,.web-language,.web-skill,.web-module{border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:inset 0 1px #ffffff0a}.web-hero__copy{min-height:560px;padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end}.web-hero h1{margin-block:2rem 1rem;font-family:var(--ff-mono);font-size:5rem;line-height:.86;letter-spacing:0}.web-title__html{color:var(--web-html)}.web-title__amp{color:var(--cream)}.web-title__css{color:var(--web-css)}.web-lead{max-width:62ch;color:var(--muted);font-size:1rem}.web-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}.web-actions a{border:1px solid color-mix(in srgb,var(--web-html) 35%,var(--border));padding:.72rem .9rem;color:var(--amber);font-size:.76rem;transition:transform .25s var(--ease-out-expo),background .2s,border-color .2s}.web-actions a:hover{transform:translateY(-2px);border-color:var(--web-css);background:color-mix(in srgb,var(--web-css) 8%,transparent)}.web-browser{min-height:560px;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.web-browser__bar{min-height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.45rem;padding-inline:.9rem;font-family:var(--ff-mono);color:var(--muted);font-size:.68rem}.web-browser__bar span{width:.62rem;height:.62rem;border:1px solid var(--border-2);border-radius:999px}.web-browser__bar strong{margin-left:auto;font-weight:400}.web-browser__viewport{display:grid;grid-template-rows:1fr auto;gap:1rem;padding:1rem}.web-page-frame{display:grid;grid-template-areas:"header header" "nav nav" "main main" "footer footer";grid-template-rows:54px 42px 1fr 46px;gap:.6rem;border:1px solid color-mix(in srgb,var(--web-css) 35%,var(--border));padding:.8rem;background:#0000002e}.web-page-frame>*{border:1px dashed color-mix(in srgb,var(--web-html) 45%,var(--border));display:grid;place-items:center;color:var(--muted);font-family:var(--ff-mono);font-size:.68rem;text-transform:uppercase}.web-page-frame header{grid-area:header}.web-page-frame nav{grid-area:nav}.web-page-frame footer{grid-area:footer}.web-page-frame main{grid-area:main;display:grid;grid-template-columns:1fr .65fr;grid-template-rows:.75fr 1fr;gap:.6rem;padding:.6rem;place-items:stretch}.web-page-frame main>*{border:1px solid color-mix(in srgb,var(--border-2) 68%,transparent);background:color-mix(in srgb,var(--surface-2) 24%,transparent);display:grid;place-items:center;min-width:0;min-height:0}.web-page-frame main section{grid-column:1 / -1}.web-style-sheet{border-left:2px solid var(--web-css);background:#0003;padding:.9rem;display:grid;gap:.25rem;font-family:var(--ff-code);color:var(--muted);font-size:.78rem}.web-style-sheet span{display:block}.web-style-sheet .selector{color:var(--web-css)}.web-facts dl{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}.web-facts div{padding:1rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.45rem;justify-content:flex-end}.web-facts div:last-child{border-bottom:0}.web-facts dt{color:var(--border-2);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase}.web-facts dd{color:var(--cream);font-size:.78rem;line-height:1.38}.web-duo,.web-skills,.web-program{padding-block:1.5rem}.web-section-head{margin-bottom:1rem}.web-section-head h2{max-width:760px;font-family:var(--ff-mono);font-size:1.55rem;line-height:1.15;letter-spacing:0}.web-duo__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1rem}.web-language{min-height:360px;padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.web-language:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%);pointer-events:none}.web-language>*{position:relative}.web-language--html{--accent: var(--web-html)}.web-language--css{--accent: var(--web-css)}.web-language__mark{font-family:var(--ff-mono);color:var(--accent);font-size:.78rem}.web-language h3{margin-top:3rem;font-family:var(--ff-mono);font-size:2rem;letter-spacing:0}.web-language p{max-width:64ch;color:var(--muted)}.web-language dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.5rem}.web-language dt,.web-language dd{font-size:.68rem}.web-skills{display:grid;grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);gap:1rem;align-items:start}.web-section-head--side{position:sticky;top:1rem}.web-skills__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.web-skill{min-height:230px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}.web-skill span{color:var(--web-html);font-family:var(--ff-mono);font-size:.72rem}.web-skill h3{font-family:var(--ff-mono);font-size:1rem;letter-spacing:0}.web-skill p{color:var(--muted);font-size:.84rem}.web-program{display:block}.web-module-list{display:grid;gap:.75rem}.web-module{display:grid;grid-template-columns:148px minmax(0,1fr) 92px;gap:1rem;padding:1rem}.web-module__selector{display:grid;gap:.5rem;align-content:start}.web-module__selector span{color:var(--web-html)}.web-module__selector code{color:var(--muted);font-size:.68rem}.web-module h3{font-family:var(--ff-mono);font-size:1.05rem;letter-spacing:0}.web-module__body>p:not(.web-module__output){color:var(--muted);font-size:.84rem}.web-module__lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1rem;margin-block:1rem;list-style:none}.web-module__lessons a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.55rem;align-items:start;color:color-mix(in srgb,var(--cream) 72%,var(--muted));font-size:.78rem;line-height:1.45}.web-module__lessons a span{color:var(--web-html);font-family:var(--ff-mono);font-size:.68rem}.web-module__lessons a:hover{color:var(--web-css)}.web-module__output{display:flex;gap:1rem;align-items:flex-start;color:var(--green-dim);background:var(--green-wash);border-left:2px solid var(--green-dim);padding:.75rem 1rem;font-size:.82rem;font-style:italic;line-height:1.55}.web-module__output strong{flex:0 0 auto;margin-top:.18rem;color:var(--green-dim);font-family:var(--ff-mono);font-size:.58rem;font-style:normal;opacity:.68;text-transform:uppercase}.web-module time{color:var(--muted);font-size:.68rem;text-align:right}@media(max-width:1180px){.web-hero,.web-skills,.web-program{grid-template-columns:1fr}.web-facts dl{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}.web-facts div{border-right:1px solid var(--border);border-bottom:0}.web-facts div:last-child{border-right:0}.web-section-head--side{position:static}}@media(max-width:820px){.web-course :where(.web-hero,.web-duo,.web-skills,.web-program){width:min(100% - 2rem,1400px)}.web-hero__copy,.web-browser{min-height:420px}.web-hero h1{font-size:3.4rem}.web-duo__grid,.web-skills__grid,.web-module__lessons,.web-facts dl,.web-module{grid-template-columns:1fr}.web-module time{text-align:left}.web-facts div{border-right:0;border-bottom:1px solid var(--border)}.web-facts div:last-child{border-bottom:0}}