.sc-icon { width:16px; height:16px; display:inline-block; flex:none; vertical-align:middle; pointer-events:none; }
[data-ui-action] { display:inline-flex; align-items:center; gap:6px; }
.sc-action-label { white-space:nowrap; }
[data-page-navigation] { display:flex; align-items:center; gap:3px; flex:none; }
.sc-page-link { position:relative; box-sizing:border-box; height:32px; padding:0 10px; border-radius:4px; justify-content:center; color:#bcbcbc; text-decoration:none; font-size:13px; }
.workbench-activity-btn .sc-icon, .practice-activity-btn .sc-icon { width:22px; height:22px; }
.sc-page-link:hover { color:#fff; background:#292929; }
.sc-page-link[aria-current="page"] { color:#fff; background:#163b55; }
.sc-page-link[aria-current="page"]::after { content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; background:#4fc1ff; }
body .workbench-activity-btn, body .practice-activity-btn { justify-content:center; }
#workbench-activity-bar, #practice-activity-bar, .activitybar { overflow-y:auto; overflow-x:hidden; }
.sc-page-link:focus-visible, [data-ui-action]:focus-visible { outline:2px solid #75c8ff; outline-offset:-3px; }
.workbench-brand { text-decoration:none; color:inherit; }
.launch-icon .sc-icon { width:20px; height:20px; }
.sidebar-link > [data-ui-action], .sidebar-link .sc-action-label { margin-left:0; }
body.practice-mode #btn-add-file::before,
body.practice-mode #btn-rename-file::before,
body.practice-mode #btn-delete-file::before { content:none; }
body.practice-mode #file-bar-actions [data-ui-action] .sc-action-label { display:none; }
body.practice-mode #editor-header, body.tutorial-mode #editor-header { container-type:inline-size; gap:8px; }
body.practice-mode #editor-header > label, body.tutorial-mode #editor-header > label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.practice-mode #editor-toolbar, body.tutorial-mode #editor-toolbar { flex-shrink:0; white-space:nowrap; }
body.practice-mode #btn-tutorial, body.tutorial-mode #btn-tutorial { background:#0e639c; border-color:#1177bb; color:#fff; }
body.practice-mode #btn-tutorial:hover, body.tutorial-mode #btn-tutorial:hover { background:#1177bb; }
@container (max-width:780px) {
    #btn-search-replace .sc-action-label, #btn-fullscreen .sc-action-label,
    #btn-usage-guide .sc-action-label, #editor-toolbar #btn-func-lib .sc-action-label { display:none; }
}
@container (max-width:470px) {
    #editor-toolbar .sc-action-label { display:none; }
    #editor-header > label { font-size:0; }
}

/* Shared top-level navigation; activity bars only switch local tools. */
body #header-bar, body .titlebar { gap:12px; }
body.tutorial-mode .workbench-brand, body.practice-mode .workbench-brand, body .brand { width:auto; flex:none; }
body.tutorial-mode .workbench-command-center, body.practice-mode .workbench-command-center,
body .command-center { position:static; left:auto; top:auto; transform:none; flex:1; min-width:0; max-width:600px; overflow:hidden; white-space:nowrap; }
.workbench-command-center strong, .command-center strong { overflow:hidden; text-overflow:ellipsis; }
body #header-bar .mode-switch { margin-left:auto; flex:none; }
body #header-bar #build-status { flex:none; }
body #editor-toolbar #btn-tutorial { display:none; }

/* Comfortable type sizes without changing the user's saved panel sizes. */
:root { --sc-code-size:14px; }
body.practice-mode #ide-editor-container .CodeMirror, body.tutorial-mode #ide-editor-container .CodeMirror { font-size:var(--sc-code-size); line-height:1.6; }
body.tutorial-mode #tutorial-step-content { font-size:15px; line-height:1.8; }
body.tutorial-mode #tutorial-step-content p, body.tutorial-mode #tutorial-step-content li { font-size:15px; color:#c9c9c9; line-height:1.8; overflow-wrap:anywhere; }
body.tutorial-mode #tutorial-step-content h4 { font-size:14px; line-height:1.6; }
body.tutorial-mode #tutorial-step-detail > h3 { font-size:17px; line-height:1.55; }
body.tutorial-mode #tutorial-step-detail { padding:16px 18px 24px; }
body.tutorial-mode details.tutorial-section-disclosure > summary { min-height:44px; font-size:14px; line-height:1.6; padding:8px 0; }
body.tutorial-mode .tutorial-disclosure-body { padding:0 0 18px; }
body.tutorial-mode .tutorial-disclosure-body pre { max-width:100%; overflow:auto; font-size:13px; line-height:1.65; }
body.tutorial-mode #tutorial-step-actions { gap:6px; flex-wrap:wrap; }
body.tutorial-mode #tutorial-step-actions .tutorial-action-btn { font-size:12px; min-height:32px; }
body.tutorial-mode #tutorial-step-list .tutorial-step-nav-item,
body.tutorial-mode #tutorial-step-list .step-title,
body.practice-mode .practice-tree-item { font-size:13px; line-height:1.6; }
body.tutorial-mode .tutorial-progress-summary strong, body.tutorial-mode #tutorial-progress-title,
body.tutorial-mode #tutorial-progress-complete { font-size:12px; }
body.tutorial-mode #tutorial-left-tabs button, body.practice-mode #practice-resource-tabs button,
body.tutorial-mode #workbench-panel-tabs button, body.practice-mode #practice-panel-tabs button,
body.tutorial-mode #editor-toolbar .toolbar-btn, body.practice-mode #editor-toolbar .toolbar-btn { font-size:12px; }
body.tutorial-mode #workbench-panel-tabs, body.practice-mode #practice-panel-tabs { gap:12px; overflow-x:auto; }
body.tutorial-mode #workbench-panel-tabs button, body.practice-mode #practice-panel-tabs button { flex:none; white-space:nowrap; }
body.tutorial-mode #ctrl-status, body.practice-mode #ctrl-status { font-size:12px; }
body.tutorial-mode #tutorial-observation-column #control-bar > .ctrl-btn,
body.practice-mode #control-bar > .ctrl-btn { font-size:12px; padding-left:7px; padding-right:7px; }
.sidebar-link > [data-ui-action], .sidebar-link .sc-action-label { color:#c9c9c9; font-size:13px; }

.sc-font-controls { display:flex; flex:none; gap:1px; border:1px solid #454545; border-radius:4px; }
.sc-font-controls button { height:28px; min-width:26px; padding:0 4px; background:transparent; border:0; color:#c9c9c9; font:12px 'Segoe UI',sans-serif; cursor:pointer; }
.sc-font-controls button:hover { background:#37373d; }
.sc-font-controls button:disabled { opacity:.4; cursor:default; }
.sc-font-controls button:focus-visible, #btn-tutorial-reading:focus-visible,
.tutorial-section-disclosure > summary:focus-visible { outline:2px solid #75c8ff; outline-offset:-2px; }

/* Reading is temporary: it never writes or replaces resize preferences. */
body.tutorial-mode #tutorial-task-panel::before { display:none; }
.tutorial-reading-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:0 0 44px; padding:0 38px 0 16px; border-bottom:1px solid #333; font-size:13px; }
#btn-tutorial-reading { min-height:30px; padding:3px 8px; border:1px solid #454545; border-radius:4px; background:#292929; color:#e0e0e0; font-size:12px; cursor:pointer; white-space:nowrap; }
body.tutorial-mode.tutorial-task-collapsed .tutorial-reading-toolbar { display:none; }
body.tutorial-mode.tutorial-reading #tutorial-task-panel { position:absolute; grid-column:1 / -1; grid-row:1 / -1; z-index:10001; top:0; right:0; bottom:0; width:min(760px,calc(100% - 48px)); min-width:0; max-width:none; height:auto; border-left:1px solid #454545; box-shadow:-14px 0 32px #0006; transition:none; }
body.tutorial-mode.tutorial-reading #tutorial-task-backdrop { display:block; }
body.tutorial-mode.tutorial-reading .workbench-resizer { display:none !important; }
body.tutorial-mode.tutorial-reading #tutorial-step-detail { max-width:720px; margin:auto; padding:24px 30px; }
body.tutorial-mode.tutorial-reading #tutorial-step-actions { justify-content:center; }
body.workbench-editor-fullscreen #tutorial-task-panel, body.workbench-editor-fullscreen #tutorial-task-backdrop { visibility:hidden; }
@media (max-width:1200px) {
    body.tutorial-mode .workbench-command-center, body.practice-mode .workbench-command-center, body .command-center { display:none; }
    body #header-bar #build-status, body .title-status { display:none; }
}
@media (max-width:900px) {
    body #header-bar h1, body .brand > span:last-child { display:none; }
    .sc-page-link { padding:0 8px; font-size:12px; }
    body.tutorial-mode #workbench-panel-tabs .workbench-panel-connection,
    body.practice-mode #practice-panel-tabs .practice-panel-connection { display:none; }
}