/* A quiet, macOS-inspired practice workspace. */
:root{--bg:#f0f1f5;--panel:#fff;--panel-2:#f8f9fc;--line:#e3e5ed;--line-2:#f0f1f6;--fg:#252936;--fg-2:#606779;--muted:#727b8d;--accent:#6159d9;--accent-2:#4b44bc;--accent-bg:#eeedfc;--ok:#248052;--ok-bg:#edf8f1;--warn:#a86b15;--warn-bg:#fff8e9;--err:#bd4949;--err-bg:#fff0ef;--code-bg:#fff;--shadow:0 2px 8px #25293604,0 8px 28px #25293603;--r:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
code,kbd,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
button,input,summary{font:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--fg-2);padding:5px 12px;white-space:nowrap;transition:background .15s,color .15s}
button:hover{background:var(--line-2);color:var(--fg)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 2px 5px #6159d91c}
button.primary:hover{background:var(--accent-2)}
button.ghost{background:transparent;border-color:transparent}
button.sm{padding:3px 9px;font-size:11px}
button.icon-button{width:30px;height:30px;padding:0;font-size:20px;flex-shrink:0}
.icon-button svg{width:19px;height:19px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.code-area textarea:focus-visible{outline:0}
.spacer{flex:1}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.top{display:flex;align-items:center;gap:16px;height:70px;flex-shrink:0;padding:0 22px;background:#f8f9fcbf;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.app-mark{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:11px;background:linear-gradient(145deg,#837aea,#5950ca);color:#fff;font-size:24px;font-weight:600;box-shadow:0 3px 9px #6159d925}
.brand h1{margin:0;font-size:14px;font-weight:650;letter-spacing:.02em}
.brand-sub{font-size:10px;color:var(--muted)}
.online-state,.offline-label{font-size:11px;color:var(--muted)}
.online-state.warn{color:var(--warn);max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip{font-size:11px;background:#e9eaf0;border-radius:20px;padding:3px 10px}
.menu{position:relative;flex-shrink:0}
.menu summary{list-style:none;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;letter-spacing:2px;color:var(--fg-2);border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:var(--line-2)}
.menu-pop{position:absolute;right:0;top:36px;min-width:180px;padding:6px;background:#fffffff5;backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #23284220;z-index:40}
.menu-pop button{display:flex;width:100%;border:0;background:none;justify-content:flex-start;padding:7px 10px;text-align:left}
.menu-pop button:hover{background:var(--accent-bg);color:var(--accent-2)}
.menu-caption{display:block;padding:5px 10px;font-size:10px;color:var(--muted)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.storage-note{display:none;background:var(--warn-bg);color:var(--warn);padding:8px 20px;font-size:12px;flex-shrink:0}
.main{display:flex;flex:1;min-height:0;position:relative}
.side{width:236px;flex-shrink:0;display:flex;flex-direction:column;background:#f7f8fbbf;border-right:1px solid var(--line);min-height:0}
.side-head{padding:24px 20px 16px}
.side-heading{display:flex;justify-content:space-between;align-items:center;font-weight:650;font-size:12px}
#progress-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}
.progress-track{height:4px;border-radius:4px;background:#e2e4ed;margin:12px 0 8px;overflow:hidden}
#progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .2s}
.side-head .d{font-size:10px;color:var(--muted)}
.side-tools{padding:0 14px 15px}
.search-box{display:flex;align-items:center;gap:6px;background:#e9ebf2;border:1px solid transparent;border-radius:8px;padding:4px 8px;margin-bottom:12px}
.search-box:focus-within{border-color:var(--accent)}
.search-box>span{font-size:20px;line-height:1;color:var(--muted)}
.search-box input{width:100%;min-width:0;background:none;border:0;padding:3px 0;font-size:11px;outline:0;color:var(--fg)}
.search-box input::placeholder{color:var(--muted)}
.segmented{display:inline-flex;align-items:center;gap:2px;background:#eceef4;padding:3px;border-radius:8px;flex-shrink:0}
.segmented button{border:0;background:none;font-size:11px;border-radius:6px;padding:3px 11px;line-height:1.5;color:var(--fg-2);box-shadow:none}
.segmented button[aria-selected=true]{background:white;color:var(--fg);box-shadow:0 1px 4px #25293612;font-weight:600}
.library-tabs{display:flex}
.library-tabs button{flex:1;padding:4px}
#side-list{flex:1;min-height:0;overflow:auto;padding:0 10px 16px;scrollbar-gutter:stable}
.chapter{margin-bottom:5px}
.chapter-heading{display:flex;width:100%;justify-content:flex-start;border:0;background:none;padding:9px 8px;font-size:11px;font-weight:600;color:var(--fg-2);white-space:normal;text-align:left}
.chapter-heading .chevron{width:12px;font-size:14px;color:var(--muted)}
.chapter-heading .chapter-count{margin-left:auto;font-size:10px;color:var(--muted);font-weight:400;flex-shrink:0}
.plist{margin:0;padding:0;list-style:none}
.plist li{margin:2px 0}
.problem-item{width:100%;border:0;background:none;padding:8px 10px;gap:8px;justify-content:flex-start;text-align:left;font-size:12px;line-height:1.5;white-space:normal;min-height:38px}
.problem-item.active{background:var(--accent-bg);color:var(--accent-2);font-weight:600}
.problem-item .id{font-size:9px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.problem-item .tt{flex:1}
.problem-item .st{color:var(--muted);font-size:12px;flex-shrink:0}
.problem-item .st.pass{color:var(--ok)}
.chapter-plan{padding:0 12px 13px 29px;color:var(--muted);font-size:11px}
.side-foot{padding:14px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.workspace{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:22px 24px 24px;gap:20px}
.workspace-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-shrink:0}
.eyebrow{color:var(--muted);font-size:10px;margin-bottom:4px}
.problem-heading{min-width:0}
.problem-heading h2{margin:0 0 7px;font-size:21px;line-height:1.35;font-weight:650;letter-spacing:-.02em}
.meta-row{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:10px;padding:1px 7px;border-radius:5px;color:var(--muted);background:#e6e8ef}
.pill.easy{color:var(--ok);background:#e1f0e7}
.pill.medium{color:var(--warn);background:#f8eedc}
.pill.hard{color:var(--err);background:#f8e5e4}
.pill.tag{background:transparent;padding-left:2px}
.problem-nav{display:flex;gap:6px;align-items:center;flex-shrink:0}
#problem-position{font-size:11px;color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}
.work-panels{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(380px,1.65fr);gap:16px;flex:1;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;min-height:0}
.problem-panel{display:flex;flex-direction:column;overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:12px;min-height:49px;padding:8px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.panel-label{font-size:11px;font-weight:650;white-space:nowrap}
.problem-panel .panel-bar{justify-content:space-between;gap:6px}
.problem-panel .segmented button{padding:3px 9px}
.pane{padding:20px 22px;flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}
.prose{font-size:13px;color:var(--fg-2);line-height:1.85;overflow-wrap:anywhere}
.prose h3{font-size:14px;color:var(--fg);font-weight:600;margin:0 0 13px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{padding-left:20px;margin:10px 0 20px}
.prose li{margin:6px 0}
.prose strong{color:var(--fg);font-weight:600}
.prose code{font-size:11.5px;background:#f0f1f7;border-radius:4px;padding:2px 4px;color:#5a54a8;overflow-wrap:anywhere}
.prose pre{overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:11.5px;line-height:1.65;white-space:pre}
.prose pre code{padding:0;background:none;color:inherit}
.prose table{border-collapse:collapse;width:100%;font-size:11px;margin:14px 0}
.prose th,.prose td{border:1px solid var(--line);padding:5px;text-align:left}
.prose th{background:var(--panel-2)}
.expect{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.expect h3{color:var(--ok);font-size:12px}
.expect li{margin:4px 0;font-size:12px}
.hint-note{font-size:11px;color:var(--warn);background:var(--warn-bg);padding:8px 11px;border-radius:8px;margin-bottom:18px}
.problem-foot{padding:11px 20px;border-top:1px solid var(--line-2);font-size:10px;color:var(--muted)}
.coding-panel{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.editor-wrap{display:flex;flex-direction:column;flex:1;min-height:180px}
.editor-bar{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.file-icon{display:grid;place-items:center;width:18px;height:20px;font-size:10px;font-weight:650;border-radius:4px;color:var(--accent);background:var(--accent-bg)}
.fname{font-size:11px;color:var(--fg-2)}
.save-state{font-size:10px;color:var(--ok);opacity:0;transition:opacity .2s}
.save-state.show{opacity:1}
.save-state.warn{color:var(--warn)}
.editor-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;min-height:49px;border-top:1px solid var(--line-2);font-size:10px;color:var(--muted);flex-shrink:0}
.editor-foot>span{flex:1}
.editor-foot .primary{font-size:12px;padding:5px 15px}
kbd{font-size:9px;opacity:.75;margin-left:5px}
.editor{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}

/* Line-number gutter. Its font/padding/line-height MUST match the editor
   text exactly, or the numbers drift out of step with the code. */
.gutter{
  flex:0 0 46px;background:var(--panel-2);border-right:1px solid var(--line);
  padding:12px 8px 12px 0;text-align:right;color:var(--muted);
  font:12.5px/1.6 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
       "Liberation Mono",monospace;
  overflow:hidden;user-select:none;white-space:pre;
}

/* The editor is a TRANSPARENT <textarea> stacked over a highlighted <pre>.
 * Both layers must have byte-identical metrics (font, size, line-height,
 * padding, letter/word spacing, tab-size) or the caret drifts away from the
 * coloured glyphs underneath it.
 * The textarea is the scroller; the <pre> is translated to follow it. */
.code-area{position:relative;flex:1;min-width:0;overflow:hidden}

.code-area pre,
.code-area textarea{
  position:absolute;top:0;left:0;
  margin:0;padding:12px 14px;border:0;box-sizing:border-box;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
               "Liberation Mono",monospace;
  font-size:12.5px;
  line-height:1.6;
  font-style:normal;
  font-weight:400;
  letter-spacing:normal;
  word-spacing:normal;
  text-transform:none;
  white-space:pre;
  tab-size:4;
  -moz-tab-size:4;
}
.code-area pre{
  width:max-content;min-width:100%;
  pointer-events:none;color:var(--fg);
  will-change:transform;
}
.code-area pre code{
  font:inherit;letter-spacing:inherit;word-spacing:inherit;
}
.code-area textarea{
  width:100%;height:100%;
  background:transparent;color:transparent;
  caret-color:var(--accent);
  resize:none;outline:0;
  overflow:auto;
}
.code-area textarea::selection{background:#bfd7ff;color:transparent}

/* C token COLOURS ONLY.
 * Do not add font-style / font-weight / font-size here: any metric change
 * desynchronises the highlight layer from the textarea's caret. */
.tk-kw{color:#a626a4}
.tk-ty{color:#0b7285}
.tk-num{color:#b76b01}
.tk-str{color:#0a7c42}
.tk-com{color:#94a3b3}
.tk-pre{color:#7c3aed}
.tk-fn{color:#1a56db}
.tk-reg{color:#b3261e}

/* belt and braces: force every token span to inherit metrics */
.code-area pre span{font:inherit;letter-spacing:inherit;word-spacing:inherit;
                    font-style:normal;font-weight:400}


.result-dock{display:flex;flex-direction:column;flex:0 0 272px;overflow:hidden}
.result-bar{min-height:46px;padding:7px 14px}
.stage-body{flex:1;min-height:0;overflow:auto;padding:14px 16px;scrollbar-gutter:stable}
.empty-state{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;height:100%;min-height:100px;color:var(--muted);gap:5px}
.empty-symbol{font-size:25px;color:#aaa5d9;margin-bottom:4px}
.empty-state strong{font-size:13px;font-weight:500;color:var(--fg-2)}
.empty-state p{margin:0;font-size:11px}
.empty{font-size:12px;color:var(--muted);padding:10px;text-align:center}
.verdict{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;margin-bottom:12px}
.verdict.pass{color:var(--ok)}
.verdict.fail{color:var(--err)}
.verdict-stat{font-size:10px;color:var(--muted);font-weight:400;white-space:nowrap}
.overview-grid{display:grid;grid-template-columns:minmax(160px,.85fr) minmax(180px,1.15fr);gap:16px}
.result-caption{font-size:10px;color:var(--muted);margin:0 0 7px;font-weight:500}
.board-host{padding:10px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;overflow:auto}
.board{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.bank{display:flex;gap:5px;align-items:flex-end;flex-wrap:wrap}
.bank-cap{width:100%;font-size:9px;color:var(--muted);font-weight:500}
.led{display:flex;flex-direction:column;align-items:center;gap:4px;width:24px}
.bulb{width:19px;height:19px;border-radius:50%;background:#e4e7ed;border:1px solid #d5d8e1;transition:background .05s,box-shadow .05s}
.bulb.on{background:#ff685f;border-color:#ec5f57;box-shadow:0 0 8px #ff685f55}
.bulb.in{border-radius:5px}
.bulb.in.hi{background:#e9b953;border-color:#dba842;box-shadow:0 0 8px #e9b95355}
.led-cap{font-size:8px;color:var(--muted)}
.seven-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:10px}
.seven-cap{font-size:9px;color:var(--muted);margin-bottom:6px}
.seven{display:flex;gap:4px}
.seven svg{max-width:42px;height:auto}
.seg .seg-off{fill:#e4e7ed;stroke:#d5d8e1;stroke-width:1}
.seg .seg-on{fill:#ff685f}
.seg.seg-active{filter:drop-shadow(0 0 3px #ff685f55)}
.digit-sel{font-size:10px;color:var(--fg-2);margin-top:6px}
.transport{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:10px;color:var(--muted)}
.transport input[type=range]{accent-color:var(--accent);min-width:40px;height:15px}
#scrub{flex:1;width:100%;min-width:40px}
.tval{font-size:10px;font-variant-numeric:tabular-nums;color:var(--fg-2);white-space:nowrap}
.speed-select{border:1px solid var(--line);border-radius:6px;background:white;color:var(--fg-2);font:inherit;padding:3px}
.wave-controls{margin:0 0 12px}
canvas.wave{width:100%;display:block;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.res{display:flex;flex-direction:column;gap:5px}
.res-item{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.6}
.res-item .mk{flex-shrink:0;font-weight:600}
.res-item.pass .mk{color:var(--ok)}
.res-item.fail .mk{color:var(--err)}
.res-item .dt{display:block;font-size:10px;color:var(--muted)}
.warnbox{margin-top:12px;background:var(--warn-bg);border-radius:7px;padding:8px 11px;font-size:11px;color:var(--warn)}
.errbox{background:var(--err-bg);color:var(--err);border-radius:8px;padding:12px;font:11px/1.8 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.log-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:10px;color:var(--muted)}
.log-toolbar select{max-width:120px}
.log-table{width:100%;border-collapse:collapse;font:11px/1.65 ui-monospace,Menlo,monospace;text-align:left;font-variant-numeric:tabular-nums}
.log-table th{font-size:10px;font-weight:400;color:var(--muted);border-bottom:1px solid var(--line);padding:5px 6px;background:var(--panel-2);position:sticky;top:0}
.log-table td{padding:4px 6px;border-bottom:1px solid var(--line-2)}
.log-table .r{color:var(--accent-2)}
.log-table .v{color:var(--ok)}
.log-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:10px;color:var(--muted)}
.mobile-tabs{display:none}
.main.sidebar-hidden .side{display:none}
.work-panels.focus-mode{grid-template-columns:minmax(0,1fr)}
.focus-mode .problem-panel{display:none}
.result-dock.collapsed{flex-basis:46px}
.result-dock.collapsed .stage-body{display:none}
.result-dock.collapsed .result-tabs{display:none}
.login-screen{height:100vh;height:100dvh;display:flex;align-items:safe center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 35% 25%,#e5e2f6,transparent 60%),var(--bg);overflow:auto}
.login-card{width:380px;max-width:100%;padding:36px;background:#ffffffec;border:1px solid #fff;border-radius:20px;box-shadow:0 15px 60px #2927500d}
.login-card .app-mark{margin-bottom:22px}
.login-card h1{font-size:23px;margin:0 0 8px;font-weight:600}
.login-card p{color:var(--muted);font-size:13px;margin-bottom:24px}
.login-card label{display:block;margin:16px 0;font-size:12px;color:var(--fg-2)}
.login-card input{display:block;width:100%;padding:10px 12px;margin-top:6px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--fg)}
.login-card button{width:100%;margin-top:12px;padding:9px}
.login-error{color:var(--err);font-size:12px}
.login-card .auth-tabs{display:flex;margin-bottom:22px}
.login-card .auth-tabs button{flex:1;width:auto;margin:0;padding:7px 10px}
.auth-tabs button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 4px #25293612}
.field-hint{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:6px}
.auth-note{margin-top:18px;text-align:center;font-size:11px;color:var(--muted)}
.login-card input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:420px),(max-height:700px){.login-screen{padding:16px}.login-card{padding:24px}.login-card .app-mark{margin-bottom:16px}.login-card p{margin-bottom:18px}.login-card label{margin:12px 0}.login-card .auth-tabs{margin-bottom:16px}}
@media(min-width:1600px){.side{width:260px}.workspace{padding:28px 32px;gap:24px}.work-panels{grid-template-columns:minmax(340px,.8fr) minmax(500px,1.6fr);gap:22px}.result-dock{flex-basis:300px}}
@media(max-width:1200px){.side{width:216px}.workspace{padding:18px;gap:16px}.work-panels{grid-template-columns:270px minmax(0,1fr);gap:12px}.pane{padding:18px}.overview-grid{grid-template-columns:1fr}.overview-board{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.overview-board .board-host{flex:1;min-width:120px}.overview-board .transport{flex:1;min-width:170px;margin-top:0}.overview-board .result-caption{display:none}.result-dock{flex-basis:270px}.overview-grid{gap:10px}.shortcut-hint{display:none}}
@media(max-width:980px){.side{position:absolute;inset:0 auto 0 0;width:250px;z-index:30;background:#f8f9fc;box-shadow:12px 0 30px #25293618}.main:not(.sidebar-open) .side{display:none}.main.sidebar-hidden.sidebar-open .side{display:flex}.workspace{padding:16px}.work-panels{grid-template-columns:280px minmax(0,1fr)}.top{height:62px;padding:0 16px}.brand-sub{display:none}}
@media(max-width:700px){.top{height:58px;gap:10px;padding:0 12px}.brand{gap:8px}.brand h1{font-size:12px}.brand .app-mark{width:29px;height:29px;font-size:20px;border-radius:9px}.offline-label,.online-state{display:none}.user-chip{font-size:10px;padding:2px 7px}.workspace{padding:14px 12px;gap:12px}.problem-heading h2{font-size:17px}.eyebrow{font-size:9px}.problem-nav{gap:4px}#problem-position{display:none}.pill.tag{display:none}.mobile-tabs{display:flex;align-self:center;flex-shrink:0}.mobile-tabs button{padding:5px 20px}.work-panels,.work-panels.focus-mode{display:flex;flex-direction:column;gap:0}.problem-panel{flex:1}.coding-panel{display:none;flex:1}.work-panels.code-view .problem-panel{display:none}.work-panels.code-view .coding-panel{display:flex}.work-panels.focus-mode:not(.code-view) .problem-panel{display:flex}.result-dock{flex-basis:230px}.editor-wrap{min-height:160px}.workspace-head{gap:8px}.panel-bar{padding:8px 12px}.result-tabs button{padding:3px 9px}.result-bar{gap:8px}.result-bar .panel-label{font-size:10px}.editor-bar{min-height:41px;padding:6px 12px}.editor-foot{padding:7px 12px;min-height:44px}.save-state{font-size:9px}.pane{padding:18px 22px}.stage-body{padding:12px}.overview-board .transport{min-width:130px}.log-toolbar{flex-wrap:wrap}.side-foot{padding:10px 20px}}
@media(max-height:650px){.result-dock{flex-basis:210px}.workspace{gap:12px;padding-top:12px;padding-bottom:12px}.top{height:54px}.editor-wrap{min-height:130px}.workspace-head .eyebrow{display:none}.problem-heading h2{font-size:17px}.side-head{padding-top:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* On desktop the results span the workspace, so they never squeeze the code. */
@media(min-width:701px){
  .work-panels{grid-template-rows:minmax(0,1fr) 210px}
  .coding-panel{display:contents}
  .problem-panel{grid-column:1;grid-row:1}
  .editor-wrap{grid-column:2;grid-row:1}
  .result-dock{grid-column:1 / -1;grid-row:2}
  .work-panels:has(.result-dock.collapsed){grid-template-rows:minmax(0,1fr) 46px}
  .focus-mode .editor-wrap{grid-column:1}
  .overview-grid{grid-template-columns:minmax(220px,.7fr) minmax(280px,1.3fr);gap:24px}
  .overview-board{display:block}
  .overview-board .transport{margin-top:8px}
  .overview-board .result-caption{display:none}
  .res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:7px}
  .result-focus{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
  .result-focus .problem-panel,.result-focus .editor-wrap{display:none}
  .result-focus .result-dock{grid-column:1;grid-row:1}
}
@media(max-width:700px){.result-focus.code-view .editor-wrap{display:none}.result-focus.code-view .result-dock{flex:1}.res{display:flex}.result-bar .panel-label{display:none}}

#result-summary{display:none;font-size:10px;color:var(--muted)}
.result-dock.collapsed #result-summary{display:inline}
.log-header{position:sticky;top:-14px;background:var(--panel);z-index:2;padding:5px 0 10px;margin-top:-5px}
.log-toolbar{margin-bottom:7px}
.log-pages{margin-top:0}
.log-table th{position:static}
@media(max-width:700px){.result-dock.collapsed .panel-label{display:inline}.result-dock.collapsed #result-summary{font-size:9px}.log-header{top:-12px}}
@media(max-width:700px){
  .overview-board{display:block}
  .overview-board .transport{width:100%;min-width:0;margin-top:9px;gap:5px;flex-wrap:wrap}
  .overview-board .transport #scrub{flex:1;min-width:40px;width:50px}
  .transport .speed-select{max-width:65px}
  .result-bar .panel-label{display:inline}
  .result-bar{gap:6px}
  .result-tabs button{padding:3px 7px}
  .result-dock.collapsed #result-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Actual algorithm states, compact enough for the result dock. */
.lab-state{width:100%;padding:10px;box-sizing:border-box}.lab-state-head{display:flex;gap:14px;justify-content:space-between;color:var(--accent,#7761cf);font-weight:600;margin-bottom:10px}.lab-fields{display:flex;flex-wrap:wrap;gap:8px}.lab-field{min-width:80px;max-width:100%;padding:8px;border:1px solid #dedee7;border-radius:8px;overflow:auto}.lab-field small,.lab-cell small{display:block;color:#777;margin-bottom:5px}.lab-field strong{font-family:ui-monospace,monospace;font-size:13px}.lab-cells{display:flex;gap:4px;flex-wrap:wrap}.lab-cell{padding:5px 9px;border-radius:6px;background:#f0eef8;min-width:24px}.bit-row{display:flex;gap:2px;margin-top:6px;flex-wrap:wrap;max-width:350px}.bit-row b{font:11px ui-monospace,monospace;padding:2px 3px;border-radius:3px;background:#eee}.bit-row .bit-1{background:#dcd4ff;color:#593dad}.timeline{min-width:240px}.timeline-row{display:flex;gap:8px;align-items:center;margin:3px 0}.timeline-row>span{font-size:11px;width:70px}.timeline-row>div{flex:1;background:#f5f5f8}.timeline-row b{display:block;box-sizing:border-box;font-size:10px;color:white;white-space:nowrap;min-height:20px;padding:2px}

.lcd-display,.keypad-display,.uart-display{padding:10px;min-width:200px;max-width:100%;box-sizing:border-box}.peripheral-caption{font-size:11px;color:#777;margin-bottom:7px}.lcd-screen{background:#d9e6b0;color:#35432a;padding:10px;border:4px solid #576858;border-radius:7px;display:inline-block;font:16px/1.7 ui-monospace,monospace;white-space:pre;letter-spacing:1px}.lcd-screen span{display:inline-block;width:11px}.lcd-cursor{background:#a4bf7e}.lcd-screen.off{opacity:.35}.lcd-display>small{display:block;color:#888;margin-top:5px}.keypad-grid{display:grid;grid-template-columns:repeat(4,36px);gap:5px}.keypad-key{border-radius:7px;background:#f0eef6;color:#777;text-align:center;padding:8px 0;border:1px solid #ddd}.keypad-key.scanning{border-color:#9c88ce}.keypad-key.pressed{background:#7761cf;color:white;box-shadow:0 0 0 2px #d8cef5}.uart-lines{display:grid;grid-template-columns:1fr 1fr;gap:7px}.uart-lines>div{padding:7px;border:1px solid #dedee7;border-radius:7px;min-width:100px}.uart-lines small{color:#777}.uart-lines pre{margin:5px 0;min-height:25px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.uart-frame{margin-top:7px}.uart-frame>small{color:#777}.uart-frame .bit-row b{text-align:center;min-width:16px}.uart-frame .bit-row small{font-size:8px;display:block}.board{flex-wrap:wrap}.public-examples summary{cursor:pointer;color:#7055b3;margin:12px 0}.public-examples pre{max-height:230px;overflow:auto;font-size:11px}

.lab-group{width:100%;margin:5px 0}.lab-group>small{display:block;color:#777;margin-bottom:5px}.lab-field:has(.timeline){width:100%;overflow:visible}.timeline{width:100%;min-width:0}.timeline-row>div{min-width:0;overflow:hidden}.timeline-row b{padding:2px 0;font-size:9px}.lab-table{border-collapse:collapse;font-size:11px}.lab-table th,.lab-table td{padding:5px 8px;border-bottom:1px solid #e3e2ec;text-align:left}.algorithm-result .overview-grid{grid-template-columns:minmax(0,1.5fr) minmax(180px,.6fr)}.algorithm-result .overview-board{min-width:0}.algorithm-result .board{display:block;width:100%}.algorithm-result .lab-state{padding:10px 0}.algorithm-result .res{display:block}.algorithm-result .res-item{margin-bottom:7px}@media(max-width:700px){.algorithm-result .overview-grid{grid-template-columns:1fr}.uart-lines{grid-template-columns:1fr}.transport:has(#step-next){flex-wrap:wrap}.lcd-screen{font-size:13px;padding:8px}.lcd-screen span{width:10px}}
.overview-board .transport{position:sticky;top:-1px;background:var(--panel);z-index:2;padding:5px 0;border-bottom:1px solid var(--line);margin:0 0 8px}.lab-field{background:#fafafe}.algorithm-result .overview-board .transport{flex-wrap:wrap}.algorithm-result .res-item{font-size:12px}
@media(max-width:360px){.board{gap:4px;align-items:flex-start}.lcd-display,.keypad-display{padding:4px;min-width:0}.lcd-screen{font-size:11px;padding:6px}.lcd-screen span{width:8px}.keypad-grid{grid-template-columns:repeat(4,20px);gap:3px}.keypad-key{padding:5px 0;font-size:10px}.keypad-display .peripheral-caption{max-width:89px}.result-tabs button{padding:3px 6px}.editor-bar{gap:5px}.editor-bar .file-icon{display:none}.editor-bar .fname{max-width:65px;overflow:hidden}}

.peripheral-result .overview-grid{grid-template-columns:minmax(0,1.5fr) minmax(180px,.6fr)}.peripheral-result .overview-board{display:block;min-width:0}.peripheral-result .overview-board .transport{width:100%;flex-wrap:wrap}.peripheral-result .res{display:block}.peripheral-result .res-item{margin-bottom:7px;font-size:12px}@media(max-width:700px){.peripheral-result .overview-grid{grid-template-columns:1fr}}