/* The workshop occupies one viewport; supporting material uses paged dialogs. */
html,body { height:100%; margin:0; overflow:hidden; }
[hidden] { display:none!important; }
#app { height:100dvh; display:grid; grid-template-rows:64px minmax(0,1fr); }
.topnav { height:64px; min-height:0; padding:10px 24px; gap:16px; flex-wrap:nowrap; }
.tabs a { padding:8px 15px; font-size:13px; white-space:nowrap; }
.lang button { padding:8px 10px; }.fullscreen { font-size:12px; padding:8px; }
.gateway-layout { width:100%; max-width:1800px; height:100%; min-height:0; padding:18px 24px; display:grid; align-items:stretch; grid-template-columns:174px minmax(0,1fr) 304px; grid-template-rows:52px minmax(0,1fr); grid-template-areas:'sidebar heading heading' 'sidebar workspace narrative'; gap:16px 24px; }
.workshop-heading { grid-area:heading; display:flex; justify-content:space-between; align-items:center; min-width:0; }
.workshop-heading h1 { margin:4px 0 0; font-size:30px; line-height:1.08; letter-spacing:-.025em; }
.kicker { font-size:10px; letter-spacing:.13em; margin:0; }
.chapter-picker,.mobile-views { display:none; }
.sidebar { grid-area:sidebar; position:static; min-width:0; min-height:0; display:flex; flex-direction:column; gap:16px; }
.transport { display:grid; gap:8px; }.controls { gap:6px; }.controls .btn { font-size:13px; padding:12px 8px; min-height:40px; }
.secondary-controls button,.mode button,.restart-button { padding:8px 6px; background:transparent; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.timeline { margin:0; }.time { font-size:10px; }.chips { gap:6px; }
.chip { min-height:43px; padding:10px 8px; font-size:13px; gap:7px; }
.sidebar-options { display:grid; gap:10px; }.mode { display:grid; gap:5px; }
.speed { font-size:11px; }.shortcut { font-size:10px; margin:0; }
.gateway-layout>.workspace { grid-area:workspace; display:flex; flex-direction:column; min-width:0; min-height:0; gap:9px; }
.stage { flex:1; min-height:180px; aspect-ratio:auto; display:flex; flex-direction:column; border-radius:18px; }
.stage-head { flex:none; padding:15px 18px 0; font-size:10px; }.stage-head strong { font-size:11px; }
.diagram { height:auto; flex:1; min-height:0; margin:3px 8px; }
.stage-event { flex:none; margin:0 16px 12px; padding-top:10px; font-size:12px; min-height:29px; }
.legend { flex:none; gap:7px 12px; margin:0 2px; font-size:10px; }
.legend .fixture-label { margin-left:auto; font-size:9px; color:var(--muted); }
.metrics { margin:0; gap:7px; }.metric { padding:10px 9px; }.metric dt { font-size:10px; margin-bottom:3px; }.metric dd { font-size:clamp(16px,1.55vw,23px); }
.request-cards { margin:0; gap:7px; flex:none; }.request-card { padding:9px 10px; }
.request-card strong { font-size:13px; margin:4px 0 0; }.request-card small { display:none; }.request-card .category { display:block; font-size:9px; }
.detail-toolbar { display:flex; flex-wrap:wrap; gap:6px; flex:none; }
.detail-toolbar button,.try-button,.selected-request button,.reset-experiment,#challenge-feedback button { background:transparent; border:1px solid var(--border); padding:7px 10px; border-radius:8px; color:var(--olive); font-size:12px; }
.detail-toolbar button:hover,.try-button:hover { background:var(--sage); }
.gateway-layout>.narrative { grid-area:narrative; display:flex; flex-direction:column; min-width:0; min-height:0; padding-left:4px; }
.inspector-tabs,.mobile-views { gap:5px; border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px; }
.inspector-tabs { display:flex; }.inspector-tabs button,.mobile-views button { flex:1; background:transparent; border:1px solid var(--border); border-radius:8px; padding:9px; font-size:13px; }
.inspector-tabs button[aria-pressed=true],.mobile-views button[aria-pressed=true] { background:var(--sage); border-color:var(--olive); }
.lesson-view,.experiment-view { min-height:0; overflow:auto; scrollbar-width:thin; }
.gateway-layout[data-inspector=lesson] .experiment-view,.gateway-layout[data-inspector=experiment] .lesson-view { display:none; }
.chapter-copy { border:0; padding:0; }.chapter-copy .question { margin:0 0 15px; font:11px/1.5 var(--f-mono); color:var(--olive); }
.chapter-copy h2 { font-size:28px; line-height:1.1; margin:0 0 18px; }.chapter-copy p { font-size:15px; line-height:1.55; }
.insight { margin:20px 0; }.checkpoint { font-size:12px; margin:13px 0; }.try-button { margin-top:6px; }
.experiment-view h2 { font-size:21px; margin:0 0 13px; }
.policy-panel { grid-template-columns:minmax(0,1fr); gap:13px; border:0; margin:0; padding:0; }
.run-button { margin-top:6px; }.selected-request { border-top:1px solid var(--border); padding-top:14px; margin-top:16px; font-size:13px; }
.selected-request strong { font-size:14px; }.selected-request p { margin:5px 0 10px; color:var(--muted); }
.mission { padding:12px; background:var(--sage); border:0; margin:12px 0; }.mission h3 { font:600 10px var(--f-mono); margin:0 0 5px; }.mission p { font-size:14px; margin:0 0 8px; }.mission small { font-size:11px; color:var(--muted); }
.batch-progress { margin:0; font-size:12px; }.batch-progress progress { height:8px; }.workload-mix { margin:0; font-size:11px; color:var(--muted); }.reset-experiment { margin-top:12px; }
#challenge-feedback { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px; margin-top:10px; }
#detail-dialog { position:fixed; inset:0; padding:0; border:1px solid var(--border); border-radius:18px; background:var(--paper); color:var(--text); box-shadow:0 25px 100px #14241555; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); }
#detail-dialog[open] { display:flex; flex-direction:column; }
#detail-dialog::backdrop { background:#12201599; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--border); flex:none; }
.dialog-heading h2 { font-size:22px; line-height:1.2; margin:0; }
.dialog-heading button,.dialog-footer button { background:transparent; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; }
.dialog-body { padding:20px 22px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.dialog-footer { flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 22px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.detail-panel article>p { line-height:1.65; }.detail-panel h3 { margin-top:0; }
.decision { margin:0 0 14px; font-size:13px; }.trace-box { border:0; margin:0; padding:0; }.trace-list { max-height:none; overflow:visible; font-size:13px; }.trace-list li { padding:9px 3px; }.trace-list time { font-size:11px; }
.model-details { display:block; margin:0; }.model-details>div { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; padding:16px; }
.model-details h4 { font-size:24px; margin:0 0 8px; }.model-details p { margin:5px 0; font-size:13px; }.model-details dl { grid-row:1/5; grid-column:2; align-content:center; gap:10px; font-size:13px; }
.details { border:0; margin:0; padding:0; }.details summary { display:none; }.details>p { font-size:12px; color:var(--muted); }
.lesson-comparison { margin:0; padding:0; border:0; }.lesson-comparison h3 { font-size:20px; margin-bottom:18px; }.price-rows { gap:14px; }.price-row { grid-template-columns:100px 1fr 95px; font-size:13px; }.mini-comparison { font-size:13px; }.mini-comparison strong { font-size:24px; }
.comparison-scroll { margin:0; border:0; overflow:visible; }.comparison-table { font-size:13px; }.comparison-table th { font-size:12px; }.comparison-table button { font-size:13px; }.comparison-note { font-size:12px; }
.challenge-result { border:0; background:transparent; padding:0; margin:0; }.challenge-result h3 { font-size:22px; }.challenge-result p,.challenge-result li { font-size:14px; }.challenge-result li { margin-bottom:10px; }.challenge-result .final-insight { font-size:23px; }
.batch-extra { margin:0 0 18px; }
/* The workload breakdown also appears in Experiment; keep the small-phone diagram spacious. */
@media(max-width:800px) and (max-height:700px) { main.gateway-layout { grid-template-rows:38px 28px minmax(0,1fr) 94px; }.workload-mix { display:none; } }
@media(max-height:740px) and (min-width:801px) { .diagram .model-node { min-height:42px; padding:5px; }.model-node small { display:none; }.model-node strong { font-size:13px; }.diagram .gateway-node { padding:10px 4px; }.diagram .fallback-node { padding:7px 4px; } }
@media(max-height:740px) { .try-button { display:none; }.lesson-view .checkpoint { display:none; }.mission { padding:9px; }.mission p { font-size:12px; }.mission small { font-size:10px; } }
@media(max-height:740px) and (min-width:801px) { .gateway-layout .workshop-heading h1 { font-size:23px; }.gateway-layout>.sidebar { gap:8px; }.sidebar .transport { gap:5px; }.sidebar .chips { gap:4px; }.sidebar .mode button { padding-block:6px; } }
@media(max-width:360px) { .gateway-layout .metric dd { font-size:12px; }.gateway-layout .metric:last-child dd { white-space:normal; } }
@media(max-height:800px) { .shortcut { display:none; } }
@media(max-height:740px) and (min-width:801px) { .experiment-view .policy-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.experiment-view .policy-switch { gap:4px; font-size:11px; }.experiment-view .policy-switch small { font-size:7px; }.experiment-view .field { font-size:10px; }.experiment-view .field select { font-size:11px; }.experiment-view .run-button { font-size:12px; padding:10px; } }
@media(min-width:1600px) and (min-height:850px) { .gateway-layout { grid-template-columns:200px minmax(0,1fr) 360px; gap:22px 30px; padding:24px 32px; }.chapter-copy h2 { font-size:34px; }.chapter-copy p { font-size:17px; }.diagram { height:auto; }.stage { min-height:180px; } }
@media(max-width:1200px) { .gateway-layout { grid-template-columns:144px minmax(0,1fr) 260px; gap:12px 16px; padding:14px 16px; }.fixture-label { display:none; }.workshop-heading h1 { font-size:26px; }.chip { font-size:12px; padding:9px 6px; }.chapter-copy h2 { font-size:24px; }.chapter-copy p { font-size:14px; }.insight { font-size:13px; padding:12px; }.model-node { grid-template-columns:22px 1fr; padding:7px; gap:0 5px; min-height:60px; }.model-letter { width:22px; font-size:12px; }.model-node strong { font-size:14px; }.model-node small,.model-state { font-size:8px; }.gateway-node strong { font-size:13px; }.gateway-node b,.gateway-node small { font-size:8px; }.app-node { font-size:11px; }.fallback-node { font-size:10px; }.metric { padding:9px 7px; }.metric dd { font-size:17px; }.request-card { padding:8px; }.request-card strong { font-size:11px; }.request-card .category { font-size:8px; }.detail-toolbar button { font-size:10px; padding:7px; } }
@media(max-height:740px) and (min-width:801px) { #app { grid-template-rows:56px minmax(0,1fr); }.topnav { height:56px; }.gateway-layout { padding-block:12px; grid-template-rows:42px minmax(0,1fr); gap:10px 18px; }.sidebar { gap:12px; }.chip { min-height:34px; padding-block:7px; }.mode { display:flex; }.mode button { flex:1; font-size:10px; }.sidebar-options { gap:6px; }.shortcut { display:none; }.workshop-heading h1 { font-size:26px; }.kicker { font-size:9px; }.workspace { gap:6px; }.metric { padding-block:7px; }.stage-head { padding-top:10px; }.stage-event { margin-bottom:9px; padding-top:7px; }.chapter-copy .question { margin-bottom:10px; }.chapter-copy h2 { font-size:23px; margin-bottom:12px; }.chapter-copy p,.result-explanation { font-size:13px; }.insight { font-size:12px; margin:12px 0; padding:10px; }.checkpoint { font-size:11px; }.policy-panel { gap:8px; }.field select { padding:7px; }.policy-switch { font-size:12px; }.selected-request { padding-top:10px; margin-top:10px; }.selected-request p { font-size:12px; } }
@media(max-width:800px) {
  #app { grid-template-rows:84px minmax(0,1fr); }.topnav { height:84px; min-height:0; flex-wrap:wrap; padding:7px 12px; gap:5px; }.topnav__brand { font-size:14px; }.workshop-tools { margin-left:auto; gap:5px; }.lang button { padding:7px 9px; font-size:11px; }.fullscreen { font-size:0; padding:5px 8px; }.fullscreen:after { content:'↗'; font-size:16px; }.tabs { order:3; flex-basis:100%; justify-content:center; margin:0; gap:5px; }.tabs a { padding:5px 14px; font-size:11px; }
  .gateway-layout { padding:8px 12px 10px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:38px 32px minmax(0,1fr) 96px; grid-template-areas:'heading' 'views' 'workspace' 'sidebar'; gap:7px; }
  .workshop-heading h1 { font-size:18px; margin:0; }.workshop-heading .kicker { display:none; }.workshop-heading { gap:10px; }.chapter-picker { display:block; max-width:47%; }.chapter-picker select { font-size:11px; width:100%; padding:6px; border:1px solid var(--border); border-radius:7px; background:transparent; color:var(--olive); }
  .mobile-views { grid-area:views; display:flex; margin:0; padding:0; border:0; }.mobile-views button { padding:5px; font-size:12px; }
  .sidebar { display:grid; grid-template-columns:1fr; gap:5px; border-top:1px solid var(--border); padding-top:7px; }.sidebar .chapters,.shortcut { display:none; }.sidebar .transport { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3px 8px; }.transport .controls { grid-column:1; }.transport .secondary-controls { grid-column:2; }.timeline-wrap { grid-column:1/-1; }
  .controls .btn { min-height:30px; padding:7px 5px; font-size:12px; }.secondary-controls button { padding:6px 4px; font-size:11px; }.timeline { height:12px; display:block; }.time { font-size:8px; margin-top:2px; }.sidebar-options { display:flex; gap:6px; flex-wrap:nowrap; align-items:center; justify-content:space-between; }.mode { display:flex; gap:3px; }.mode button { padding:4px 5px; font-size:9px; white-space:nowrap; }.speed>span { display:none; }.speed select { padding:3px; font-size:10px; }.restart-button { font-size:9px; padding:4px 5px; }
  .gateway-layout>.workspace { gap:6px; }.stage { min-height:150px; border-radius:13px; }.stage-head { padding:9px 11px 0; font-size:8px; }.stage-head strong { font-size:9px; }.status-badge { padding:4px 7px; }.diagram { height:auto; margin:2px; }.node { border-radius:7px; padding:8px 4px; }.app-node { font-size:10px; }.app-node>span { font-size:18px; margin-bottom:2px; }.gateway-node { padding:11px 3px; }.gateway-node strong { font-size:12px; margin:4px 0; }.gateway-node b { font-size:7px; letter-spacing:0; }.gateway-node small { font-size:7px; }
  .model-node { grid-template-columns:18px 1fr; padding:5px 4px; gap:0 4px; min-height:42px; }.model-letter { width:18px; height:23px; font-size:10px; border-radius:5px; }.model-node strong { font-size:12px; }.model-node small { display:none; }.model-state { font-size:8px; margin-top:3px; }.fallback-node { font-size:9px; padding:6px 3px; }.fallback-node span { font-size:6px; margin-top:2px; }
  .stage-event { font-size:10px; margin:0 10px 8px; padding-top:7px; min-height:23px; gap:7px; }.stage-event code { font-size:8px; }.legend { font-size:8px; gap:8px; }.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }.metric { padding:6px; border-radius:7px; }.metric dt { font-size:8px; line-height:1.1; min-height:18px; }.metric dd { font-size:13px; }
  .request-cards { gap:4px; }.request-card { padding:6px; border-radius:7px; }.request-card strong { font-size:10px; margin:0; }.request-card .category { display:none; }.detail-toolbar { gap:4px; }.detail-toolbar button { padding:5px 7px; font-size:10px; }.workload-mix,.batch-progress { font-size:10px; }
  .gateway-layout>.narrative { grid-area:workspace; padding:0; display:none; }.inspector-tabs { display:none; }.gateway-layout:not([data-view=watch])>.workspace { display:none; }.gateway-layout:not([data-view=watch])>.narrative { display:flex; }
  .chapter-copy .question { font-size:10px; margin:5px 0 12px; }.chapter-copy h2 { font-size:26px; margin-bottom:12px; }.chapter-copy p { font-size:14px; }.insight { margin:14px 0; font-size:13px; padding:12px; }.checkpoint { font-size:11px; }.result-explanation { font-size:13px; margin:10px 0; }.try-button { font-size:12px; }
  .experiment-view h2 { font-size:20px; margin:5px 0 12px; }.policy-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }.policy-switch { font-size:12px; gap:5px; }.policy-switch small { font-size:7px; }.field { font-size:11px; }.field select { padding:8px 6px; font-size:12px; }.run-button { grid-column:1/-1; font-size:14px; padding:12px; margin:0; }.selected-request { padding-top:10px; margin-top:12px; font-size:12px; }.selected-request p { font-size:12px; }.selected-request button { font-size:11px; }.mission { margin:10px 0; padding:10px; }.mission p { font-size:13px; }.mission small { font-size:10px; }
  #detail-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:12px; }.dialog-heading { padding:13px; gap:10px; }.dialog-heading h2 { font-size:18px; }.dialog-heading button { font-size:12px; padding:6px 9px; white-space:nowrap; }.dialog-body { padding:14px; }.dialog-footer { padding:10px 14px; }.detail-panel article>p { font-size:14px; }
  .model-details>div { grid-template-columns:1fr; padding:14px; }.model-details dl { grid-row:auto; grid-column:auto; margin-top:14px; }.model-details h4 { font-size:22px; }.model-details p { font-size:12px; }.decision { padding:10px; font-size:12px; }.trace-list { font-size:12px; }.trace-list li { grid-template-columns:60px 1fr; padding:8px 0; gap:7px; }.trace-list time { font-size:9px; }.trace-box h3 { font-size:11px; }
  .price-row { grid-template-columns:70px 1fr 90px; gap:8px; font-size:12px; }.mini-comparison { gap:16px; font-size:11px; }.mini-comparison strong { font-size:18px; }.comparison-table { font-size:10px; }.comparison-table th,.comparison-table td { padding:8px 3px; }.comparison-table th { font-size:9px; }.comparison-table button { font-size:10px; }.comparison-note { font-size:11px; }.challenge-result h3 { font-size:19px; }.challenge-result p,.challenge-result li { font-size:13px; }.batch-extra { font-size:11px; gap:5px 12px; }
}
@media(max-width:800px) and (max-height:700px) { .gateway-layout { grid-template-rows:32px 28px minmax(0,1fr) 94px; padding-block:5px; gap:5px; }.workshop-heading h1 { font-size:16px; }.workspace { gap:4px; }.stage-head { padding-top:7px; }.request-card { padding:5px; }.stage { min-height:125px; }.model-node { min-height:34px; }.model-state { font-size:7px; }.model-letter { height:21px; }.node { padding-block:5px; }.gateway-node strong { font-size:10px; }.gateway-node small,.app-node>span,.fallback-node span { display:none; }.chapter-copy h2 { font-size:22px; }.chapter-copy .question { margin-bottom:8px; }.chapter-copy p { font-size:13px; line-height:1.45; }.insight { margin:10px 0; font-size:12px; padding:9px; }.checkpoint { display:none; }.policy-panel { gap:8px; }.selected-request { margin-top:8px; }.selected-request p { margin:4px 0 6px; } }