:root{--ink:#171319;--paper:#fff5dc;--cream:#ffe9b0;--panel:#fffaf0;--coral:#ff5937;--red:#ed3428;--yellow:#ffd33d;--blue:#416a8a;--pink:#f094d8;--green:#59a857;--line:#171319;--muted:#705f62;--shadow:6px 6px 0 #171319;--soft-shadow:0 18px 50px #3b24241a;--radius:18px;--top:72px;--rail:220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;overflow:hidden}button,input,select{font:inherit}button{color:inherit}.skip-link{position:fixed;left:8px;top:-60px;background:#fff;color:#000;padding:12px 18px;z-index:9999}.skip-link:focus{top:8px}.eyebrow{font-family:"DM Mono",monospace;font-weight:500;font-size:.76rem;letter-spacing:.15em}.intro{position:fixed;inset:0;background:var(--paper);z-index:1000;display:grid;place-items:center;align-content:center;overflow:hidden;animation:introAutoExit .45s ease 3.6s forwards}.intro-grid{position:absolute;inset:0;background-image:linear-gradient(#17131910 1px,transparent 1px),linear-gradient(90deg,#17131910 1px,transparent 1px);background-size:48px 48px;opacity:.45}.intro:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-18%;height:36%;background:var(--yellow);border:6px solid var(--ink);border-radius:50% 50% 0 0}.intro-logo{width:min(390px,70vw);height:auto;mix-blend-mode:multiply;position:relative;z-index:2;transform:scale(1);opacity:1;animation:introLogoIn .7s cubic-bezier(.2,.8,.2,1) both}.intro-kicker,.intro-line{position:relative;z-index:3;margin:8px 0;animation:introTextIn .45s ease .55s both}.intro-kicker{font-family:"DM Mono";letter-spacing:.22em;font-weight:700}.intro-line{font-size:1.1rem}.skip-intro{position:absolute;right:24px;top:24px;border:2px solid var(--ink);background:transparent;padding:10px 14px;border-radius:999px;z-index:4;cursor:pointer}.orbit{position:absolute;border:3px solid var(--ink);border-radius:50%;opacity:.3;animation:introOrbitIn .7s ease .2s both}.orbit-a{width:600px;height:160px;transform:rotate(-18deg)}.orbit-b{width:480px;height:120px;transform:rotate(22deg)}.intro-star{position:absolute;font-size:2.4rem;color:var(--yellow);-webkit-text-stroke:2px var(--ink);z-index:3;animation:introStarIn .45s ease .45s both}.star-one{left:17%;top:22%}.star-two{right:19%;bottom:25%}.app{height:100vh;display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:var(--top) 1fr;opacity:1}.topbar{grid-column:1/-1;display:grid;grid-template-columns:var(--rail) 1fr auto;align-items:center;border-bottom:2px solid var(--line);background:var(--panel);z-index:20}.brand{height:100%;display:flex;align-items:center;gap:8px;border:0;border-right:2px solid var(--line);background:var(--yellow);padding:8px 16px;cursor:pointer;text-align:left}.brand img{width:54px;height:54px;object-fit:cover;border-radius:50%;mix-blend-mode:multiply}.brand span{font-weight:800;font-style:italic;line-height:.9;font-size:1.05rem}.crumb{display:flex;align-items:center;gap:10px;padding:0 24px}.crumb span{color:var(--muted);font-size:.9rem}.top-actions{display:flex;gap:8px;padding-right:16px}.icon-button,.mode-chip{height:42px;border:2px solid var(--line);background:var(--panel);border-radius:12px;cursor:pointer;font-weight:700}.icon-button{min-width:42px}.mode-chip{display:flex;align-items:center;gap:8px;padding:0 14px}.signal{width:9px;height:9px;border-radius:50%;background:var(--green);border:1px solid var(--ink)}.rail{grid-column:1;grid-row:2;border-right:2px solid var(--line);background:var(--panel);padding:22px 14px;display:flex;flex-direction:column;justify-content:space-between;z-index:10}.rail nav{display:grid;gap:8px}.nav-item{border:2px solid transparent;background:transparent;padding:13px 14px;border-radius:12px;display:flex;gap:12px;align-items:center;cursor:pointer;text-align:left}.nav-item span{font-size:1.3rem;width:24px}.nav-item.active{background:var(--coral);border-color:var(--line);box-shadow:3px 3px 0 var(--line);color:#fff}.rail-note{display:flex;align-items:center;border-top:2px solid var(--line);padding-top:18px}.rail-note p{margin:0 0 0 10px}.rail-note small{color:var(--muted)}.tiny-comet{display:grid;place-items:center;width:40px;height:40px;background:var(--yellow);border:2px solid var(--line);border-radius:50%}main{grid-column:2;grid-row:2;overflow:auto;position:relative;padding:38px 48px 110px;background:var(--paper)}.view{display:none;max-width:1420px;margin:auto}.view.active{display:block}.launchpad-head{display:grid;grid-template-columns:1fr 260px;align-items:center;min-height:210px;border-bottom:2px solid var(--line);position:relative}.launchpad-head h1,.page-heading h1{font-size:clamp(2.4rem,5vw,5rem);line-height:.95;margin:10px 0 14px;letter-spacing:-.06em}.launchpad-head p,.page-heading p{font-size:1.1rem;color:var(--muted);max-width:650px}.launch-orbit{width:190px;height:100px;border:3px solid var(--line);border-radius:50%;transform:rotate(-16deg);position:relative}.mini-planet{position:absolute;width:50px;height:50px;border:3px solid var(--line);background:var(--blue);border-radius:50%;top:22px;left:66px}.mini-comet{position:absolute;font-size:2rem;right:-10px;top:20px}.action-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0}.launch-card{min-height:260px;padding:24px;text-align:left;border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}.launch-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--line)}.launch-card.coral{background:var(--coral);color:white}.launch-card.blue{background:var(--blue);color:white}.launch-card.yellow{background:var(--yellow)}.card-no{font-family:"DM Mono"}.card-icon{position:absolute;right:18px;top:10px;font-size:4.5rem;opacity:.3}.launch-card h2{font-size:1.7rem;max-width:240px;margin:52px 0 10px;line-height:1}.launch-card p{max-width:250px}.card-go{position:absolute;bottom:22px;font-weight:700;font-family:"DM Mono"}.recent-strip{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;padding-top:24px}.recent-strip h2{margin:6px 0}.project-list{display:flex;gap:18px;overflow:auto;padding:8px}.empty-project,.project-card{min-width:240px;height:110px;border:2px dashed var(--line);background:transparent;border-radius:16px;display:grid;grid-template-columns:48px 1fr;text-align:left;align-items:center;padding:14px;cursor:pointer}.empty-project b{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--line);border-radius:50%;font-size:1.4rem}.empty-project span,.project-card b{font-weight:700}.empty-project small,.project-card small{color:var(--muted)}.project-card{border-style:solid;background:var(--panel);box-shadow:4px 4px 0 var(--line)}.project-card .project-badge{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;background:var(--yellow);border:2px solid var(--line);border-radius:12px;font-weight:800}.studio{min-height:calc(100vh - 220px);display:grid;grid-template-columns:230px minmax(360px,1fr) 260px;grid-template-rows:1fr 140px;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--soft-shadow)}.toolbox,.inspector{padding:16px}.toolbox{border-right:2px solid var(--line)}.inspector{border-left:2px solid var(--line)}.project-switch{display:flex;align-items:center;gap:9px;padding-bottom:14px;border-bottom:2px solid var(--line)}.project-switch div{min-width:0;flex:1}.project-switch b,.project-switch small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-switch small{color:var(--muted)}.project-switch button{border:0;background:transparent}.project-avatar{width:38px;height:38px;background:var(--yellow);border:2px solid var(--line);border-radius:10px;display:grid;place-items:center;font-weight:800}.tool-tabs{display:flex;gap:4px;margin:16px 0}.tool-tabs button{border:0;background:transparent;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:.82rem}.tool-tabs .active{background:var(--ink);color:var(--paper)}.tree{display:grid;gap:3px}.tree button{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;font-family:"DM Mono";font-size:.8rem}.tree .file{padding-left:26px}.tree .active{background:var(--cream)}.add-file{margin-top:16px;width:100%;border:2px dashed var(--line);padding:10px;background:transparent;border-radius:10px;cursor:pointer}.editor-pane{min-width:0;background:#1d1a20;color:#f6eee8}.editor-tabs{height:50px;border-bottom:1px solid #ffffff24;display:flex;align-items:end;padding:0 12px}.editor-tabs button{border:0;background:transparent;color:#bfb5c2;padding:12px}.editor-tab.active{background:#2a252d;color:#fff;border-top:3px solid var(--coral)}.editor-tab i{margin-left:30px}.preview-toggle{margin-left:auto}.preview-toggle+.preview-toggle{margin-left:0}.preview-toggle.active{color:white!important}.code-editor{display:flex;padding:24px 0;overflow:auto;font:14px/1.75 "DM Mono",monospace}.line-numbers{width:50px;text-align:right;padding-right:14px;color:#665f69;user-select:none}.code-editor pre{margin:0;outline:0;min-width:600px}.pink{color:#f094d8}.blue-text{color:#67b7ff}.yellow-text{color:#ffd33d}.green-text{color:#8bd17c}.inspector-head{display:flex;justify-content:space-between}.inspector-head button{border:0;background:none}.progress-ring{width:92px;height:92px;margin:24px auto 12px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--progress)*1%),var(--cream) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:10px;background:var(--panel);border-radius:50%;border:2px solid var(--line)}.progress-ring span{position:relative;font-weight:800}.inspector h3{text-align:center;margin-bottom:5px}.muted{color:var(--muted)}.inspector>.muted{text-align:center;font-size:.85rem}.checklist{display:grid;gap:10px;margin:22px 0}.checklist label{font-size:.9rem}.primary,.secondary,.danger-button{border:2px solid var(--line);border-radius:10px;padding:11px 15px;font-weight:700;cursor:pointer}.primary{background:var(--coral);color:white;box-shadow:3px 3px 0 var(--line)}.secondary{background:var(--panel)}.danger-button{background:var(--red);color:#fff}.full{width:100%}.timeline{grid-column:1/-1;border-top:2px solid var(--line);display:grid;grid-template-columns:170px 1fr 250px;align-items:center;padding:14px 18px;background:var(--cream)}.timeline-title b,.timeline-title span{display:block}.timeline-title span{color:var(--muted);font-size:.8rem}.tracks{position:relative;height:70px;border-left:2px solid var(--line);padding:22px 20px;display:flex;gap:10px;align-items:center;overflow:hidden}.track-label{position:absolute;top:2px;font:10px "DM Mono"}.change-block{border:2px solid var(--line);padding:7px 10px;border-radius:7px;font:11px "DM Mono"}.change-block.add{background:#9bd18f}.change-block.edit{background:var(--yellow)}.playhead{position:absolute;left:52%;top:0;bottom:0;width:2px;background:var(--coral)}.playhead:before{content:"▼";position:absolute;top:-5px;left:-6px;color:var(--coral)}.review-button{border:3px solid var(--line);background:var(--blue);color:#fff;border-radius:12px;padding:14px;font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--line)}.page-heading{padding:20px 0 35px;border-bottom:2px solid var(--line)}.mission-map{display:grid;grid-template-columns:repeat(9,auto);align-items:center;gap:10px;padding:30px 0;overflow:auto}.mission{min-width:150px;border:2px solid var(--line);background:var(--panel);border-radius:14px;padding:14px;text-align:left;cursor:pointer}.mission.active{background:var(--yellow);box-shadow:4px 4px 0 var(--line)}.mission span{display:grid;place-items:center;width:30px;height:30px;background:var(--ink);color:#fff;border-radius:50%;margin-bottom:12px}.mission b,.mission small{display:block}.mission small{color:var(--muted)}.lesson-panel{display:grid;grid-template-columns:100px 1fr 290px;gap:30px;background:var(--blue);color:white;border:3px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.lesson-no{font-size:4rem;font-weight:800;opacity:.35}.lesson-panel h2{font-size:2rem;margin:10px 0}.lesson-panel aside{background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}.lesson-actions{display:flex;gap:10px}.lesson-panel .secondary{color:var(--ink)}.stack-picker{display:grid;grid-template-columns:240px 1fr;gap:30px;padding:50px 0}.stack-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stack-cards button{border:2px solid var(--line);background:var(--panel);border-radius:12px;padding:18px;text-align:left;cursor:pointer;transition:.2s}.stack-cards button:hover{background:var(--yellow);transform:translateY(-3px)}.stack-cards b,.stack-cards span{display:block}.stack-cards span{color:var(--muted);margin-top:6px}.learn-layout{display:grid;grid-template-columns:210px 1fr 260px;gap:22px;padding-top:30px}.learn-nav{display:grid;align-content:start;gap:6px}.learn-nav button{border:0;background:transparent;text-align:left;padding:12px;border-radius:9px;cursor:pointer}.learn-nav .active{background:var(--coral);color:#fff}.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.topic-card{border:2px solid var(--line);background:var(--panel);border-radius:14px;padding:18px;min-height:150px;cursor:pointer;transition:.2s}.topic-card:hover{transform:translateY(-4px);box-shadow:4px 4px 0 var(--line)}.topic-card span{font:11px "DM Mono";color:var(--muted)}.topic-card h3{margin:20px 0 8px}.topic-card p{color:var(--muted);font-size:.9rem}.shortcut-board{background:var(--yellow);border:3px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);height:max-content}.shortcut-board div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}.shortcut-board kbd,.command-bar kbd,.palette kbd{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 6px;box-shadow:1px 1px 0 var(--line)}.settings-grid{display:grid;gap:14px;padding-top:30px;max-width:850px}.setting{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--line);border-radius:14px;padding:20px;background:var(--panel)}.setting h2,.setting p{margin:0}.setting p{color:var(--muted);margin-top:5px}.segmented{display:flex}.segmented button{border:2px solid var(--line);background:transparent;padding:9px}.segmented button:first-child{border-radius:9px 0 0 9px}.segmented button:last-child{border-radius:0 9px 9px 0}.segmented .active{background:var(--yellow)}.command-bar{position:fixed;left:calc(var(--rail) + 50%);transform:translateX(-50%);bottom:20px;width:min(660px,calc(100vw - var(--rail) - 60px));border:3px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:6px 6px 0 var(--line);padding:15px 18px;display:flex;align-items:center;gap:12px;z-index:30;cursor:pointer;text-align:left}.command-bar span:nth-child(2){flex:1;color:var(--muted)}.comet-dot{font-size:1.4rem;color:var(--coral)}.modal-backdrop,.palette{position:fixed;inset:0;background:#171319aa;z-index:100;display:none;place-items:center;padding:20px}.modal-backdrop.open,.palette.open{display:grid}.modal{width:min(520px,100%);background:var(--paper);border:3px solid var(--line);border-radius:18px;box-shadow:10px 10px 0 var(--line);padding:30px;position:relative}.modal h2{font-size:2.2rem;margin:8px 0}.modal>p{color:var(--muted)}.modal label{display:grid;gap:7px;margin:18px 0;font-weight:700}.modal input,.modal select{border:2px solid var(--line);background:var(--panel);border-radius:10px;padding:12px}.modal-close{position:absolute;right:15px;top:15px;border:0;background:transparent;font-size:1.6rem;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.import-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.import-options button{border:2px solid var(--line);border-radius:12px;background:var(--panel);padding:24px;text-align:left;cursor:pointer}.import-options span{font-size:2rem}.import-options b,.import-options small{display:block;margin-top:8px}.import-options small{color:var(--muted)}.palette-box{width:min(680px,100%);background:#171319;color:#fff;border:3px solid #000;border-radius:18px;overflow:hidden;box-shadow:12px 12px 0 var(--coral);align-self:start;margin-top:14vh}.palette-search{padding:16px;display:flex;gap:12px;align-items:center;border-bottom:1px solid #ffffff33}.palette-search input{flex:1;border:0;background:transparent;color:#fff;outline:0;font-size:1.1rem}.palette-results{padding:8px}.palette-results button{width:100%;display:flex;align-items:center;gap:14px;background:transparent;color:#fff;border:0;border-radius:10px;padding:12px;text-align:left;cursor:pointer}.palette-results button:hover{background:#ffffff14}.palette-results button>span{font-size:1.4rem;width:30px}.palette-results div{flex:1}.palette-results b,.palette-results small{display:block}.palette-results small{color:#aaa}.info-drawer{position:fixed;right:0;top:var(--top);bottom:0;width:min(390px,90vw);background:var(--yellow);border-left:3px solid var(--line);z-index:80;padding:32px;transform:translateX(105%);box-shadow:-15px 0 50px #0002}.info-drawer.open{transform:translateX(0)}.info-drawer>button{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:1.6rem}.info-drawer h2{font-size:2rem}.fact{margin-top:30px;background:var(--panel);border:2px solid var(--line);padding:18px;border-radius:12px}.fact span{font:11px "DM Mono"}.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:#fff;border:2px solid #000;border-radius:10px;padding:14px 18px;z-index:200;transform:translateY(120px);opacity:0}.dark{--ink:#f8f2e8;--paper:#151217;--cream:#2a2429;--panel:#211d22;--line:#766b72;--muted:#cfc4c8;--shadow:6px 6px 0 #0a090b}.dark .brand img,.dark .intro-logo{mix-blend-mode:normal}.dark .nav-item.active{color:#fff}.dark .launch-card.yellow,.dark .shortcut-board,.dark .info-drawer{color:#171319}.dark .primary{color:white}.dark .project-avatar,.dark .tiny-comet{color:#171319}.dark .progress-ring:before{background:var(--panel)}
@media(max-width:1000px){:root{--rail:76px}.brand span,.nav-item b,.rail-note p{display:none}.brand{justify-content:center;padding:6px}.brand img{width:50px}.rail{padding:18px 8px}.nav-item{justify-content:center}.launchpad-head{grid-template-columns:1fr}.launch-orbit{display:none}.action-stage{grid-template-columns:1fr}.recent-strip{grid-template-columns:1fr}.studio{grid-template-columns:180px 1fr;grid-template-rows:1fr auto auto}.inspector{grid-column:1/-1;border-left:0;border-top:2px solid var(--line);display:grid;grid-template-columns:110px 1fr 1fr;gap:12px;align-items:center}.inspector-head{display:none}.progress-ring{margin:0}.timeline{grid-row:3}.learn-layout{grid-template-columns:170px 1fr}.shortcut-board{grid-column:1/-1}.lesson-panel{grid-template-columns:60px 1fr}.lesson-panel aside{grid-column:1/-1}.command-bar{left:calc(var(--rail) + (100% - var(--rail))/2)}}
@media(max-width:700px){:root{--top:62px;--rail:0px}.app{grid-template-columns:1fr;grid-template-rows:var(--top) 1fr 64px}.topbar{grid-template-columns:64px 1fr auto}.brand{border-right:2px solid var(--line)}.brand img{width:44px;height:44px}.crumb{padding:0 10px}.crumb span{display:none}.top-actions{padding-right:8px}.mode-chip{display:none}.rail{position:fixed;left:0;right:0;bottom:0;height:64px;border:0;border-top:2px solid var(--line);padding:5px;display:block;z-index:60}.rail nav{display:grid;grid-template-columns:repeat(4,1fr)}.nav-item{padding:7px}.nav-item span{font-size:1rem;width:auto}.rail-note{display:none}main{grid-column:1;grid-row:2;padding:24px 16px 120px}.launchpad-head{min-height:170px}.launchpad-head h1,.page-heading h1{font-size:2.6rem}.action-stage{gap:16px}.launch-card{min-height:210px}.launch-card h2{margin-top:38px}.recent-strip{padding-bottom:30px}.studio{display:block;border-radius:12px}.toolbox{border-right:0;border-bottom:2px solid var(--line)}.tree{max-height:150px;overflow:auto}.editor-pane{min-height:360px}.inspector{display:block;border-top:2px solid var(--line)}.timeline{display:block}.tracks{margin:14px 0;border-left:0}.review-button{width:100%}.mission-map{grid-template-columns:1fr}.mission-map>i{transform:rotate(90deg);text-align:center}.mission{width:100%}.lesson-panel{grid-template-columns:1fr;padding:20px}.lesson-no{font-size:2.5rem}.stack-picker{grid-template-columns:1fr}.stack-cards{grid-template-columns:1fr}.learn-layout{grid-template-columns:1fr}.learn-nav{display:flex;overflow:auto}.learn-nav button{white-space:nowrap}.topic-grid{grid-template-columns:1fr}.setting{display:grid;gap:18px}.segmented{overflow:auto}.command-bar{left:50%;bottom:76px;width:calc(100vw - 28px)}.command-bar kbd{display:none}.import-options{grid-template-columns:1fr}.info-drawer{top:var(--top);bottom:64px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Beginner-first navigation */
.rail{justify-content:flex-start}.rail-note{margin-top:auto}.rail-create{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:2px solid var(--line);border-radius:12px;padding:12px;margin-bottom:24px;background:var(--yellow);box-shadow:3px 3px 0 var(--line);font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.rail-create:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}.rail nav{gap:6px}.nav-label{margin:4px 12px 2px;color:var(--muted);font:500 .65rem "DM Mono",monospace;letter-spacing:.14em}.learn-label{margin-top:18px}.nav-item{display:grid;grid-template-columns:28px 1fr}.nav-item span{grid-row:1/3;align-self:center}.nav-item b,.nav-item small{display:block}.nav-item small{color:var(--muted);font-size:.7rem;line-height:1.2}.nav-item.active{background:color-mix(in srgb,var(--coral) 18%,var(--panel));box-shadow:inset 4px 0 0 var(--coral);color:var(--ink)}.nav-item.active small{color:var(--ink)}
.journey-nav{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin-bottom:22px;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--panel);overflow-x:auto}.journey-nav button{min-width:135px;display:grid;grid-template-columns:30px 1fr;border:0;border-radius:10px;padding:9px;background:transparent;text-align:left;cursor:pointer}.journey-nav button:hover,.journey-nav button.active{background:var(--cream)}.journey-nav span{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;align-self:center;border-radius:50%;background:var(--ink);color:var(--paper);font:.75rem "DM Mono",monospace}.journey-nav small{color:var(--muted)}.journey-nav i{color:var(--muted);font-style:normal}.back-to-projects{margin-bottom:12px;border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.back-to-projects:hover{color:var(--ink)}
@media(max-width:1000px){.nav-item small,.nav-label,.rail-create b{display:none}.rail-create{padding:11px 6px}.nav-item{display:flex}}
@media(max-width:700px){.rail-create,.nav-label{display:none}.nav-item{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px 3px;font-size:.72rem}.nav-item b{display:block}.nav-item small{display:none}.nav-item.active{box-shadow:inset 0 3px 0 var(--coral)}.journey-nav{grid-template-columns:repeat(7,auto);margin:-8px -4px 18px}}

/* Beginner build guide */
.project-explainer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:34px;padding:38px 0;align-items:stretch}.explainer-copy{padding:30px;border:3px solid var(--line);border-radius:18px;background:var(--yellow);box-shadow:var(--shadow)}.explainer-copy h2,.section-intro h2,.deep-dive-heading h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1;margin:10px 0 14px}.explainer-copy>p,.section-intro>p{color:var(--muted);font-size:1.02rem;line-height:1.65}.plain-example{display:grid;gap:9px;margin-top:24px;padding:18px;border:2px solid var(--line);border-radius:12px;background:var(--panel)}.plain-example span{display:flex;gap:10px;align-items:center}.plain-example span:before{content:'→';font-weight:800;color:var(--coral)}code{font-family:"DM Mono",monospace;background:var(--cream);border:1px solid var(--line);border-radius:5px;padding:2px 5px}.project-layers{display:grid;gap:10px}.project-layers div{display:grid;grid-template-columns:45px 1fr;padding:16px 18px;border:2px solid var(--line);border-radius:13px;background:var(--panel);transition:transform .18s,box-shadow .18s}.project-layers div:hover{transform:translateX(4px);box-shadow:-4px 4px 0 var(--line)}.project-layers span{grid-row:1/3;align-self:center;font:700 .72rem "DM Mono";color:var(--coral)}.project-layers small{color:var(--muted);margin-top:3px}.beginner-rule{display:flex;gap:16px;align-items:flex-start;padding:20px 24px;border:2px solid var(--line);border-radius:14px;background:var(--cream)}.beginner-rule>span{flex:0 0 38px;height:38px;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:var(--coral);color:#fff;font-weight:900}.beginner-rule p{margin:5px 0 0;color:var(--muted);line-height:1.55}.project-choice,.first-roadmap,.words-before-code{padding:58px 0 12px}.section-intro{max-width:760px}.need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.need-grid article{display:flex;flex-direction:column;min-height:260px;padding:20px;border:2px solid var(--line);border-radius:15px;background:var(--panel);transition:transform .2s,box-shadow .2s}.need-grid article:hover{transform:translateY(-4px);box-shadow:5px 5px 0 var(--line)}.need-icon{width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--line);border-radius:10px;background:var(--yellow);font-size:1.2rem}.need-grid h3{margin:24px 0 8px}.need-grid p{color:var(--muted);line-height:1.45;flex:1}.need-grid b{font-size:.72rem;letter-spacing:.12em}.need-grid small{margin:5px 0 14px}.need-grid em{width:max-content;padding:5px 8px;border-radius:6px;background:var(--cream);font:normal .69rem "DM Mono"}.roadmap-list{display:grid;gap:10px;margin-top:28px}.roadmap-list details{border:2px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}.roadmap-list details[open]{box-shadow:5px 5px 0 var(--line)}.roadmap-list summary{display:grid;grid-template-columns:42px 1fr 30px;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}.roadmap-list summary::-webkit-details-marker{display:none}.roadmap-list summary>span{width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:var(--yellow);font:700 .8rem "DM Mono"}.roadmap-list summary b,.roadmap-list summary small{display:block}.roadmap-list summary small{margin-top:3px;color:var(--muted)}.roadmap-list summary i{font-style:normal;font-size:1.2rem;transition:transform .2s}.roadmap-list details[open] summary i{transform:rotate(180deg)}.roadmap-body{padding:2px 28px 22px 74px;border-top:1px solid color-mix(in srgb,var(--line) 24%,transparent)}.roadmap-body p{line-height:1.58}.roadmap-body strong{color:var(--coral)}.command-sequence{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.command-sequence code{padding:8px 10px;background:#1d1a20;color:#f6eee8}.term-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:24px}.term-strip div{min-height:105px;padding:14px;border:2px solid var(--line);border-radius:11px;background:var(--panel)}.term-strip b,.term-strip span{display:block}.term-strip span{margin-top:8px;color:var(--muted);font-size:.82rem;line-height:1.35}.deep-dive-heading{padding-top:64px}
@media(max-width:1100px){.need-grid{grid-template-columns:repeat(2,1fr)}.term-strip{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.project-explainer{grid-template-columns:1fr}.project-layers{grid-template-columns:repeat(2,1fr)}.term-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.project-explainer{padding-top:24px}.explainer-copy{padding:22px}.project-layers,.need-grid{grid-template-columns:1fr}.need-grid article{min-height:220px}.beginner-rule{padding:16px}.roadmap-list summary{grid-template-columns:36px 1fr 22px;padding:14px 12px;gap:10px}.roadmap-list summary>span{width:34px;height:34px}.roadmap-body{padding:2px 16px 18px}.term-strip{grid-template-columns:1fr 1fr}.term-strip div{min-height:90px}.project-choice,.first-roadmap,.words-before-code{padding-top:42px}}


/* ===== Beginner teaching sector ===== */
.teaching-sector{padding:34px 0 12px}
.teaching-intro{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:end;padding:24px;border:3px solid var(--line);border-radius:18px;background:var(--yellow);box-shadow:var(--shadow)}
.teaching-intro h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.02;margin:9px 0 0;max-width:680px}
.teaching-intro p{margin:0;font-size:1rem;line-height:1.7}
.system-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;padding:22px 0}
.system-flow>i{font-style:normal;font-size:1.7rem;font-weight:900;color:var(--muted)}
.flow-chip{display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;border:2px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px}
.flow-chip span{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:900}
.flow-chip b{font-size:1rem}.flow-chip small{color:var(--muted);margin-top:2px}
.teaching-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.teaching-card{border:3px solid var(--line);border-radius:18px;background:var(--panel);padding:22px;box-shadow:4px 4px 0 var(--line);display:flex;flex-direction:column;min-width:0}
.frontend-card{border-top:8px solid var(--coral)}.backend-card{border-top:8px solid var(--blue)}.database-card{border-top:8px solid var(--yellow)}
.teach-card-head{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.teach-number{font:800 2.1rem/1 "Space Grotesk";opacity:.25}
.teach-card-head h2{font-size:1.35rem;line-height:1.1;margin:5px 0 0}
.plain-definition{font-size:.94rem;line-height:1.65;color:var(--muted);margin:20px 0}
.learn-this{border-top:2px solid var(--line);padding-top:16px}
.learn-this>b{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.learn-this ol{list-style:none;padding:0;margin:13px 0 0;display:grid;gap:10px;counter-reset:teach}
.learn-this li{display:grid;grid-template-columns:1fr;gap:3px;padding-left:27px;position:relative}
.learn-this li:before{counter-increment:teach;content:counter(teach);position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:.65rem;font-weight:900}
.learn-this li strong{font-size:.9rem}.learn-this li span{font-size:.79rem;line-height:1.45;color:var(--muted)}
.tiny-example{margin-top:auto;padding-top:18px;display:grid;gap:7px}
.tiny-example span{font:700 .65rem "DM Mono";letter-spacing:.1em;color:var(--muted)}
.tiny-example code{white-space:normal;border:2px dashed var(--line);border-radius:9px;padding:10px;background:var(--paper);font-size:.77rem;line-height:1.45}
.learning-roadmap{margin-top:22px;display:grid;grid-template-columns:280px 1fr;gap:28px;padding:24px;border:3px solid var(--line);border-radius:18px;background:var(--paper)}
.learning-roadmap h2{font-size:1.8rem;margin:7px 0 9px}.learning-roadmap p{margin:0;color:var(--muted);line-height:1.55}
.roadmap-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.roadmap-steps li{border:2px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center}
.roadmap-steps li>span{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#fff;font-weight:900}
.roadmap-steps b{font-size:.9rem}.roadmap-steps small{color:var(--muted);line-height:1.3}
.reference-divider{display:flex;align-items:center;gap:14px;margin:40px 0 2px;border-top:2px solid var(--line);padding-top:25px}
.reference-divider span{font:700 .65rem "DM Mono";letter-spacing:.12em;color:var(--muted)}.reference-divider b{font-size:1.35rem}
@media(max-width:1050px){
  .teaching-cards{grid-template-columns:1fr}
  .learning-roadmap{grid-template-columns:1fr}
}
@media(max-width:760px){
  .teaching-intro{grid-template-columns:1fr;gap:15px;padding:18px}
  .system-flow{grid-template-columns:1fr}
  .system-flow>i{transform:rotate(90deg);justify-self:center;line-height:.7}
  .teaching-card{padding:18px}
  .roadmap-steps{grid-template-columns:1fr}
}


/* ===== Localhost-first milestone curriculum ===== */
.localhost-path{padding:34px 0 12px}
.teacher-note{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:end;padding:26px;border:3px solid var(--line);border-radius:18px;background:var(--yellow);box-shadow:var(--shadow)}
.teacher-note h2{font-size:clamp(2rem,4vw,3.2rem);line-height:.98;margin:8px 0 0;letter-spacing:-.04em}
.teacher-note p{margin:0;font-size:1.03rem;line-height:1.7}
.localhost-explainer{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;align-items:stretch;margin:22px 0}
.localhost-machine{border:3px solid var(--line);border-radius:18px;background:var(--ink);padding:14px;box-shadow:var(--shadow)}
.mini-browser-bar{height:42px;border-radius:10px 10px 0 0;background:#eee9df;display:flex;align-items:center;gap:7px;padding:0 11px;color:#5d5963}
.mini-browser-bar i{width:9px;height:9px;border-radius:50%;background:#aaa}.mini-browser-bar i:first-child{background:var(--coral)}.mini-browser-bar i:nth-child(2){background:var(--yellow)}.mini-browser-bar i:nth-child(3){background:#78c9b7}
.mini-browser-bar span{margin-left:8px;background:#fff;border:1px solid #c9c4ba;border-radius:7px;padding:6px 10px;font:10px "DM Mono";flex:1}
.mini-browser-page{min-height:245px;background:var(--paper);border-radius:0 0 10px 10px;padding:34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.mini-browser-page b{font-size:2rem;letter-spacing:-.04em}.mini-browser-page p{color:var(--muted);margin:8px 0 0}
.mini-local-badge{font:700 9px "DM Mono";letter-spacing:.14em;background:var(--yellow);border:2px solid var(--line);padding:6px 8px;margin-bottom:15px}
.localhost-copy{border:3px solid var(--line);border-radius:18px;background:var(--panel);padding:28px}
.localhost-copy h2{font-size:2rem;line-height:1.05;margin:9px 0 15px}.localhost-copy>p{line-height:1.7;color:var(--muted)}
.localhost-compare{display:grid;gap:9px;margin-top:22px}.localhost-compare div{border:2px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--paper)}
.localhost-compare span{display:block;font:700 9px "DM Mono";letter-spacing:.1em;color:var(--coral);margin-bottom:4px}.localhost-compare b{font-size:.88rem}
.teacher-warning{border:3px solid var(--line);border-radius:16px;padding:20px;background:var(--paper);margin-bottom:34px}
.teacher-warning>span{display:block;font:800 10px "DM Mono";letter-spacing:.13em;color:var(--coral);margin-bottom:13px}
.constraint-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.constraint-grid p{margin:0;border-left:4px solid var(--line);padding:9px 12px;background:var(--panel);font-size:.9rem;line-height:1.5}
.constraint-grid code,.teacher-instruction code,.success-gate code{font-family:"DM Mono";font-size:.86em}
.teacher-sequence{position:relative}.sequence-head{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin:0 0 18px}
.sequence-head h2{font-size:2.2rem;margin:7px 0 0}.sequence-head p{margin:0;color:var(--muted);line-height:1.6}
.milestone{display:grid;grid-template-columns:68px 1fr;gap:14px;position:relative}
.milestone-rail{display:flex;flex-direction:column;align-items:center}.milestone-rail span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--line);background:var(--paper);font:800 1rem "DM Mono";z-index:2}
.milestone-current .milestone-rail span{background:var(--coral);color:#fff}.milestone-rail i{width:3px;min-height:44px;flex:1;background:var(--line)}
.milestone-main{border:3px solid var(--line);border-radius:18px;background:var(--panel);padding:24px;margin-bottom:16px;box-shadow:4px 4px 0 var(--line)}
.milestone-current .milestone-main{border-color:var(--coral);box-shadow:5px 5px 0 var(--coral)}
.milestone-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.milestone-top h3{font-size:1.7rem;margin:5px 0 0;letter-spacing:-.025em}
.status-pill{font:800 9px "DM Mono";letter-spacing:.1em;border:2px solid var(--line);border-radius:999px;padding:7px 9px;white-space:nowrap}.status-pill.current{background:var(--coral);color:#fff;border-color:var(--coral)}.status-pill.locked{background:var(--paper);color:var(--muted)}
.milestone-purpose{font-size:.98rem;line-height:1.65;color:var(--muted);max-width:880px;margin:18px 0}
.teacher-instruction,.must-learn{border:2px solid var(--line);border-radius:12px;background:var(--paper);padding:15px 17px;margin:14px 0}
.teacher-instruction>span,.must-learn>span,.success-gate>span{display:block;font:800 9px "DM Mono";letter-spacing:.11em;color:var(--coral);margin-bottom:6px}
.teacher-instruction p,.must-learn p{margin:0;line-height:1.55}
.milestone-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.milestone-steps>div{border:2px solid var(--line);border-radius:11px;padding:13px;background:var(--paper)}.milestone-steps b{font-size:.9rem}.milestone-steps p{font-size:.8rem;color:var(--muted);line-height:1.45;margin:6px 0 0}
.success-gate{border:3px solid var(--line);border-radius:12px;padding:16px;background:var(--yellow);margin-top:16px}.success-gate p{margin:0 0 8px;line-height:1.55}.success-gate b{font-size:.9rem}.success-gate.compact{background:var(--paper);border-style:dashed}
.local-to-online{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin:18px 0}.local-to-online>div{border:2px solid var(--line);border-radius:11px;background:var(--paper);padding:13px;display:grid;grid-template-columns:30px 1fr;column-gap:8px}.local-to-online div>span{grid-row:1/3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:800}.local-to-online b{font-size:.86rem}.local-to-online small{color:var(--muted);line-height:1.35}.local-to-online>i{font-style:normal;font-weight:900;color:var(--muted)}
.teacher-rule{border-left:5px solid var(--coral);padding:13px 16px;background:var(--paper);line-height:1.55}
@media(max-width:980px){
  .teacher-note,.localhost-explainer,.sequence-head{grid-template-columns:1fr}
  .milestone-steps{grid-template-columns:repeat(2,1fr)}
  .local-to-online{grid-template-columns:1fr}.local-to-online>i{transform:rotate(90deg);justify-self:center}
}
@media(max-width:680px){
  .teacher-note,.localhost-copy,.milestone-main{padding:18px}
  .constraint-grid,.milestone-steps{grid-template-columns:1fr}
  .milestone{grid-template-columns:46px 1fr;gap:8px}.milestone-rail span{width:40px;height:40px}
  .milestone-top{display:grid}.status-pill{justify-self:start}
  .mini-browser-page{min-height:190px;padding:22px}.mini-browser-page b{font-size:1.5rem}
}


/* ===== First Comet VS Code workspace ===== */
.vscode-heading{padding-bottom:26px}
.vscode-permission{display:grid;grid-template-columns:1.25fr .95fr;gap:24px;align-items:start;margin:28px 0 20px;padding:24px;border:3px solid var(--line);border-radius:18px;background:var(--yellow);box-shadow:var(--shadow)}
.vscode-permission h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.02;margin:8px 0 12px;letter-spacing:-.035em}
.vscode-permission p{line-height:1.6;margin:0}
.permission-points{display:grid;gap:9px}
.permission-points>div{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--paper)}
.permission-points>div>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:900;flex:none}
.permission-points p{display:grid;gap:2px}.permission-points small{color:var(--muted)}
.permission-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.permission-support{grid-column:1/-1!important;font-size:.82rem;color:var(--muted)}
.vscode-shell{margin:18px 0 30px;border:3px solid #23212a;border-radius:14px;overflow:hidden;background:#15151a;color:#f3f0f7;box-shadow:8px 8px 0 rgba(0,0,0,.18);min-height:760px}
.vscode-bar{height:58px;display:flex;align-items:center;gap:16px;padding:0 14px;background:#232229;border-bottom:1px solid #37353e}
.vscode-brand{display:flex;align-items:center;gap:10px;min-width:0}.vscode-brand>span{width:32px;height:32px;border-radius:8px;background:#7657ff;display:grid;place-items:center;font-weight:900}
.vscode-brand div{display:grid;min-width:0}.vscode-brand b{font:700 10px "DM Mono";letter-spacing:.08em}.vscode-brand small{color:#a9a4b4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.vscode-save-state{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.78rem;color:#bbb6c7;white-space:nowrap}.vscode-save-state i{width:8px;height:8px;border-radius:50%;background:#7f7a88}.vscode-save-state.saving i{background:#f0bf4f}.vscode-save-state.saved i{background:#67c6a6}.vscode-save-state.error i{background:#ff6f7c}
.vscode-bar-actions{display:flex;gap:7px}.vscode-bar-actions button,.vscode-pane-title button{border:1px solid #4b4854;background:#2e2d35;color:#eee;border-radius:6px;padding:6px 9px;cursor:pointer}.vscode-bar-actions button:hover,.vscode-pane-title button:hover{background:#3a3843}
.vscode-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 310px;grid-template-rows:minmax(500px,1fr) 260px;min-height:700px}
.vscode-explorer{grid-row:1/3;background:#1b1a20;border-right:1px solid #35333b;min-width:0}
.vscode-pane-title{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #34323a;font:700 9px "DM Mono";letter-spacing:.1em;color:#c9c4d0}.vscode-pane-title>div{display:flex;gap:5px}
.vscode-folder-label{padding:9px 11px;background:#25242b;border-bottom:1px solid #34323a;font:700 9px "DM Mono";letter-spacing:.08em;color:#c6c1cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vscode-tree{padding:7px 0;max-height:650px;overflow:auto}.vscode-empty-tree{display:grid;gap:5px;padding:18px 12px;color:#8d8897;font-size:.78rem;line-height:1.4}
.vscode-file,.vscode-folder-row{width:100%;border:0;background:transparent;color:#d7d2dd;text-align:left;padding:6px 10px;display:flex;align-items:center;gap:7px;font:12px "DM Mono";cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vscode-file:hover,.vscode-folder-row:hover{background:#2b2931}.vscode-file.active{background:#34313c;color:#fff}.vscode-file .file-icon{font-size:10px;color:#8ea5ff}.vscode-file[data-ext="html"] .file-icon{color:#ff9b7a}.vscode-file[data-ext="css"] .file-icon{color:#78a8ff}.vscode-file[data-ext="js"] .file-icon{color:#f5d35f}
.vscode-editor-area{background:#16161b;display:grid;grid-template-rows:42px minmax(0,1fr) 24px;min-width:0}
.vscode-tabs{display:flex;align-items:center;background:#222127;border-bottom:1px solid #34323b;min-width:0}.vscode-tab{height:100%;display:flex;align-items:center;gap:8px;padding:0 14px;background:#18181d;border-right:1px solid #34323b;font:12px "DM Mono";min-width:140px}.vscode-tab i{width:7px;height:7px;border-radius:50%}.vscode-tab i.unsaved{background:#f1c75f}.vscode-path{margin-left:12px;color:#7f7a88;font:10px "DM Mono";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vscode-editor-wrap{position:relative;min-height:0}.monaco-host,.fallback-code-editor{position:absolute;inset:0;width:100%;height:100%}.fallback-code-editor{display:none;resize:none;border:0;outline:0;background:#17171c;color:#efedf2;padding:16px;font:13px/1.6 Consolas,"Courier New",monospace}
.editor-welcome{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:#aba6b3;pointer-events:none}.editor-welcome>span{font-size:3rem;color:#7657ff}.editor-welcome h2{color:#f1eef5;margin:10px 0 7px}.editor-welcome p{margin:0;max-width:420px;line-height:1.55}
.vscode-statusbar{height:24px;background:#5c46d8;display:flex;align-items:center;gap:18px;padding:0 10px;font:10px "DM Mono";color:white}
.comet-teacher{grid-row:1/2;background:#201d2b;border-left:1px solid #35313f;padding:16px;overflow:auto}
.teacher-panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.teacher-online{font:800 9px "DM Mono";color:#74d6b6}
.teacher-milestone{display:grid;gap:5px;margin:16px 0;padding:12px;border:1px solid #494351;border-radius:10px;background:#292532}.teacher-milestone small{font:700 8px "DM Mono";letter-spacing:.1em;color:#aaa3b3}.teacher-milestone b{font-size:.96rem;line-height:1.35}
.teacher-message{border-left:4px solid #7657ff;padding:12px 13px;background:#292532;border-radius:0 10px 10px 0}.teacher-message p{margin:0;color:#ded9e4;line-height:1.55;font-size:.9rem}
.teacher-checks{display:grid;gap:8px;margin:14px 0}.teacher-checks>div{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid #403b48;border-radius:9px;background:#25222d}.teacher-checks>div>span{color:#8d8797}.teacher-checks p{margin:0;display:grid}.teacher-checks b{font-size:.82rem}.teacher-checks small{font-size:.72rem;color:#9892a1;margin-top:2px}.teacher-checks .done>span{color:#6ed2b0}.teacher-checks .done{border-color:#3c695b}
.teacher-actions{display:grid;gap:8px}.teacher-actions .secondary{background:#302c38;color:#efebf2;border-color:#514b5c}
.teacher-hint{margin-top:12px;padding:12px;border:2px dashed #7657ff;border-radius:10px;background:#18161e;color:#ded9e4;font-size:.84rem;line-height:1.55}
.vscode-preview-pane{grid-column:2/4;background:#111115;border-top:1px solid #35333b;display:grid;grid-template-rows:48px 1fr;min-width:0}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 14px;background:#222127;border-bottom:1px solid #34323b}.preview-head>div{display:grid;gap:2px}.preview-head b{font-size:.8rem}.preview-head>span{font:10px "DM Mono";color:#a9a4b4}
#localPreviewFrame{width:100%;height:100%;border:0;background:white}
body.dark .vscode-permission{color:var(--ink)}
@media(max-width:1150px){
  .vscode-grid{grid-template-columns:210px minmax(0,1fr);grid-template-rows:minmax(480px,1fr) auto 240px}
  .comet-teacher{grid-column:1/3;grid-row:2;padding:16px;border-left:0;border-top:1px solid #35313f}
  .vscode-preview-pane{grid-column:1/3;grid-row:3}
}
@media(max-width:760px){
  .vscode-permission{grid-template-columns:1fr;padding:18px}.permission-actions{grid-column:1}.permission-support{grid-column:1!important}
  .vscode-shell{min-height:900px}.vscode-bar{height:auto;min-height:58px;flex-wrap:wrap;padding:10px}.vscode-save-state{margin-left:0}.vscode-bar-actions{margin-left:auto}
  .vscode-grid{grid-template-columns:1fr;grid-template-rows:180px 430px auto 240px}
  .vscode-explorer{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid #35333b}.vscode-tree{max-height:125px}
  .vscode-editor-area{grid-column:1;grid-row:2}.comet-teacher{grid-column:1;grid-row:3}.vscode-preview-pane{grid-column:1;grid-row:4}
  .vscode-statusbar{overflow:auto}.vscode-path{display:none}
}


/* ===== Experience modes: genuinely different paths ===== */
.beginner-only,.practice-only,.pro-only{display:none!important}
body[data-level="Beginner"] .beginner-only{display:block!important}
body[data-level="Practising"] .practice-only{display:block!important}
body[data-level="Pro"] .pro-only{display:block!important}

body[data-level="Beginner"] .learn-sections [data-learn-section="course"],
body[data-level="Beginner"] .learn-sections [data-learn-section="reference"]{display:none!important}

body[data-level="Pro"] .learn-sections [data-learn-section="localhost"]{display:none!important}
body[data-level="Pro"] #view-guide .project-explainer,
body[data-level="Pro"] #view-guide .beginner-rule,
body[data-level="Pro"] #view-guide .project-choice{display:none!important}
body[data-level="Pro"] #view-guide .page-heading p{max-width:760px}
body[data-level="Pro"] .teacher-note,
body[data-level="Pro"] .localhost-explainer,
body[data-level="Pro"] .teacher-warning{display:none!important}

/* ===== Native VS Code Web hand-off ===== */
.native-vscode-layout{display:grid;grid-template-columns:1fr;gap:18px;margin:20px 0 22px}
.native-vscode-card,.vscode-teacher-companion{border:3px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);padding:24px}
.native-vscode-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:360px;background:linear-gradient(145deg,var(--panel),var(--cream))}
.native-vscode-badge{display:inline-flex;padding:7px 9px;border:2px solid var(--line);border-radius:999px;background:var(--yellow);color:#171319;font:800 9px "DM Mono";letter-spacing:.1em}
.native-vscode-card h2{font-size:clamp(2rem,4vw,3.2rem);line-height:.98;letter-spacing:-.045em;margin:18px 0 14px}
.native-vscode-card p{max-width:620px;line-height:1.7;color:var(--muted);font-size:1rem}
.native-vscode-launch{margin-top:16px;min-height:50px;padding:0 18px;font-size:1rem}
.native-vscode-card>small{display:block;margin-top:12px;color:var(--muted);line-height:1.5}
.vscode-teacher-companion{background:var(--ink);color:var(--paper);box-shadow:none;max-width:none}
.vscode-teacher-companion .eyebrow{color:#d8d0dc}
.teacher-step{margin:16px 0;padding:16px;border:1px solid #514a56;border-radius:12px;background:#252129}
.teacher-step>span{display:block;color:#f1c95c;font:800 9px "DM Mono";letter-spacing:.11em;margin-bottom:7px}
.teacher-step h3{font-size:1.3rem;margin:0 0 10px;color:#fff}
.teacher-step p,.teacher-step li{color:#ddd5df;line-height:1.55}
.teacher-step ol{padding-left:20px;margin:10px 0}
.teacher-step code{background:#151218;color:#fff;padding:2px 5px;border-radius:4px}
.vscode-help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.vscode-help-grid button{border:1px solid #524b57;border-radius:10px;background:#2b2630;color:#f7f0f8;padding:10px;text-align:left;cursor:pointer}
.vscode-help-grid button:hover{background:#37303c;border-color:#817786}
.vscode-help-grid b,.vscode-help-grid small{display:block}.vscode-help-grid b{font-size:.8rem}.vscode-help-grid small{margin-top:3px;color:#aaa0ad;font-size:.68rem}
.vscode-help-answer{margin-top:10px;min-height:76px;padding:12px 13px;border-left:4px solid #f1c95c;background:#18151b;border-radius:0 9px 9px 0;color:#e9e0eb;font-size:.85rem;line-height:1.55}
.native-vscode-path{border:3px solid var(--line);border-radius:16px;background:var(--yellow);color:#171319;padding:18px;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center}
body[data-level="Beginner"] .native-vscode-path{display:grid!important}
.native-vscode-path>.eyebrow{grid-column:1/-1;margin-bottom:4px}
.native-vscode-path>div{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center}
.native-vscode-path>div>b{width:30px;height:30px;border:2px solid #171319;border-radius:50%;display:grid;place-items:center}
.native-vscode-path p{display:grid;margin:0}.native-vscode-path small{margin-top:2px;color:#4e4944;line-height:1.3}
.native-vscode-path>i{font-style:normal;font-weight:900}

/* ===== Dark mode visibility and readability pass ===== */
.dark main,.dark .view,.dark .setting,.dark .project-card,.dark .project-subject-card,.dark .course-track-brief{color:var(--ink)}
.dark p,.dark small{color:var(--muted)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark b,.dark strong,.dark label{color:var(--ink)}
.dark input,.dark select,.dark textarea{background:#1a161b!important;color:#f8f2e8!important;border-color:var(--line)!important}
.dark input::placeholder,.dark textarea::placeholder{color:#9f949a!important}
.dark code:not(.vscode-teacher-companion code),.dark kbd{color:#f8f2e8}
.dark .page-heading p,.dark .section-intro p,.dark .milestone-purpose,.dark .course-start-note p,.dark .project-path-intro p{color:#d6ccd0}
.dark .nav-item small,.dark .rail-note small,.dark .project-card small,.dark .setting p{color:#c9bec3}
.dark .journey-nav,.dark .recent-strip,.dark .settings-grid,.dark .project-path-intro,.dark .project-subject-card{border-color:var(--line)}
.dark .teacher-note,.dark .success-gate,.dark .mini-local-badge,.dark .rail-create,.dark .native-vscode-path{color:#171319}
.dark .teacher-note p,.dark .success-gate p,.dark .native-vscode-path p,.dark .native-vscode-path small{color:#3f3936}
.dark .mini-browser-bar{background:#e7e0d5;color:#302b2f}
.dark .mini-browser-page{background:#211d22;color:#f8f2e8}
.dark .localhost-compare div,.dark .teacher-warning,.dark .constraint-grid p,.dark .teacher-instruction,.dark .must-learn,.dark .success-gate.compact{background:#211d22;color:#f8f2e8}
.dark .localhost-compare b,.dark .teacher-instruction p,.dark .must-learn p,.dark .constraint-grid p{color:#f2e9ec}
.dark .course-code,.dark .course-table-wrap,.dark .plain-example{border-color:var(--line)}
.dark a{color:#cbbcff}
.dark .secondary{background:#2a2429;color:#f8f2e8;border-color:var(--line)}
.dark .icon-button,.dark .mode-chip{background:#211d22;color:#f8f2e8;border-color:var(--line)}
.dark .command-bar{background:#211d22;color:#f8f2e8;border-color:var(--line)}
.dark .native-vscode-card{background:linear-gradient(145deg,#211d22,#2c252b)}
.dark .native-vscode-card h2{color:#f8f2e8}
.dark .native-vscode-card p,.dark .native-vscode-card>small{color:#d1c6ca}

@media(max-width:900px){
  .native-vscode-layout{grid-template-columns:1fr}
  .native-vscode-path{grid-template-columns:1fr}
  .native-vscode-path>i{transform:rotate(90deg);justify-self:center}
}
@media(max-width:620px){
  .native-vscode-card,.vscode-teacher-companion{padding:18px}
  .vscode-help-grid{grid-template-columns:1fr}
}

@keyframes introLogoIn{from{opacity:0;transform:scale(.72) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes introOrbitIn{from{opacity:0;transform:scale(.75)}to{opacity:.3}}
@keyframes introStarIn{from{opacity:0;transform:scale(0) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes introTextIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes introAutoExit{to{opacity:0;visibility:hidden;pointer-events:none}}


/* Dark mode contrast guard for bright yellow surfaces */
.dark .brand,
.dark .rail-create,
.dark .launch-card.yellow,
.dark .project-card .project-badge,
.dark .project-avatar,
.dark .tiny-comet,
.dark .change-block.edit,
.dark .mission.active,
.dark .shortcut-board,
.dark .segmented .active,
.dark .explainer-copy,
.dark .need-icon,
.dark .roadmap-list summary > span,
.dark .teaching-intro,
.dark .teacher-note,
.dark .mini-local-badge,
.dark .success-gate:not(.compact),
.dark .vscode-permission,
.dark .native-vscode-badge,
.dark .native-vscode-path {
  color:#171319;
}
.dark .mission.active small,
.dark .explainer-copy > p,
.dark .teaching-intro p,
.dark .teacher-note p,
.dark .success-gate:not(.compact) p,
.dark .vscode-permission p,
.dark .shortcut-board,
.dark .shortcut-board * {
  color:#171319 !important;
  opacity:1 !important;
}
.dark .info-drawer {
  color:#171319;
}
.dark .info-drawer .fact,
.dark .info-drawer .fact * {
  color:var(--ink);
}


/* First Comet semantic color system */
:root{
  --red-soft:#ffd9d1;
  --blue-soft:#d7e0e6;
  --yellow-soft:#fff0a8;
  --green-soft:#dff0d9;
  --pink-soft:#f7d8ee;
  --blue-deep:#2f506b;
  --red-deep:#b92821;
}
.dark{
  --red-soft:#4b2523;
  --blue-soft:#293845;
  --yellow-soft:#4a3c17;
  --green-soft:#263f2a;
  --pink-soft:#4b2d43;
  --blue-deep:#91a9bc;
  --red-deep:#ff8174;
}

/* Color should communicate where you are */
.nav-item span{
  display:grid;
  place-items:center;
  min-width:28px;
  height:28px;
  border-radius:8px;
}
.nav-item[data-view="home"] span{background:var(--yellow-soft)}
.nav-item[data-view="guide"] span{background:var(--red-soft)}
.nav-item[data-view="vscode"] span{background:var(--blue-soft)}
.nav-item[data-view="learn"] span{background:var(--blue-soft)}
.nav-item[data-view="careers"] span{background:var(--pink-soft)}
.nav-item[data-view="cv"] span{background:var(--green-soft)}
.nav-item[data-view="settings"] span{background:var(--cream)}

.nav-item[data-view="guide"].active,
.nav-item[data-view="home"].active{box-shadow:inset 4px 0 0 var(--coral)}
.nav-item[data-view="vscode"].active,
.nav-item[data-view="learn"].active{box-shadow:inset 4px 0 0 var(--blue)}
.nav-item[data-view="careers"].active{box-shadow:inset 4px 0 0 var(--pink)}
.nav-item[data-view="cv"].active{box-shadow:inset 4px 0 0 var(--green)}

.page-heading{
  position:relative;
}
.page-heading:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:78px;
  height:5px;
  border-radius:999px;
  background:var(--coral);
}
#view-vscode .page-heading:before,
#view-learn .page-heading:before{background:var(--blue)}
#view-careers .page-heading:before{background:var(--pink)}
#view-cv .page-heading:before{background:var(--green)}

.primary{
  background:var(--coral);
}
.primary:hover{
  background:var(--red);
}
.secondary:hover{
  background:var(--blue-soft);
}
.icon-button:hover,
.mode-chip:hover{
  background:var(--blue-soft);
}
input:focus,
textarea:focus,
select:focus{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* Small accents used across older screens */
.topic-card:nth-child(4n+1){border-top:4px solid var(--blue)}
.topic-card:nth-child(4n+2){border-top:4px solid var(--coral)}
.topic-card:nth-child(4n+3){border-top:4px solid var(--yellow)}
.topic-card:nth-child(4n){border-top:4px solid var(--pink)}
.setting:nth-child(odd){border-left:4px solid var(--blue)}
.setting:nth-child(even){border-left:4px solid var(--coral)}
.mission:nth-of-type(4n+1){border-top-color:var(--blue)}
.mission:nth-of-type(4n+2){border-top-color:var(--coral)}
.mission:nth-of-type(4n+3){border-top-color:var(--yellow)}
.mission:nth-of-type(4n){border-top-color:var(--green)}

.dark .nav-item span{
  color:var(--ink);
}
.dark .nav-item[data-view="home"] span,
.dark .nav-item[data-view="guide"] span,
.dark .nav-item[data-view="vscode"] span,
.dark .nav-item[data-view="learn"] span,
.dark .nav-item[data-view="careers"] span,
.dark .nav-item[data-view="cv"] span{
  border:1px solid color-mix(in srgb,var(--line) 55%,transparent);
}
@media(max-width:700px){
  .nav-item[data-view].active{box-shadow:inset 0 3px 0 var(--coral)}
  .nav-item[data-view="vscode"].active,
  .nav-item[data-view="learn"].active{box-shadow:inset 0 3px 0 var(--blue)}
  .nav-item[data-view="careers"].active{box-shadow:inset 0 3px 0 var(--pink)}
  .nav-item[data-view="cv"].active{box-shadow:inset 0 3px 0 var(--green)}
}


/* Navigation typography: clearer at desktop scale */
.rail .nav-label{
  font-size:.72rem;
  letter-spacing:.12em;
}
.nav-item b{
  font-size:.96rem;
}
.nav-item small{
  font-size:.74rem;
  line-height:1.3;
}
.rail-create{
  font-size:.9rem;
}
.crumb{
  font-size:.92rem;
}
.crumb span,
.crumb b{
  font-size:.9rem;
}
.mode-chip,
.icon-button{
  font-size:.86rem;
}
.command-bar{
  font-size:.9rem;
}
.command-bar span:nth-child(2){
  font-size:.88rem;
}
@media(max-width:1000px){
  .nav-item b,
  .nav-item small{
    font-size:inherit;
  }
}


/* Vintage command palette */
.palette{
  background:color-mix(in srgb,var(--ink) 42%,transparent);
  backdrop-filter:blur(2px);
}
.palette-box{
  position:relative;
  width:min(720px,calc(100vw - 36px));
  margin-top:12vh;
  align-self:start;
  overflow:hidden;
  border:2px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:8px 8px 0 var(--line);
}
.palette-box:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:var(--blue);
}
.palette-close{
  position:absolute;
  z-index:4;
  right:12px;
  top:11px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:2px solid var(--line);
  border-radius:50%;
  background:var(--yellow);
  color:#171319;
  box-shadow:2px 2px 0 var(--line);
  cursor:pointer;
  font-size:1.25rem;
  font-weight:800;
  line-height:1;
}
.palette-close:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--line);
}
.palette-close:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

.palette-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 58px 18px 20px;
  border-bottom:2px solid var(--line);
  background:var(--cream);
}
.palette-search>span{
  color:var(--blue-deep);
  font-size:1.1rem;
}
.palette-search input{
  flex:1;
  min-width:0;
  border:2px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--ink);
  padding:10px 12px;
  outline:0;
  font-size:.95rem;
}
.palette-search input::placeholder{
  color:var(--muted);
}
.palette-search input:focus{
  border-color:var(--blue);
  box-shadow:3px 3px 0 var(--blue-soft);
}
.palette-search kbd,
.palette-results kbd{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:1px 1px 0 var(--line);
}

.palette-results{
  display:grid;
  gap:4px;
  padding:12px 12px 14px 18px;
  background:var(--paper);
}
.palette-results button{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.palette-results button:hover,
.palette-results button:focus-visible{
  border-color:var(--line);
  background:var(--blue-soft);
  outline:0;
}
.palette-results button:nth-child(3):hover,
.palette-results button:nth-child(3):focus-visible{
  background:var(--red-soft);
}
.palette-results button:nth-child(5):hover,
.palette-results button:nth-child(5):focus-visible{
  background:var(--green-soft);
}
.palette-results button>span{
  width:30px;
  color:var(--blue-deep);
  font-size:1.15rem;
}
.palette-results button:nth-child(3)>span{color:var(--coral)}
.palette-results button:nth-child(5)>span{color:var(--green)}
.palette-results div{
  min-width:0;
}
.palette-results b{
  display:block;
  font-size:.98rem;
}
.palette-results small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.82rem;
}
.dark .palette-box,
.dark .palette-results{
  background:var(--panel);
  color:var(--ink);
}
.dark .palette-search{
  background:var(--cream);
}
.dark .palette-search input{
  background:var(--paper);
  color:var(--ink);
}
.dark .palette-results button{
  color:var(--ink);
}
@media(max-width:700px){
  .palette-box{
    margin-top:6vh;
  }
  .palette-search{
    padding:16px 54px 16px 16px;
  }
  .palette-results{
    padding:10px 10px 12px 14px;
  }
  .palette-results button{
    grid-template-columns:30px 1fr;
  }
  .palette-results button kbd{
    display:none;
  }
}


/* Global First Comet search */
.global-search{
  position:relative;
  width:min(310px,26vw);
  height:42px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:0 9px 0 11px;
  border:2px solid var(--line);
  border-radius:11px;
  background:var(--paper);
  box-shadow:2px 2px 0 transparent;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.global-search:focus-within{
  border-color:var(--blue);
  box-shadow:3px 3px 0 var(--line);
  transform:translate(-1px,-1px);
}
.global-search-icon{
  color:var(--blue-deep);
  font-size:1.1rem;
  line-height:1;
}
.global-search input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
}
.global-search input::placeholder{
  color:var(--muted);
  opacity:.9;
}
.global-search>kbd{
  display:grid;
  place-items:center;
  min-width:24px;
  height:23px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--cream);
  color:var(--muted);
  box-shadow:1px 1px 0 var(--line);
  font:700 .68rem "DM Mono",monospace;
}
.global-search-results{
  position:absolute;
  z-index:120;
  top:calc(100% + 9px);
  right:0;
  width:min(470px,calc(100vw - 28px));
  max-height:min(560px,72vh);
  overflow:auto;
  padding:8px;
  border:2px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  box-shadow:7px 7px 0 var(--line);
}
.global-search-results[hidden]{display:none!important}
.global-search-results button{
  width:100%;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 24px;
  gap:10px;
  align-items:center;
  padding:11px 10px;
  border:1.5px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.global-search-results button:hover,
.global-search-results button.active,
.global-search-results button[aria-selected="true"]{
  border-color:var(--line);
  background:var(--blue-soft);
}
.global-result-mark{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:var(--yellow);
  color:#171319;
  font:800 .72rem "DM Mono",monospace;
}
.global-result-copy{
  min-width:0;
}
.global-result-copy b,
.global-result-copy small,
.global-result-copy em{
  display:block;
}
.global-result-copy b{
  font-size:.9rem;
  line-height:1.25;
}
.global-result-copy small{
  margin-top:2px;
  color:var(--blue-deep);
  font:700 .66rem "DM Mono",monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.global-result-copy em{
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:.76rem;
  font-style:normal;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.global-result-go{
  color:var(--muted);
  font-size:.9rem;
}
.global-search-empty{
  display:grid;
  gap:4px;
  padding:18px;
  border:1.5px dashed var(--line);
  border-radius:9px;
  background:var(--panel);
}
.global-search-empty b{font-size:.9rem}
.global-search-empty span{
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}
.global-search-arrival{
  animation:globalSearchArrival 1.7s ease both;
}
@keyframes globalSearchArrival{
  0%,100%{outline:0 solid transparent;outline-offset:0}
  18%,68%{outline:4px solid var(--yellow);outline-offset:5px}
}
.dark .global-search,
.dark .global-search-results{
  background:var(--panel);
}
.dark .global-search>kbd{
  background:var(--cream);
}
@media(max-width:1180px){
  .global-search{width:220px}
  .global-search input{font-size:.82rem}
}
@media(max-width:900px){
  .global-search{width:190px}
  .top-actions .command-trigger{display:none}
  .global-result-copy em{white-space:normal}
}
@media(max-width:700px){
  .topbar{
    grid-template-columns:64px 1fr;
  }
  .crumb{display:none}
  .top-actions{
    grid-column:2;
    width:100%;
    min-width:0;
    justify-content:flex-end;
    padding:0 8px;
  }
  .global-search{
    flex:1 1 170px;
    width:auto;
    max-width:none;
  }
  .global-search>kbd{display:none}
  .top-actions #infoBtn{display:none}
  .global-search-results{
    position:fixed;
    top:70px;
    left:10px;
    right:10px;
    width:auto;
    max-height:66vh;
  }
}
@media(prefers-reduced-motion:reduce){
  .global-search,
  .global-search-arrival{
    transition:none!important;
    animation:none!important;
  }
}


/* Desktop sidebar must scroll independently when the viewport is short */
@media(min-width:701px){
  .rail{
    min-height:0;
    max-height:calc(100vh - var(--top));
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--muted) transparent;
  }
  .rail-create,
  .rail nav,
  .rail-note{
    flex-shrink:0;
  }
  .rail-note{
    margin-top:24px;
    padding-bottom:6px;
  }
  .rail::-webkit-scrollbar{
    width:8px;
  }
  .rail::-webkit-scrollbar-track{
    background:transparent;
  }
  .rail::-webkit-scrollbar-thumb{
    border:2px solid var(--panel);
    border-radius:999px;
    background:var(--muted);
  }
  .rail::-webkit-scrollbar-thumb:hover{
    background:var(--blue-deep);
  }
}

/* Mobile keeps the fixed bottom navigation rather than a vertical scroller. */
@media(max-width:700px){
  .rail{
    overflow:visible;
    max-height:none;
  }
}


/* BRACU Courses workspace */
.nav-item[data-view="bracu"] span{background:var(--yellow-soft)}
.nav-item[data-view="bracu"].active{box-shadow:inset 4px 0 0 var(--yellow)}

.bracu-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px;
  align-items:end;
  padding:20px 0 28px;
  border-top:5px solid var(--yellow);
  border-bottom:2px solid var(--line);
}
.bracu-hero h1{
  margin:8px 0 10px;
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
}
.bracu-hero p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.55;
}
.bracu-hero aside{
  display:grid;
  gap:8px;
  padding:18px;
  border:2px solid var(--line);
  border-radius:14px;
  background:var(--yellow);
  color:#171319;
  box-shadow:5px 5px 0 var(--line);
}
.bracu-hero aside b{
  line-height:1.45;
}

.bracu-course-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);
  gap:18px;
  margin-top:24px;
  align-items:start;
}
.bracu-course-card,
.bracu-add-course{
  border:2px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:5px 5px 0 var(--line);
}
.bracu-course-card{
  padding:22px;
}
.bracu-course-head{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.bracu-course-code{
  display:grid;
  place-items:center;
  min-height:92px;
  border:2px solid var(--line);
  border-radius:14px;
  background:var(--yellow);
  color:#171319;
  font:800 1.05rem "DM Mono",monospace;
}
.bracu-course-head h2{
  margin:6px 0 7px;
  font-size:1.55rem;
  line-height:1.15;
}
.bracu-course-head p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.bracu-course-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
}
.bracu-course-meta span{
  display:grid;
  gap:3px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--muted);
  font-size:.82rem;
}
.bracu-course-meta b{
  color:var(--ink);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.bracu-course-outline{
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
}
.bracu-course-outline summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 2px;
  cursor:pointer;
  list-style:none;
  font-weight:800;
}
.bracu-course-outline summary::-webkit-details-marker{display:none}
.bracu-course-outline summary b{
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}
.bracu-course-outline ol{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
  counter-reset:bracu-topic;
}
.bracu-course-outline li{
  counter-increment:bracu-topic;
  position:relative;
  min-width:0;
  padding:12px 12px 12px 44px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.bracu-course-outline li:before{
  content:counter(bracu-topic,decimal-leading-zero);
  position:absolute;
  left:11px;
  top:12px;
  font:700 .68rem "DM Mono",monospace;
  color:var(--coral);
}
.bracu-course-outline li b,
.bracu-course-outline li span{
  display:block;
}
.bracu-course-outline li b{
  margin-bottom:4px;
  font-size:.9rem;
}
.bracu-course-outline li span{
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}

.bracu-study-order{
  margin-top:18px;
  padding:14px;
  border:2px solid var(--line);
  border-radius:11px;
  background:var(--blue-soft);
}
.bracu-study-order>div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-top:9px;
}
.bracu-study-order>div span{
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  font-size:.76rem;
  font-weight:700;
}
.bracu-study-order i{
  font-style:normal;
  color:var(--coral);
  font-weight:800;
}

.bracu-course-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.bracu-course-actions a{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.bracu-add-course{
  padding:20px;
  border-top:5px solid var(--blue);
}
.bracu-add-course h2{
  margin:7px 0 8px;
  font-size:1.35rem;
}
.bracu-add-course p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.88rem;
}
.bracu-next-codes{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.bracu-next-codes span{
  padding:7px 9px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--cream);
  font:700 .72rem "DM Mono",monospace;
}

.dark .bracu-hero aside,
.dark .bracu-course-code{
  color:#171319;
}
.dark .bracu-course-meta span,
.dark .bracu-course-outline li{
  background:var(--paper);
}

@media(max-width:1100px){
  .bracu-course-grid{
    grid-template-columns:1fr;
  }
  .bracu-add-course{
    box-shadow:none;
  }
}
@media(max-width:760px){
  .bracu-hero{
    grid-template-columns:1fr;
  }
  .bracu-course-head{
    grid-template-columns:1fr;
  }
  .bracu-course-code{
    min-height:56px;
    width:110px;
  }
  .bracu-course-meta,
  .bracu-course-outline ol{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .nav-item[data-view="bracu"].active{
    box-shadow:inset 0 3px 0 var(--yellow);
  }
}


/* Full BRACU CSE course catalog */
.bracu-catalog-tools{
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:16px;
  align-items:end;
  margin:22px 0 12px;
}
.bracu-catalog-tools label{
  display:block;
  margin-bottom:7px;
  font-size:.82rem;
  font-weight:800;
}
.bracu-catalog-tools input{
  width:100%;
  min-width:0;
  padding:11px 13px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  font:inherit;
}
.bracu-area-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.bracu-area-filters button{
  padding:8px 10px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  cursor:pointer;
  font-size:.76rem;
  font-weight:700;
}
.bracu-area-filters button.active{
  background:var(--yellow);
  color:#171319;
  box-shadow:2px 2px 0 var(--line);
}
.bracu-catalog-count{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.78rem;
}

.bracu-catalog-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.bracu-catalog-card{
  min-width:0;
  border:2px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  overflow:hidden;
}
.bracu-catalog-card[hidden]{display:none!important}
.bracu-catalog-card details{
  min-width:0;
}
.bracu-catalog-card summary{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) 28px;
  gap:12px;
  align-items:center;
  padding:14px;
  list-style:none;
  cursor:pointer;
}
.bracu-catalog-card summary::-webkit-details-marker{display:none}
.bracu-catalog-card details[open] summary{
  background:var(--cream);
  border-bottom:2px solid var(--line);
}
.bracu-catalog-code{
  display:grid;
  place-items:center;
  min-height:54px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--yellow);
  color:#171319;
  font:800 .84rem "DM Mono",monospace;
}
.bracu-catalog-title{
  min-width:0;
}
.bracu-catalog-title b,
.bracu-catalog-title small{
  display:block;
}
.bracu-catalog-title b{
  font-size:1rem;
  line-height:1.25;
}
.bracu-catalog-title small{
  margin-top:4px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.4;
}
.bracu-catalog-toggle{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  font-weight:800;
  transition:transform .15s ease;
}
.bracu-catalog-card details[open] .bracu-catalog-toggle{
  transform:rotate(45deg);
}
.bracu-catalog-body{
  display:grid;
  gap:13px;
  padding:15px;
}
.bracu-course-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bracu-course-facts span{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--muted);
  font-size:.75rem;
}
.bracu-course-facts b{
  color:var(--ink);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.bracu-focus{
  margin:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.55;
}
.bracu-focus b{color:var(--ink)}

.bracu-course-ready{
  padding:13px;
  border:2px solid var(--line);
  border-radius:11px;
  background:var(--blue-soft);
}
.bracu-ready-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.bracu-ready-grid>div{
  padding:10px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.bracu-ready-grid b{
  display:block;
  font-size:.82rem;
}
.bracu-ready-grid p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.45;
}

.bracu-cse110-detail{
  padding:13px;
  border:2px solid var(--line);
  border-radius:11px;
  background:var(--paper);
}
.bracu-topic-map{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 0;
  padding:0;
  list-style:none;
  counter-reset:bracu-topic;
}
.bracu-topic-map li{
  counter-increment:bracu-topic;
  position:relative;
  padding:10px 10px 10px 38px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.bracu-topic-map li:before{
  content:counter(bracu-topic,decimal-leading-zero);
  position:absolute;
  left:10px;
  top:10px;
  color:var(--coral);
  font:700 .65rem "DM Mono",monospace;
}
.bracu-topic-map b,
.bracu-topic-map span{
  display:block;
}
.bracu-topic-map b{
  font-size:.8rem;
}
.bracu-topic-map span{
  margin-top:3px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.4;
}

.bracu-source-note{
  width:max-content;
  max-width:min(100%,520px);
  margin:12px 0 0 auto;
  position:relative;
}
.bracu-source-note>summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 9px;
  border:1.5px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--muted);
  box-shadow:2px 2px 0 var(--line);
  cursor:pointer;
  font-size:.66rem;
  font-weight:800;
}
.bracu-source-note>summary::-webkit-details-marker{display:none}
.bracu-source-note>summary:after{
  content:' ↗';
  color:var(--blue-deep);
}
.bracu-source-note[open]>summary{
  background:var(--blue-soft);
  color:var(--ink);
}
.bracu-source-note>div{
  margin-top:7px;
  padding:9px 10px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  box-shadow:3px 3px 0 var(--line);
}
.bracu-source-note p{
  margin:0 0 5px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.4;
}
.bracu-source-note a{
  color:var(--ink);
  font-size:.68rem;
  font-weight:700;
}

@media(max-width:1200px){
  .bracu-catalog-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .bracu-catalog-tools{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .bracu-catalog-card summary{
    grid-template-columns:74px minmax(0,1fr) 26px;
    gap:9px;
    padding:11px;
  }
  .bracu-ready-grid,
  .bracu-topic-map{
    grid-template-columns:1fr;
  }
  .bracu-area-filters{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:3px;
  }
  .bracu-area-filters button{
    white-space:nowrap;
  }
}


/* BRACU outline heading */
.bracu-outline-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.bracu-outline-head h3{
  margin:4px 0 0;
  font-size:1rem;
}
.bracu-outline-head small{
  max-width:420px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.45;
  text-align:right;
}
@media(max-width:620px){
  .bracu-outline-head{
    display:grid;
    gap:6px;
  }
  .bracu-outline-head small{
    text-align:left;
  }
}


/* BRACU catalog grouped by course level */
.bracu-level-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:12px 0 18px;
}
.bracu-level-nav button{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px;
  align-items:center;
  min-width:0;
  padding:10px 12px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.bracu-level-nav button:hover{
  background:var(--yellow-soft);
  box-shadow:2px 2px 0 var(--line);
}
.bracu-level-nav button:disabled{
  opacity:.35;
  cursor:default;
  box-shadow:none;
}
.bracu-level-nav b{
  display:grid;
  place-items:center;
  width:42px;
  height:34px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--yellow);
  color:#171319;
  font:800 .76rem "DM Mono",monospace;
}
.bracu-level-nav span{
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}

.bracu-level-groups{
  display:grid;
  gap:26px;
}
.bracu-level-group{
  min-width:0;
  scroll-margin-top:18px;
}
.bracu-level-group[hidden]{display:none!important}
.bracu-level-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
  padding:0 2px 9px;
  border-bottom:2px solid var(--line);
}
.bracu-level-heading h2{
  margin:4px 0 0;
  font-size:1.35rem;
  line-height:1.1;
}
.bracu-level-heading>span{
  color:var(--muted);
  font:700 .74rem "DM Mono",monospace;
}

.bracu-level-group[data-bracu-level-group="100"] .bracu-level-heading{border-left:5px solid var(--yellow);padding-left:10px}
.bracu-level-group[data-bracu-level-group="200"] .bracu-level-heading{border-left:5px solid var(--blue);padding-left:10px}
.bracu-level-group[data-bracu-level-group="300"] .bracu-level-heading{border-left:5px solid var(--coral);padding-left:10px}
.bracu-level-group[data-bracu-level-group="400"] .bracu-level-heading{border-left:5px solid var(--green);padding-left:10px}

@media(max-width:780px){
  .bracu-level-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:460px){
  .bracu-level-nav{
    grid-template-columns:1fr;
  }
  .bracu-level-heading{
    align-items:start;
  }
}


/* BRACU level palette: keep the First Comet theme alive */
.bracu-level-group[data-bracu-level-group="100"]{
  --level-accent:var(--yellow);
  --level-soft:var(--yellow-soft);
  --level-ink:#171319;
}
.bracu-level-group[data-bracu-level-group="200"]{
  --level-accent:var(--blue);
  --level-soft:var(--blue-soft);
  --level-ink:#fff;
}
.bracu-level-group[data-bracu-level-group="300"]{
  --level-accent:var(--coral);
  --level-soft:var(--red-soft);
  --level-ink:#fff;
}
.bracu-level-group[data-bracu-level-group="400"]{
  --level-accent:var(--green);
  --level-soft:var(--green-soft);
  --level-ink:#fff;
}

/* Strong level identity without recolouring the whole page */
.bracu-level-group .bracu-level-heading{
  border-left:6px solid var(--level-accent);
  padding-left:12px;
}
.bracu-level-group .bracu-level-heading>span{
  padding:6px 10px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--level-soft);
  color:var(--ink);
}

/* Course cards keep paper surfaces, with level colour as the signal */
.bracu-level-group .bracu-catalog-card{
  border-top:5px solid var(--level-accent);
  background:var(--panel);
  transition:transform .15s ease,box-shadow .15s ease;
}
.bracu-level-group .bracu-catalog-card:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--line);
}
.bracu-level-group .bracu-catalog-code{
  background:var(--level-accent);
  color:var(--level-ink);
}
.bracu-level-group .bracu-catalog-card details[open] summary{
  background:var(--level-soft);
}

/* Top level-jump buttons mirror the same four colours */
.bracu-level-nav button[data-bracu-level-jump="100"] b{
  background:var(--yellow);
  color:#171319;
}
.bracu-level-nav button[data-bracu-level-jump="200"] b{
  background:var(--blue);
  color:#fff;
}
.bracu-level-nav button[data-bracu-level-jump="300"] b{
  background:var(--coral);
  color:#fff;
}
.bracu-level-nav button[data-bracu-level-jump="400"] b{
  background:var(--green);
  color:#fff;
}
.bracu-level-nav button[data-bracu-level-jump="100"]:hover{background:var(--yellow-soft)}
.bracu-level-nav button[data-bracu-level-jump="200"]:hover{background:var(--blue-soft)}
.bracu-level-nav button[data-bracu-level-jump="300"]:hover{background:var(--red-soft)}
.bracu-level-nav button[data-bracu-level-jump="400"]:hover{background:var(--green-soft)}

/* Dark mode keeps the same identity while preserving contrast */
.dark .bracu-level-group[data-bracu-level-group="100"]{
  --level-soft:var(--yellow-soft);
  --level-ink:#171319;
}
.dark .bracu-level-group[data-bracu-level-group="200"]{
  --level-soft:var(--blue-soft);
  --level-ink:#f8f2e8;
}
.dark .bracu-level-group[data-bracu-level-group="300"]{
  --level-soft:var(--red-soft);
  --level-ink:#fff;
}
.dark .bracu-level-group[data-bracu-level-group="400"]{
  --level-soft:var(--green-soft);
  --level-ink:#fff;
}

@media(prefers-reduced-motion:reduce){
  .bracu-level-group .bracu-catalog-card{
    transition:none;
  }
  .bracu-level-group .bracu-catalog-card:hover{
    transform:none;
  }
}


/* BRACU level buttons act as category tabs */
.bracu-level-nav button.active{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--line);
}
.bracu-level-nav button[data-bracu-level-jump="100"].active{background:var(--yellow-soft)}
.bracu-level-nav button[data-bracu-level-jump="200"].active{background:var(--blue-soft)}
.bracu-level-nav button[data-bracu-level-jump="300"].active{background:var(--red-soft)}
.bracu-level-nav button[data-bracu-level-jump="400"].active{background:var(--green-soft)}


/* Compact BRACU area dropdown */
.bracu-area-select-wrap{
  display:grid;
  gap:6px;
  justify-self:end;
  width:min(100%,280px);
  position:relative;
}
.bracu-area-select-wrap label{
  color:var(--muted);
  font:800 .7rem "DM Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bracu-area-select-wrap:after{
  content:'▾';
  position:absolute;
  right:7px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1.5px solid var(--line);
  border-radius:7px;
  background:var(--yellow);
  color:#171319;
  box-shadow:1px 1px 0 var(--line);
  pointer-events:none;
  font-size:.78rem;
  font-weight:900;
}
.bracu-area-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:42px;
  padding:9px 43px 9px 12px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--line);
  cursor:pointer;
  font-size:.8rem;
  font-weight:800;
}
.bracu-area-select:hover{
  background:var(--yellow-soft);
}
.bracu-area-select:focus{
  outline:0;
  border-color:var(--line);
  background:var(--yellow-soft);
  box-shadow:4px 4px 0 var(--line);
}
.bracu-area-select option{
  background:var(--panel);
  color:var(--ink);
}
.dark .bracu-area-select{
  background:var(--panel);
  color:var(--ink);
}
.dark .bracu-area-select:hover,
.dark .bracu-area-select:focus{
  background:var(--yellow-soft);
}
@media(max-width:900px){
  .bracu-area-select-wrap{
    justify-self:start;
    width:min(100%,320px);
  }
}


/* Device-local learner name prompt */
.fc-name-prompt{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  place-items:center;
  padding:20px;
  background:color-mix(in srgb,var(--ink) 42%,transparent);
  backdrop-filter:blur(3px);
}
.fc-name-prompt.open{
  display:grid;
}
.fc-name-card{
  width:min(440px,100%);
  padding:26px;
  border:2px solid var(--line);
  border-top:7px solid var(--yellow);
  border-radius:18px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:9px 9px 0 var(--line);
}
.fc-name-card h2{
  margin:7px 0 10px;
  font-size:clamp(1.65rem,4vw,2.2rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.fc-name-card>p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
}
.fc-name-card label{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:.76rem;
  font-weight:800;
}
.fc-name-card input{
  width:100%;
  min-height:46px;
  padding:11px 12px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  outline:0;
  font-size:1rem;
  font-weight:700;
}
.fc-name-card input:focus{
  background:var(--yellow-soft);
  box-shadow:3px 3px 0 var(--line);
}
.fc-name-card input[aria-invalid="true"]{
  border-color:var(--coral);
}
.fc-name-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:16px;
}
.fc-name-card>small{
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.4;
}
.dark .fc-name-card{
  background:var(--paper);
  color:var(--ink);
}
@media(max-width:520px){
  .fc-name-card{
    padding:20px;
  }
  .fc-name-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}


/* ===== VS Code hero: real editor + guided path ===== */
.vscode-hero{
  position:relative;
  min-height:430px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);
  gap:28px;
  align-items:center;
  margin:4px 0 30px;
  padding:34px;
  overflow:hidden;
  border:3px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 86% 18%,rgba(255,211,61,.26),transparent 24%),
    radial-gradient(circle at 72% 78%,rgba(65,106,138,.2),transparent 28%),
    linear-gradient(135deg,var(--panel),var(--paper));
  box-shadow:var(--shadow);
}
.vscode-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:linear-gradient(#17131912 1px,transparent 1px),linear-gradient(90deg,#17131912 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
}
.vscode-hero-copy{position:relative;z-index:4;align-self:center}
.vscode-hero-kicker{display:flex;align-items:center;gap:9px;margin-top:18px;font:700 9px "DM Mono";letter-spacing:.12em}
.vscode-hero-kicker i{width:36px;height:1px;background:var(--coral)}
.vscode-hero h1{
  display:grid;
  gap:2px;
  margin:16px 0 18px!important;
  max-width:670px!important;
  font-size:clamp(2.25rem,4.15vw,4.7rem)!important;
  line-height:.92!important;
  letter-spacing:-.065em!important;
}
.vscode-hero h1 span,.vscode-hero h1 strong{display:block}
.vscode-hero h1 strong{color:#3978ba;font-weight:800}
.vscode-hero h1 em{font-style:normal;color:var(--coral)}
.vscode-hero-copy>p{max-width:620px;font-size:1rem;line-height:1.62;color:var(--muted)}
.vscode-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.vscode-hero-actions>span{font:700 10px "DM Mono";letter-spacing:.04em;color:var(--muted)}
.vscode-hero-actions>span b{color:var(--ink)}
.vscode-hero-actions>span i{font-style:normal;color:var(--coral);margin:0 4px}

.vscode-hero-stage{position:relative;min-height:360px;z-index:2;isolation:isolate}
.vscode-hero-stage:after{
  content:"";
  position:absolute;
  left:12%;right:0;bottom:6%;
  height:32%;
  border-radius:50%;
  background:rgba(255,211,61,.18);
  filter:blur(28px);
  z-index:-2;
}
.vscode-orbit{position:absolute;border:2px dashed rgba(23,19,25,.32);border-radius:50%;pointer-events:none}
.vscode-orbit-a{width:85%;height:58%;left:8%;top:18%;transform:rotate(-12deg)}
.vscode-orbit-b{width:62%;height:86%;left:21%;top:5%;transform:rotate(18deg);opacity:.5}
.vscode-orbit-comet{
  position:absolute;
  left:8%;top:44%;
  z-index:8;
  font-size:1.7rem;
  filter:drop-shadow(0 3px 0 rgba(23,19,25,.22));
  animation:vscodeCometRoute 7s cubic-bezier(.45,.05,.55,.95) infinite;
}

.vscode-mini-window{position:absolute;border:2px solid #16151a;border-radius:16px;overflow:hidden;box-shadow:10px 12px 0 rgba(23,19,25,.16)}
.vscode-mini-editor{
  width:63%;
  left:2%;
  top:18%;
  background:#18191f;
  color:#e9eef5;
  transform:rotate(-2.2deg);
  animation:vscodeEditorFloat 5.5s ease-in-out infinite;
}
.vscode-mini-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#25262e;border-bottom:1px solid #3b3c46}
.vscode-mini-bar i{width:8px;height:8px;border-radius:50%;background:#ff7c61}
.vscode-mini-bar i:nth-child(2){background:#ffd35e}.vscode-mini-bar i:nth-child(3){background:#6ec79b}
.vscode-mini-bar span{margin-left:8px;font:700 9px "DM Mono";color:#c6c8d1}
.vscode-mini-body{display:grid;grid-template-columns:42px 1fr;min-height:210px}
.vscode-mini-body aside{display:grid;align-content:start;justify-items:center;gap:15px;padding:17px 0;background:#202128;color:#858b9a}
.vscode-mini-code{display:grid;align-content:center;gap:10px;padding:18px;font:12px/1.45 "DM Mono";color:#82aaf4}
.vscode-mini-code b{font-weight:500;color:#f6ca68}
.vscode-mini-editor>small{
  position:absolute;
  right:14px;bottom:10px;
  color:#fff;
  font:800 8px "DM Mono";
  letter-spacing:.12em;
  opacity:.55
}

.vscode-mini-guide{
  width:41%;
  right:1%;
  top:9%;
  padding:16px;
  background:var(--panel);
  color:var(--ink);
  transform:rotate(2.8deg);
  animation:vscodeGuideFloat 5s ease-in-out .4s infinite;
}
.vscode-guide-brand{display:flex;align-items:center;gap:7px;margin-bottom:19px}
.vscode-guide-brand>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff}
.vscode-guide-brand>b{font-size:.85rem}
.vscode-guide-brand>i{margin-left:auto;font:800 8px "DM Mono";font-style:normal;color:var(--green)}
.vscode-mini-guide>small{font:700 8px "DM Mono";letter-spacing:.1em;color:var(--muted)}
.vscode-mini-guide h3{font-size:1.05rem;line-height:1.05;margin:8px 0 13px}
.vscode-mini-guide ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vscode-mini-guide li{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px;font-size:.72rem;background:var(--paper)}
.vscode-mini-guide li span{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;font:700 8px "DM Mono"}
.vscode-mini-guide li.done span{background:var(--green);color:#fff}.vscode-mini-guide li.active{background:var(--yellow)}
.vscode-guide-label{display:block;margin-top:12px;text-align:right;font:800 8px "DM Mono";letter-spacing:.12em;color:var(--coral)}

.vscode-float-note{position:absolute;z-index:7;display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:3px 3px 0 var(--line);font-size:.72rem;animation:vscodeNoteBob 4s ease-in-out infinite}
.vscode-float-note span{font:800 8px "DM Mono";color:var(--coral)}
.vscode-note-one{left:4%;bottom:3%;animation-delay:.2s}
.vscode-note-two{left:38%;bottom:0;animation-delay:1s}
.vscode-note-three{right:0;bottom:9%;animation-delay:1.8s}

.dark .vscode-hero{
  background:
    radial-gradient(circle at 86% 18%,rgba(255,211,61,.12),transparent 24%),
    radial-gradient(circle at 72% 78%,rgba(78,120,171,.2),transparent 28%),
    linear-gradient(135deg,#171319,#211d22);
}
.dark .vscode-hero:before{background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px)}
.dark .vscode-hero h1 strong{color:#77adf0}
.dark .vscode-mini-guide,.dark .vscode-float-note{background:#211d22;color:#f8f2e8}
.dark .vscode-mini-guide li{background:#171319;color:#f8f2e8}
.dark .vscode-mini-guide li.active{background:#806c18;color:#fff}
.dark .vscode-hero-actions>span b{color:#f8f2e8}
.dark .vscode-orbit{border-color:rgba(255,255,255,.2)}

@keyframes vscodeEditorFloat{
  0%,100%{transform:rotate(-2.2deg) translateY(0)}
  50%{transform:rotate(-1.1deg) translateY(-9px)}
}
@keyframes vscodeGuideFloat{
  0%,100%{transform:rotate(2.8deg) translateY(0)}
  50%{transform:rotate(1.7deg) translateY(10px)}
}
@keyframes vscodeNoteBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes vscodeCometRoute{
  0%{left:8%;top:44%;transform:rotate(-10deg) scale(.9);opacity:0}
  8%{opacity:1}
  35%{left:43%;top:8%;transform:rotate(14deg) scale(1)}
  68%{left:82%;top:38%;transform:rotate(36deg) scale(1.08)}
  92%{opacity:1}
  100%{left:57%;top:86%;transform:rotate(75deg) scale(.88);opacity:0}
}

@media(max-width:1080px){
  .vscode-hero{grid-template-columns:1fr;padding:28px}
  .vscode-hero-stage{min-height:340px}
  .vscode-hero h1{font-size:clamp(2.35rem,7vw,4.1rem)!important}
}
@media(max-width:700px){
  .vscode-hero{padding:20px;border-radius:18px;gap:12px}
  .vscode-hero h1{font-size:clamp(2rem,10vw,3rem)!important;line-height:.96!important}
  .vscode-hero-stage{min-height:330px}
  .vscode-mini-editor{width:72%;left:0}
  .vscode-mini-guide{width:47%;right:0;top:13%}
  .vscode-float-note{font-size:.62rem;padding:7px 8px}
  .vscode-note-two{left:30%}
  .vscode-note-three{right:0}
}
@media(prefers-reduced-motion:reduce){
  .vscode-orbit-comet,.vscode-mini-editor,.vscode-mini-guide,.vscode-float-note{animation:none!important}
}


/* ===== Landscape First Comet Teacher ===== */
.vscode-teacher-companion.landscape{
  display:grid;
  gap:14px;
  padding:18px 20px;
}
.teacher-landscape-main{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:18px;
  align-items:stretch;
}
.teacher-copy-column,
.teacher-actions-column{
  min-width:0;
}
.teacher-copy-column .teacher-step{
  margin:0;
  height:100%;
}
.teacher-actions-column{
  display:grid;
  align-content:start;
  gap:10px;
}
.teacher-tools-label{
  color:#aaa3b3;
}
.vscode-teacher-companion.landscape .vscode-help-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:0;
}
.vscode-teacher-companion.landscape .vscode-help-grid button{
  min-height:70px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:10px 11px;
}
.vscode-teacher-companion.landscape .vscode-help-grid b{
  font-size:.78rem;
  line-height:1.25;
}
.vscode-teacher-companion.landscape .vscode-help-grid small{
  font-size:.66rem;
}
.vscode-teacher-companion.landscape .vscode-help-answer{
  margin-top:0;
  min-height:0;
  padding:11px 13px;
}
.vscode-teacher-companion.landscape .teacher-step h3{
  font-size:1.22rem;
  margin:0 0 8px;
}
.vscode-teacher-companion.landscape .teacher-step ol{
  columns:2;
  column-gap:28px;
  padding-left:18px;
  margin:8px 0 10px;
}
.vscode-teacher-companion.landscape .teacher-step li{
  break-inside:avoid;
  margin-bottom:5px;
}
.vscode-teacher-companion.landscape .teacher-step p{
  margin:0;
}

@media(max-width:980px){
  .teacher-landscape-main{
    grid-template-columns:1fr;
  }
  .vscode-teacher-companion.landscape .vscode-help-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .vscode-teacher-companion.landscape .teacher-step ol{
    columns:1;
  }
}
@media(max-width:620px){
  .vscode-teacher-companion.landscape .vscode-help-grid{
    grid-template-columns:1fr;
  }
}


/* ===== Dark yellow contrast + swipeable mobile navigation ===== */
/* Yellow remains a bright accent in dark mode, so its text must stay dark. */
.dark .launch-card.yellow,
.dark .shortcut-board,
.dark .info-drawer,
.dark .teaching-intro,
.dark .teacher-note,
.dark .success-gate,
.dark .success-gate.compact,
.dark .mini-local-badge,
.dark .native-vscode-path,
.dark .bracu-hero aside,
.dark .career-market-note,
.dark .cv-hero aside,
.dark .learning-hub-intro aside,
.dark .lab-intro aside,
.dark .cse110-write-down,
.dark .fc-proof-stats>div:nth-child(3),
.dark .home-action-card:nth-child(3),
.dark .bracu-level-group[data-bracu-level-group="100"] .bracu-catalog-code,
.dark .bracu-level-nav button[data-bracu-level-jump="100"].active,
.dark .bracu-level-nav button[data-bracu-level-jump="100"]:hover{
  color:#171319!important;
}

/* Override inherited white/muted text inside yellow surfaces too. */
.dark .launch-card.yellow :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .shortcut-board :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .info-drawer :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .teaching-intro :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .teacher-note :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .success-gate :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .native-vscode-path :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .bracu-hero aside :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .career-market-note :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .cv-hero aside :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .learning-hub-intro aside :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .lab-intro aside :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .cse110-write-down :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .fc-proof-stats>div:nth-child(3) :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .home-action-card:nth-child(3) :is(h1,h2,h3,h4,b,strong,p,small,span,label,em,i),
.dark .bracu-level-group[data-bracu-level-group="100"] .bracu-catalog-code *{
  color:#171319!important;
}

/* Mobile rail is a swipeable strip, not a clipped fixed grid. */
@media(max-width:700px){
  .rail{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .rail::-webkit-scrollbar{
    display:none;
  }
  .rail nav{
    display:flex!important;
    width:max-content;
    min-width:100%;
    height:100%;
    gap:4px!important;
    padding:0 6px;
    align-items:stretch;
  }
  .rail .nav-label,
  .rail .rail-create,
  .rail .rail-note{
    display:none!important;
  }
  .rail .nav-item{
    flex:0 0 78px;
    min-width:78px;
    height:52px;
    padding:5px 4px!important;
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px!important;
    white-space:nowrap;
  }
  .rail .nav-item b{
    display:block!important;
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.7rem!important;
    line-height:1.05;
  }
  .rail .nav-item span{
    width:auto!important;
    font-size:.95rem!important;
    flex:none;
  }
  .rail .nav-item small{
    display:none!important;
  }
}


/* ===== BRACU topic buttons instead of topic-card wall ===== */
.bracu-topic-map{display:none!important}

.bracu-topic-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.bracu-topic-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  max-width:100%;
  padding:7px 10px;
  border:1.5px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  box-shadow:2px 2px 0 transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.bracu-topic-button:hover{
  transform:translateY(-1px);
  box-shadow:2px 2px 0 var(--line);
  background:var(--yellow-soft);
}
.bracu-topic-button.active{
  background:var(--yellow);
  color:#171319;
  box-shadow:2px 2px 0 var(--line);
}
.bracu-topic-button>span{
  flex:none;
  color:var(--coral);
  font:800 .62rem "DM Mono",monospace;
}
.bracu-topic-button.active>span{
  color:#171319;
}
.bracu-topic-button>b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.75rem;
  line-height:1.2;
}
.bracu-topic-open{
  margin-top:12px;
  padding:14px 16px;
  border:2px solid var(--line);
  border-left:5px solid var(--yellow);
  border-radius:10px;
  background:var(--panel);
}
.bracu-topic-open h4{
  margin:5px 0 6px;
  font-size:1.05rem;
  line-height:1.2;
}
.bracu-topic-open p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}

.dark .bracu-topic-button.active,
.dark .bracu-topic-button.active *{
  color:#171319!important;
}

@media(max-width:700px){
  .bracu-topic-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bracu-topic-button{
    width:100%;
    min-width:0;
  }
}
@media(max-width:430px){
  .bracu-topic-buttons{
    grid-template-columns:1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .bracu-topic-button{
    transition:none;
  }
}


/* Tiny BRACU official source link */
.bracu-official-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:2px 3px;
  border:0;
  background:transparent;
  color:var(--muted);
  text-decoration:none;
  font:600 .58rem "DM Mono",monospace;
  letter-spacing:.02em;
  opacity:.48;
  box-shadow:none;
}
.bracu-official-link:hover,
.bracu-official-link:focus-visible{
  color:var(--ink);
  opacity:.9;
  text-decoration:underline;
}