/* How the CAET course was built: the showcase look.
   Electric Ink, the dark look every CAET lesson uses (craft/visual-design/electric-ink-look.md). The showcase commits to
   dark on purpose: the course has no light theme, and the demos show the lessons as students see them. The only light
   surfaces are real documents and FAA figures, which keep their own paper.
   The tokens below are the ones the shared lesson parts in core/ read. */

:root{
  color-scheme:dark;
  --ink:#0a0b0d; --ink-2:#111318; --ink-3:#171a21; --line:#262b34;
  --paper:#eef1f4; --paper-2:#c6ccd6; --paper-3:#a3abba;
  --R:#ff9e3d; --R-dim:#5a3d1c; --I:#39d7ff; --I-dim:#123c47; --V:#b48cff;
  --ok:#5ddb9a; --bad:#ff6b6b;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7); --maxw:1080px;
  --hero:#6ba7c4;            /* the accent; each demo sets its room's accent */
  --doc-paper:#f4f0e7; --doc-sec:#fffdf8; --doc-ink:#23201b; --doc-dim:#5c574c; --doc-acc:#145c4f; --doc-rule:#cfc7b5;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 70% -10%, #14171d 0%, var(--ink) 60%);
  background-repeat:no-repeat;
}
::selection{background:var(--R);color:#111}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em;color:var(--paper)}
p{color:var(--paper-2)}
strong{color:var(--paper);font-weight:600}
a{color:var(--I);text-underline-offset:3px}
a:hover{color:#8be8ff}
:focus-visible{outline:2px solid var(--I);outline-offset:2px}
code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--paper)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,5vw,48px)}
.skip{position:absolute;left:12px;top:8px;z-index:90;padding:14px 16px;min-height:44px;background:var(--I);color:#04222b;font:600 16px/1 "IBM Plex Mono",monospace;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---- shared Electric Ink pieces the lessons define in their own sheet ---- */
.kicker{font:500 14px/1.3 "IBM Plex Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--hero);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:1px;background:var(--hero);flex:none}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--paper);max-width:66ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:500 15px/1.2 "IBM Plex Mono",monospace;letter-spacing:.02em;
  background:var(--ink-3);color:var(--paper);border:1px solid #3a414d;padding:12px 20px;border-radius:10px;cursor:pointer;text-decoration:none;transition:border-color .15s,filter .15s}
.btn:hover{border-color:var(--hero);color:var(--paper)}
.btn.active{background:var(--I);border-color:var(--I);color:#04222b;font-weight:600}
.btn.active:hover{filter:brightness(1.08);color:#04222b}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn[aria-pressed="true"]{border-color:var(--hero);box-shadow:inset 0 0 0 1px var(--hero)}
.figcap{font:400 14px/1.55 "IBM Plex Mono",monospace;color:var(--paper-3);letter-spacing:.02em;margin-top:12px}
.figcap b{color:var(--paper-2);font-weight:600}
.credit{font:400 14px/1.55 "IBM Plex Mono",monospace;color:var(--paper-3);margin:12px 0 0;max-width:84ch}
.callout{border-left:3px solid var(--R);background:linear-gradient(90deg,rgba(255,158,61,.08),transparent 80%);padding:16px 20px;border-radius:0 12px 12px 0;margin:22px 0;font-size:18px;color:var(--paper)}
.callout .lbl{display:block;font:600 14px/1.3 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--R);margin-bottom:4px}
.callout.warn{border-left-color:var(--bad);background:linear-gradient(90deg,rgba(255,107,107,.09),transparent 80%)}
.callout.warn .lbl{color:var(--bad)}
.callout.key{border-left-color:var(--I);background:linear-gradient(90deg,rgba(57,215,255,.08),transparent 80%)}
.callout.key .lbl{color:var(--I)}
.dia.faa{background:#fff;border-color:#d7dbe0;padding:clamp(10px,1.6vw,18px)}
.dia.faa .figcap{color:#3c4450}
.dia.faa .figcap b{color:#11151b}

/* ---- the top bar ---- */
.topbar{position:sticky;top:0;z-index:70;background:rgba(10,11,13,.94);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);font:600 17px/1.2 "Space Grotesk",sans-serif;letter-spacing:-.01em;min-height:44px}
.brand:hover{color:var(--paper)}
.brand svg{width:28px;height:28px;flex:none}
.site-nav{margin-left:auto;display:flex;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--paper-2);text-decoration:none;font:500 15px/1 "IBM Plex Mono",monospace}
.site-nav a:hover{background:var(--ink-3);color:var(--paper)}
.nav-short{display:none;margin-left:auto}
@media(max-width:860px){.site-nav{display:none}.nav-short{display:inline-flex}}

/* ---- front page ---- */
.hero{padding:clamp(48px,9vw,112px) 0 clamp(36px,6vw,64px)}
.hero h1{font-size:clamp(42px,7.6vw,92px);font-weight:700;line-height:1.02;margin:18px 0 18px;max-width:14ch}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.08em;background:var(--hero);box-shadow:0 0 24px var(--hero)}
.hero .lede{font-size:clamp(19px,2.3vw,24px);max-width:58ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sec{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--line)}
.sec-head{max-width:72ch;margin-bottom:clamp(22px,3vw,36px)}
.sec-head h2{font-size:clamp(32px,5vw,54px);font-weight:700;line-height:1.05;margin:14px 0 14px}
.sec-head p{margin:0;font-size:18.5px;line-height:1.65}
.stats .stat .n{color:var(--paper)}
.stats .stat .l{font-size:14px}
.stats .stat .d{font-size:16px}
.links-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* the pipeline */
.pipe-svg{display:block;width:100%;height:auto;margin:6px 0 26px}
.pipe-svg .pn{font:600 22px "IBM Plex Mono",monospace;fill:var(--paper)}
.pipe-svg .pl{font:500 17px "IBM Plex Sans",sans-serif;fill:var(--paper-2)}
.pipe-svg .pr{font:500 16px "IBM Plex Mono",monospace;fill:var(--R)}
@media(max-width:900px){.pipe-svg{display:none}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:18px 20px 18px;display:flex;flex-direction:column;gap:6px}
.steps .sn{display:flex;align-items:center;gap:12px}
.steps .sn span{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1b1730;border:1.5px solid var(--hero);color:var(--hero);font:600 16px/1 "IBM Plex Mono",monospace}
.steps h3{margin:0;font-size:23px;line-height:1.2}
.steps h3 a{color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.steps h3 a:hover{text-decoration:underline;color:var(--paper)}
.steps p{margin:0;font-size:16.5px;line-height:1.55}
.steps .out{font:500 15px/1.45 "IBM Plex Mono",monospace;color:var(--paper-3);margin-top:auto;padding-top:8px}
.steps .loop{border-color:var(--R)}
.steps .loop .back{color:var(--R);font:500 15px/1.45 "IBM Plex Mono",monospace}
@media(max-width:720px){.steps .loop .back{font-size:16px}}

/* the ten rules */
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:760px){.rules{grid-template-columns:1fr}}
.rules li{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;align-content:start}
.rules .rn{grid-row:1/4;font:700 44px/1 "Space Grotesk",sans-serif;color:var(--hero);min-width:1.4ch}
.rules h3{margin:2px 0 4px;font-size:23px;line-height:1.2}
.rules p{margin:0;font-size:16.5px;line-height:1.55}
.rules .why{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--paper-3)}
.rules .why a{padding:12px 0}

/* the demo gallery */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--hero);transform:translateY(-2px);color:inherit}
a.card:focus-visible{outline:2px solid var(--I);outline-offset:3px}
.card .thumb{display:block;background:#0d0f14;border-bottom:1px solid var(--line);aspect-ratio:16/8}
.card .thumb svg{display:block;width:100%;height:100%}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .from{font:500 14px/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--hero)}
.card h3{margin:0;font-size:23px;line-height:1.2;color:var(--paper)}
.card p{margin:0;font-size:16.5px;line-height:1.55}
.card .go{margin-top:auto;padding-top:12px;font:600 15px/1.2 "IBM Plex Mono",monospace;color:var(--I)}
.card.wide{grid-column:1/-1}
@media(min-width:961px){.card.wide{flex-direction:row}.card.wide .thumb{flex:0 0 42%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}}

