@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--bg:#f8f9fb;--surface:#fff;--ink:#172337;--muted:#8991a0;--line:#e5e8ee;--accent:#ef704e;--editor:#fafbfe;--rail:#142339;--soft:#f1f3f7;--green:#3f9c7a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ee9c77;outline-offset:3px}button{color:inherit}a{text-decoration:none;color:inherit}.rail{width:76px;height:100vh;background:var(--rail);position:fixed;display:flex;align-items:center;flex-direction:column;z-index:2}.brand-mark{font-weight:800;font-size:33px;color:#fff;letter-spacing:-5px;margin:22px 5px 48px 0}.brand-mark span{color:#f28b69}.rail-item{width:44px;height:44px;background:none;border:0;color:#8493a9;font-size:24px;border-radius:10px;margin-bottom:15px}.rail-item.active{color:#fff;background:#2b3c52;box-shadow:inset 3px 0 #ef7956}.rail-item:hover{background:#2b3c52}.rail-bottom{margin-top:auto;padding-bottom:28px}.avatar{display:grid;place-items:center;border:1px solid #586578;color:#d1d8e2;border-radius:50%;width:31px;height:31px;font-size:12px}.shell{margin-left:76px}header{height:83px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:0 42px}.wordmark{font-family:Manrope,sans-serif;font-size:23px;font-weight:800;letter-spacing:-1px}.wordmark>span:first-child{font-weight:500;color:#6a7485}.beta{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:1.3px;background:var(--soft);padding:4px 6px;margin-left:10px;border-radius:4px;color:#838c9b;vertical-align:middle}.header-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.local-dot{background:#62ad89;width:6px;height:6px;border-radius:50%}.icon-button{border:0;background:transparent;font-size:21px;color:var(--muted);padding:6px 10px;border-radius:6px}.icon-button:hover{background:var(--soft)}.header-right .icon-button{margin-left:20px;border-left:1px solid var(--line);border-radius:0}main{max-width:1550px;margin:auto;padding:29px 42px 0}.breadcrumb{font-size:10px;letter-spacing:1.3px;color:var(--muted);font-weight:600;display:flex;gap:13px}.breadcrumb span{color:#c4c9d2}.intro{display:flex;justify-content:space-between;align-items:center;margin:32px 0 32px}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--accent)}h1{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(25px,2.6vw,37px);letter-spacing:-1.4px;margin:9px 0 9px}h1>span{color:var(--accent)}.intro p{color:#858d9b;font-size:13px;margin:0}.intro-badge{display:flex;gap:13px;align-items:center;font-size:11px;line-height:1.9;color:var(--muted);padding-right:7px}.intro-badge>span{font-size:40px;color:#b2b9c6;transform:rotate(-15deg)}.intro-badge strong{color:#5c6879;font-weight:500}.workspace-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.language-switch{padding:4px;display:flex;gap:3px;background:#ebedf2;border:1px solid #e4e7ec;border-radius:8px}.language-switch button{display:flex;align-items:center;gap:9px;background:none;border:0;border-radius:5px;color:#7b8493;padding:9px 21px;font-weight:600;font-size:12px}.language-switch button.selected{background:var(--surface);box-shadow:0 1px 4px #18233813;color:var(--ink)}.language-icon{font-size:10px;font-weight:700;letter-spacing:-.7px}.python{color:#4b85a8}.cpp{color:#647bc7}.toolbar-actions{display:flex;gap:15px}.text-button{background:none;border:0;color:#7f8897;font-size:12px;padding:8px;display:inline-flex;gap:8px;align-items:center}.text-button:hover{color:var(--accent)}.workspace{display:grid;grid-template-columns:1.13fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:425px;box-shadow:0 5px 18px #17233703}.editor-pane{min-width:0;display:flex;flex-direction:column;background:var(--editor);border-right:1px solid var(--line)}.pane-header,.output-header{height:49px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.file-tab{height:100%;display:flex;align-items:center;gap:9px;padding:0 21px;font-size:11px;border-right:1px solid var(--line);border-top:2px solid var(--accent);background:var(--editor);min-width:148px}.file-dot{width:7px;height:7px;border-radius:2px;background:#588eae}.file-close{font-size:6px;color:#bec4ce;margin-left:15px}.saved{font-size:9px;color:#a0a7b3;margin-right:17px}.editor-area{display:flex;flex:1;position:relative;min-height:330px;overflow:hidden}.line-numbers{padding:23px 15px 23px 21px;font:12px/24px 'SFMono-Regular',Consolas,monospace;text-align:right;color:#bcc2ce;min-width:51px;overflow:hidden;user-select:none;white-space:pre}#editor{width:100%;flex:1;background:transparent;color:var(--ink);border:0;resize:none;font:12px/24px 'SFMono-Regular',Consolas,monospace;tab-size:4;padding:23px 18px 23px 5px;outline:0;min-height:330px;white-space:pre;overflow:auto}#editor::selection{background:#eebda87a}.editor-footer,.output-footer{height:33px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:9px;color:#98a0af;background:var(--surface)}.footer-divider{color:#c5cad3;padding:0 10px}.output-pane{display:flex;flex-direction:column;min-width:0;background:var(--surface)}.output-tabs{height:100%;display:flex;margin-left:18px;gap:22px}.output-tabs button{border:0;background:none;color:#929baa;font-size:11px;padding:0 1px;position:relative}.output-tabs button.active{color:var(--ink);font-weight:600}.output-tabs button.active:after{content:'';height:2px;background:var(--accent);position:absolute;bottom:-1px;left:0;right:0}.output-header>.icon-button{font-size:19px;margin-right:9px}.tiny-label{font-size:8px;color:#a2aab7;background:var(--soft);padding:2px 4px;border-radius:3px;margin-left:3px}#outputPanel,#inputPanel{flex:1;min-height:330px;position:relative}.empty-output{height:100%;min-height:330px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:8px}.terminal-icon{width:53px;height:45px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);box-shadow:4px 4px 0 var(--bg);font-family:monospace;font-size:22px;color:#9da6b6;border-radius:8px;margin-bottom:14px}.empty-output h2{font-size:13px;font-weight:600;margin:9px 0}.empty-output p{text-align:center;font-size:11px;color:#9aa2af;line-height:1.9;margin:0}.key-hint{margin-top:23px;font-size:9px;color:#a4acb8}kbd{font-family:inherit;font-size:9px;border:1px solid var(--line);border-radius:4px;padding:2px 5px;background:var(--surface);color:#8e98a8}.output-footer i{width:5px;height:5px;border-radius:50%;background:#8aad9e;display:inline-block;margin-right:5px}#output{font:12px/1.8 'SFMono-Regular',Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;position:absolute;inset:0;overflow:auto;margin:0;padding:23px;color:var(--ink)}#output.error{color:#ca624e}#inputPanel{padding:23px}#inputPanel label{font-size:12px;font-weight:600}#inputPanel p,.input-note{font-size:11px;line-height:1.7;color:var(--muted)}#stdin{width:100%;height:190px;background:var(--editor);border:1px solid var(--line);border-radius:5px;resize:vertical;color:var(--ink);font:12px/1.8 monospace;padding:13px;outline-color:var(--accent)}.input-note{display:block;margin-top:9px}.run-bar{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.run-note{display:flex;align-items:center;gap:8px;color:#9aa2af;font-size:10px}.shield{font-size:19px;color:#9eabb9}.run-actions{display:flex;gap:18px;align-items:center}.run-button{background:var(--accent);border:1px solid #e76c4b;border-radius:7px;color:white;display:flex;align-items:center;gap:12px;padding:12px 18px;font-size:12px;font-weight:600;box-shadow:0 3px 5px #e8744e17}.run-button:hover{background:#dd613f}.run-button>span{font-size:10px}.run-button kbd{background:#ffffff1c;color:#fff;border-color:#ffffff2e;margin-left:11px}.run-button:disabled{opacity:.6;cursor:wait}.learning-strip{display:flex;align-items:center;gap:17px;border:1px solid #e8e5de;background:#f7f5ef;border-radius:8px;margin-top:33px;padding:20px 23px}.spark{font-size:24px;color:#bd9e69}.learning-strip strong{font-size:11px;font-weight:600;color:#6b6456}.learning-strip p{font-size:10px;color:#a59b8a;margin:6px 0 0}.learning-strip button{margin-left:auto;background:none;border:0;font-size:10px;color:#8b7b60;white-space:nowrap}.learning-strip button span{margin-left:10px}footer{padding:24px 0;display:flex;justify-content:space-between;font-size:9px;color:#a3aab6}dialog{border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);width:min(510px,90vw);padding:27px;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#14233966;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-family:Manrope,sans-serif;font-size:24px;margin:8px 0}dialog>p{color:var(--muted);font-size:12px}#exampleList{display:grid;gap:9px;margin-top:22px}#exampleList button{padding:16px;background:var(--editor);border:1px solid var(--line);border-radius:7px;text-align:left;display:flex;justify-content:space-between}#exampleList button:hover{border-color:var(--accent)}#exampleList small{color:var(--muted)}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);border-radius:8px;padding:12px 20px;font-size:12px;z-index:4}[hidden]{display:none!important}body.dark{--bg:#111b29;--surface:#192536;--ink:#e1e7ef;--muted:#8795aa;--line:#2c394c;--editor:#152131;--soft:#263347;--rail:#0b1421}.dark .language-switch{background:#0f1b2b;border-color:var(--line)}.dark .learning-strip{background:#28281f;border-color:#3e3b2c}.dark .learning-strip strong{color:#d3c6ac}.dark .learning-strip p{color:#a79b85}@media(min-width:1500px){main{padding-top:38px}.intro{margin:40px 0}.workspace{min-height:510px}.editor-area,#editor{min-height:415px}}@media(max-width:1000px){header{padding:0 25px}main{padding:25px 25px 0}.intro-badge{display:none}.saved{display:none}.file-tab{min-width:130px}.workspace{grid-template-columns:1fr 1fr}.learning-strip{padding:17px}.learning-strip p{max-width:310px}}@media(max-width:700px){.rail{width:52px}.brand-mark{font-size:27px}.rail-item{width:36px;height:36px}.shell{margin-left:52px}header{padding:0 17px;height:66px}.wordmark{font-size:19px}.header-right>span{display:none}.header-right .icon-button{margin:0;border:0}main{padding:22px 16px 0}.intro{margin:26px 0}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:27px;line-height:1.3;max-width:290px}.intro p{font-size:12px}.toolbar-actions{gap:0}.text-button{font-size:11px}.language-switch button{padding:8px 11px;gap:6px}.workspace{grid-template-columns:1fr}.editor-pane{border-right:0;border-bottom:1px solid var(--line)}.editor-area,#editor{min-height:280px}#outputPanel,#inputPanel,.empty-output{min-height:240px}.run-note{display:none}.run-bar{justify-content:flex-end}.run-actions{gap:8px}.learning-strip{margin-top:25px;gap:11px}.learning-strip button{font-size:0}.learning-strip button span{font-size:18px}.learning-strip p{line-height:1.7}footer{line-height:1.8}footer>span:last-child{display:none}}

