/* Visual ownership for the learner experience. workflow.css owns tool layout;
   this file owns its visual roles. Host UI and editor/terminal typography stay independent. */
:root {
  --learner-space-1:4px;
  --learner-space-2:8px;
  --learner-space-3:12px;
  --learner-space-4:16px;
  --learner-space-6:24px;
  --learner-space-8:32px;
  --learner-space-12:48px;
  --learner-radius-control:999px;
  --learner-radius-field:16px;
  --learner-radius-inset:20px;
  --learner-radius-surface:28px;
  --learner-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --learner-canvas:#f3f4f6;
  --learner-surface:#fff;
  --learner-inset:#f5f6f8;
  --learner-hover:#e9ebef;
  --learner-ink:#191b20;
  --learner-muted:#626773;
  --learner-line:#dce0e6;
  --learner-action:#c43b08;
  --learner-action-hover:#a93105;
  --learner-on-action:#fff;
  --learner-strong:#202329;
  --learner-on-strong:#fff;
  --learner-shadow-surface:0 2px 8px #18223a04,0 0 0 1px #18223a05;
  --learner-shadow-control:0 1px 2px #18223a0a,0 3px 8px #18223a05;
  --learner-shadow-overlay:0 16px 60px #111b3326,0 0 0 1px #18223a0a;
  --learner-duration:160ms;
}
:root[data-mode=dark] {
  --learner-canvas:#15171b;
  --learner-surface:#202329;
  --learner-inset:#292d35;
  --learner-hover:#343944;
  --learner-ink:#f2f3f5;
  --learner-muted:#b0b6c2;
  --learner-line:#414753;
  --learner-action:#f2a17f;
  --learner-action-hover:#ffb99b;
  --learner-on-action:#27170f;
  --learner-strong:#edf0f6;
  --learner-on-strong:#191b20;
  --learner-shadow-surface:0 2px 8px #0000000a,0 0 0 1px #ffffff08;
  --learner-shadow-control:0 1px 2px #0002,0 3px 8px #0001;
  --learner-shadow-overlay:0 16px 60px #0007,0 0 0 1px #ffffff10;
}
:is(#studio,#join,#hub[data-surface=learner]) {
  font-family:var(--learner-font);
  color:var(--learner-ink);
  background:var(--learner-canvas);
}
:where(#studio,#join,#hub[data-surface=learner]) :is(button,.button) {
  border-radius:var(--learner-radius-control);
  border-color:transparent;
  background:var(--learner-inset);
  color:var(--learner-ink);
  min-height:40px;
  padding:9px 16px;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  box-shadow:none;
  transition:background var(--learner-duration),box-shadow var(--learner-duration),color var(--learner-duration);
}
:where(#studio,#join,#hub[data-surface=learner]) :is(button,.button):hover {
  border-color:transparent;
  background:var(--learner-hover);
}
:where(#studio,#join,#hub[data-surface=learner]) :is(button,.button).primary {
  background:var(--learner-action);
  color:var(--learner-on-action);
  border-color:transparent;
  box-shadow:var(--learner-shadow-control);
}
:where(#studio,#join,#hub[data-surface=learner]) :is(button,.button).primary:hover { background:var(--learner-action-hover); }
:where(#studio,#join,#hub[data-surface=learner]) :is(button,.button):active:not(:disabled) { transform:none; box-shadow:none; }
:where(#studio,#join,#hub[data-surface=learner]) :is(button,a,summary):focus-visible { outline:2px solid var(--learner-action); outline-offset:3px; }
:where(#studio,#join,#hub[data-surface=learner]) :is(input:not([type=checkbox]),textarea) {
  border-radius:var(--learner-radius-field);
  border-color:var(--learner-line);
  background:var(--learner-surface);
  color:var(--learner-ink);
}
:where(#studio,#join,#hub[data-surface=learner]) .eyebrow { color:var(--learner-muted); font-size:13px; font-weight:550; letter-spacing:.02em; }
#studio .topbar { background:var(--learner-canvas); border-bottom:0; padding-inline:24px; backdrop-filter:none; }
#studio .host-status { color:var(--learner-muted); }
#studio .actions { gap:8px; }
#studio .actions :is(button,.button) { background:var(--learner-surface); box-shadow:var(--learner-shadow-control); }
#studio .sidebar { background:var(--learner-canvas); border:0; padding-top:24px; }
#studio .sidebar button { border:0; border-radius:var(--learner-radius-field); background:transparent; color:var(--learner-muted); padding:12px; min-height:48px; }
#studio .sidebar button:hover { background:var(--learner-hover); color:var(--learner-ink); }
#studio .sidebar nav button[aria-current=page] { background:var(--learner-surface); color:var(--learner-ink); box-shadow:var(--learner-shadow-control); }
#studio .sidebar-bottom { border:0; gap:8px; }
#studio .workspace { background:var(--learner-canvas); padding:0 24px 20px 12px; }
#studio .workspace-heading { min-height:88px; padding:16px 0 20px; gap:16px; }
#studio .workspace-heading h1 { font-size:18px; font-weight:600; letter-spacing:-.025em; }
#studio .build-identity { color:var(--learner-muted); font-size:12px; }
#studio .build-actions { gap:8px; }
#studio .build-actions button { min-height:38px; padding:8px 14px; font-size:13px; }
#studio :is(.workspace-surface,.agent-panel,.instructions-panel) {
  border:0;
  border-radius:var(--learner-radius-surface);
  background:var(--learner-surface);
  box-shadow:var(--learner-shadow-surface);
}
#studio .instructions-content { padding:40px max(var(--learner-space-8),calc((100% - 1040px)/2)); color:var(--learner-ink); }
.instruction-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--learner-space-12); }
.instruction-intro { padding-top:12px; }
#studio .instruction-intro .eyebrow { margin:0 0 20px; color:var(--text-color-kumo-brand); }
#studio .instructions-content h2 { margin:0 0 24px; font-size:clamp(32px,3.5vw,44px); font-weight:650; letter-spacing:-.045em; line-height:1.08; }
#studio #instructionsObjective { margin:0; max-width:40ch; font-size:18px; line-height:1.7; color:var(--learner-muted); }
.instruction-start { padding:var(--learner-space-6); border-radius:var(--learner-radius-inset); background:var(--learner-inset); }
#studio .instruction-start h3 { margin:0 0 20px; font-size:17px; letter-spacing:-.02em; font-weight:600; }
#studio .build-path { display:grid; gap:14px; margin:0 0 24px; padding:0; list-style:none; counter-reset:build-step; }
#studio .build-path li { position:relative; margin:0; padding:0 0 0 36px; min-height:24px; font-size:14px; line-height:1.6; color:var(--learner-muted); counter-increment:build-step; }
#studio .build-path li::before { content:counter(build-step) / ""; position:absolute; left:0; top:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--learner-ink); background:var(--learner-surface); font-size:12px; font-weight:600; }
#studio #instructionPrompt { width:100%; white-space:normal; min-height:44px; text-align:center; }
.instruction-mission { margin-top:var(--learner-space-12); padding-top:var(--learner-space-8); border-top:1px solid var(--learner-line); }
#studio .instruction-mission > h3 { margin:0 0 24px; font-size:24px; font-weight:600; letter-spacing:-.03em; }
#studio #inlineMission { padding:0; font-size:15px; line-height:1.8; max-width:80ch; }
#studio #inlineMission :is(h3,h4) { font-weight:600; letter-spacing:-.02em; }
#studio #inlineMission :is(pre,blockquote) { border:0; border-radius:var(--learner-radius-field); background:var(--learner-inset); }
#studio :is(.panel-title,.file-toolbar,.app-address) { border-color:var(--learner-line); background:transparent; }
#studio .panel-title { padding-inline:24px; }
#studio .panel-name b { font-size:14px; font-weight:600; }
#studio .service-badge { border:0; border-radius:var(--learner-radius-control); background:var(--learner-inset); color:var(--learner-muted); padding:5px 10px; }
#studio .conversation { padding:28px max(28px,calc((100% - 760px)/2)); }
#studio .welcome { padding:12px 0 28px; }
#studio .welcome h2 { font-size:32px; font-weight:600; letter-spacing:-.04em; line-height:1.15; }
#studio .welcome p { line-height:1.7; color:var(--learner-muted); max-width:58ch; }
#studio .welcome .welcome-icon { border:0; border-radius:16px; width:48px; height:48px; box-shadow:none; background:var(--learner-inset); color:var(--text-color-kumo-brand); }
#studio .composer { width:calc(100% - 48px); max-width:760px; margin:0 auto var(--learner-space-6); padding:var(--learner-space-4); border:1px solid var(--learner-line); border-radius:24px; background:var(--learner-inset); box-shadow:none; }
#studio .composer:focus-within { border-color:var(--learner-action); box-shadow:0 0 0 3px color-mix(in srgb,var(--learner-action) 12%,transparent); }
#studio .composer textarea { background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; min-height:56px; max-height:140px; }
#studio .composer textarea:focus { box-shadow:none; }
#studio .reasoning { color:var(--learner-muted); }
#studio .message.user { border:0; border-radius:20px; padding:16px 20px; background:var(--learner-inset); box-shadow:none; }
#studio :is(.message.tool,.message.command) { border:0; border-radius:12px; background:var(--learner-inset); }
#studio :is(.agent-progress,.agent-continuation) { background:var(--learner-inset); border-color:var(--learner-line); }
#studio .file-toolbar { padding-inline:16px; }
#studio :is(.file-toolbar,.terminal-title) button { background:transparent; box-shadow:none; }
#studio :is(.file-toolbar,.terminal-title) button:hover { background:var(--learner-hover); }
#studio .file-toolbar #saveFile { background:var(--learner-inset); padding-inline:16px; }
#studio #fileTree { padding:12px 8px; background:var(--learner-inset); border-right:0; }
#studio #fileTree button { border-radius:8px; background:transparent; min-height:32px; padding:5px 10px; text-align:left; justify-content:flex-start; font-weight:400; }
#studio #fileTree button.active { background:var(--learner-surface); color:var(--learner-ink); box-shadow:var(--learner-shadow-control); }
#studio :is(.editor-status,.preview-footer) { background:transparent; border-color:var(--learner-line); color:var(--learner-muted); padding-inline:20px; }
#studio :is(.editor-status,.preview-footer) button { background:transparent; padding:4px 8px; min-height:32px; }
#studio .terminal-title { padding-inline:20px; }
#studio .terminal-feedback { color:var(--learner-muted); background:transparent; border-color:var(--learner-line); }
#studio .preview-empty .large-symbol { width:64px; height:64px; border:0; border-radius:20px; background:var(--learner-inset); box-shadow:none; }
#studio .preview-empty h2 { font-size:32px; letter-spacing:-.04em; font-weight:600; }
#studio .lab-cover { background:var(--learner-canvas); backdrop-filter:none; border-radius:var(--learner-radius-surface); }
#studio .lab-cover-card { border:0; border-radius:var(--learner-radius-surface); background:var(--learner-surface); box-shadow:var(--learner-shadow-surface); }
#studio > #toast:not([hidden]) { background:var(--learner-surface); box-shadow:none; border-color:var(--learner-line); }
.rail-tooltip { background:var(--learner-surface); color:var(--learner-ink); border:0; border-radius:12px; box-shadow:var(--learner-shadow-overlay); }
/* Apply the established lab surface/control roles to the rest of the same journey. */
#hub[data-surface=learner] .portal-header, #join .start-header {
  min-height:76px; border:0; background:var(--learner-canvas); padding-inline:32px; backdrop-filter:none;
}
#hub[data-surface=learner] .portal-header nav button { padding:10px 16px; background:transparent; color:var(--learner-muted); }
#hub[data-surface=learner] .portal-header nav button[aria-current=page] { background:var(--learner-surface); color:var(--learner-ink); box-shadow:var(--learner-shadow-control); }
#hub[data-surface=learner] .portal-utilities :is(button,.button), #join .start-utilities :is(button,.button) { background:var(--learner-surface); box-shadow:var(--learner-shadow-control); }
#hub[data-surface=learner] .portal-main { max-width:1320px; padding:48px 40px 64px; }
#hub[data-surface=learner] .portal-intro { max-width:760px; margin-bottom:40px; }
#hub[data-surface=learner] .portal-main h1 { margin:16px 0 24px; font-size:clamp(32px,3.5vw,48px); line-height:1.1; font-weight:650; letter-spacing:-.045em; }
#hub[data-surface=learner] :is(.portal-intro > p,.brief-lead) { font-size:18px; line-height:1.7; color:var(--learner-muted); }
#hub[data-surface=learner] .portal-main h2 { color:var(--learner-ink); font-weight:600; }
#hub[data-surface=learner] .search-label { border:0; border-radius:var(--learner-radius-control); background:var(--learner-surface); padding-inline:20px; box-shadow:var(--learner-shadow-surface); }
#hub[data-surface=learner] .search-label input { border:0; background:transparent; border-radius:0; box-shadow:none; padding-block:14px; }
#hub[data-surface=learner] .search-label:focus-within { outline:2px solid var(--learner-action); outline-offset:3px; }
#hub[data-surface=learner] .lab-grid { gap:24px; }
#hub[data-surface=learner] :is(.lab-card,.brief-start,.saved-build,.portal-empty) { border:0; border-radius:var(--learner-radius-surface); background:var(--learner-surface); box-shadow:var(--learner-shadow-surface); }
#hub[data-surface=learner] .lab-card { padding:32px; transition:box-shadow var(--learner-duration); }
#hub[data-surface=learner] .lab-card:hover { transform:none; box-shadow:0 6px 24px #18223a0c,0 0 0 1px var(--learner-line); }
#hub[data-surface=learner] .card-category { font-size:13px; color:var(--learner-muted); }
#hub[data-surface=learner] .lab-card h2 { font-size:24px; line-height:1.25; letter-spacing:-.03em; margin:32px 0 16px; }
#hub[data-surface=learner] .lab-card p { line-height:1.65; margin-bottom:24px; color:var(--learner-muted); }
#hub[data-surface=learner] .lab-card > button { background:var(--learner-strong); color:var(--learner-on-strong); min-height:44px; padding-inline:20px; }
#hub[data-surface=learner] .lab-card > button:hover { opacity:.88; }
#hub[data-surface=learner] .product-tag { border:0; border-radius:var(--learner-radius-control); background:var(--learner-inset); color:var(--learner-muted); padding:5px 10px; font-size:12px; line-height:18px; }
#hub[data-surface=learner] .brief-layout { gap:48px; }
#hub[data-surface=learner] .brief-start { padding:32px; top:100px; }
#hub[data-surface=learner] .brief-start > button { min-height:44px; }
#hub[data-surface=learner] .example-result { border:0; border-radius:var(--learner-radius-inset); background:var(--learner-surface); padding:28px; }
#hub[data-surface=learner] .saved-build { padding:28px; gap:24px; }
#hub[data-surface=learner] .build-mark { background:var(--learner-inset); border:0; border-radius:16px; width:52px; height:52px; }
#hub[data-surface=learner] .saved-build > button { min-height:44px; background:var(--learner-strong); color:var(--learner-on-strong); }
#hub[data-surface=learner] .state-badge { border-radius:var(--learner-radius-control); background:var(--learner-inset); color:var(--learner-muted); padding:4px 10px; }
#hub[data-surface=learner] .portal-empty { padding:48px 24px; }
#join .start-atmosphere { display:none; }
#join .start-header { max-width:none; }
#join .start-main { background:transparent; }
#join .start-hero { gap:clamp(32px,5vw,80px); }
#join .join-intro h1 { font-family:var(--learner-font); font-weight:650; letter-spacing:-.055em; line-height:1.05; }
#join .join-intro > p, #join .start-section-lead { color:var(--learner-muted); }
#join .join-card { background:var(--learner-surface); border:0; border-radius:32px; box-shadow:var(--learner-shadow-surface); }
#join .join-products { border:0; background:var(--learner-inset); border-radius:0 0 32px 32px; }
#join .join-symbol { color:var(--text-color-kumo-brand); }
#join :is(.start-workspace,.start-possibilities article) { border:0; border-radius:var(--learner-radius-surface); background:var(--learner-surface); box-shadow:var(--learner-shadow-surface); }
#join .start-workspace-bar { background:var(--learner-inset); border:0; }
#join .start-possibilities article > [data-icon] { border:0; border-radius:16px; background:var(--learner-inset); }
#join .start-lab-card { border-radius:var(--learner-radius-inset); background:var(--learner-surface); }
#join #exploreLabs { border-radius:var(--learner-radius-control); padding-inline:24px; background:var(--learner-strong); color:var(--learner-on-strong); }
/* Opaque overlays retain readable contrast on all content, with no blur cost. */
:is(#workspaceMenu,#labDialog,#keepDialog,#toolsDialog,#helpDialog,#finishDialog,#settingsDialog) { font-family:var(--learner-font); background:var(--learner-surface); color:var(--learner-ink); border:0; border-radius:var(--learner-radius-surface); box-shadow:var(--learner-shadow-overlay); }
:is(#workspaceMenu,#labDialog,#keepDialog,#toolsDialog,#helpDialog,#finishDialog,#settingsDialog) :is(button,.button) { border-radius:var(--learner-radius-control); background:var(--learner-inset); border-color:transparent; color:var(--learner-ink); }
:is(#workspaceMenu,#labDialog,#keepDialog,#toolsDialog,#helpDialog,#finishDialog,#settingsDialog) .primary { background:var(--learner-action); color:var(--learner-on-action); }
:is(#workspaceMenu,#labDialog,#keepDialog,#toolsDialog,#helpDialog,#finishDialog,#settingsDialog) .close { background:var(--learner-inset); width:40px; height:40px; border-radius:50%; }
#workspaceMenu .workspace-menu-header { background:var(--learner-surface); }
#workspaceMenu .drawer-nav :is(button,a) { border-radius:16px; background:transparent; }
#workspaceMenu .drawer-nav :is(button,a):hover { background:var(--learner-inset); }
.lab-menu { background:var(--learner-surface); color:var(--learner-ink); border:0; border-radius:20px; padding:8px; box-shadow:var(--learner-shadow-overlay); }
.lab-menu :is(button,a) { color:var(--learner-ink); border-radius:14px; }
.lab-menu :is(button,a):hover { background:var(--learner-inset); }
@media(max-width:1100px) {
  .instruction-overview { gap:24px; }
}
@media(max-width:1000px) {
  #studio .workspace { padding-inline:12px; }
  #studio .workspace-heading { min-height:100px; }
}
@media(max-width:760px) {
  #hub[data-surface=learner] .portal-header, #join .start-header { padding-inline:16px; min-height:64px; }
  #hub[data-surface=learner] .portal-header nav button { padding-inline:12px; }
  #hub[data-surface=learner] .portal-main { padding:28px 16px 40px; }
  #hub[data-surface=learner] .portal-intro { margin-bottom:28px; }
  #hub[data-surface=learner] .portal-main h1 { font-size:32px; }
  #hub[data-surface=learner] :is(.portal-intro > p,.brief-lead) { font-size:16px; }
  #hub[data-surface=learner] :is(.lab-card,.brief-start,.saved-build) { padding:24px; border-radius:24px; }
  #hub[data-surface=learner] .lab-card h2 { font-size:22px; margin-top:28px; }
  #hub[data-surface=learner] .brief-layout { gap:28px; }
  #join .join-card { border-radius:28px; }
  #join .join-products { border-radius:0 0 28px 28px; }
  #workspaceMenu { border-radius:0 28px 28px 0; }
  #studio .topbar { padding-inline:12px; }
  #studio .mobile-lab-name { color:var(--learner-muted); }
  #studio #workspaceMenuButton { border-radius:50%; width:44px; min-width:44px; padding:0; background:var(--learner-surface); box-shadow:var(--learner-shadow-control); }
  #studio .sidebar { padding:0 8px; background:var(--learner-canvas); }
  #studio .sidebar .workspace-nav { padding:4px; gap:0; border-radius:22px; background:var(--learner-hover); }
  #studio .sidebar nav button { border:0; border-radius:18px; width:100%; min-width:0; min-height:56px; padding:6px 1px; font-size:clamp(10px,2.8vw,11px); font-weight:500; }
  #studio .sidebar nav button[aria-current=page] { background:var(--learner-surface); box-shadow:var(--learner-shadow-control); }
  #studio .workspace { padding:8px; }
  #studio :is(.workspace-surface,.agent-panel,.instructions-panel) { border-radius:24px; }
  #studio .instructions-content { padding:24px; }
  .instruction-overview { grid-template-columns:minmax(0,1fr); gap:28px; }
  .instruction-intro { padding:0; }
  #studio .instruction-intro .eyebrow { margin-bottom:16px; }
  #studio .instructions-content h2 { font-size:32px; margin-bottom:20px; }
  #studio #instructionsObjective { font-size:16px; }
  .instruction-start { padding:20px; }
  .instruction-mission { margin-top:32px; padding-top:24px; }
  #studio .conversation { padding:24px; }
  #studio .welcome h2 { font-size:28px; }
  #studio .composer { width:calc(100% - 24px); margin:0 auto 12px; padding:12px; border-radius:20px; }
  #studio .panel-title { padding-inline:16px; }
  #studio .file-toolbar { padding-inline:8px; gap:4px; }
  #studio .file-toolbar button { padding:6px; min-height:44px; }
  #studio #fileTree button { min-height:44px; }
  #studio .terminal-title { padding:6px 12px; }
}
@media(max-height:560px) {
  #studio .workspace-heading { min-height:72px; padding-block:8px; }
  #studio .composer { padding:8px 12px; margin-bottom:8px; }
  #studio .composer textarea { min-height:40px; max-height:64px; }
  #studio .conversation { padding-block:12px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(#studio,#join,#hub[data-surface=learner]) *, .workspace-menu { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

#settingsDialog { width:min(440px,calc(100vw - 32px)); }
#settingsDialog h2 { padding-right:40px; }
#settingsProfile { color:var(--learner-muted); }
#themePreference { margin:24px 0 0; padding:0; border:0; min-width:0; }
#themePreference legend { margin-bottom:12px; font-weight:600; }
.appearance-options { display:flex; flex-wrap:wrap; gap:8px; }
#settingsDialog .appearance-options label { display:flex; align-items:center; gap:8px; flex:1; min-height:48px; padding:10px 12px; background:var(--learner-inset); border-radius:14px; cursor:pointer; }
#settingsDialog .appearance-options input { flex-shrink:0; width:18px; height:18px; margin:0; padding:0; accent-color:var(--learner-action); }
#settingsDialog .appearance-options input:focus-visible { outline:2px solid var(--learner-action); outline-offset:3px; }
#themeHelp { margin-bottom:0; color:var(--learner-muted); font-size:14px; line-height:1.6; }