/* lesson and library link cards */
.lcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:760px){.lcards{grid-template-columns:1fr}}
.lcard{display:flex;flex-direction:column;gap:6px;background:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--hero);border-radius:14px;padding:18px 20px;text-decoration:none;color:inherit;min-height:44px}
a.lcard:hover{border-color:var(--hero);color:inherit}
.lcard .room{font:500 14px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-3)}
.lcard h3{margin:0;font-size:22px;line-height:1.25}
.lcard p{margin:0;font-size:16.5px;line-height:1.55}
.lcard .go{margin-top:auto;padding-top:8px;font:600 15px/1.3 "IBM Plex Mono",monospace;color:var(--I)}
.lcards.places .lcard{border-left-color:var(--I)}
.lcards.places{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.lcards.places{grid-template-columns:1fr}}
@media(min-width:761px){.lcard.span{grid-column:1/-1}}
.sub-h{font-size:24px;margin:34px 0 14px}
.note-line{font-size:16.5px;color:var(--paper-3);margin:14px 0 0;max-width:80ch}

/* credits */
.lic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:760px){.lic{grid-template-columns:1fr}}
.lic div{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.lic h3{margin:0 0 6px;font-size:20px}
.lic p{margin:0;font-size:16.5px;line-height:1.55}
.srcs{margin:18px 0 0;padding-left:22px;font-size:16.5px;color:var(--paper-2);line-height:1.6}
.srcs li{margin:0 0 6px}
.foot{border-top:1px solid var(--line);padding-top:30px;padding-bottom:44px;margin-top:40px;color:var(--paper-3);font-size:16px}
.foot p{margin:0 0 6px;color:var(--paper-3)}
.foot a{display:inline-flex;align-items:center;min-height:44px}

/* ---- demo pages: the frame around a live part ---- */
.demo-head{padding-top:clamp(34px,6vw,64px);padding-bottom:8px}
.demo-head h1{font-size:clamp(36px,6vw,64px);font-weight:700;line-height:1.04;margin:14px 0 14px}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 4px;font:500 15px/1.4 "IBM Plex Mono",monospace}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper-3);text-decoration:none}
.crumbs a:hover{color:var(--paper)}
.from-line{font:500 15.5px/1.5 "IBM Plex Mono",monospace;color:var(--paper-3);margin:14px 0 0}
.from-line a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.stage{position:relative;margin:26px 0 8px;border:1px solid var(--line);border-radius:22px;background:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.stage-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:#0d0f14;font:500 14px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-3)}
.stage-bar i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hero)}
.stage-in{padding:clamp(18px,3.4vw,40px) clamp(14px,3.4vw,40px) clamp(22px,3.4vw,40px)}
.stage-in .ph h2{font-size:clamp(28px,4.4vw,46px);margin:10px 0 12px}
.stage-in > :last-child{margin-bottom:0}
.why-box{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;margin:30px 0 0;padding:clamp(18px,3vw,30px);background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--hero);border-radius:18px}
@media(max-width:820px){.why-box{grid-template-columns:1fr}}
.why-box h2{margin:0 0 10px;font-size:26px}
.why-box p{margin:0 0 12px;font-size:17.5px;line-height:1.65}
.why-box h3{margin:0 0 8px;font:600 14px/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3)}
.why-box ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px}
.why-box li a{display:inline-flex;align-items:center;min-height:44px;font-size:16.5px;line-height:1.35}
.made{margin:22px 0 0}
.made h2{font-size:22px;margin:0 0 8px}
.made p{font-size:16.5px;margin:0 0 10px;max-width:80ch}
.made p a{padding:11px 0}
.demo-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.demo-nav a{display:flex;flex-direction:column;gap:2px;min-height:44px;text-decoration:none;max-width:48%}
.demo-nav a span{font:500 14px/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-3)}
.demo-nav a b{font:600 19px/1.3 "Space Grotesk",sans-serif;color:var(--paper)}
.demo-nav a.next{text-align:right;margin-left:auto}
@media(max-width:520px){.demo-nav a{max-width:100%}.demo-nav a.next{text-align:left;margin-left:0}}

