:root{color-scheme:dark;--bg:#090e1d;--surface:#111a2d;--panel:#121e33;--border:#293951;--txt:#edf4ff;--muted:#94a6c1;--cyan:#42d9c1;--blue:#599bfb;--amber:#f7ba63;--bad:#f68b9a}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.layout{display:flex;min-height:100vh}.sidebar{width:252px;flex:0 0 252px;background:linear-gradient(180deg,#111c31,#0c1627);border-right:1px solid #27354b;padding:26px 16px;display:flex;flex-direction:column;gap:18px;min-height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:5px 5px 16px}.brand-icon{width:43px;height:43px;border-radius:13px;background:linear-gradient(140deg,#50e0cc,#688bfc);color:#071e2b;font-size:29px;text-align:center;line-height:43px;box-shadow:0 5px 24px #34cdbc25}.brand strong{font-size:19px;letter-spacing:-.6px}.brand strong span{color:#52dcc6}.brand small{display:block;font-size:9px;letter-spacing:1.35px;font-weight:800;color:#88a7c6}.course-tag{border:1px solid #2d495a;background:#142938;border-radius:9px;padding:10px 8px;color:#a8e6d9;font-size:10px;font-weight:800;letter-spacing:.5px}.dot,.online-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#48dab7;margin-right:5px}.side-heading{margin-top:6px;display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1.2px;color:#90a5c1}.side-heading span{color:#54ddca}.progress-bar{height:7px;background:#263248;border-radius:12px;overflow:hidden;margin-top:-11px}.progress-bar div{height:100%;width:0;background:linear-gradient(90deg,#48d2c0,#76a8ff);transition:width .3s}.lesson-nav{display:flex;flex-direction:column;gap:8px}.nav-item{display:flex;align-items:center;gap:11px;text-align:left;width:100%;background:transparent;border:1px solid transparent;border-radius:11px;padding:12px 10px;color:#abc0d7}.nav-item .nav-num{flex:0 0 32px;width:32px;height:32px;border:1px solid #354963;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#9eb5d5;font-weight:800;font-size:11px}.nav-item .nav-name{font-size:12px;font-weight:800;display:block}.nav-item small{display:block;font-size:10px;margin-top:3px;color:#7f97b3}.nav-item.active{border-color:#2f7976;background:linear-gradient(110deg,#163c47,#1c304c);color:#e8fffe}.nav-item.active .nav-num{background:#235a61;color:#6fffe5;border-color:#399989}.nav-item.done .nav-num{background:#155e51;border-color:#258a76;color:#6cf0c8}.nav-item:disabled{opacity:.50}.sidebar-bottom{margin-top:auto}.sidebar-tip{display:flex;flex-direction:column;gap:5px;padding:16px;background:#18233b;border:1px solid #2c3951;border-radius:13px}.sidebar-tip span{font-size:23px}.sidebar-tip strong{font-size:12px}.sidebar-tip small{font-size:11px;color:#a0b3ce}.local-note{display:block;margin:17px 4px 0;font-size:10px;color:#7186a3}.main{min-width:0;flex:1}.topbar{height:69px;border-bottom:1px solid #243049;background:#0c1425;display:flex;align-items:center;justify-content:space-between;padding:0 31px;gap:15px}.breadcrumbs{font-size:11px;letter-spacing:1px;color:#93a6c0;font-weight:750}.breadcrumbs span{color:#3b607c;margin:0 7px}.breadcrumbs b{color:#e8f2ff}.top-right{font-size:10px;letter-spacing:.8px;font-weight:800;color:#9fb1cb;white-space:nowrap}.top-right .online-dot{width:6px;height:6px}.divider-vertical{margin:0 14px;border-left:1px solid #354158}.top-right #xp-indicator{color:#f3c47e}.content{max-width:1510px;margin:auto;padding:29px 30px 32px}.intro-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#52dbbf;font-weight:850}.intro-row h1{font-size:27px;margin:7px 0 4px;line-height:1.2;letter-spacing:-.7px}.intro-row p{margin:0;color:#9daec6;font-size:13px}.mission-badge{border:1px solid #3a5274;border-radius:50px;padding:7px 12px;color:#c0d7ef;background:#15253b;font-size:10px;letter-spacing:1px;font-weight:850;white-space:nowrap}.notice{display:flex;gap:14px;background:linear-gradient(90deg,#123342,#172940);border:1px solid #286477;border-radius:11px;padding:12px 17px;margin-bottom:19px;align-items:center}.notice span{font-size:23px}.notice p{margin:0;color:#b6d6e5;font-size:12px}.notice b{color:#f0fdff}.notice strong{color:#5be3cb}.notice code{color:#f9bd95}.workspace{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,1fr);gap:15px;align-items:stretch}.panel{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);min-width:0}.panel-head{height:43px;padding:0 15px;border-bottom:1px solid #263750;background:#152239;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:850;letter-spacing:.85px;color:#b4d7f1}.panel-head small{font-weight:500;letter-spacing:0;color:#7794b3}.panel-actions{display:flex;align-items:center;gap:12px}.status{font-size:9px;color:#59dab1;white-space:nowrap}.quiet-btn{background:none;border:none;color:#97b4d4;font-size:10px;white-space:nowrap}.quiet-btn:hover{text-decoration:underline;color:#defaff}.game-holder{background:#0b1729;min-height:340px;padding:12px}.game-holder iframe{border:1px solid #34506d;border-radius:8px;width:100%;height:320px;display:block;background:#0d1a30}.panel-footer{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #28364c;color:#859bb6;font-size:10px}.panel-footer kbd{border-radius:4px;background:#25354b;padding:1px 5px;color:#c6daf2;margin:0 2px}.tutorial-panel{display:flex;flex-direction:column}.tutorial-inner{padding:16px 18px;display:flex;flex-direction:column;gap:8px}.concept-label{font-size:10px;color:#54dbc6;font-weight:800;letter-spacing:1px}.tutorial-inner h2{margin:0;color:#f0f6ff;font-size:16px}.tutorial-inner>p{margin:0 0 4px;color:#aec1d7;font-size:12px}.goal-box{background:#1e3450;border-left:3px solid #56dec1;border-radius:5px;padding:10px 12px;margin:5px 0}.goal-box>span{color:#7debd9;font-size:10px;font-weight:800;letter-spacing:.7px}.goal-box p{margin:5px 0 0;color:#e8f5fd;font-size:12px;font-weight:650}.steps-heading{font-size:10px;font-weight:850;color:#b7d2e9;letter-spacing:.7px;margin-top:2px}.tutorial-inner ol{margin:0 0 3px;padding-left:22px;color:#b8c9df;font-size:12px}.tutorial-inner li{margin-bottom:6px}.tutorial-inner code,.result-body code,.what-body code{font-size:11px;color:#9ff4de;background:#21334b;border-radius:4px;padding:1px 3px}.tutor-box{background:#1b2945;border:1px solid #344668;border-radius:9px;padding:11px 12px;margin-top:auto}.tutor-heading{font-size:11px;color:#b5a2ff;font-weight:850}.tutor-box p{font-size:11px;color:#b2c4da;margin:7px 0 10px}.hint-button{border:1px solid #485777;border-radius:7px;background:#283d61;color:#e4edff;font-size:11px;font-weight:700;padding:8px 11px;width:100%}.hint-button:hover{background:#324d76}.editor-panel{margin-top:15px}.js-pill{background:#42391d;border:1px solid #7b602c;color:#ffdc85;font-size:10px;padding:3px 7px;border-radius:5px}.editor-container{display:flex;min-height:300px;background:#0a1424;overflow:auto}.line-numbers{white-space:pre;text-align:right;padding:15px 12px 15px 13px;color:#607996;background:#0d1a2c;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;border-right:1px solid #26364d;min-width:45px;overflow:hidden}.editor-container textarea{border:none;outline:none!important;background:transparent;resize:vertical;width:100%;min-height:300px;color:#c9f5ec;padding:15px 15px;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:#152138;border-top:1px solid #28364f;color:#96a9c3;font-size:11px;flex-wrap:wrap}.editor-toolbar b{color:#89e9c7}.editor-buttons{display:flex;gap:9px;align-items:center}.btn-primary,.btn-secondary,.btn-next{border:0;border-radius:8px;padding:11px 15px;font-weight:850;font-size:12px}.btn-primary{background:#4adfc2;color:#092333;box-shadow:0 4px 16px #4adfc121}.btn-primary:hover{background:#75f5d8}.btn-secondary{border:1px solid #354863;background:#1a2942;color:#c5d5eb}.btn-secondary:hover{background:#294160}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}.result-body,.what-body{padding:16px}.result-body{min-height:100px}.muted{color:#91a5c2;margin:0;font-size:12px}.test-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;font-size:12px}.pass{color:#65eab6}.fail{color:#ff9eab}.error-line{border:1px solid #7a4653;background:#432531;color:#ffd1d7;padding:10px;border-radius:7px;font-size:12px;white-space:pre-wrap}.what-body p{font-size:12px;color:#b1c5dd;margin:0 0 14px}.end-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.end-actions>span{font-size:10px;color:#90a5bc}.btn-next{background:#79a7fe;color:#0a1e3b;white-space:nowrap}.finish-box{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:17px;background:linear-gradient(100deg,#124b4c,#263a60);border:1px solid #3f9d92;border-radius:12px;padding:20px 22px}.finish-box h2{margin:3px 0 5px}.finish-box p{font-size:12px;color:#c5e0e6;max-width:570px;margin:0}.finish-box .star{font-size:30px}.footer{text-align:center;color:#617b97;font-size:10px;margin-top:25px}.mobile-menu{display:none}@media(max-width:1200px){.sidebar{width:216px;flex-basis:216px}.content{padding:20px}.workspace{grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr)}.game-holder iframe{height:295px}}@media(max-width:940px){.sidebar{position:fixed;left:-265px;top:0;bottom:0;z-index:5;transition:left .2s;box-shadow:10px 0 35px #0007;overflow-y:auto}.sidebar.open{left:0}.mobile-menu{display:inline-block;background:#1d2c43;border:1px solid #334663;color:white;border-radius:7px;padding:5px 10px;font-size:18px}.workspace{grid-template-columns:1fr}.bottom-grid{grid-template-columns:1fr}.topbar{padding:0 17px}.content{padding:18px}.tutorial-inner{min-height:0}.tutorial-inner ol{columns:2}}@media(max-width:550px){.intro-row{align-items:flex-start}.intro-row h1{font-size:23px}.mission-badge{font-size:9px}.content{padding:14px}.notice{align-items:flex-start}.game-holder{min-height:0;padding:7px}.game-holder iframe{height:280px}.panel-footer{font-size:9px}.tutorial-inner ol{columns:1}.editor-toolbar{align-items:stretch}.editor-buttons{width:100%;flex-direction:column}.editor-buttons button{width:100%}.top-right{font-size:9px}.breadcrumbs{font-size:10px}.finish-box{flex-direction:column;align-items:stretch}.end-actions{flex-direction:column;align-items:stretch}.btn-next{width:100%}}
/* v0.3 — Curso de verdade: aula guiada + laboratório */
[hidden] { display: none !important; }
.welcome-lesson { margin-bottom: 24px; }
.welcome-topline { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:#54e3d3;margin:8px 0 13px; }
.welcome-topline span {font-size:10px;color:#b7c9e6;letter-spacing:.4px;}
.welcome-lesson>h1 {font-size:34px;line-height:1.16;letter-spacing:-.9px;margin:0 0 13px;max-width:960px;}
.welcome-lead {font-size:15px;line-height:1.65;color:#bed0e4;max-width:950px;margin:0 0 22px;}
.intro-teach-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.intro-teach-card{padding:23px 22px 17px;border:1px solid #344760;border-radius:13px;background:linear-gradient(155deg,#14243b,#101d31);}
.intro-teach-card.featured{background:linear-gradient(155deg,#164940,#152940);border-color:#348f87;}
.teach-emoji{font-size:31px;display:block;margin-bottom:12px;}
.intro-teach-card h2{font-size:17px;line-height:1.2;margin:0 0 10px;}
.intro-teach-card p{font-size:13px;line-height:1.6;color:#b7cee3;margin:0 0 13px;min-height:63px;}
.teach-analogy{border-top:1px solid #35485c;padding-top:12px;color:#a7f2d8;font-size:12px;font-weight:600;}
.intro-live-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;margin:0 0 14px;}
.intro-live-panel,.intro-code-panel,.explain-panel,.intro-quiz{border:1px solid #30435d;background:#111e32;border-radius:14px;padding:22px;min-width:0;}
.lesson-chip{font-size:10px;font-weight:850;letter-spacing:1.1px;color:#60e4d1;margin-bottom:10px;}
.intro-live-panel h2,.explain-panel h2,.intro-quiz h2{font-size:19px;margin:0 0 10px;line-height:1.4;}
.intro-live-panel p,.explain-panel p,.intro-quiz p{font-size:13px;color:#b9d0e5;line-height:1.7;margin:0 0 14px;}
.demo-stage{background:#0b162b;border-radius:10px;overflow:hidden;border:1px solid #314862;margin:15px 0;}
.demo-stage canvas{width:100%;height:auto;display:block;}
.demo-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.demo-controls button{font-size:12px;padding:10px 11px;}
.demo-controls span{font:11px ui-monospace,monospace;color:#a5cae3;padding-left:3px;}
.example-code,.deep-example pre{background:#0a1628;border:1px solid #2b415a;border-radius:11px;padding:19px;color:#e1f0ff;line-height:1.8;font-size:13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-x:auto;}
.code-comment{color:#8ba9c7}.code-kw{color:#7ae4cf}.code-num{color:#f4c77f}
.code-dictionary{margin:13px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.code-dictionary div{background:#1a2b43;padding:10px;border-radius:8px;}
.code-dictionary dt{font-size:12px;font-weight:850;color:#a8f8df;margin-bottom:5px;}
.code-dictionary dd{font-size:11px;color:#c3d4ea;line-height:1.5;margin:0;}
.explain-panel{margin-bottom:14px;}
.explain-panel p{max-width:1000px;}
.explain-panel code,.deep-lesson code{font-family:ui-monospace,Consolas,monospace;background:#203755;color:#a2f7de;padding:2px 4px;border-radius:3px;}
.flow-path{display:flex;justify-content:center;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px;background:#172b44;border-radius:9px;padding:15px;}
.flow-path span{background:#23405a;padding:8px 13px;border-radius:8px;font-size:12px;font-weight:700;color:#d3eeff;}
.flow-path b{color:#6ae2c7;font-size:16px;}
.intro-quiz{border-color:#327e7e;background:linear-gradient(125deg,#123a3e,#132239);display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:center;}
.intro-quiz h2{max-width:740px;}
.quiz-choices{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.quiz-choices button{border:1px solid #52718a;background:#22334d;color:#d4e6fc;border-radius:9px;font-size:12px;font-weight:750;padding:11px 16px;}
.quiz-choices button.selected{border-color:#5beed1;background:#185a58;color:#ecfff9;}
.quiz-feedback{font-size:12px;color:#c0d3e8;min-height:20px;margin-top:10px;}
.quiz-feedback.correct{color:#9cf1c4;}.quiz-feedback.incorrect{color:#ffbfa9;}
.intro-quiz>.btn-primary{justify-self:end;align-self:end;padding:13px 16px;}
.intro-quiz>.btn-primary:disabled{opacity:.45;cursor:not-allowed;}
.deep-lesson{border:1px solid #2c6b72;border-radius:13px;background:linear-gradient(125deg,#122c3b,#14233b);margin-bottom:15px;overflow:hidden;}
.deep-lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px;}
.deep-lesson-heading h2{font-size:18px;line-height:1.3;margin:0;color:#f0fbff;}
.deep-lesson-heading .btn-secondary{font-size:11px;padding:9px 13px;white-space:nowrap;}
.deep-lesson-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:22px;padding:0 22px 22px;}
.deep-what p{font-size:13px;line-height:1.75;color:#bcd3e9;margin:0 0 12px;}
.deep-what strong{color:#f1fcff;}
.deep-example{background:#0b1b31;border-radius:10px;border:1px solid #314862;padding:15px;}
.deep-example p{font-size:12px;line-height:1.7;color:#c1d6e6;margin:5px 0 15px;}
.deep-example pre{margin:7px 0 14px;padding:13px;font-size:12px;line-height:1.65;}
@media(max-width:1100px){.intro-quiz{grid-template-columns:1fr;}.intro-quiz>.btn-primary{justify-self:start;margin-top:12px;}}
@media(max-width:900px){.intro-teach-grid{grid-template-columns:1fr 1fr;}.intro-live-grid,.deep-lesson-content{grid-template-columns:1fr;}.intro-teach-card p{min-height:0;}}
@media(max-width:580px){.welcome-lesson>h1{font-size:25px;}.welcome-topline{align-items:start;flex-direction:column;}.intro-teach-grid{grid-template-columns:1fr;}.intro-teach-card{padding:18px;}.intro-live-panel,.intro-code-panel,.explain-panel,.intro-quiz{padding:16px;}.deep-lesson-heading{align-items:start;flex-direction:column;gap:11px;padding:15px;}.deep-lesson-content{padding:0 15px 16px;}.code-dictionary{grid-template-columns:1fr 1fr;}.flow-path{gap:8px;}.flow-path span{font-size:11px;}}

/* GameLab 0.4: backup e orientação após conclusão */
.backup-buttons{display:flex;flex-direction:column;gap:7px;margin-top:12px}.backup-buttons button,.backup-buttons label{cursor:pointer;display:block;text-align:center;border-radius:8px;background:#233451;border:1px solid #365272;color:#d5e9ff;padding:8px 5px;font-size:11px;font-weight:700}.backup-buttons button:hover,.backup-buttons label:hover{background:#345175}.publish-guide{margin-top:17px;padding:22px;background:#142a38;border:1px solid #3d7a79;border-radius:12px}.publish-guide h2{margin:0 0 9px;font-size:18px}.publish-guide p{font-size:13px;color:#b5d3da}.publish-guide li{font-size:13px;color:#cbe1e9;margin-bottom:9px}.publish-guide .muted{color:#9aabc2}