.brand small{font-size:8px;font-weight:400;letter-spacing:2px;color:#b8a0d1;margin-left:3px}.learning-hero{max-width:1500px;margin:auto;padding:95px 7% 110px;min-height:650px;position:relative}.learning-hero:after{content:'{ axio }';font:clamp(60px,10vw,150px) 'Space Grotesk',monospace;color:#d6b1ff18;position:absolute;right:7%;top:35%;transform:rotate(-12deg);pointer-events:none}.learning-notes{display:flex;gap:35px;margin-top:55px;font-size:10px;color:#b4a0c7;letter-spacing:1px}.workspace,.course-section{max-width:1550px;margin:auto;padding:50px 5% 80px}.workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:35px}.workspace-heading h2{font-size:35px}.workspace-heading .text-link{font-size:11px}.workspace-toolbar{display:flex;gap:12px;align-items:end;margin-bottom:20px;flex-wrap:wrap}.workspace-toolbar label{margin:0}.title-label{flex:1;min-width:210px}.mode-label{width:145px}.workspace-toolbar input,.workspace-toolbar select{padding:10px;margin-top:6px;font-size:12px}.secondary{display:inline-block;padding:12px 16px;background:#c49cf510;border:1px solid #a67cd244;color:#d8c5ed;border-radius:5px;font-size:11px;line-height:1.6}.secondary:hover{background:#c49cf524}.import-button{margin:0!important;white-space:nowrap;cursor:pointer}input[hidden]{display:none}.editor-split{display:grid;grid-template-columns:1fr 1fr;min-height:500px;border:1px solid #a382c333;border-radius:8px;overflow:hidden;background:#090712e8}.code-panel{min-width:0;border-right:1px solid #a382c333;display:flex;flex-direction:column}.panel-bar{height:58px;border-bottom:1px solid #a382c333;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;font-size:8px;letter-spacing:1.5px;color:#baa6d0}.panel-bar>div{display:flex;gap:8px;align-items:center}.panel-bar button{padding:7px 12px;font-size:10px;letter-spacing:0}.run{background:#ddc5ff;color:#261539;border:0;border-radius:4px}#code{width:100%;margin:0;border:0;border-radius:0;background:#08071188;padding:23px;color:#ded0f3;min-height:425px;flex:1;resize:vertical;font:13px/1.9 Consolas,monospace;tab-size:4;white-space:pre;overflow-wrap:normal;overflow:auto}#code:focus{outline:1px solid #bc97e5;outline-offset:-2px}.editor-help{font-size:9px;line-height:1.6;margin:0;padding:10px 18px;color:#9c89b2}.preview-panel{min-width:0;display:flex;flex-direction:column}#preview{height:340px;position:relative;overflow:hidden;flex:1;background:radial-gradient(at 50% 70%,#28143c,#090712)}#preview iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.preview-placeholder{display:grid;align-content:center;justify-items:center;text-align:center;height:100%;padding:30px}.preview-placeholder>span{font-size:50px;color:#b28ad9}.preview-placeholder h3{font-size:20px;margin-top:15px}.preview-placeholder p{font-size:12px;color:#9d87b4}#output{margin:0;padding:18px;min-height:120px;max-height:190px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#07060d;border-top:1px solid #a382c333;color:#cfbce7;font:11px/1.8 Consolas,monospace}.workspace-status{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:10px 0;font-size:11px;color:#bfa8d4}.workspace-status>span{white-space:nowrap}.share-panel{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;border:1px solid #a382c333;background:#aa7dd908;border-radius:8px;padding:25px;margin:25px 0 45px}.share-panel h3{font-size:20px}.share-panel p{font-size:12px;color:#b09bc6;max-width:550px}.share-panel>div:last-child{display:flex;flex-wrap:wrap;gap:12px;justify-content:end}.share-panel .primary{font-size:11px}.share-panel input{font-size:11px;margin-top:0}.saved-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.project-grid,.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:25px}.project-card,.course-card{padding:25px;border:1px solid #a382c333;background:#100b1bd9;border-radius:8px;overflow-wrap:anywhere}.project-card h3,.course-card h3{font-size:20px;margin:13px 0}.project-card p,.course-card p{font-size:12px;color:#ad98c3}.project-card .secondary,.course-card .secondary{margin:8px 8px 0 0}.project-card .badge{font-size:8px;color:#d1adee;letter-spacing:1.2px}.course-section>h2{margin:25px 0}.course-card pre{font:11px/1.7 Consolas,monospace;background:#080611;padding:15px;border-radius:4px;white-space:pre-wrap;color:#d1b6ed}.course-card .eyebrow{font-size:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.error{color:#ffb6c5!important}.project-card input{width:auto;display:inline;margin:0}.course-section{min-height:70vh}.course-section .intro{max-width:600px}@media(max-width:1000px){.project-grid,.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-toolbar{gap:10px}.editor-split{grid-template-columns:1fr}.code-panel{border-right:0;border-bottom:1px solid #a382c333}#code{min-height:340px}#preview{height:350px;flex:none}}@media(max-width:650px){.learning-hero{padding-top:55px;min-height:610px}.learning-hero h1{font-size:59px}.learning-hero:after{top:75%;font-size:60px}.learning-notes{flex-direction:column;gap:12px;margin-top:35px}.workspace-heading{align-items:start;flex-direction:column}.workspace-heading h2{font-size:29px}.workspace-toolbar .secondary{padding:10px;font-size:10px}.workspace-toolbar .title-label{width:100%;flex:auto}.mode-label{flex:1}.project-grid,.course-grid{grid-template-columns:1fr}.share-panel{grid-template-columns:1fr;gap:15px;padding:20px}.share-panel>div:last-child{justify-content:start}.workspace-status{align-items:start;flex-direction:column;gap:0}.saved-heading{align-items:start;flex-direction:column;gap:4px}.workspace{padding-top:25px}.panel-bar{padding:10px}.editor-help{font-size:8px}#code{font-size:12px;padding:15px}.brand{gap:7px;font-size:14px}.brand small{font-size:7px}footer{margin-top:20px}}
/* Interactive learning: mission control and guided challenges. */
.mission-hub{max-width:1420px;margin:auto;padding:0 7% 65px}.mission-hub-heading{display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid #b594d533;padding-top:55px}.mission-hub-heading h2{font-size:42px;margin-top:17px}.mission-hub-heading p{font-size:13px;color:#b09bc6;max-width:480px}.progress-summary{display:flex;flex-direction:column;min-width:200px;gap:8px;padding:22px 25px;border:1px solid #b594d52b;background:#170f25b3;border-radius:10px}.progress-summary strong{font:35px 'Space Grotesk',sans-serif;color:#e9d5ff}.progress-summary>span{font-size:11px;color:#cfb9e2}.progress-summary small{font-size:9px;color:#9c87b2}.progress-summary progress{width:100%;height:5px;margin:8px 0;accent-color:#b995ed;border:0;border-radius:8px}.progress-summary progress::-webkit-progress-bar{background:#33213f;border-radius:8px}.progress-summary progress::-webkit-progress-value{background:linear-gradient(90deg,#875ccb,#e4c9ff);border-radius:8px}.mission-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:30px 0 50px}.mission-card{display:flex;flex-direction:column;align-items:start;text-align:left;min-height:220px;background:linear-gradient(145deg,#29183bba,#100c1de6);border:1px solid #b594d52b;border-radius:10px;padding:25px;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s;color:#eee0ff;overflow:hidden}.mission-card:after{content:'✧';position:absolute;top:16px;right:22px;color:#ad80e35c;font-size:40px;transition:transform .4s}.mission-card:hover{transform:translateY(-6px);border-color:#b594d59c;box-shadow:0 14px 40px #0003}.mission-card:hover:after{transform:rotate(45deg)}.mission-number{font:12px 'Space Grotesk',sans-serif;color:#c3a4e1;margin-bottom:33px}.mission-topic{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#ab94bf}.mission-card strong{font:500 21px/1.35 'Space Grotesk',sans-serif;display:block;margin:10px 0 25px}.mission-launch{margin-top:auto;font-size:10px;color:#dac2f3}.mission-card.completed{border-color:#97d0ba55;background:linear-gradient(145deg,#1c333044,#100c1de6)}.mission-card.completed .mission-number{color:#a4e0c0}.playground{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;padding:38px;border:1px solid #b594d52b;border-radius:12px;background:linear-gradient(120deg,#21132d99,#0d0918e6)}.playground h3{font-size:27px;margin:20px 0 12px}.playground p{font-size:12px;color:#b09bc6;margin-bottom:25px}.playground label{max-width:320px;margin-bottom:20px}.playground .primary{font-size:12px;border:0;padding:14px 20px}.playground output{float:right;color:#d6b5f6}.playground input[type=range]{padding:0;height:25px;accent-color:#c2a0ef;border:0;background:transparent;cursor:pointer}.quick-terminal{border:1px solid #b594d52b;background:#090610;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0004;min-width:0}.quick-terminal .panel-bar{font-size:8px}#quick-code{margin:0;padding:25px;color:#d6b4f6;font:12px/1.9 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;min-height:140px}#quick-output{margin:0;padding:25px;color:#a6dcc0;font:12px/1.9 Consolas,monospace;border-top:1px solid #b594d52b;min-height:180px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}.challenge-panel{padding:25px 30px;border:1px solid #c2a0ef55;border-radius:10px;margin-bottom:25px;background:linear-gradient(110deg,#30203faa,#150c22e6)}.challenge-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.challenge-top .secondary{font-size:10px}.challenge-panel h3{font-size:26px;margin:15px 0 10px}.challenge-panel>p{font-size:13px;color:#d0bedf;max-width:850px;line-height:1.8}.challenge-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}.challenge-actions .primary{border:0;font-size:11px;padding:13px 18px}.challenge-actions .secondary{padding:11px 15px}.hint-text{border-left:2px solid #c2a0ef;padding:10px 18px;background:#bd96e80b;border-radius:0 5px 5px 0;margin-top:20px}.mission-success{color:#ace0c2!important}.challenge-panel #challenge-feedback{margin-bottom:0;font-size:12px;min-height:22px}.course-mission-link{margin:25px 0}.learning-hero{min-height:540px;padding-bottom:75px}.learning-hero h1{font-size:clamp(65px,7.3vw,105px)}.learning-hero:after{color:#d6b1ff12}.learning-notes{margin-top:35px}@media(prefers-reduced-motion:reduce){.mission-card:hover{transform:none}.mission-card:hover:after{transform:none}}@media(max-width:1000px){.mission-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.playground{gap:25px;padding:28px}.mission-hub{padding-inline:5%}.mission-hub-heading h2{font-size:35px}}@media(max-width:650px){.mission-hub-heading{align-items:start;flex-direction:column;gap:20px;padding-top:35px}.progress-summary{width:100%;min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 18px;padding:18px 20px}.progress-summary strong{grid-row:span 2;font-size:30px}.progress-summary progress{margin:3px 0}.progress-summary small{grid-column:2}.mission-cards{gap:12px;margin-top:20px}.mission-card{padding:18px;min-height:195px}.mission-card strong{font-size:18px}.mission-number{margin-bottom:28px}.mission-card:after{font-size:30px;right:14px}.playground{grid-template-columns:1fr;padding:24px;gap:25px}.playground h3{font-size:23px}.playground label{max-width:none}#quick-code,#quick-output{font-size:11px;padding:18px}.challenge-panel{padding:20px}.challenge-panel h3{font-size:23px}.challenge-top{gap:12px}.challenge-top .eyebrow{font-size:7px}.challenge-actions{gap:9px}.challenge-actions .secondary{font-size:10px}.learning-hero{padding-top:55px;min-height:490px}.learning-hero h1{font-size:62px}.learning-hero:after{display:none}.learning-notes{gap:10px;margin-top:25px}.mission-hub-heading h2{font-size:33px}}