/* ---- phones: nothing under 16 px (electric-ink-look.md, section 10). Overrides the shared parts' small labels ---- */
@media(max-width:720px){
  body{font-size:17px}
  .kicker,.figcap,.credit,.stat .l,.stats .stat .l,.stats .stat .d,.term .tk,.goals .gv,.hist .who,.hist figcaption,.callout .lbl,.ask-k,.ask-v,.rs-count,
  .rs-hint,.rs-bucket p,.rs-bucket .got span,.chips span,.btn,.dmsg,.stat .d,.stepcards li,
  .pgr-ident .n,.pgr-count,.pgr-item,.pgr-item .num,.pgr-next,.pgr-back,.pgr-skip,
  .site-nav a,.crumbs,.from-line,.stage-bar,.card .from,.card .go,.lcard .room,.lcard .go,.steps .out,.steps .back,
  .demo-nav a span,.rules .why,.note-line,.foot,.rs-tilt,.why-box h3,code,.ask-opt .key{font-size:16px}
  .stage-in{padding:18px 12px 22px}
  .ask{padding:16px 14px}
  .ask-opt{padding:10px 12px;gap:10px}
  .kicker,.stat .l,.term .tk,.goals .gv,.hist .who,.callout .lbl,.ask-k,.stage-bar,.lcard .room{letter-spacing:.08em}
  .pgr-item .num{width:30px;height:30px}
  .ask-q{font-size:19px}
  .ask-opt{font-size:16.5px}
  .rs-card{font-size:20px}
  .term p,.steps p,.rules p,.card p,.lcard p,.lic p{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  a.card:hover{transform:none}
}