:root{--accent:#1586c3;--deep:#294f70;--ink:#16334a;--cover-text:#fff;--character-scale:1;font-family:Segoe UI,Arial,sans-serif;color:var(--ink);background:#eef2f5;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f4c855;outline-offset:5px}input:focus-visible,textarea:focus-visible{outline:2px solid #1586c3;outline-offset:2px}button{border:0}a{color:inherit} [hidden]{display:none!important}
.workbench{height:72px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1536px;margin:auto}.workbench-label{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.02em;color:#566c7b}.status-dot{width:7px;height:7px;border-radius:50%;background:#32968a}.workbench-actions{display:flex;align-items:center;gap:16px}.quiet-button{font-size:13px;text-decoration:none;color:#526977}.quiet-button span{padding-left:6px}.edit-button{border:1px solid #cfdae1;border-radius:8px;background:#fff;color:#25495e;padding:10px 16px;font-size:13px;font-weight:600;box-shadow:0 2px 3px #17364a05}.edit-button span{margin-right:7px;font-size:17px}main{max-width:1536px;padding:0 32px 16px;margin:0 auto}.cover{width:100%;aspect-ratio:16/9;min-height:580px;overflow:hidden;position:relative;isolation:isolate;color:var(--cover-text);border-radius:13px;background:linear-gradient(120deg,var(--deep),var(--accent) 58%,var(--accent));box-shadow:0 20px 65px #19354d20}
.cover-background{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.22}.blueprint{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(#fff3 1px,transparent 1px),linear-gradient(90deg,#fff3 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(110deg,transparent 5%,#000 65%,transparent)}.blueprint:after{content:'';position:absolute;width:70%;height:85%;right:-15%;bottom:-25%;border:1px solid #fff8;transform:rotate(-25deg);box-shadow:0 0 0 45px #fff0,0 0 0 46px #fff4,0 0 0 135px #fff0,0 0 0 136px #fff4}
.brand-lockup{position:absolute;top:6%;left:5%;display:flex;align-items:center;gap:12px;padding:12px 15px;background:#fff;border-radius:9px;color:#254e6c;max-width:350px;min-height:67px;box-shadow:0 5px 24px #1d496511}.brand-lockup img{max-width:230px;max-height:62px;object-fit:contain}.brand-monogram{font-size:22px;font-weight:800;letter-spacing:-2px;position:relative;padding-right:8px;border-right:1px solid #d7e6ee}.brand-monogram:before,.brand-monogram:after{content:'';position:absolute;width:22px;height:6px;left:-1px;border:2px solid #35a2be;border-top:0;transform:skewY(-18deg)}.brand-monogram:before{bottom:-5px}.brand-monogram:after{bottom:-10px;width:17px;border-color:#dfab50}.brand-wordmark{font-size:12px;font-weight:700;line-height:1.35;max-width:176px;white-space:pre-line}
.cover-copy{position:absolute;left:5%;top:28%;width:49%;z-index:3}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:650;opacity:.68;margin:0 0 18px}.cover h1{font-size:clamp(32px,3.8vw,57px);font-weight:720;line-height:1.13;letter-spacing:-.035em;margin:0;white-space:pre-line;overflow-wrap:anywhere;text-wrap:balance}.description{font-size:clamp(14px,1.25vw,18px);line-height:1.55;opacity:.79;margin:22px 0 15px;white-space:pre-line;max-width:90%}.audience{font-size:12px;letter-spacing:.02em;display:inline-flex;padding:7px 11px;border:1px solid #ffffff38;border-radius:5px;background:#ffffff08}.start-action{display:flex;align-items:center;gap:20px;margin-top:34px}.start-button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:195px;padding:16px 24px;border:1px solid #ffffffb5;border-radius:40px;background:#fff;color:#205779;font-weight:720;font-size:21px;box-shadow:0 8px 30px #154e6824;transition:transform .18s,box-shadow .18s}.start-button:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0c314b35}.button-arrow{font-size:26px;font-weight:400;line-height:1}.start-hint{font-size:11px;line-height:1.6;opacity:.6}
.cover-art{position:absolute;width:51%;height:100%;right:0;top:0;pointer-events:none}.halo{position:absolute;aspect-ratio:1;border-radius:50%;left:50%;top:43%;transform:translate(-50%,-50%);z-index:0}.halo-one{width:72%;background:#ffffff0b;box-shadow:0 0 0 38px #123b6b0b}.halo-two{width:48%;border:1px solid #ffffff13;background:#174d7912}.halo-orbit{position:absolute;left:50%;top:43%;width:83%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px dashed #ffffff27;border-radius:50%;z-index:0}.engineer{position:absolute;left:50%;bottom:-6%;width:88%;height:90%;object-fit:contain;object-position:center bottom;transform:translateX(-50%) scale(var(--character-scale));transform-origin:center bottom;z-index:1;filter:drop-shadow(0 12px 16px #073b4f17)}.equipment{position:absolute;width:clamp(55px,6.2vw,92px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 7px 28px #164f721a;display:grid;place-items:center;z-index:2}.equipment svg{width:54%;height:54%;stroke:#234c64;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.equipment-one{top:28%;left:3%}.equipment-two{top:9%;left:19%}.equipment-three{top:4%;left:48%}.equipment-four{top:13%;right:4%}.equipment-five{top:35%;right:-2%}.equipment-one svg,.equipment-five svg{fill:#f4ce62}.equipment-two svg{stroke:#2e768c}.equipment-three svg{fill:#c1e1e8}.equipment-four svg{stroke:#d0a12e}
.cover-footer{position:absolute;bottom:24px;left:5%;right:4%;display:flex;align-items:end;justify-content:space-between;gap:16px;z-index:4;font-size:10px;line-height:1.5;opacity:.54}.cover-footer>span:first-child{max-width:47%}.footer-course{font-size:9px;letter-spacing:.13em;white-space:nowrap}.footer-course span{margin:0 10px;opacity:.4}.workspace-note{font-size:11px;color:#748a99;text-align:center;margin:17px 0 2px}.learner-view .workbench,.learner-view .workspace-note{display:none}.learner-view main{max-width:none;padding:0}.learner-view .cover{border-radius:0;min-height:100svh;aspect-ratio:auto}.learner-view .cover h1{font-size:clamp(34px,3.8vw,62px)}
dialog{border:0;color:var(--ink);box-shadow:0 24px 120px #09283d40}dialog::backdrop{background:#0b223b3d;backdrop-filter:blur(3px)}.editor-dialog{margin:18px 18px 18px auto;width:min(450px,calc(100vw - 36px));max-height:calc(100dvh - 36px);padding:26px;border-radius:16px}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.editor-kicker{margin:0 0 8px;color:#409cae;font-size:10px;font-weight:750;letter-spacing:.19em}h2{font-size:25px;letter-spacing:-.04em;margin:0;line-height:1.2}.icon-button{width:36px;height:36px;border-radius:50%;background:#edf3f6;color:#557083;font-size:26px;line-height:1;flex-shrink:0}.editor-intro{font-size:13px;line-height:1.6;color:#718493;margin:18px 0 24px}.editor-dialog details{border-top:1px solid #e5edf1}.editor-dialog summary{padding:17px 0;font-size:13px;font-weight:650;cursor:pointer}.fields{display:grid;gap:15px;padding:0 0 20px}label{display:grid;gap:7px;font-size:12px;font-weight:600;color:#425b6e}.editor-dialog input:not([type=checkbox]):not([type=color]):not([type=range]),.editor-dialog textarea{width:100%;min-width:0;border:1px solid #d9e3e9;border-radius:7px;padding:10px 11px;background:#fbfcfd;font-size:13px;line-height:1.5;color:#21465d}textarea{resize:vertical}label small,.field-help{font-size:11px;color:#7b8b97;line-height:1.55;font-weight:400;margin:0}.color-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.color-fields label{font-size:11px}input[type=color]{width:100%;height:42px;border:1px solid #dce6eb;background:#fff;border-radius:7px;padding:4px;cursor:pointer}.checkbox-label{display:flex;align-items:center;gap:10px}.checkbox-label input{width:17px;height:17px;accent-color:#1687bd}input[type=range]{width:100%;accent-color:#1586c3}output{font-size:11px;font-weight:400;color:#789}input[type=file]{font-size:11px!important;padding:8px!important}input::file-selector-button{border:0;background:#eaf1f5;padding:7px;border-radius:4px;margin-right:7px;color:#416277;cursor:pointer}.text-button{padding:5px 0;background:none;text-align:left;color:#52778d;font-size:11px;text-decoration:underline;text-underline-offset:3px}.primary-button,.secondary-button{border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600}.primary-button{background:#1d759e;color:#fff}.secondary-button{border:1px solid #d5e3eb;background:#f5f9fb;color:#3e657e}.editor-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:12px}.save-status{font-size:11px;line-height:1.5;color:#478273;min-height:17px;margin:12px 0}.save-status.error{color:#a3423f}.course-dialog{width:min(650px,calc(100% - 32px));border-radius:18px;padding:44px}.course-close{position:absolute;right:16px;top:16px}.course-dialog h2{font-size:37px;margin:18px 0}.intro-lead{color:#647e8e;line-height:1.7;font-size:15px;max-width:500px}.course-topics{list-style:none;counter-reset:topics;padding:0;margin:28px 0;display:grid;gap:0}.course-topics li{counter-increment:topics;border-top:1px solid #e7edf1;padding:13px 0;display:flex;gap:20px;font-size:13px;line-height:1.45}.course-topics li:before{content:'0' counter(topics);font-size:11px;color:#68a5b8;font-weight:700}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);background:#15384f;color:#fff;padding:12px 20px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.cover h1{font-size:57px}}
@media(max-width:1050px) and (min-width:701px){.cover{min-height:560px}.cover h1{font-size:38px}.cover-copy{top:29%;width:50%}.description{font-size:14px;margin-top:17px}.start-action{margin-top:24px}.start-hint{display:none}.equipment{width:65px}.brand-lockup{top:5%;padding:10px 13px}.cover-footer{bottom:19px}}
@media(max-width:700px) and (orientation:portrait){.workbench{height:auto;min-height:76px;padding:12px 16px;flex-wrap:wrap;gap:10px}.workbench-label{font-size:11px}.workbench-actions{gap:12px;justify-content:space-between;width:100%}.edit-button{padding:8px 12px;font-size:12px}.quiet-button{font-size:11px}main{padding:0 12px 12px}.cover{aspect-ratio:auto;min-height:0;border-radius:12px;display:flex;flex-direction:column}.brand-lockup{top:25px;left:24px;max-width:calc(100% - 48px);min-height:59px;padding:10px 12px;gap:10px}.brand-wordmark{font-size:11px}.brand-monogram{font-size:20px}.brand-lockup img{max-height:47px;max-width:210px}.cover-copy{position:relative;left:auto;top:auto;width:100%;padding:119px 24px 0}.eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:14px}.cover h1,.learner-view .cover h1{font-size:clamp(28px,7.5vw,38px);line-height:1.13;letter-spacing:-.035em;white-space:normal;text-wrap:balance}.description{font-size:13px;line-height:1.55;margin:15px 0 12px;max-width:100%}.audience{font-size:10px;padding:6px 9px}.start-action{margin-top:22px;gap:14px}.start-button{font-size:19px;padding:13px 21px;min-width:171px}.start-hint{font-size:9px}.cover-art{position:relative;top:auto;right:auto;width:100%;height:335px;flex-shrink:0;margin-top:7px;overflow:hidden}.engineer{height:112%;width:88%;bottom:-23%}.halo-one{width:65%;top:52%;box-shadow:0 0 0 25px #123b6b0b}.halo-two{top:52%;width:43%}.halo-orbit{top:52%;width:80%}.equipment{width:54px}.equipment-one{top:30%;left:7%}.equipment-two{top:7%;left:24%}.equipment-three{top:2%;left:51%}.equipment-four{top:17%;right:7%}.equipment-five{top:43%;right:1%}.cover-footer{position:relative;bottom:auto;left:auto;right:auto;padding:12px 24px 18px;background:#193c5c12;gap:12px;font-size:8px;opacity:.64}.cover-footer>span:first-child{max-width:64%}.footer-course{font-size:7px;white-space:normal;text-align:right;line-height:1.5}.footer-course span{margin:0 3px}.workspace-note{font-size:10px;line-height:1.5;padding:0 10px;margin-top:12px}.learner-view .cover{min-height:100svh}.learner-view .cover-art{margin-top:auto}.editor-dialog{margin:10px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:22px}.course-dialog{padding:30px 25px}.course-dialog h2{font-size:29px}.intro-lead{font-size:14px}}
@media(max-height:600px) and (orientation:landscape){.workbench{height:49px;padding:0 18px}.workbench-label{font-size:11px}.workbench-actions{gap:12px}.edit-button{padding:7px 11px;font-size:11px}.quiet-button{font-size:11px}main{padding:0 14px 8px}.cover{min-height:335px;aspect-ratio:auto;height:calc(100svh - 75px)}.brand-lockup{top:18px;left:5%;padding:7px 10px;min-height:44px;gap:9px}.brand-wordmark{font-size:9px;max-width:145px}.brand-monogram{font-size:17px}.brand-lockup img{max-height:35px;max-width:150px}.cover-copy{top:25%;width:51%}.eyebrow{font-size:8px;margin-bottom:10px}.cover h1,.learner-view .cover h1{font-size:clamp(25px,3.8vw,34px);line-height:1.08}.description{font-size:11px;line-height:1.35;margin:10px 0}.audience{font-size:9px;padding:4px 7px}.start-action{margin-top:13px}.start-button{min-width:140px;padding:9px 17px;font-size:17px;gap:20px}.start-hint{display:none}.equipment{width:48px}.engineer{height:89%;bottom:-6%}.cover-footer{bottom:12px;font-size:8px}.footer-course{font-size:7px}.workspace-note{display:none}.learner-view .cover{height:100svh;min-height:335px}.learner-view .cover-copy{top:27%}.editor-dialog{margin:10px;width:420px;max-height:calc(100dvh - 20px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.equipment-five{right:3%}
@media(max-width:700px) and (orientation:portrait){.equipment-five{right:1%}}
@media(max-height:600px) and (orientation:landscape){.description{display:none}.cover h1,.learner-view .cover h1{font-size:clamp(24px,3.1vw,28px)}.audience{margin-top:10px}.cover-copy{top:26%}}

/* Start navigation and entry point for the introductory scene. */
.cover-secondary{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cover-link{min-height:36px;padding:5px 0;background:transparent;color:var(--cover-text);font-size:13px;font-weight:600;text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:5px}
.cover-link:hover{text-decoration-color:currentColor}
.cover-link span{margin-left:5px}
.course-dialog-actions{display:flex;gap:12px;flex-wrap:wrap}
.intro-screen{min-height:580px;border-radius:13px;padding:28px 5% 45px;color:var(--cover-text);background:linear-gradient(120deg,var(--deep),var(--accent));box-shadow:0 20px 65px #19354d20}
.intro-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.intro-topbar>span{font-size:10px;letter-spacing:.17em;opacity:.6}
.intro-back{min-height:44px;padding:8px 0;color:inherit;background:transparent;font-size:13px}
.intro-back span{margin-right:9px}
.intro-content{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:60px;margin:64px auto 20px;max-width:1120px}
.intro-heading h2{font-size:clamp(32px,3.5vw,48px);line-height:1.12;letter-spacing:-.04em;max-width:440px}
.intro-people{display:grid;gap:20px;margin-top:32px}
.person-tag{display:flex;align-items:center;gap:14px}
.person-initial{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:#ffffff18;border:1px solid #ffffff25;font-weight:650;font-size:18px}
.person-tag strong{display:block;font-size:15px;font-weight:600}
.person-tag small{display:block;margin-top:4px;font-size:11px;opacity:.62}
.dialogue-panel{background:#fff;border-radius:16px;padding:30px;color:#214b65;box-shadow:0 20px 50px #0a3c581c;min-width:0}
.dialogue-progress{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#738e9e;line-height:1.5}
.dialogue-progress>span:last-child{white-space:nowrap;letter-spacing:.1em}
.dialogue-message{min-height:206px;padding-top:20px}
.dialogue-speaker{color:#2887a1;font-size:12px;letter-spacing:.04em;font-weight:700;margin:0 0 12px}
.dialogue-message blockquote{font-size:23px;line-height:1.5;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
.dialogue-controls{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.dialogue-controls button{min-height:44px}
.dialogue-controls button:disabled{opacity:.35}
.dialogue-hint{font-size:10px;line-height:1.5;color:#8a9ea9;margin:16px 0 0}
.learner-view .intro-screen{border-radius:0;min-height:100svh}
@media(max-width:700px) and (orientation:portrait){
  .cover-link{min-height:44px;font-size:12px}
  .intro-screen{padding:18px 24px 28px;min-height:0}
  .intro-content{grid-template-columns:1fr;gap:30px;margin-top:32px}
  .intro-heading h2{font-size:32px}
  .intro-heading .eyebrow{font-size:9px;margin-bottom:12px}
  .intro-people{grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
  .person-tag{gap:8px}.person-initial{width:32px;height:32px;font-size:14px}
  .person-tag strong{font-size:12px}.person-tag small{font-size:9px}
  .dialogue-panel{padding:22px}.dialogue-message{min-height:212px}
  .dialogue-message blockquote{font-size:21px}.dialogue-progress{font-size:9px}
}
@media(max-height:600px) and (orientation:landscape){
  .cover-secondary{flex-direction:row;gap:14px;align-items:center}
  .cover-link{min-height:44px;font-size:11px}
  .start-action{gap:17px}
  .intro-screen{padding:14px 5% 24px}
  .intro-content{gap:28px;margin-top:20px}
  .intro-heading h2{font-size:29px}
  .intro-people{gap:12px;margin-top:22px}
  .dialogue-panel{padding:20px}.dialogue-message{min-height:155px;padding-top:15px}
  .dialogue-message blockquote{font-size:18px}.dialogue-controls{margin-top:12px}
}

/* Touch layouts keep the existing visual system, with usable hit areas. */
@media(max-width:1100px){
  .primary-button,.secondary-button,.text-button,.cover-link,.edit-button,.quiet-button{min-height:44px;min-width:44px}
  .quiet-button{display:inline-flex;align-items:center;gap:5px}
  .quiet-button span{padding-left:0}
  .icon-button{width:44px;height:44px}
  .editor-dialog input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]),
  .editor-dialog textarea,.editor-dialog select{font-size:16px}
}
@media(max-width:700px) and (orientation:portrait){
  .start-action{flex-wrap:wrap}
  .cover-secondary{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
  .brand-lockup img{max-width:100%}
}
@media(min-width:701px) and (max-width:1050px) and (orientation:portrait){
  .cover{aspect-ratio:auto}
  .cover-copy{position:relative;left:auto;top:auto;width:55%;padding:150px 0 90px 5%}
  .cover-art{width:45%}
  .start-action{flex-wrap:wrap}
}
/* A notebook browser can be wide while offering very little vertical space. */
@media(min-width:900px) and (min-height:601px) and (max-height:800px){
  .cover{aspect-ratio:auto;min-height:calc(100svh - 96px)}
  .cover-copy{position:relative;left:auto;top:auto;width:55%;padding:120px 0 76px 5%}
  .cover h1,.learner-view .cover h1{font-size:clamp(30px,2.85vw,44px)}
  .cover .eyebrow{margin-bottom:12px}
  .cover .description{font-size:14px;line-height:1.5;margin:14px 0 12px}
  .cover .start-action{margin-top:20px}
}
.dev-skip{font:inherit;background:none;border:0;cursor:pointer;min-height:44px;padding:0 4px}