:root{--navy:#061a2e;--ink:#031528;--panel:#06192b;--line:#234867;--cyan:#25def6;--gold:#f4c62d;--green:#3ddc97;--red:#ff7284;--muted:#83a8ca;--white:#f4f8ff;--shadow:0 18px 48px rgba(0,9,20,.28);--code-font-size:16px;--code-line-height:24px}
*{box-sizing:border-box}html{background:var(--navy);scrollbar-color:#45627a var(--ink)}body{margin:0;min-width:320px;background:linear-gradient(155deg,#06182a 0%,#031321 55%,#061a2e 100%);color:var(--white);font-family:Inter,system-ui,sans-serif;font-size:15px}button,select,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}
.site-header{position:relative;z-index:20;height:72px;padding:0 clamp(18px,2.5vw,36px);display:flex;align-items:center;justify-content:space-between;background:#071b2f;border-bottom:2px solid var(--gold)}.brand{display:flex;align-items:center;gap:15px;flex:none}.main-logo{width:62px;height:58px;object-fit:contain;background:#fff}.wordmark{font-family:Georgia,serif;font-size:30px;font-weight:700;color:#bed7ed;letter-spacing:-.6px}.wordmark strong{color:var(--gold)}
.site-nav{display:flex;align-items:center;gap:6px}.nav-link,.progress-link{border:0;background:none;color:#e8f0fa;padding:13px 12px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:var(--gold);background:rgba(244,198,45,.09);outline:none}.nav-link.active{box-shadow:inset 0 -3px var(--gold)}.progress-link{margin-left:6px;border-radius:8px;background:#1f6ee8;color:#fff}.progress-link:hover,.progress-link:focus-visible{background:#337ff0;outline:2px solid #8fc8ff;outline-offset:2px}
.nav-dropdown{position:relative}.dropdown-toggle span{display:inline-block;margin-left:3px;font-size:18px;transition:transform .2s}.nav-dropdown.open .dropdown-toggle span{transform:rotate(180deg)}.dropdown-menu{position:absolute;right:-230px;top:calc(100% + 11px);width:min(780px,90vw);padding:22px;display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:20px;background:#0a223a;border:1px solid #2a5477;border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}.practice-menu{right:-160px;grid-template-columns:repeat(3,minmax(180px,1fr));width:660px}.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}.dropdown-menu h2{margin:0 0 9px;color:var(--gold);font-size:11px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}.dropdown-menu a{display:block;padding:7px 0;color:#d7e8f8;font-size:13px;font-weight:600}.dropdown-menu a:hover,.dropdown-menu a:focus-visible{color:var(--cyan);outline:none}.menu-button{display:none;border:1px solid #386486;border-radius:8px;background:#0c2c49;color:#fff;width:46px;height:44px;font-size:24px;cursor:pointer}
main{max-width:1880px;margin:auto;padding:clamp(30px,4vw,54px) clamp(18px,2.2vw,36px) 14px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:20px}.eyebrow{margin:0 0 9px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.14em}.hero h1{margin:0;font-size:clamp(38px,3.2vw,54px);line-height:1.05;letter-spacing:-.04em}.hero-copy{margin:11px 0 0;color:#a9d3fb;font-size:clamp(15px,1.1vw,18px)}.server-state{display:flex;align-items:center;gap:9px;flex:none;margin-bottom:3px;padding:10px 15px;border:1px solid #285576;border-radius:999px;background:#09243c;color:#b8dbff;font-size:13px;font-weight:700}.server-dot,.file-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(61,220,151,.12)}.server-dot.busy{background:var(--gold);box-shadow:0 0 0 5px rgba(244,198,45,.12)}.server-dot.error{background:var(--red);box-shadow:0 0 0 5px rgba(255,114,132,.12)}
.compiler-shell{overflow:hidden;border:1px solid #285576;border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}.toolbar{min-height:72px;padding:10px 14px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);background:#0b2541}.language-control{display:flex;align-items:center;gap:10px}.language-control>span{color:#a9d3fb;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.language-control select{min-width:230px;height:46px;padding:0 38px 0 15px;border:1px solid #356388;border-radius:12px;background:#071c30;color:#fff;font-size:14px;font-weight:700;cursor:pointer}.font-control{display:flex;align-items:center;gap:8px}.font-control>span{color:#a9d3fb;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}.font-control select{height:46px;min-width:92px;padding:0 32px 0 12px;border:1px solid #356388;border-radius:12px;background:#071c30;color:#fff;font-size:13px;font-weight:700;cursor:pointer}.font-control select:hover,.font-control select:focus-visible,.language-control select:hover,.language-control select:focus-visible{border-color:#4b89b7;outline:none;box-shadow:0 0 0 2px rgba(37,222,246,.08)}.file-state{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px}.file-state strong{font-family:"Source Code Pro",monospace;color:#d6eaff}.file-state small{padding-left:9px;border-left:1px solid #31506b;color:var(--muted);font-size:11px}.toolbar-actions{display:flex;gap:8px;margin-left:auto}
.button,.small-button{border:1px solid #356388;border-radius:10px;background:#0d2d49;color:#eaf5ff;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}.button{min-height:44px;padding:0 15px;font-size:13px}.button:hover:not(:disabled),.small-button:hover{background:#153b5d;transform:translateY(-1px)}.button:focus-visible,.small-button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.button.run{border-color:var(--gold);background:var(--gold);color:#06182a;box-shadow:0 7px 20px rgba(244,198,45,.18)}.button.run:hover:not(:disabled){background:#ffda4e}.button.stop{border-color:#66384b;color:#ff9cab}.button:disabled{opacity:.42;cursor:not-allowed}.button kbd{margin-left:8px;padding:3px 6px;border:1px solid rgba(4,23,41,.45);border-radius:5px;font-family:"Source Code Pro",monospace;font-size:10px}.mobile-tabs{display:none}
.workspace{display:flex;height:clamp(560px,64vh,740px);min-height:0;min-width:0}.panel{min-width:0;min-height:0;overflow:hidden;background:var(--panel)}.source-panel{display:grid;grid-template-rows:64px minmax(0,1fr);flex:0 0 64%;min-width:320px}.side-stack{min-width:300px;min-height:0;overflow:hidden;display:flex;flex:1 1 0;flex-direction:column}.output-panel{display:grid;grid-template-rows:64px minmax(0,1fr);flex:0 0 58%;min-height:180px}.input-panel{display:grid;grid-template-rows:64px auto 52px minmax(0,1fr);flex:1 1 0;min-height:170px}
.splitter{position:relative;z-index:8;display:flex;align-items:center;justify-content:center;background:#061729;touch-action:none;user-select:none;outline:none;-webkit-user-select:none}.splitter::before{content:"";position:absolute;inset:0}.splitter.dragging{background:#0a2943}.splitter.dragging::after{content:"";position:fixed;inset:0;z-index:9998;background:transparent;pointer-events:none}.splitter span{display:block;border-radius:999px;background:#426985;transition:background .15s,box-shadow .15s}.splitter:hover span,.splitter:focus-visible span,.splitter.dragging span{background:var(--cyan);box-shadow:0 0 0 3px rgba(37,222,246,.13)}.splitter-vertical{flex:0 0 14px;cursor:col-resize;border-left:1px solid var(--line);border-right:1px solid var(--line)}.splitter-vertical span{width:4px;height:54px}.splitter-horizontal{flex:0 0 14px;cursor:row-resize;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.splitter-horizontal span{width:54px;height:4px}.resizing,.resizing *{cursor:inherit!important;user-select:none!important}
.panel-header{min-width:0;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#0a243f}.panel-header>div{min-width:0}.panel-kicker{display:block;margin-bottom:4px;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.panel h2{margin:0;font-size:15px}.panel-tools{display:flex;align-items:center;gap:8px;flex:none}.shortcut{color:#8cb6da;font-size:11px;white-space:nowrap}.small-button{flex:none;padding:8px 11px;font-size:11px;white-space:nowrap}.output-title{display:flex;align-items:center;gap:8px}.status-badge{padding:3px 7px;border-radius:999px;background:#173a56;color:#b9daf6;font-size:9px;font-weight:800;text-transform:uppercase}.status-badge.running,.status-badge.success{background:rgba(61,220,151,.17);color:#5cf2ae}.status-badge.input{background:rgba(244,198,45,.18);color:#ffe476;box-shadow:0 0 0 1px rgba(244,198,45,.12)}.status-badge.connecting,.status-badge.compiling{background:rgba(244,198,45,.16);color:#ffe476}.status-badge.compile-error,.status-badge.runtime-error,.status-badge.timeout,.status-badge.error{background:rgba(255,114,132,.16);color:#ff9cab}
.source-panel .panel-header{position:relative;width:100%;max-width:100%;padding-right:108px;overflow:hidden}.source-panel .panel-header>div:first-child{overflow:hidden}.source-panel .panel-tools{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.source-panel h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#editor{width:100%;height:100%}.input-content{min-width:0;overflow:auto;overflow-x:hidden;padding:16px;background:#071a2c}.input-help{margin:0 0 14px;color:#88b3da;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.input-help strong{color:#dceeff}.input-preview{margin:0;padding-left:20px;color:#64a4dc;font-family:"Source Code Pro",monospace;font-size:12px;line-height:1.7}.input-waiting{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(244,198,45,.25);background:linear-gradient(90deg,rgba(244,198,45,.13),rgba(37,222,246,.07));color:#eaf5ff}.input-waiting[hidden]{display:none!important}.input-waiting-dot{flex:none;width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(244,198,45,.13)}.input-waiting strong{display:block;color:#ffe476;font-size:12px}.input-waiting p{margin:3px 0 0;color:#c6e5ff;font:11px/1.45 "Source Code Pro",monospace;overflow-wrap:anywhere}.console-entry{display:flex;align-items:center;gap:9px;padding:0 14px;border-top:1px solid var(--line);background:#071a2c}.console-entry>span{color:var(--gold);font-size:21px}.console-entry input{min-width:0;flex:1;border:0;background:transparent;color:#e8f5ff;font-family:"Source Code Pro",monospace;font-size:15px;outline:none}.console-entry input::placeholder{color:#567c9e}.console-entry input:disabled{cursor:not-allowed}.console-entry small{color:#6488a6;font-size:9px}.send-input-button{flex:none;padding:7px 10px;border:1px solid rgba(244,198,45,.55);border-radius:8px;background:rgba(244,198,45,.14);color:#ffe476;font-size:10px;font-weight:800;cursor:pointer}.send-input-button:hover:not(:disabled){background:rgba(244,198,45,.22)}.send-input-button:disabled{opacity:.35;cursor:not-allowed}#terminal{height:100%;margin:0;overflow:auto;overflow-x:hidden;padding:16px;background:#020f1c;color:#d9eeff;font:12px/1.6 "Source Code Pro",monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.terminal-error{color:#ff8ea0}.terminal-success{color:#55f1ad}.terminal-input{color:#ffe45f}.terminal-system{color:#6bc3ff}.terminal-muted{color:#6f99bd}
.compiler-guidance{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.compiler-guidance>div{min-width:0;padding:15px 16px;display:flex;align-items:center;gap:12px;border:1px solid #234867;border-radius:13px;background:rgba(8,31,53,.82)}.guidance-number{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #356388;border-radius:9px;color:var(--gold);font:700 11px "Source Code Pro",monospace}.compiler-guidance p{margin:0;color:#7fa5c5;font-size:12px;line-height:1.45}.compiler-guidance strong{color:#eaf4ff;font-size:13px}.privacy-note{margin:13px auto 0;text-align:center;color:#7398b8;font-size:10px}.page-footer{max-width:1880px;margin:0 auto;padding:14px clamp(18px,2.2vw,36px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(35,72,103,.65);color:#5f86a7;font-size:11px}.page-footer div{display:flex;align-items:baseline;gap:10px}.page-footer strong{color:#a9d3fb;font-size:13px}.page-footer p{margin:0}.drawer{position:fixed;z-index:40;inset:0;pointer-events:none;visibility:hidden}.drawer.open{pointer-events:auto;visibility:visible}.drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(0,9,18,.68);opacity:0;transition:.2s}.drawer.open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;top:0;right:0;width:min(420px,90vw);height:100%;padding:24px;background:#092139;border-left:1px solid #2a5678;transform:translateX(100%);transition:.25s;box-shadow:-15px 0 40px rgba(0,0,0,.3)}.drawer.open .drawer-panel{transform:none}.drawer-panel header{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line)}.drawer-panel h2{margin:0}.close-button{border:0;background:none;color:#fff;font-size:30px;cursor:pointer}.drawer-panel ol{min-height:100px;margin:18px 0;padding-left:24px;color:#9dccf6;font-family:"Source Code Pro",monospace}.empty-history{color:#6e96b8}.full-button{width:100%}
@media (max-width:1100px){.wordmark{font-size:28px}.main-logo{width:58px;height:54px}.site-header{height:72px}.nav-link,.progress-link{padding:12px 9px;font-size:13px}.language-control select{min-width:210px}.file-state small{display:none}.button span{display:none}.button{padding:0 13px}.button.run span{display:inline}.workspace{}}
@media (max-width:860px){.menu-button{display:block}.site-nav{position:absolute;top:100%;left:0;right:0;padding:12px 20px 20px;display:none;align-items:stretch;flex-direction:column;background:#071b2f;border-bottom:2px solid var(--gold);box-shadow:0 14px 30px rgba(0,0,0,.3)}.site-nav.open{display:flex}.nav-link,.progress-link{width:100%;margin:0;text-align:left;border-radius:7px}.nav-link.active{box-shadow:none}.dropdown-menu,.practice-menu{position:static;width:100%;max-height:0;padding:0 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;overflow:hidden;border:0;opacity:1;visibility:visible;transform:none;box-shadow:none;transition:max-height .25s,padding .25s}.nav-dropdown.open .dropdown-menu{max-height:600px;padding:14px}.dropdown-menu section{margin-bottom:12px}.toolbar{flex-wrap:wrap}.toolbar-actions{width:100%;margin:0}.toolbar-actions .button{flex:1}.workspace{height:650px}.shortcut{display:none}.compiler-guidance{grid-template-columns:1fr}}
@media (max-width:760px){.site-header{height:68px;padding:0 14px}.main-logo{width:50px;height:48px}.brand{gap:11px}.wordmark{font-size:25px}main{padding:24px 12px 10px}.hero{align-items:flex-start;flex-direction:column}.hero h1{font-size:40px}.server-state{margin:0;padding:8px 12px;font-size:11px}.compiler-shell{border-radius:14px}.toolbar{padding:11px;gap:10px}.language-control{width:100%}.language-control select{width:100%;min-width:0}.file-state{width:100%}.toolbar-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.button{min-width:0;padding:0 7px;font-size:11px}.button kbd{display:none}.mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:#081e34}.tab{position:relative;padding:12px;border:0;border-bottom:3px solid transparent;background:transparent;color:#87afd2;font-size:12px;font-weight:800;cursor:pointer}.tab.active{border-bottom-color:var(--gold);color:#fff}#outputNotice,#inputNotice{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:var(--gold);opacity:0;vertical-align:middle}#outputNotice.visible,#inputNotice.visible{opacity:1}.tab.input-required{color:#ffe476}.tab.input-required #inputNotice{box-shadow:0 0 0 4px rgba(244,198,45,.12)}.workspace{display:block;height:570px}.workspace>.panel,.workspace>.side-stack>.panel{display:none;height:100%;border:0}.workspace>.panel.active,.workspace>.side-stack>.panel.active{display:grid}.workspace>.splitter,.workspace>.side-stack>.splitter{display:none}.side-stack{display:contents}.source-panel{grid-template-rows:64px minmax(0,1fr)}.input-panel{grid-template-rows:64px auto 58px minmax(0,1fr)}.output-panel{grid-template-rows:64px minmax(0,1fr)}.console-entry small{display:none}.send-input-button{padding:9px 13px;font-size:11px}.panel-header{padding:9px 11px}.panel-tools{gap:6px}.small-button{padding:8px 9px}.source-panel .shortcut{display:none}.privacy-note{padding:0 10px;line-height:1.5}.page-footer{align-items:flex-start;flex-direction:column;gap:5px}.page-footer div{align-items:flex-start;flex-direction:column;gap:2px}}
@media (max-width:430px){.wordmark{font-size:23px}.main-logo{width:45px;height:44px}.hero h1{font-size:39px}.eyebrow{font-size:11px}.hero-copy{font-size:15px}.toolbar-actions .button.run span{display:none}.panel h2{font-size:14px}.panel-kicker{font-size:9px}.source-panel .small-button{font-size:0}.source-panel .small-button::after{content:"Copy";font-size:12px}.dropdown-menu,.practice-menu{grid-template-columns:1fr}}
/* Monaco officially targets desktop browsers. Mobile uses a native textarea so Android/Samsung IME composition paints every character immediately. */
.mobile-editor-shell{display:none}
@media (max-width:760px){#editor{display:none!important}.source-panel.active{min-width:0}.mobile-editor-shell:not([hidden]){position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:#1e1e1e}.mobile-line-numbers{height:100%;margin:0;padding:13px 10px 80px 0;overflow:hidden;border-right:1px solid #3a3a3a;background:#181818;color:#858585;font:400 var(--code-font-size)/var(--code-line-height) "Source Code Pro",monospace;text-align:right;user-select:none}.mobile-code-layer{position:relative;min-width:0;min-height:0;overflow:hidden;background:#1e1e1e}.mobile-highlight,.mobile-source{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:13px 16px 80px;border:0;border-radius:0;font:400 var(--code-font-size)/var(--code-line-height) "Source Code Pro",monospace;letter-spacing:normal;tab-size:4;white-space:pre}.mobile-source{z-index:1;outline:0;resize:none;overflow:auto;background:#1e1e1e;color:#f1f1f1;caret-color:var(--gold);-webkit-text-size-adjust:100%;touch-action:pan-x pan-y}.mobile-highlight{z-index:2;right:auto;bottom:auto;min-width:100%;min-height:100%;overflow:visible;background:transparent;color:#d4d4d4;pointer-events:none}.mobile-source:focus{box-shadow:inset 0 0 0 1px rgba(37,222,246,.35)}.mobile-source::selection{background:#28557a;color:#fff}.tok-keyword{color:#569cd6}.tok-type{color:#4ec9b0}.tok-string{color:#ce9178}.tok-number{color:#b5cea8}.tok-comment{color:#6a9955}.tok-preprocessor{color:#c586c0}.tok-operator{color:#d4d4d4}}

/* Editor usability controls */
.splitter-vertical{min-width:14px}.splitter-horizontal{min-height:14px}.splitter-vertical:hover,.splitter-horizontal:hover{background:#08243c}.splitter[aria-valuenow]::after{pointer-events:none}.font-control select option{background:#071c30;color:#fff}
@media (max-width:860px){.font-control{margin-left:auto}.font-control select{min-width:88px}}
@media (max-width:760px){.font-control{width:auto;margin-left:0}.font-control>span{font-size:10px}.font-control select{height:42px;min-width:86px}.toolbar .file-state{order:3}.toolbar .toolbar-actions{order:4}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Footer 5-column layout */
.footer-container {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Responsive footer */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px 25px;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}