@font-face{font-family:Bangers;src:url('../assets/fonts/bangers-original.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('../assets/fonts/comic-neue-original.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('../assets/fonts/comic-neue-bold-original.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--navy:#002d73;--blue:#0a66c2;--orange:#efbe73;--paper:#eef4fb;--sky:#cceaf8;--ink:#002d73;--white:#fff;--shadow:rgba(0,45,115,.85)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--navy);font-family:'Comic Neue','Comic Sans MS',sans-serif;font-size:16px}button{font:inherit;color:inherit}.app-shell{min-height:100vh;background-color:var(--paper);background-image:radial-gradient(rgba(10,102,194,.22) 1px,transparent 1px);background-size:11px 11px}
.topbar{height:150px;padding:16px 28px 12px;background:#fff;border-bottom:7px solid var(--navy)}.header-main{height:88px;display:flex;align-items:flex-start;justify-content:space-between;gap:26px}.brand-group{display:flex;align-items:center;gap:17px;min-width:0}.issue{flex:0 0 auto;background:var(--navy);color:var(--orange);padding:8px 14px 7px;font:400 18px/1 Bangers,Impact,sans-serif;letter-spacing:2.4px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--orange)}.course-lockup{min-width:0}.eyebrow{font:400 16px/1 Bangers,Impact,sans-serif;letter-spacing:2.3px;color:var(--blue);margin-bottom:5px}.course-lockup h1{margin:0;font:400 clamp(30px,3.1vw,43px)/.98 Bangers,Impact,sans-serif;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;color:var(--navy)}
.header-tools{width:365px;flex:0 0 365px}.view-switch{display:flex;justify-content:flex-end;gap:10px;margin-bottom:10px}.view-btn,.layout-btn{background:#fff;border:4px solid var(--navy);padding:5px 12px 4px;font:400 16px/1 Bangers,Impact,sans-serif;letter-spacing:1.5px;box-shadow:3px 3px 0 var(--shadow);cursor:pointer}.view-btn.active,.layout-btn.active{background:var(--orange)}.progress-meta{display:flex;justify-content:space-between;align-items:end;margin-bottom:4px;font:400 16px/1 Bangers,Impact,sans-serif;letter-spacing:1.8px}.progress-meta span{font-size:18px}.progress-track{height:20px;padding:3px;border:5px solid var(--navy);background:#fff}.progress-bar{height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--blue),var(--blue) 7px,#2d78c4 7px,#2d78c4 14px);transition:width .25s ease}.layout-toolbar{height:34px;display:flex;align-items:center;gap:9px}.layout-toolbar>span{margin-right:3px;color:var(--blue);font:400 16px/1 Bangers,Impact,sans-serif;letter-spacing:2.2px}.layout-btn{padding:4px 12px 3px;font-size:15px}
.stage{padding:20px 28px 10px}.comic-page{min-height:675px;display:grid;grid-template-columns:minmax(0,8fr) minmax(315px,3fr);gap:10px;padding:12px;border:7px solid var(--navy);background:#fff;box-shadow:8px 8px 0 rgba(0,45,115,.22)}.comic-page.slide-scene-01{grid-template-columns:minmax(0,4fr) minmax(340px,1fr)}.slide-scene-01 .panel-art{object-position:left center}.panels{display:grid;gap:12px;min-height:645px}.comic-panel,.quiz-question,.answer{position:relative;min-height:0;overflow:hidden;border:6px solid var(--navy);background:var(--sky)}.layout-l-shape{grid-template:1fr 1fr/1.45fr 1fr}.layout-l-shape>:first-child{grid-row:1/3}.layout-tiers{grid-template-rows:repeat(3,1fr)}.layout-two-horizontal{grid-template-rows:repeat(2,minmax(0,1fr))}.layout-grid-four{grid-template:repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr))}.layout-columns{grid-template-columns:repeat(3,1fr)}.layout-splash{grid-template:2fr 1fr/1fr 1fr}.layout-splash>:first-child{grid-column:1/-1}.layout-single{grid-template:1fr}.layout-tilted{grid-template:1fr 1fr/1fr 1fr;padding:18px}.layout-tilted>:nth-child(odd){transform:rotate(-1.2deg)}.layout-tilted>:nth-child(even){transform:rotate(1.2deg)}
.story-rail{padding:4px 10px 8px 16px;border-left:6px solid var(--navy);overflow:auto}.scene-chip{display:inline-flex;gap:22px;background:var(--blue);color:#fff;padding:7px 13px 5px;font:400 17px/1 Bangers,Impact,sans-serif;letter-spacing:1.4px;text-transform:uppercase;transform:rotate(-1deg)}.story-rail h2{margin:11px 0 16px;font:400 clamp(30px,3.1vw,45px)/.98 Bangers,Impact,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--navy);text-shadow:3px 3px 0 #c4dcef}.story-rail h3{margin:17px 0 8px;color:var(--blue);font:400 18px/1 Bangers,Impact,sans-serif;letter-spacing:2px}.takeaway,.summary,.transcript{padding:14px 15px;border:4px solid var(--navy);background:#fff;box-shadow:5px 5px 0 rgba(0,45,115,.24);font-size:15px;line-height:1.45}.slide-scene-01 .story-rail .takeaway{font-family:'Comic Neue','Comic Sans MS',ui-sans-serif,system-ui,sans-serif;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:normal}.summary{margin-top:14px;background:#ffe8bd}.transcript p{margin:0 0 11px}.transcript p:last-child{margin-bottom:0}.transcript b{margin-right:6px;color:var(--blue);font:400 17px/1 Bangers,Impact,sans-serif;letter-spacing:1px}.muted{color:#61728c}
.caption{position:absolute;z-index:8;left:12px;right:12px;bottom:10px;padding:8px 10px;border:4px solid var(--navy);background:#ffe8bd;font-weight:700}.bubble{position:absolute;z-index:9;top:25px;left:25px;max-width:65%;padding:16px 24px;border:4px solid var(--navy);border-radius:50%;background:#fff;text-align:center;font-weight:700}.sfx{position:absolute;z-index:10;left:20px;top:20px;color:#fff;font:400 28px/1 Bangers,Impact,sans-serif;letter-spacing:1px;text-shadow:-2px -2px 0 var(--navy),2px 2px 0 var(--navy);transform:rotate(-5deg)}.panel-head{position:absolute;z-index:7;top:18px;left:18px;color:#fff;font:400 clamp(24px,3vw,50px)/1 Bangers,Impact,sans-serif;letter-spacing:1px;text-shadow:3px 3px 0 var(--navy)}.character{position:absolute;max-width:100%;max-height:100%;object-fit:contain}
.panel-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.has-production-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,21,45,.2),transparent 30%,transparent 65%,rgba(5,21,45,.22))}.has-production-art .caption,.has-production-art .panel-head,.has-production-art .sfx,.has-production-art .bubble{isolation:isolate}
.sdlc-labels{position:absolute;inset:0;z-index:8;pointer-events:none}.sdlc-labels span{position:absolute;top:12.5%;width:120px;transform:translateX(-50%);color:#fff;text-align:center;font:400 clamp(16px,1.35vw,23px)/1 Bangers,Impact,sans-serif;letter-spacing:1.2px;text-shadow:2px 2px 0 #07172c,-1px -1px 0 #07172c}.sdlc-labels span:nth-child(1){left:24.3%;color:#aaf0a9}.sdlc-labels span:nth-child(2){left:35.6%;color:#aaf0a9}.sdlc-labels span:nth-child(3){left:48.2%;color:#ffd3a0}.sdlc-labels span:nth-child(4){left:64.3%;color:#ffd3a0}.sdlc-labels span:nth-child(5){left:77%;color:#ffd3a0}.sdlc-labels span:nth-child(6){left:90.6%;color:#ffd3a0}.kind-professor-question .panel-head{left:auto;right:18px;top:18px;max-width:44%;text-align:right;font-size:clamp(24px,2.4vw,42px)}
.auditorium{position:absolute;inset:0;background:linear-gradient(#b8dced 0 56%,#8d6d4d 56%);perspective:600px}.board{position:absolute;left:22%;top:7%;width:55%;height:38%;display:grid;place-items:center;background:#183b38;border:12px solid #9a6a3d;color:#fff;font:400 clamp(25px,4vw,62px)/1 Georgia,serif;letter-spacing:.08em}.prof-stage{height:65%;right:4%;bottom:5%}.seats{position:absolute;left:4%;right:4%;bottom:4%;display:flex;justify-content:space-around;align-items:end}.seats i{width:16%;height:85px;background:#923f32;border:6px solid var(--navy);border-radius:40px 40px 8px 8px}.seats i.empty{background:transparent;border-style:dashed}.student-row{position:absolute;inset:0;display:flex;justify-content:space-around;background:linear-gradient(#d8edf5 65%,#d4a165 65%)}.student-row img{position:relative;height:95%;max-width:31%}.empty-seat-art{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#cce8f4 60%,#b98b57 60%)}.chair{width:45%;height:46%;background:#933e31;border:8px solid var(--navy);border-radius:45% 45% 10% 10%;box-shadow:0 35px 0 -8px #592b26}.empty-seat-art em{position:absolute;top:12%;font:400 28px/1 Bangers,Impact,sans-serif;letter-spacing:1px}.dashboard{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-evenly;background:#0c2038}.dashboard i{width:20%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 22px currentColor}.dashboard.good i{background:#4de094;color:#4de094}.dashboard.bad i{background:#f34d4d;color:#f34d4d}.system-map{position:absolute;inset:0;background:#0b223d}.system-map i{position:absolute;width:70px;height:70px;border:8px solid #fff;border-radius:50%}.system-map i:nth-child(1){left:10%;top:40%}.system-map i:nth-child(2){left:42%;top:18%}.system-map i:nth-child(3){right:10%;bottom:18%}.broken i:nth-child(2){border-color:#e64f45;box-shadow:0 0 20px #e64f45}.healed i{border-color:#4fd397;box-shadow:0 0 16px #4fd397}.incident-clock{position:absolute;inset:0;display:grid;place-items:center;background:#281b2a;color:#ff655b;font:700 72px/1 monospace}.checklist{position:absolute;inset:8% 10%;margin:0;padding:20px 20px 20px 50px;background:#ffe8bd;border:5px solid var(--navy);font-size:22px;line-height:1.7}.solo{height:115%;right:5%;bottom:-18%}.lifecycle-line{position:absolute;left:10%;right:10%;top:44%;height:10px;background:var(--orange);display:flex;justify-content:space-between}.lifecycle-line i{width:42px;height:42px;margin-top:-16px;border:6px solid #fff;border-radius:50%;background:var(--blue)}.door{position:absolute;right:5%;top:5%;width:46%;height:92%;background:#1c4774;border:12px solid #6d482c}.bob-door{height:95%;right:3%;bottom:-3%}.bob-seated{height:92%;left:18%;bottom:-20%;z-index:3}.chair.behind{position:absolute;left:30%;bottom:5%;z-index:1}.video-panel{display:grid;place-items:center;background:#081829}.video-panel video{width:100%;height:100%;object-fit:contain}.night-room{position:absolute;inset:0;background:radial-gradient(circle at 80% 5%,#5774a0,transparent 22%),linear-gradient(#07111f,#10253a 62%,#151c25 62%)}.moon{position:absolute;right:8%;top:8%;width:110px;aspect-ratio:1;border-radius:50%;background:#eef5d6;box-shadow:0 0 60px #d6e8ff}.desk{position:absolute;left:24%;bottom:20%;width:55%;height:18%;background:#573b2e;border:8px solid #1a1820}.sleeping{height:82%;left:38%;bottom:10%;transform:rotate(9deg);filter:brightness(.55) saturate(.7)}
.quiz-page .panels{grid-template:1fr 1fr/1fr 1fr 1fr}.quiz-question{grid-column:1/-1;background:#ffe8bd;padding:25px}.auditorium-mini{position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,#b9dce8,transparent 30%)}.answer{cursor:pointer;padding:18px;background:#fff;color:var(--navy);font-size:17px;text-align:left;font-weight:700}.answer span{display:block;width:max-content;margin:-8px -8px 10px;padding:5px 8px;background:var(--blue);color:#fff}.answer.correct{background:#d6f3e2;border-color:#3e9d72}.answer.incorrect{background:#f8d9d5;border-color:#cf4a42}.feedback{grid-column:1/-1;padding:14px;border:5px solid var(--navy);background:#fff;font-weight:700}
.controls{height:88px;display:grid;grid-template-columns:170px 1fr 170px;align-items:center;gap:20px;padding:11px 28px 17px;background:#fff;border-top:7px solid var(--navy)}.status{text-align:center;color:var(--navy);font:400 20px/1 Bangers,Impact,sans-serif;letter-spacing:2px}.btn{height:58px;padding:10px;border:5px solid var(--navy);background:#fff;color:var(--navy);font:400 24px/1 Bangers,Impact,sans-serif;letter-spacing:2.4px;box-shadow:6px 6px 0 var(--shadow);cursor:pointer}.btn.primary{background:var(--orange)}.btn:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:950px){.topbar{height:auto}.header-main{height:auto;display:block}.header-tools{width:auto;margin-top:14px}.view-switch{justify-content:flex-start}.course-lockup h1{white-space:normal}.layout-toolbar{height:auto;flex-wrap:wrap;margin-top:12px}.comic-page{grid-template-columns:1fr}.story-rail{border-left:0;border-top:6px solid var(--navy)}.panels{min-height:540px}.controls{grid-template-columns:140px 1fr 140px}.layout-columns,.layout-grid-four{grid-template-columns:1fr}.layout-columns>*,.layout-grid-four>*{min-height:220px}.quiz-page .panels{grid-template-columns:1fr}.quiz-question,.feedback{grid-column:1}}
@media(max-width:950px){.comic-page.slide-scene-01{grid-template-columns:1fr}}