body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-sans)}
.cf{color:var(--ink);background:var(--surface-0);color-scheme:light}
.cf .sm-btn{border-radius:999px}
.cf a:not(.sm-btn){color:inherit}
.cf-w{max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.cf-nav{text-decoration:none;font-weight:600;font-size:15px}
.cf-nav:hover{text-decoration:underline;text-underline-offset:4px}
.cf-mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em}
.cf-h{font-weight:800;letter-spacing:-0.055em;margin:0}
.cf-dots{background-image:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2.5px);background-size:32px 32px}
.cf-dots-ink{background-image:radial-gradient(rgba(0,50,69,.22) 2px,transparent 2.5px);background-size:32px 32px}
.cf-tile:hover{transform:translateY(-4px)}
.cf-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cf-span2{grid-column:span 2}
.cf-ph{display:flex;align-items:end;padding:20px;font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);box-sizing:border-box}
@media (max-width:860px){.cf-bento{grid-template-columns:1fr}.cf-span2{grid-column:auto}.cf-tile{padding:24px}}
/* ---- Dynamic elements ---- */
.sm-ribbon-track{display:inline-flex;animation:sm-marquee 40s linear infinite}
@keyframes sm-marquee{to{transform:translateX(-50%)}}
.hg-live{animation:hg-pulse 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hg-pulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.hg-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:hg-draw 1.6s cubic-bezier(.3,.7,.2,1) .2s forwards}
@keyframes hg-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sm-ribbon-track,.hg-live,.hg-line{animation:none!important;stroke-dashoffset:0}}
.cf a:not(.sm-btn):not(.sm-badge){color:inherit}
.cf-tile{border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:300px;box-sizing:border-box}
.sm-badge{text-decoration:none}
.hy-chip{display:inline-flex;padding:12px 20px;border-radius:999px;background:var(--surface-50);font-size:17px;font-weight:600}
.hy-chip:nth-child(3n+1){background:var(--teal-tint)}
.hy-opt{font:600 15px/20px var(--font-sans);padding:12px 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface-0);color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s}
.hy-opt:hover{border-color:var(--ink)}
.hy-opt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.hy-live{width:8px;height:8px;border-radius:999px;background:var(--teal);box-shadow:0 0 0 0 rgba(6,196,222,.6);animation:hy-ping 2s ease-out infinite}
@keyframes hy-ping{to{box-shadow:0 0 0 10px rgba(6,196,222,0)}}
[data-bind^="p."]{color:var(--teal);font-weight:500;transition:color .3s}
.hy-flash{color:#fff!important}
@media (max-width:860px){.cf-bento{grid-template-columns:1fr}.cf-span2{grid-column:auto}.cf-tile{padding:24px}[data-dynamic="configurator"]{padding:28px!important}}
@media (prefers-reduced-motion:reduce){.sm-ribbon-track,.hy-live{animation:none!important}}
.pb-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px}
.pb-pin i{display:block;width:14px;height:14px;border-radius:999px;border:2.5px solid #002838;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.pb-pin b{font-weight:500;font-size:11px;padding:4px 8px;border-radius:999px;background:var(--surface-0);color:var(--ink);white-space:nowrap}
.pb-pin-hot i{animation:pb-ping 2s ease-out infinite}
@keyframes pb-ping{0%{box-shadow:0 0 0 0 rgba(232,116,12,.7)}100%{box-shadow:0 0 0 14px rgba(232,116,12,0)}}
.pb-feed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-radius:14px;padding:10px 14px;font-size:14px;transition:opacity .4s,transform .4s}
.pb-feed .pb-time{margin-left:auto;font-size:12px;opacity:.7}
.pb-feed-new{opacity:0;transform:translateY(-6px)}
[hidden]{display:none!important}
.pb-step{padding:10px 16px;border-radius:999px;text-decoration:none;color:inherit;font-size:13px;letter-spacing:.08em}
.pb-range{width:100%;accent-color:#003245;height:32px}
[role="tab"][aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
@media (prefers-reduced-motion:reduce){.pb-pin-hot i{animation:none}}
.ex-msg{max-width:88%;border-radius:18px;padding:12px 16px;font-size:15px;line-height:22px}
.ex-user{align-self:flex-end;background:var(--teal);color:var(--on-teal);border-bottom-right-radius:4px;font-weight:500}
.ex-bot{align-self:flex-start;background:var(--surface-0);color:var(--ink);border-bottom-left-radius:4px}
.ex-src{font:500 11px/16px var(--font-mono);letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:var(--surface-50);color:var(--ink-muted);border:1px solid var(--line)}
.ex-src-live{background:var(--navy);color:var(--teal);border-color:var(--navy)}
.ex-caret{display:inline-block;width:8px;height:1em;vertical-align:-2px;background:var(--teal);margin-left:2px;animation:ex-blink 1s steps(1) infinite}
@keyframes ex-blink{50%{opacity:0}}
.ex-code{font:500 13px/18px var(--font-mono);padding:6px 12px;border-radius:999px;background:var(--surface-50);color:var(--navy)}
.ex-sec{border-radius:20px;background:var(--surface-50);padding:24px;display:flex;flex-direction:column;gap:8px}
.ex-sec b{font-size:19px;letter-spacing:-0.01em}
.ex-sec span{color:var(--ink-muted)}
.ex-hw{border-radius:16px;background:var(--surface-0);padding:16px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-muted)}
.ex-hw b{font-family:var(--font-mono);font-size:20px;font-weight:500;color:var(--navy)}
.ex-plan{border-radius:24px;border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:12px}
.ex-plan p{margin:0;color:inherit;opacity:.85}
.ex-price{font-family:var(--font-mono);font-size:52px;line-height:1;letter-spacing:-0.05em}
.ex-price small{font-size:16px;letter-spacing:0;opacity:.7}
@media (max-width:600px){#how [style*="repeat(3"]{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion:reduce){.ex-caret{animation:none}}
.ac-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ac-stage{text-align:left;cursor:pointer;border:1.5px solid var(--line);background:var(--surface-0);color:var(--ink);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;font:inherit;transition:background-color .2s,border-color .2s}
.ac-stage .cf-mono{font-size:12px;color:var(--teal-text)}
.ac-stage b{font-size:18px;letter-spacing:-0.01em}
.ac-stage:hover{border-color:var(--ink)}
.ac-stage[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.ac-stage[aria-selected="true"] .cf-mono{color:var(--teal)}
.ac-track{height:8px;border-radius:999px;background:var(--surface-100);margin-top:16px;overflow:hidden}
.ac-fill{height:100%;background:var(--teal);border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ac-course{font:500 13px/18px var(--font-mono);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--on-navy)}
.ac-prog{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:12px 16px;border-radius:16px;background:var(--surface-0)}
.ac-prog b{font-size:17px}
.ac-prog span{color:var(--ink-muted)}
#codefest .hy-chip,#organisations .hy-chip{background:var(--surface-0)}
#codefest .hy-chip:nth-child(3n+1),#organisations .hy-chip:nth-child(3n+1){background:var(--teal-tint)}
.ac-fac{border-radius:14px;background:var(--surface-0);padding:14px 16px;font-weight:600}
@media (max-width:760px){.ac-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hy-photo{inset:64px 16px 112px!important;width:calc(100% - 32px)!important;height:calc(100% - 176px)!important}}

/* Academy hero illustration: leave room for the stacked badges on narrow screens */
@media (max-width:560px){.ac-hero-card{min-height:640px!important;--ac-top:150px}}