@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');:root{font-family:'DM Sans',Arial,sans-serif;background:#090b13;color:#f1f4fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden}button,select,textarea,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.header{position:relative;z-index:2;padding:25px max(5vw,25px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;background:#090b13cc}.brand{font:700 24px 'Space Grotesk',sans-serif;letter-spacing:-1px}.brand span:not(.mark){color:#a79bff}.mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#7461f4;margin-right:8px}.header nav{display:flex;align-items:center;gap:30px;color:#aeb5c7;font-size:14px}.header nav a:hover{color:#fff}button{border-radius:10px;background:#191e2e;border:1px solid #343b54;padding:12px 17px;color:#f7f7fc}.primary{background:#7e6bf4;border-color:#9786ff;color:white;font-weight:700;box-shadow:0 6px 35px #7661fb33}.primary:hover{background:#9181fc}.outline,.ghost{background:transparent}.ghost{border-color:#46506d}#pointerGlow{position:fixed;width:400px;height:400px;border-radius:50%;pointer-events:none;left:0;top:0;z-index:0;background:radial-gradient(circle,#7865f224 0%,transparent 65%);transform:translate(-50%,-50%)}.hero{min-height:660px;max-width:1460px;margin:auto;padding:85px max(5vw,25px);display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;position:relative;z-index:1}.eyebrow{font-size:12px;letter-spacing:.19em;color:#ad9cff;font-weight:800}.hero h1{font:700 clamp(54px,6.6vw,105px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.075em;max-width:760px;margin:23px 0}.hero h1 em{font-style:normal;color:#a596ff}.hero p{max-width:610px;font-size:18px;line-height:1.8;color:#aeb8c9}.actions{display:flex;gap:13px;margin-top:35px;flex-wrap:wrap}.actions button{padding:15px 24px}.micro{margin-top:35px;font-size:12px;color:#6e7d9e}.orbit{width:min(30vw,390px);height:min(30vw,390px);margin:auto;border:1px solid #4f47887a;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 0 120px #694bd829, inset 0 0 130px #6051b118;animation:turn 38s linear infinite}.orbit:before,.orbit:after{content:'';position:absolute;inset:26px;border:1px dashed #67609844;border-radius:50%}.orbit:after{inset:63px}.orbit-inner{width:160px;height:160px;border-radius:38px;background:linear-gradient(140deg,#a596ff,#5542b7);box-shadow:0 15px 80px #7e67ed66;display:grid;place-items:center;transform:rotate(-12deg)}.orbit-inner span{font:700 47px 'Space Grotesk',sans-serif}.orbit i{position:absolute;width:13px;height:13px;background:#b6acff;border-radius:50%;top:12%;left:14%;box-shadow:0 0 25px #9989fa}.orbit i:nth-of-type(2){top:80%;left:90%;width:9px;height:9px}.orbit i:nth-of-type(3){top:93%;left:23%;width:6px;height:6px}@keyframes turn{to{transform:rotate(360deg)}}.section{padding:95px max(5vw,25px);max-width:1460px;margin:auto;position:relative;z-index:1}.section-intro h2{font:700 clamp(30px,3vw,43px)/1.18 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:14px 0}.section-intro p{color:#9cabc2}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:37px}.tile{background:#111625;border:1px solid #283046;border-radius:19px;padding:30px;transition:.2s;min-height:225px}.tile:hover{border-color:#806ee8;transform:translateY(-5px)}.tile .number{color:#a899ff}.tile h3{font:700 23px 'Space Grotesk',sans-serif}.tile p{color:#a2afc4;line-height:1.6}.workbench{margin-top:35px;background:#111625;border:1px solid #343c53;border-radius:17px;overflow:hidden}.bench-top{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#1a2030;border-bottom:1px solid #333c53}.dots{display:flex;gap:6px;margin-right:9px}.dots b{width:9px;height:9px;border-radius:50%;background:#ff767d}.dots b:nth-child(2){background:#ffbf72}.dots b:nth-child(3){background:#75d3a1}#filelabel{margin-right:auto;color:#b9c3db;font:13px Consolas,monospace}select{background:#0c1220;border:1px solid #364361;border-radius:8px;color:#dbe5f6;padding:10px}.small{padding:9px 12px;font-size:13px}.bench-grid{display:grid;grid-template-columns:1.15fr 1fr;min-height:330px}.editor-wrap{position:relative;background:#0a101e;min-width:0;height:360px}.editor-wrap pre,.editor-wrap textarea{position:absolute;inset:0;margin:0;border:0;outline:0;padding:22px;white-space:pre;overflow:auto;width:100%;height:100%;font:14px/1.6 Consolas,Monaco,monospace;tab-size:4}.editor-wrap pre{pointer-events:none;color:#b6d0ff;z-index:0}.editor-wrap pre code{font:inherit;white-space:inherit}.editor-wrap textarea{resize:none;color:transparent;caret-color:#fff;background:transparent;-webkit-text-fill-color:transparent;z-index:1}.editor-wrap textarea::selection{background:#6d68b866}.token.keyword{color:#ba9aff}.token.string{color:#a5e3a4}.token.function{color:#8abaff}.token.number{color:#f7bf75}.token.comment{color:#7489a6}.output-wrap{border-left:1px solid #34415d;background:#0c1322;min-width:0;display:flex;flex-direction:column}.panel-title{background:#171f32;padding:13px 17px;display:flex;justify-content:space-between;align-items:center;color:#afc1d9;font-size:13px}.tiny{padding:5px 9px;font-size:12px}.output{padding:19px;color:#b1dabe;font:13px/1.7 Consolas,monospace;white-space:pre-wrap;overflow:auto;flex:1}#preview{flex:1;min-height:290px;border:0;background:white;width:100%}footer{border-top:1px solid #ffffff15;padding:25px 5vw;color:#718099;font-size:12px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.modal[hidden],.student[hidden]{display:none!important}.modal{position:fixed;inset:0;z-index:30;background:#050716c9;display:grid;place-items:center;padding:20px}.dialog{position:relative;width:min(450px,100%);padding:38px;background:#181f32;border:1px solid #4e5178;border-radius:20px;box-shadow:0 25px 100px #0008}.dialog h2{font:700 30px 'Space Grotesk',sans-serif}.dialog p,.hint{color:#a5b0c7;line-height:1.6}.dialog form label{display:block;margin:25px 0 17px}.dialog input{display:block;width:100%;margin-top:9px;padding:13px;border-radius:9px;background:#0d1323;border:1px solid #414a69;color:white}.dialog form button{width:100%}.close{position:absolute;right:19px;top:13px;background:transparent;border:0;font-size:27px}.hint{font-size:12px}.student{position:fixed;z-index:20;inset:0;background:#0b1020;overflow:auto;padding:40px 5vw}.student-box{max-width:1080px;margin:auto}.student h2{font:700 42px 'Space Grotesk',sans-serif}.student-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}.student-row article{border:1px solid #3c4c69;border-radius:13px;background:#151f32;padding:20px}.student-row p{color:#a7b3c7;line-height:1.6}.student-row button{margin-top:10px}.close-student{margin-bottom:50px}#lessonText{color:#d4e4f8;line-height:1.7;padding:20px 0}#logout{margin-top:20px}@media(max-width:850px){.hero{grid-template-columns:1fr;min-height:0;padding-top:65px}.orbit{width:220px;height:220px}.orbit-inner{width:95px;height:95px;border-radius:23px}.orbit-inner span{font-size:28px}.cards,.student-row,.bench-grid{grid-template-columns:1fr}.output-wrap{border-left:0;border-top:1px solid #34415d;min-height:230px}.header nav{gap:12px}.header nav a{display:none}}@media(prefers-reduced-motion:reduce){.orbit{animation:none}html{scroll-behavior:auto}}
/* Learning guidance, keyboard access and compact screens. */
[hidden]{display:none!important}
:focus-visible{outline:3px solid #c6baff;outline-offset:4px}
.editor-wrap textarea:focus-visible{outline:2px solid #a596ff;outline-offset:-3px}
.skip-link{position:fixed;top:8px;left:12px;transform:translateY(-160%);z-index:50;padding:12px;background:#7e6bf4;border-radius:8px}
.skip-link:focus{transform:none}
.lesson-panel{margin-top:28px;padding:24px;border:1px solid #6555a5;border-radius:16px;background:#181b32}
.lesson-panel h3{font-size:24px;margin:12px 0}
.lesson-panel p{line-height:1.7;color:#c0cce1}
.lesson-panel details{margin:16px 0}
.lesson-panel summary{cursor:pointer;color:#c5baff}
.editor-status{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12px;color:#b5c1d8;border-bottom:1px solid #343c53;flex-wrap:wrap}
#lessonProgress{width:min(420px,100%);height:12px;accent-color:#a596ff}
@media(max-width:600px){.bench-top{flex-wrap:wrap}.dots{display:none}#filelabel{flex-basis:100%}.bench-top select{flex:1;min-width:0}.header{padding:18px 16px}.brand{font-size:20px}.header nav button{padding:10px;font-size:12px}.section{padding:55px 18px}.hero{padding:55px 18px}.hero h1{font-size:52px}.dialog{padding:28px 22px}.student{padding:25px 18px}.student h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}#pointerGlow{display:none}}