/* Visual direction adapted from the owner's Butepowered Labs reference. */
:root{--bg:#09090e;--primary:#161426;--card:#111117;--border:#30303f;--muted:#b1afc2;--white:#f5f4f8;--blue:#b69aff;--light:#c7b2ff}
body{background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--white)}
header{background:#09090e;border-color:#23232d}.header-inner{min-height:88px}.brand{font-family:Arial,Helvetica,sans-serif;font-weight:750;letter-spacing:-1.2px}.brand-dot{color:#b69aff}.logo{color:#e6ddff;border:1px solid #8e75c8;background:linear-gradient(135deg,#443368,#171120 48%,#6d56a0);box-shadow:inset 0 1px 1px #e8dcff66;border-radius:9px}.academy-badge{color:#9893ab;border-color:#393341;letter-spacing:2px}.avatar{background:#1b1528;border-color:#4a3c65;color:#dbcaff}.beginner-label{color:#9993a7}
nav{padding-top:13px;padding-bottom:0;margin-bottom:0;border-color:#292630;gap:22px}nav a{border-radius:0;background:none;padding:19px 5px 18px;color:#9e9aaa;border-bottom:2px solid transparent;font-weight:500}nav a.active{box-shadow:none;background:none;border-bottom-color:#b69aff}nav a:hover{background:none;color:#e6d9ff}.nav-note{color:#9e98ac;font:10px Consolas,monospace;text-transform:uppercase;letter-spacing:1px}.nav-note i{background:#b69aff;box-shadow:0 0 9px #b69aff55}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif}h1{font-size:42px;font-weight:600;letter-spacing:-1.9px}.eyebrow,.chapter-label{font-family:Consolas,monospace;letter-spacing:1.8px;font-weight:400}.eyebrow{font-size:10px;color:#c4b3e2}.eyebrow::before{content:'✳';color:#b69aff;margin-right:10px}
#app{padding-top:34px}.welcome{position:relative;isolation:isolate;min-height:325px;margin:-34px 0 29px;padding:51px 0 36px;overflow:hidden;border-bottom:1px solid #292630}.welcome:before{content:'';position:absolute;z-index:-2;inset:0 -15px 0 30%;background:url('assets/chrome-hero.webp') center right/cover no-repeat;opacity:.85;pointer-events:none}.welcome:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#09090e 7%,#09090ef2 29%,#09090e55 63%,#09090e00),linear-gradient(0deg,#09090e,transparent 21%,transparent 85%,#09090e44);pointer-events:none}.welcome>div:first-child{max-width:670px}.welcome h1{font-size:clamp(34px,4.5vw,58px);line-height:1.08;letter-spacing:-2.7px;margin:23px 0 19px;font-weight:600}.welcome h1 .future-line{display:block;color:#b69aff;margin-top:5px}.welcome p:not(.eyebrow){max-width:400px;font-size:13px;line-height:1.8;color:#b4afc2}.welcome-note{position:absolute;right:0;bottom:20px;font:9px Consolas,monospace;letter-spacing:1.1px;text-transform:uppercase;color:#bcb1d1}.welcome-note b{font-size:14px;color:#b69aff}
.progress-card{border:1px solid #463754;border-radius:9px;background:radial-gradient(ellipse at 95% 0,#3b245340,transparent 60%),#14121d;padding:25px 28px;box-shadow:0 9px 28px #0002}.progress-card:before{content:'';position:absolute;left:28px;right:28px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#b79ad6a0,transparent)}.progress-card h2{font-size:25px;letter-spacing:-.8px;font-weight:500}.progress-card p{color:#aaa4bb}.status{background:#282034;color:#d0bce9;border:1px solid #493656;font:9px Consolas,monospace;letter-spacing:.4px;border-radius:4px}.chapter-label{color:#bcb1d1}.chapter-label span{color:#8d819e!important}.progress-meta{color:#a39aaf;margin-top:22px}.progress-meta strong{font-weight:500;color:#dfd2f4}progress{background:#302a3c;height:5px}progress::-webkit-progress-bar{background:#302a3c}progress::-webkit-progress-value{background:linear-gradient(90deg,#8566c2,#c9afff)}progress::-moz-progress-bar{background:#b69aff}.progress-bottom{margin-top:22px}.next-lesson{font:9px Consolas,monospace;letter-spacing:1px;color:#aba1b9}.next-lesson strong{font-family:Arial,Helvetica,sans-serif;letter-spacing:0;font-size:13px}.next-lesson strong span{color:#a599b7!important}
.primary{background:#b69aff;color:#1a102d;font-weight:600;border:1px solid #c1aaff;box-shadow:0 3px 18px #9470df0d;border-radius:5px;transition:background .18s,transform .18s;min-height:44px}.primary:hover{background:#ccb7ff;transform:translateY(-1px)}.secondary{background:#17131f;border-color:#44384f;color:#e1d3f3;border-radius:5px}.secondary:hover{background:#292033}.subtle-link{color:#c3a7f1}.section-title{margin-top:29px}.section-title h2{font-size:18px;font-weight:500;letter-spacing:-.4px}.section-title p{color:#9c95a8}.section-title>span{color:#9790a3!important}
.modes{gap:16px}.mode{position:relative;grid-template-columns:34px 1fr 12px;background:radial-gradient(ellipse at 95% 0,#34264128,transparent 75%),#111117;border-color:#302a38;border-radius:8px;padding:22px 20px;transition:border-color .2s,transform .2s,background .2s}.mode:hover{background:#17131f;border-color:#736080;transform:translateY(-3px)}.mode-icon{background:#211a2b;border:1px solid #3d304d;color:#c8acf4;border-radius:7px}.mode h3{font-weight:500;font-size:14px}.mode p{font-size:12px;color:#aaa2b7}.arrow{color:#b69aff}.academy-head{margin-top:36px}.academy-head h2 span{color:#a398b5!important}.filters{background:#101015;border-color:#332a3e;border-radius:5px}.filter{color:#afa3bd}.filter.active{background:#352844;color:#eee3ff;border-radius:3px}.academy{background:#101015;border-color:#302a38;border-radius:8px}.chapter+.chapter{border-color:#2b2533}.chapter summary:hover{background:#19141f}.chapter-num{border-color:#483852;background:#201827;border-radius:5px;color:#c5a9e5;font-family:Consolas,monospace}.chapter-title h3{font-weight:500}.chapter-title p,.chapter-count{color:#a298af}.chevron{color:#b7a0cf}.lesson-row{color:#c6bdcf;border-color:#2b2433}.lesson-row:hover{color:#d5bdff;background:#bda2e805}.lesson-state{border-color:#4e3f61;color:#cbb3eb}.lesson-state.done{background:#38274b;border-color:#71558a}.lesson-time{color:#b0a3bf}.academy-foot{color:#9d90ad}.footer-brand{color:#c2b3d0}footer{border-color:#2b2533;color:#9b8ca8}
.lesson-copy,.editor-card,.project-card{border-color:#38303f;background:#121018;border-radius:8px}.lesson-copy pre{background:#09080f;color:#dec7ff;border:1px solid #30243e}.tip{background:#20172c;border-color:#a283d0;color:#c6b4db}.editor-title,.output-title{border-color:#352b40;color:#c4addd}.editor-title span{color:#a798b9}textarea{background:#0a0810;color:#e1cff6}.editor-actions{background:#1a1422}.editor-actions span,.runtime-note{color:#b1a0c2}.output{color:#e0cbed}.back{color:#c7a7f2}.project-card{background:radial-gradient(ellipse at 95% 0,#4d315b22,transparent 70%),#131018}.project-card h2{font-weight:500}.project-card .chapter-label{color:#c7abdF}dialog{background:#15101e;border-color:#5d4772}dialog input{background:#0b0811;border-color:#624c79}dialog::backdrop{background:#030107bb}
@media(min-width:1500px){.welcome{min-height:350px}.welcome:before{inset:0 0 0 30%}}
@media(max-width:800px){nav{gap:16px}.welcome{min-height:300px}.welcome:before{inset:0 -90px 0 15%;opacity:.58}.welcome:after{background:linear-gradient(90deg,#09090ef5,#09090ec9 45%,#09090e20),linear-gradient(0deg,#09090e,transparent 30%)}.modes{grid-template-columns:1fr}.mode{grid-template-columns:34px 1fr 12px}.mode .arrow{display:block}.workbench{gap:18px}.welcome h1{font-size:46px}}
@media(max-width:520px){.header-inner{min-height:74px}.academy-badge{font-size:8px}.beginner-label{display:none}nav{gap:6px}nav a{padding:17px 2px 15px;font-size:11px}#app{padding-top:27px}.welcome{margin-top:-27px;min-height:310px;padding:35px 0 30px;margin-bottom:23px}.welcome:before{inset:0 -120px 0 0;opacity:.5}.welcome:after{background:linear-gradient(90deg,#09090edb,#09090e99 65%,#09090e33),linear-gradient(0deg,#09090e,transparent 35%)}.welcome h1{font-size:38px;letter-spacing:-1.8px;line-height:1.12;margin-top:23px}.welcome p:not(.eyebrow){max-width:285px;font-size:12px}.welcome .eyebrow{font-size:9px;letter-spacing:1.4px}.progress-card{padding:22px}.progress-card h2{font-size:23px}.progress-meta{font-size:11px}.progress-bottom{gap:19px}.modes{gap:12px}.section-title>span{max-width:105px;text-align:right;line-height:1.5}.academy-head h2 span{display:block;margin:8px 0 0!important;font-size:11px!important}.chapter-title h3{font-size:12px}.chapter-title{min-width:0}.chapter-count{white-space:nowrap}.chapter-title p{font-size:10px}.lesson-copy,.project-card{padding:21px}h1{font-size:33px;letter-spacing:-1.2px}.primary{min-height:44px}.filters .filter{min-height:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.example,.hint{margin-top:20px;border:1px solid #3c304b;border-radius:6px;padding:13px 15px}.example summary,.hint summary{cursor:pointer;color:#cbb4ef;font-size:12px}.example p,.hint p{margin-top:12px;font-size:12px}.tip p{margin-top:8px;color:#dfcfee}.checks-heading{margin-top:23px;font-size:13px}.requirements{padding-left:18px;color:#bfb0ce;font-size:12px;line-height:1.9}.feedback{padding:20px 23px;margin-top:20px;border:1px solid #44334f;border-radius:8px;background:#17101f;color:#d6c4e9;font-size:13px;line-height:1.7}.feedback ul{list-style:none;padding:0;margin:12px 0}.feedback.success,.pass-notice{border-color:#3e7967;background:#10251e;color:#beefda}.feedback.error{border-color:#8b596a}.feedback p{font-size:12px}.check-pass{color:#a6dfc6}.check-fail{color:#ffc0c8}.pass-notice{padding:14px 20px;border:1px solid #3e7967;border-radius:6px;margin-bottom:24px;font-size:13px}.verified-note{color:#b3a1c6;font-size:12px;align-self:center}.editor-actions{flex-wrap:wrap}.editor-actions #run{margin-left:auto}textarea[readonly]{opacity:.75}