.intro{max-width:900px;margin:0 auto;padding:42px 42px 38px}.intro h1{font-family:Georgia,serif;font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-2px;font-weight:500;margin:12px 0 18px}.intro h1 em{color:var(--accent);font-style:italic}.intro .lede{max-width:650px}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}.intro-grid div{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:14px}.intro-grid strong{font-size:14px}.intro-grid span{color:var(--muted);font-size:13px;line-height:1.4}.workspace{padding-top:1px}.vscode-handoff{display:flex;align-items:center;justify-content:space-between;gap:24px}.vscode-handoff h2{font-family:Georgia,serif;font-size:24px;font-weight:500;margin:10px 0 6px}.vscode-handoff p{color:var(--muted);font-size:14px;line-height:1.5;margin:0;max-width:620px}.vscode-handoff code{flex:none;background:#202832;color:#e9edf0;border-radius:6px;padding:14px 16px;font:13px ui-monospace,monospace}.editor-card{padding-bottom:22px}.monaco-editor{height:330px;border-radius:8px;overflow:hidden;background:#1e1e1e}.editor-loading{color:#aeb9c5;padding:24px;font:14px ui-monospace,monospace}.tag{font-size:10px;letter-spacing:1px;font-weight:800;color:var(--accent);text-transform:uppercase}@media(max-width:620px){.intro{padding:28px 22px}.intro-grid{grid-template-columns:1fr}.vscode-handoff{align-items:stretch;flex-direction:column}.vscode-handoff code{width:100%}.monaco-editor{height:280px}}

main{max-width:1320px}
    .workspace>.hero{max-width:none;margin:0 auto 22px}
    .workspace>.hero h1{font-size:34px;line-height:1.12;letter-spacing:0;margin:0}
    .workspace>.hero .eyebrow{margin-bottom:8px}
    .workspace>.hero .lede,.workspace>.vscode-handoff{display:none}
    #analyze-form{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.85fr);gap:16px;align-items:start}
    #analyze-form>.editor-card{grid-column:1;grid-row:1 / span 3;margin:0;padding:24px;height:100%}
    #analyze-form>.editor-card .section-head{margin-bottom:16px}
    #analyze-form>.card:not(.editor-card){grid-column:2;margin:0;padding:22px}
    #analyze-form>.card:not(.editor-card) .section-head{gap:12px;margin-bottom:14px}
    #analyze-form>.card:not(.editor-card) .section-head h2{font-size:21px}
    #analyze-form>.actions{grid-column:2;display:grid;gap:16px;margin:0;align-self:start}
    #analyze-form>.actions .mode{display:flex;flex-wrap:wrap;gap:12px}
    #analyze-form>.actions #submit{width:100%}
    .monaco-editor{height:min(68vh,760px);min-height:480px}
    @media(max-width:850px){
      main{padding:36px 20px 56px}
      #analyze-form{grid-template-columns:minmax(0,1fr)}
      #analyze-form>.editor-card,#analyze-form>.card:not(.editor-card),#analyze-form>.actions{grid-column:1;grid-row:auto}
      #analyze-form>.editor-card{height:auto}
      .monaco-editor{height:56vh;min-height:360px}
    }

#code-workspace{max-width:1040px;margin:0 auto}.editor-card{margin:0}.intent-box{margin:-2px 0 18px}.intent-box label{display:block;margin-bottom:7px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.intent-box textarea{min-height:60px;max-height:120px}.intent-box span{display:block;margin-top:6px;color:var(--muted);font-size:12px}.editor-toolbar{display:flex;align-items:center;gap:12px;margin:-2px 0 14px}.editor-toolbar label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.editor-toolbar select{border:1px solid #48525d;background:#2b3540;color:#f2f4f5;border-radius:5px;padding:8px 28px 8px 10px;font:13px ui-sans-serif,system-ui;cursor:pointer}.editor-toolbar #run{margin-left:auto;padding:10px 17px}.editor-toolbar #run-status{color:var(--muted);font-size:12px}.output-heading{display:flex;justify-content:space-between;margin:18px 0 8px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}#output-status{color:#5d9870}.output-box{min-height:100px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:7px;background:#fffdf9;color:var(--ink);padding:14px 16px;white-space:pre-wrap;font:13px/1.6 ui-monospace,SFMono-Regular,monospace}.output-box.error{border-color:#c74747;background:#fff7f5;color:#873b36}.output-box.runtime{border-color:#d5a53f;background:#fffaf0;color:#775e18}.output-box .output-title{display:block;font:800 13px ui-sans-serif,system-ui;margin-bottom:8px}.output-box .output-details{display:block;color:inherit}.output-box .output-note{display:block;margin-top:10px;font:12px ui-sans-serif,system-ui;color:var(--muted)}

body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
    .topbar{flex:0 0 76px}
    main{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}
    #intro,footer{display:none!important}
    #workspace{display:block!important;height:100%;padding:0}
    #workspace>.hero,#workspace>.vscode-handoff{display:none}
    #code-workspace{width:100%;height:100%;max-width:none;margin:0}
    #code-workspace>.editor-card{display:flex;flex-direction:column;height:100%;margin:0;padding:10px;border:0;border-radius:0;box-shadow:none;background:var(--paper)}
    #code-workspace>.editor-card>.section-head{display:none}
    .editor-toolbar{flex:none;margin:0 0 8px}
    .monaco-editor{width:100%;height:auto!important;min-height:0;flex:1;border-radius:0;overflow:hidden!important}
    .output-heading{flex:none;margin:8px 0 5px}
    .output-box{flex:0 0 96px;min-height:0;max-height:96px;border-radius:0}
    @media(max-width:620px){
      #code-workspace>.editor-card{padding:8px}
      .editor-toolbar{gap:8px}
      .editor-toolbar #run{padding:8px 12px}
      .editor-toolbar #run-status{display:none}
    }

main{padding:12px 20px}
    #code-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"editor brief";gap:16px}
    #code-workspace>.editor-card{grid-area:editor;min-width:0}
    .brief-panel{grid-area:brief;min-width:0;overflow:auto;padding:16px 8px 12px 18px;border-left:1px solid var(--line)}
    .brief-panel h2{margin:0 0 6px;font:500 22px Georgia,serif}
    .brief-panel>p{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.5}
    .brief-field{margin:0 0 20px}
    .brief-field label{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:var(--ink)}
    .brief-field textarea{min-height:120px;max-height:240px;background:#fff;border-color:var(--line);font:14px/1.5 ui-sans-serif,system-ui}
    .brief-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #314b681c}
    .editor-toolbar{order:-1}
    .file-tabs{display:flex;align-items:stretch;gap:3px;min-height:38px;margin:0 0 8px;border-bottom:1px solid #3c454f;background:#252d36}
    .file-tab{position:relative;max-width:180px;padding:0 14px;border:0;border-right:1px solid #343d47;background:transparent;color:#aeb7c1;font:12px ui-sans-serif,system-ui;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .file-tab[aria-selected="true"]{background:#1e1e1e;color:#f4f5f6}
    .file-tab[aria-selected="true"]::after{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--accent);content:""}
    #add-file{width:36px;margin-left:2px;color:#c4ccd3;font-size:18px}
    #add-file:hover,.file-tab:hover{background:#323b45;color:#fff}
    .stdin-field textarea{min-height:94px;max-height:160px;font:13px/1.5 ui-monospace,SFMono-Regular,monospace;white-space:pre}
    @media(max-width:760px){
      body{height:auto;min-height:100dvh;overflow:auto}
      main{min-height:calc(100dvh - 76px);padding:10px 12px}
      #workspace{height:auto;min-height:calc(100dvh - 96px)}
      #code-workspace{height:auto;min-height:calc(100dvh - 96px);grid-template-columns:minmax(0,1fr);grid-template-areas:"editor" "brief";grid-template-rows:minmax(55vh,1fr) auto}
      #code-workspace>.editor-card{height:68vh;min-height:440px}
      .brief-panel{overflow:visible;padding:18px 8px;border-left:0;border-top:1px solid var(--line)}
    }

.brief-panel{padding:14px 12px 18px 18px;border-left:1px solid #d7dce1}
    .brief-panel h2{font:700 15px ui-sans-serif,system-ui;margin:0 0 4px}
    .brief-panel>p{font-size:12px;margin:0 0 18px}
    .brief-field{margin:0 0 16px}
    .brief-field label{font-size:11px;margin-bottom:6px}
    .brief-field textarea,.brief-field select{width:100%;border:1px solid #c8ced4;border-radius:2px;background:#fff;color:var(--ink);font:13px/1.45 ui-sans-serif,system-ui}
    .brief-field textarea{padding:9px 10px;resize:vertical}
    .brief-field textarea:focus,.brief-field select:focus{outline:2px solid #314b6840;outline-offset:1px;border-color:var(--blue);box-shadow:none}
    .stdin-field textarea{height:220px;min-height:150px;max-height:45vh;white-space:pre}
    .limit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
    .limit-grid .brief-field{margin:0}
    .limit-grid select{height:36px;padding:0 8px}
    .brief-field .field-note{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}
    .logic-check-option{margin:0 0 16px;padding:9px 10px;border:1px solid #d7dce1;background:#f7f8f9;color:#394653;font-size:11px;line-height:1.4}
    .logic-check-option label{display:flex;align-items:center;gap:7px;margin:0;font-weight:700}
    .logic-check-option input{accent-color:var(--blue)}
    .logic-check-option span{display:block;margin:5px 0 0 22px;color:var(--muted);font-size:10px}
    @media(max-width:760px){.stdin-field textarea{height:180px;max-height:none}.brief-panel{border-left:0;border-top:1px solid #d7dce1}}

.topbar{height:60px;flex-basis:60px;padding:0 20px;background:#e9edf0;border-bottom:1px solid #c7cfd6}
    .brand{font:700 15px ui-sans-serif,system-ui;letter-spacing:0}
    .pill{padding:0;background:transparent;color:#4b5966;font-size:10px;letter-spacing:1px}
    button,.editor-toolbar select,.brief-field textarea,.brief-field select,.output-box{border-radius:2px}
    .editor-toolbar select{border-color:#687581}
    .field-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .check-indicator{display:inline-flex;align-items:center;gap:5px;color:#707784;font-size:10px;font-weight:700;white-space:nowrap}
    .check-indicator::before{width:7px;height:7px;border-radius:50%;background:#929ba4;content:""}
    .check-indicator[data-state="pass"]{color:#31714b}
    .check-indicator[data-state="pass"]::before{background:#3d8b5c}
    .check-indicator[data-state="fail"]{color:#a34135}
    .check-indicator[data-state="fail"]::before{background:#c44c40}
    .check-indicator[data-state="review"]{color:#8b681d}
    .check-indicator[data-state="review"]::before{background:#c2932f}
    .check-indicator[data-state="checking"]::before{background:#3d6d95}
    .file-tabs{width:100%;max-width:100%;height:38px;min-height:38px;flex:0 0 38px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:0 2px;border-radius:0;scrollbar-width:none}
    .file-tabs::-webkit-scrollbar{display:none}
    .file-tab{display:flex;flex:0 0 auto;align-items:center;justify-content:center;align-self:center;height:38px;line-height:1}
    #add-file{position:sticky;right:0;z-index:1;flex:0 0 30px;width:30px;height:30px;padding:0;line-height:1;background:#252d36}
    #run-status,.brief-panel>p,.field-note,#check-input{display:none!important}
    #add-file:disabled{opacity:.45;cursor:wait}

.issue-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hint-button,.fix-button{display:inline-flex;margin-top:0;padding:8px 12px;color:#fff;font-size:12px;font-weight:800}
    .hint-button{background:#314b68}
    .hint-button:hover{background:#243b55}
    .fix-button{background:#e36b48}
    .fix-button:hover{background:#bd5134}
    .hint-button:disabled,.fix-button:disabled{cursor:wait;opacity:.72}
    .hint-line{background:rgba(227,107,72,.14)}
    .hint-glyph::after{content:'?';display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:2px auto 0;border:1px solid #e36b48;border-radius:50%;color:#e36b48;font:800 11px/1 ui-sans-serif,system-ui;background:#fff7f5}

#code-workspace>.editor-card{padding:0}
/* One active issue at a time: colors identify the source of the problem. */
.issue-line-compile{background:rgba(231,92,82,.22)}
.issue-line-runtime{background:rgba(226,168,55,.22)}
.issue-line-logic{background:rgba(112,91,205,.22)}
.issue-line-type{background:rgba(52,136,191,.22)}
.issue-glyph-compile::after,.issue-glyph-runtime::after,.issue-glyph-logic::after,.issue-glyph-type::after{content:'!';display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:2px auto 0;border-radius:50%;color:#fff;font:800 11px/1 ui-sans-serif,system-ui}
.issue-glyph-compile::after{background:#c74747}
.issue-glyph-runtime::after{background:#b07a10}
.issue-glyph-logic::after{background:#6755b5}
.issue-glyph-type::after{background:#2879a9}
.issue-question-compile,.issue-question-runtime,.issue-question-logic,.issue-question-type{display:inline-block;margin-left:7px;padding:0 4px;border-radius:50%;font:800 11px/17px ui-sans-serif,system-ui;text-align:center}
.issue-question-compile{color:#fff;background:#c74747}
.issue-question-runtime{color:#fff;background:#b07a10}
.issue-question-logic{color:#fff;background:#6755b5}
.issue-question-type{color:#fff;background:#2879a9}
.output-box.logic{border-color:#6755b5;background:#f8f6ff;color:#493b8a}
.output-box.success{border-color:#4f9668;background:#f3fbf5;color:#27613c}
.issue-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 10px 0;color:#707784;font-size:11px;font-weight:700}
.issue-legend span,.issue-legend .legend-link{display:inline-flex;align-items:center;gap:5px}
.issue-legend .legend-link{color:inherit;text-decoration:underline;text-decoration-color:#b8c0c8;text-underline-offset:3px}
.issue-legend .legend-link:hover{color:#314b68;text-decoration-color:#314b68}
.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:50%}
.legend-compile{background:#c74747}.legend-runtime{background:#b07a10}.legend-logic{background:#6755b5}.legend-type{background:#2879a9}
    #code-workspace>.editor-card>.editor-toolbar{order:-2}
    #code-workspace>.editor-card>.file-tabs{order:-1}
    .editor-toolbar{margin:10px 10px 8px}
    .file-tabs{width:100%;margin:0;padding:0;border-radius:0}
    .monaco-editor{width:100%;margin:0}
    .output-heading{margin:8px 10px 5px}
    .output-box{width:calc(100% - 20px);margin:0 10px 10px}
    .brief-panel .limit-grid{display:grid}
    .brief-panel #memory-limit,.brief-panel #constraints{display:block}

.brief-panel{display:flex;flex-direction:column;gap:14px}
    body > .brief-panel{display:none!important}
    .sidebar-tabs{display:flex;border-bottom:1px solid #c8ced4}
    .sidebar-tab{min-height:34px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#56616c;font:600 12px ui-sans-serif,system-ui}
    .sidebar-tab[aria-selected="true"]{border-bottom-color:var(--blue);color:var(--ink)}
    .sidebar-panel{min-width:0}
    .sidebar-panel[hidden]{display:none!important}
    .file-tab-item{position:relative;display:flex;flex:0 0 auto;align-items:center;height:38px;border-right:1px solid #343d47;background:#252d36}
    .file-tab-item[data-active="true"]{background:#1e1e1e;color:#f4f5f6}
    .file-tab-item[data-active="true"]::after{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--accent);content:""}
    .file-tab-item[data-generated="true"]{background:#17382d;border-color:#285b43}
    .file-tab-item[data-generated="true"] .file-tab,.file-tab-item[data-generated="true"] .delete-file{color:#a7e2bd}
    .file-tab-item[data-generated="true"][data-active="true"]{background:#20513b}
    .file-tab-item[data-generated="true"][data-active="true"]::after{background:#67d394}
    .file-tab-item[data-generated="true"] .delete-file:hover{background:#315b43;color:#fff}
    .file-tab-item.dragging{opacity:.4}
    .file-tab-item.drop-target{box-shadow:inset 2px 0 var(--accent)}
    .file-tab-item .file-tab{flex:1;min-width:0;height:38px;border:0;background:transparent}
    .file-tab-item .file-tab[aria-selected="true"]{background:transparent;color:#f4f5f6}
    .file-tab-item .file-tab[aria-selected="true"]::after{content:none}
    .file-tab-item .delete-file{width:27px;height:38px;padding:0;border:0;background:transparent;color:#aeb7c1;font-size:15px}
    .file-tab-item .delete-file:hover{background:#493332;color:#fff}
    .file-tabs-empty{flex:0 0 auto;padding:0 12px;color:#8f9aa5;font:12px ui-sans-serif,system-ui}
    #editor{position:relative}
    .editor-empty-state{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#1e1e1e;color:#aeb9c5;text-align:center;font:14px ui-sans-serif,system-ui;pointer-events:none}
    .editor-empty-state[hidden]{display:none}
    .file-tab-item[data-has-fixture="true"] .file-tab::before{width:6px;height:6px;margin-right:7px;border-radius:50%;background:#d7a546;content:""}
    #add-file{position:sticky;right:0;z-index:2}
    .import-files-button{margin-left:auto;padding:0 10px;border:1px solid #697682;background:transparent;color:#394653;font:600 12px ui-sans-serif,system-ui}
    .import-files-button:hover{background:#e5eaee}
    .testcase-tools,.testcase-heading,.testcase-title-row,.testcase-file-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .testcase-heading{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 10px}
    .testcase-heading h3,.required-output h3{margin:0;font:700 12px ui-sans-serif,system-ui}
    .testcase-count{color:#707784;font-size:10px;font-weight:500}
    .testcase-tools{grid-column:1 / -1;justify-content:flex-start;gap:6px}
    .testcase-tools button{min-height:30px;padding:0 9px;border:1px solid #697682;border-radius:2px;background:#fff;color:#394653;font:600 11px ui-sans-serif,system-ui;white-space:nowrap}
    .testcase-tools .generate-testcases{border-color:#314b68;background:#314b68;color:#fff}
    .testcase-tools .generate-testcases:hover:not(:disabled){background:#263d56}
    .testcase-tools button:disabled{opacity:.6;cursor:wait}
    .testcase-action-menu{position:relative}
    .testcase-action-menu summary{display:flex;min-height:30px;align-items:center;padding:0 9px;border:1px solid #697682;background:#fff;color:#394653;font:600 11px ui-sans-serif,system-ui;cursor:pointer;list-style:none}
    .testcase-action-menu summary::-webkit-details-marker{display:none}
    .testcase-action-menu summary::after{margin-left:8px;content:"▾"}
    .testcase-action-list{position:absolute;top:calc(100% + 4px);right:0;z-index:10;display:grid;min-width:205px;padding:4px;border:1px solid #c8ced4;background:#fff;box-shadow:0 5px 14px #20283220}
    .testcase-action-menu:not([open]) .testcase-action-list{display:none}
    .testcase-action-list .testcase-menu-action{width:100%;min-height:32px;padding:0 9px;border:0;background:#fff;color:#394653;text-align:left;font:12px ui-sans-serif,system-ui}
    .testcase-action-list .testcase-menu-action:hover:not(:disabled){background:#eef1f3}
    .testcase-action-list .testcase-menu-action.danger{color:#943c35}
    .testcase-action-list .testcase-menu-action:disabled{opacity:.45;cursor:not-allowed}
    .testcase-generator-status{margin:0;color:#59636d;font-size:11px;line-height:1.4}
    .testcase-list{display:grid;gap:2px;max-height:150px;margin-bottom:12px;overflow:auto;border:1px solid #c8ced4;background:#fff}
    .testcase-list-item{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;min-height:31px;padding:0 8px;border:0;border-bottom:1px solid #e2e5e8;background:#fff;color:var(--ink);text-align:left;font:12px ui-sans-serif,system-ui}
    .testcase-list-item[aria-selected="true"]{background:#e8edf0;color:#233c52;font-weight:700}
    .testcase-list-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .testcase-list-type{flex:none;color:#707784;font-size:10px}
    .testcase-origin{flex:none;padding:2px 5px;border:1px solid #cbd1d6;color:#56616c;font-size:9px;font-weight:700;text-transform:uppercase}
    .testcase-origin.ai{border-color:#9eb5c8;background:#e9f0f5;color:#315572}
    .testcase-selected-title{display:flex;min-width:0;align-items:center;gap:8px}
    .testcase-selected-title h3{margin:0;font:700 13px ui-sans-serif,system-ui}
    .testcase-editor{padding:10px;border:1px solid #c8ced4;background:#f7f8f9}
    .testcase-empty{margin:0;padding:16px 8px;color:#707784;font-size:12px}
    .testcase-title-row{margin-bottom:9px}
    .testcase-type,.testcase-file{height:34px;padding:0 8px;border:1px solid #c8ced4;border-radius:2px;background:#fff;font:12px ui-sans-serif,system-ui}
    .testcase-type{width:100%;margin-bottom:8px}
    .testcase-input,.testcase-file-content,.required-output textarea{width:100%;min-height:90px;padding:8px;border:1px solid #c8ced4;border-radius:2px;background:#fff;font:12px/1.5 ui-monospace,SFMono-Regular,monospace;resize:vertical}
    .testcase-file-row{justify-content:flex-start;margin-bottom:8px}
    .testcase-file-row label{flex:0 0 auto;margin:0;font-size:11px}
    .testcase-file{min-width:0;flex:1}
    .delete-testcase{width:28px;height:28px;padding:0;border:0;background:transparent;color:#65717c;font-size:17px}
    .delete-testcase:hover{background:#e7dedd;color:#9b3e35}
    .add-testcase{padding:7px 9px;border:1px solid #697682;background:#fff;color:#394653;font:600 11px ui-sans-serif,system-ui}
    .required-output{margin-top:14px;padding-top:12px;border-top:1px solid #d5dbe0}
    .required-output h3{margin-bottom:8px}
    .required-output textarea{min-height:110px}
    .required-files .testcase-heading{margin-bottom:8px}
    .required-file-check{margin:0 0 8px;padding:8px;border:1px solid #d7dce1;background:#fff}
    .required-file-check .testcase-file-content{min-height:90px}
    .run-testcases{width:100%;margin-top:14px;padding:9px 12px;border:1px solid #aab2b9;background:#e8ebee;color:#5f6972;font:700 12px ui-sans-serif,system-ui}
    @media(max-width:760px){.brief-panel{display:block}.sidebar-tabs{margin-bottom:12px}.import-files-button{margin-left:0}}

.testcase-file-fixture{margin:0 0 8px;padding:8px;border:1px solid #d7dce1;background:#fff}
    .testcase-file-row{margin:0}
    .testcase-file-row .testcase-file{min-width:0}
    .run-testcases{border-color:#314b68;background:#314b68;color:#fff;cursor:pointer}
    .run-testcases:hover:not(:disabled){background:#263d56}
    .run-testcases:disabled{opacity:.6;cursor:wait}
    .testcase-result{margin-top:8px;padding:9px;border:1px solid #c8ced4;background:#fff}
    .testcase-results{max-height:38vh!important;flex:0 0 auto!important;overflow:auto!important;white-space:normal}
    .testcase-results-summary{display:block;margin-bottom:8px}
    .testcase-result-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .testcase-result-tag{padding:2px 6px;font-size:10px;font-weight:700;text-transform:uppercase}
    .testcase-result-tag.passed{background:#e6f1e9;color:#27613c}
    .testcase-result-tag.failed{background:#f8e8e6;color:#9b352d}
    .testcase-result-tag.review{background:#fff3d9;color:#7a5b19}
    .testcase-results.review{border-color:#d5b76b;background:#fffcf4}
    .testcase-checks{display:grid;gap:4px;margin-top:8px}
    .testcase-check{display:flex;justify-content:space-between;gap:10px;padding-top:4px;border-top:1px solid #e2e5e8;color:#59636d;font-size:10px}
    .testcase-check-status{font-weight:700;text-align:right}
    .testcase-check-status.passed{color:#27613c}
    .testcase-check-status.failed{color:#9b352d}
    .testcase-check-status.review{color:#7a5b19}
.testcase-result-files,.testcase-result-error{margin-top:6px;color:#59636d;font-size:11px;overflow-wrap:anywhere}
.testcase-result-checking{margin-top:6px;color:#59636d;font:11px/1.4 ui-sans-serif,system-ui}
    .testcase-result-files.generated{color:#267046}
    .testcase-result-error{color:#9b352d}
    .testcase-result-output{max-height:100px;margin:7px 0 0;padding:7px;overflow:auto;background:#f3f5f6;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.4 ui-monospace,SFMono-Regular,monospace}

body.testcase-results-open{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
    body.testcase-results-open main{flex:0 0 auto;height:auto;min-height:calc(100dvh - 60px)}
    body.testcase-results-open #workspace{height:auto;min-height:0}
    body.testcase-results-open #code-workspace{height:auto;min-height:calc(100dvh - 100px)}
    body.testcase-results-open #code-workspace>.editor-card{height:auto;min-height:calc(100dvh - 100px)}
    body.testcase-results-open .monaco-editor{height:60vh!important;min-height:420px;flex:0 0 auto}
    body.testcase-results-open .brief-panel{overflow:visible}
    body.testcase-results-open .output-box.testcase-results{height:auto;min-height:0;max-height:none!important;flex:0 0 auto!important;overflow:visible!important;white-space:normal}
    .testcase-result-output{max-height:220px;overflow:auto}
    @media(max-width:760px){body.testcase-results-open #code-workspace>.editor-card{height:auto;min-height:0}body.testcase-results-open .monaco-editor{height:55vh!important;min-height:360px}}

.error-guide-link{display:inline-block;margin-top:10px;color:#314b68;font:700 12px ui-sans-serif,system-ui;text-decoration:underline;text-underline-offset:2px}
.error-guide-link:hover{color:#1f354e}
.testcase-tools{flex-wrap:wrap}
.testcase-count-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 3px;color:#394653;font:600 11px ui-sans-serif,system-ui}
.testcase-count-input{width:58px;height:28px;padding:0 6px;border:1px solid #c8ced4;border-radius:2px;background:#fff;color:#233c52;font:600 12px ui-sans-serif,system-ui}
.testcase-count-help{display:block;margin:0 0 8px;color:#707784;font-size:10px}
.testcase-target-summary{margin:0 0 7px;padding:7px 8px;border-left:3px solid #6a5bb5;background:#f4f1ff;color:#4d3f91;font-size:11px;line-height:1.45}
.testcase-harness-preview{margin:0 0 9px;border:1px solid #b9c6d2;background:#f5f8fa}
.testcase-harness-preview summary{padding:7px 8px;color:#315572;font:700 11px ui-sans-serif,system-ui;cursor:pointer}
.testcase-harness-code{max-height:240px;margin:0;padding:8px;overflow:auto;border-top:1px solid #d7dfe5;background:#fff;color:#27343e;white-space:pre-wrap;font:11px/1.4 ui-monospace,SFMono-Regular,monospace}
.testcase-return{width:100%;height:34px;padding:8px;border:1px solid #c8ced4;border-radius:2px;background:#fff;font:12px ui-monospace,SFMono-Regular,monospace}
.testcase-result-tag.runtime-error,.testcase-result-tag.timed-out,.testcase-result-tag.harness-error{background:#f8e8e6;color:#9b352d}
.testcase-result-tag.outdated,.testcase-result-tag.not-run{background:#edf0f2;color:#68737d}
.testcase-result.outdated,.testcase-result.not-run{border-color:#cbd1d6;background:#fafbfb}
.target-notice-title{display:block;margin-bottom:4px;color:#315572;font:800 13px ui-sans-serif,system-ui}
.target-notice-details{display:block;margin-bottom:10px;color:#59636d;font:12px/1.4 ui-sans-serif,system-ui}
.inline-harness-preview{margin-top:10px;border-top:1px solid #d7dce1;font:12px ui-sans-serif,system-ui}
.inline-harness-preview summary{padding-top:8px;color:#315572;font-weight:700;cursor:pointer}
.inline-harness-preview pre{max-height:180px;margin:7px 0 0;padding:8px;overflow:auto;background:#f3f5f6;white-space:pre-wrap;color:#27343e;font:11px/1.4 ui-monospace,SFMono-Regular,monospace}

.editor-toolbar{flex-wrap:wrap;padding:8px 10px;border:1px solid #d7dce1;border-radius:6px;background:#eef1f3}
.editor-toolbar .import-files-button,.workspace-manager{min-height:35px;margin-left:0;padding:0 12px;border:1px solid #aab4bd;border-radius:5px;background:#fff;color:#394653;font:600 11px ui-sans-serif,system-ui}
.editor-toolbar .import-files-button:hover,.workspace-manager:hover{background:#e5eaee}
.editor-toolbar #run{min-height:35px;border-radius:5px}
.workspace-dialog{width:min(480px,calc(100vw - 32px));max-height:85vh;padding:20px;border:1px solid #c8ced4;border-radius:8px;background:#fff;color:var(--ink);box-shadow:0 16px 48px #18243150}
.workspace-dialog::backdrop{background:#15243277}
.workspace-dialog h2{margin:0 0 14px;font-size:19px}
.workspace-name{width:100%;padding:9px;border:1px solid #c8ced4;border-radius:3px;font:13px ui-sans-serif,system-ui}
.workspace-name-label{display:block;margin-bottom:6px;color:#394653;font:700 11px ui-sans-serif,system-ui}
.workspace-create,.workspace-close{margin:8px 8px 12px 0;padding:8px 12px;font-size:12px}
.workspace-list{display:grid;gap:6px;max-height:45vh;overflow:auto}
.workspace-list[hidden]{display:none}
.workspace-entry-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.workspace-entry,.workspace-delete{padding:8px;border:1px solid #c8ced4;background:#f8f9fa;color:#263440;text-align:left;font:600 12px ui-sans-serif,system-ui}
.workspace-entry[aria-current="true"]{border-color:#314b68;background:#eaf0f5}
.workspace-delete{color:#963b34}
.workspace-files-list{display:grid;gap:6px}
.workspace-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;padding:7px;border:1px solid #d7dce1;background:#fff}
.workspace-file-details{display:grid;min-width:0;gap:2px}
.workspace-file-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.workspace-file-properties{color:#66727d;font-size:10px}
.workspace-file-open,.workspace-file-delete{padding:5px 7px;border:1px solid #c8ced4;background:#fff;color:#394653;font-size:10px}
.workspace-file-delete{color:#963b34}
.workspace-file-rename{min-width:0;width:100%;padding:4px;border:1px solid #314b68;font-size:11px}
.file-tab-rename{flex:1;min-width:72px;width:120px;height:28px;margin:0 5px;padding:4px 6px;border:1px solid #8fa7b9;border-radius:3px;background:#f7fafc;color:#1e2d39;font:12px ui-monospace,SFMono-Regular,monospace;outline:2px solid #314b6830}
.file-tab-rename[aria-invalid="true"],.workspace-file-rename[aria-invalid="true"]{border-color:#b54740;outline-color:#b5474030}
.file-tab-item[data-has-output-check="true"]{box-shadow:inset 0 -3px #62b8d5}
.sidebar-tab{flex:1;min-width:0;padding:0 8px;font-size:11px}
.testcase-generation-strategy{margin:0 0 10px;padding:8px;border:1px solid #d4dce3;background:#f1f4f6;font-size:11px}
.testcase-generation-strategy summary{font-weight:700;cursor:pointer}
.testcase-generation-strategy pre{max-height:180px;overflow:auto;padding:8px;background:#202832;color:#e6ebef;white-space:pre-wrap;font:10px/1.4 ui-monospace,monospace}
.constraint-results{display:grid;gap:7px;flex:none;margin:0 10px 10px;padding:9px;border:1px solid #d7dce1;background:#f8f9fa;font:11px/1.4 ui-sans-serif,system-ui}
.constraint-results[hidden]{display:none}
.constraint-results h3{margin:0;font-size:12px}
.constraint-issue{display:grid;gap:2px;border-top:1px solid #e2e5e8;padding-top:5px}

/* Keep the test panel roomy without making its case list take over the page. */
.testcase-panel{min-height:560px}
.testcase-panel .testcase-list{max-height:230px}
.testcase-panel .testcase-editor{max-height:none;overflow:visible}
.testcase-tools .generate-testcases{flex:1 1 100%;min-height:36px;line-height:1.2;white-space:normal}
.sidebar-tab-count{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;margin-left:5px;border-radius:9px;background:#e5eaee;color:#4f5d69;font-size:10px;font-weight:800}
@media(max-width:760px){.testcase-panel{min-height:0}.testcase-panel .testcase-list{max-height:220px}}
.constraint-issue.error{color:#963b34}
.constraint-issue.review{color:#7a5b19}

/* A short, selection-first path for beginners. */
.testcase-panel{padding:14px!important}
.testcase-panel .testcase-heading{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid #e4e9ed}
.testcase-panel .testcase-heading h3{font-size:16px;color:#243748}
.testcase-panel .testcase-count{padding:4px 8px;border-radius:999px;background:#edf2f6;color:#465b6d;font-size:11px;font-weight:700}
.testcase-instructions{margin:0 0 13px;padding:11px 12px;border:1px solid #d6e0e9;border-radius:8px;background:#f3f7fa;color:#365066;font:12px/1.5 ui-sans-serif,system-ui}
.testcase-panel .testcase-count-field{margin:0 0 4px;font-size:12px}
.testcase-panel .testcase-count-input{width:68px;height:34px;border-radius:6px;text-align:center;font-size:13px}
.testcase-panel .testcase-count-help{margin-bottom:13px;font-size:11px}
.testcase-generation-field{display:grid;gap:5px;margin:0 0 11px;color:#394653;font:600 12px ui-sans-serif,system-ui}
.testcase-generation-select,.testcase-generation-textarea{box-sizing:border-box;width:100%;min-width:0;padding:8px;border:1px solid #c8ced4;border-radius:6px;background:#fff;color:#233c52;font:12px/1.4 ui-sans-serif,system-ui}
.testcase-generation-select{height:36px}
.testcase-generation-textarea{min-height:62px;resize:vertical}
.testcase-method-context[hidden]{display:none}
.testcase-panel .testcase-target-summary{margin-bottom:10px;padding:8px 10px;border-left:3px solid #587e9d;border-radius:4px;background:#f0f5f8;color:#31546d;font-size:11px}
.testcase-panel .testcase-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.testcase-panel .testcase-tools{margin:0 0 10px}
.testcase-panel .testcase-tools button{min-height:36px;padding:0 10px;border-radius:6px;font-size:11px}
.testcase-panel .testcase-tools .clear-testcases{border-color:#d8dde1;background:#fff;color:#66727d}
.testcase-panel .testcase-tools .clear-testcases:hover:not(:disabled){background:#f2f4f5}
.testcase-panel .testcase-list,.testcase-panel .testcase-editor{border-radius:6px;overflow:hidden}
.testcase-panel .run-testcases{min-height:38px;border-radius:6px}
.testcase-advanced{margin-top:12px;border-top:1px solid #d9e0e5;padding-top:10px}
.testcase-advanced summary{color:#506879;font:700 11px ui-sans-serif,system-ui;cursor:pointer}
.testcase-advanced[open] summary{margin-bottom:12px}

/* The start page is the empty-workspace state; the editor layout begins only after a workspace exists. */
body:not(.workspace-open){height:auto;min-height:100dvh;overflow:auto}
body:not(.workspace-open) main{width:auto;max-width:920px;margin:0 auto;padding:72px 24px}
body:not(.workspace-open) #intro{display:block!important}
body:not(.workspace-open) #workspace{display:none!important}
body:not(.workspace-open) footer{display:block!important}
body:not(.workspace-open) .topbar{height:76px;flex-basis:76px;padding:0 7vw;background:#fcfbf8;border-bottom:1px solid var(--line)}
body.workspace-open{overflow:auto}
body.workspace-open #intro,body.workspace-open footer{display:none!important}
body.workspace-open #workspace{display:block!important}
body.workspace-open .brief-panel{overflow:visible}
body.workspace-open .brief-field textarea{max-height:none;overflow-y:hidden}

.start-workspaces{margin:30px 0 18px;padding-top:22px;border-top:1px solid var(--line)}
.start-workspaces-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:12px}
.start-workspaces-heading .eyebrow{margin:0 0 6px}
.start-workspaces-heading h2{margin:0;font:500 25px Georgia,serif}
.start-workspaces-help{color:var(--muted);font-size:12px}
#start-workspaces-list{display:grid;gap:8px}
.start-workspaces-empty{margin:0;padding:14px;border:1px dashed var(--line);color:var(--muted);font-size:13px}
.start-workspace-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--line);background:#fffdf9}
.start-workspace-details{display:grid;gap:4px;min-width:0}
.start-workspace-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.start-workspace-details span{color:var(--muted);font-size:11px}
.start-workspace-actions{display:flex;gap:7px;flex:none}
.start-workspace-actions button{padding:8px 12px;font-size:11px}
.start-workspace-open{background:var(--blue)}
.start-workspace-open:hover{background:#243b55}
.start-workspace-delete{background:#fff;color:#963b34;border:1px solid #c8ced4}
.start-workspace-delete:hover{background:#f8e8e6}
@media(max-width:620px){.start-workspaces-heading{align-items:start;flex-direction:column;gap:5px}.start-workspace-card{align-items:stretch;flex-direction:column}.start-workspace-actions button{flex:1}}

/* Keep the compact editor controls readable without horizontal scrolling. */
@media(max-width:480px){
  .editor-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:10px 10px 12px;overflow:visible}
  .editor-toolbar label{align-self:center}
  .editor-toolbar select{min-width:0;width:100%}
  .editor-toolbar .import-files-button,.editor-toolbar .workspace-manager{width:100%;margin-left:0}
  .editor-toolbar #run{grid-column:1 / -1;width:100%;margin:0;padding:9px 12px}
  .start-workspace-actions{width:100%}
  .start-workspace-actions button{width:auto}
}

/* Test cases stay usable while the editor and run controls remain visible. */
#code-workspace{
  --brief-panel-width:310px;
  grid-template-columns:minmax(480px,1fr) var(--brief-panel-width);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-gutter:stable;
}
#code-workspace>.editor-card{min-width:480px}
body.workspace-open .brief-panel.resizable-brief-panel{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:0;
  height:100%;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--paper);
  box-shadow:-8px 0 12px -14px #182431;
}
body.workspace-open .brief-panel.resizable-brief-panel > .sidebar-panel:not([hidden]){
  flex:0 0 auto;
  min-height:0;
}
.brief-panel-resize-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:-8px;
  z-index:4;
  width:16px;
  min-width:16px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  cursor:col-resize;
  touch-action:none;
}
.brief-panel-resize-handle::after{
  position:absolute;
  top:50%;
  left:6px;
  width:3px;
  height:42px;
  border-radius:3px;
  background:#b9c2ca;
  content:"";
  transform:translateY(-50%);
  transition:height .15s ease,background .15s ease;
}
.brief-panel-resize-handle:hover::after,
.brief-panel-resize-handle:focus-visible::after{
  height:68px;
  background:var(--blue);
}
.brief-panel-resize-handle:focus-visible{outline:2px solid #314b6855;outline-offset:-1px}
body.resizing-brief-panel,
body.resizing-brief-panel *{cursor:col-resize!important;user-select:none!important}
.testcase-panel{display:flex;min-height:0;flex-direction:column;overflow:visible}
.testcase-panel .testcase-list{flex:0 0 auto;max-height:clamp(220px,40vh,360px);min-height:120px;overflow:auto;overscroll-behavior:contain}
.testcase-panel .testcase-editor:not([hidden]){flex:0 0 auto;min-height:260px;max-height:min(60vh,520px);overflow:auto;overscroll-behavior:contain}
.testcase-panel .run-testcases{flex:none}
.testcase-tools{flex-wrap:wrap}
.testcase-panel .testcase-tools{grid-template-columns:minmax(0,1fr) auto}
.testcase-panel .testcase-tools .generate-testcases{grid-column:1 / -1}
.testcase-panel .testcase-tools .clear-testcases{min-width:0;padding-left:10px;padding-right:10px}
.testcase-tools .add-custom-test{border-color:#587e9d;background:#eaf1f5;color:#315572}
.testcase-tools .add-custom-test:hover:not(:disabled){background:#dce8ef}
.testcase-origin.custom{border-color:#d1ae73;background:#fff4df;color:#7a5b19}
.testcase-editor[hidden]{display:none!important}
.testcase-ai-explanation{display:grid;gap:6px;margin-top:12px;padding:10px 11px;border-left:3px solid #587e9d;border-radius:4px;background:#f0f5f8;color:#365066;font:11px/1.45 ui-sans-serif,system-ui}
.testcase-ai-explanation strong{font-weight:800}
.testcase-ai-outcome{color:#59636d}
.testcase-custom-help{margin:0 0 12px;color:#59636d;font-size:11px;line-height:1.45}
.settings-panel{padding:14px!important}
.settings-panel .testcase-heading{margin-bottom:14px}
.settings-field{display:grid;gap:7px;color:#394653;font:700 12px/1.3 ui-sans-serif,system-ui}
.settings-select{width:100%;min-height:36px;padding:8px 10px;border:1px solid #c8ced4;border-radius:4px;background:#fff;color:var(--ink);font:12px ui-sans-serif,system-ui}
.settings-help{display:block;margin-top:9px;color:#59636d;font:11px/1.45 ui-sans-serif,system-ui}
.testcase-text{width:100%;height:34px;padding:8px;border:1px solid #c8ced4;border-radius:2px;background:#fff;color:var(--ink);font:12px ui-sans-serif,system-ui}
.testcase-custom-actions{display:flex;justify-content:flex-end;margin-top:12px}
.run-one-testcase{padding:8px 12px;background:#314b68;color:#fff;font:700 11px ui-sans-serif,system-ui}
.run-one-testcase:hover{background:#263d56}
@media(max-width:760px){
  #code-workspace{grid-template-columns:minmax(0,1fr);overflow-x:visible}
  #code-workspace>.editor-card{min-width:0}
  .brief-panel-resize-handle{display:none}
  body.workspace-open .brief-panel.resizable-brief-panel{height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto}
  .testcase-panel{overflow:visible}
  .testcase-panel .testcase-list{max-height:300px;min-height:140px}
  .testcase-panel .testcase-editor:not([hidden]){max-height:none;overflow:visible}
  .testcase-panel .testcase-tools{display:grid;grid-template-columns:1fr;gap:7px}
  .testcase-panel .testcase-tools .generate-testcases{grid-column:auto}
  .testcase-panel .testcase-tools button{width:100%}
}

/* Keep the editor column and each visible right-side section independently scrollable. */
body.workspace-open #code-workspace{
  overflow-x:auto;
  overflow-y:hidden;
}
body.workspace-open #code-workspace>.editor-card{
  min-height:0;
  padding-right:16px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#b8c1c9 transparent;
}
body.workspace-open #code-workspace>.editor-card::-webkit-scrollbar{width:10px}
body.workspace-open #code-workspace>.editor-card::-webkit-scrollbar-track{background:transparent}
body.workspace-open #code-workspace>.editor-card::-webkit-scrollbar-thumb{border:3px solid var(--paper);border-radius:10px;background:#b8c1c9}
body.workspace-open #code-workspace>.editor-card::-webkit-scrollbar-thumb:hover{background:#8998a5}
body.workspace-open .brief-panel.resizable-brief-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.workspace-open .brief-panel.resizable-brief-panel>.sidebar-tabs{
  flex:0 0 auto;
}
body.workspace-open .brief-panel.resizable-brief-panel>.sidebar-panel:not([hidden]){
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* The grip sits below Monaco. Dragging it changes only the code window height. */
.editor-vertical-resize-handle{
  flex:0 0 14px;
  width:100%;
  min-height:14px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  cursor:ns-resize;
  touch-action:none;
}
.editor-vertical-resize-handle::after{
  display:block;
  width:52px;
  height:3px;
  margin:5px auto 0;
  border-radius:3px;
  background:#b9c2ca;
  content:"";
  transition:width .15s ease,background .15s ease;
}
.editor-vertical-resize-handle:hover::after,
.editor-vertical-resize-handle:focus-visible::after{
  width:86px;
  background:var(--blue);
}
.editor-vertical-resize-handle:focus-visible{outline:2px solid #314b6855;outline-offset:-1px}
body.resizing-code-window,
body.resizing-code-window *{cursor:ns-resize!important;user-select:none!important}
#code-workspace>.editor-card.editor-height-resized .monaco-editor{
  flex:0 0 var(--code-editor-height);
  height:var(--code-editor-height)!important;
  min-height:0;
}
@media(max-width:760px){
  body.workspace-open #code-workspace>.editor-card{overflow-y:auto}
  body.workspace-open .brief-panel.resizable-brief-panel{overflow:hidden}
}

/* Keep the language control visually connected to its toolbar. */
.editor-toolbar select{
  appearance:none;
  -webkit-appearance:none;
  min-height:36px;
  margin:0;
  padding:0 30px 0 10px;
  border-radius:0!important;
  background-color:#2b3540;
  background-image:
    linear-gradient(45deg,transparent 50%,#c4ccd3 50%),
    linear-gradient(135deg,#c4ccd3 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;
  background-repeat:no-repeat;
  background-size:5px 5px,5px 5px;
}
.editor-toolbar select:focus{outline:2px solid #314b6840;outline-offset:0}

/* Keep the question-mark explanation above the editor edge on the first line. */
.monaco-hover{
  z-index:1000;
  max-width:min(380px,calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
}

/* Output grows with its content; the editor column remains the scroll area. */
body.workspace-open #code-workspace>.editor-card .output-box{
  flex:0 0 auto;
  min-height:96px;
  max-height:none!important;
  height:auto;
  overflow:visible!important;
}

/* Keep the workspace on one predictable vertical scroll path.  The old
   viewport-sized editor and sidebar each captured the wheel, which made it
   difficult to reach controls below them.  The document now grows with the
   visible content; Monaco and the test-case list still scroll internally
   when their own content is longer than their boxes. */
body.workspace-open{
  height:auto;
  min-height:100dvh;
  overflow-x:auto;
  overflow-y:auto;
}
body.workspace-open main{
  flex:0 0 auto;
  height:auto;
  min-height:0;
}
body.workspace-open #workspace{
  height:auto;
  min-height:0;
}
body.workspace-open #code-workspace{
  height:auto;
  min-height:calc(100dvh - 100px);
  align-items:start;
  overflow:visible;
  overscroll-behavior:auto;
}
body.workspace-open #code-workspace>.editor-card{
  height:auto;
  min-height:calc(100dvh - 100px);
  align-self:start;
  overflow:visible;
  overscroll-behavior:auto;
}
body.workspace-open .brief-panel.resizable-brief-panel{
  height:auto;
  max-height:none;
  align-self:start;
  overflow:visible;
  overscroll-behavior:auto;
}
body.workspace-open .brief-panel.resizable-brief-panel>.sidebar-panel:not([hidden]){
  flex:0 0 auto;
  max-height:none;
  overflow:visible;
  overscroll-behavior:auto;
}

@media(max-width:760px){
  body.workspace-open main{padding-bottom:40px}
  body.workspace-open #code-workspace{
    min-height:0;
    grid-template-rows:auto auto;
  }
  body.workspace-open #code-workspace>.editor-card{
    min-height:calc(100dvh - 100px);
  }
  body.workspace-open .brief-panel.resizable-brief-panel{
    height:auto;
    max-height:none;
    overflow:visible;
  }
  body.workspace-open .brief-panel.resizable-brief-panel>.sidebar-panel:not([hidden]){
    overflow:visible;
  }
}