:root {
  color-scheme: dark;
  --bg:#0b1020; --panel:#121a2c; --panel2:#182238; --line:#26334f;
  --text:#eef4ff; --muted:#97a6c4; --accent:#70e1b6; --accent2:#8ab4ff;
  --warn:#ffd166; --bad:#ff7b7b; --ok:#70e1b6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box} html,body,#app{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{min-height:100dvh} button,input,select,textarea{font:inherit} button{cursor:pointer}
a{color:var(--accent2)}
.shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{height:58px;display:flex;align-items:center;gap:14px;padding:0 max(14px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:rgba(11,16,32,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{font-weight:800;letter-spacing:.2px;white-space:nowrap}.brand span{color:var(--accent)}
.top-spacer{flex:1}.timer{font:800 24px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}.timer.danger{color:var(--bad)}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 13px;border-radius:10px;font-weight:700}.btn:hover{border-color:#3d4e74}.btn.primary{background:var(--accent);border-color:var(--accent);color:#082018}.btn.warn{background:#433918;border-color:#6f5b1d;color:#ffe7a0}.btn.danger{background:#472224;border-color:#7e3a3e;color:#ffc3c3}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}
.main{width:min(1180px,100%);margin:0 auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.card + .card{margin-top:14px}
.hero{padding:34px}.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 10px}.hero p{margin:0;color:var(--muted);font-size:17px;line-height:1.7}.accent{color:var(--accent)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:13px;color:var(--muted);font-weight:700}.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);background:#0d1527;color:var(--text);border-radius:10px;outline:none}.field input:focus,.field select:focus{border-color:var(--accent2)}
.preset-row{display:flex;gap:8px;flex-wrap:wrap}.preset{min-width:74px}.preset.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}.switch-row:first-child{border-top:0}.switch{width:44px;height:26px;border-radius:20px;background:#34415d;position:relative;flex:none}.switch::after{content:"";position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:white;transition:.18s}.switch.on{background:var(--accent)}.switch.on::after{left:21px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.muted{color:var(--muted)}.small{font-size:13px}.status-line{margin-top:10px;color:var(--muted);min-height:20px}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.history-heading h3{margin:0}.history-table-wrap{overflow-x:auto}.history-delete{padding:5px 9px;font-size:12px;white-space:nowrap}
.memo-panel{position:fixed;z-index:80;top:0;right:0;width:min(500px,100vw);height:100dvh;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-14px 0 40px #0008;transform:translateX(105%);transition:transform .2s ease}.memo-panel.open{transform:translateX(0)}.memo-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px}.memo-editor{padding:12px;border-bottom:1px solid var(--line);overflow:auto;max-height:58dvh}.memo-editor input,.memo-editor select,.memo-editor textarea{width:100%;border:1px solid var(--line);background:#0d1527;color:var(--text);border-radius:9px;padding:9px 10px;outline:0}.memo-editor select{margin-top:8px}.memo-editor input:focus,.memo-editor select:focus,.memo-editor textarea:focus{border-color:var(--accent2)}.memo-editor textarea{min-height:130px;resize:vertical;margin-top:8px;line-height:1.45}.memo-actions,.memo-file-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.memo-preview-label{margin-top:12px}.memo-preview{margin-top:5px;min-height:34px;max-height:190px;overflow:auto;background:#070c16;border:1px solid var(--line);border-radius:7px;padding:9px;white-space:pre-wrap;line-height:1.45}.memo-preview p{margin:.35em 0}.memo-preview h1,.memo-preview h2,.memo-preview h3,.memo-preview h4,.memo-preview h5,.memo-preview h6{margin:.35em 0}.memo-preview ul,.memo-preview ol{padding-left:20px}.memo-preview code{background:#182238;border-radius:4px;padding:1px 4px}.memo-preview .memo-code{white-space:pre-wrap;background:#0d1527;padding:8px;border-radius:6px}.memo-rendered{margin:8px 0 0;background:#070c16;border-radius:7px;padding:8px;max-height:180px;overflow:auto;line-height:1.4}.memo-rendered p{margin:.25em 0}.memo-rendered h1,.memo-rendered h2,.memo-rendered h3,.memo-rendered h4,.memo-rendered h5,.memo-rendered h6{margin:.25em 0}.memo-rendered ul,.memo-rendered ol{padding-left:20px}.memo-rendered pre{white-space:pre-wrap;background:#0d1527;padding:7px;border-radius:6px}.memo-format{display:inline-block;margin-left:7px;padding:2px 5px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font:10px ui-monospace,SFMono-Regular,monospace;vertical-align:middle}.memo-item .inline-copy{font-size:12px;margin-left:7px}
.memo-panel{width:min(580px,100vw)}.memo-list{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px}.memo-item{padding:15px 16px;border:1px solid #304160;border-radius:15px;background:linear-gradient(145deg,#111d32,#0b1425);box-shadow:0 8px 22px #0003;min-height:150px}.memo-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:11px;border-bottom:1px solid #263653}.memo-item-title{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:7px}.memo-item-title b{font-size:17px;line-height:1.35;overflow-wrap:anywhere}.memo-item-actions{display:flex;gap:8px;flex:none;white-space:nowrap}.memo-item-actions .inline-copy{margin:0;padding:5px 7px;border:1px solid #344766;border-radius:7px;background:#18253c;font-size:12px}.memo-item-actions .memo-delete{color:#ff9b9b}.memo-updated{font-size:11px;color:var(--muted);white-space:nowrap}.memo-format{margin-left:0;padding:3px 7px;font-size:11px;background:#16243a}.memo-rendered{margin-top:13px;padding:13px;max-height:310px;border:1px solid #263653;border-radius:10px;background:#070d19;font-size:14px;line-height:1.65}.memo-rendered pre{margin:0;padding:0;background:transparent;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.memo-rendered p{margin:.55em 0}.memo-rendered h1,.memo-rendered h2,.memo-rendered h3,.memo-rendered h4,.memo-rendered h5,.memo-rendered h6{line-height:1.35;margin:.5em 0}.memo-rendered .memo-code{background:#111d32;padding:10px;border-radius:8px}.memo-list>.muted{padding:22px 10px;text-align:center}
.memo-head-actions{display:flex;align-items:center;gap:10px}.memo-scale-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}.memo-scale-control input{width:86px;accent-color:var(--accent)}.memo-html-options{display:none;align-items:center;gap:7px;margin-top:8px;padding:8px 10px;border:1px solid #66551f;border-radius:8px;background:#2a2412;color:#ffe5a0;font-size:12px}.memo-html-options input{width:auto}.memo-item-title b{font-size:calc(17px * var(--memo-scale,1))}.memo-rendered{font-size:calc(14px * var(--memo-scale,1));line-height:calc(1.65 * var(--memo-scale,1))}.memo-rendered pre{font-size:calc(13px * var(--memo-scale,1))}.memo-html-frame{display:block;width:100%;height:360px;min-height:220px;resize:vertical;border:0;border-radius:8px;background:#fff}.memo-preview .memo-html-frame{height:300px;min-height:180px;border:1px solid var(--line)}
.match-layout{display:grid;grid-template-columns:minmax(280px,calc((100% - 34px) * var(--problem-ratio,.46))) 10px minmax(380px,1fr);gap:12px;height:calc(100dvh - 74px);padding:8px 10px 10px;min-height:600px}
.memo-panel{resize:horizontal;min-width:380px;max-width:90vw;overflow:hidden}.memo-head-actions{display:flex;align-items:center;gap:6px}.memo-head-actions .btn{padding:6px 8px;font-size:11px}.memo-editor-collapsed .memo-editor{display:none}.memo-list-collapsed .memo-list{display:none}.memo-item-title b{font-size:17px}.memo-rendered{font-size:14px;line-height:1.65}.memo-rendered pre{font-size:13px}.memo-item.memo-collapsed .memo-rendered{display:none}.memo-item.memo-expanded .memo-rendered{max-height:70dvh}.memo-item.memo-expanded .memo-html-frame{height:65dvh;min-height:320px}
.memo-panel{resize:none}.memo-panel-resize-handle{position:absolute;z-index:3;left:0;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;color:#7f92b4;background:linear-gradient(90deg,#263b5b,#17253c00);cursor:col-resize;opacity:.75;transition:opacity .15s}.memo-panel-resize-handle:hover,.memo-panel-resize-handle:active{opacity:1;color:var(--accent);background:#263b5b}.memo-panel-resize-handle span{font-size:13px;writing-mode:vertical-rl;line-height:1}.memo-head{padding-left:20px}.memo-resize-handle{display:flex;align-items:center;justify-content:center;gap:6px;height:25px;margin:5px -4px -7px;border-radius:6px;color:#7386a8;font-size:11px;cursor:ns-resize;user-select:none}.memo-resize-handle:hover{background:#18263d;color:var(--accent)}.memo-resize-handle span{font-size:15px}.memo-item.memo-collapsed .memo-resize-handle{display:none}.memo-item.memo-expanded .memo-resize-handle{color:var(--accent)}body.memo-resizing,body.memo-resizing *{user-select:none}.memo-panel .memo-item-title b{font-size:17px}.memo-panel .memo-rendered{font-size:14px;line-height:1.65}.memo-panel .memo-rendered pre{font-size:13px}
.memo-item .memo-html-frame{resize:none}.memo-rendered[style] .memo-html-frame{height:100%;min-height:0}
.memo-item{flex:none;overflow:visible}.memo-item.memo-collapsed{min-height:0;padding-bottom:10px}.memo-item.memo-collapsed .memo-item-head{padding-bottom:0;border-bottom:0}.memo-item .memo-rendered{max-height:min(310px,calc(100dvh - 240px))}.memo-item .memo-rendered[style]{max-height:min(70dvh,calc(100dvh - 240px))}
.memo-title-toggle{display:flex;align-items:flex-start;gap:7px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}.memo-title-toggle:hover .memo-item-title b{text-decoration:underline;text-underline-offset:3px}.memo-chevron{display:inline-block;width:16px;flex:none;color:var(--accent);font-size:25px;line-height:1;transform:translateY(-2px);transition:transform .15s}.memo-item:not(.memo-collapsed) .memo-chevron{transform:rotate(90deg) translateX(-2px)}.memo-title-toggle .memo-item-title{min-width:0}
.memo-drag-handle{display:grid;place-items:center;width:20px;min-width:20px;height:26px;color:#7386a8;font-size:18px;line-height:1;cursor:grab;user-select:none;border-radius:6px}.memo-drag-handle:hover{background:#18263d;color:var(--accent)}.memo-drag-handle:active{cursor:grabbing}.memo-item.memo-dragging{opacity:.45;border-style:dashed}.memo-item.memo-dragging .memo-drag-handle{cursor:grabbing}
.problem-pane,.code-pane{min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.match-resize-handle{align-self:stretch;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;color:#7083a5;cursor:col-resize;user-select:none;touch-action:none}.match-resize-handle:hover,.match-resize-handle:active{border-color:var(--line);background:#18263d;color:var(--accent)}.match-resize-handle span{font-size:20px;line-height:1}.match-resizing,.match-resizing *{user-select:none!important;cursor:col-resize!important}
.statement-static{flex:0 0 auto;min-height:0;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:12px;padding:16px 18px;background:var(--panel2);color:var(--text)}.statement-static h3,.statement-static p{margin:0;max-width:540px}.statement-static h3{font-size:15px}.statement-static-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:9px;color:var(--accent);font-size:18px}.statement-static-copy{min-width:0}.statement-static .btn{display:inline-block;margin-top:9px;padding:7px 10px;font-size:12px}.problem-pane.problem-unavailable{align-self:start;height:max-content;min-height:0}
.problem-tabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);overflow:auto}.problem-tab{padding:8px 11px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:800;white-space:nowrap}.problem-tab.active{background:var(--panel2);border-color:var(--line);color:var(--text)}.problem-tab.solved{color:var(--ok)}
.problem-meta{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);min-height:48px}.problem-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.problem-meta .spacer{flex:1}.pill{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.pill.ok{color:var(--ok);border-color:#28715c}.pill.bad{color:var(--bad);border-color:#7e3a3e}.pill.warn{color:var(--warn);border-color:#715c21}
.statement{width:100%;border:0;flex:1;background:white}.statement-fallback{padding:30px;color:var(--muted)}
.code-toolbar{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}.code-toolbar .spacer{flex:1}.py-status{font-size:12px;color:var(--muted)}
.editor-shell{display:flex;flex:1;min-height:210px;min-width:0;background:#09101e;overflow:hidden}.editor-gutter{width:86px;flex:none;overflow:hidden;padding:8px 0;background:#0c1526;border-right:1px solid var(--line);color:#5f6e8c;font:14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:right;user-select:none}.editor-line-number{display:block;height:22px;padding-right:12px}.editor-line-number.active{color:var(--accent);background:#16233a}.editor-layer{position:relative;flex:1;min-width:0;min-height:210px;overflow:hidden}.editor-indent-guides{position:absolute;z-index:0;top:0;left:0;width:max-content;min-width:100%;height:max-content;min-height:100%;background-image:repeating-linear-gradient(to right,transparent 0,transparent 34px,rgba(112,225,182,.16) 34px,rgba(112,225,182,.16) 35px);background-position:0 0;background-repeat:repeat;pointer-events:none;will-change:transform}.editor-highlight{position:absolute;z-index:1;top:0;left:0;width:max-content;min-width:100%;min-height:100%;margin:0;padding:8px 0;color:#d4d4d4;font:14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;pointer-events:none;will-change:transform}.editor{position:relative;z-index:2;flex:1;min-width:0;width:100%;height:100%;min-height:210px;resize:none;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f8f8f2;padding:8px 0;font:14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto}.editor::selection{background:#264f78;color:transparent}.editor:focus{box-shadow:inset 0 0 0 1px #284267}.editor-status{display:flex;align-items:center;gap:10px;min-height:28px;padding:4px 10px;border-top:1px solid var(--line);background:#0d1729;color:#aebbd4;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.editor-status .spacer{flex:1}.editor-tool{border:0;background:transparent;color:var(--accent2);font:inherit;cursor:pointer;padding:2px 5px}.editor-tool:hover{text-decoration:underline}.editor-find{display:flex;align-items:center;gap:7px;padding:6px 10px;border-top:1px solid var(--line);background:#121e34}.editor-find input{min-width:0;flex:1;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#09101e;color:var(--text);outline:0}.editor-find input:focus{border-color:var(--accent2)}
.monaco-host{display:none;position:absolute;inset:0;z-index:6;overflow:hidden}
.editor-shell.monaco-active .monaco-host{display:block}
.editor-shell.monaco-active>.editor-gutter,.editor-shell.monaco-active .editor-layer>.editor-indent-guides,.editor-shell.monaco-active .editor-layer>.editor-current-line,.editor-shell.monaco-active .editor-layer>.editor-find-matches,.editor-shell.monaco-active .editor-layer>.editor-highlight,.editor-shell.monaco-active .editor-layer>.editor-errors,.editor-shell.monaco-active .editor-layer>.editor-brackets,.editor-shell.monaco-active .editor-layer>.editor-folds,.editor-shell.monaco-active .editor-layer>.editor-multi,.editor-shell.monaco-active .editor-layer>.editor{display:none!important}
.editor-shell.monaco-active .editor-layer>.editor-find{display:none!important}
.editor-shell.monaco-active .editor-layer>.editor-suggest,.editor-shell.monaco-active .editor-layer>.editor-hover,.editor-shell.monaco-active .editor-layer>.editor-signature{display:none!important}
.editor-shell.monaco-active .editor-layer>.editor-rename{display:none!important}
  .editor-find[hidden]{display:none}.editor-highlight .token-keyword{color:#569cd6}.editor-highlight .token-control-keyword{color:#c586c0}.editor-highlight .token-builtin{color:#4ec9b0}.editor-highlight .token-string{color:#ce9178}.editor-highlight .token-number{color:#b5cea8}.editor-highlight .token-comment{color:#6a9955}.editor-highlight .token-function{color:#dcdcaa}.editor-highlight .token-class-name{color:#4ec9b0}.editor-highlight .token-decorator{color:#d7ba7d}.editor-highlight .token-variable{color:#9cdcfe}.editor-highlight .token-operator{color:#d4d4d4}.editor-highlight .token-punctuation{color:#d4d4d4}.editor-highlight .token-reference{background:#264f78;border-radius:3px;box-shadow:0 0 0 1px #4f78a8}
.editor-indent-guides{background-image:none!important;background-position:0 0!important}.editor-indent-line{position:absolute;display:block;width:1px;background:rgba(112,225,182,.18);pointer-events:none}.editor-indent-line.active{background:rgba(112,225,182,.62);box-shadow:0 0 4px rgba(112,225,182,.18)}
.test-panel{border-top:1px solid var(--line);max-height:42%;min-height:170px;display:flex;flex-direction:column}.test-head{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line)}.test-list{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:7px}.test-row{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#0d1527}.test-row summary{cursor:pointer;display:flex;gap:8px;align-items:center;list-style:none;font-weight:700}.test-row summary::-webkit-details-marker{display:none}.verdict{margin-left:auto;font:800 12px ui-monospace,SFMono-Regular,monospace}.verdict.AC{color:var(--ok)}.verdict.WA,.verdict.RE,.verdict.TLE{color:var(--bad)}.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.io-box{white-space:pre-wrap;background:#070c16;border-radius:8px;padding:8px;font:12px/1.45 ui-monospace,SFMono-Regular,monospace;overflow:auto;max-height:130px}.io-box strong{display:block;color:var(--muted);font-family:inherit;margin-bottom:4px}.io-template-details{border-bottom:1px solid var(--line);padding:8px 10px}.io-template-details summary{cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none}.io-template-details summary::-webkit-details-marker{display:none}.io-template-details summary .muted{margin-left:auto}.io-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.io-template-card{min-width:0;border:1px solid var(--line);border-radius:9px;background:#0d1527;padding:8px}.io-template-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.io-template-card pre{margin:0;white-space:pre-wrap;overflow:auto;max-height:110px;background:#070c16;border-radius:7px;padding:8px;font:12px/1.45 ui-monospace,SFMono-Regular,monospace}.inline-copy{float:right;border:0;background:transparent;color:var(--accent2);cursor:pointer;padding:0;font:inherit}.inline-copy:hover{text-decoration:underline}
.mobile-view-tabs{display:none}.result-wrap{width:min(900px,100%);margin:0 auto;padding:26px 16px}.result-hero{text-align:center;padding:28px}.perf{font-size:64px;font-weight:900;letter-spacing:-2px;color:var(--accent)}.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.score-item{background:#0d1527;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}.score-item b{display:block;font-size:24px}.history-table{width:100%;border-collapse:collapse}.history-table th,.history-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.history-table th{color:var(--muted);font-size:12px}
.code-lab{width:min(1400px,100%);margin:0 auto;padding:14px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:12px;height:calc(100dvh - 58px)}.code-lab-editor,.code-lab-runtime{min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.code-lab-editor .editor-shell{min-height:0}.code-lab-runtime{padding:14px;gap:8px}.runtime-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.code-lab-runtime label{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px}.code-lab-runtime textarea{min-height:150px;resize:vertical;background:#09101e;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.code-lab-runtime pre{flex:1;min-height:170px;overflow:auto;margin:0;background:#070c16;border:1px solid var(--line);border-radius:9px;padding:10px;white-space:pre-wrap;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:#eaf3ff;color:#0a1324;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-weight:700;box-shadow:0 8px 30px #0007}.toast.show{opacity:1;transform:translate(-50%,0)}
.loader{display:inline-block;width:15px;height:15px;border:2px solid #ffffff40;border-top-color:white;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.memo-code-block{margin:10px 0;background:#111d32;border:1px solid #263653;border-radius:8px;overflow:hidden}.memo-code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-bottom:1px solid #263653;color:var(--muted);font:11px ui-monospace,SFMono-Regular,monospace}.memo-code-copy{padding:3px 8px;border:1px solid #344766;border-radius:6px;background:#18253c;color:var(--text);font:inherit;cursor:pointer}.memo-code-copy:hover{border-color:var(--accent);color:var(--accent)}.memo-code-block .memo-code{margin:0;border-radius:0;background:transparent}
@media(max-width:820px){
  .topbar{height:54px}.brand{font-size:14px}.timer{font-size:20px}.topbar .hide-mobile{display:none}
  .main{padding:14px 10px}.hero{padding:22px}.form-grid{grid-template-columns:1fr}.score-grid{grid-template-columns:1fr 1fr}
  .match-layout{display:block;height:calc(100dvh - 54px);padding:0}.problem-pane,.code-pane{height:100%;border-radius:0;border-left:0;border-right:0}.match-resize-handle{display:none}.mobile-hidden{display:none!important}.mobile-view-tabs{display:flex;gap:5px}.statement{min-height:0}.test-panel{max-height:44%}.editor{font-size:14px}.problem-name{max-width:45vw}
  .code-lab{display:flex;flex-direction:column;height:calc(100dvh - 54px);padding:8px}.code-lab-editor{height:55%;min-height:340px}.code-lab-runtime{flex:1;min-height:360px}.code-lab-runtime textarea{min-height:90px}.code-lab-runtime pre{min-height:100px}
  .memo-panel{min-width:calc(100vw - 8px);max-width:100vw}.memo-head-actions .btn{padding:5px 6px;font-size:10px}.memo-item{padding:12px}.memo-item-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.memo-item-actions .inline-copy{padding:4px 5px;font-size:11px}
}
.simple-shell{min-height:100dvh;background:#0b1020}.simple-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:10px;min-height:calc(100dvh - 58px);padding:10px}.simple-editor-pane,.simple-runtime{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.simple-editor-pane .editor-shell{flex:1;min-height:0}.file-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-bottom:1px solid var(--line);color:#cbd7ed;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.file-dot{width:8px;height:8px;border-radius:50%;background:#70e1b6}.save-state{color:var(--muted);font-size:12px}.simple-runtime{padding:12px;gap:8px}.simple-runtime:not(.open){display:flex}.simple-runtime .runtime-head{display:flex;align-items:center;justify-content:space-between}.simple-runtime label{color:var(--muted);font-size:12px;font-weight:700;margin-top:5px}.simple-runtime textarea{min-height:130px;resize:vertical;background:#09101e;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.simple-runtime pre{flex:1;min-height:170px;overflow:auto;margin:0;padding:10px;background:#070c16;border:1px solid var(--line);border-radius:9px;white-space:pre-wrap;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.output-error{color:#ffadad!important}.simple-diagnostics{max-height:130px;overflow:auto;border-top:1px solid var(--line);background:#10182a}.diagnostic-item{width:100%;display:flex;gap:9px;align-items:center;text-align:left;padding:7px 10px;border:0;border-bottom:1px solid #26334f;background:transparent;color:#ffb2b2;font-size:12px}.diagnostic-item:hover{background:#1d2941}.diagnostic-icon{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#7e3a3e;color:#fff;font-weight:800}.editor-line-number.error{color:#ff8e8e;background:#321c2a}.status-ok{color:var(--ok)!important}.status-error{color:#ff8e8e!important}.editor-tool{white-space:nowrap}.memo-panel-resize-handle,.memo-resize-handle{touch-action:none}
@media(pointer:coarse),(hover:none){.editor-highlight,.editor-indent-guides{display:none!important}.editor{color:#d4d4d4!important;-webkit-text-fill-color:#d4d4d4!important;caret-color:#fff!important;background:#09101e}.editor::selection{color:#fff!important;background:#264f78!important}.editor-layer{overflow:hidden}.editor-shell{overflow:hidden}.editor{min-width:100%;width:100%;}.simple-runtime{display:none}.simple-runtime.open{display:flex;position:fixed;z-index:70;inset:64px 8px 8px 8px}.simple-workspace{display:block;padding:0;min-height:calc(100dvh - 54px)}.simple-editor-pane{height:calc(100dvh - 54px);border-radius:0;border-left:0;border-right:0}.simple-shell .topbar{gap:4px;overflow-x:auto;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.simple-shell .topbar .save-state{display:none}.simple-shell .topbar .btn{flex:none;padding:7px 8px;font-size:12px}}

/* Code Desk is a single editor on small screens.  Keep the layout based on
   the available viewport rather than a device user-agent so phones, compact
   laptops, Android tablets, external displays, and rotated screens behave
   consistently. */
html{min-height:100%;background:var(--bg)}
body{min-width:320px;overflow-x:hidden;overscroll-behavior-x:none}
button,.btn,.memo-title-toggle,.memo-drag-handle,.editor-tool{touch-action:manipulation}
.simple-shell{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;overflow:hidden}
.simple-shell .topbar{flex:0 0 58px;min-width:0}
.simple-workspace{height:calc(100vh - 58px);height:calc(100dvh - 58px);min-height:0}
.simple-editor-pane{height:100%;min-height:0}
.simple-diagnostics{flex:0 0 auto;max-height:24dvh}
.simple-runtime{max-height:100%;min-height:0}
.simple-runtime textarea{min-height:clamp(90px,18vh,160px);font-size:14px}

/* Under 900px a second column makes the editor too narrow.  The result pane
   becomes an explicit, dismissible panel opened by the Result button. */
@media (max-width:900px){
  .simple-shell .topbar{height:54px;flex-basis:54px;gap:6px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .simple-shell .topbar::-webkit-scrollbar{display:none}
  .simple-workspace{display:block;height:calc(100vh - 54px);height:calc(100dvh - 54px);padding:0}
  .simple-editor-pane{height:100%;border-radius:0;border-left:0;border-right:0}
  .simple-runtime:not(.open){display:none!important}
  .simple-runtime.open{display:flex!important;position:fixed;z-index:70;inset:calc(54px + env(safe-area-inset-top)) 8px 8px 8px;width:auto;max-width:none;height:auto;max-height:none;border-radius:14px;box-shadow:0 18px 60px #000b}
  .simple-runtime.open .simple-runtime textarea{font-size:16px}
}

/* Wide tablets keep the same two-pane Code Desk layout as desktop.  The
   legacy coarse-pointer rule above is intentionally overridden here so an
   iPad in landscape does not lose the runtime pane or switch editors. */
@media (pointer: coarse) and (min-width:901px), (hover: none) and (min-width:901px){
  .simple-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:10px;height:calc(100dvh - 58px);padding:10px}
  .simple-editor-pane{height:100%;border-radius:14px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .simple-runtime{display:flex!important;position:static;width:auto;max-width:none;height:auto;max-height:100%;border-radius:14px;box-shadow:none}
}

@media (max-width:600px){
  .simple-shell .topbar{height:calc(54px + env(safe-area-inset-top));flex-basis:calc(54px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);gap:4px}
  .simple-shell .topbar .brand{font-size:14px}
  .simple-shell .topbar .btn{padding:7px 9px;font-size:12px}
  .simple-workspace{height:calc(100vh - 54px - env(safe-area-inset-top));height:calc(100dvh - 54px - env(safe-area-inset-top))}
  .simple-runtime.open{inset:calc(54px + env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom)) 6px}
  .file-tab{min-height:36px;padding:0 10px}
  .editor-gutter{width:48px;font-size:13px}
  .editor-line-number{padding-right:8px}
  .editor,.editor-highlight{font-size:14px;line-height:22px;padding-left:0;padding-right:0}
  .editor-status{min-height:30px;padding-left:8px;padding-right:8px;font-size:11px;gap:6px;overflow-x:auto;white-space:nowrap}
  .simple-diagnostics{max-height:28dvh}
  .diagnostic-item{padding:8px;font-size:11px;overflow:hidden}
  .diagnostic-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .memo-panel{width:calc(100vw - 8px)!important;min-width:0;max-width:100vw}
  .memo-head{padding-top:max(10px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:10px}
  .memo-list{padding-left:10px;padding-right:10px}
  .memo-item-head{gap:7px}
  .memo-drag-handle{touch-action:none}
  .memo-item-actions{max-width:72px}
  .memo-item-actions .inline-copy{font-size:10px}
}

@media (min-width:901px) and (max-height:620px){
  .simple-workspace{padding:6px;height:calc(100dvh - 58px)}
  .file-tab{min-height:32px}
  .editor-status{min-height:25px}
  .simple-diagnostics{max-height:22dvh}
}

/* Keep the same visual editor on touch browsers. The textarea remains the
   real input/caret layer while the syntax layer supplies the colors. */
.editor-errors,.editor-brackets{position:absolute;z-index:1;top:0;left:0;width:max-content;min-width:100%;min-height:100%;pointer-events:none;will-change:transform}
.editor-error-marker{position:absolute;display:block;background:rgba(241,76,76,.035);border-radius:1px;pointer-events:none}
.editor-error-marker::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 3 Q2 0 4 3 T8 3' fill='none' stroke='%23F14C4C' stroke-width='1'/%3E%3C/svg%3E");background-repeat:repeat-x;pointer-events:none}
.editor-bracket-marker{position:absolute;display:block;border:1px solid rgba(180,195,210,.55);background:transparent;border-radius:2px;pointer-events:none}
.editor-highlight .token-reference{background:rgba(78,160,255,.12);box-shadow:inset 0 -1px rgba(140,190,255,.55)}
.editor-indent-line{background:rgba(112,225,182,.12)}
.editor-indent-line.active{background:rgba(112,225,182,.36);box-shadow:none}
.editor-line-number.error{color:#ff9b9b;background:rgba(126,58,62,.18)}
.editor,.editor-highlight{letter-spacing:0;word-spacing:0;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.editor::selection{background:#264f78!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.editor::-moz-selection{background:#264f78!important;color:#fff!important}
@media(pointer:coarse),(hover:none){
  .editor-highlight,.editor-indent-guides,.editor-errors,.editor-brackets{display:block!important}
  .editor{color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff!important;background:transparent!important}
  .editor::selection{background:#264f78!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .editor::-moz-selection{background:#264f78!important;color:#fff!important}
}
html.ipad-editor .editor-highlight,html.ipad-editor .editor-indent-guides,html.ipad-editor .editor-errors,html.ipad-editor .editor-brackets{display:block!important}
html.ipad-editor .editor{color:transparent!important;-webkit-text-fill-color:transparent!important;background:transparent!important;caret-color:#fff!important}
html.ipad-editor .editor::selection{background:#264f78!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Editor chrome follows the VS Code Dark+ palette.  The surrounding app keeps
   its own theme, while the editing surface uses the familiar neutral canvas,
   gutter, status bar, and token colors. */
.simple-editor-pane{background:#1e1e1e;border-color:#3e3e42}
.file-tab{min-height:35px;background:#37373d;border-bottom-color:#303031;color:#ffffff;box-shadow:inset 0 1px #007acc}
.file-dot{background:#3794ff}
.file-dot{display:none}.file-dot.dirty{display:block}
.editor-gutter,.editor-highlight,.editor,.editor-fold-ellipsis,.editor-suggest-item,.editor-hover,.editor-find input{font-family:var(--editor-font-family,Consolas,"Courier New",monospace)}
.editor-gutter,.editor-highlight,.editor{font-size:var(--editor-font-size,14px);line-height:var(--editor-line-height,19px)}
.editor-line-number{height:var(--editor-line-height,19px)}
.editor-shell,.editor-layer{background:#1e1e1e}
.editor-gutter{background:#1e1e1e;border-right:0;color:#858585}
.editor-line-number{color:#858585}
.editor-line-number.active{color:#c6c6c6;background:transparent;font-weight:600}
.editor-current-line{position:absolute;z-index:0;top:0;left:0;width:max-content;min-width:100%;height:var(--editor-line-height,19px);background:rgba(255,255,255,.035);pointer-events:none;will-change:transform}
.editor-highlight{color:#d4d4d4}
.editor{caret-color:#aeafad}
.editor-status{background:#007acc;border-top-color:#007acc;color:#ffffff}
.editor-status .muted,.editor-status .editor-tool{color:#ffffff}
.editor-highlight .token-keyword{color:#569cd6}
.editor-highlight .token-control-keyword{color:#c586c0}
.editor-highlight .token-constant{color:#569cd6}
.code-desk-constant{color:#569cd6!important}
.code-desk-function{color:#dcdcaa!important}
.code-desk-class{color:#4ec9b0!important}
.code-desk-variable,.code-desk-parameter{color:#9cdcfe!important}
.code-desk-property{color:#9cdcfe!important}
.code-desk-logical-operator{color:#d4d4d4!important}
.editor-highlight .token-builtin{color:#4ec9b0}
.editor-highlight .token-string{color:#ce9178}
.editor-highlight .token-number{color:#b5cea8}
.editor-highlight .token-comment{color:#6a9955}
.editor-highlight .token-function{color:#dcdcaa}
.editor-highlight .token-class-name{color:#4ec9b0}
.editor-highlight .token-decorator{color:#d7ba7d}
.editor-highlight .token-variable{color:#9cdcfe}
.editor-highlight .token-operator,.editor-highlight .token-punctuation{color:#d4d4d4}
.editor-highlight .token-bracket-0{color:#d7ba7d}
.editor-highlight .token-bracket-1{color:#c586c0}
.editor-highlight .token-bracket-2{color:#4ec9b0}
.editor-highlight .token-bracket-3{color:#569cd6}
.editor-highlight .token-bracket-4{color:#ce9178}
.editor-highlight .token-bracket-5{color:#dcdcaa}
.editor-highlight .token-bracket-unexpected{color:#f14c4c}
.editor-highlight .token-reference{background:#ADD6FF26;box-shadow:none}
.editor-indent-guides{z-index:1}
.editor-current-line{z-index:0}
.editor-find-matches{position:absolute;z-index:1;top:0;left:0;width:max-content;min-width:100%;height:max-content;min-height:100%;pointer-events:none;will-change:transform}
.editor-find-match{position:absolute;display:block;background:rgba(234,92,0,.26);border:1px solid rgba(234,92,0,.45);border-radius:2px;pointer-events:none}
.editor-find-match.current{background:rgba(234,92,0,.5);border-color:rgba(255,190,120,.8)}
.editor-highlight{z-index:2}
.editor-errors,.editor-brackets{z-index:3}
.editor{z-index:4}
.editor-indent-guides{background-image:none;background-color:transparent}
.editor-indent-line{background:#404040}
.editor-indent-line.active{background:#707070;box-shadow:none}
.editor-error-marker{background:rgba(241,76,76,.035)}
.editor-bracket-marker{border-color:rgba(255,255,255,.55)}
.editor-line-number.error{color:#f48771;background:rgba(126,58,62,.18)}
.editor-line-number{position:relative}
.editor-line-number-text{display:block}
.editor-line-number.fold-hidden{visibility:hidden}
.editor-fold-toggle{position:absolute;left:2px;top:1px;width:15px;height:20px;padding:0;border:0;background:transparent;color:#858585;font:16px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;opacity:0;cursor:pointer}
.editor-line-number.foldable:hover .editor-fold-toggle,.editor-line-number.folded .editor-fold-toggle{opacity:1}
.editor-fold-toggle:hover{color:#cccccc;background:#2a2d2e}
.editor-folds{position:absolute;z-index:3;top:0;left:0;width:max-content;min-width:100%;height:max-content;min-height:100%;pointer-events:none;will-change:transform}
.editor-fold-cover{position:absolute;display:block;background:#1e1e1e;pointer-events:none}
.editor-fold-ellipsis{position:absolute;display:block;color:#858585;background:#1e1e1e;font:14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;pointer-events:none}
.editor-multi{position:absolute;z-index:3;top:0;left:0;width:max-content;min-width:100%;height:max-content;min-height:100%;pointer-events:none;will-change:transform}
.editor-multi-selection{position:absolute;display:block;background:rgba(38,79,120,.55);border-radius:1px;pointer-events:none}
.editor-multi-caret{position:absolute;display:block;width:1px;background:#aeafad;pointer-events:none}
.editor-find{position:absolute;z-index:10;top:10px;right:12px;display:flex;flex-direction:column;gap:5px;min-width:min(390px,calc(100% - 24px));padding:7px;background:#252526;border:1px solid #303031;border-radius:4px;box-shadow:0 8px 24px #0008}
.editor-find[hidden]{display:none}
.editor-find-row,.editor-replace-row{display:flex;align-items:center;gap:5px}
.editor-find-toggle{min-width:28px;padding:4px 6px!important;color:#cccccc!important;border-color:transparent!important;font-weight:600}
.editor-find-toggle.active{background:#094771!important;border-color:#007acc!important;color:#ffffff!important}
.editor-replace-row[hidden]{display:none}
.editor-find input{height:28px;padding:4px 7px;border:1px solid #3f3f46;border-radius:2px;background:#1e1e1e;color:#cccccc;outline:0;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.editor-find input:focus{border-color:#007acc}
.editor-find .btn{padding:4px 8px;border-radius:2px;font-size:12px}
.editor-find .muted{padding:0 3px;color:#a0a0a0}
.editor-find{left:auto}
@media (max-width:600px){.editor-find{left:8px;right:8px;top:8px;min-width:0}}
.editor-find textarea{font-family:var(--editor-font-family,Consolas,"Courier New",monospace);resize:none;overflow:hidden;white-space:pre;line-height:18px}
.editor-find textarea{min-width:0;flex:1;height:28px;padding:4px 7px;border:1px solid #3f3f46;border-radius:2px;background:#1e1e1e;color:#cccccc;outline:0;font-size:13px}
.editor-find textarea:focus{border-color:#007acc}
.editor-gutter{padding-top:0;padding-bottom:0}
.editor-highlight,.editor{padding-top:0;padding-bottom:0}
.editor-layer.editor-word-wrap .editor,.editor-layer.editor-word-wrap .editor-highlight{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;width:100%;min-width:0}
.editor-layer.editor-word-wrap .editor{overflow-x:hidden}
.status-warning{color:#cca700!important}.diagnostic-item.warning{color:#cca700}.diagnostic-item.warning .diagnostic-icon{background:#8a6d1d}
@media (pointer:coarse),(hover:none){.editor-line-number.foldable .editor-fold-toggle{opacity:.78}}
.editor-status-item{white-space:nowrap}
.editor{scrollbar-color:#79797966 #1e1e1e;scrollbar-width:auto}.editor::-webkit-scrollbar{width:14px;height:12px}.editor::-webkit-scrollbar-track{background:#1e1e1e}.editor::-webkit-scrollbar-thumb{background:#79797966}.editor::-webkit-scrollbar-thumb:hover{background:#64646499}.editor::-webkit-scrollbar-thumb:active{background:#bfbfbf66}
.editor-suggest{position:absolute;z-index:11;display:flex;flex-direction:column;min-width:220px;max-width:min(360px,calc(100% - 16px));max-height:260px;overflow:auto;padding:4px;background:#252526;border:1px solid #303031;border-radius:3px;box-shadow:0 8px 24px #0008}
.editor-suggest[hidden]{display:none}
.editor-suggest-item{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:28px;padding:4px 8px;border:0;border-radius:2px;background:transparent;color:#cccccc;text-align:left;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
.editor-suggest-item small{color:#858585;font:11px ui-sans-serif,system-ui,sans-serif}
.editor-suggest-item:hover,.editor-suggest-item.active{background:#094771;color:#ffffff}
@media (max-width:600px){.editor-suggest{min-width:240px;max-width:calc(100% - 16px);max-height:300px}.editor-suggest-item{min-height:36px;padding:7px 10px;font-size:14px}}
.editor-command-palette{position:absolute;z-index:20;top:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;width:min(620px,calc(100% - 24px));max-height:min(420px,calc(100% - 32px));padding:6px;background:#252526;border:1px solid #303031;border-radius:4px;box-shadow:0 8px 32px #0009;color:#cccccc}
.editor-command-palette[hidden]{display:none}
.editor-command-head{display:flex}
.editor-command-input{width:100%;height:32px;padding:5px 8px;border:1px solid #007acc;border-radius:2px;background:#1e1e1e;color:#cccccc;outline:0;font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.editor-command-list{overflow:auto;display:flex;flex-direction:column;gap:1px;min-height:0}
.editor-command-item{display:flex;align-items:center;width:100%;min-height:30px;padding:5px 8px;border:0;border-radius:2px;background:transparent;color:#cccccc;text-align:left;font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer}
.editor-command-item.active,.editor-command-item:hover{background:#094771;color:#ffffff}
@media (max-width:600px){.editor-command-palette{top:8px;width:calc(100% - 16px);max-height:calc(100% - 16px)}.editor-command-item{min-height:36px;padding:7px 10px;font-size:14px}}
.editor-hover{position:absolute;z-index:12;max-width:min(520px,calc(100% - 16px));padding:8px 10px;background:#252526;border:1px solid #303031;border-radius:3px;box-shadow:0 8px 24px #0008;color:#cccccc;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;pointer-events:none}
.editor-hover[hidden]{display:none}
@media (max-width:600px){.editor-hover{max-width:calc(100% - 16px);font-size:13px}}
.editor-signature{position:absolute;z-index:12;max-width:min(560px,calc(100% - 16px));padding:7px 9px;background:#252526;border:1px solid #303031;border-radius:3px;box-shadow:0 8px 24px #0008;color:#cccccc;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;pointer-events:none}
.editor-signature code{color:#d4d4d4;font:inherit}
.editor-signature-active{display:block;margin-top:4px;color:#9cdcfe;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace}
.editor-signature[hidden]{display:none}
@media (max-width:600px){.editor-signature{max-width:calc(100% - 16px);font-size:13px}.editor-signature-active{font-size:12px}}
.editor-peek{position:absolute;z-index:14;left:0;right:0;bottom:0;max-height:42%;display:flex;flex-direction:column;background:#252526;border:1px solid #454545;box-shadow:0 8px 24px #0008;color:#cccccc;font:12px/1.35 ui-monospace,Menlo,Consolas,monospace}
.editor-peek[hidden]{display:none}
.editor-peek-header{display:flex;align-items:center;justify-content:space-between;min-height:30px;padding:5px 8px;border-bottom:1px solid #3f3f46;color:#cccccc}
.editor-peek-header b{color:#9cdcfe;font-weight:400}
.editor-peek-close{font-size:16px!important;color:#858585!important}
.editor-peek-list{overflow:auto;display:flex;flex-direction:column;padding:2px}
.editor-peek-item{display:flex;flex-direction:column;gap:3px;width:100%;padding:6px 8px;border:0;border-radius:2px;background:transparent;color:#cccccc;text-align:left;cursor:pointer;font:inherit}
.editor-peek-item.active,.editor-peek-item:hover{background:#094771;color:#ffffff}
.editor-peek-location{color:#858585;font-size:11px}
.editor-peek-item code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font:inherit}
.editor-peek-empty{padding:12px;color:#858585}
.editor-shell.monaco-active .editor-layer>.editor-peek{display:none!important}
@media (max-width:600px){.editor-peek{max-height:48%;font-size:13px}.editor-peek-item{min-height:38px;padding:8px 10px}.editor-peek-location{font-size:12px}}
.editor-rename{position:absolute;z-index:13;padding:4px;background:#252526;border:1px solid #007acc;border-radius:2px;box-shadow:0 8px 24px #0008}
.editor-rename[hidden]{display:none}
.editor-rename-input{width:190px;height:24px;padding:2px 6px;border:1px solid #3f3f46;border-radius:2px;outline:0;background:#1e1e1e;color:#cccccc;font:13px/20px var(--editor-font-family,Consolas,"Courier New",monospace)}
.editor-rename-input:focus{border-color:#007acc;box-shadow:0 0 0 1px #007acc}
@media (max-width:600px){.editor-rename{max-width:calc(100% - 16px)}.editor-rename-input{width:min(220px,calc(100vw - 44px));height:30px;font-size:14px}}

/* Final VS Code Dark+ alignment audit.  Keep the existing layout and only
   correct the editor chrome that is visibly different between Monaco and the
   lightweight fallback editor. */
:root{--editor-ui-font:-apple-system,BlinkMacSystemFont,"Segoe WPC","Segoe UI",HelveticaNeue-Light,system-ui,Ubuntu,"Droid Sans",sans-serif}
.simple-editor-pane .file-tab{background:#37373d;border-bottom-color:#303031;color:#ffffff;box-shadow:inset 0 1px #007acc;font-family:var(--editor-ui-font)}
.simple-editor-pane .editor-status{font-family:var(--editor-ui-font)}
.simple-editor-pane .monaco-editor .line-numbers{font-family:var(--editor-font-family,Consolas,"Courier New",monospace)}
.simple-editor-pane .monaco-editor .core-guide.core-guide-indent{box-shadow:inset 1px 0 0 #404040}
.simple-editor-pane .monaco-editor .core-guide.core-guide-indent.indent-active{box-shadow:inset 1px 0 0 #707070}
.simple-editor-pane .monaco-editor .selected-text{background:#264f78}
.simple-editor-pane .monaco-editor .monaco-hover{border:1px solid #303031}
.editor::selection,.editor::-moz-selection{background:#264f78!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.editor-suggest,.editor-command-palette,.editor-hover,.editor-signature,.editor-peek,.editor-find{font-family:var(--editor-ui-font)}
.editor-suggest-item,.editor-command-item{font-family:var(--editor-ui-font);font-size:13px;line-height:22px}
.editor-find input,.editor-find textarea{font-family:var(--editor-ui-font);font-size:13px}
.editor-hover{font-size:14px;line-height:22px;border-color:#303031}
.editor-signature{font-size:14px;line-height:22px;border-color:#303031}
.editor-context-menu{position:fixed;z-index:150;min-width:190px;padding:4px 0;border:1px solid #454545;background:#252526;box-shadow:0 8px 24px #0009;color:#cccccc;font:13px var(--editor-ui-font);outline:0}
.editor-context-item{display:block;width:100%;min-height:29px;padding:4px 14px;border:0;background:transparent;color:#cccccc;text-align:left;font:inherit;cursor:pointer}
.editor-context-item:hover,.editor-context-item:focus{background:#094771;color:#ffffff;outline:0}
.editor-context-separator{height:1px;margin:4px 0;background:#454545}

/* VS Code-like Workbench rail. The Explorer starts collapsed so the editor
   keeps its compact Code Desk layout, while the same surface can be opened
   without changing editor or runtime instances. */
.simple-body{display:grid;grid-template-columns:48px minmax(0,1fr);flex:1;min-height:0;height:calc(100dvh - 58px);background:#181818}
.simple-activitybar{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;background:#181818;border-right:1px solid #2b2b2b;min-width:48px}
.simple-activity-action{width:42px;height:42px;padding:0;border:0;border-left:2px solid transparent;background:transparent;color:#858585;font:22px/1 var(--editor-ui-font);opacity:.9}
.simple-activity-action svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.simple-activity-action:hover{color:#ffffff;background:#252526}.simple-activity-action.active{border-left-color:#007acc;color:#ffffff}
.simple-sidebar{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#181818;border-right:1px solid #2b2b2b;color:#cccccc;font:12px/1.4 var(--editor-ui-font);overflow:auto}
.simple-sidebar[hidden]{display:none}.simple-sidebar-head{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 10px;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.simple-sidebar-section{padding:8px 10px 5px;color:#858585;text-transform:uppercase;font-size:10px}.simple-sidebar-file{display:flex;align-items:center;gap:7px;width:100%;min-height:28px;padding:4px 10px 4px 16px;border:0;background:transparent;color:#cccccc;text-align:left;font:inherit}.simple-sidebar-file:hover{background:#2a2d2e}.simple-sidebar-file.active{background:#37373d;color:#ffffff}.simple-sidebar-file .file-dot{display:block;width:7px;height:7px}.simple-sidebar-folder{padding:5px 10px;color:#cccccc}
.simple-body.sidebar-open{grid-template-columns:48px 220px minmax(0,1fr)}.simple-body.sidebar-open .simple-sidebar{display:flex}.simple-body.sidebar-open .simple-workspace{grid-column:3}
.simple-body>.simple-workspace{grid-column:2;grid-row:1;height:100%;min-height:0}
@media (max-width:900px){.simple-body{grid-template-columns:40px minmax(0,1fr);height:calc(100dvh - 54px)}.simple-activitybar{min-width:40px}.simple-activity-action{width:38px;height:40px}.simple-body.sidebar-open{grid-template-columns:40px minmax(0,1fr)}.simple-body.sidebar-open .simple-sidebar{position:fixed;z-index:75;left:40px;top:54px;bottom:0;width:min(230px,calc(100vw - 40px));box-shadow:12px 0 34px #0009}.simple-body.sidebar-open .simple-workspace{grid-column:2}}
@media (max-width:600px){.simple-activitybar{padding-top:6px}.simple-activity-action{font-size:20px}.simple-sidebar{font-size:13px}}

/* VS Code-like bottom panel. It is part of the editor workbench grid on
   desktop and becomes a compact overlay on touch-sized viewports. */
.simple-body{grid-template-rows:minmax(0,1fr)}
.simple-body.panel-open{grid-template-rows:minmax(0,1fr) minmax(160px,32dvh)}
.simple-panel{position:relative;grid-column:2/-1;grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column;background:#181818;border-top:1px solid #2b2b2b;color:#cccccc;font:12px/1.4 var(--editor-ui-font);overflow:hidden}
.simple-panel[hidden]{display:none}
.simple-panel-resize-handle{position:absolute;z-index:3;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;touch-action:none}
.simple-panel-resize-handle:hover,.simple-body.panel-resizing .simple-panel-resize-handle{background:#007acc}
.simple-body.panel-resizing,.simple-body.panel-resizing *{user-select:none!important;cursor:ns-resize!important}
.simple-panel-head{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 8px;border-bottom:1px solid #2b2b2b;background:#181818}
.simple-panel-tabs{display:flex;align-items:stretch;height:35px;gap:2px}
.simple-panel-tab{position:relative;padding:0 10px;border:0;border-bottom:1px solid transparent;background:transparent;color:#858585;font:11px var(--editor-ui-font);cursor:pointer}
.simple-panel-tab:hover{color:#cccccc}.simple-panel-tab.active{color:#ffffff;border-bottom-color:#007acc}.simple-panel-tab span{display:inline-block;min-width:16px;margin-left:3px;color:#858585}.simple-panel-tab.active span{color:#cccccc}
.simple-panel-content{display:flex;flex:1;min-height:0;overflow:hidden}.simple-panel-view{display:flex;flex:1;min-height:0;overflow:auto}.simple-panel-view[hidden]{display:none}
.simple-panel .simple-diagnostics{flex:1;max-height:none;border:0;background:#181818}.simple-panel-output{flex:1;min-height:0;overflow:auto;margin:0;padding:10px 12px;background:#1e1e1e;color:#cccccc;white-space:pre-wrap;font:13px/1.5 ui-monospace,Consolas,monospace}
.simple-body.sidebar-open .simple-panel{grid-column:2/-1}
@media (max-width:900px){.simple-body.panel-open{grid-template-rows:minmax(0,1fr)}.simple-panel{position:fixed;z-index:68;left:40px;right:0;bottom:0;height:min(42dvh,360px);border:1px solid #2b2b2b;box-shadow:0 -14px 40px #0009}.simple-body.sidebar-open .simple-panel{grid-column:auto}}

/* VS Code's status bar belongs to the whole workbench, not only the editor
   group. The mobile layout keeps its compact per-editor status line. */
.simple-statusbar{display:none}
@media (min-width:901px){
  .simple-shell .simple-body{height:auto;min-height:0;flex:1}
  .simple-statusbar{display:flex;align-items:center;gap:12px;min-height:22px;padding:0 10px;background:#007acc;color:#ffffff;font:11px var(--editor-ui-font);white-space:nowrap;overflow:hidden}
.simple-statusbar-item{display:inline-flex;align-items:center;min-width:0;height:22px;color:#ffffff}
  .simple-statusbar-spacer{flex:1;min-width:8px}.simple-statusbar-link{padding:0 3px;border:0;background:transparent;color:#ffffff;cursor:pointer}.simple-statusbar-link:hover{background:#168ad0}
  .simple-statusbar-menu{position:fixed;z-index:130;min-width:150px;padding:4px 0;border:1px solid #454545;background:#252526;box-shadow:0 8px 24px #0009}
  .simple-statusbar-menu[hidden]{display:none}
  .simple-statusbar-menu button{display:block;width:100%;min-height:28px;padding:5px 12px;border:0;background:transparent;color:#cccccc;text-align:left;font:12px var(--editor-ui-font);cursor:pointer}
  .simple-statusbar-menu button:hover,.simple-statusbar-menu button:focus-visible{background:#094771;color:#ffffff;outline:0}
  .simple-editor-pane>.editor-status{display:none}
}

/* Desktop menu bar and menu surface. The same commands remain available from
   Monaco's native command palette and the compact toolbar on small screens. */
.simple-menubar,.simple-menu-popover{display:none}
@media (min-width:901px){
  .simple-menubar{display:flex;align-items:center;gap:1px;margin-left:8px;height:35px}
  .simple-menu-button{height:27px;padding:0 7px;border:0;border-radius:2px;background:transparent;color:#cccccc;font:12px var(--editor-ui-font);cursor:pointer}
  .simple-menu-button:hover,.simple-menu-button.active{background:#2a2d2e;color:#ffffff}
  .simple-menu-popover{display:block;position:fixed;z-index:120;min-width:220px;padding:4px 0;border:1px solid #454545;background:#252526;box-shadow:0 8px 24px #0009}
  .simple-menu-popover[hidden]{display:none}
  .simple-menu-item{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;min-height:30px;padding:5px 12px;border:0;background:transparent;color:#cccccc;text-align:left;font:12px var(--editor-ui-font);cursor:pointer}
  .simple-menu-item:hover{background:#094771;color:#ffffff}.simple-menu-item small{color:#858585;font-size:11px}.simple-menu-item:hover small{color:#cccccc}
  .simple-shell .topbar>#simpleNew,.simple-shell .topbar>#simpleSave,.simple-shell .topbar>#openMemo{display:none}
}
@media (max-width:900px){.simple-menubar,.simple-menu-popover{display:none!important}}

/* Desktop Workbench chrome: VS Code keeps the title bar, rail, editor group,
   and panel surfaces flat and separated by 1px rules rather than cards. */
@media (min-width:901px){
  .simple-shell{background:#181818}
  .simple-shell .topbar{height:35px;flex-basis:35px;gap:8px;padding:0 10px;background:#181818;border-bottom:1px solid #2b2b2b;backdrop-filter:none}
  .simple-shell .brand{font-size:13px;font-weight:600;color:#cccccc}.simple-shell .brand span{color:#cccccc}
  .simple-shell .topbar .btn{padding:5px 8px;border:0;border-radius:2px;background:transparent;color:#cccccc;font-size:12px;font-weight:400}
  .simple-shell .topbar .btn:hover{background:#2a2d2e;border-color:transparent}.simple-shell .topbar .btn.primary{background:#0e639c;border-color:#0e639c;color:#ffffff}
  .simple-body{height:calc(100dvh - 35px);background:#181818}
  .simple-workspace{height:100%;gap:0;padding:0}
  .simple-editor-pane,.simple-runtime{border:0;border-radius:0;background:#1e1e1e}
  .simple-runtime{border-left:1px solid #2b2b2b;padding:10px;background:#252526}
  .simple-editor-pane .file-tab{min-height:35px;padding:0 10px;border-radius:0;background:#252526;box-shadow:inset 0 1px #007acc}
  .simple-runtime textarea,.simple-runtime pre{border-radius:2px;background:#1e1e1e;border-color:#3f3f46}
  .simple-runtime .btn.primary{border-radius:2px;background:#0e639c;border-color:#0e639c;color:#ffffff}
}

/* VS Code's editor group and side panel are separated by a draggable sash. */
.simple-workspace-resize{display:none}
@media (min-width:901px){
  .simple-workspace{position:relative;grid-template-columns:minmax(280px,1fr) 5px minmax(260px,360px)}
  .simple-workspace>.simple-editor-pane{grid-column:1;grid-row:1}
  .simple-workspace>.simple-workspace-resize{display:block;grid-column:2;grid-row:1;z-index:4;cursor:col-resize;touch-action:none;background:transparent}
  .simple-workspace-resize:hover,.simple-workspace.runtime-resizing .simple-workspace-resize{background:#007acc}
  .simple-workspace>.simple-runtime{grid-column:3;grid-row:1}
  .simple-workspace.runtime-resizing,.simple-workspace.runtime-resizing *{user-select:none!important;cursor:col-resize!important}
}
.simple-sidebar-resize{display:none}
@media (min-width:901px){
  .simple-body.sidebar-open{grid-template-columns:44px 220px 5px minmax(0,1fr)}
  .simple-body.sidebar-open .simple-sidebar{grid-column:2;grid-row:1}
  .simple-body.sidebar-open>.simple-sidebar-resize{display:block;grid-column:3;grid-row:1;z-index:4;cursor:col-resize;touch-action:none;background:transparent}
  .simple-body.sidebar-open>.simple-sidebar-resize:hover,.simple-body.sidebar-open.sidebar-resizing>.simple-sidebar-resize{background:#007acc}
  .simple-body.sidebar-open .simple-workspace{grid-column:4}
  .simple-body.sidebar-open.sidebar-resizing,.simple-body.sidebar-open.sidebar-resizing *{user-select:none!important;cursor:col-resize!important}
}

/* Final Workbench geometry corrections. Keep the status bar in the flex
   calculation, keep touch overlays out of device safe areas, and render
   sashes as a narrow VS Code-style focus line instead of a solid strip. */
@media (min-width:901px){
  .simple-shell>.simple-body{height:auto;min-height:0;flex:1 1 0%}
  .simple-statusbar{flex:0 0 22px;height:22px;min-height:22px}
  .simple-menu-popover{max-height:calc(100dvh - 8px);overflow-y:auto;overscroll-behavior:contain}
}

.simple-workspace-resize,.simple-sidebar-resize{position:relative}
.simple-workspace-resize::after,.simple-sidebar-resize::after{content:"";position:absolute;inset:0 auto 0 2px;width:1px;background:transparent;pointer-events:none}
.simple-workspace-resize:hover,.simple-workspace.runtime-resizing .simple-workspace-resize,
.simple-body.sidebar-open>.simple-sidebar-resize:hover,.simple-body.sidebar-open.sidebar-resizing>.simple-sidebar-resize{background:transparent}
.simple-workspace-resize:hover::after,.simple-workspace.runtime-resizing .simple-workspace-resize::after,
.simple-body.sidebar-open>.simple-sidebar-resize:hover::after,.simple-body.sidebar-open.sidebar-resizing>.simple-sidebar-resize::after{background:#007acc}
.simple-workspace-resize:active::after,.simple-sidebar-resize:active::after{background:#007acc}

/* Static deployments may not be able to load Pyodide (for example when the
   CDN is blocked). Do not leave an unusable runtime surface in the workbench. */
.simple-shell.runtime-unavailable #simpleRun,
.simple-shell.runtime-unavailable #simpleOpenRuntime,
.simple-shell.runtime-unavailable #activityRun,
.simple-shell.runtime-unavailable #simpleRuntimeStatus,
.simple-shell.runtime-unavailable #simpleWorkspaceResize,
.simple-shell.runtime-unavailable #simpleRuntime,
.simple-shell.runtime-unavailable #panelOutput,
.simple-shell.runtime-unavailable #panelOutputView,
.simple-shell.runtime-unavailable .simple-menu-button[data-menu="run"]{display:none!important}
@media (min-width:901px){
  .simple-shell.runtime-unavailable .simple-workspace{grid-template-columns:minmax(0,1fr)!important}
}
.simple-panel-resize-handle{top:0;height:6px;background:transparent}
.simple-panel-resize-handle:hover,.simple-panel-resize-handle:active,.simple-body.panel-resizing .simple-panel-resize-handle{background:transparent}
.simple-panel-resize-handle::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:transparent;pointer-events:none}
.simple-panel-resize-handle:hover::after,.simple-panel-resize-handle:active::after,.simple-body.panel-resizing .simple-panel-resize-handle::after{background:#007acc}

@media (max-width:900px){
  .simple-body.sidebar-open .simple-sidebar{bottom:env(safe-area-inset-bottom)}
  .simple-panel{bottom:env(safe-area-inset-bottom)}
}
@media (max-width:600px){
  .simple-body.sidebar-open .simple-sidebar{top:calc(54px + env(safe-area-inset-top))}
}

/* Editor group tab: the close affordance appears on hover/focus like VS Code. */
.simple-editor-pane .file-tab{display:flex;align-items:center;gap:0;min-width:0}
.file-tab-button{display:flex;align-items:center;gap:7px;height:35px;min-width:0;padding:0 10px;border:0;border-top:1px solid #007acc;background:#252526;color:#ffffff;font:12px var(--editor-ui-font);cursor:pointer}
.file-tab-button:hover{background:#2d2d30}.file-tab-button .file-dot{display:none;width:7px;height:7px;border-radius:50%;background:#3794ff}.file-tab-button .file-dot.dirty{display:block}
.file-tab-close{width:28px;height:35px;padding:0;border:0;border-top:1px solid #007acc;background:#252526;color:#cccccc;font:16px/1 var(--editor-ui-font);cursor:pointer;opacity:0}
.file-tab:hover .file-tab-close,.file-tab:focus-within .file-tab-close{opacity:1}.file-tab-close:hover,.file-tab-close:focus{background:#3a3d41;color:#ffffff;opacity:1;outline:0}
.editor-empty{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#1e1e1e;color:#858585;font:13px var(--editor-ui-font)}
.editor-empty[hidden]{display:none}
.simple-editor-pane .editor-shell[hidden]{display:none !important}

/* Final Workbench audit polish.  These rules stay scoped to the Code Desk
   chrome so the original problem/memo surfaces and editor behavior remain
   untouched. */
.simple-activity-action:focus-visible,
.simple-sidebar-file:focus-visible,
.simple-menu-button:focus-visible,
.simple-menu-item:focus-visible,
.simple-panel-tab:focus-visible,
.file-tab-button:focus-visible,
.file-tab-close:focus-visible,
.simple-editor-pane .editor-tool:focus-visible,
.simple-runtime .btn:focus-visible,
#simpleEditorEmptyOpen:focus-visible,
.simple-shell .topbar .btn:focus-visible,
.simple-statusbar-link:focus-visible {
  outline:1px solid #007acc;
  outline-offset:-1px;
}

.simple-sidebar-head {
  border-bottom:1px solid #2b2b2b;
  background:#181818;
}
.simple-sidebar-file.active {
  box-shadow:inset 2px 0 #007acc;
}
.simple-panel-tab {
  display:flex;
  align-items:center;
  justify-content:center;
  height:35px;
  line-height:1;
}
.simple-panel-tab:focus-visible {
  border-bottom-color:#007acc;
}

@media (min-width:901px) {
  /* VS Code's editor group header is 35px including its bottom rule. */
  .simple-editor-pane .file-tab {
    height:35px;
    min-height:35px;
    background:#252526;
    border-bottom:1px solid #2b2b2b;
  }
  .simple-editor-pane .file-tab-button,
  .simple-editor-pane .file-tab-close {
    height:34px;
  }
  .simple-editor-pane .file-tab-button.active {
    background:#1e1e1e;
    color:#f0f0f0;
  }
  /* The active tab exposes its close affordance without requiring hover. */
  .simple-editor-pane .file-tab-button.active + .file-tab-close {
    opacity:1;
  }

  .simple-statusbar {
    gap:0;
    padding-left:8px;
    padding-right:8px;
  }
  .simple-statusbar-item {
    padding-left:6px;
    padding-right:6px;
  }
  .simple-statusbar-link:hover,
  .simple-statusbar-link:active,
  #simpleGlobalProblems:hover {
    background:#168ad0;
  }
  #simpleGlobalProblems {
    cursor:pointer;
  }
}

/* VS Code Zen Mode: retain the editor surface and remove surrounding chrome. */
.simple-shell.zen-mode {
  position:fixed;
  inset:0;
  z-index:200;
  min-height:100dvh;
  height:100dvh;
}
.simple-shell.zen-mode>.topbar,
.simple-shell.zen-mode>.simple-statusbar,
.simple-shell.zen-mode .simple-activitybar,
.simple-shell.zen-mode .simple-sidebar,
.simple-shell.zen-mode .simple-sidebar-resize,
.simple-shell.zen-mode .simple-runtime,
.simple-shell.zen-mode .simple-workspace-resize,
.simple-shell.zen-mode .simple-panel,
.simple-shell.zen-mode .simple-editor-pane>.file-tab,
.simple-shell.zen-mode .simple-editor-pane>.editor-status {
  display:none !important;
}
.simple-shell.zen-mode>.simple-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  height:100dvh;
  min-height:0;
}
.simple-shell.zen-mode>.simple-body>.simple-workspace {
  grid-column:1 !important;
  grid-row:1 !important;
  grid-template-columns:minmax(0,1fr) !important;
  width:100%;
  height:100%;
  padding:0;
}
.simple-shell.zen-mode .simple-editor-pane {
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
}

/* Keep touch-sized workbench surfaces inside the device safe area.  The
   env() terms resolve to zero on ordinary phones, tablets, and desktops. */
@media (max-width:900px) {
  .simple-shell .topbar {
    height:calc(54px + env(safe-area-inset-top));
    flex-basis:calc(54px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .simple-body {
    height:calc(100dvh - 54px - env(safe-area-inset-top));
  }
  .simple-workspace {
    height:calc(100dvh - 54px - env(safe-area-inset-top));
  }
  .simple-body.sidebar-open .simple-sidebar {
    top:calc(54px + env(safe-area-inset-top));
    bottom:max(8px,env(safe-area-inset-bottom));
  }
  .simple-runtime.open {
    bottom:max(8px,env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce) {
  .memo-panel,
  .switch::after,
  .toast {
    transition-duration:0.01ms;
  }
}

/* Keep the workbench chrome stable at every viewport width.  The original
   compact toolbar was allowed to replace this surface on touch-sized or
   narrow windows, which made the UI change when the window was resized or
   rotated.  Geometry may still adapt, but the visual language and action
   order stay the same. */
.simple-shell .topbar {
  height:35px;
  flex-basis:35px;
  gap:8px;
  padding:0 10px;
  background:#181818;
  border-bottom:1px solid #2b2b2b;
  backdrop-filter:none;
  overflow:hidden;
}
.simple-shell .topbar .brand {
  flex:none;
  font-size:13px;
  font-weight:600;
  color:#cccccc;
}
.simple-shell .topbar .brand span { color:#cccccc; }
.simple-shell .topbar .save-state {
  flex:none;
  color:#858585;
  font:11px var(--editor-ui-font);
  white-space:nowrap;
}
.simple-shell .topbar .btn {
  flex:none;
  height:27px;
  padding:0 8px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:#cccccc;
  font:12px var(--editor-ui-font);
  font-weight:400;
}
.simple-shell .topbar .btn:hover { background:#2a2d2e; border-color:transparent; }
.simple-shell .topbar .btn.primary { background:#0e639c; border-color:#0e639c; color:#ffffff; }
.simple-shell .topbar .btn.primary:hover { background:#1177b5; }
.simple-shell .topbar>#simpleNew,
.simple-shell .topbar>#simpleSave,
.simple-shell .topbar>#openMemo { display:inline-flex; align-items:center; }

/* The top-right actions are the stable one-click equivalents of the former
   toolbar.  Keep the menu bar for keyboard-oriented users without hiding the
   direct actions at desktop widths. */
@media (max-width:900px) {
  .simple-shell .topbar {
    height:54px;
    flex-basis:54px;
    gap:4px;
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .simple-shell .topbar::-webkit-scrollbar { display:none; }
  .simple-shell .topbar .brand { font-size:14px; }
  .simple-shell .topbar .save-state { display:none; }
  .simple-shell .topbar .btn { height:30px; padding:0 9px; font-size:12px; }
}
@media (max-width:600px) {
  .simple-shell .topbar {
    height:calc(54px + env(safe-area-inset-top));
    flex-basis:calc(54px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
}

/* Memo is a VS Code-like auxiliary editor surface: flat panels, the same
   editor font, and the same neutral borders as the workbench. */
.simple-shell~.memo-panel,
.memo-panel {
  width:min(580px,100vw);
  min-width:320px;
  background:#252526;
  border-left:1px solid #2b2b2b;
  border-radius:0;
  box-shadow:-14px 0 40px #0009;
  color:#cccccc;
  font:13px/1.45 var(--editor-ui-font);
}
.memo-head {
  min-height:35px;
  padding:0 10px 0 20px;
  background:#181818;
  border-bottom:1px solid #2b2b2b;
  font:11px var(--editor-ui-font);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.memo-head-actions { gap:2px; }
.memo-head-actions .btn,
.memo-actions .btn,
.memo-file-actions .btn {
  min-height:27px;
  padding:0 8px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:#cccccc;
  font:12px var(--editor-ui-font);
}
.memo-head-actions .btn:hover,
.memo-actions .btn:hover,
.memo-file-actions .btn:hover { background:#2a2d2e; border-color:transparent; }
.memo-actions .btn.primary { background:#0e639c; color:#ffffff; }
.memo-actions .btn.primary:hover { background:#1177b5; }
.memo-editor {
  padding:10px;
  background:#1e1e1e;
  border-bottom:1px solid #2b2b2b;
  max-height:58dvh;
}
.memo-editor input,
.memo-editor select,
.memo-editor textarea {
  border:1px solid #3f3f46;
  border-radius:2px;
  background:#1e1e1e;
  color:#cccccc;
  font:13px var(--editor-ui-font);
}
.memo-editor input:focus,
.memo-editor select:focus,
.memo-editor textarea:focus { border-color:#007acc; }
.memo-editor textarea { min-height:130px; }
.memo-preview-label { margin-top:10px; }
.memo-preview,
.memo-rendered {
  background:#181818;
  border:1px solid #3f3f46;
  border-radius:2px;
}
.memo-list {
  padding:10px;
  gap:1px;
  background:#181818;
}
.memo-item {
  min-height:0;
  padding:0;
  border:0;
  border-bottom:1px solid #2b2b2b;
  border-radius:0;
  background:#181818;
  box-shadow:none;
}
.memo-item:hover { background:#202020; }
.memo-item-head {
  min-height:35px;
  align-items:center;
  padding:0 6px;
  border-bottom:0;
}
.memo-title-toggle { align-items:center; }
.memo-chevron { font-size:20px; }
.memo-item-title b { font-size:13px; font-weight:400; }
.memo-item-actions .inline-copy {
  padding:4px 6px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:#cccccc;
  font:12px var(--editor-ui-font);
}
.memo-item-actions .inline-copy:hover { background:#2a2d2e; }
.memo-rendered {
  margin:0 6px 8px;
  padding:10px;
  max-height:min(310px,calc(100dvh - 240px));
  font:13px/1.55 var(--editor-ui-font);
}
.memo-rendered pre { font:13px/1.55 Consolas,"Courier New",monospace; }
.memo-resize-handle { color:#858585; }
.memo-resize-handle:hover { background:#2a2d2e; color:#ffffff; }
.memo-panel-resize-handle { background:linear-gradient(90deg,#3f3f46,#17253c00); }
.memo-panel-resize-handle:hover,
.memo-panel-resize-handle:active { background:#007acc; color:#ffffff; }
.memo-html-options { border-radius:2px; }

@media (max-width:600px) {
  .memo-panel { width:calc(100vw - 8px)!important; min-width:0; }
  .memo-head { min-height:calc(35px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .memo-list { padding:6px; }
}

@media (min-width:901px) {
  /* The result view is a closable workbench side panel. When it is closed,
     reclaim its track so the editor expands exactly like a closed VS Code
     auxiliary view. */
  .simple-runtime:not(.open){display:none !important}
  .simple-workspace:not(.runtime-open){grid-template-columns:minmax(280px,1fr) !important}
  .simple-workspace:not(.runtime-open)>.simple-workspace-resize{display:none}
}

/* Editor widgets use the same restrained elevation as VS Code's Dark+ popup
   surfaces. Monaco supplies the palette colors; this only restores the
   separation that is otherwise lost against the #1e1e1e editor background.
   The fallback widgets share the values so switching editors does not change
   the visual weight of completion, hover, find, or rename surfaces. */
.simple-editor-pane .monaco-editor .suggest-widget,
.simple-editor-pane .monaco-editor .monaco-hover,
.simple-editor-pane .monaco-editor .parameter-hints-widget,
.simple-editor-pane .monaco-editor .rename-box,
.editor-suggest,
.editor-command-palette,
.editor-hover,
.editor-signature,
.editor-peek,
.editor-rename,
.editor-find {
  box-shadow:0 2px 8px rgba(0,0,0,.36);
}

/* Keep the compact status line single-row at phone widths. At 320px the
   previous flex item sizing allowed it to grow to 42px and took space from
   the editor; horizontal overflow remains available for the less important
   items, as in VS Code's narrow status bar. */
@media (max-width:600px) {
  .simple-editor-pane>.editor-status {
    box-sizing:border-box;
    flex:0 0 30px;
    height:30px;
    min-height:30px;
    max-height:30px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
  }
}

/* The fallback editor keeps a syntax-colored layer under the transparent
   textarea. On touch browsers the textarea is the visible text layer, so
   restore VS Code's readable selection foreground after the desktop overlay
   rules above. Monaco does not use this textarea when it is active. */
@media (pointer:coarse), (hover:none) {
  .editor::selection {
    background:#264f78 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
  .editor::-moz-selection {
    background:#264f78 !important;
    color:#ffffff !important;
  }
}

html.ipad-editor .editor::selection {
  background:#264f78 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html.ipad-editor .editor::-moz-selection {
  background:#264f78 !important;
  color:#ffffff !important;
}

/* The legacy page used a generic .main layout rule. Monaco's completion
   rows also use .main, so isolate that rule from the workbench widgets. */
.simple-shell .monaco-editor .suggest-widget .main {
  width:auto;
  margin:0;
  padding:0;
}