body{background:#eeeee5}
html{scroll-padding-top:106px;scroll-padding-bottom:24px}
header{position:fixed;inset:0 0 auto;height:90px;z-index:5;margin:0;padding:0 4%;background:#f3f1e9;border-bottom:1px solid #c6c9bd;gap:20px}
header nav{gap:24px}
.world{position:fixed;inset:90px 0 0;z-index:0;pointer-events:none}
/* Keep the same viewport across all chapters so the camera never jumps on a section change. */
.lab-viewport{position:absolute;inset:0 0 0 39%;pointer-events:auto;overflow:hidden}
#lab{height:100%;width:100%;display:block;touch-action:pan-y;cursor:grab}
#lab:active{cursor:grabbing}
#lab:focus-visible{outline:3px solid #255c72;outline-offset:-4px}
.lab-view-label{position:absolute;top:24px;left:25px;font-size:12px;color:#526366;pointer-events:none}
.lab-hover{position:absolute;top:120px;right:4%;font-size:12px;padding:10px 14px;background:#233a3d;color:#fffdf5;border-radius:4px;pointer-events:none}
.lab-tools{position:absolute;right:4%;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lab-tools{z-index:3}
.lab-settings-panel{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#lab-settings-toggle{display:none}
#motion{min-height:44px;padding:8px 11px;border:1px solid #68756b;background:#f3f1e9;color:#344b45;font-size:11px;border-radius:4px}
.lab-camera{display:flex;align-items:center;gap:0;background:#f3f1e9;border:1px solid #68756b;padding:2px;border-radius:4px;white-space:nowrap}
.lab-camera button{min-width:36px;min-height:36px;border:0;background:none;color:#233a3d;font-size:19px;border-radius:2px}
.lab-camera button:hover{background:#dce2d7}
.lab-camera button:last-child{font-size:11px;padding:0 10px}
.lab-camera>span{width:1px;height:16px;background:#aab2a5;margin:0 4px}
#lab-loading{position:absolute;left:10%;right:10%;top:35%;padding:25px;background:#f3f1e9;line-height:1.7;border-radius:6px}
.journey-overlay{position:fixed;inset:90px 0 0 39%;z-index:4;pointer-events:none}
.journey-rail{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(540px,calc(100% - 48px));display:flex;align-items:center;gap:4px;padding:5px 8px 11px;border:1px solid #fffdf5b3;border-radius:14px;background:rgba(243,241,233,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px #233a3d16;pointer-events:auto}
.journey-rail a{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:44px;min-height:44px;font-size:11px;color:#233a3d;position:relative;padding:5px 3px;border-radius:8px;transition:flex-grow 200ms var(--ease),background 160ms var(--ease),transform 160ms var(--ease)}
.journey-rail a:hover,.journey-rail a:focus-visible{background:#233a3d0a;transform:translateY(-2px)}
.route-index{font-size:11px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #849182;border-radius:50%;flex-shrink:0;transition:background 160ms var(--ease)}
.route-name{display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journey-rail a[aria-current=step]{flex-grow:2.6;font-weight:700}
.journey-rail a[aria-current=step] .route-name{display:block}
.journey-rail a[aria-current=step] .route-index{background:#efc34b;border-color:#96731e}
.route-track{position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:#84918255;border-radius:2px;overflow:hidden;pointer-events:none}
.route-track>span{display:block;width:0;height:100%;background:#96731e;border-radius:inherit}
main{position:relative;z-index:1;pointer-events:none}
.story-section{min-height:115svh;margin:0;padding:145px 0 130px 5%;display:flex;align-items:center;position:relative;scroll-margin-top:0;overflow-anchor:none;pointer-events:none}
.story-copy{width:36%;max-width:550px;min-width:360px;pointer-events:auto;padding:28px 0;background:#eeeee5}
.story-section h1,.story-section h2{font-size:clamp(42px,4.5vw,68px);line-height:1.05;font-weight:600;letter-spacing:-2.8px;margin:0 0 26px}
.story-section .eyebrow{margin-bottom:24px;font-size:12px}
.story-description,.intro{font-size:16px;line-height:1.8;color:#526366;max-width:430px}
.story-section .actions{flex-wrap:wrap;gap:16px;margin:28px 0}
.story-section .primary{font-size:13px;min-height:48px;padding:13px 18px}
.story-section .text-link{font-size:13px}
.journey-tip{margin-top:36px;font-size:12px;line-height:1.7;color:#526366;padding-left:17px;border-left:2px solid #ad8429}
.school{margin-top:24px}
.lab-actions{display:flex;flex-direction:column;gap:9px;margin:25px 0 20px;max-width:340px}
.lab-actions button{padding:12px 16px;min-height:46px;border:1px solid #65736a;border-radius:4px;background:#f3f1e9;color:#233a3d;text-align:left;font-size:13px;transition:transform 180ms var(--ease)}
.lab-actions>button:first-child{background:#233a3d;color:#fffdf5}
.lab-actions button:active{transform:scale(.98)}
.lab-actions button[aria-pressed=true]{background:#efc34b;color:#233a3d}
.lab-actions button:disabled{color:#53635a;background:#d8dcd2;cursor:not-allowed}
.part-actions{display:flex;gap:9px}
.part-actions>*{flex:1}
.lab-feedback{font-size:12px;line-height:1.8;padding:15px 17px;background:#f3f1e9;border:1px solid #c3cabc;border-radius:4px;max-width:360px}
.next-section{display:flex;gap:18px;justify-content:space-between;max-width:360px;font-size:12px;border-top:1px solid #aeb8aa;margin-top:35px;padding-top:17px;min-height:44px}
.repo-copy{width:43%;max-width:620px}
.repository{max-width:none}
.repo-heading{display:block;margin-bottom:25px}
.repo-heading>p{max-width:430px}
.repo-heading h2{font-size:clamp(37px,3.8vw,56px)}
.toolbar{flex-direction:column;gap:14px}
.sort{justify-content:flex-end;font-size:12px}
.sort select{padding:9px}
.search{padding:5px 12px;background:#f3f1e9}
.category-row{flex-wrap:wrap;margin:20px 0;gap:8px}
.filters{gap:3px}
.filters button{padding:10px 13px;font-size:12px}
.empty{padding:30px 12px}
.empty h3{font-size:20px}
.empty p{font-size:13px}
.repo-foot{font-size:11px}
.file-row{grid-template-columns:44px 1fr auto;gap:12px}
.file-row .file-info{grid-column:2/4}
.file-row .quiet{grid-column:2;text-align:left}
.file-row>a{grid-column:3;grid-row:2}
.closing{background:transparent;color:#233a3d;min-height:110svh}
.closing h2{font-family:inherit}
.closing a{border-bottom:0}
.closing .text-link{border-bottom:1px solid #233a3d}
.closing .primary{padding:13px 18px}
.closing .school{font-size:12px}
footer{display:block;margin-top:30px;padding:0;font-size:9px;line-height:1.6;color:#526366}
.skip{z-index:8}
.skip:focus{top:95px}
dialog{z-index:10}
.monitor-menu{position:absolute;left:0;top:0;width:640px;height:400px;background:#f3f1e9;color:#233a3d;transform-origin:0 0;backface-visibility:hidden;pointer-events:auto;padding:16px 24px;overflow:hidden}
.monitor-menu[hidden]{display:none}
.monitor-heading{display:flex;justify-content:space-between;align-items:center;height:44px;font-size:20px;color:#526366;border-bottom:2px solid #b2b7af}
.monitor-heading span:first-child{font-weight:700;color:#255c72}
.computer-services{list-style:none;padding:0;margin:0}
.computer-services li+li{border-top:2px solid #c3cabc}
.computer-services a{display:grid;grid-template-columns:1fr 42px;align-content:center;column-gap:12px;row-gap:3px;height:106px;padding:10px 14px;transition:background 160ms var(--ease),transform 160ms var(--ease)}
.computer-services a:hover,.computer-services a:focus-visible{background:#efc34b;transform:translateX(3px)}
.computer-services a:focus-visible{outline:3px solid #255c72;outline-offset:-3px}
.service-name{font-size:30px;font-weight:600;line-height:1.3}
.service-address{grid-column:1;font-size:19px;line-height:1.4;color:#526366;overflow-wrap:anywhere}
.service-open{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;color:#255c72;font-size:32px}
#computer-close{min-height:44px;padding:8px 12px;border:1px solid #68756b;background:#f3f1e9;color:#233a3d;font-size:12px;border-radius:4px}
#computer-close span{margin-left:12px}
body[data-computer=entered] .lab-camera{display:none}
#service-preview{position:fixed;z-index:7;max-width:calc(100vw - 24px);width:max-content;padding:12px 16px;background:#233a3d;color:#fffdf5;border:1px solid #526366;border-radius:6px;box-shadow:0 6px 18px #233a3d20;pointer-events:none;animation:service-reveal 160ms var(--ease)}
#service-preview strong,#service-preview span,#service-preview small{display:block}
#service-preview strong{font-size:14px;line-height:1.5}
#service-preview span{font-size:12px;line-height:1.7;overflow-wrap:anywhere}
#service-preview small{font-size:11px;margin-top:6px;color:#efc34b}
@keyframes service-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.monitor-fallback{position:static;width:100%;height:auto;padding:12px;margin-top:16px;transform:none!important}
.monitor-fallback .monitor-heading{font-size:12px}
.monitor-fallback .service-name{font-size:16px}
.monitor-fallback .service-address{font-size:12px}
.monitor-fallback .computer-services a{height:auto;min-height:80px;padding:12px 4px}
.monitor-fallback .service-open{font-size:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html{scrollbar-gutter:stable}
body:has(#motion[aria-pressed=true]) #service-preview{animation:none}
@media(max-width:760px){
 body[data-computer=entered] .world{height:calc(100svh - 78px);min-height:0}
 body[data-computer=entered] .journey-overlay{height:calc(100svh - 78px)}
 body[data-computer=entered] .story-copy{visibility:hidden}
}
body[data-webgl=unavailable] .lab-camera{display:none}
@media(min-width:1600px){.story-copy{width:35%}}
@media(max-width:1100px) and (min-width:761px){
 .story-copy{min-width:310px;width:39%}
 .story-section h1,.story-section h2{font-size:45px}
 .story-section{padding-left:4%}
 .lab-viewport{left:40%}
 .journey-overlay{left:40%}
 .brand{gap:10px}
 header nav{gap:12px}
 .repo-copy{min-width:360px}
 .repo-copy h2{font-size:40px}
}
@media(max-width:760px){
 html{scroll-padding-top:calc(78px + max(36svh,240px) + 14px)}
 header{height:78px;padding:9px 5%;gap:15px;flex-wrap:nowrap}
 .brand{font-size:10px;gap:10px}
 .mark{font-size:38px}
 header nav{gap:15px;font-size:12px}
 header nav a:first-child{display:inline}
 .world{inset:78px 0 auto;height:36svh;min-height:240px;z-index:2;background:#eeeee5;border-bottom:1px solid #c3cabc}
 .journey-overlay{inset:78px 0 auto;height:max(36svh,240px)}
 .lab-viewport{inset:0}
 .lab-view-label{left:5%;top:18px;font-size:10px}
 .lab-hover{top:116px;font-size:10px;padding:7px}
 .lab-tools{top:4px;right:12px;flex-direction:row;align-items:flex-start}
 #lab-settings-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #aab2a5;border-radius:6px;background:#f3f1e9e6;color:#233a3d}
 .lab-settings-panel{display:none;position:fixed;top:130px;right:12px;z-index:6;max-width:calc(100vw - 24px);padding:8px;background:#f3f1e9;border:1px solid #aab2a5;border-radius:6px;box-shadow:0 5px 18px #233a3d20;gap:6px}
 body[data-lab-settings=open] .lab-settings-panel{display:flex}
 .lab-settings-panel #motion{width:100%;text-align:left;font-size:12px}
 #motion{font-size:10px;padding:8px}
 .lab-camera button{min-width:44px;min-height:44px;font-size:20px}
 .lab-camera button:last-child{font-size:10px;padding:0 6px}
 .journey-rail{width:calc(100% - 32px);bottom:8px;gap:2px;padding:0 6px 5px;border-radius:10px;background:rgba(243,241,233,.82);box-shadow:0 3px 12px #233a3d0d}
 .route-index{width:24px;height:24px;font-size:10px}
 .route-track{bottom:2px}
 .journey-rail a,.journey-rail a[aria-current=step]{flex:1;padding:5px 0;gap:0}
 .journey-rail a[aria-current=step] .route-name{display:none}
 .story-section{min-height:115svh;padding:calc(78px + max(36svh,240px) + 20px) 5% 100px;align-items:flex-start}
 .story-copy,.repo-copy{width:100%;min-width:0;max-width:none;padding:12px 0;background:#eeeee5}
 .story-section h1,.story-section h2{font-size:43px;letter-spacing:-2px}
 .story-section .eyebrow{font-size:11px;margin-bottom:15px}
 .intro,.story-description{font-size:14px;line-height:1.75}
 .story-section .actions{margin:20px 0}
 .school,.journey-tip{margin-top:22px}
 .lab-actions,.lab-feedback,.next-section{max-width:none}
 .repo-copy h2{font-size:39px}
 .repo-heading>p{font-size:13px}
 .repo-foot{align-items:flex-start;gap:4px}
 .closing{min-height:115svh}
 #lab-loading{top:8%;left:5%;right:5%;font-size:12px;padding:14px}
 .skip:focus{top:80px}
 .next-section{margin-top:24px}
}
@media(max-width:760px) and (max-height:640px){
 html{scroll-padding-top:calc(78px + max(32svh,184px) + 14px)}
 .lab-settings-panel{top:calc(78px + max(32svh,184px) + 8px)}
 body[data-computer=entered] .lab-settings-panel{top:130px}
 .world{height:32svh;min-height:184px}
 .journey-overlay{height:max(32svh,184px)}
 .story-section{padding-top:calc(78px + max(32svh,184px) + 20px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .story-section{min-height:100svh}
}
/* Each chapter occupies one screen; long copy and file collections scroll within their panel. */
.story-section{height:100svh;min-height:0;padding:106px 0 28px 5%;align-items:center}
.story-copy{max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:20px 12px 20px 0;scrollbar-width:thin;scrollbar-color:#849182 transparent}
#upload-progress{display:block;width:100%;height:12px;margin-top:20px;accent-color:#255c72}
#upload-progress[hidden]{display:none}
#upload-status{font-size:13px;line-height:1.6}
@media(min-width:761px){.hero h1{font-size:clamp(42px,4.15vw,64px)}}
@media(min-width:761px){body[data-segment=repository] .lab-view-label{left:120px}}
@media(max-width:1100px) and (min-width:761px){.story-section{padding-left:4%}}
@media(max-width:760px){
 .story-section{padding:calc(78px + max(36svh,240px) + 14px) 5% 24px;align-items:flex-start}
 .story-copy{padding:10px 8px 12px 0}
}
@media(max-width:760px) and (max-height:640px){
 .story-section{padding-top:calc(78px + max(32svh,184px) + 14px)}
}