:root {
  --ink: #17243a;
  --muted: #68788d;
  --faint: #93a2b4;
  --line: #d9e2ea;
  --line-strong: #c6d3df;
  --panel: #f9fbfc;
  --paper: #ffffff;
  --canvas: #edf3f7;
  --cyan: #168fa3;
  --cyan-soft: #e2f3f5;
  --kda: #168c88;
  --dsa: #4269d8;
  --violet: #8a5bd6;
  --amber: #d98b26;
  --green: #2d986b;
  --pink: #df4f86;
  --shadow: 0 8px 26px rgba(39, 62, 84, .07);
  --mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #e8eef3;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }

#app { height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr) 176px; }
.topbar {
  display: flex; align-items: center; gap: 24px; padding: 0 20px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line-strong); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 320px; }
.brand-mark { width: 33px; height: 35px; position: relative; display: flex; align-items: center; gap: 3px; transform: skewY(-10deg); }
.brand-mark span { display: block; width: 8px; border-radius: 2px; background: var(--ink); }
.brand-mark span:nth-child(1) { height: 20px; background: var(--kda); }
.brand-mark span:nth-child(2) { height: 32px; background: var(--dsa); }
.brand-mark span:nth-child(3) { height: 25px; background: var(--violet); }
.eyebrow { font: 600 9px/1 var(--mono); letter-spacing: .17em; color: var(--muted); margin-bottom: 6px; }
h1 { font-size: 17px; line-height: 1; margin: 0; letter-spacing: -.02em; }
h1 span { font-weight: 500; color: var(--muted); margin-left: 7px; font-size: 13px; letter-spacing: 0; }
.model-metrics { display: flex; align-items: center; gap: 0; margin-left: auto; height: 38px; }
.model-metrics > div { padding: 0 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.model-metrics b { font: 650 12px/1 var(--mono); }
.model-metrics span { color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.simulation-chip { display: flex; align-items: center; gap: 6px; color: #885b16; background: #fff5df; border: 1px solid #eed9ab; border-radius: 20px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.simulation-chip i { width: 5px; height: 5px; background: var(--amber); border-radius: 50%; }
.icon-button { width: 31px; height: 31px; border: 1px solid var(--line); background: #fff; border-radius: 7px; font-size: 15px; }
.icon-button:hover { background: #f0f5f8; border-color: var(--line-strong); }

.main-grid { display: grid; grid-template-columns: 270px minmax(360px, 1fr) 324px; min-height: 0; }
body.left-collapsed .main-grid { grid-template-columns: 0 minmax(360px, 1fr) 324px; }
body.right-collapsed .main-grid { grid-template-columns: 270px minmax(360px, 1fr) 0; }
body.left-collapsed.right-collapsed .main-grid { grid-template-columns: 0 minmax(360px, 1fr) 0; }
body.left-collapsed .left-panel, body.right-collapsed .right-panel { display: none; }
.panel { background: var(--panel); min-height: 0; z-index: 8; }
.left-panel { border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.right-panel { border-left: 1px solid var(--line-strong); overflow-y: auto; }
.panel-heading { min-height: 54px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading > div, .dock-heading > div { display: flex; align-items: center; gap: 8px; }
.panel-heading.compact { min-height: 45px; padding: 0 14px; }
.panel-heading h2, .dock-heading h2 { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.section-index { font: 600 9px/1 var(--mono); color: var(--cyan); border: 1px solid #b8dce2; padding: 4px; border-radius: 3px; }
.section-index.execution { color: var(--amber); border-color: #ead2ad; }
.tiny-note { font-size: 9px; color: var(--faint); }
.catalog-tools { padding: 11px 12px 9px; border-bottom: 1px solid var(--line); }
.search-box { height: 32px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 9px; }
.search-box span { color: var(--muted); font-size: 17px; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; color: var(--ink); }
.search-box input::placeholder { color: #9aa8b7; }
.filter-row { display: flex; gap: 4px; margin-top: 8px; }
.filter-button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 5px 3px; font-size: 9px; border-radius: 4px; }
.filter-button.active { background: #e5eef3; color: var(--ink); font-weight: 650; }
.structure-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 6px 16px; scrollbar-width: thin; scrollbar-color: #bdcbd6 transparent; }
.block-folder { border-bottom: 1px solid #e4ebf0; }
.block-folder > summary { list-style: none; display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 7px; cursor: pointer; color: var(--muted); font-size: 10px; }
.block-folder > summary::-webkit-details-marker { display: none; }
.block-folder > summary::before { content: "›"; font-size: 14px; transition: transform .15s; }
.block-folder[open] > summary::before { transform: rotate(90deg); }
.block-folder > summary b { color: var(--ink); font: 600 10px var(--mono); }
.block-folder > summary span:last-child { margin-left: auto; font: 9px var(--mono); color: var(--faint); }
.layer-entry { margin: 2px 0; border-radius: 5px; }
.layer-row { display: grid; grid-template-columns: 19px 1fr; align-items: center; min-height: 29px; }
.layer-expand { border: 0; background: transparent; color: var(--faint); font-size: 13px; padding: 3px; }
.layer-expand.open { transform: rotate(90deg); }
.layer-select { display: grid; grid-template-columns: 30px 1fr auto; gap: 5px; align-items: center; border: 0; background: transparent; text-align: left; padding: 5px 6px 5px 2px; min-width: 0; border-radius: 4px; }
.layer-select:hover { background: #eaf1f5; }
.layer-number { font: 600 10px var(--mono); color: var(--muted); }
.layer-name { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-type { font: 600 8px var(--mono); color: var(--kda); background: #e0f0ed; padding: 3px 4px; border-radius: 3px; }
.layer-type.dsa { color: var(--dsa); background: #e7ecfb; }
.layer-entry.current { box-shadow: inset 2px 0 var(--amber); background: #fff6e7; }
.layer-entry.selected { outline: 1px solid #edb2c8; background: #fff0f5; }
.layer-entry.current.selected { box-shadow: inset 2px 0 var(--amber); }
.layer-entry.current .layer-number { color: var(--amber); }
.layer-entry.selected .layer-name { color: var(--pink); font-weight: 650; }
.layer-children { display: none; padding: 2px 5px 6px 38px; }
.layer-children.open { display: grid; gap: 2px; }
.module-button { border: 0; border-left: 1px solid #d7e1e9; background: transparent; text-align: left; padding: 4px 6px; color: var(--muted); font-size: 9px; }
.module-button:hover { color: var(--ink); background: #edf3f6; }
.module-button.selected { color: var(--pink); border-left: 2px solid var(--pink); background: #fff0f5; }
.hidden-by-filter { display: none !important; }
.source-drawer { border-top: 1px solid var(--line-strong); background: #fff; }
.source-drawer summary { padding: 12px 14px; list-style: none; cursor: pointer; font-size: 10px; font-weight: 600; }
.source-drawer summary span { float: right; color: var(--faint); font: 9px var(--mono); }
.source-drawer-content { padding: 0 13px 12px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.source-drawer-content p { margin: 0 0 8px; }
.source-drawer-content b { color: var(--ink); }
.all-sources { display: grid; gap: 4px; }
.all-sources a { color: var(--cyan); text-decoration: none; overflow-wrap: anywhere; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 67px minmax(0, 1fr); background: var(--canvas); }
.scene-toolbar { display: flex; align-items: center; gap: 13px; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid var(--line-strong); z-index: 7; }
.toolbar-slider { width: 145px; flex: 0 1 155px; }
.toolbar-slider > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.toolbar-slider label { font-size: 10px; font-weight: 600; }
.toolbar-slider output { font: 9px var(--mono); color: var(--cyan); }
.toolbar-slider input { width: 100%; height: 3px; margin: 8px 0 3px; accent-color: var(--cyan); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; }
.toolbar-divider { height: 34px; width: 1px; background: var(--line); }
.view-actions { display: flex; gap: 5px; margin-left: auto; }
.tool-button { height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 0 8px; font-size: 9px; white-space: nowrap; }
.tool-button span { margin-right: 4px; font-size: 12px; }
.tool-button:hover { border-color: #a9bccb; }
.tool-button.active { background: #eaf4f5; border-color: #b7dce1; color: #157c8d; }
.tool-button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.tool-button[aria-pressed="true"]#isolateBtn { background: #fff0f5; border-color: #e8a5bf; color: var(--pink); }
.scene-container { min-height: 0; position: relative; overflow: hidden; }
.scene-container > canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; }
.labels-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-status { position: absolute; top: 13px; left: 14px; z-index: 3; display: flex; align-items: center; gap: 7px; pointer-events: none; }
.view-mode-badge, #sceneLayerBadge { background: rgba(255,255,255,.84); border: 1px solid rgba(192,207,219,.9); backdrop-filter: blur(8px); border-radius: 4px; padding: 5px 8px; font-size: 9px; }
.view-mode-badge { color: var(--cyan); font-weight: 650; }
#sceneLayerBadge { font: 9px var(--mono); color: var(--muted); }
.camera-hint { position: absolute; right: 13px; top: 15px; z-index: 3; color: #74879a; font-size: 8px; pointer-events: none; background: rgba(237,243,247,.72); padding: 4px 6px; border-radius: 4px; }
.legend-card { position: absolute; z-index: 3; left: 13px; bottom: 35px; width: 235px; background: rgba(255,255,255,.88); border: 1px solid rgba(193,207,218,.9); box-shadow: var(--shadow); backdrop-filter: blur(9px); border-radius: 7px; padding: 10px; pointer-events: none; }
.legend-card.hidden { display: none; }
.legend-title { font-size: 9px; font-weight: 650; margin-bottom: 8px; }
.legend-title span { float: right; font: 8px var(--mono); color: var(--faint); }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 5px; font-size: 8px; color: var(--muted); }
.legend-grid span { display: flex; align-items: center; gap: 5px; }
.legend-grid i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.legend-line { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 8px; color: var(--muted); }
.legend-line span { color: var(--cyan); }
.depth-navigator { position: absolute; z-index: 4; right: 13px; top: 52px; width: 48px; padding: 7px 6px; border-radius: 6px; background: rgba(255,255,255,.82); border: 1px solid rgba(193,207,218,.85); backdrop-filter: blur(8px); }
.depth-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.depth-title span { font: 6px var(--mono); color: var(--faint); }
.depth-title b { font: 8px var(--mono); color: var(--amber); }
.mini-map { height: 170px; display: flex; flex-direction: column-reverse; gap: 1px; position: relative; }
.mini-layer { flex: 1; min-height: 1px; border: 0; padding: 0; background: var(--kda); opacity: .28; border-radius: 1px; position: relative; }
.mini-layer.dsa { background: var(--dsa); opacity: .65; }
.mini-layer.block-end { margin-bottom: 2px; }
.mini-layer.current { opacity: 1; background: var(--amber); box-shadow: 0 0 5px #e8a448; }
.mini-layer.selected { outline: 2px solid var(--pink); opacity: 1; z-index: 2; }
.depth-blocks { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 25px; bottom: 3px; right: 1px; pointer-events: none; }
.depth-blocks span { font: 6px var(--mono); color: var(--faint); }
.scene-footnote { position: absolute; z-index: 2; bottom: 12px; left: 50%; transform: translateX(-50%); color: #8192a3; font-size: 8px; white-space: nowrap; pointer-events: none; }

.scene-label { pointer-events: none; user-select: none; color: var(--ink); font-size: 10px; line-height: 1.25; white-space: nowrap; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 5px rgba(255,255,255,.95); }
.scene-label b { font-weight: 700; }
.scene-label small { display: block; font-size: 7px; color: var(--muted); margin-top: 3px; }
.layer-label { display: flex; align-items: center; gap: 5px; padding: 3px 5px; background: rgba(255,255,255,.82); border-left: 2px solid var(--kda); border-radius: 2px; text-shadow: none; }
.layer-label.dsa { border-color: var(--dsa); }
.layer-label span { font: 7px var(--mono); color: var(--muted); }
.micro-label { font: 7px var(--mono); color: #4d6176; padding: 2px 3px; background: rgba(244,248,250,.72); border-radius: 2px; }
.feature-label { padding: 5px 8px; background: rgba(255,255,255,.84); border: 1px solid rgba(192,207,218,.75); border-radius: 4px; text-shadow: none; }
.axis-label { font: 7px var(--mono); letter-spacing: .06em; color: #6e8193; }
.token-label { font: 600 10px var(--mono); background: rgba(255,255,255,.9); min-width: 34px; padding: 3px; border-radius: 3px; }
.block-label { font: 8px var(--mono); color: var(--violet); background: rgba(255,255,255,.75); padding: 2px 4px; }
.probability-label { display: flex; flex-direction: column; font: 9px var(--mono); background: rgba(255,255,255,.88); padding: 3px 5px; border-radius: 3px; }
.probability-label span { color: var(--green); margin-top: 2px; }
.sim-label { font: 7px var(--mono); color: #956619; background: #fff5df; padding: 3px 6px; border-radius: 3px; }
.token-glyph-label { color: var(--pink); font: 8px var(--mono); background: rgba(255,255,255,.86); padding: 3px 5px; border-radius: 3px; }
.violet-label { color: var(--violet); }
.amber-label { color: #9c671c; }
.green-label { color: var(--green); }

.inspector-section { border-bottom: 1px solid var(--line-strong); }
.selected-content { padding: 12px 14px 14px; }
.object-kicker { font: 600 8px var(--mono); letter-spacing: .08em; color: var(--cyan); margin-bottom: 6px; }
.object-title { margin: 0 0 7px; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.object-description { color: var(--muted); font-size: 10px; line-height: 1.65; margin: 0 0 10px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.kind-badge { font-size: 8px; padding: 3px 5px; border-radius: 3px; background: #e6f2ef; color: #27795e; }
.kind-badge.inherited { background: #eee9f8; color: #7350ae; }
.kind-badge.teaching { background: #e7eef4; color: #557086; }
.kind-badge.sim { background: #fff1d8; color: #996417; }
.kind-badge.unknown { background: #f0f0f0; color: #777; }
.io-flow { display: grid; gap: 4px; margin: 10px 0; }
.io-row { display: grid; grid-template-columns: 38px 1fr; gap: 6px; font-size: 9px; line-height: 1.45; }
.io-row span { color: var(--faint); font: 8px var(--mono); padding-top: 2px; }
.io-row b { font-weight: 500; color: #42556a; }
.fact-list { margin-top: 11px; border-top: 1px solid var(--line); }
.fact-row { display: grid; grid-template-columns: minmax(80px, .9fr) 1.4fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e7edf1; font-size: 8px; line-height: 1.45; }
.fact-row span { color: var(--muted); }
.fact-row b { font-weight: 550; text-align: right; }
.fact-row.sim b { color: #a06b1c; }
.object-sources { margin-top: 10px; }
.object-sources summary { cursor: pointer; color: var(--muted); font-size: 8px; }
.object-sources div { display: grid; gap: 4px; margin-top: 6px; }
.object-sources a { color: var(--cyan); text-decoration: none; font-size: 8px; line-height: 1.4; }
.text-button { border: 0; background: transparent; color: var(--cyan); font-size: 9px; }
.round-badge { font: 8px var(--mono); color: var(--amber); background: #fff3df; padding: 4px 5px; border-radius: 3px; }
.current-content { padding: 11px 14px 13px; background: #fffdfa; }
.current-operation { display: flex; align-items: flex-start; gap: 9px; }
.operation-beacon { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e7c993; color: var(--amber); border-radius: 50%; font: 9px var(--mono); }
.current-operation h3 { font-size: 12px; margin: 0 0 3px; }
.current-operation p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.read-write-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.read-write-card { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 7px; }
.read-write-card span { display: block; font: 7px var(--mono); color: var(--faint); margin-bottom: 4px; }
.read-write-card b { display: block; font-size: 8px; line-height: 1.4; font-weight: 550; }
.cache-section { padding: 12px 14px; }
.cache-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cache-heading h3 { font-size: 10px; margin: 0; }
.cache-heading span { font-size: 8px; color: var(--faint); }
.cache-content { display: grid; gap: 7px; }
.cache-row { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 6px; font-size: 8px; }
.cache-row > span { color: var(--muted); }
.cache-row > b { font: 8px var(--mono); }
.cache-meter { height: 4px; background: #e2e9ee; overflow: hidden; border-radius: 3px; }
.cache-meter i { display: block; height: 100%; background: var(--kda); border-radius: 3px; transition: width .15s; }
.cache-meter.dsa i { background: var(--dsa); }
.cache-meter.depth i { background: var(--violet); }
.cache-note { font-size: 8px; color: var(--muted); line-height: 1.5; margin: 2px 0 0; }

.bottom-dock { display: grid; grid-template-columns: 1.15fr 1.6fr .95fr; background: #fff; border-top: 1px solid var(--line-strong); z-index: 15; min-height: 0; }
.bottom-dock > section { min-width: 0; padding: 12px 16px 9px; }
.bottom-dock > section + section { border-left: 1px solid var(--line); }
.dock-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.demo-label { font-size: 8px; color: var(--faint); }
.token-strip { min-height: 35px; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 2px 0; }
.text-token { flex: 0 0 auto; padding: 6px 7px; border: 1px solid var(--line); background: #f5f7f9; border-radius: 4px; font: 10px var(--mono); }
.text-token.generated { color: var(--green); background: #ebf6f0; border-color: #bfdfce; }
.text-token.pending { color: var(--pink); border-style: dashed; background: #fff4f8; min-width: 28px; text-align: center; }
.text-token.new-choice { box-shadow: 0 0 0 2px #bfe4d1; }
.text-meta { display: flex; justify-content: space-between; margin-top: 5px; color: var(--faint); font: 7px var(--mono); }
.round-jumps { display: flex; gap: 5px; margin-top: 8px; }
.round-jumps button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 4px 5px; color: var(--muted); font-size: 8px; }
.round-jumps button span { color: var(--faint); margin-left: 3px; font-family: var(--mono); }
.round-jumps button.active { border-color: #c4a7e3; background: #f4effa; color: var(--violet); }
.transport-panel { display: flex; flex-direction: column; }
.transport-top { display: flex; align-items: center; gap: 9px; }
.playback-buttons { display: flex; gap: 4px; }
.transport-button, .play-button, .play-all-button { height: 31px; border: 1px solid var(--line); background: #fff; border-radius: 5px; font-size: 10px; }
.transport-button { width: 30px; }
.transport-button.wide { width: 43px; font-size: 9px; }
.transport-button:hover { background: #eef4f7; }
.play-button { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--ink); color: #fff; border-color: var(--ink); }
.play-button.playing { background: var(--amber); border-color: var(--amber); }
.play-all-button { padding: 0 10px; color: var(--cyan); border-color: #b9dce2; white-space: nowrap; }
.speed-control { margin-left: auto; color: var(--faint); font-size: 8px; white-space: nowrap; }
.speed-control select { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 4px; color: var(--ink); font-size: 9px; }
.timeline-labels { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 8px; margin-top: 14px; }
.timeline-labels span { font: 8px var(--mono); color: var(--faint); }
.timeline-labels b { font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.step-range { width: 100%; margin: 10px 0 4px; height: 4px; accent-color: var(--cyan); cursor: pointer; }
.timeline-hint { display: flex; justify-content: space-between; color: var(--faint); font-size: 7px; }
.output-state { font: 7px var(--mono); color: var(--faint); }
.candidate-list { display: grid; gap: 4px; min-height: 91px; }
.candidate-empty { display: grid; place-items: center; min-height: 91px; text-align: center; color: var(--faint); font-size: 9px; line-height: 1.7; border: 1px dashed var(--line); border-radius: 5px; }
.candidate-row { display: grid; grid-template-columns: 47px 1fr 28px; gap: 6px; align-items: center; font: 8px var(--mono); }
.candidate-row > span { overflow: hidden; text-overflow: ellipsis; }
.candidate-row > b { text-align: right; font-weight: 500; }
.probability-track { height: 5px; background: #e6edf1; border-radius: 3px; overflow: hidden; }
.probability-track i { display: block; height: 100%; background: #7c9eb5; border-radius: 3px; }
.candidate-row.chosen { color: var(--green); }
.candidate-row.chosen .probability-track i { background: var(--green); }
.output-disclaimer { color: var(--faint); font-size: 7px; margin-top: 5px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 190px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: rgba(23,36,58,.93); color: #fff; border-radius: 6px; padding: 8px 13px; font-size: 10px; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1250px) {
  .main-grid { grid-template-columns: 235px minmax(340px, 1fr) 285px; }
  body.left-collapsed .main-grid { grid-template-columns: 0 minmax(340px, 1fr) 285px; }
  body.right-collapsed .main-grid { grid-template-columns: 235px minmax(340px, 1fr) 0; }
  .model-metrics > div { padding: 0 10px; }
  .simulation-chip { display: none; }
  .scene-toolbar { gap: 8px; }
  .toolbar-slider { width: 115px; flex-basis: 125px; }
  .tool-button { padding: 0 6px; }
  .tool-button span { margin-right: 2px; }
  .bottom-dock { grid-template-columns: 1fr 1.45fr .85fr; }
  .bottom-dock > section { padding-left: 11px; padding-right: 11px; }
  .play-all-button { display: none; }
  .demo-label { display: none; }
}
@media (max-height: 820px) {
  #app { grid-template-rows: 58px minmax(0, 1fr) 158px; }
  .topbar { padding: 0 15px; }
  .workspace { grid-template-rows: 61px minmax(0, 1fr); }
  .bottom-dock > section { padding-top: 9px; }
  .round-jumps { margin-top: 5px; }
  .timeline-labels { margin-top: 9px; }
  .selected-content { padding-top: 9px; }
  .object-description { line-height: 1.45; margin-bottom: 6px; }
  .fact-row { padding: 4px 0; }
}
@media (max-width: 900px) {
  .model-metrics { display: none; }
  .brand { min-width: 0; }
  .main-grid { grid-template-columns: 0 minmax(300px, 1fr) 280px; }
  .left-panel { display: none; }
  body.right-collapsed .main-grid { grid-template-columns: 0 minmax(300px, 1fr) 0; }
  .bottom-dock { grid-template-columns: 1fr 1.4fr; }
  .output-panel { display: none; }
  .shell-control, .toolbar-divider { display: none; }
}