/* Language picker remains scrollable on smaller screens. */
.workspace-toolbar{gap:16px;align-items:flex-start}.language-switch{flex-wrap:wrap;min-width:0;max-width:100%;gap:3px}.language-switch button{padding:9px 13px}.toolbar-actions{flex-shrink:0;padding-top:4px}.javascript{color:#b6901d}.java{color:#cf704d}.go{color:#3295aa}.ruby{color:#be5367}.sql{color:#8c71b6}.c{color:#547dc5}#stdin:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1100px){.workspace-toolbar{flex-wrap:wrap}.toolbar-actions{margin-left:auto}.language-switch{flex:1 1 100%}.language-switch button{flex:1;justify-content:center;padding:9px 12px}}
@media(max-width:700px){.language-switch button{flex:1 0 20%;padding:10px 5px;font-size:10px}.workspace-toolbar{gap:4px}.toolbar-actions{padding-top:0}}

.runner-notice{padding:13px 16px;border:1px solid #e5c9a1;background:#fbf4e8;color:#8b6636;border-radius:7px;font-size:11px;line-height:1.7;margin-bottom:24px}
.dark .runner-notice{background:#302a20;color:#e2c18c}

.guest-notice{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:16px}
/* Learning centre */
.rail a.rail-item{display:grid;place-items:center;font-size:21px}.section-nav{display:flex;gap:24px;padding:0 42px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap}.section-nav a{font-size:12px;color:var(--muted);padding:17px 0;border-bottom:2px solid transparent}.section-nav a.active{color:var(--ink);border-color:var(--accent);font-weight:600}.learning-view{padding-bottom:15px}.learn-heading{padding:20px 0 10px}.learn-heading h1{font-size:clamp(25px,2.8vw,37px)}.learn-heading>p{font-size:13px;line-height:1.8}.learn-muted{color:var(--muted);font-size:12px;line-height:1.8}.learn-stats{display:flex;gap:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-top:24px;font-size:11px;color:var(--muted)}.learn-stats strong{font-family:Manrope,sans-serif;font-size:20px;color:var(--ink);margin-right:4px}.learn-filters{display:flex;gap:15px;align-items:flex-end;margin:18px 0 23px}.filter-label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);min-width:150px}.search-filter{flex:1}.learn-filters input,.learn-filters select{font:inherit;font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:12px;outline-color:var(--accent);width:100%;height:42px}.lesson-layout{display:grid;grid-template-columns:265px minmax(0,1fr);gap:24px;align-items:start}.lesson-sidebar{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:22px 14px;position:sticky;top:15px;max-height:80vh;overflow:auto}.lesson-sidebar h2{font-size:14px;margin:0 8px 7px}.lesson-sidebar>p{margin:0 8px 12px;font-size:11px}.lesson-sidebar progress{width:calc(100% - 16px);height:5px;margin:0 8px 20px;accent-color:var(--accent)}.lesson-item{display:block;font-size:12px;line-height:1.6;padding:13px 12px;border-radius:6px;color:var(--ink);margin:2px 0}.lesson-item:hover{background:var(--bg)}.lesson-item.current{background:#ef704e10;color:var(--accent)}.lesson-item small{display:block;font-size:9px;color:var(--muted);padding-top:2px}.learn-article{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:30px 34px;min-width:0}.standalone{max-width:960px;margin:auto}.learn-meta{display:flex;gap:11px;align-items:center;font-size:10px;color:var(--muted);margin:7px 0 12px}.language-pill{background:var(--soft);padding:5px 8px;border-radius:4px;color:var(--ink);font-size:10px}.article-title{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-1px;margin:12px 0 20px;line-height:1.4}.article-paragraph{font-size:13px;line-height:1.95;color:var(--ink);max-width:820px}.learn-note{border-left:3px solid #e7b886;padding:12px 15px;background:#dcb5790c;color:var(--muted);font-size:12px;line-height:1.8;margin:20px 0}.learn-code-box{background:var(--editor);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:17px 0}.code-label{font-size:9px;letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--line);color:var(--muted);padding:10px 15px}.learn-code{font:12px/1.9 'SFMono-Regular',Consolas,monospace;margin:0;padding:17px;overflow:auto;tab-size:4}.learn-button{padding:10px 15px;border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:11px;color:var(--ink);font-weight:500}.learn-button:hover{border-color:var(--accent)}.learn-button.primary{background:var(--accent);color:white;border-color:var(--accent)}.learn-button.complete{color:var(--green);background:#409c7a0b;border-color:#409c7a33}.learn-button:disabled{opacity:.45;cursor:default}.article-actions{display:flex;gap:10px;margin-bottom:26px}.expected-result{margin:25px 0}.expected-result h3{font-size:11px;font-weight:500;color:var(--muted)}.expected-result .learn-code-box{background:#409c7a06}.exercise-box,.quiz-box{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:22px;margin:25px 0}.exercise-box h3,.quiz-box h3{font-size:15px;line-height:1.7}.exercise-box p{font-size:12px;line-height:1.9;color:var(--muted)}.quiz-choice{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:6px;padding:12px;margin:8px 0;background:var(--surface);font-size:12px}.quiz-choice[aria-pressed=true]{border-color:var(--accent);background:#ef704e09}.quiz-feedback{font-size:12px;line-height:1.8}.quiz-feedback.correct{color:var(--green)}.quiz-feedback.incorrect,.learn-error{color:#ca624e}.lesson-next{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:23px;margin-top:28px}.learn-link{display:inline-block;color:var(--accent);font-size:11px;line-height:1.7;padding:8px 0}.learn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.learn-card{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:23px;display:flex;flex-direction:column;min-width:0}.learn-card h2{font-family:Manrope,sans-serif;font-size:18px;line-height:1.5;letter-spacing:-.4px;margin:7px 0}.learn-card .learn-link{margin-top:auto;padding-top:18px}.category-label{font-size:10px;color:var(--muted);margin-bottom:7px}.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.reference-card .learn-code-box{margin:7px 0}.reference-card .learn-note{margin-bottom:0}.reference-card h2{font-family:monospace}.result-count{color:var(--muted);font-size:11px;margin-bottom:20px}.learn-empty{padding:35px;border:1px dashed var(--line);text-align:center;border-radius:8px;grid-column:1/-1}.learn-empty h2{font-size:17px}.complexity-row{display:flex;flex-wrap:wrap;gap:15px;font-size:11px;color:var(--green);padding:10px 0;line-height:1.9}.algorithm-steps{padding-left:24px;line-height:2;font-size:13px}.algorithm-steps li{padding-left:5px;margin-bottom:8px}.trace-box{padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:9px;margin:24px 0}.trace-box h3{font-size:15px}.trace-values{display:flex;gap:10px;margin-top:20px}.trace-cell{border:1px solid var(--line);background:var(--surface);border-radius:6px;min-width:48px;text-align:center;padding:7px 12px}.trace-cell.highlighted{border-color:var(--accent);background:#ef704e13}.trace-cell small{display:block;font-size:9px;color:var(--muted)}.trace-cell strong{font-size:21px;line-height:1.6}.trace-note{font-size:12px;line-height:1.8;min-height:42px}.trace-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}@media(max-width:1100px){.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-layout{grid-template-columns:220px minmax(0,1fr)}.learn-article{padding:25px}.section-nav{gap:20px;padding:0 25px}}@media(max-width:750px){.lesson-layout{grid-template-columns:1fr}.lesson-sidebar{position:static;max-height:260px}.learn-grid,.reference-grid{grid-template-columns:1fr}.learn-article{padding:21px 17px}.learn-filters{flex-wrap:wrap;gap:12px}.filter-label{min-width:0;flex:1 1 120px}.search-filter{flex-basis:100%;order:3}.section-nav{padding:0 16px;gap:18px}.section-nav a{font-size:11px;padding:14px 0}.learn-stats{gap:16px;flex-wrap:wrap}.learn-stats strong{font-size:17px}.article-title{font-size:23px}.learn-heading{padding-top:10px}.trace-box{padding:15px}.trace-values{gap:6px}.trace-cell{min-width:34px;padding:5px 8px}.trace-controls{gap:9px}.lesson-next{align-items:flex-start;flex-direction:column}}
.trace-cell{flex:1;min-width:0}.trace-values{max-width:420px}@media(max-width:400px){.trace-cell{padding:5px 3px}.trace-cell strong{font-size:18px}.trace-controls .learn-button{padding:9px 10px}.learn-stats{gap:12px}.learn-stats span{white-space:nowrap}}
#workspaceError{color:#c55844;margin-bottom:16px}#workspaceError:empty{display:none}