/* Consistent, readable learning tools without changing simulation colours or diagrams. */
:root { --lab-code-bg:#101d30; --lab-code-fg:#e6edf7; --lab-learning-blue:#285aa9; }
body { text-rendering:optimizeLegibility; }
button, input, select, textarea, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #679fe8 !important; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.55; transform:none !important; }
summary { cursor:pointer; }
[hidden] { display:none !important; }
.lab-catalog { margin:20px 0 24px; padding:20px; border:1px solid #cbdcf0; border-radius:14px; background:#f5f9ff; }
.lab-catalog>label { display:block; margin-bottom:9px; color:#203e65; font-size:16px; font-weight:750; }
.lab-catalog>input { width:100%; min-height:46px; padding:11px 14px; border:1px solid #b6cce7; border-radius:8px; background:#fff; color:#20354f; font-size:14px; }
.lab-catalog-filters { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.lab-catalog-filters button { padding:8px 10px; border:1px solid #c6d7ec; border-radius:7px; background:#fff; color:#395c89; font-size:12px; cursor:pointer; }
.lab-catalog-filters button[aria-pressed="true"] { border-color:#285aa9; background:#285aa9; color:#fff; }
.lab-catalog-result { margin:12px 0 0; color:#5b708b; font-size:12px; }
main,.app,.page,.panel,.stage,.right,.left,.demo-card,.code-area,.editor-layout>*,.workspace>* { min-width:0; }
.lab-student-guide { margin:16px 24px; border:1px solid #cedced; border-radius:12px; background:#f7faff; color:#1c304c; font-family:Inter,system-ui,sans-serif; }
.lab-student-guide>details>summary { display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:13px; list-style:none; }
.lab-student-guide>details>summary::after { content:'＋'; margin-left:auto; color:#52749e; }
.lab-student-guide>details[open]>summary::after { content:'−'; }
.lab-student-guide>details>summary>span:not(.lab-guide-icon) { color:#52677f; font-size:12px; font-weight:400; }
.lab-guide-icon { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; border-radius:8px; background:#e2edfb; color:#285aa9; }
.lab-guide-body { padding:0 16px 15px; }
.lab-guide-body>ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:14px 0; border-top:1px solid #dbe5f1; list-style:none; }
.lab-guide-body>ol>li { padding-right:14px; border-right:1px solid #dbe5f1; }
.lab-guide-body>ol>li:last-child { border:0; }
.lab-guide-body li strong { color:#285aa9; font-size:12px; }
.lab-guide-body li p { margin:6px 0 0; font-size:12px; line-height:1.65; color:#425875; }
.lab-guide-meta p { margin:0; padding:9px 12px; border-radius:7px; background:#eaf1fa; font-size:11px; line-height:1.6; color:#405b7d; }
.lab-notes { margin-top:10px; }
.lab-notes>summary { color:#285aa9; font-size:12px; font-weight:700; }
.lab-notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:13px; }
.lab-notes-grid label { display:grid; gap:6px; color:#425875; font-size:12px; font-weight:600; }
.lab-notes-grid textarea { width:100%; padding:10px; border:1px solid #c2d2e6; border-radius:7px; background:#fff; color:#20354f; font:13px/1.6 system-ui,sans-serif; resize:vertical; }
.lab-notes-help { color:#5b6e85; font-size:11px; }
.lab-guide-floating { position:fixed; bottom:16px; left:16px; z-index:25; width:min(520px,calc(100vw - 32px)); margin:0; box-shadow:0 10px 35px #0003; max-height:70vh; overflow:auto; }
.lab-guide-floating .lab-guide-body>ol { grid-template-columns:1fr; }
.lab-guide-floating .lab-guide-body>ol>li { border:0; }
body[data-lab-page="diagram-editor"] .app { grid-template-rows:auto auto minmax(0,1fr) auto auto; }
[data-lab-legacy] { display:none !important; }
.lab-editor-host { position:relative; min-width:0; }
.lab-single-editor-column { grid-template-columns:minmax(0,1fr) !important; }
.lab-code-shell { --lab-code-size:14px; --lab-code-line:1.7; display:flex; flex-direction:column; width:100%; min-width:0; height:auto; overflow:hidden; border:1px solid #2f465f; border-radius:10px; background:var(--lab-code-bg); color:var(--lab-code-fg); text-align:left; }
.lab-editor-host>.lab-code-shell { height:100%; }
.lab-code-shell .lab-code-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:6px 10px 6px 14px; border-bottom:1px solid #30425b; background:#192c44; color:#d5e4f6; font:600 11px/1.4 system-ui,sans-serif; }
.lab-code-tools { display:flex; align-items:center; gap:5px; }
.lab-code-shell .lab-code-tools button { min-width:29px; min-height:28px; margin:0; padding:4px 7px; border:1px solid #47617f; border-radius:5px; background:#203b59; color:#e3edf9; font:600 11px/1.4 system-ui,sans-serif; cursor:pointer; }
.lab-code-shell .lab-code-tools button:hover { background:#315679; transform:none; }
.lab-code-frame { position:relative; flex:1; min-height:200px; overflow:hidden; }
.lab-code-shell .lab-code-frame>.lab-code-input,.lab-code-shell .lab-code-frame>.lab-code-overlay {
  display:block !important; box-sizing:border-box !important; width:calc(100% - 3.5em) !important; margin:0 !important; padding:14px 16px !important;
  border:0 !important; border-radius:0 !important; outline-offset:-3px; font-family:Consolas,"Liberation Mono",Menlo,monospace !important;
  font-size:var(--lab-code-size) !important; font-weight:400 !important; font-style:normal !important; line-height:var(--lab-code-line) !important;
  letter-spacing:0 !important; word-spacing:0 !important; text-align:left !important; text-indent:0 !important; tab-size:4 !important; white-space:pre !important;
  overflow-wrap:normal !important; word-break:normal !important; font-variant-ligatures:none !important;
}
.lab-code-shell .lab-code-frame>.lab-code-input { position:relative !important; inset:auto !important; left:3.5em !important; z-index:2 !important; height:100% !important; min-height:clamp(240px,43vh,520px) !important; resize:vertical !important; background:transparent !important; color:transparent !important; -webkit-text-fill-color:transparent !important; caret-color:#fff !important; overflow:auto !important; }
.lab-code-shell .lab-code-frame>.lab-code-overlay { position:absolute !important; inset:0 0 0 3.5em !important; z-index:1 !important; height:100% !important; min-height:0 !important; pointer-events:none; background:var(--lab-code-bg) !important; color:var(--lab-code-fg) !important; overflow:hidden !important; }
.lab-code-shell .lab-code-input::selection { background:#477aaf80 !important; }
.lab-code-gutter { position:absolute; inset:0 auto 0 0; width:3.5em; overflow:hidden; padding:14px 0; border-right:1px solid #30425b; background:#14243a; color:#9cb1cd; font:400 var(--lab-code-size)/var(--lab-code-line) Consolas,"Liberation Mono",Menlo,monospace; text-align:right; user-select:none; }
.lab-code-gutter>span { display:block; padding-right:.8em; min-height:1.7em; }
.lab-code-gutter>.lab-line-active { color:#ffe1a1; background:#6d5229; box-shadow:inset 3px 0 #ffd17c; }
.lab-code-overlay.lab-has-active-line { background-image:linear-gradient(#ffd17c25,#ffd17c25) !important; background-repeat:no-repeat !important; background-size:100% 1.7em !important; background-position:0 calc(14px + var(--lab-active-line) * 1.7em) !important; }
.lab-code-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; padding:7px 12px; border-top:1px solid #30425b; color:#b4c7df; font:10px/1.5 system-ui,sans-serif; }
.lab-token-keyword { color:#d5acff !important; font-weight:400 !important; }
.lab-token-string { color:#b6e3a6 !important; }
.lab-token-number { color:#ffca8a !important; }
.lab-token-comment { color:#9cacc0 !important; font-style:normal !important; }
.lab-token-builtin { color:#80ded1 !important; }
.lab-token-function { color:#91ceff !important; }
.lab-token-operator { color:#d5e5ff !important; }
pre.lab-code-example { max-width:100%; overflow:auto; border-radius:8px; color:var(--lab-code-fg) !important; background:var(--lab-code-bg) !important; padding:16px; font-family:Consolas,"Liberation Mono",Menlo,monospace; font-size:13px; line-height:1.7; tab-size:4; }
pre.lab-code-example .code-line { font-family:inherit; }
@media (max-width:760px) {
  .btn,.primary,.secondary,.mode-tab,.level-tab { min-height:40px; }
  .topbar { flex-wrap:wrap !important; gap:10px !important; }
  .topbar>div:not(.mark):not(.brand-mark):not(.spacer) { min-width:0; }
  .topbar h1 { overflow-wrap:anywhere; }
  .topbar .home { margin-left:auto; white-space:normal; }
  .lab-student-guide { margin:12px 14px; }
  .lab-student-guide>details>summary { flex-wrap:wrap; padding:11px 12px; }
  .lab-student-guide>details>summary>span:not(.lab-guide-icon) { flex-basis:calc(100% - 45px); order:2; margin-left:35px; }
  .lab-guide-body>ol,.lab-notes-grid { grid-template-columns:1fr; gap:12px; }
  .lab-guide-body>ol>li { padding:0; border:0; }
  .lab-code-shell .lab-code-frame>.lab-code-input { min-height:280px !important; }
  .lab-code-shell .lab-code-head { flex-wrap:wrap; }
  .lab-guide-floating { margin:0; }
  .caption,.stage-head,.panel-title { flex-wrap:wrap; }
  .observation-table { table-layout:fixed; overflow-wrap:anywhere; }
  .demo-card,.dom-tree,.code-layout,.demo-grid { min-width:0; max-width:100%; }
  .dom-tree { overflow:auto; }
  body[data-lab-page="diagram-editor"] .topbar { height:auto; min-height:58px; }
  body[data-lab-page="diagram-editor"] { overflow:auto; }
  body[data-lab-page="diagram-editor"] .app { display:block; height:auto; min-height:100vh; }
  body[data-lab-page="diagram-editor"] .workspace { grid-template-columns:1fr !important; }
  body[data-lab-page="diagram-editor"] .canvas-wrap { height:55vh; min-height:320px; }
  body[data-lab-page="diagram-editor"] .inspector { max-width:100%; }
  body[data-lab-page="diagram-editor"] .sidebar { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
@media (forced-colors:active) { .lab-code-shell .lab-code-frame>.lab-code-input { color:CanvasText !important; -webkit-text-fill-color:CanvasText !important; background:Canvas !important; } .lab-code-overlay { visibility:hidden; } }