:root {
  color-scheme: dark;
  --cosmos-base: #101014;
  --cosmos-line: rgba(184, 174, 255, .11);
  --ink: #ececf1;
  --muted: #a2a2ad;
  --muted-2: #74747f;
  --surface: rgba(31, 31, 35, .86);
  --surface-strong: #1b1b1f;
  --surface-soft: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.12);
  --accent: #8b7cff;
  --accent-rgb: 139, 124, 255;
  --success: #57d3a4;
  --warning: #f0ae6d;
  --danger: #ff7a86;
  --shadow: 0 30px 90px rgba(0,0,0,.42);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22, .78, .2, 1);
}

::view-transition-old(root) { animation-name: teamon-theme-fade-out; }
::view-transition-new(root) { animation-name: teamon-theme-fade-in; }

@keyframes teamon-theme-fade-out {
  to { opacity: 0; transform: scale(.995); }
}

@keyframes teamon-theme-fade-in {
  from { opacity: 0; transform: scale(1.005); }
}

html[data-color-mode="day"] .night-appearance-control { display: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden; background: var(--cosmos-base); color: var(--ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, textarea, input, select { outline: none; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .28);
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.eyebrow {
  margin: 0; color: #aaa1ff; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.muted { margin: 0; color: var(--muted); }
.error { min-height: 20px; margin: 0; color: var(--danger); font-size: 13px; }
.brand-mark {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #b5abff, var(--accent) 52%, #483d9f);
  box-shadow: 0 0 34px rgba(var(--accent-rgb), .22), inset 0 1px 1px rgba(255,255,255,.55);
}
.brand-mark svg { width: 72%; height: 72%; overflow: visible; }
.brand-mark ellipse {
  fill: none; stroke: rgba(255,255,255,.78); stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.brand-mark.small { width: 32px; height: 32px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup strong, .brand-lockup small, .brand-name strong, .brand-name small { display: block; }
.brand-lockup strong, .brand-name strong { font-size: 15px; letter-spacing: -.02em; }
.brand-lockup small, .brand-name small { color: #aaa1ff; font-size: 8px; font-weight: 800; letter-spacing: .22em; }

.boot-shell {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(circle at 58% 36%, rgba(var(--accent-rgb), .04), transparent 38%),
    radial-gradient(circle at 82% 76%, rgba(109, 83, 190, .018), transparent 30%),
    var(--cosmos-base);
}
.boot-shell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 56% 40%, transparent 22%, rgba(10,10,14,.08) 62%, rgba(5,5,8,.5) 100%),
    linear-gradient(0deg, rgba(8,8,11,.58) 0%, transparent 31%);
}
.boot-cosmos { position: absolute; inset: 0; opacity: .72; }
.boot-cosmos::before {
  content: ""; position: absolute; width: min(64vw, 720px); aspect-ratio: 1; left: 50%; top: 50%;
  border: 1px solid rgba(var(--accent-rgb), .08); border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 120px rgba(var(--accent-rgb), .018);
}
.boot-cosmos i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(184,174,255,.72); box-shadow: 0 0 14px rgba(var(--accent-rgb), .72);
}
.boot-cosmos i:nth-child(1) { left: 18%; top: 27%; }
.boot-cosmos i:nth-child(2) { left: 34%; top: 66%; opacity: .46; }
.boot-cosmos i:nth-child(3) { right: 24%; top: 22%; opacity: .58; }
.boot-cosmos i:nth-child(4) { right: 15%; bottom: 24%; opacity: .38; }
.boot-cosmos i:nth-child(5) { left: 56%; bottom: 16%; opacity: .64; }
.boot-mark {
  width: 46px; height: 46px;
  animation: boot-breathe 1.4s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.boot-status {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 13px;
  max-width: min(84vw, 340px); text-align: center;
}
.boot-status p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.boot-retry {
  min-height: 38px; padding: 0 18px; border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 999px; color: var(--text); background: rgba(var(--accent-rgb), .12);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.boot-retry:hover { background: rgba(var(--accent-rgb), .2); }
.boot-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes boot-breathe {
  from { transform: scale(.94); opacity: .78; box-shadow: 0 0 24px rgba(var(--accent-rgb), .14), inset 0 1px 1px rgba(255,255,255,.55); }
  to { transform: scale(1); opacity: 1; box-shadow: 0 0 46px rgba(var(--accent-rgb), .3), inset 0 1px 1px rgba(255,255,255,.55); }
}

.login-shell {
  position: relative; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 24px;
  background:
    radial-gradient(circle at 72% 24%, rgba(105,87,230,.18), transparent 35%),
    radial-gradient(circle at 15% 80%, rgba(59,179,149,.08), transparent 38%),
    var(--cosmos-base);
}
.login-shell::before {
  content: ""; position: absolute; inset: 0; opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle, black, transparent 72%);
}
.login-orbit { position: absolute; width: min(76vw, 780px); aspect-ratio: 1; border: 1px solid rgba(139,124,255,.1); border-radius: 50%; }
.login-orbit::before, .login-orbit::after {
  content: ""; position: absolute; inset: 15%; border: 1px solid rgba(139,124,255,.12); border-radius: 50%; transform: rotate(36deg) scaleY(.38);
}
.login-orbit::after { inset: 30%; transform: rotate(-42deg) scaleY(.52); }
.login-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #a89cff; box-shadow: 0 0 18px #8b7cff; }
.login-orbit i:nth-child(1) { left: 9%; top: 31%; }
.login-orbit i:nth-child(2) { right: 14%; top: 21%; }
.login-orbit i:nth-child(3) { right: 28%; bottom: 8%; }
.login-card {
  position: relative; z-index: 1; width: min(100%, 432px); display: grid; gap: 17px; padding: 34px;
  border: 1px solid var(--line); border-radius: 28px; background: rgba(14,13,20,.82);
  box-shadow: var(--shadow); backdrop-filter: blur(24px);
}
.login-copy { margin: 14px 0 4px; }
.login-copy h1 { margin: 8px 0 14px; font-size: clamp(38px, 7vw, 58px); line-height: .98; letter-spacing: -.055em; }
.login-copy .muted { max-width: 350px; }
.login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.login-card input {
  width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 13px; background: rgba(255,255,255,.045); color: var(--ink);
}
.login-card input:focus { border-color: rgba(var(--accent-rgb), .62); background: rgba(255,255,255,.065); }
.primary {
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px;
  background: var(--accent); color: #09080d; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), .2);
}
.primary:hover { filter: brightness(1.08); }
.primary:disabled { opacity: .55; cursor: default; }
.primary.wide { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

.app-shell {
  position: relative; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 58% 36%, rgba(var(--accent-rgb), .04), transparent 38%),
    radial-gradient(circle at 82% 76%, rgba(109, 83, 190, .018), transparent 30%),
    var(--cosmos-base);
}
.particle-canvas {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .54; filter: saturate(.84); transition: opacity .45s ease;
}
.ambient-grid {
  position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .025;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 55% 42%, black, transparent 76%);
}
.app-shell::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 56% 40%, transparent 22%, rgba(10,10,14,.08) 62%, rgba(5,5,8,.5) 100%),
    linear-gradient(0deg, rgba(8,8,11,.58) 0%, transparent 31%);
}
.product-header {
  position: relative; z-index: 5; height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; padding: max(11px, env(safe-area-inset-top)) clamp(16px, 2.5vw, 32px) 8px;
  gap: clamp(10px, 2vw, 24px);
}
.product-header.profile-open { z-index: 22; }
.brand-button { display: inline-flex; justify-self: start; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; }
.brand-navigation { position: relative; justify-self: start; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.header-account-slot { display: contents; }
.session-account {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(19, 18, 25, .72);
  backdrop-filter: blur(18px);
}
.account-menu-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 5px 8px 5px 6px;
  border: 0;
  border-radius: 15px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.account-menu-toggle:hover,
.session-account.open .account-menu-toggle { background: rgba(255,255,255,.045); }
.account-menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-chevron { display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted-2); transition: transform .18s ease; }
.account-chevron svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.session-account.open .account-chevron { transform: rotate(180deg); }
.session-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: #f1eff8;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #fff), #5d52bd);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.session-copy { display: grid; min-width: 0; line-height: 1.08; }
.session-copy strong {
  max-width: 130px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-copy small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.account-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 20px;
  background: rgba(24,23,29,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(28px);
  animation: account-menu-in .16s ease-out;
}
.account-menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 1px 2px 12px; }
.account-menu-header .eyebrow { margin: 0 0 4px; color: var(--muted-2); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.account-menu-header h2 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.2; }
.account-plan { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.plan-control {
  display: grid;
  gap: 9px;
  margin: 1px 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.plan-control[hidden] { display: none; }
.plan-control-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-control-copy strong { color: var(--ink); font-size: 11px; }
.plan-control-copy small { color: #93dfca; font-size: 8px; }
.plan-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.plan-options button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  text-align: left;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.plan-options button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.plan-options button[aria-checked="true"] {
  border-color: rgba(var(--accent-rgb), .42);
  color: var(--ink);
  background: rgba(var(--accent-rgb), .13);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .07);
}
.plan-options button:disabled { opacity: .56; cursor: wait; }
.plan-options strong { font-size: 11px; }
.plan-options small { color: var(--muted-2); font-size: 8px; }
.plan-control-status { min-height: 11px; margin: -2px 1px 0; color: var(--muted); font-size: 8px; }
.plan-control-status.error { color: #ef9ca8; }
.profile-appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin: 1px 0 10px;
  padding: 7px 9px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.profile-appearance-copy { display: grid; min-width: 0; gap: 3px; }
.profile-appearance-copy strong { color: var(--ink); font-size: 11px; }
.profile-appearance-copy small { color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.profile-color-mode-control { flex: 0 0 auto; }
.color-mode-control button,
.profile-color-mode-control button {
  width: 34px;
  min-width: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
.color-mode-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Without an explicit box the 15px glyph sat on the button's text baseline and
   read as a crooked cross. Centre it the way every other icon control does. */
.account-menu .icon-button {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); background: rgba(255,255,255,.03); cursor: pointer;
}
.account-menu .icon-button:hover {
  border-color: var(--line-strong); color: var(--ink); background: rgba(255,255,255,.07);
}
.account-menu .icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.session-logout {
  width: 100%;
  padding: 10px 9px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.session-logout:hover { color: var(--ink); }
.account-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  padding: 10px 2px 0;
  border-top: 1px solid var(--line);
}
.account-menu-footer .session-logout,
.account-menu-footer .app-version {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-label);
  line-height: 1.2;
}
.account-menu-footer .session-logout { flex: 1 1 auto; }
.account-menu-footer .app-version {
  flex: 0 0 auto;
  pointer-events: none;
  text-align: right;
  user-select: text;
}
.profile-settings {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 58px; margin: 2px 0 10px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-align: left;
  background: rgba(255,255,255,.025); cursor: pointer;
}
.profile-settings:hover { border-color: rgba(var(--accent-rgb), .32); background: rgba(var(--accent-rgb), .08); }
.profile-settings > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(var(--accent-rgb), .14); }
.profile-settings > span:first-child svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.profile-settings > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.profile-settings strong { font-size: 12px; }
.profile-settings small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-settings-arrow { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease, stroke .16s ease; }
.profile-settings:hover .profile-settings-arrow { stroke: var(--ink); transform: translateX(2px); }
.glass-button, .round-button {
  border: 1px solid var(--line); background: rgba(20,19,28,.62); color: var(--ink); cursor: pointer; backdrop-filter: blur(16px);
}
.glass-button { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 11px; font-size: 12px; }
.button-count {
  min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px;
  border-radius: 999px; background: rgba(var(--accent-rgb), .22); color: #d9d4ff; font-size: 9px;
}
.glass-button:disabled { opacity: .48; cursor: default; }
 .soft-pill {
  display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px;
  border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 999px;
  background: rgba(var(--accent-rgb), .1); color: #c4bcff; font-size: 10px; font-weight: 750;
}
.soft-pill[data-state="ready"] { border-color: rgba(87,211,179,.28); background: rgba(87,211,179,.1); color: #9be6d2; }
.soft-pill[data-state="blocked"] { border-color: rgba(244,125,140,.26); background: rgba(244,125,140,.08); color: #f2abb5; }
.soft-pill[data-state="draft"] { border-color: rgba(243,166,109,.28); background: rgba(243,166,109,.09); color: #f3bd96; }

.workbench { position: relative; z-index: 3; height: calc(100dvh - 64px); display: flex; min-width: 0; }
.studio-operation { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 9px; border: 1px solid rgba(var(--accent-rgb),.24); border-radius: 11px; background: rgba(var(--accent-rgb),.08); }
.studio-operation-mark { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.09); }
.studio-operation-copy { display: grid; min-width: 0; gap: 1px; }
.studio-operation-copy small, .studio-operation-copy strong { overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; }
.studio-operation-copy small { color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.studio-operation-copy strong { font-size: 9px; }
.studio-operation[data-phase="verify"] .studio-operation-mark { background: var(--warning); }
.studio-operation[data-phase="commit"] .studio-operation-mark { background: var(--success); }
.studio-operation[data-phase="failed"] .studio-operation-mark { background: var(--danger); }
.task-create-panel, .task-list-panel { background: rgba(24,24,27,.84); backdrop-filter: blur(18px); }
.range-setting { display: grid; gap: 12px; color: var(--muted); font-size: 13px; }
.range-setting input { width: 100%; accent-color: var(--accent); }
.telegram-pairing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.telegram-pairing p { flex: 1 1 100%; margin: 0; }
.telegram-world-sharing { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.telegram-world-command { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 12px; background: rgba(var(--accent-rgb),.06); }
.telegram-world-command code { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.telegram-world-command small { grid-column: 1 / -1; color: var(--muted); line-height: 1.5; }
.task-tabs { display: inline-flex; align-self: start; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.task-tab { min-height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.task-tab.active { background: var(--surface-soft); color: var(--ink); }
.task-view { display: grid; gap: 12px; }
.task-form { display: grid; gap: 14px; }
.task-form label { display: grid; gap: 7px; color: #d5d2df; font-size: 12px; }
.task-form textarea, .task-form input, .task-form select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: #0c0b11; color: var(--ink); color-scheme: dark;
}
.task-form textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.task-form input, .task-form select { min-height: 42px; }
.task-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-form-actions .muted { min-width: 0; font-size: 10px; }
.timeline-list { display: grid; }
.timeline-card { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.timeline-card:first-child { padding-top: 2px; border-top: 0; }
.timeline-card h3 { margin: 0; font-size: 15px; }
.timeline-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-card.failed { border-left: 2px solid rgba(255,122,134,.42); padding-left: 12px; }
.timeline-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.timeline-meta time { color: #bbb7c7; font-size: 10px; }
.timeline-empty { padding: 24px 2px; color: var(--muted-2); font-size: 12px; text-align: center; }
.activity-sheet {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.activity-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 7px 11px 7px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.activity-sheet-heading .soft-pill,
.activity-entry-meta .soft-pill {
  min-height: 20px;
  padding-inline: 7px;
  font-size: 8px;
}
.activity-entry {
  display: grid;
  gap: 5px;
  padding: 11px 13px 12px;
  border-top: 1px solid var(--line);
}
.activity-entry:first-child { border-top: 0; }
.activity-entry.failed { box-shadow: inset 2px 0 rgba(255,122,134,.48); }
.activity-entry.attention { box-shadow: inset 2px 0 rgba(240,190,92,.5); }
.activity-entry-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}
.activity-entry-meta time {
  color: var(--muted-2);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.activity-entry-title,
.activity-entry-result {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}
.activity-entry-title {
  color: #e3e1e9;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.42;
  -webkit-line-clamp: 2;
}
.activity-entry-result {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  -webkit-line-clamp: 2;
}
.activity-entry-details { margin-top: 1px; color: var(--muted-2); }
.activity-entry-details summary {
  width: max-content;
  list-style-position: inside;
  font-size: 9px;
  cursor: pointer;
}
.activity-entry-details p {
  margin: 5px 0 0;
  color: var(--muted-2);
  font: 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.knowledge-audit-body {
  display: grid;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.knowledge-audit-body h4 {
  margin: 3px 0 0;
  color: #dddbe3;
  font-size: 10px;
}
.knowledge-audit-body ul { margin: 0; padding-left: 18px; }
.knowledge-audit-body li + li { margin-top: 3px; }
.knowledge-audit-publication { color: #a9cfb5 !important; font-family: inherit !important; }
.knowledge-audit-change {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.knowledge-audit-change-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.knowledge-audit-change-meta code {
  max-width: 100%;
  color: #dddbe3;
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.knowledge-audit-change-meta small { color: var(--muted-2); }
.knowledge-audit-change pre {
  max-height: 280px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  color: #cbc9d1;
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.text-button { justify-self: start; padding: 0; border: 0; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.danger-text { color: #e68e98; }
.chat-stage {
  width: min(100%, 1120px); min-width: 0; height: 100%; flex: 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; margin-inline: auto;
  container: teamon-dialogue / inline-size;
}
.conversation-lanes {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 3px; border: 1px solid rgba(255,255,255,.075); border-radius: 999px;
  background: rgba(19,25,34,.82); box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(18px) saturate(112%);
}
.conversation-lane {
  position: relative; min-width: 48px; min-height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent;
  color: #9299a8; font-size: 11px; font-weight: 680; line-height: 1.35; cursor: pointer;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.conversation-lane:hover:not(:disabled) { color: #d9dce4; background: rgba(255,255,255,.045); }
.conversation-lane.active {
  background: rgba(255,255,255,.085); color: #f2f3f7;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 4px 12px rgba(0,0,0,.12);
}
.conversation-lane:disabled { cursor: default; opacity: .55; }
.conversation-lane-badge,
.team-project-unread {
  min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #15131f;
  font-size: 8px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.conversation-lane .conversation-lane-badge {
  position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px;
  padding: 0 3px; border: 2px solid var(--bg); font-size: 7px;
}
.conversation-team-tooltip {
  position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 24;
  width: 238px; max-width: min(238px, calc(100vw - 28px)); display: grid; gap: 5px;
  padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px;
  background: rgba(18,23,32,.97); color: #e8eaf0;
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
  text-align: left; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px); transform-origin: left bottom;
  transition: opacity .14s ease, transform .16s ease, visibility .14s ease;
  backdrop-filter: blur(20px) saturate(118%);
}
#conversation-lane-team:hover .conversation-team-tooltip,
#conversation-lane-team:focus-visible .conversation-team-tooltip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.conversation-team-tooltip-title {
  padding: 1px 3px 4px; color: #8f96a5; font-size: 9px; font-weight: 760;
  letter-spacing: .04em; text-transform: uppercase;
}
.conversation-team-tooltip-status { padding: 5px 4px; color: #9299a7; font-size: 10px; line-height: 1.4; }
.conversation-team-tooltip-member {
  min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px;
  padding: 6px 7px; border-radius: 10px; background: var(--team-author-soft, rgba(255,255,255,.04));
}
.conversation-team-tooltip-member > span:first-child {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--team-author-color) 58%, transparent);
  border-radius: 9px; color: var(--team-author-color); font-size: 10px; font-weight: 780;
}
.conversation-team-tooltip-member > span:last-child { min-width: 0; display: grid; gap: 1px; }
.conversation-team-tooltip-member strong,
.conversation-team-tooltip-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-team-tooltip-member strong { color: var(--team-author-color); font-size: 11px; }
.conversation-team-tooltip-member small { color: #818897; font-size: 9px; font-weight: 520; }
.shared-chat-empty {
  width: min(420px, 100%); min-height: 100%; display: grid; align-content: center; justify-items: center;
  gap: 7px; margin: auto; color: #858c9b; text-align: center;
}
.shared-chat-empty strong { color: #e7e9ee; font-size: 19px; letter-spacing: -.025em; }
.shared-chat-empty span { max-width: 340px; font-size: 12px; line-height: 1.55; }
.shared-message {
  width: min(100%, 720px); display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start;
  gap: 10px; margin: 0 auto 20px; animation: rise .2s ease both;
}
.shared-message.own { grid-template-columns: minmax(0, 1fr) 30px; }
.shared-message.own .shared-message-avatar { grid-column: 2; }
.shared-message.own .shared-message-content { grid-column: 1; grid-row: 1; justify-self: end; align-items: end; }
.shared-message-avatar {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--team-author-color) 48%, transparent);
  border-radius: 10px; background: var(--team-author-soft); color: var(--team-author-color); font-size: 11px; font-weight: 760;
}
.shared-message.agent .shared-message-avatar {
  border-color: rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.13); color: #cdc7ff;
}
.shared-message-content {
  width: min(590px, 100%); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.shared-message-meta { display: flex; align-items: baseline; gap: 7px; padding-inline: 2px; }
.shared-message-meta strong { color: var(--team-author-color); font-size: 11px; font-weight: 720; }
.shared-message-meta time { color: #777f8e; font-size: 10px; font-variant-numeric: tabular-nums; }
.shared-message-reply {
  padding: 0; border: 0; background: transparent; color: #737b8a; font-size: 9px; cursor: pointer;
  opacity: 0; transition: color .15s ease, opacity .15s ease;
}
.shared-message:hover .shared-message-reply,
.shared-message:focus-within .shared-message-reply { opacity: 1; }
.shared-message-reply:hover { color: #c9c5dc; }
@media (hover: none) {
  .shared-message-reply { min-height: 28px; padding-inline: 5px; opacity: 1; }
}
.shared-message-bubble {
  min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px 16px 16px 16px;
  background: rgba(255,255,255,.035); color: #dfe1e7; font-size: 14px; line-height: 1.52;
  overflow-wrap: anywhere;
}
.shared-message-quote {
  width: 100%; display: block; margin: 0 0 7px; padding: 6px 8px; overflow: hidden;
  border: 0; border-left: 2px solid rgba(var(--accent-rgb),.5); border-radius: 3px 8px 8px 3px;
  background: rgba(255,255,255,.035); color: #a8adba; font: inherit; font-size: 10px;
  text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.shared-message.agent .shared-message-quote { max-width: 520px; background: rgba(var(--accent-rgb),.07); }
.shared-message.referenced .shared-message-bubble { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.34); }
.shared-message-files { display: grid; gap: 6px; margin-top: 8px; }
.shared-message-files a {
  min-width: min(280px, 62vw); display: grid; gap: 2px; padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(9,12,18,.32);
  color: #dfe2ea; text-decoration: none;
}
.shared-message-files a:hover { border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.07); }
.shared-message-files strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shared-message-files small { color: #777e8d; font-size: 9px; }
.shared-message.own .shared-message-bubble { border-radius: 16px 6px 16px 16px; background: rgba(47,55,68,.78); }
.shared-message.human .shared-message-bubble {
  border-color: color-mix(in srgb, var(--team-author-color) 18%, transparent);
  box-shadow: inset 2px 0 var(--team-author-color);
}
.shared-message.own .shared-message-bubble { box-shadow: inset -2px 0 var(--team-author-color); }
.shared-message.agent .shared-message-bubble { padding: 2px 0; border: 0; border-radius: 0; background: transparent; }
.shared-message-bubble.running { color: #a9acb6; }
.shared-message-bubble.running::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-radius: 50%; background: var(--accent); animation: blink 1.1s ease-in-out infinite;
}
.shared-message-bubble.failed,
.shared-message-bubble.cancelled { color: #b59096; }
.shared-message-bubble p, .shared-message-bubble ul, .shared-message-bubble ol { margin: 0 0 10px; }
.shared-message-bubble > :last-child { margin-bottom: 0; }
.messages {
  grid-row: 2; min-height: 0; overflow-y: auto;
  padding: clamp(20px, 3.2vh, 32px) clamp(18px, 4vw, 44px) 28px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.welcome-card { width: min(620px, 62vw); margin: clamp(24px, 7vh, 72px) auto 0; text-align: center; }
.welcome-card h1 { margin: 7px 0 12px; font-size: clamp(38px, 4.3vw, 52px); line-height: 1; letter-spacing: -.048em; }
.welcome-card > p:not(.eyebrow) { width: min(470px, 100%); margin: 0; color: #989cac; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.62; }
.welcome-card > p:not(.eyebrow), .starter-prompts { margin-inline: auto; }
.starter-prompts { width: min(540px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.starter-prompt {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035);
  color: #c4c1ce; font-size: 12px; cursor: pointer; backdrop-filter: blur(12px);
}
.starter-prompt:hover { border-color: rgba(var(--accent-rgb), .42); color: white; }
.starter-prompt.onboarding-action {
  border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .13); color: #e0dcff;
}
.message {
  width: min(100%, 720px); display: flex; margin: 0 auto 26px;
  color: #e2e2e7; animation: rise .22s ease both;
}
.message.user { justify-content: flex-end; margin-bottom: 26px; }
.bubble {
  min-width: 0; max-width: 100%; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
  font-size: 16px; line-height: 1.58; letter-spacing: -.008em;
}
.message.user .bubble {
  max-width: min(480px, 68vw); padding: 9px 14px; border: 1px solid rgba(255,255,255,.065); border-radius: 18px;
  background: rgba(43,43,47,.96); color: #e4e4e9; line-height: 1.45; box-shadow: none;
}
.message.user .muted { display: block; margin-top: 6px; color: #9995a3; }
.bubble p, .bubble pre, .bubble ul, .bubble ol, .bubble h1, .bubble h2, .bubble h3 { margin: 0 0 12px; }
.message-body > :last-child, .bubble > :last-child { margin-bottom: 0; }
.bubble p { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1em; font-weight: 680; letter-spacing: -.012em; }
.message.assistant .bubble { width: 100%; }
.message.assistant .bubble ul, .message.assistant .bubble ol { padding-left: 1.35em; }
.message.assistant .bubble li + li { margin-top: 6px; }
.message.action-receipt { margin-top: -8px; margin-bottom: 12px; }
.message.action-receipt .bubble {
  max-width: min(100%, 560px); padding: 8px 11px; border: 1px solid rgba(87,211,164,.17);
  border-radius: 11px; background: rgba(87,211,164,.055); color: #afd9c9; font-size: 10px;
}
.message.memory-update-receipt .bubble {
  width: min(100%, 600px); max-width: min(100%, 600px); padding: 11px 12px;
  font-size: 12px; line-height: 1.4;
}
.memory-receipt-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.memory-receipt-mark {
  width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center;
  border: 1px solid rgba(87,211,164,.28); border-radius: 50%; color: #8ee0c3;
  background: rgba(87,211,164,.08); font-size: 12px; font-weight: 760;
}
.memory-receipt-copy { min-width: 0; display: grid; gap: 1px; }
.memory-receipt-copy strong { color: #dff5ed; font-size: 12px; font-weight: 700; }
.memory-receipt-copy small { overflow-wrap: anywhere; }
.memory-receipt-copy small,
.memory-receipt-status { color: #9297a4; font-size: 10px; }
.memory-receipt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.memory-receipt-action { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.memory-receipt-status:not(:empty) { display: block; margin-top: 6px; color: #e6b1b8; }
.journal-entry-focused {
  outline: 2px solid rgba(var(--accent-rgb), .68); outline-offset: 3px;
  animation: memory-focus 1.8s ease both;
}
@keyframes memory-focus {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .09); }
}
.bubble pre { max-width: 100%; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #09090d; color: #d7d4e4; }
.bubble code { padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.07); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bubble pre code { padding: 0; background: none; }
.bubble a { color: #b7aeff; }
.message.assistant:not(.micro-status) .bubble.streaming::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
  border-radius: 50%; background: var(--accent); opacity: .68; animation: blink 1.1s ease-in-out infinite;
}
.tool-card, .artifact-card {
  width: min(100%, 680px); margin: 0 0 18px 42px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 13px; background: rgba(17,16,24,.7); color: var(--muted); font-size: 12px;
}
.artifact-card a { color: #b7aeff; }
.artifact-proof { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .01em; }

.work-surface {
  position: relative; width: 54px; min-width: 54px; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  flex: 0 0 auto; overflow: hidden; border-left: 1px solid var(--cosmos-line); background: rgba(14,14,19,.96);
  opacity: 1; transform: translateX(0); pointer-events: auto;
  transition: width .24s cubic-bezier(.22,.8,.25,1), min-width .24s cubic-bezier(.22,.8,.25,1), border-radius .24s cubic-bezier(.22,.8,.25,1), margin .24s cubic-bezier(.22,.8,.25,1);
  backdrop-filter: blur(26px);
}
.work-surface-rail {
  position: absolute; z-index: 5; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  justify-items: center; gap: 14px; width: 100%; padding: 14px 7px 16px; overflow: hidden;
  border: 0; color: var(--muted); background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), transparent 36%);
  cursor: pointer; opacity: 1; visibility: visible;
  transition: opacity .14s ease, background .18s ease;
}
.work-surface-rail:hover { color: var(--ink); background: linear-gradient(180deg, rgba(var(--accent-rgb),.14), transparent 42%); }
.work-surface-rail:focus-visible { box-shadow: none; }
.work-surface-rail:focus-visible .work-surface-rail-chevron { outline: 2px solid rgba(var(--accent-rgb),.68); outline-offset: 2px; }
.work-surface-rail-chevron {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255,255,255,.025);
}
.work-surface-rail-chevron svg { width: 17px; height: 17px; }
.work-surface-rail-chevron path,
.work-surface-rail-core svg * { stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.work-surface-rail-core { align-self: center; display: grid; justify-items: center; gap: 10px; }
.work-surface-rail-core svg { width: 27px; height: 27px; color: #d7d3e3; }
.work-surface-rail-core .work-surface-rail-accent { stroke: rgb(var(--accent-rgb)); }
.work-surface-rail-core > span {
  color: #aaa6b6; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.workbench.space-open .work-surface-rail { opacity: 0; visibility: hidden; pointer-events: none; }
.workbench:not(.space-open) .work-surface > :not(.work-surface-rail) { opacity: 0; visibility: hidden; pointer-events: none; }
.studio-mode-toggle {
  position: relative; width: max-content; min-width: 0; gap: 7px; padding-inline: 10px 11px;
  white-space: nowrap;
}
.control-tooltip { display: none; }
.surface-mode-icon {
  position: relative; display: block; width: 19px; height: 19px; flex: 0 0 19px;
  color: currentColor;
}
.mode-icon {
  position: absolute; inset: 0; width: 19px; height: 19px; opacity: 0;
  stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
  transform: scale(.74) rotate(-8deg);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.mode-icon-accent { stroke: rgb(var(--accent-rgb)); stroke-width: 1.7; }
.mode-icon-core { fill: rgba(var(--accent-rgb), .16); }
.studio-mode-toggle[data-destination="window"] .mode-icon-canvas,
.studio-mode-toggle[data-destination="fullscreen"] .mode-icon-studio {
  opacity: 1; transform: scale(1) rotate(0);
}
.workbench.space-open .work-surface {
  width: var(--work-surface-width, clamp(360px, 30vw, 500px)); min-width: min(360px, 40vw); border-left-color: var(--line); opacity: 1; transform: translateX(0); pointer-events: auto;
}
.work-resizer {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 12px;
  border: 0; background: transparent; cursor: col-resize; touch-action: none;
}
.work-resizer::after {
  content: ""; position: absolute; top: 50%; left: 4px; width: 2px; height: 54px;
  border-radius: 999px; background: rgba(var(--accent-rgb), .7);
  opacity: .18; transform: translateY(-50%) scaleY(.72);
  transition: opacity .15s ease, transform .15s ease;
}
.work-resizer:hover::after,
.work-resizer:focus-visible::after,
.work-surface-resizing .work-resizer::after {
  opacity: 1; transform: translateY(-50%) scaleY(1);
}
.work-resizer:focus-visible { box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .42); }
.work-surface-resizing { cursor: col-resize; user-select: none; }
.work-surface-resizing .work-surface {
  transition: none;
}
.work-surface-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.work-surface-header h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.03em; }
.work-surface-header h2:focus { outline: none; }
.work-surface-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workbench.space-open:not(.canvas-full) .work-surface-actions .studio-mode-toggle {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  justify-content: center; padding: 0; border-radius: 12px;
}
.workbench.space-open:not(.canvas-full) .work-surface-actions .studio-mode-toggle .desktop-label,
.workbench.space-open:not(.canvas-full) .work-surface-actions .studio-mode-toggle .control-tooltip {
  display: none;
}
.work-surface-close { flex: 0 0 auto; }
.work-surface-close svg { width: 18px; height: 18px; }
.work-surface-close path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.point-map-return {
  min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px 0 9px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  background: rgba(255,255,255,.025); font: inherit; font-size: 10px; font-weight: 720; cursor: pointer;
}
.point-map-return[hidden] { display: none; }
.point-map-return:hover,
.point-map-return:focus-visible { border-color: rgba(var(--accent-rgb), .36); color: var(--ink); background: rgba(var(--accent-rgb), .065); }
.point-map-return svg { width: 16px; height: 16px; }
.point-map-return path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.space-surface-tabs {
  display: flex; gap: 22px;
  padding: 0 20px; border-bottom: 1px solid var(--line);
}
.space-surface-tabs[aria-hidden="true"] { display: none !important; }
.space-surface-tab {
  position: relative; min-width: 0; min-height: 42px; padding: 0; border: 0;
  border-radius: 0; overflow: hidden; background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.space-surface-tab::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  border-radius: 999px 999px 0 0; background: transparent;
}
.space-surface-tab:hover { color: var(--ink); }
.space-surface-tab.active,
.space-surface-tab[aria-selected="true"] {
  background: transparent; color: #f3f1ff;
}
.space-surface-tab.active::after,
.space-surface-tab[aria-selected="true"]::after { background: rgb(var(--accent-rgb)); }
.world-members { display: grid; gap: 14px; }
.world-members > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.world-members > header h3, .world-members > header p { margin: 0; }
.world-members > header p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.world-member-list { display: grid; gap: 8px; }
.world-member {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025);
}
.world-member-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--accent-rgb),.15); color: #e8e4ff; font-weight: 780; }
.world-member-copy { min-width: 0; display: grid; gap: 3px; }
.world-member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.world-member-copy small { color: var(--muted-2); font-size: 9px; }
.world-member-actions { display: flex; align-items: center; gap: 7px; }
.world-member-role,
.world-member-add select {
  min-height: 30px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.035); color: #d9dbe2; font-size: 10px;
}
.world-member-add {
  display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 16px; background: rgba(var(--accent-rgb),.045);
}
.world-member-add[hidden] { display: none; }
.world-member-add > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.world-member-add-close { width: 28px; height: 28px; }
.world-member-add-path { display: grid; gap: 6px; }
.world-member-add-path > strong { color: #e5e6eb; font-size: 11px; }
.world-member-add-path > small { color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.world-member-add-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 3px; }
.world-member-add-separator { color: #666d7a; font-size: 9px; text-align: center; text-transform: uppercase; }
.world-invite-result { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 14px; background: rgba(var(--accent-rgb),.07); }
.world-invite-result code { overflow-wrap: anywhere; color: #ded9ff; font-size: 10px; line-height: 1.5; user-select: all; }
.world-invite-result.error { border-color: rgba(230,142,152,.3); color: #e0a1aa; background: rgba(230,142,152,.06); }
@media (max-width: 620px) {
  .world-members > header { display: grid; }
  .world-member { grid-template-columns: 38px minmax(0,1fr); }
  .world-member-actions { grid-column: 1 / -1; justify-content: end; }
  .world-member-actions { flex-wrap: wrap; }
  .world-member-actions .text-button { min-height: 36px; padding-inline: 5px; }
  .world-member-role { min-height: 36px; }
  .world-member-add-controls { grid-template-columns: 1fr; }
}
.studio-input-mode {
  position: absolute; z-index: 30; top: 82px; left: 18px;
  width: min(340px, calc(100% - 36px)); display: grid; gap: 7px;
  padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  background: rgba(19,18,25,.86); color: #d5d1e1;
  box-shadow: 0 14px 40px rgba(0,0,0,.34); backdrop-filter: blur(20px);
}
.studio-input-mode-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.studio-input-mode button {
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 10px; font-weight: 780; cursor: pointer;
}
.studio-input-mode button:hover { color: white; background: rgba(255,255,255,.055); }
.studio-input-mode button.active,
.studio-input-mode button[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb),.48); background: rgba(var(--accent-rgb),.2); color: white;
}
.studio-input-mode > small {
  min-height: 13px; padding: 0 7px 1px; overflow: hidden;
  color: var(--muted-2); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.studio-user-icon {
  position: relative; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%;
}
.studio-user-icon::after {
  content: ""; position: absolute; width: 5px; height: 3px; left: 2.5px; bottom: 1.5px;
  border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 5px 5px;
}
.studio-select-icon {
  position: relative; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 4px;
}
.studio-select-icon::before,
.studio-select-icon::after { content: ""; position: absolute; background: currentColor; }
.studio-select-icon::before { width: 5px; height: 1.5px; left: 3px; top: 5px; }
.studio-select-icon::after { width: 1.5px; height: 5px; left: 5px; top: 3px; }
.workbench.canvas-full .studio-input-mode {
  position: fixed; top: 70px; right: 18px; left: auto;
  width: min(300px, calc(100vw - 36px));
}
[data-teamon-studio-selectable] {
  cursor: crosshair !important;
  transition: outline-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
[data-teamon-studio-selectable]:hover,
[data-teamon-studio-selectable]:focus-visible {
  outline: 2px solid rgba(168,156,255,.9); outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(139,124,255,.12), 0 14px 38px rgba(32,24,78,.18);
}
[data-teamon-studio-selected] {
  outline: 3px solid rgba(168,156,255,.98) !important; outline-offset: 4px !important;
  box-shadow: 0 0 0 9px rgba(139,124,255,.17), 0 18px 44px rgba(32,24,78,.24) !important;
}
.composer-context-meter {
  --context-progress: 0;
  --context-hue: 132;
  width: calc(100% - 64px); height: 2px; justify-self: center; overflow: hidden;
  margin: 0 32px -2px; border: 0; border-radius: 999px; background: rgba(145,142,158,.13);
}
.composer-context-meter-fill {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background-color: hsl(var(--context-hue) 48% 54% / .58);
  transform: scaleX(var(--context-progress)); transform-origin: left center;
  transition: transform .24s ease, background-color .24s ease;
}
@media (prefers-reduced-motion: reduce) {
  .composer-context-meter-fill { transition: none; }
}
.work-tabs { display: flex; gap: 4px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.work-tab {
  min-height: 34px; flex: 1; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer;
}
.work-tab.active { background: var(--surface-soft); color: var(--ink); }
.academy-space-view { position: relative; height: 100%; padding: 0; overflow: hidden; }
.academy-shell { min-width: 0; height: 100%; display: grid; }
.academy-stage {
  min-width: 0; min-height: 0; overflow-y: auto; padding: 22px 22px 48px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.academy-stage-header {
  display: flex; align-items: start; justify-content: space-between; gap: 12px;
}
.academy-stage-header h3 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.04em; }
.academy-stage-header > div > p:last-child {
  max-width: 620px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.58;
}
.academy-cycle-state {
  min-height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 5px 10px;
  border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 999px;
  background: rgba(var(--accent-rgb), .08); color: #cbc5ff; font-size: 11px; font-weight: 750; white-space: nowrap;
}
.academy-cycle-state[data-state="awaiting_judgment"] {
  border-color: rgba(243,166,109,.28); background: rgba(243,166,109,.08); color: #efbd98;
}
.academy-action-status {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 10px;
  background: rgba(var(--accent-rgb), .08); color: #c9c3ed; font-size: 12px;
}
.academy-action-status[data-state="error"] { background: rgba(255,122,134,.08); color: #efadb5; }
.academy-section { display: grid; gap: 12px; margin-top: 17px; }
.academy-section[hidden] { display: none; }
.academy-family-panel {
  width: min(100%, 920px); display: grid; gap: 16px; justify-self: center; padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(87,211,164,.22); border-radius: 26px;
  background: radial-gradient(circle at 92% 4%, rgba(87,211,164,.14), transparent 36%),
    linear-gradient(145deg, rgba(24,37,35,.96), rgba(15,14,22,.98) 58%);
  box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06);
}
.academy-family-panel[hidden] { display: none; }
.academy-family-panel[data-state="error"] { border-color: rgba(255,122,134,.3); }
.academy-family-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.academy-family-heading h4 { margin: 4px 0 0; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
.academy-family-heading > div > p:last-child { margin: 8px 0 0; color: #b7c5c0; font-size: 14px; line-height: 1.55; }
.academy-family-icon-button {
  width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid rgba(87,211,164,.25); border-radius: 14px;
  background: rgba(87,211,164,.08); color: #9be4c9; font: inherit; font-size: 21px; cursor: pointer;
}
.academy-family-status { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(87,211,164,.07); color: #b8e8d7; font-size: 13px; }
.academy-family-status[data-state="error"] { background: rgba(255,122,134,.08); color: #efadb5; }
.academy-family-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.academy-family-metrics article {
  display: grid; gap: 3px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(0,0,0,.16);
}
.academy-family-metrics strong { color: #e9fff7; font-size: 22px; font-variant-numeric: tabular-nums; }
.academy-family-metrics span { color: #8fa49d; font-size: 11px; }
.academy-family-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.academy-family-actions button,
.academy-family-item button {
  min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px;
  background: rgba(255,255,255,.045); color: #dfe7e4; font: inherit; font-size: 13px; font-weight: 760; cursor: pointer;
}
.academy-family-actions button.primary,
.academy-family-item button.primary { border-color: rgba(87,211,164,.36); background: #3aa982; color: #071c15; }
.academy-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.academy-family-grid > section { min-width: 0; display: grid; align-content: start; gap: 8px; }
.academy-family-grid h5 { margin: 0 2px; color: #a8b8b2; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.academy-family-list { display: grid; gap: 8px; }
.academy-family-item {
  min-width: 0; display: grid; gap: 8px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.11));
}
.academy-family-item.completed { opacity: .7; }
.academy-family-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.academy-family-item-heading strong { min-width: 0; font-size: 15px; line-height: 1.35; }
.academy-family-item-heading span {
  flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: rgba(87,211,164,.1); color: #96d9c1; font-size: 10px; font-weight: 800;
}
.academy-family-item p { margin: 0; color: #aab7b3; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.academy-family-item small { color: #788a84; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.academy-family-diff { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #bab3d4; font-size: 11px; line-height: 1.45; }
.academy-family-item .academy-family-link { min-height: 36px; justify-self: start; padding: 0 10px; color: #99d8c1; }
.academy-family-proposal { border-color: rgba(139,124,255,.28); background: rgba(139,124,255,.07); }
.academy-family-dialog {
  width: min(calc(100vw - 32px), 620px); max-height: min(84vh, 820px); padding: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: #17161d; color: var(--ink);
  box-shadow: 0 40px 120px rgba(0,0,0,.62); color-scheme: dark;
}
.academy-family-program-dialog { width: min(calc(100vw - 32px), 760px); }
.academy-family-dialog::backdrop { background: rgba(6,6,10,.72); backdrop-filter: blur(8px); }
.academy-family-dialog form { max-height: inherit; display: grid; gap: 15px; padding: clamp(20px, 3vw, 30px); overflow-y: auto; }
.academy-family-dialog header,
.academy-family-dialog footer,
.academy-family-stage-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.academy-family-dialog header h3 { margin: 4px 0 0; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.04em; }
.academy-family-dialog header > button {
  width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 12px; background: rgba(255,255,255,.06); color: #c9c5d0; font-size: 23px; cursor: pointer;
}
.academy-family-dialog label { display: grid; gap: 7px; color: #c8c4cf; font-size: 12px; font-weight: 720; }
.academy-family-dialog input,
.academy-family-dialog textarea,
.academy-family-dialog select {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: #0e0d12; color: #f1eef5; font: inherit; font-size: 15px; line-height: 1.5;
}
.academy-family-dialog textarea { resize: vertical; }
.academy-family-form-row { display: grid; grid-template-columns: 1fr 170px; gap: 10px; }
.academy-family-form-note { margin: 0; color: #aaa4b5; font-size: 13px; line-height: 1.55; }
.academy-family-stage-editor { display: grid; gap: 10px; }
.academy-family-stage-heading { align-items: center; }
.academy-family-stage-heading h4 { margin: 0; font-size: 15px; }
.academy-family-stage-heading button,
.academy-family-dialog footer button,
.academy-family-stage-row button {
  min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: rgba(255,255,255,.045); color: #d9d5df; font: inherit; font-weight: 750; cursor: pointer;
}
.academy-family-dialog footer { justify-content: flex-end; padding-top: 4px; }
.academy-family-dialog footer button.primary { border-color: rgba(87,211,164,.4); background: #3aa982; color: #071c15; }
#academy-family-program-stages { display: grid; gap: 9px; }
.academy-family-stage-row {
  min-width: 0; display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.academy-family-stage-row legend { padding: 0 5px; color: #8e8998; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.academy-family-stage-row :disabled { opacity: .58; }
.academy-space-view[data-academy-focus="activity"] .academy-family-panel,
.academy-space-view[data-academy-focus="feedback"] .academy-family-panel,
.academy-space-view[data-academy-focus="revision"] .academy-family-panel { display: none; }
.academy-focus-bar {
  width: min(100%, 720px); min-height: 48px; display: grid;
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr); align-items: center;
  gap: 12px; margin: 0 auto 6px;
}
.academy-focus-control {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
}
.academy-focus-control:first-child { justify-self: start; }
.academy-focus-control:last-child { justify-self: end; }
.academy-focus-control:hover { background: rgba(var(--accent-rgb), .08); color: var(--ink); }
.academy-focus-progress { color: var(--muted-2); font-size: 12px; text-align: center; }
.academy-agent-orb {
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .42); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c7c0ff, var(--accent) 44%, #39304e 100%);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .2);
}
.academy-path {
  width: min(100%, 660px); display: grid; gap: 20px; justify-self: center;
  padding: clamp(8px, 1.4vh, 18px) 0 4px;
}
.academy-path-intro {
  width: min(100%, 540px); display: grid; gap: 6px; justify-self: center;
  padding: 0 20px; text-align: center;
}
.academy-onboarding h4,
.academy-onboarding p,
.academy-activity h4,
.academy-activity p { margin: 0; }
.academy-onboarding h4 { font-size: clamp(20px, 2.3vw, 29px); letter-spacing: -.04em; }
.academy-onboarding > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.58; }
.academy-path-list,
.academy-path-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.academy-path-list { position: relative; width: min(100%, 560px); justify-self: center; }
.academy-path-list::before {
  content: ""; position: absolute; z-index: 0; top: 18px; bottom: 22px; left: 39px;
  width: 2px; border-radius: 999px;
  background: linear-gradient(rgba(87,211,164,.45), rgba(var(--accent-rgb), .54) 55%, rgba(255,255,255,.08));
}
.academy-path-history-step,
.academy-path-step,
.academy-path-horizon {
  position: relative; z-index: 1; min-height: 86px; display: grid;
  grid-template-columns: 80px minmax(0, 1fr); align-items: center;
}
.academy-path-history-step { min-height: 66px; color: var(--muted); }
.academy-path-history-node,
.academy-path-node {
  width: 42px; height: 42px; display: grid; place-items: center; justify-self: center;
  border: 2px solid rgba(87,211,164,.32); border-radius: 15px; background: #17171b; color: #8cdec1;
}
.academy-path-history-node::before { content: "✓"; font-size: 15px; font-weight: 900; }
.academy-path-node { width: 58px; height: 58px; border-radius: 20px; }
.academy-path-node > span {
  width: 17px; height: 17px; border: 4px solid #ebe8ff; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .16);
}
.academy-path-step.current .academy-path-node {
  border-color: rgba(var(--accent-rgb), .72);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .38), rgba(var(--accent-rgb), .1));
  box-shadow: 0 14px 40px rgba(var(--accent-rgb), .14), inset 0 1px rgba(255,255,255,.1);
}
.academy-path-history-copy,
.academy-path-step-copy { min-width: 0; display: grid; gap: 4px; padding: 9px 12px; }
.academy-path-history-copy {
  margin: 4px 0; padding: 11px 14px; border: 1px solid rgba(87,211,164,.1); border-radius: 14px;
  background: linear-gradient(135deg, rgba(87,211,164,.035), rgba(255,255,255,.012));
}
.academy-path-history-copy strong { color: #d7d3dc; font-size: 14px; }
.academy-path-history-copy small { color: var(--muted-2); font-size: 11px; }
.academy-path-step-copy {
  padding: 15px 17px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 17px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .085), rgba(255,255,255,.018));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.academy-path-step-copy small {
  color: #aaa2ed; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.academy-path-step-copy h4 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.academy-path-step-copy p,
.academy-path-horizon p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.academy-path-horizon { min-height: 58px; }
.academy-path-node.muted {
  width: 28px; height: 28px; border: 1px dashed rgba(255,255,255,.13); border-radius: 50%; background: #141419;
}
.academy-path-node.muted > span { width: 5px; height: 5px; border: 0; background: var(--muted-2); box-shadow: none; }
.academy-activity {
  --academy-card-rgb: var(--accent-rgb); --academy-art-position: 18% 8%;
  position: relative; width: min(100%, 820px); display: grid; gap: 18px; justify-self: center;
  padding: clamp(20px, 2.5vw, 30px); overflow: hidden;
  border: 1px solid rgba(var(--academy-card-rgb), .26); border-radius: 28px;
  background: radial-gradient(circle at 88% 3%, rgba(var(--academy-card-rgb), .16), transparent 34%),
    linear-gradient(145deg, rgba(31,27,47,.96), rgba(13,12,18,.98) 56%);
  box-shadow: 0 26px 80px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07);
}
.academy-activity[data-academy-mechanic="read-aloud"] { --academy-card-rgb: 161,137,255; --academy-art-position: 84% 6%; }
.academy-activity[data-academy-mechanic="find-evidence"] { --academy-card-rgb: 87,211,164; --academy-art-position: 16% 94%; }
.academy-activity[data-academy-mechanic="order-meaning"] { --academy-card-rgb: 204,166,255; --academy-art-position: 84% 94%; }
.academy-activity-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 24vw, 210px);
  align-items: stretch; gap: clamp(16px, 3vw, 28px);
}
.academy-activity-heading { min-width: 0; display: grid; align-content: center; justify-items: start; gap: 11px; }
.academy-activity-heading .eyebrow { color: rgb(var(--academy-card-rgb)); }
.academy-activity h4 { font-size: clamp(32px, 4.6vw, 48px); line-height: .98; letter-spacing: -.055em; }
.academy-instruction { max-width: 560px; color: #d2cedb; font-size: clamp(14px, 1.55vw, 17px); line-height: 1.58; }
.academy-criterion {
  display: inline-flex; max-width: 100%; padding: 7px 10px;
  border: 1px solid rgba(var(--academy-card-rgb), .2); border-radius: 999px;
  background: rgba(var(--academy-card-rgb), .065); color: #bcb6cf; font-size: 12px; line-height: 1.35;
}
.academy-activity-art {
  position: relative; min-height: 146px; overflow: hidden;
  border: 1px solid rgba(var(--academy-card-rgb), .24); border-radius: 22px;
  background-image: linear-gradient(145deg, rgba(9,8,15,.02), rgba(9,8,15,.42)),
    url('/assets/academy-learning-constellation-v1.png');
  background-repeat: no-repeat; background-position: center, var(--academy-art-position); background-size: cover, 230% auto;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 18px 46px rgba(0,0,0,.22);
}
.academy-activity-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, transparent 20%, rgba(10,9,16,.24) 72%, rgba(10,9,16,.6));
}
.academy-prompt-card,
.academy-practice-card {
  display: grid; gap: 12px; padding: clamp(18px, 2.3vw, 24px);
  border: 1px solid rgba(var(--academy-card-rgb), .19); border-radius: 20px;
  background: linear-gradient(145deg, rgba(var(--academy-card-rgb), .07), rgba(0,0,0,.2));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.academy-practice-card[hidden] { display: none; }
.academy-prompt-label,
.academy-card-kicker {
  color: #aaa3c3; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
}
.academy-passage {
  margin: 0; padding: 18px 20px; border-left: 3px solid rgba(var(--academy-card-rgb), .72);
  border-radius: 0 16px 16px 0; background: rgba(0,0,0,.22); color: #f0edf5;
  font-size: clamp(19px, 2.25vw, 25px); font-weight: 560; line-height: 1.62; letter-spacing: -.012em;
}
.academy-question { color: var(--ink); font-size: clamp(15px, 1.6vw, 18px); font-weight: 760; line-height: 1.48; }
.academy-choice-options { display: grid; gap: 10px; }
.academy-choice-option {
  min-height: 58px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center;
  gap: 12px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px;
  background: rgba(0,0,0,.19); color: #e3dfe8; text-align: left; font: inherit; font-size: 15px; line-height: 1.5; cursor: pointer;
}
.academy-choice-option::before {
  content: ""; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.22); border-radius: 50%;
}
.academy-choice-option:hover { border-color: rgba(var(--academy-card-rgb), .42); }
.academy-choice-option[aria-checked="true"] {
  border-color: rgba(var(--academy-card-rgb), .62); background: rgba(var(--academy-card-rgb), .14); color: var(--ink);
}
.academy-choice-option[aria-checked="true"]::before {
  border-color: rgb(var(--academy-card-rgb)); background: rgb(var(--academy-card-rgb)); box-shadow: inset 0 0 0 4px #17151e;
}
.academy-order-answer {
  min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px; border: 1px dashed rgba(var(--academy-card-rgb), .36); border-radius: 15px;
  background: rgba(0,0,0,.17); color: var(--muted-2); font-size: 15px;
}
.academy-order-answer.ready { color: var(--ink); }
.academy-order-fragments,
.academy-order-controls,
.academy-voice-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.academy-order-token,
.academy-order-controls button,
.academy-voice-controls button {
  min-height: 48px; padding: 0 15px; border: 1px solid rgba(var(--academy-card-rgb), .3); border-radius: 13px;
  background: rgba(var(--academy-card-rgb), .08); color: #e1dcec; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
}
.academy-order-token[aria-pressed="true"] { opacity: .42; text-decoration: line-through; }
.academy-order-token:disabled { cursor: default; }
.academy-order-controls button:hover,
.academy-voice-controls button:hover { border-color: rgba(var(--academy-card-rgb), .5); color: var(--ink); }
.academy-voice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.academy-voice-heading strong { display: block; margin-top: 4px; font-size: 20px; letter-spacing: -.025em; }
.academy-voice-mark {
  width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(var(--academy-card-rgb), .42); border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #d5d0ff 0 12%, transparent 14%),
    radial-gradient(circle at 50% 44%, transparent 0 26%, rgba(var(--academy-card-rgb), .42) 28% 34%, transparent 36%);
}
.academy-voice-copy { max-width: 620px; color: #bbb5c7; font-size: 14px; line-height: 1.58; }
.academy-voice-controls .academy-voice-action {
  border-color: rgba(var(--academy-card-rgb), .46); background: rgba(var(--academy-card-rgb), .16); color: #e5e1ff;
}
.academy-voice-controls .academy-voice-action[aria-pressed="true"] {
  border-color: rgba(255,122,134,.54); background: rgba(255,122,134,.13); color: #ffc4ca; animation: pulse 1.2s infinite;
}
.academy-voice-status { min-height: 20px; color: #cbc5da; font-size: 13px; line-height: 1.5; }
.academy-voice-status[data-state="error"] { color: #efadb5; }
.academy-answer-field,
.academy-judgment-fields label { display: grid; gap: 8px; color: #d2cdd8; font-size: 14px; }
.academy-answer-field textarea,
.academy-judgment-fields textarea,
.academy-judgment-fields select {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  background: #0d0c11; color: var(--ink); color-scheme: dark; font: inherit;
}
.academy-answer-field textarea,
.academy-judgment-fields textarea { min-height: 96px; padding: 14px 15px; resize: vertical; font-size: 16px; line-height: 1.55; }
.academy-answer-field textarea { min-height: 118px; }
.academy-judgment-fields select { min-height: 44px; padding: 0 10px; }
.academy-answer-field textarea:disabled { opacity: .62; }
.academy-current-evidence {
  padding: 11px 12px; border: 1px solid rgba(87,211,164,.2); border-radius: 11px; background: rgba(87,211,164,.055);
}
.academy-current-evidence strong { color: #9be4c9; font-size: 15px; }
.academy-current-evidence p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.academy-judgment-fields { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.academy-judgment-fields[hidden] { display: none; }
.academy-judgment-fields legend { padding: 0 5px; color: #d5d1de; font-size: 15px; font-weight: 750; }
.academy-revision {
  width: min(100%, 560px); display: grid; justify-items: center; gap: 8px;
  justify-self: center; padding: 30px 24px; text-align: center;
}
.academy-revision-mark {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 4px;
  border: 1px solid rgba(87,211,164,.34); border-radius: 22px;
  background: rgba(87,211,164,.1); color: #8be0c0; font-size: 25px; font-weight: 900;
}
.academy-revision h4 { margin: 0; font-size: clamp(22px, 2.7vw, 30px); letter-spacing: -.04em; }
.academy-revision p:last-child { max-width: 480px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.academy-primary-dock { width: min(100%, 560px); display: flex; justify-content: center; justify-self: center; padding-top: 2px; }
.academy-primary-action { min-width: 188px; min-height: 48px; border-radius: 14px; }
.academy-space-view[data-academy-focus="activity"] .academy-stage-header,
.academy-space-view[data-academy-focus="feedback"] .academy-stage-header { display: none; }
.academy-space-view[data-academy-focus="activity"] .academy-action-status,
.academy-space-view[data-academy-focus="feedback"] .academy-action-status { width: min(100%, 720px); justify-self: center; }
.academy-space-view[data-academy-focus="activity"] .academy-action-status:not([data-state="error"]),
.academy-space-view[data-academy-focus="feedback"] .academy-action-status:not([data-state="error"]) { display: none; }
.academy-space-view[data-academy-focus="feedback"] #academy-choice-card,
.academy-space-view[data-academy-focus="feedback"] #academy-order-card { display: none; }
.academy-space-view[data-academy-focus="activity"] .academy-primary-dock,
.academy-space-view[data-academy-focus="feedback"] .academy-primary-dock {
  position: static; padding: 4px 0 max(14px, env(safe-area-inset-bottom)); background: transparent;
}
.academy-section-heading h4 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.03em; }
.academy-card-list,
.academy-learning-group { display: grid; gap: 8px; }
.academy-card {
  display: grid; gap: 7px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025);
}
.academy-card strong { font-size: 16px; }
.academy-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.academy-card small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.academy-empty { margin: 0; padding: 24px 14px; color: var(--muted); font-size: 14px; text-align: center; }
.academy-learning-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.academy-learning-summary article {
  padding: 15px 16px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 15px; background: rgba(var(--accent-rgb), .045);
}
.academy-learning-summary strong { font-size: 15px; }
.academy-learning-summary p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.academy-learning-group h5 { margin: 4px 0 0; color: #d0ccd7; font-size: 14px; }
.academy-event-list .academy-card { grid-template-columns: minmax(0, 1fr) auto; }
.academy-event-list .academy-card p { display: none; }
.workbench.academy-active.studio-dialogue-collapsed .studio-dialogue-header {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent);
}
.work-view { min-height: 0; overflow-y: auto; padding: 20px 22px 32px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.work-trace { display: grid; gap: 8px; }
.work-event {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.024);
}
.work-event-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(240,174,109,.07); }
.work-event.completed .work-event-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(87,211,164,.07); }
.work-event.measured .work-event-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(139,124,255,.08); }
.work-event.reported .work-event-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(139,124,255,.08); }
.work-event.failed .work-event-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,122,134,.07); }
.work-event-copy { min-width: 0; }
.work-event-copy strong, .work-event-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-event-copy strong { font-size: 12px; }
.work-event-copy small { margin-top: 2px; color: var(--muted-2); font-size: 10px; }
.work-event-state { color: var(--muted); font-size: 10px; white-space: nowrap; }
.work-expand {
  width: 100%; min-height: 34px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 10px; cursor: pointer;
}
/* An empty section used to float in the middle of a full-height canvas, which
   read as a broken screen rather than a new one. It now sits under the section
   description, where the eye already is. */
.work-empty {
  display: grid; align-content: start; justify-items: center; gap: 7px;
  padding: 34px 22px 22px; color: var(--muted); text-align: center;
}
.work-empty strong { color: #d8dce5; font-size: 14px; }
.work-empty span { max-width: 290px; font-size: 11px; line-height: 1.55; }
.work-empty .space-item-action { justify-self: center; min-height: 34px; margin-top: 8px; padding-inline: 15px; border-radius: 999px; }
.work-canvas { display: grid; align-content: start; gap: 13px; min-width: 0; }
.work-canvas.space-surface-is-empty { justify-items: center; padding-top: 6vh; }
.work-canvas.space-surface-is-empty .space-surface-summary { justify-items: center; max-width: 420px; text-align: center; }
.space-surface-summary {
  display: grid; gap: 5px; padding: 2px 2px 4px;
}
.space-surface-summary h3,
.space-surface-summary p { margin: 0; }
.space-surface-summary h3 { font-size: 19px; letter-spacing: -.03em; }
.space-surface-summary p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.work-canvas.space-surface-has-workflow { gap: 0; }
.workflow-surface {
  width: 100%; min-width: 0; display: grid; align-content: start; gap: 12px;
  margin: 0 auto; padding: 2px;
}
.workflow-hero {
  min-width: 0; display: grid; gap: 7px; padding: 17px 18px 16px;
  border: 1px solid rgba(var(--accent-rgb), .14); border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0, rgba(var(--accent-rgb), .13), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.workflow-hero .eyebrow { margin: 0; color: rgb(var(--accent-rgb)); }
.workflow-hero h3 { margin: 0; font-size: clamp(21px, 2.2vw, 31px); letter-spacing: -.045em; }
.workflow-hero > p:last-child:not(.eyebrow) {
  max-width: 720px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.workflow-stages {
  min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr);
  gap: 5px; margin: 0; padding: 4px; overflow-x: auto; list-style: none;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018);
  scrollbar-width: thin;
}
.workflow-stage {
  position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr);
  align-items: center; gap: 8px; min-height: 50px; padding: 8px 9px; border-radius: 10px;
  color: var(--muted-2);
}
.workflow-stage:not(:last-child)::after {
  position: absolute; top: 50%; right: -4px; width: 7px; height: 1px;
  background: var(--line-strong); content: '';
}
.workflow-stage-marker {
  width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%;
  background: transparent; box-shadow: 0 0 0 3px transparent;
}
.workflow-stage-copy { min-width: 0; display: grid; gap: 2px; }
.workflow-stage strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-stage small { color: inherit; font-size: 9px; font-variant-numeric: tabular-nums; }
.workflow-stage[data-state="complete"] { color: #8ecdb5; }
.workflow-stage[data-state="complete"] .workflow-stage-marker { background: currentColor; }
.workflow-stage[data-state="current"] {
  color: #f2efff; background: rgba(var(--accent-rgb), .13);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2);
}
.workflow-stage[data-state="current"] .workflow-stage-marker {
  border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb));
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13), 0 0 16px rgba(var(--accent-rgb), .35);
}
.workflow-stage[data-state="blocked"] { opacity: .45; }
.workflow-metrics {
  min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px; margin: 0;
}
.workflow-metric {
  min-width: 0; display: grid; gap: 2px; margin: 0; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02);
}
.workflow-metric dd { margin: 0; color: var(--ink); font-size: 17px; font-weight: 760; letter-spacing: -.035em; }
.workflow-metric dt { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-metric[data-tone="good"] dd { color: #8ed5b8; }
.workflow-metric[data-tone="attention"] dd { color: #d8c9ff; }
.workflow-metric[data-tone="muted"] { opacity: .62; }
.workflow-board { min-width: 0; display: grid; align-items: start; gap: 10px; }
.workflow-surface.is-focused { max-width: 920px; gap: 10px; }
.workflow-focus-header {
  min-width: 0; display: grid; gap: 4px; padding: 4px 3px 2px;
}
.workflow-focus-header .eyebrow { margin: 0; color: rgb(var(--accent-rgb)); }
.workflow-focus-header h3 {
  margin: 0; font-size: clamp(18px, 2vw, 26px); line-height: 1.12; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.workflow-focus-header > p:last-child:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; }
.workflow-focused-board .workflow-group { padding: 0; border: 0; background: transparent; }
.workflow-focused-board .workflow-group.is-primary > .space-item:first-of-type { background: rgba(var(--accent-rgb), .035); }
.workflow-group {
  min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,.016);
}
.workflow-group > h4 { margin: 0 2px 2px; }
.workflow-group.is-primary {
  border-color: rgba(var(--accent-rgb), .2);
  background: linear-gradient(155deg, rgba(var(--accent-rgb), .055), rgba(255,255,255,.012));
}
.workflow-group.is-primary > .space-item:first-of-type {
  border-color: rgba(var(--accent-rgb), .24); background: rgba(var(--accent-rgb), .055);
}
.workbench.canvas-full .workflow-surface { max-width: 1240px; padding-inline: clamp(4px, 1.5vw, 20px); }
@media (min-width: 1180px) {
  .workbench.canvas-full .workflow-board { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
  .workbench.canvas-full .workflow-board.workflow-focused-board { grid-template-columns: minmax(0, 1fr); }
  .workbench.canvas-full .workflow-group.is-primary { grid-row: span 2; }
}
@media (max-width: 520px) {
  .workflow-hero { padding: 15px; }
  .workflow-stages { grid-auto-columns: minmax(104px, 44%); }
  .workflow-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-group { padding: 10px; }
}
.work-canvas.space-surface-has-point-map { gap: 0; }
.point-map-surface {
  width: 100%; min-width: 0; display: grid; align-content: start; gap: 12px;
  margin: 0 auto; padding: 2px;
}
.point-map-hero {
  min-width: 0; display: grid; gap: 6px; padding: 15px 17px;
  border: 1px solid rgba(var(--accent-rgb), .14); border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0, rgba(var(--accent-rgb), .12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.014));
}
.point-map-hero .eyebrow { margin: 0; color: rgb(var(--accent-rgb)); }
.point-map-hero h3 { margin: 0; font-size: clamp(21px, 2.2vw, 31px); letter-spacing: -.045em; }
.point-map-hero > p:last-child:not(.eyebrow) {
  max-width: 780px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55;
}
.point-map-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.point-map-control {
  min-width: min(210px, 100%); display: grid; grid-template-columns: auto minmax(110px, 1fr);
  align-items: center; gap: 8px; padding: 7px 9px 7px 11px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
  background: rgba(255,255,255,.018); font-size: 9px; font-weight: 700;
}
.point-map-control select {
  min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent;
  font: inherit; font-size: 10px; cursor: pointer;
}
.point-map-content { min-width: 0; display: grid; align-items: start; gap: 10px; }
.point-map-visual,
.point-map-navigator {
  min-width: 0; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255,255,255,.015);
}
.point-map-visual { display: grid; gap: 8px; padding: 12px; overflow: hidden; }
.point-map-arrangement-copy { min-width: 0; display: grid; gap: 2px; padding: 0 2px; }
.point-map-arrangement-copy strong { color: var(--ink); font-size: 12px; }
.point-map-arrangement-copy span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.point-map-plot {
  width: 100%; height: auto; min-height: 260px; max-height: min(62vh, 720px);
  border: 1px solid rgba(var(--accent-rgb), .08); border-radius: 15px;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--accent-rgb), .055), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(86,207,161,.04), transparent 30%),
    rgba(8,8,12,.16);
  touch-action: manipulation;
}
.point-map-region {
  fill: rgba(var(--accent-rgb), .065); stroke: rgba(var(--accent-rgb), .34);
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: opacity 140ms ease, fill 140ms ease, stroke 140ms ease;
}
.point-map-region[data-group-index="1"] { fill: rgba(87,211,164,.065); stroke: rgba(87,211,164,.36); }
.point-map-region[data-group-index="2"] { fill: rgba(240,174,109,.065); stroke: rgba(240,174,109,.36); }
.point-map-region[data-group-index="3"] { fill: rgba(255,122,134,.065); stroke: rgba(255,122,134,.36); }
.point-map-region[data-group-index="4"] { fill: rgba(104,177,255,.065); stroke: rgba(104,177,255,.36); }
.point-map-region[data-group-index="5"] { fill: rgba(215,145,255,.065); stroke: rgba(215,145,255,.36); }
.point-map-region[data-group-index="6"] { fill: rgba(255,213,100,.065); stroke: rgba(255,213,100,.36); }
.point-map-region[data-group-index="7"] { fill: rgba(166,172,184,.05); stroke: rgba(166,172,184,.28); }
.point-map-region[data-selected="true"] {
  stroke-width: 2.5; filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), .2));
}
.point-map-point {
  fill: #9fa6b2; stroke: var(--ink); stroke-width: 2.25; stroke-opacity: .72;
  vector-effect: non-scaling-stroke; cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
  transition: opacity 120ms ease, r 120ms ease, filter 120ms ease;
}
.point-map-point[data-tone="good"] { fill: #57d3a4; }
.point-map-point[data-tone="attention"] { fill: #f0ae6d; }
.point-map-point[data-tone="danger"] { fill: #ff7a86; }
.point-map-point[data-tone="accent"] { fill: rgb(var(--accent-rgb)); }
.point-map-point[data-tone="muted"] { fill: #757b86; }
.point-map-point[data-dimmed="true"] { opacity: .15; }
.point-map-point[data-selected="true"] { filter: drop-shadow(0 0 11px rgba(var(--accent-rgb), .88)); }
.point-map-point:focus { outline: none; stroke: var(--ink); stroke-width: 3; }
.point-map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0 2px;
  color: var(--muted); font-size: 9px; list-style: none;
}
.point-map-legend li { display: inline-flex; align-items: center; gap: 5px; }
.point-map-legend-marker { width: 7px; height: 7px; border-radius: 50%; background: #9fa6b2; }
.point-map-legend li[data-tone="good"] .point-map-legend-marker { background: #57d3a4; }
.point-map-legend li[data-tone="attention"] .point-map-legend-marker { background: #f0ae6d; }
.point-map-legend li[data-tone="danger"] .point-map-legend-marker { background: #ff7a86; }
.point-map-legend li[data-tone="accent"] .point-map-legend-marker { background: rgb(var(--accent-rgb)); }
.point-map-legend li[data-tone="muted"] .point-map-legend-marker { background: #757b86; }
.point-map-inspector {
  min-height: 58px; display: grid; align-content: center; gap: 2px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018);
}
.point-map-inspector strong { color: var(--ink); font-size: 10px; }
.point-map-inspector small { color: rgb(var(--accent-rgb)); font-size: 8px; }
.point-map-inspector span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.point-map-open {
  width: max-content; min-height: 32px; margin-top: 5px; padding: 0 11px;
  border: 1px solid rgba(var(--accent-rgb), .32); border-radius: 9px;
  color: var(--ink); background: rgba(var(--accent-rgb), .09);
  font: inherit; font-size: 9px; font-weight: 760; cursor: pointer;
}
.point-map-open:hover,
.point-map-open:focus-visible { border-color: rgba(var(--accent-rgb), .52); background: rgba(var(--accent-rgb), .15); }
.point-map-navigator { display: grid; align-content: start; gap: 9px; padding: 12px; }
.point-map-navigator > header { display: grid; gap: 2px; padding: 1px 2px 4px; }
.point-map-navigator > header strong { color: var(--ink); font-size: 12px; }
.point-map-navigator > header span { color: var(--muted); font-size: 9px; }
.point-map-groups,
.point-map-cases > div { display: grid; gap: 6px; }
.point-map-group,
.point-map-case {
  width: 100%; min-width: 0; display: grid; gap: 4px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 12px; color: inherit;
  background: rgba(255,255,255,.018); text-align: left; cursor: pointer;
}
.point-map-group::before {
  width: 18px; height: 3px; border-radius: 999px; background: rgb(var(--accent-rgb)); content: '';
}
.point-map-group[data-group-index="1"]::before { background: #57d3a4; }
.point-map-group[data-group-index="2"]::before { background: #f0ae6d; }
.point-map-group[data-group-index="3"]::before { background: #ff7a86; }
.point-map-group[data-group-index="4"]::before { background: #68b1ff; }
.point-map-group[data-group-index="5"]::before { background: #d791ff; }
.point-map-group[data-group-index="6"]::before { background: #ffd564; }
.point-map-group[data-group-index="7"]::before { background: #8b909b; }
.point-map-group strong,
.point-map-case strong { overflow-wrap: anywhere; color: var(--ink); font-size: 10px; }
.point-map-group span,
.point-map-case span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.point-map-group small { color: var(--muted-2); font-size: 8px; }
.point-map-group:hover,
.point-map-group:focus-visible,
.point-map-group[data-selected="true"],
.point-map-case:hover,
.point-map-case:focus-visible,
.point-map-case[data-selected="true"] {
  border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .065);
}
.point-map-cases { min-width: 0; display: grid; gap: 7px; padding-top: 4px; border-top: 1px solid var(--line); }
.point-map-cases h4 { margin: 3px 2px 0; color: var(--muted); font-size: 9px; }
.point-map-cases > div { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.point-map-cases > p { margin: 0 2px; color: var(--muted-2); font-size: 8px; }
.workbench.canvas-full .point-map-surface { max-width: 1480px; padding-inline: clamp(4px, 1.5vw, 20px); }
@media (min-width: 1180px) {
  .workbench.canvas-full .point-map-content { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); }
  .workbench.canvas-full .point-map-navigator { max-height: min(72vh, 820px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 520px) {
  .point-map-hero { padding: 14px; }
  .point-map-controls { display: grid; }
  .point-map-control { width: 100%; }
  .point-map-visual,
  .point-map-navigator { padding: 9px; border-radius: 15px; }
  .point-map-plot { min-height: 220px; }
}
.space-surface-group { display: grid; gap: 8px; min-width: 0; }
.space-surface-group > h4 {
  margin: 3px 2px 0; color: #aaa5b4; font-size: 9px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
}
.space-item {
  min-width: 0; display: grid; gap: 7px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.space-item.is-selected-part {
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .075);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .08);
}
.space-item-header { display: flex; align-items: start; justify-content: space-between; gap: 10px; min-width: 0; }
.space-item-header > div { min-width: 0; display: grid; gap: 2px; }
.space-item strong { overflow-wrap: anywhere; color: #e7e5ed; font-size: 12px; }
.space-item small,
.space-item p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.space-item-meta { flex: 0 0 auto; color: var(--muted-2); font-size: 8px; }
.conversation-timeline {
  min-width: 0; display: grid; gap: 10px; padding-top: 4px;
}
.conversation-timeline-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.conversation-timeline-heading strong { font-size: 11px; }
.conversation-timeline-heading span { color: var(--muted-2); font-size: 9px; }
.conversation-facts {
  min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px; margin: 0;
}
.conversation-facts > div {
  min-width: 0; display: grid; gap: 2px; margin: 0; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02);
}
.conversation-facts > div[data-tone="attention"] { border-color: rgba(255,196,91,.24); }
.conversation-facts > div[data-tone="danger"] { border-color: rgba(255,122,134,.28); }
.conversation-facts > div[data-tone="good"] { border-color: rgba(105,220,169,.24); }
.conversation-facts dt { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.conversation-facts dd { min-width: 0; margin: 0; color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.conversation-messages { min-width: 0; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.conversation-message {
  width: min(88%, 690px); display: grid; gap: 5px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 13px 13px 13px 4px;
  background: rgba(255,255,255,.028);
}
.conversation-message[data-role="assistant"] {
  justify-self: end; border-radius: 13px 13px 4px 13px; background: rgba(var(--accent-rgb), .055);
}
.conversation-message[data-role="operator"] { border-color: rgba(105,220,169,.22); background: rgba(105,220,169,.045); }
.conversation-message[data-role="system"] { width: 100%; border-style: dashed; color: var(--muted); background: transparent; }
.conversation-message[data-focal="true"] {
  border-color: rgba(var(--accent-rgb), .48); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .09);
}
.conversation-message-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conversation-message-meta strong { font-size: 9px; }
.conversation-message-meta span { color: rgb(var(--accent-rgb)); font-size: 8px; font-weight: 760; }
.conversation-message-meta time { color: var(--muted-2); font-size: 8px; }
.conversation-message > p { color: var(--ink); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.space-winner-badge {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 999px; color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), .11);
  font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.space-item audio { width: 100%; max-width: 100%; height: 38px; }
.space-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.space-action-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.space-action-form[hidden] { display: none; }
.space-action-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; }
.space-action-field > span { color: var(--ink); font-weight: 650; }
.space-action-field input:not([type="checkbox"]),
.space-action-field select,
.space-action-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
}
.space-action-field textarea { resize: vertical; line-height: 1.45; }
.space-action-field-json textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.space-action-field input[type="file"] { max-width: 100%; color: var(--muted); font-size: 10px; }
.space-action-checkbox { display: flex; align-items: flex-start; gap: 8px; }
.space-action-checkbox input { margin-top: 2px; }
.space-action-checkbox > span { min-width: 0; }
.space-item-action {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: rgba(255,255,255,.035); color: #d7d4df; font-size: 9px; font-weight: 720; cursor: pointer;
}
.space-item-action.primary { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .14); color: #ece9ff; box-shadow: none; }
.space-item-action.assistant-action {
  border-color: rgba(var(--accent-rgb), .45); background: rgb(var(--accent-rgb)); color: #09070f;
}
.space-item-action.next-action { margin-left: auto; }
.space-item-action.danger { border-color: rgba(255,122,134,.25); color: #ffb0b8; }
.space-judgment-form { display: grid; gap: 8px; padding-top: 3px; }
.space-rating { display: flex; flex-wrap: wrap; gap: 5px; }
.space-rating button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 9px; cursor: pointer;
}
.space-rating button[aria-pressed="true"] { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.16); color: white; }
.space-judgment-form textarea {
  width: 100%; min-height: 68px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(5,5,8,.3); color: var(--ink); font-size: 11px;
}
.space-winner-choice {
  display: flex; align-items: center; gap: 8px; color: #c7c3d0; font-size: 10px; cursor: pointer;
}
.space-winner-choice input { width: 16px; height: 16px; accent-color: var(--accent); }
.space-surface-status {
  min-height: 18px; color: var(--muted); font-size: 9px;
}

/* Projects is the first Space whose Canvas is a durable domain workspace, not
   a generic card feed. The Passport stays inside the shared Now / Results /
   Learning grammar: it adds project density without creating a second shell
   or a second chat. */
.work-canvas.project-passport {
  width: min(100%, 1180px); min-width: 0; margin-inline: auto; gap: 15px;
}
.project-passport-hero,
.project-passport-stats,
.project-passport-grid,
.project-passport-section { min-width: 0; max-width: 100%; }
.work-canvas.project-unavailable {
  align-content: center; justify-items: center;
}
.project-unavailable-card {
  width: min(620px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 20px; align-items: start; padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(152,137,255,.2); border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(141,119,255,.14), transparent 34%),
    rgba(17,16,25,.78);
  box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.project-unavailable-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(157,143,255,.28); border-radius: 15px;
  color: #c9c0ff; background: rgba(121,97,255,.12); font-size: 24px; line-height: 1;
}
.project-unavailable-card > div { min-width: 0; display: grid; justify-items: start; gap: 10px; }
.project-unavailable-eyebrow {
  color: #a99cff; font-size: 10px; font-weight: 760; letter-spacing: .15em; text-transform: uppercase;
}
.project-unavailable-card h3 {
  margin: 0; color: #f0edf7; font-size: clamp(22px,4vw,31px); letter-spacing: -.035em;
}
.project-unavailable-card p {
  max-width: 52ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65;
}
.project-unavailable-card .space-item-action { min-height: 40px; margin-top: 4px; padding-inline: 16px; }
.project-unavailable-card .space-item-action:disabled { opacity: .58; cursor: wait; }
.project-passport-hero {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px;
  padding: clamp(18px, 2.4vw, 30px); border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 22px; background:
    radial-gradient(circle at 92% -10%, rgba(var(--accent-rgb), .21), transparent 38%),
    linear-gradient(145deg, rgba(35,32,50,.76), rgba(20,19,27,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 20px 60px rgba(0,0,0,.14);
}
.project-passport-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(circle, rgba(255,255,255,.24) .6px, transparent .8px);
  background-size: 29px 29px; mask-image: linear-gradient(115deg, transparent 8%, black, transparent 74%);
}
.project-passport-hero > * { position: relative; z-index: 1; }
.project-passport-hero > div:first-child { min-width: 0; }
.project-passport-hero h3 {
  margin: 10px 0 7px; font-size: clamp(25px, 3.1vw, 42px); line-height: 1.03; letter-spacing: -.05em;
}
.project-passport-hero p {
  max-width: 680px; margin: 0; color: #aaa7b5; font-size: 12px; line-height: 1.65;
}
.project-passport-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.project-passport-meta span {
  padding: 5px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px;
  color: #bcb8c8; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 760;
  letter-spacing: .04em;
}
.project-passport-meta span:last-child { border-color: rgba(87,211,164,.17); color: #92d4bd; }
.project-passport-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.project-passport-actions .space-item-action { min-height: 38px; max-width: 100%; padding-inline: 14px; border-radius: 11px; white-space: normal; }
.project-passport-actions a,
.project-primary-result a {
  min-height: 38px; max-width: 100%; display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 11px; color: #c9c5d3;
  background: rgba(255,255,255,.028); font-size: 11px; font-weight: 740; text-decoration: none;
  overflow-wrap: anywhere; white-space: normal;
}
.project-passport-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.project-passport-stats > span {
  min-width: 0; display: grid; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022);
}
.project-passport-stats strong { color: #ece9f4; font-size: 17px; line-height: 1; }
.project-passport-stats small { color: var(--muted-2); font-size: 10px; }
.project-passport-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 10px;
}
.project-passport-section {
  min-width: 0; display: grid; align-content: start; gap: 9px; padding: 16px;
  border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.018);
}
.project-passport-section > header { display: grid; gap: 3px; }
.project-passport-section > header h4 { margin: 0; color: #e4e1eb; font-size: 15px; letter-spacing: -.02em; }
.project-passport-section > header p { margin: 0; color: var(--muted-2); font-size: 11px; line-height: 1.55; }
.project-task-list,
.project-document-grid,
.project-material-grid,
.project-session-list,
.project-capability-list { display: grid; gap: 7px; min-width: 0; }
.project-document-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.project-material-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.project-task {
  min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px; background: rgba(10,10,15,.24);
}
.project-task-status {
  width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--warning);
  box-shadow: 0 0 0 4px rgba(240,174,109,.055);
}
.project-task-status.running,
.project-task-status.active { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .07); }
.project-task > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.project-task strong { overflow-wrap: anywhere; color: #ddd9e5; font-size: 13px; }
.project-task small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.project-task-meta { max-width: 118px; color: var(--muted-2); font-size: 10px; line-height: 1.35; text-align: right; }
.project-document {
  min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px; background: rgba(9,9,13,.22);
}
.project-document.featured { border-color: rgba(var(--accent-rgb), .2); background: rgba(var(--accent-rgb), .04); }
.project-document summary {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 10px; padding: 12px 13px; cursor: pointer; list-style: none;
}
.project-document summary::-webkit-details-marker { display: none; }
.project-document summary::after { content: "+"; grid-column: 2; grid-row: 1; color: #8f899d; font-size: 14px; }
.project-document[open] summary::after { content: "−"; }
.project-document summary > span:first-child { min-width: 0; display: grid; gap: 4px; }
.project-document summary > span:last-of-type { grid-column: 2; grid-row: 2; color: var(--muted-2); font-size: 10px; }
.project-document summary strong { color: #dedbe6; font-size: 13px; }
.project-document summary small {
  display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.5;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-line;
}
.project-document-body {
  max-height: min(58dvh, 620px); padding: 13px; overflow: auto;
  border-top: 1px solid rgba(255,255,255,.06); font-size: 11px;
}
.project-material {
  min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  gap: 9px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; background: rgba(8,8,12,.2);
}
.project-material-mark {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px;
  color: #afa6ff; background: rgba(var(--accent-rgb), .1); font-size: 11px; font-style: normal;
}
.project-material > span:last-child { min-width: 0; display: grid; gap: 3px; }
.project-material strong { overflow: hidden; color: #d8d4df; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-material small { overflow: hidden; color: var(--muted-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-primary-result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px;
  border: 1px solid rgba(87,211,164,.18); border-radius: 17px;
  background: linear-gradient(110deg, rgba(87,211,164,.07), rgba(255,255,255,.018));
}
.project-primary-result > div { display: grid; gap: 3px; }
.project-primary-result span { color: #88cbb4; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-primary-result strong { color: #e2ebe8; font-size: 15px; }
.project-people-list { display: flex; flex-wrap: wrap; gap: 7px; }
.project-person {
  min-width: 150px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center;
  gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px;
}
.project-person i {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px;
  color: #dcd8f9; background: rgba(var(--accent-rgb), .12); font-size: 11px; font-style: normal; font-weight: 800;
}
.project-person > span { min-width: 0; display: grid; gap: 1px; }
.project-person strong { overflow: hidden; color: #d9d5e0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-person small { color: var(--muted-2); font-size: 10px; }
.project-session-list article,
.project-capability-list article {
  display: grid; gap: 4px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; background: rgba(8,8,12,.18);
}
.project-session-list strong,
.project-capability-list strong { color: #dcd8e4; font-size: 12px; }
.project-session-list p,
.project-capability-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.project-session-list small { color: var(--muted-2); font-size: 10px; }
.project-passport-empty { margin: 0; padding: 13px; color: var(--muted-2); font-size: 11px; line-height: 1.55; text-align: center; }
.workbench.canvas-full .project-passport-hero p { font-size: 13px; }
.workbench.canvas-full .project-passport-section > header h4 { font-size: 16px; }

@media (max-width: 700px) {
  .project-unavailable-card { grid-template-columns: 1fr; gap: 14px; }
  .project-passport-hero { grid-template-columns: 1fr; align-items: start; }
  .project-passport-actions { justify-content: flex-start; }
  .project-passport-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-task { grid-template-columns: 8px minmax(0, 1fr); }
  .project-task-meta { grid-column: 2; max-width: none; text-align: left; }
  .project-primary-result { align-items: flex-start; flex-direction: column; }
}
.canvas-result { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.canvas-result header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.canvas-result header strong { font-size: 13px; }
.canvas-result header span { color: var(--muted-2); font-size: 9px; }
.canvas-body { color: #d1ced9; font-size: 13px; overflow-wrap: anywhere; }
.canvas-body p, .canvas-body pre, .canvas-body ul, .canvas-body h1, .canvas-body h2, .canvas-body h3 { margin: 0 0 10px; }
.canvas-body > :last-child { margin-bottom: 0; }
.canvas-body pre { max-width: 100%; padding: 11px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #08080c; }
.canvas-body a { color: #b7aeff; }
.canvas-artifacts { display: grid; gap: 7px; margin-top: 13px; }
.canvas-artifact { padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; color: #c8c4d1; font-size: 11px; }
.canvas-artifact a { color: #b7aeff; }
.canvas-artifact .artifact-proof { margin-top: 4px; }
 .onboarding-canvas {
  position: relative; overflow: hidden; display: grid; gap: 14px; padding: 17px;
  container: onboarding / inline-size;
  border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 18px;
  background:
    radial-gradient(circle at 92% 4%, rgba(var(--accent-rgb), .18), transparent 34%),
    linear-gradient(145deg, rgba(33,30,49,.86), rgba(15,14,22,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 48px rgba(0,0,0,.18);
}
.onboarding-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) .6px, transparent .8px);
  background-size: 23px 23px; mask-image: linear-gradient(130deg, black, transparent 58%);
}
.onboarding-canvas > * { position: relative; z-index: 1; }
.onboarding-canvas > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.onboarding-canvas h3 { margin: 5px 0 0; font-size: 20px; line-height: 1.08; letter-spacing: -.035em; }
.onboarding-progress {
  flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .36); border-radius: 50%;
  background: rgba(var(--accent-rgb), .1); color: #ddd8ff; font-size: 10px; font-weight: 800;
}
.onboarding-copy { margin: 0; color: #aaa7b5; font-size: 11px; line-height: 1.55; }
.onboarding-canvas.has-document {
  min-height: 100%; grid-template-rows: auto auto auto minmax(540px, 1fr); overflow: visible;
  padding: 14px; background: rgba(11,18,32,.98);
}
.onboarding-document-intro { display: grid; gap: 3px; padding: 0 2px; }
.onboarding-document-intro strong { color: #eee6d4; font-size: 13px; }
.onboarding-document-intro span { color: #9aa7c4; font-size: 10px; line-height: 1.5; }
.onboarding-document {
  width: 100%; min-height: 540px; height: 100%; border: 1px solid rgba(232,169,79,.2);
  border-radius: 14px; background: #0b1220;
}
.workbench.canvas-full .onboarding-canvas.has-document {
  min-height: calc(100dvh - 88px); grid-template-rows: minmax(0, 1fr); padding: 10px;
}
.workbench.canvas-full .onboarding-canvas.has-document > header,
.workbench.canvas-full .onboarding-canvas.has-document > .onboarding-copy,
.workbench.canvas-full .onboarding-canvas.has-document > .onboarding-document-intro { display: none; }
.workbench.canvas-full .onboarding-document { min-height: 0; }
.space-owned-canvas.has-document {
  min-height: 100%;
  grid-template-rows: minmax(540px, 1fr);
  padding: 0;
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), .18);
  background: #07111f;
}
.space-owned-document {
  min-height: 540px;
  border: 0;
  border-radius: inherit;
}
.workbench.canvas-full .space-owned-canvas.has-document {
  min-height: calc(100dvh - 20px);
  padding: 0;
  border-radius: 16px;
}
.workbench.canvas-full .space-owned-document { min-height: 0; }
.onboarding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.onboarding-card {
  position: relative; min-height: 132px; display: grid; grid-template-rows: auto 1fr auto; gap: 9px;
  padding: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.035); color: var(--ink); text-align: left; cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.onboarding-card:hover {
  transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .09);
}
.onboarding-card.complete { border-color: rgba(87,211,164,.2); }
.onboarding-card-header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.onboarding-card-header strong { font-size: 12px; }
.onboarding-card-header small {
  max-width: 74px; overflow: hidden; color: var(--muted-2); font-size: 8px;
  text-overflow: ellipsis; white-space: nowrap;
}
.onboarding-card.complete .onboarding-card-header small { color: var(--success); }
.onboarding-card-copy { color: #9c99a8; font-size: 9px; line-height: 1.48; }
.onboarding-card-arrow { color: #c7c0ff; font-size: 15px; }

/* The work surface is independently resizable, so viewport media queries cannot
   protect these cards from clipping. Let the cards follow the canvas itself. */
@container onboarding (max-width: 390px) {
  .onboarding-grid { grid-template-columns: minmax(0, 1fr); }
  .onboarding-card { min-width: 0; min-height: 112px; }
  .onboarding-card-header { align-items: flex-start; flex-wrap: wrap; }
  .onboarding-card-header > strong { min-width: 0; overflow-wrap: anywhere; }
  .onboarding-card-header > small {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .onboarding-card-copy { overflow-wrap: anywhere; }
}

@container onboarding (min-width: 720px) {
  .onboarding-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.onboarding-complete {
  min-height: 40px; border: 1px solid rgba(var(--accent-rgb), .32); border-radius: 12px;
  background: rgba(var(--accent-rgb), .12); color: #e1ddff; font-size: 10px; font-weight: 800;
  cursor: pointer;
}
.onboarding-complete:hover { background: rgba(var(--accent-rgb), .2); }
.work-surface-note { padding: 10px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted-2); font-size: 10px; }
.message.micro-status { margin-bottom: 20px; }
.message.micro-status .bubble { color: #9d9da7; font-size: 13px; }
.space-event-receipt {
  width: min(100%, 680px); display: grid; grid-template-columns: 24px minmax(0, 1fr);
  align-items: center; gap: 10px; margin: 0 auto 18px; padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 13px;
  background: rgba(var(--accent-rgb), .055); color: #d9d6e2;
}
.space-event-receipt-mark {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(var(--accent-rgb), .13); color: #cfc9ff; font-size: 12px;
}
.space-event-receipt-copy { min-width: 0; display: grid; gap: 2px; }
.space-event-receipt-copy small { color: var(--muted-2); font-size: 11px; }
.space-event-receipt-copy strong { font-size: 12px; }
.space-event-receipt-copy span {
  overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;
}
.turn-status { display: inline-flex; min-height: 22px; align-items: center; gap: 8px; }
.turn-status-pulse { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); }
.turn-status-pulse i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .28;
  animation: turn-status-breathe 1.35s ease-in-out infinite;
}
.turn-status-pulse i:nth-child(2) { animation-delay: .16s; }
.turn-status-pulse i:nth-child(3) { animation-delay: .32s; }
.turn-status-label { color: #aaa8b3; }
.turn-status-elapsed { color: #74727e; font-variant-numeric: tabular-nums; white-space: nowrap; }

.composer {
  position: relative; grid-row: 3; align-self: end; width: min(780px, calc(100% - 48px));
  display: grid; gap: 8px;
  margin: 0 auto max(clamp(22px, 3vh, 34px), env(safe-area-inset-bottom)); padding: 0;
  border: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}
.composer-frame {
  position: relative; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 30px;
  background: rgba(24,31,41,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(24px) saturate(112%);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.conversation-toolbar {
  min-width: 0; display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; padding: 0 4px;
}
.conversation-toolbar .ask-teamon { margin-left: auto; }
.composer-frame:focus-within {
  border-color: rgba(var(--accent-rgb),.3);
  box-shadow: 0 16px 42px rgba(0,0,0,.27), 0 0 0 3px rgba(var(--accent-rgb),.055);
}
.composer-row {
  min-width: 0; min-height: 46px; display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto auto;
  align-items: end; gap: 8px;
}
.composer textarea {
  align-self: center; display: block; width: 100%; min-height: 24px; max-height: 168px; resize: none;
  padding: 0 4px; overflow-y: auto; border: 0; background: transparent;
  color: var(--ink); font-size: 16px; line-height: 24px; letter-spacing: -.01em;
  box-shadow: none !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
.composer textarea:focus-visible {
  outline: 0;
}
.composer-frame:has(textarea:focus-visible) {
  outline: 2px solid rgba(var(--accent-rgb), .72);
  outline-offset: 2px;
}
.composer textarea::placeholder { color: #85858e; opacity: 1; }
.ask-teamon {
  align-self: center; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px;
  border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 999px; background: rgba(var(--accent-rgb),.065);
  color: #a9a3bd; font-size: 10px; white-space: nowrap; cursor: pointer;
}
.ask-teamon:hover { border-color: rgba(var(--accent-rgb),.42); color: #ddd8f5; }
.ask-teamon.active {
  border-color: rgba(var(--accent-rgb),.56); background: rgba(var(--accent-rgb),.18); color: #eeeaff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.055);
}
.composer-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.one-member-orbit {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid rgba(var(--accent-rgb), .7);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(var(--accent-rgb), .11);
  position: relative;
}
.one-member-orbit::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgb(var(--accent-rgb)); }
.message-agent { display: block; margin: 0 0 5px; color: rgb(var(--accent-rgb)); font-size: 10px; font-weight: 780; letter-spacing: .04em; }

.one-members-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background: rgba(19,19,25,.98);
  color: #f2f0f7;
  box-shadow: 0 32px 100px rgba(0,0,0,.58);
}
.one-members-dialog::backdrop { background: rgba(5,5,9,.72); backdrop-filter: blur(10px); }
.one-members-dialog-inner { display: grid; gap: 18px; padding: clamp(20px, 4vw, 32px); }
.one-members-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.one-members-dialog h2 { margin: 3px 0 6px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.045em; }
.one-members-dialog header p:last-child { margin: 0; color: #9895a5; font-size: 13px; }
.one-members-list { display: grid; gap: 9px; }
.one-member-option {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background: rgba(255,255,255,.025);
  color: inherit;
  text-align: left;
}
.one-member-option[aria-checked="true"] { border-color: rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .09); }
.one-member-option strong, .one-member-option small { display: block; }
.one-member-option small { margin-top: 3px; color: #92909d; }
.one-member-option .one-member-remove { border: 0; background: transparent; color: #9e99aa; cursor: pointer; }
.one-members-connect, .one-members-share { border-top: 1px solid rgba(255,255,255,.075); padding-top: 16px; }
.one-members-connect summary { cursor: pointer; font-weight: 720; }
.one-members-connect form { display: grid; gap: 12px; margin-top: 14px; }
.one-members-connect label { display: grid; gap: 6px; color: #aaa6b4; font-size: 11px; font-weight: 700; }
.one-members-connect input { min-width: 0; padding: 11px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #101015; color: #f4f1f8; }
.one-members-actions, .one-members-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.one-members-actions span { color: #a39fad; font-size: 11px; }
.one-members-share small { display: block; margin-top: 4px; color: #8f8b99; }
.one-members-share button { flex: 0 0 auto; }
.one-access-code { grid-column: 1 / -1; user-select: all; overflow-wrap: anywhere; padding: 11px 13px; border-radius: 12px; background: rgba(var(--accent-rgb), .09); color: #eeeaf8; font: 12px ui-monospace, monospace; }
.one-access-grants { flex-basis: 100%; display: grid; gap: 7px; }
.one-access-grant { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aaa6b4; font-size: 11px; }
.one-access-grant button { border: 0; background: transparent; color: #b59aab; cursor: pointer; }
@media (max-width: 620px) {
  .one-members-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 20px); border-radius: 22px; }
  .one-members-dialog-inner { padding: 18px; }
  .one-members-actions, .one-members-share { align-items: stretch; flex-direction: column; }
}
.composer-actions-end { justify-content: flex-end; }
.round-button { flex: 0 0 39px; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; }
.round-button:hover, .glass-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.08); }
.composer .round-button {
  flex-basis: 40px; width: 40px; height: 40px; border-color: transparent;
  background: rgba(255,255,255,.025); font-size: 21px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.composer .round-button:hover { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.composer-icon {
  display: block; width: 22px; height: 22px; overflow: visible;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.voice-icon { stroke-width: 1.9; }
.send-icon { width: 21px; height: 21px; stroke-width: 2.25; }
#voice.recording { color: white; border-color: rgba(255,122,134,.7); background: rgba(255,122,134,.24); animation: pulse 1.2s infinite; }
.send-button {
  flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #b7b7bd; color: #1b1b1e; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.send-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.32); }
.send-button:disabled { opacity: .35; cursor: default; }
.round-button.stop { color: var(--danger); }
.composer-status {
  position: absolute; top: calc(100% + 6px); left: 18px; z-index: 1;
  min-width: 0; max-width: calc(100% - 36px); overflow: hidden;
  color: #aaa7b5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap;
}
.composer-status::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 2px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
}
.composer-status-elapsed { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 4px 8px; }
.shared-reply {
  min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px;
  margin: 0 3px 7px; padding: 7px 9px; border-left: 2px solid rgba(var(--accent-rgb),.62);
  border-radius: 4px 10px 10px 4px; background: rgba(var(--accent-rgb),.07);
}

.message:not(.micro-status):not(.action-receipt):not(.memory-update-receipt) {
  position: relative;
  padding-bottom: 30px;
}
.message-actions {
  position: absolute; bottom: 0; left: 2px;
  display: flex; align-items: center; gap: 2px; width: max-content;
  opacity: 0; pointer-events: none; transform: translateY(-2px);
  transition: opacity .12s ease, transform .14s ease;
}
.message:hover .message-actions,
.message:focus-within .message-actions {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.message.micro-status .message-actions,
.bubble.streaming + .message-actions { display: none; }
.message-action {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted-2); cursor: pointer;
}
.message-action:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.message-action:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.7); outline-offset: 1px; }
.message-action.is-active { background: rgba(var(--accent-rgb),.13); color: rgb(var(--accent-rgb)); }
.message-action.is-copied { background: rgba(87,211,164,.13); color: var(--success); }
.message-action svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: none) {
  .message:not(.micro-status) .message-actions { opacity: 1; pointer-events: auto; transform: none; }
}
.shared-message-actions.message-actions {
  position: static; inset: auto; align-self: flex-start; min-height: 28px; margin-top: -2px;
  opacity: 0; pointer-events: none; transform: translateY(-2px);
}
.shared-message.own .shared-message-actions.message-actions { align-self: flex-end; }
.shared-message:hover .shared-message-actions,
.shared-message:focus-within .shared-message-actions {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
@media (hover: none) {
  .shared-message-actions.message-actions { opacity: 1; pointer-events: auto; transform: none; }
}
.shared-reply[hidden] { display: none; }
.shared-reply > span { min-width: 0; display: grid; gap: 1px; }
.shared-reply small { color: var(--muted-2); font-size: 8px; }
.shared-reply strong { overflow: hidden; color: #cfcbdc; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.shared-reply button { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.studio-selection-chip {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 9px; margin: 0 3px 8px; padding: 8px 10px;
  border: 1px solid rgba(var(--accent-rgb),.26); border-radius: 12px;
  background: rgba(var(--accent-rgb),.08); color: #d8d3ec;
}
.studio-selection-mark { width: 8px; height: 8px; border-radius: 3px; border: 1.5px solid #a89cff; }
.studio-selection-chip > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.studio-selection-chip small { color: var(--muted-2); font-size: 8px; }
.studio-selection-chip strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.studio-selection-chip button { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.attachment-chip { display: flex; align-items: center; gap: 7px; max-width: 230px; padding: 6px 9px; border-radius: 9px; background: var(--surface-soft); color: #c7c4d2; font-size: 10px; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }

.drawer-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.drawer { position: fixed; z-index: 21; inset: 0 0 0 auto; width: min(520px, 100vw); display: grid; grid-template-rows: auto auto minmax(0,1fr); border-left: 1px solid var(--line); background: rgba(24,24,27,.97); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .24s cubic-bezier(.22,.8,.25,1); }
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 18px 10px; }
.drawer-header h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.03em; }
.drawer-tabs { display: flex; gap: 3px; padding: 0 12px 9px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.nav-item { min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.nav-item.active { background: var(--surface-soft); color: var(--ink); }
.nav-item span { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--accent-rgb), .18); color: #c4bcff; font-size: 9px; }
.drawer-content { min-height: 0; overflow-y: auto; padding: 16px 18px 36px; }
.section-intro { margin-bottom: 15px; }
.section-intro h3 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.035em; }
.section-intro p { margin: 0; color: var(--muted); font-size: 12px; }
.mission-card {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 14px 15px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--accent-rgb), .12), transparent 52%),
    rgba(255, 255, 255, .025);
}
.mission-card[hidden] { display: none; }
.mission-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mission-card-heading span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mission-card-heading strong { color: #f3f0f8; font-size: 15px; letter-spacing: -.02em; text-align: right; }
.mission-card p { margin: 0; color: #cbc7d4; font-size: 12px; line-height: 1.5; }
.mission-card small { color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.panel { margin-bottom: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; font-size: 13px; }
.panel pre { max-height: 260px; margin: 0; overflow: auto; white-space: pre-wrap; color: #b8b5c3; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.identity-form { display: grid; gap: 13px; }
.identity-form label { display: grid; gap: 7px; color: #d5d2df; font-size: 12px; }
.identity-form input,
.identity-form textarea {
  width: 100%; padding: 12px;
  border: 1px solid var(--line); border-radius: 11px; background: #0c0b11; color: #d7d4e0;
  font-size: 13px; line-height: 1.55;
}
.identity-form input { min-height: 42px; }
.identity-form textarea { min-height: 170px; resize: vertical; }
.identity-form input:focus,
.identity-form textarea:focus { border-color: rgba(var(--accent-rgb), .55); }
.identity-form > small { color: var(--muted-2); font-size: 10px; }
.identity-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.identity-actions .muted { min-height: 16px; font-size: 10px; }
.identity-actions .primary { flex: 0 0 auto; min-height: 34px; padding-inline: 12px; font-size: 10px; }
.list { display: grid; }
.list-row { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.list-row small { color: var(--muted); }
.card-grid { display: grid; gap: 10px; }
.knowledge-intro { display: grid; gap: 9px; margin-bottom: 12px; }
.knowledge-readiness { display: flex; align-items: center; gap: 8px; min-width: 0; }
.knowledge-readiness > span:last-child {
  min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px;
  text-overflow: ellipsis; white-space: nowrap;
}
.knowledge-sheet {
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.knowledge-block { display: grid; gap: 5px; padding: 12px 14px; }
.knowledge-block + .knowledge-block { border-top: 1px solid var(--line); }
.knowledge-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.knowledge-block-heading strong { color: var(--ink); font-size: 12px; }
.knowledge-block-title { display: flex; align-items: center; gap: 7px; }
.knowledge-help { min-height: 15px; margin: 0; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.knowledge-add { flex: 0 0 auto; min-height: 30px; padding-inline: 10px; border-radius: 9px; font-size: 9px; }
.knowledge-sources .list { margin-top: 3px; }
.knowledge-sources .list > .muted { margin: 0; padding: 3px 0 1px; color: var(--muted-2); font-size: 10px; }
.knowledge-journal-summary {
  overflow: hidden; color: var(--muted-2); font-size: 9px;
  text-overflow: ellipsis; white-space: nowrap;
}
.journal-filters {
  display: flex; gap: 5px; min-width: 0; margin: 2px 0 4px; overflow-x: auto;
  scrollbar-width: none;
}
.journal-filters::-webkit-scrollbar { display: none; }
.journal-filters button {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 9px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 9px; cursor: pointer;
}
.journal-filters button:hover { border-color: var(--line-strong); color: var(--ink); }
.journal-filters button[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), .32);
  background: rgba(var(--accent-rgb), .13); color: #ddd8ff;
}
.journal-filters button span {
  min-width: 17px; padding: 1px 5px; border-radius: 999px;
  background: rgba(255,255,255,.055); color: var(--muted-2); text-align: center;
}
.journal-filters button[aria-pressed="true"] span { color: #eeeaff; }
.knowledge-journal { display: grid; position: relative; min-width: 0; margin-top: 3px; }
.knowledge-journal::before {
  position: absolute; top: 15px; bottom: 15px; left: 4px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .24) 10%, var(--line) 90%, transparent);
  content: '';
}
.knowledge-view .timeline-empty { padding: 3px 0 1px; font-size: 10px; text-align: left; }
.memory-card {
  display: grid; gap: 6px; min-width: 0; padding: 10px 2px 10px 20px;
  border: 0; border-radius: 0; background: transparent;
}
.journal-entry { position: relative; }
.journal-entry + .journal-entry { border-top: 1px solid rgba(255,255,255,.055); }
.journal-entry::before {
  position: absolute; top: 15px; left: 1px; z-index: 1; width: 7px; height: 7px;
  border: 2px solid #1a181f; border-radius: 50%; background: #777281; content: '';
}
.journal-entry-pending {
  padding-right: 10px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .055), transparent 70%);
}
.journal-entry-pending::before { background: rgb(var(--accent-rgb)); }
.journal-entry-accepted::before { background: #55cdb4; }
.journal-entry-labels { display: flex; align-items: center; gap: 6px; min-width: 0; }
.journal-state {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 999px; color: #c8c4d0;
  background: rgba(255,255,255,.025); font-size: 8px; font-weight: 650;
}
.journal-state-pending { border-color: rgba(var(--accent-rgb), .28); color: #c7bcff; }
.journal-state-accepted { border-color: rgba(85,205,180,.25); color: #9de3d4; }
.memory-card p { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #e2dfe7; font-size: 12px; line-height: 1.55; }
.memory-card small { min-width: 0; overflow-wrap: anywhere; color: var(--muted-2); font-size: 10px; }
.memory-context { overflow-wrap: anywhere; }
.memory-evidence { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.memory-evidence summary { width: fit-content; cursor: pointer; color: #bab4d5; }
.memory-evidence ul { display: grid; gap: 5px; margin: 7px 0 0; padding-left: 18px; color: var(--muted); }
.memory-evidence li { min-width: 0; overflow-wrap: anywhere; }
.learning-editor {
  display: grid; gap: 9px; padding: 10px; border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 10px; background: rgba(0,0,0,.14);
}
.learning-editor[hidden] { display: none; }
.learning-editor label { display: grid; gap: 5px; color: #c9c5d5; font-size: 10px; }
.learning-editor textarea, .learning-editor input, .learning-editor select {
  width: 100%; min-height: 34px; padding: 8px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: rgba(255,255,255,.035); color: var(--ink);
}
.learning-editor textarea { resize: vertical; line-height: 1.45; }
.learning-editor textarea:focus, .learning-editor input:focus, .learning-editor select:focus { border-color: rgba(var(--accent-rgb), .55); }
.memory-meta, .memory-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.memory-meta time { color: var(--muted-2); font-size: 10px; text-align: right; }
.memory-actions { justify-content: flex-end; }
.learning-actions .learning-edit { margin-right: auto; }
.memory-actions button { min-height: 30px; padding-inline: 9px; font-size: 9px; }
.connection-section { display: grid; gap: 8px; }
.connection-section-heading { display: grid; gap: 3px; margin: 4px 2px 0; }
.connection-section-heading h4 { margin: 0; color: #d7d3e0; font-size: 12px; }
.connection-section-heading p { margin: 0; color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.native-modules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.native-module-card {
  display: grid; gap: 6px; min-width: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.022);
}
.native-module-card > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.native-module-card strong { font-size: 10px; }
.native-module-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.native-module-card .soft-pill { flex: 0 0 auto; min-height: 20px; padding-inline: 6px; font-size: 8px; }
.browser-control { display: grid; gap: 9px; padding: 11px; }
.browser-control .panel-heading > div { display: grid; gap: 3px; }
.browser-control .panel-heading small { color: var(--muted-2); font-size: 9px; font-weight: 400; }
.browser-control .secondary { min-height: 30px; padding: 0 9px; font-size: 9px; }
.browser-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.browser-route {
  display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255,255,255,.018);
}
.browser-route strong { color: #d7d3e0; font-size: 9px; }
.browser-route small { color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.browser-pairing {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px;
  border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 10px;
  background: rgba(var(--accent-rgb), .07);
}
.browser-pairing code { color: #ddd8ed; font-size: 11px; letter-spacing: .08em; }
.browser-pairing span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.browser-pairing a { color: rgb(var(--accent-rgb)); font-size: 9px; }
.browser-requests { display: grid; gap: 6px; }
.browser-request {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px;
}
.browser-request > div { display: grid; min-width: 0; gap: 2px; }
.browser-request strong { color: #d7d3e0; font-size: 9px; }
.browser-request small {
  overflow: hidden; color: var(--muted-2); font-size: 8px;
  text-overflow: ellipsis; white-space: nowrap;
}
.browser-request-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.browser-request-actions button, .browser-request-actions a {
  display: inline-flex; min-height: 28px; align-items: center; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; color: #d7d3e0;
  background: rgba(255,255,255,.03); font-size: 8px; text-decoration: none;
}
.connection-list {
  display: grid; overflow: hidden; border: 1px solid var(--line);
  border-radius: 11px; background: rgba(255,255,255,.015);
}
.connection-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; }
.connection-row + .connection-row { border-top: 1px solid var(--line); }
.connection-row > div { display: grid; min-width: 0; gap: 3px; }
.connection-row strong { color: var(--ink); font-size: 10px; }
.connection-row small { color: var(--muted-2); font-size: 9px; line-height: 1.4; }
.context-connection { align-items: flex-start; }
.context-connection > .soft-pill { margin-top: 1px; }
.connection-row .context-retrieval-receipt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 3px;
}
.context-retrieval-receipt > small { flex: 1 0 100%; }
.context-source-receipt {
  max-width: 100%; padding: 4px 6px; overflow: hidden; border-radius: 999px;
  background: rgba(var(--accent-rgb), .12); color: #cbc6dd; font-size: 8px;
  text-overflow: ellipsis; white-space: nowrap;
}
.connector-setup-panel { display: grid; gap: 12px; margin-top: 10px; }
.connector-setup-panel .provider-form input {
  width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 11px; background: #0f0f12; color: var(--ink); font-size: 13px; color-scheme: dark;
}
.skill-card { display: grid; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.skill-card h4 { margin: 0; font-size: 15px; }
.skill-card p { margin: 0; color: var(--muted); font-size: 12px; }
.skill-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skill-review { display: grid; gap: 8px; padding-top: 4px; }
.skill-review details { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.skill-review summary { cursor: pointer; padding: 9px 11px; color: #c3bfce; font-size: 10px; overflow-wrap: anywhere; }
.skill-review details > :not(summary) { margin: 0 11px 10px; }
.skill-review pre { max-height: 220px; padding: 10px; border-radius: 8px; background: #09090d; }
.skill-review small { display: block; color: var(--muted); }
.capability-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.capability-list li { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 10px; }
.provider-panel { padding: 14px; }
.provider-form { display: grid; gap: 10px; }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.provider-form label, .credential-field { display: grid; gap: 5px; color: #d5d2df; font-size: 10px; }
.provider-form select, .credential-field input {
  width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: #0f0f12; color: var(--ink); font-size: 11px; color-scheme: dark;
}
.provider-form select:focus, .credential-field input:focus { border-color: rgba(var(--accent-rgb), .55); }
.credential-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.credential-field small, .provider-note { color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.provider-access { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.016); }
.provider-access summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 0 10px; color: #d5d2df; font-size: 10px; cursor: pointer; list-style: none;
}
.provider-access summary::-webkit-details-marker { display: none; }
.provider-access summary::after {
  content: "›"; color: var(--muted-2); transform: rotate(90deg); transition: transform .16s ease;
}
.provider-access[open] summary::after { transform: rotate(-90deg); }
.provider-access-state { margin-left: auto; color: var(--muted); }
.provider-access-body { display: grid; gap: 9px; padding: 0 10px 10px; border-top: 1px solid var(--line); }
.provider-access-body > :first-child:not([hidden]) { margin-top: 10px; }
.provider-access-body > .credential-field:last-child { margin-top: 10px; }
.provider-access-body > .chatgpt-auth:not([hidden]) + .credential-field { margin-top: 0; }
.chatgpt-auth { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.chatgpt-auth-status { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.chatgpt-device { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding: 11px; border-radius: 10px; background: #0c0b11; }
.chatgpt-device span { color: var(--muted-2); font-size: 10px; }
.chatgpt-device code { color: var(--ink); font-size: 14px; letter-spacing: .08em; user-select: all; }
.chatgpt-device a { grid-column: 1 / -1; color: rgb(var(--accent-rgb)); font-size: 10px; }
.chatgpt-actions { display: flex; align-items: center; gap: 12px; }
.chatgpt-button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 10px; background: rgba(var(--accent-rgb), .14); color: white; font-size: 10px; cursor: pointer; }
.chatgpt-button:disabled { opacity: .55; cursor: wait; }
.provider-note { margin: -1px 0 0; }
.provider-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.provider-actions .muted { min-width: 0; font-size: 10px; }
.provider-actions .primary { flex: 0 0 auto; min-height: 34px; padding-inline: 13px; font-size: 10px; }
.continuity-panel { display: grid; gap: 14px; padding: 14px; }
.continuity-panel .panel-heading { align-items: flex-start; }
.continuity-panel .panel-heading > div { display: grid; gap: 5px; min-width: 0; }
.continuity-panel .panel-heading small { max-width: 430px; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.continuity-form { display: grid; gap: 8px; }
.continuity-form label { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #d5d2df; font-size: 10px; }
.continuity-form output { color: rgb(var(--accent-rgb)); font-weight: 700; font-variant-numeric: tabular-nums; }
.continuity-form input[type="range"] { width: 100%; accent-color: rgb(var(--accent-rgb)); cursor: pointer; }
.continuity-scale { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 8px; }
.settings-list { display: grid; gap: 22px; }
.settings-list fieldset { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; }
.settings-list legend { float: left; color: #d3d0da; font-size: 12px; }
.appearance-panel {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px 24px;
  padding-block: 13px;
}
.appearance-panel .panel-heading {
  grid-row: 1 / span 2;
  align-self: start;
  margin: 5px 0 0;
}
 .segmented { display: flex; padding: 3px; border-radius: 10px; background: var(--surface-soft); }
.segmented button { min-height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.segmented button.active { background: rgba(var(--accent-rgb), .2); color: white; }
.accent-list { display: flex; gap: 7px; }
.accent-list button { width: 25px; height: 25px; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.accent-list button.active { border-color: white; box-shadow: 0 0 0 2px var(--swatch); }
.danger-button { width: 100%; min-height: 42px; margin-top: 14px; border: 1px solid rgba(255,122,134,.2); border-radius: 11px; background: rgba(255,122,134,.07); color: #ff9ca5; cursor: pointer; }
.product-version {
  margin: 13px 0 2px;
  color: rgba(211,208,218,.38);
  font-size: 9px;
  letter-spacing: .04em;
  text-align: center;
  user-select: text;
}

/* Team is the project-owned surface of the same release and engine. */
.team-rail,
.team-rail-open { display: none; }
.team-rail-resizer { display: none; }
.team-rail-backdrop { display: none; }

.app-shell.team-edition {
  --team-rail-width: var(--teamon-space-rail-expanded);
  display: grid;
  grid-template-columns: var(--team-rail-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background:
    radial-gradient(circle at 61% 34%, rgba(var(--accent-rgb), .04), transparent 39%),
    radial-gradient(circle at 88% 73%, rgba(110, 83, 188, .018), transparent 29%),
    var(--teamon-workspace-shell-bg);
  transition: grid-template-columns var(--teamon-space-motion);
}
.app-shell.team-edition.team-rail-collapsed { --team-rail-width: var(--teamon-space-rail-collapsed); }
.app-shell.team-edition .particle-canvas {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  opacity: .52;
}
.app-shell.team-edition .ambient-grid {
  grid-column: 2;
  grid-row: 1 / -1;
  opacity: .018;
}
.app-shell.team-edition::after {
  grid-column: 2;
  grid-row: 1 / -1;
  background:
    radial-gradient(ellipse at 58% 36%, transparent 23%, rgba(6, 6, 10, .44) 100%),
    linear-gradient(0deg, rgba(7, 7, 10, .42), transparent 29%);
}
.app-shell.team-edition .team-rail {
  position: relative;
  z-index: 8;
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px 12px;
  border-right: 1px solid var(--teamon-space-line);
  background: var(--teamon-space-rail-bg);
  box-shadow: none;
  /* Keep fixed profile popovers viewport-bound instead of trapping them in this rail. */
  backdrop-filter: none;
  transition: padding var(--teamon-space-motion);
}
.app-shell.team-edition .team-rail-resizer {
  position: fixed;
  z-index: 18;
  top: 0;
  bottom: 0;
  left: calc(var(--team-rail-width) - 6px);
  display: block;
  width: 12px;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.app-shell.team-edition .team-rail-resizer[hidden] {
  display: none;
}
.app-shell.team-edition .team-rail-resizer::after {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 2px;
  height: 56px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
  content: '';
  opacity: .16;
  transform: translateY(-50%) scaleY(.7);
  transition: opacity .15s ease, transform .15s ease;
}
.app-shell.team-edition .team-rail-resizer:hover::after,
.app-shell.team-edition .team-rail-resizer:focus-visible::after,
.team-rail-resizing .team-rail-resizer::after {
  opacity: .9;
  transform: translateY(-50%) scaleY(1);
}
.app-shell.team-edition .team-rail-resizer:focus-visible {
  outline: 0;
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), .48);
}
.team-rail-resizing {
  cursor: col-resize;
  user-select: none;
}
.team-rail-resizing .app-shell.team-edition {
  transition: none;
}
.app-shell.team-edition.team-rail-collapsed .team-rail-resizer {
  display: none;
}
.team-rail-brand {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 6px 9px;
  color: inherit;
  text-align: left;
  background: transparent;
}
.team-rail-brand { grid-row: 1; }
.team-rail-brand > .brand-mark.small { width: 34px; height: 34px; justify-self: center; }
.team-rail-brand > .team-rail-monogram {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.team-rail-brand > .team-rail-monogram svg { width: 20px; height: 20px; }
.team-rail-brand > .team-rail-monogram .team-rail-monogram-t {
  fill: var(--ink, #101712);
  stroke: none;
  animation: none;
}
.team-rail-brand > .team-rail-monogram .team-rail-monogram-n {
  fill: var(--green, #10d94f);
  stroke: none;
  animation: none;
}
.team-brand-copy { position: relative; display: grid; min-width: 0; gap: 0; }
.team-rail-brand strong { color: #f3f7fd; font-size: 17px; line-height: 1.1; letter-spacing: -.03em; }
.team-rail-space-switcher {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
}
.team-rail-space-trigger {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 12px;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  min-height: 19px;
  padding: 0;
  border: 0;
  color: #7890a8;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color .16s ease;
}
.team-rail-space-trigger:hover,
.team-rail-space-trigger[aria-expanded="true"] { color: #c4d7eb; }
.team-rail-space-trigger:focus-visible { outline: 2px solid rgba(125,184,255,.5); outline-offset: 2px; border-radius: 6px; }
.team-rail-space-trigger:disabled { color: #7890a8; cursor: default; }
.team-rail-space-trigger > #team-rail-space-name {
  overflow: hidden;
  max-width: 96px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-rail-space-symbol,
.team-space-option-symbol {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.team-rail-space-symbol { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #91acd0; }
.team-rail-space-symbol img,
.team-space-option-symbol img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.42); }
.team-rail-space-symbol.is-generic::before,
.team-space-option-symbol.is-generic::before {
  content: "";
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 7px 0 currentColor, 0 7px currentColor, 7px 7px currentColor;
  opacity: .72;
  transform: translate(-3.5px, -3.5px) scale(.38);
}
.team-rail-space-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.team-rail-space-trigger[aria-expanded="true"] .team-rail-space-chevron { transform: rotate(180deg); }
.team-rail-space-switcher.single-space .team-rail-space-chevron { opacity: .3; }
.team-space-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 9px);
  left: -42px;
  display: grid;
  width: 202px;
  padding: 6px;
  border: 1px solid rgba(146,181,221,.17);
  border-radius: 16px;
  background: rgba(18,18,24,.97);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.985);
  transform-origin: 42px top;
  transition: opacity .15s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.team-space-menu[hidden] { display: none; }
.team-space-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.team-space-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 6px 7px;
  border: 0;
  border-radius: 11px;
  color: #dce7f4;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.team-space-option:hover,
.team-space-option:focus-visible { color: #fff; background: rgba(125,184,255,.09); outline: none; }
.team-space-option[aria-selected="true"] { background: rgba(139,124,255,.12); }
.team-space-option-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(140,177,219,.14);
  border-radius: 11px;
  color: #a9c4e3;
  background: #101014;
}
.team-space-option[aria-selected="true"] .team-space-option-symbol { border-color: rgba(164,147,255,.36); color: #d7ceff; box-shadow: 0 0 0 1px rgba(139,124,255,.08), 0 7px 18px rgba(67,54,145,.18); }
.team-space-option-copy { display: grid; min-width: 0; gap: 2px; }
.team-space-option-copy strong,
.team-space-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-space-option-copy strong { color: inherit; font-size: 11px; line-height: 1.2; }
.team-space-option-copy small { color: #72879e; font-size: 8px; line-height: 1.3; }
.team-space-option-check { width: 15px; height: 15px; fill: none; stroke: #a99cff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.7); transition: opacity .14s ease, transform .14s ease; }
.team-space-option[aria-selected="true"] .team-space-option-check { opacity: 1; transform: scale(1); }
.team-rail-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(146, 181, 221, .15);
  border-radius: 9px;
  color: #89a1ba;
  line-height: 0;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.team-rail-toggle:hover { border-color: rgba(125,184,255,.28); color: #d3e6f9; background: rgba(116,177,255,.08); }
.team-rail-toggle:focus-visible { outline: 2px solid #7db8ff; outline-offset: 2px; }
.team-rail-toggle svg { display: block; width: 16px; height: 16px; }
.team-rail-toggle path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.team-project-list { grid-row: 2; min-height: 0; padding-top: 7px; overflow-x: hidden; overflow-y: auto; }
.team-project {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #f5f8fd;
  text-align: left;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.team-project + .team-project { margin-top: 3px; }
.team-project:hover { border-color: rgba(116,177,255,.1); background: rgba(116,177,255,.055); }
.team-project.active,
.team-project[aria-current="page"] {
  border-color: rgba(116,177,255,.12);
  background: rgba(116,177,255,.1);
  box-shadow: none;
}
.team-project-monogram {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(126, 184, 255, .2);
  border-radius: 12px;
  color: #dcecff;
  font-weight: 800;
  background: #1b3149;
}
.team-project-monogram { width: 36px; height: 36px; font-size: 11px; }
.team-project-monogram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transform-origin: center;
  pointer-events: none;
}
.team-project-monogram.is-sun,
.team-project-monogram.is-world {
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
}
.team-project-monogram.is-sun img { transform: scale(1.2); }
.team-project-monogram.is-world img {
  filter: hue-rotate(var(--world-icon-hue, 0deg));
  transform: scale(1.28) rotate(var(--world-icon-turn, 0deg));
}
.team-project > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.team-project strong,
.team-project small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-project strong { font-size: 13px; }
.team-project small { color: #7f95ad; font-size: 9px; }
.team-project i { width: 7px; height: 7px; border-radius: 50%; background: #69d8bf; box-shadow: 0 0 0 4px rgba(105,216,191,.07); }
.team-project[data-status="archived"] i { background: #8190a0; box-shadow: none; }
.team-project.space-home {
  margin-bottom: 9px;
  border-color: rgba(148, 128, 255, .13);
  background: linear-gradient(135deg, rgba(139, 116, 255, .1), rgba(86, 160, 255, .035));
}
.team-project.space-home:hover {
  border-color: rgba(158, 140, 255, .26);
  background: linear-gradient(135deg, rgba(139, 116, 255, .15), rgba(86, 160, 255, .055));
}
.team-project.space-home.active,
.team-project.space-home[aria-current="page"] {
  border-color: rgba(158, 140, 255, .32);
  background: linear-gradient(135deg, rgba(139, 116, 255, .2), rgba(86, 160, 255, .075));
}
.team-project.space-home .team-project-monogram {
  border-color: rgba(188, 176, 255, .38);
  border-radius: 50%;
  color: #f0ecff;
  font-size: 16px;
  background: #08080d;
  box-shadow: 0 0 16px rgba(130, 106, 255, .25);
}
.team-project.space-home i { display: none; }
/* The third scale expands inside the one Navigator; it never becomes a rail. */
.team-project-group { display: grid; }
.team-project-group + .team-project-group,
.team-project-group + .team-project,
.team-project + .team-project-group { margin-top: 3px; }
.team-project-parts {
  display: grid; gap: 2px; margin: 4px 0 2px 19px; padding-left: 10px;
  border-left: 1px solid var(--line);
}
.team-project-part {
  display: grid; gap: 1px; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); text-align: left; background: transparent; cursor: pointer;
}
.team-project-part:hover { border-color: rgba(116,177,255,.1); background: rgba(116,177,255,.055); }
.team-project-part.active { border-color: rgba(116,177,255,.22); color: var(--ink); background: rgba(116,177,255,.09); }
.team-project-part strong,
.team-project-part small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-project-part strong { font-size: 12px; font-weight: 500; }
.team-project-part small { color: #7f95ad; font-size: 9px; }
.team-project-part.is-nested { margin-left: 18px; width: calc(100% - 18px); }
.team-project-part[data-status="complete"] { opacity: .68; }
.team-project-part[data-status="current"] { border-color: rgba(var(--accent-rgb), .28); }
.team-project-part[data-status="attention"] { box-shadow: inset 2px 0 #ffc45b; }
.world-empty-cta {
  display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px;
  margin: 8px 0; padding: 11px; border: 1px dashed rgba(126,184,255,.22); border-radius: 13px;
  color: #dcecff; text-align: left; background: rgba(116,177,255,.04); cursor: pointer;
}
.world-empty-cta { grid-row: 3; }
.world-empty-icon { display: grid; place-items: center; width: 30px; height: 30px; }
.world-empty-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.world-empty-cta > span:last-child { display: grid; gap: 2px; min-width: 0; }
.world-empty-cta strong { font-size: 11px; }
.world-empty-cta small { color: #7f95ad; font-size: 9px; line-height: 1.35; }
.app-shell.team-edition .session-account {
  grid-row: 4;
  align-self: end;
  width: 100%;
  margin-top: 9px;
  border-color: rgba(146,181,221,.14);
  border-radius: 13px;
  background: rgba(116,177,255,.045);
  backdrop-filter: none;
}
.app-shell.team-edition .session-account .account-menu-toggle {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px 6px 6px;
  border-radius: 12px;
  text-align: left;
}
.app-shell.team-edition .session-account .session-copy { flex: 1 1 auto; }
.app-shell.team-edition .session-account .account-menu {
  position: fixed;
  z-index: 40;
  top: auto;
  right: auto;
  bottom: 12px;
  left: calc(var(--team-rail-width) + 10px);
}
.app-shell.team-edition.team-rail-collapsed .team-rail { padding: 15px 9px 12px; }
.app-shell.team-edition.team-rail-collapsed .team-rail-brand {
  grid-template-columns: 1fr;
  grid-template-rows: 34px 26px;
  align-content: start;
  align-items: center;
  justify-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 0 0 8px;
}
.app-shell.team-edition.team-rail-collapsed .team-brand-copy,
.app-shell.team-edition.team-rail-collapsed .team-project > span:nth-child(2),
.app-shell.team-edition.team-rail-collapsed .team-project i,
.app-shell.team-edition.team-rail-collapsed .world-empty-cta > span:last-child { display: none; }
.app-shell.team-edition.team-rail-collapsed .team-rail-toggle {
  position: static;
  width: 26px;
  height: 26px;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: none;
}
.app-shell.team-edition.team-rail-collapsed .team-rail-toggle:hover {
  border-color: transparent;
  background: rgba(116,177,255,.08);
}
.app-shell.team-edition.team-rail-collapsed .team-rail-toggle svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transform-origin: center;
}
.app-shell.team-edition.team-rail-collapsed .team-project {
  grid-template-columns: 36px; justify-content: center;
  width: 44px; min-height: 44px; margin-inline: auto; padding: 3px;
  border-color: transparent; border-radius: 12px; background: transparent; box-shadow: none;
}
.app-shell.team-edition.team-rail-collapsed .team-project::before {
  position: absolute;
  top: 13px;
  left: -8px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: #a99cff;
  content: '';
  opacity: 0;
  transform: scaleY(.55);
  transition: opacity .16s ease, transform .16s ease;
}
.app-shell.team-edition.team-rail-collapsed .team-project:hover {
  border-color: transparent;
  background: rgba(116,177,255,.06);
}
.app-shell.team-edition.team-rail-collapsed .team-project.active,
.app-shell.team-edition.team-rail-collapsed .team-project[aria-current="page"] {
  border-color: transparent; background: transparent; box-shadow: none;
}
.app-shell.team-edition.team-rail-collapsed .team-project.active::before,
.app-shell.team-edition.team-rail-collapsed .team-project[aria-current="page"]::before {
  opacity: 1;
  transform: scaleY(1);
}
.app-shell.team-edition.team-rail-collapsed .team-project-list {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0;
  scrollbar-width: none;
}
.app-shell.team-edition.team-rail-collapsed .team-project-list::before {
  width: 34px;
  height: 1px;
  margin-bottom: 3px;
  background: rgba(146,181,221,.11);
  content: '';
}
.app-shell.team-edition.team-rail-collapsed .team-project + .team-project { margin-top: 0; }
.app-shell.team-edition.team-rail-collapsed .team-project-monogram {
  width: 36px; height: 36px; border-color: rgba(146,181,221,.13); border-radius: 10px;
  color: #cfdae6; background: rgba(116,177,255,.08);
  transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.app-shell.team-edition.team-rail-collapsed .team-project.active:not(.space-home) .team-project-monogram,
.app-shell.team-edition.team-rail-collapsed .team-project[aria-current="page"]:not(.space-home) .team-project-monogram {
  border-color: rgba(169,156,255,.2);
  color: #ece8ff;
  background: rgba(139,116,255,.18);
}
.app-shell.team-edition.team-rail-collapsed .team-project.space-home {
  margin-bottom: 4px;
  border-color: transparent;
  background: transparent;
}
.app-shell.team-edition.team-rail-collapsed .team-project.space-home:hover,
.app-shell.team-edition.team-rail-collapsed .team-project.space-home.active,
.app-shell.team-edition.team-rail-collapsed .team-project.space-home[aria-current="page"] {
  border-color: transparent;
  background: transparent;
}
.app-shell.team-edition.team-rail-collapsed .team-project.space-home .team-project-monogram {
  border-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(130,106,255,.18);
}
.app-shell.team-edition.team-rail-collapsed .team-project.space-home.active .team-project-monogram,
.app-shell.team-edition.team-rail-collapsed .team-project.space-home[aria-current="page"] .team-project-monogram {
  box-shadow: 0 0 18px rgba(130,106,255,.3);
}
.app-shell.team-edition.team-rail-collapsed .world-empty-cta {
  grid-template-columns: 1fr; place-items: center; width: 44px; min-height: 44px; margin: 8px auto;
  padding: 0; border-style: solid; border-radius: 12px; background: rgba(116,177,255,.08); text-align: center;
}
.app-shell.team-edition.team-rail-collapsed .world-empty-icon { width: 22px; height: 22px; }
.app-shell.team-edition.team-rail-collapsed .world-empty-icon svg { width: 20px; height: 20px; }
.app-shell.team-edition.team-rail-collapsed .session-account {
  width: 44px;
  margin: 8px auto 0;
  border-color: transparent;
  border-radius: 13px;
  background: transparent;
}
.app-shell.team-edition.team-rail-collapsed .session-account .account-menu-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
}
.app-shell.team-edition.team-rail-collapsed .session-account .account-menu-toggle:hover {
  background: rgba(116,177,255,.06);
}
.app-shell.team-edition.team-rail-collapsed .session-account .session-copy,
.app-shell.team-edition.team-rail-collapsed .session-account .account-chevron { display: none; }
.app-shell.team-edition .product-header {
  position: fixed;
  z-index: 19;
  top: 0;
  right: 0;
  left: var(--team-rail-width);
  width: auto;
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 12px 14px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.app-shell.team-edition #home { display: none; }
.app-shell.team-edition .brand-navigation { display: none; }
.app-shell.team-edition .header-actions { grid-column: 3; pointer-events: auto; }
.app-shell.team-edition .team-rail-open { pointer-events: auto; }
.team-rail-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.app-shell.team-edition .workbench {
  grid-column: 2;
  grid-row: 1;
  height: 100dvh;
  min-height: 0;
  gap: 0;
  padding: 0;
}
.app-shell.team-edition .chat-stage {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell.team-edition .work-surface {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(14, 14, 19, .72);
  box-shadow: none;
}
.app-shell.team-edition .workbench:not(.space-open) .work-surface {
  height: 100%; margin: 0;
  border-width: 0 0 0 1px; border-radius: 0;
}
.app-shell.team-edition .work-surface { border-left: 1px solid var(--cosmos-line); background: rgba(14,14,19,.9); }
.app-shell.team-edition .composer-frame { border-color: rgba(184,174,255,.13); background: rgba(20,25,34,.96); }
.app-shell.team-edition .welcome-card .eyebrow { display: none; }
.app-shell.team-edition .workbench.space-open .chat-stage { max-width: none; }
.app-shell.team-edition .work-resizer { left: -6px; }

@media (max-width: 900px) {
  .app-shell.team-edition { --team-rail-width: 0px; grid-template-columns: 1fr; }
  .app-shell.team-edition .team-rail-resizer { display: none; }
  .app-shell.team-edition .team-rail {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: min(84vw, 292px);
    transform: translateX(-104%);
    transition: transform .22s ease;
  }
  .app-shell.team-edition.team-rail-visible .team-rail { transform: translateX(0); }
  .app-shell.team-edition .team-rail-backdrop { position: fixed; z-index: 29; inset: 0; display: block; border: 0; background: rgba(1,7,14,.58); backdrop-filter: blur(3px); }
  .app-shell.team-edition:not(.team-rail-visible) .team-rail-backdrop { display: none; }
  .app-shell.team-edition .product-header,
  .app-shell.team-edition .workbench { grid-column: 1; }
  .app-shell.team-edition .product-header {
    left: 0; grid-template-columns: auto minmax(0,1fr) auto;
    padding: max(8px, env(safe-area-inset-top)) 8px 0;
  }
  .app-shell.team-edition .team-rail-open { display: grid; place-items: center; width: 38px; height: 38px; }
  .app-shell.team-edition .header-actions { grid-column: 3; }
  .app-shell.team-edition .session-copy { display: none; }
  /* A narrow viewport uses the collapsed desktop rail only as its closed state.
     Once the Navigator drawer is open, the account row is full width again and
     must expose the owner's identity instead of leaving an unexplained avatar. */
  .app-shell.team-edition.team-rail-visible .session-account {
    width: 100%;
    margin: 8px 0 0;
  }
  .app-shell.team-edition.team-rail-visible .session-account .account-menu-toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px 6px 6px;
    gap: 9px;
  }
  .app-shell.team-edition.team-rail-visible .session-account .session-copy {
    display: grid;
    flex: 1 1 auto;
  }
  .app-shell.team-edition.team-rail-visible .session-account .account-chevron {
    display: grid;
  }
  .app-shell.team-edition .session-account .account-menu {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
  .app-shell.team-edition .workbench { padding: 0; }
  .app-shell.team-edition .chat-stage { border-radius: 0; }
  .app-shell.team-edition .workbench:not(.space-open) .work-surface {
    height: 100%; margin: 0;
  }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes turn-status-breathe {
  0%, 70%, 100% { opacity: .24; transform: translateY(0) scale(.92); }
  35% { opacity: .92; transform: translateY(-1px) scale(1); }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255,122,134,.08); } }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }

@media (max-width: 760px) {
  .memory-receipt-action { min-height: 44px; }
  .journal-filters button { min-height: 44px; }
  .app-shell::after {
    background:
      radial-gradient(ellipse at 50% 38%, transparent 18%, rgba(18,18,20,.07) 62%, rgba(10,10,12,.42) 100%),
      linear-gradient(0deg, #111113 0%, rgba(17,17,19,.48) 48%, rgba(17,17,19,.06));
  }
  .product-header { height: 60px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: max(9px, env(safe-area-inset-top)) 12px 7px; gap: 7px; }
  .app-shell.team-edition { grid-template-rows: minmax(0, 1fr); }
  .account-menu-toggle { gap: 6px; padding: 4px 6px 4px 5px; }
  .account-menu { position: fixed; top: 66px; right: 12px; }
  .session-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .session-copy small { display: none; }
  .session-copy strong { max-width: 72px; font-size: 10px; }
  .brand-name { display: none; }
  .desktop-label, #work-pill { display: none !important; }
  .native-modules-grid { grid-template-columns: 1fr; }
  .browser-routes { grid-template-columns: 1fr; }
  .browser-control .panel-heading { align-items: flex-start; }
  .workbench { height: calc(100dvh - 60px); }
  .messages { padding: 16px 14px 24px; }
  .welcome-card { width: 100%; margin-top: clamp(24px, 8vh, 72px); text-align: center; }
  .welcome-card h1 { font-size: clamp(36px, 10vw, 44px); }
  .welcome-card > p:not(.eyebrow) { margin-inline: auto; font-size: 15px; }
  .starter-prompts { justify-content: center; margin-top: 22px; }
  .starter-prompt:nth-child(n+4) { display: none; }
  .message { margin-bottom: 22px; }
  .message.user { margin-bottom: 22px; }
  .bubble { font-size: 15.5px; line-height: 1.58; }
  .message.user .bubble { max-width: 84vw; padding: 8px 13px; border-radius: 17px; line-height: 1.45; }
  .tool-card, .artifact-card { margin-left: 0; }
  .composer {
    width: calc(100% - 16px); margin-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .composer-frame { padding: 7px 8px; border-radius: 28px; }
  .composer-row { min-height: 44px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; }
  .composer textarea { min-height: 24px; padding: 0 4px; font-size: 16px; }
  .composer-actions { gap: 5px; }
  .composer-status {
    top: calc(100% + 6px); right: auto; bottom: auto; left: 14px; max-width: min(72vw, 260px);
    padding: 4px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px;
    background: rgba(19,24,32,.92); font-size: 10px; backdrop-filter: blur(12px);
  }
  .composer-status::before { margin-right: 6px; }
  .composer .round-button { flex-basis: 40px; width: 40px; height: 40px; }
  .send-button { flex-basis: 40px; width: 40px; height: 40px; }
  .conversation-toolbar { gap: 6px; padding: 0 2px; }
  .shared-message { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .shared-message.own { grid-template-columns: minmax(0, 1fr) 28px; }
  .shared-message-avatar { width: 28px; height: 28px; border-radius: 9px; }
  .shared-message-content { width: 100%; }
  .drawer { width: 100%; border-left: 0; }
  .drawer-header { padding-top: max(18px, env(safe-area-inset-top)); }
  .drawer-content { padding-inline: 16px; }
  .provider-grid { grid-template-columns: 1fr 1fr; }
  .provider-grid label:last-child { grid-column: 1 / -1; }
  .provider-actions { align-items: stretch; flex-direction: column; }
  .provider-actions .primary { width: 100%; }
  .task-form-actions { align-items: stretch; flex-direction: column; }
  .task-form-actions .primary { width: 100%; }
  .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-card { min-height: 112px; }
  .space-surface-tabs { padding-inline: 10px; }
  .space-item { padding: 12px; }
}

@media (max-width: 1099px) {
  .work-resizer { display: none; }
  .work-surface {
    position: fixed; z-index: 14; top: 0; right: 0; bottom: 0; width: 48px; min-width: 48px;
    height: auto; border-left: 1px solid var(--line); opacity: 1; transform: translateX(0);
    box-shadow: var(--shadow);
  }
  .workbench.space-open .work-surface { width: min(440px, 100vw); min-width: min(360px, 100vw); opacity: 1; transform: translateX(0); }
  .workbench:not(.space-open) .chat-stage { max-width: calc(100% - 48px); margin-right: 48px; }
  .app-shell.team-edition .workbench:not(.space-open) .work-surface {
    height: auto; margin: 0; border-radius: 16px 0 0 16px;
  }
}

@media (max-width: 760px) {
  .work-surface { top: 0; width: 46px; min-width: 46px; border-left: 1px solid var(--line); }
  .workbench.space-open .work-surface { width: 100vw; min-width: 100vw; border-left: 0; }
  .workbench:not(.space-open) .chat-stage { max-width: calc(100% - 46px); margin-right: 46px; }
  .workbench:not(.space-open) .welcome-card h1 { font-size: clamp(38px, 11vw, 48px); }
}

.studio-dialogue-header { display: none; }
.journey-start {
  display: grid; gap: 11px; padding: 17px; border: 1px solid rgba(var(--accent-rgb), .27);
  border-radius: 18px; background:
    radial-gradient(circle at 92% 8%, rgba(var(--accent-rgb), .17), transparent 38%),
    rgba(255,255,255,.027);
}
.journey-start h3, .journey-start p { margin: 0; }
.journey-start h3 { font-size: 18px; letter-spacing: -.025em; }
.journey-start p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.55; }
.journey-start-button { justify-self: start; margin-top: 3px; }
.journey-canvas {
  position: relative; min-width: 0; max-width: 100%; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 17px;
  border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 19px;
  background:
    radial-gradient(circle at 94% 0, rgba(var(--accent-rgb), .15), transparent 34%),
    linear-gradient(145deg, rgba(31,29,43,.88), rgba(16,15,21,.94));
}
.journey-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(circle, rgba(255,255,255,.22) .7px, transparent .8px);
  background-size: 29px 29px; mask-image: linear-gradient(120deg, black, transparent 72%);
}
.journey-canvas > * { position: relative; z-index: 1; }
.journey-canvas > header {
  display: flex; align-items: start; justify-content: space-between; gap: 16px;
}
.journey-canvas > header > div { min-width: 0; }
.journey-canvas h3, .journey-canvas h4, .journey-canvas p { margin: 0; }
.journey-canvas h3 { margin-top: 3px; font-size: 20px; letter-spacing: -.035em; }
.journey-canvas > header p:not(.eyebrow) {
  max-width: 680px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55;
}
.journey-open {
  flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 10px; background: rgba(var(--accent-rgb), .1); color: #ddd8ff;
  font-size: 10px; font-weight: 760; cursor: pointer;
}
.journey-open:hover { border-color: rgba(var(--accent-rgb), .56); background: rgba(var(--accent-rgb), .17); }
.journey-stages { display: grid; grid-template-columns: repeat(8, minmax(76px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.journey-stage {
  min-width: 0; min-height: 44px; display: grid; justify-items: start; gap: 7px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.022);
  color: var(--muted); cursor: pointer; text-align: left;
}
.journey-stage span {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.06); color: var(--muted-2); font-size: 8px; font-weight: 800;
}
.journey-stage strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.journey-stage.completed span { background: rgba(87,211,164,.14); color: #9be4c9; }
.journey-stage.current {
  border-color: rgba(var(--accent-rgb), .52); background: rgba(var(--accent-rgb), .12); color: #f0edff;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.journey-stage.current span { background: rgba(var(--accent-rgb), .3); color: white; }
.journey-stage.blocked { border-color: rgba(255,122,134,.32); }
.journey-stage:disabled { cursor: wait; }
.journey-body {
  width: min(100%, 760px); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  justify-self: start; gap: 12px; min-height: 0;
}
.journey-focus, .journey-fields {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025);
}
.journey-focus { min-width: 0; display: grid; align-content: start; gap: 10px; min-height: 180px; padding: 17px; }
.journey-focus > span { color: #aaa5bb; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.journey-focus h4 { font-size: 22px; letter-spacing: -.03em; }
.journey-focus > p { color: #c9c5d3; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.journey-continue { justify-self: start; margin-top: auto; }
.journey-fields {
  width: min(100%, 760px); min-width: 0; justify-self: start; align-self: start; overflow: hidden;
}
.journey-fields > summary {
  min-width: 0; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center; gap: 9px; padding: 6px 12px; color: #d5d1df; cursor: pointer; list-style: none;
}
.journey-fields > summary::-webkit-details-marker { display: none; }
.journey-fields > summary::after {
  content: ""; width: 6px; height: 6px; justify-self: center;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  color: var(--muted-2); transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 160ms ease;
}
.journey-fields[open] > summary { background: rgba(var(--accent-rgb), .055); }
.journey-fields[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.journey-fields > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -3px; }
.journey-fields-label { min-width: 0; display: grid; gap: 1px; }
.journey-fields-label strong { font-size: 11px; }
.journey-fields-label small {
  min-width: 0; overflow: hidden; color: var(--muted-2); font-size: 9px;
  text-overflow: ellipsis; white-space: nowrap;
}
.journey-fields-count {
  min-width: 20px; min-height: 20px; display: grid; place-items: center; padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 999px;
  background: rgba(var(--accent-rgb), .08); color: #cfc8fa; font-size: 9px; font-weight: 760;
}
.journey-field-list { display: grid; margin: 0; border-top: 1px solid var(--line); }
.journey-field-row {
  min-width: 0; display: grid; grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr);
  gap: 10px; padding: 9px 12px;
}
.journey-field-row + .journey-field-row { border-top: 1px solid rgba(255,255,255,.055); }
.journey-field-row dt { color: #aaa5bb; font-size: 9px; font-weight: 760; letter-spacing: .025em; }
.journey-field-row dd {
  min-width: 0; margin: 0; color: #c9c5d3; font-size: 10px; line-height: 1.45;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.journey-field-row ul { display: grid; gap: 4px; margin: 0; padding-left: 14px; }
.builder-panel {
  min-width: 0; max-width: 100%; display: grid; gap: 13px; padding: 15px;
  border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 18px;
  background: radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb), .12), transparent 34%), rgba(21,20,28,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.builder-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.builder-panel h4, .builder-panel p { margin: 0; }
.builder-panel h4 { margin-top: 5px; color: #f1eff6; font-size: 18px; letter-spacing: -.025em; }
.builder-panel header p { max-width: 700px; margin-top: 5px; color: var(--muted-2); font-size: 10px; line-height: 1.5; }
.builder-actions, .builder-panel > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.builder-live-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; color: #c8c4d2;
  background: rgba(255,255,255,.025); font-size: 9px; white-space: nowrap;
}
.builder-live-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #57d3a4; box-shadow: 0 0 0 4px rgba(87,211,164,.09);
}
.builder-panel > footer { min-height: 31px; color: var(--muted-2); font-size: 10px; }
.builder-panel > footer a { color: #c7bcff; text-decoration: none; }
.builder-health {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 9px;
}
.builder-health.healthy { border-color: rgba(87,211,164,.3); color: #9be4c9; }
.builder-health.degraded { border-color: rgba(240,174,109,.3); color: #f0c18f; }
.builder-health.unreachable { border-color: rgba(255,122,134,.3); color: #ffb0b8; }
.builder-site {
  width: 100%; min-height: min(68vh, 780px); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; background: #f8f8fa; animation: builder-site-reveal .22s ease-out both;
}
.builder-site-loading {
  display: grid; min-height: min(68vh, 780px); place-items: center;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  color: var(--muted-2); background: rgba(255,255,255,.02); font-size: 11px;
}
.journey-canvas.pending::after {
  content: ""; position: absolute; z-index: 4; top: 0; left: 0; height: 2px; width: 42%;
  border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: journey-progress 1.15s ease-in-out infinite alternate;
}
.journey-canvas.compact .journey-stages { grid-template-columns: repeat(8, minmax(68px, 1fr)); }
.journey-canvas.compact.has-live-site { gap: 9px; padding: 10px; }
.journey-canvas.compact.has-live-site .journey-progress-rail { display: grid; gap: 8px; }
.journey-canvas.compact.has-live-site .journey-progress-rail > header { align-items: center; }
.journey-canvas.compact.has-live-site .journey-progress-rail header p:not(.eyebrow) { display: none; }
.journey-canvas.compact.has-live-site .journey-progress-rail h3 { font-size: 15px; }
.journey-canvas.compact.has-live-site .journey-stages {
  grid-template-columns: repeat(8, minmax(42px, 1fr)); gap: 4px; overflow-x: auto;
}
.journey-canvas.compact.has-live-site .journey-stage { justify-items: center; gap: 4px; padding: 6px 4px; }
.journey-canvas.compact.has-live-site .journey-stage strong { display: none; }
.journey-canvas.compact.has-live-site .builder-panel {
  gap: 7px; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.journey-canvas.compact.has-live-site .builder-panel > header { display: none; }
.journey-canvas.compact.has-live-site .builder-site,
.journey-canvas.compact.has-live-site .builder-site-loading {
  min-height: min(68dvh, 760px); border-radius: 10px;
}
.journey-canvas.compact.has-live-site .builder-panel > footer { padding: 0 3px 2px; }

.workbench.canvas-full .work-surface {
  position: fixed; z-index: 14; inset: 64px 0 0; width: 100vw; height: auto;
  grid-template-rows: minmax(0, 1fr);
  border-left: 0; opacity: 1; transform: none; pointer-events: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), .09), transparent 27%),
    rgba(15,15,18,.985);
}
.app-shell.team-edition .workbench.canvas-full .work-surface {
  inset: 0 0 0 var(--team-rail-width);
  width: auto;
}
.workbench.canvas-full .work-resizer { display: none; }
.workbench.canvas-full .work-surface-header { display: contents; }
.workbench.canvas-full .work-surface-header > div:first-child,
.workbench.canvas-full .work-surface-close { display: none; }
.workbench.canvas-full .work-surface-actions {
  position: absolute; z-index: 18; top: 10px; right: 12px;
}
.workbench.canvas-full #work-view-canvas { grid-row: 1; display: block; padding: 10px 12px 18px; }
.workbench.canvas-full .work-canvas { min-height: 100%; }
@media (min-width: 821px) {
  .app-shell.team-edition.studio-active .workbench.canvas-full:not(.studio-has-live-site) #work-view-canvas {
    padding-top: 72px;
  }
  .app-shell.team-edition.studio-active.studio-has-section-tabs .workbench.canvas-full:not(.studio-has-live-site) #work-view-canvas {
    /* The segmented section switcher is already docked inside the 68px
       Product header. Reserving a second tab row left a conspicuous empty
       band above every first-class Space Canvas. Keep the same compact header
       clearance as a full Canvas without section tabs. */
    padding-top: 72px;
  }
}
.workbench.canvas-full .journey-canvas.studio {
  min-height: calc(100dvh - 100px); padding: 18px; border-color: rgba(var(--accent-rgb), .18);
}
.workbench.canvas-full .journey-start {
  min-height: calc(100dvh - 100px);
  align-content: center;
  justify-items: center;
  padding: clamp(28px, 7vw, 88px);
  text-align: center;
}
.workbench.canvas-full .journey-start h3 {
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -.05em;
}
.workbench.canvas-full .journey-start p:not(.eyebrow) {
  max-width: 520px;
  font-size: 14px;
}
.workbench.canvas-full .journey-start-button { justify-self: center; margin-top: 10px; }
.workbench.canvas-full .journey-canvas.studio h3 { font-size: clamp(25px, 2.5vw, 38px); }
.workbench.canvas-full.studio-has-live-site #work-view-canvas { padding: 8px 10px 10px; }
.workbench.canvas-full .journey-canvas.studio.has-live-site {
  min-height: calc(100dvh - 82px); gap: 8px; padding: 8px;
  overflow: visible; border-radius: 15px; background: rgba(15,15,18,.96);
}
.workbench.canvas-full .journey-canvas.studio.has-live-site::before { opacity: .08; }
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail {
  position: sticky; z-index: 6; top: 0; min-width: 0; min-height: 42px; display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(480px, 2.4fr);
  align-items: center; gap: 10px; padding: 4px 5px 4px 10px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 11px;
  background: rgba(25,24,31,.94); backdrop-filter: blur(18px) saturate(115%);
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail > header {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail > header > div {
  min-width: 0; display: flex; align-items: center; gap: 8px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail .eyebrow {
  flex: 0 0 auto; font-size: 8px; letter-spacing: .13em;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail h3 {
  min-width: 0; margin: 0; overflow: hidden; color: #d8d5e0; font-size: 11px;
  font-weight: 720; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-progress-rail header p:not(.eyebrow) { display: none; }
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-open {
  min-height: 44px; padding: 0 9px; border-radius: 8px; font-size: 8px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-stages {
  min-width: 0; grid-template-columns: repeat(8, minmax(48px, 1fr)); gap: 4px;
  overflow: hidden; padding: 0;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-stage {
  min-height: 44px; display: flex; align-items: center; gap: 5px; padding: 4px 6px;
  border-radius: 8px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-stage span {
  width: 14px; height: 14px; flex: 0 0 14px; font-size: 6px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .journey-stage strong {
  min-width: 0; font-size: 8px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .builder-panel {
  gap: 7px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; box-shadow: none;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .builder-panel > header { display: none; }
.workbench.canvas-full .journey-canvas.studio.has-live-site .builder-site,
.workbench.canvas-full .journey-canvas.studio.has-live-site .builder-site-loading {
  min-height: calc(100dvh - 132px); border-radius: 10px;
}
.workbench.canvas-full .journey-canvas.studio.has-live-site .builder-panel > footer { padding: 0 4px 2px; }
.workbench.canvas-full.academy-active #work-view-canvas { display: none; }
.workbench.canvas-full.academy-active #work-view-academy {
  grid-row: 1; display: block; min-height: 0; padding: 0; overflow: hidden;
}
.workbench.canvas-full.academy-active .academy-stage { padding: 26px 32px 80px; }
.workbench.canvas-full.academy-active:not(.studio-dialogue-collapsed) .academy-stage {
  padding-right: min(39vw, 490px);
}
.workbench.canvas-full.academy-active.studio-dialogue-collapsed .academy-stage { padding-bottom: 92px; }
.workbench.canvas-full.academy-active .academy-stage-header h3 { font-size: clamp(28px, 3vw, 42px); }
.workbench.canvas-full.academy-active .academy-section { max-width: 920px; margin-inline: auto; }
.workbench.canvas-full.academy-active .academy-action-status { max-width: 920px; margin-inline: auto; }
.app-shell.studio-has-section-tabs .workbench.canvas-full .studio-input-mode { top: 120px; }
.app-shell.studio-has-section-tabs .workbench.canvas-full.academy-focus-active .studio-input-mode { top: 70px; }
@media (min-width: 821px) {
  .workbench.canvas-full.academy-active.academy-focus-active .academy-stage {
    padding: 10px 24px 12px; overflow-y: hidden;
  }
  .academy-space-view[data-academy-focus="activity"] #academy-section-now,
  .academy-space-view[data-academy-focus="feedback"] #academy-section-now {
    min-height: 100%; grid-template-rows: 44px minmax(0, 1fr); gap: 6px; margin-top: 0;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-focus-bar,
  .academy-space-view[data-academy-focus="feedback"] .academy-focus-bar {
    width: min(100%, 920px); min-height: 44px; height: 44px; margin: 0;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-activity,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity {
    grid-row: 2; grid-column: 1; width: min(100%, 920px); height: 100%; min-height: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    grid-template-rows: auto auto auto auto; align-content: start;
    gap: 12px 16px; padding: 16px 18px 76px; border-radius: 24px;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-hero,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-hero {
    grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 12px;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-heading,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-heading { gap: 7px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity h4,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity h4 { font-size: clamp(30px, 3.2vw, 38px); line-height: 1; }
  .academy-space-view[data-academy-focus="activity"] .academy-instruction,
  .academy-space-view[data-academy-focus="feedback"] .academy-instruction { font-size: 14px; line-height: 1.42; }
  .academy-space-view[data-academy-focus="activity"] .academy-criterion,
  .academy-space-view[data-academy-focus="feedback"] .academy-criterion { padding: 5px 8px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-art,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-art {
    min-height: 104px; border-radius: 18px; background-size: cover, 250% auto;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-prompt-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-prompt-card {
    grid-column: 1; grid-row: 2 / span 3; align-self: start; gap: 8px; padding: 14px; border-radius: 17px;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-passage,
  .academy-space-view[data-academy-focus="feedback"] .academy-passage {
    padding: 12px 14px; font-size: clamp(18px, 1.65vw, 21px); line-height: 1.45;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-question,
  .academy-space-view[data-academy-focus="feedback"] .academy-question { font-size: 15px; line-height: 1.4; }
  .academy-space-view[data-academy-focus="activity"] #academy-choice-card,
  .academy-space-view[data-academy-focus="feedback"] #academy-choice-card,
  .academy-space-view[data-academy-focus="activity"] #academy-order-card,
  .academy-space-view[data-academy-focus="feedback"] #academy-order-card {
    grid-column: 2; grid-row: 1 / span 4;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-practice-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-practice-card { gap: 9px; padding: 14px; border-radius: 17px; }
  .academy-space-view[data-academy-focus="activity"] .academy-choice-options,
  .academy-space-view[data-academy-focus="feedback"] .academy-choice-options { gap: 7px; }
  .academy-space-view[data-academy-focus="activity"] .academy-choice-option,
  .academy-space-view[data-academy-focus="feedback"] .academy-choice-option { min-height: 50px; padding: 9px 12px; }
  .academy-space-view[data-academy-focus="activity"] .academy-order-answer,
  .academy-space-view[data-academy-focus="feedback"] .academy-order-answer { min-height: 58px; padding: 10px; }
  .academy-space-view[data-academy-focus="activity"] .academy-order-token,
  .academy-space-view[data-academy-focus="feedback"] .academy-order-token { min-height: 44px; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-card { grid-column: 2; grid-row: 1; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-heading strong,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-heading strong { font-size: 18px; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-copy,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-copy { font-size: 13px; line-height: 1.42; }
  .academy-space-view[data-academy-focus="activity"] .academy-answer-field,
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field { grid-column: 2; grid-row: 2; gap: 6px; }
  .academy-space-view[data-academy-focus="activity"] .academy-answer-field textarea,
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field textarea {
    height: 80px; min-height: 80px; padding: 11px 12px; resize: none;
  }
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-card { display: none; }
  .academy-space-view[data-academy-focus="feedback"] .academy-current-evidence { grid-column: 2; grid-row: 1; }
  .academy-space-view[data-academy-focus="feedback"] .academy-judgment-fields {
    grid-column: 2; grid-row: 3 / span 2; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px;
  }
  .academy-space-view[data-academy-focus="feedback"] .academy-judgment-fields legend { grid-column: 1 / -1; }
  .academy-space-view[data-academy-focus="feedback"] .academy-judgment-fields textarea {
    height: 44px; min-height: 44px; resize: none;
  }
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field textarea { height: 56px; min-height: 56px; }
  .academy-space-view[data-academy-focus="activity"] .academy-primary-dock,
  .academy-space-view[data-academy-focus="feedback"] .academy-primary-dock {
    z-index: 2; grid-row: 2; grid-column: 1; align-self: end; justify-self: center;
    width: auto; margin: 0 0 16px; padding: 0;
  }
}
.app-shell.studio-has-section-tabs .product-header {
  z-index: 19;
  grid-template-columns: minmax(180px, 1fr) minmax(250px, 420px) auto;
}
.app-shell.studio-has-section-tabs .brand-navigation,
.app-shell.team-edition.studio-has-section-tabs .team-rail-open { grid-column: 1; }
.app-shell.studio-has-section-tabs .space-surface-tabs {
  grid-column: 2; align-self: center; justify-self: center;
  width: max-content; max-width: 100%; min-width: 0;
  pointer-events: auto;
  gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: rgba(255,255,255,.025); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
/* Docked, the switcher becomes a segmented control, and a segmented control
   marks its choice by filling the segment. It kept drawing the tab-bar
   underline instead: a 2px accent line pinned to the bottom of a pill with a
   12px radius, clipped by the container it sits in. One idiom per shape —
   the fill here matches the dialogue-lane switch the product already uses. */
.app-shell.studio-has-section-tabs .space-surface-tab {
  min-height: 32px; padding: 0 12px; border-radius: 9px; font-size: 10px;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.app-shell.studio-has-section-tabs .space-surface-tab::after { content: none; }
.app-shell.studio-has-section-tabs .space-surface-tab:hover:not(.active) {
  color: #d9dce4; background: rgba(255,255,255,.045);
}
.app-shell.studio-has-section-tabs .space-surface-tab.active,
.app-shell.studio-has-section-tabs .space-surface-tab[aria-selected="true"] {
  background: rgba(255,255,255,.085); color: #f2f3f7;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 4px 12px rgba(0,0,0,.12);
}
.app-shell.studio-has-section-tabs .header-actions { grid-column: 3; }
.workbench.canvas-full .chat-stage {
  position: fixed; z-index: 16;
  right: 24px; bottom: 24px; left: auto; top: auto;
  width: min(430px, calc(100vw - 48px));
  height: min(570px, calc(100dvh - 96px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; margin: 0;
  overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 23px;
  background: rgba(25,25,29,.94);
  box-shadow: 0 22px 72px rgba(0,0,0,.42), 0 2px 12px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(28px) saturate(112%);
}
.workbench.canvas-full .studio-dialogue-header {
  grid-row: 1; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 7px;
  padding: 7px 8px 5px 14px; border-bottom: 0;
  cursor: default; touch-action: auto;
}
.studio-dialogue-header button { cursor: pointer; }
.studio-dialogue-header strong {
  color: #aaa8b1; font-size: 10px; font-weight: 650; letter-spacing: -.005em;
}
.studio-dialogue-toggle {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: #aaa8b1;
  font-size: 17px; line-height: 1; transition: color .15s ease, background .15s ease;
}
.studio-dialogue-toggle:hover { background: rgba(255,255,255,.055); color: #ececf1; }
.studio-dialogue-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .62); outline-offset: 1px; }
[data-teamon-studio-focus] {
  outline: 2px solid rgba(var(--accent-rgb), .86);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .12);
  transition: outline-color .18s ease, box-shadow .18s ease;
}
[data-teamon-studio-focus="verify"] {
  outline-color: rgba(246,184,84,.92);
  box-shadow: 0 0 0 8px rgba(246,184,84,.12);
}
[data-teamon-studio-focus="commit"] {
  outline-color: rgba(60,200,145,.92);
  box-shadow: 0 0 0 8px rgba(60,200,145,.12);
}
.workbench.canvas-full .messages { grid-row: 3; padding: 8px 15px 10px; }
.workbench.canvas-full .welcome-card { width: min(320px, 100%); margin: clamp(48px, 12vh, 104px) auto 0; }
.workbench.canvas-full .welcome-card h1 { font-size: 22px; }
.workbench.canvas-full .welcome-card > p:not(.eyebrow) { font-size: 12px; }
.workbench.canvas-full .starter-prompts { display: none; }
.workbench.canvas-full .message { width: 100%; margin-bottom: 14px; }
.workbench.canvas-full .bubble { font-size: 13px; line-height: 1.52; }
.workbench.canvas-full .message.user .bubble {
  max-width: 86%; padding: 7px 11px; border-color: rgba(255,255,255,.055);
  border-radius: 15px; background: rgba(255,255,255,.065); font-size: 12px;
}
.workbench.canvas-full .turn-receipts { width: 100%; margin: 14px 0 4px; }
.workbench.canvas-full .tool-card,
.workbench.canvas-full .artifact-card { width: calc(100% - 18px); margin: 0 0 12px 18px; }
.workbench.canvas-full .composer {
  grid-row: 4; width: calc(100% - 20px); margin: 0 10px 28px;
}
.workbench.canvas-full .composer-frame {
  padding: 6px 7px;
  border-color: rgba(255,255,255,.075); border-radius: 24px;
  background: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.workbench.canvas-full .studio-selection-chip { margin-bottom: 5px; padding: 6px 8px; border-radius: 10px; }
.workbench.canvas-full .composer-row { min-height: 34px; gap: 5px; }
.workbench.canvas-full .composer textarea { min-height: 20px; max-height: 108px; padding: 0 5px; font-size: 13px; line-height: 20px; }
.workbench.canvas-full .composer .round-button,
.workbench.canvas-full .send-button { flex-basis: 34px; width: 34px; height: 34px; }
.workbench.canvas-full .composer .round-button { font-size: 18px; }
.workbench.canvas-full .composer-icon { width: 19px; height: 19px; }
.workbench.canvas-full .send-icon { width: 18px; height: 18px; }
.workbench.canvas-full .composer-status { font-size: 9px; }
.workbench.canvas-full .conversation-toolbar { padding: 0 1px; }
.workbench.canvas-full .conversation-lane { min-height: 28px; padding: 4px 9px; font-size: 10px; }
.workbench.canvas-full .ask-teamon { min-height: 30px; padding: 5px 8px; font-size: 9px; }
.workbench.studio-dialogue-collapsed .chat-stage {
  height: auto; grid-template-rows: auto auto; border-radius: 18px;
}
.workbench.canvas-full.studio-dialogue-collapsed .chat-stage {
  top: auto; right: 14px; bottom: 14px; left: auto;
  width: min(360px, calc(100vw - 48px));
}
.workbench.canvas-full.studio-dialogue-collapsed .composer { grid-row: 2; }
.workbench.studio-dialogue-collapsed .chat-stage .messages { display: none; }
.workbench.studio-dialogue-collapsed .conversation-toolbar { display: none; }
html.studio-surface-transition .workbench { isolation: isolate; }
html.studio-surface-transition .work-surface,
html.studio-surface-transition .chat-stage {
  transition: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
}
html.studio-surface-transition .work-surface { transform-origin: center right; }
html.studio-surface-transition .chat-stage { transform-origin: top left; }
html.studio-surface-transition .work-surface { z-index: 14; }
html.studio-surface-transition .chat-stage { position: relative; z-index: 16; }
html.studio-surface-transition .workbench.canvas-full .chat-stage { position: fixed; }

@keyframes journey-progress {
  from { transform: translateX(-35%); opacity: .45; }
  to { transform: translateX(175%); opacity: 1; }
}

@keyframes builder-site-reveal {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studio-operation-breathe {
  0%, 100% { transform: scale(.86); opacity: .72; }
  50% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark,
  .turn-status-pulse i,
  .message.assistant:not(.micro-status) .bubble.streaming::after,
  .shared-message-bubble.running::after { animation: none; }
  .app-shell.team-edition,
  .app-shell.team-edition .team-rail,
  .app-shell.team-edition .team-rail-toggle,
  .team-space-menu,
  .team-rail-space-chevron,
  .control-tooltip { transition: none !important; }
  .studio-operation-mark,
  [data-teamon-studio-focus],
  .journal-entry-focused,
  .work-surface,
  .space-item { animation: none !important; transition: none !important; }
  html.studio-surface-transition .work-surface,
  html.studio-surface-transition .chat-stage { animation: none !important; }
}

.icon-symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }


@media (max-width: 820px) {
  /* A phone has one screen. An expanded Canvas owns all of it, whatever the
     shell around it is: the earlier 60px inset left a band where the chat
     behind it showed through while the Canvas opened. */
  .workbench.canvas-full .work-surface { inset: 0; width: auto; }
  .workbench.canvas-full .studio-input-mode {
    top: 66px; right: 8px; left: 8px; width: auto; padding: 5px;
  }
  .app-shell.studio-has-section-tabs .workbench.canvas-full .studio-input-mode { top: 120px; }
  .app-shell.studio-has-section-tabs .workbench.canvas-full.academy-focus-active .studio-input-mode { top: 66px; }
  .studio-input-mode > small {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .studio-input-mode button { min-height: 44px; }
  /* A phone can show the Studio artifact or the dialogue, not a fragile half-sheet
     containing desktop internals. Expanding the singleton dialogue makes it the
     one screen; its own header returns to the unchanged Studio surface. */
  .app-shell .workbench.canvas-full:not(.studio-dialogue-collapsed) .chat-stage {
    z-index: 24; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    padding: 0; border: 0; border-radius: 0;
  }
  .app-shell .workbench.canvas-full:not(.studio-dialogue-collapsed) .studio-dialogue-header {
    min-height: calc(52px + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(14px, env(safe-area-inset-left));
  }
  .app-shell .workbench.canvas-full:not(.studio-dialogue-collapsed) .composer {
    width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin: 0 auto calc(8px + env(safe-area-inset-bottom));
  }
  .workbench.canvas-full.studio-dialogue-collapsed .chat-stage {
    right: 8px; bottom: 8px; left: auto; width: min(240px, calc(100vw - 16px)); height: auto;
  }
  .app-shell.team-edition .workbench.canvas-full.academy-active #work-view-academy { padding-left: 0; }
  .academy-stage { padding: 16px 13px 46px; }
  .workbench.canvas-full.academy-active .academy-stage { padding: 174px 13px 46px; }
  .workbench.canvas-full.academy-active.academy-focus-active .academy-stage { padding-top: 120px; }
  .workbench.canvas-full.academy-active:not(.studio-dialogue-collapsed) .academy-stage {
    padding-right: 13px; padding-bottom: 48dvh;
  }
  .workbench.canvas-full.academy-active.studio-dialogue-collapsed .academy-stage { padding-bottom: 82px; }
  .academy-stage-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  }
  .academy-stage-header .eyebrow,
  .academy-stage-header > div > p:last-child { display: none; }
  .academy-stage-header h3 { margin: 0; font-size: 22px; }
  .academy-cycle-state { justify-self: end; }
  .academy-family-panel { gap: 13px; padding: 17px; border-radius: 21px; }
  .academy-family-heading h4 { font-size: 25px; }
  .academy-family-heading > div > p:last-child { font-size: 13px; }
  .academy-family-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .academy-family-metrics article { padding: 11px 9px; }
  .academy-family-metrics strong { font-size: 20px; }
  .academy-family-metrics span { font-size: 10px; }
  .academy-family-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academy-family-actions button { min-height: 50px; padding: 0 10px; }
  .academy-family-grid { grid-template-columns: 1fr; }
  .academy-family-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .academy-family-dialog form { padding: 18px; }
  .academy-family-form-row { grid-template-columns: 1fr; }
  .academy-family-dialog footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academy-family-dialog footer button { min-height: 50px; }
  .academy-learning-summary { grid-template-columns: 1fr; }
  .academy-path { gap: 12px; padding-top: 2px; }
  .academy-path-intro { padding: 0 8px; }
  .academy-path-intro .eyebrow { display: none; }
  .academy-onboarding h4 { font-size: 21px; }
  .academy-path-list::before { left: 31px; }
  .academy-path-history-step,
  .academy-path-step,
  .academy-path-horizon { grid-template-columns: 64px minmax(0, 1fr); }
  .academy-path-step { min-height: 80px; }
  .academy-path-node { width: 52px; height: 52px; border-radius: 17px; }
  .academy-path-step-copy { padding: 14px 15px; }
  .academy-path-step-copy h4 { font-size: 18px; }
  .academy-path-step-copy p,
  .academy-path-horizon p { font-size: 12px; }
  .academy-path-horizon { min-height: 48px; }
  .academy-primary-action { width: min(100%, 320px); min-height: 50px; }
  .academy-focus-bar {
    position: sticky; z-index: 5; top: -16px; grid-template-columns: 1fr auto 1fr;
    gap: 4px; margin: -4px 0 5px; padding: 5px 0;
    background: linear-gradient(rgba(20,20,23,.98) 75%, transparent);
  }
  .academy-focus-control { min-width: 44px; padding: 0 7px; }
  .academy-focus-control:first-child span:last-child,
  .academy-focus-control:last-child span:first-child { display: none; }
  .academy-focus-progress { font-size: 10px; }
  .academy-activity { gap: 15px; padding: 18px; border-radius: 22px; }
  .academy-activity-hero { grid-template-columns: minmax(0, 1fr) 108px; gap: 13px; }
  .academy-activity-heading { gap: 9px; }
  .academy-activity h4 { font-size: clamp(30px, 8.6vw, 40px); }
  .academy-instruction { font-size: 14px; }
  .academy-activity-art { min-height: 118px; border-radius: 17px; background-size: cover, 250% auto; }
  .academy-prompt-card { gap: 10px; padding: 15px; border-radius: 17px; }
  .academy-passage { padding: 15px 16px; font-size: 19px; line-height: 1.56; }
  .academy-question { font-size: 16px; }
  .academy-practice-card { padding: 16px; border-radius: 17px; }
  .academy-choice-option { min-height: 56px; padding: 11px 13px; font-size: 15px; }
  .academy-order-token { min-height: 48px; font-size: 14px; }
  .academy-criterion { max-width: 100%; font-size: 11px; }
  .academy-space-view[data-academy-focus="activity"] #academy-section-now,
  .academy-space-view[data-academy-focus="feedback"] #academy-section-now { gap: 4px; margin-top: 0; }
  .workbench.canvas-full.academy-active.academy-focus-active.studio-dialogue-collapsed .academy-stage { padding-bottom: 12px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity { gap: 10px; padding: 13px; border-radius: 20px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-hero,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-heading,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-heading { gap: 6px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-heading .eyebrow,
  .academy-space-view[data-academy-focus="activity"] .academy-prompt-label { display: none; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity h4,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity h4 { font-size: clamp(27px, 8vw, 34px); line-height: 1; }
  .academy-space-view[data-academy-focus="activity"] .academy-instruction,
  .academy-space-view[data-academy-focus="feedback"] .academy-instruction { line-height: 1.42; }
  .academy-space-view[data-academy-focus="activity"] .academy-criterion,
  .academy-space-view[data-academy-focus="feedback"] .academy-criterion { padding: 5px 8px; }
  .academy-space-view[data-academy-focus="activity"] .academy-activity-art,
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-art { display: none; }
  .academy-space-view[data-academy-focus="activity"] .academy-prompt-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-prompt-card { gap: 7px; padding: 12px; }
  .academy-space-view[data-academy-focus="activity"] .academy-passage,
  .academy-space-view[data-academy-focus="feedback"] .academy-passage { padding: 11px 12px; font-size: 18px; line-height: 1.45; }
  .academy-space-view[data-academy-focus="activity"] .academy-practice-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-practice-card { gap: 8px; padding: 12px; }
  .academy-space-view[data-academy-focus="activity"] #academy-voice-card,
  .academy-space-view[data-academy-focus="feedback"] #academy-voice-card {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-heading,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-heading { grid-column: 1; grid-row: 1; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-mark,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-mark { display: none; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-controls,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-controls { grid-column: 2; grid-row: 1; }
  .academy-space-view[data-academy-focus="activity"] .academy-voice-copy,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-copy,
  .academy-space-view[data-academy-focus="activity"] .academy-voice-status,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-status { grid-column: 1 / -1; }
  .academy-space-view[data-academy-focus="activity"] .academy-answer-field textarea,
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field textarea {
    height: 82px; min-height: 82px; resize: none;
  }
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field textarea { height: 56px; min-height: 56px; }
  .academy-space-view[data-academy-focus="feedback"] .academy-judgment-fields textarea { height: 44px; min-height: 44px; resize: none; }
  .academy-space-view[data-academy-focus="feedback"] .academy-activity-hero,
  .academy-space-view[data-academy-focus="feedback"] .academy-prompt-card,
  .academy-space-view[data-academy-focus="feedback"] .academy-voice-card { display: none; }
  .academy-space-view[data-academy-focus="feedback"] .academy-current-evidence { order: 1; }
  .academy-space-view[data-academy-focus="feedback"] .academy-answer-field { order: 2; }
  .academy-space-view[data-academy-focus="feedback"] .academy-judgment-fields { order: 3; }
  .academy-space-view[data-academy-focus="activity"] .academy-primary-dock,
  .academy-space-view[data-academy-focus="feedback"] .academy-primary-dock {
    position: sticky; z-index: 6; bottom: 0; margin-top: 0;
    padding: 9px 0 max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(20,20,23,.98) 32%);
  }
  .workbench.canvas-full.academy-focus-active.studio-dialogue-collapsed .chat-stage { display: none; }
  .workbench.canvas-full .journey-start { padding: 28px 18px 48dvh; }
  .workbench.canvas-full .journey-canvas.studio { min-height: auto; padding: 14px; }
  .journey-field-row { grid-template-columns: 1fr; gap: 4px; }
  .journey-stages { grid-template-columns: repeat(8, 88px); }
  .builder-site, .builder-site-loading { min-height: 56dvh; }
}

@media (max-width: 1100px) {
  .studio-mode-toggle {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    justify-content: center; padding: 0; border-radius: 12px;
  }
  .studio-mode-toggle .desktop-label,
  .studio-mode-toggle .control-tooltip { display: none; }
  .app-shell.studio-has-section-tabs .product-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .app-shell.studio-has-section-tabs .brand-navigation,
  .app-shell.team-edition.studio-has-section-tabs .team-rail-open { grid-column: 1; }
  .app-shell.studio-has-section-tabs .header-actions { grid-column: 3; }
  .app-shell.studio-has-section-tabs .space-surface-tabs {
    position: static; z-index: auto; width: max-content;
  }
  /* Compact desktop still has enough room for the three short section labels.
     Keep them in the only header row instead of creating an empty first row
     and a second floating row below it. */
  .app-shell.studio-has-section-tabs .workbench.canvas-full #work-view-canvas { padding-top: 72px; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .app-shell.studio-has-section-tabs .workbench.canvas-full.academy-active .academy-stage { padding-top: 110px; }
  .app-shell.studio-has-section-tabs .workbench.canvas-full.academy-active.academy-focus-active .academy-stage { padding-top: 10px; }
}

@media (max-width: 900px) {
  .app-shell.team-edition.studio-has-section-tabs .product-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .app-shell.team-edition.studio-has-section-tabs .header-actions { grid-column: 3; }
}

@media (max-width: 820px) {
  /* Fullscreen mobile keeps the same single top control row. The section
     switcher is an overlay beside the exit control, so it does not reserve an
     otherwise empty header plus another tab row. */
  .app-shell.studio-has-section-tabs .space-surface-tabs,
  .app-shell.team-edition.studio-has-section-tabs .space-surface-tabs {
    display: flex; position: fixed; z-index: 24;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 62px);
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    width: auto; pointer-events: auto;
    background: rgba(25,24,31,.92); backdrop-filter: blur(18px) saturate(115%);
  }
  .app-shell.studio-has-section-tabs .workbench.canvas-full #work-view-canvas {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  }
}

/* Turn chips: the trace after its panel was removed. They sit above the answer
   inside the same bubble, so the work stays beside the result it produced.
   Colour carries meaning rather than decoration: knowledge wears the product's
   own accent, a finished procedure reads as success, a produced file reads warm,
   and a refused action is amber and dashed because a boundary that held is not
   an error. */
.turn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.turn-chip {
  --chip: var(--muted);
  --chip-rgb: 162, 162, 173;
  font-size: 12px;
  line-height: 1.35;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--chip-rgb), .22);
  background: rgba(var(--chip-rgb), .08);
  color: color-mix(in srgb, var(--chip) 78%, var(--ink));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Knowledge is the product's own material, so it wears the product's accent. */
.turn-chip-kind-context,
.turn-chip-kind-tool {
  --chip: var(--accent);
  --chip-rgb: var(--accent-rgb);
}

.turn-chip-kind-skill {
  --chip: var(--success);
  --chip-rgb: 87, 211, 164;
}

.turn-chip-kind-artifact {
  --chip: var(--warning);
  --chip-rgb: 240, 174, 109;
}

/* A refused action is a boundary that worked, not a failure of the agent. */
.turn-chip-boundary {
  --chip: var(--warning);
  --chip-rgb: 240, 174, 109;
  border-style: dashed;
  background: transparent;
}

.turn-chip-quiet {
  --chip: var(--muted);
  --chip-rgb: 162, 162, 173;
  opacity: .68;
}

/* The current step is the one still moving; the tail recedes without leaving. */
.turn-chip.is-live {
  border-color: rgba(var(--chip-rgb), .42);
  background: rgba(var(--chip-rgb), .15);
  color: color-mix(in srgb, var(--chip) 92%, var(--ink));
  box-shadow: 0 0 0 3px rgba(var(--chip-rgb), .07);
}

@media (prefers-reduced-motion: no-preference) {
  .turn-chip { transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
  .turn-chip.is-live { animation: turn-chip-breath 2.4s ease-in-out infinite; }
  @keyframes turn-chip-breath {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--chip-rgb), .07); }
    50% { box-shadow: 0 0 0 5px rgba(var(--chip-rgb), .03); }
  }
}

/* A queued message is in the feed but not yet in work. It reads as waiting
   rather than sent, and carries its own withdrawal so the owner can drop it
   without stopping the turn that is already running. */
.message.is-queued .bubble {
  opacity: .62;
  border: 1px dashed var(--line-strong);
  background: transparent;
}

.message.is-queued .bubble::before {
  content: 'В очереди';
  display: block;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: 4px;
}

.queued-withdraw {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.queued-withdraw:hover { color: var(--ink); border-color: var(--line-strong); }

/* The same dialogue can be a 430px desktop window, a user-resized narrow window,
   or a phone screen. Its controls therefore reflow from the dialogue width,
   not from the outer viewport. */
@container teamon-dialogue (max-width: 520px) {
  .chat-stage .composer-row {
    grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px;
  }
  .chat-stage .composer textarea { min-width: 0; }
  .chat-stage .composer-actions { flex: 0 0 auto; }
  .chat-stage .composer-status {
    position: absolute; top: calc(100% + 6px); right: auto; bottom: auto; left: 14px;
    max-width: min(calc(100% - 20px), 260px);
  }
}

/* ==================================================================
   33. SPACE-FIRST WORKSPACE
   The active Space is the application surface. Navigator and the singleton
   companion Dialogue expose finite presentations in both color modes.
   ================================================================== */

.app-shell.spaces-active #studio-open,
.app-shell.spaces-active #work-surface-close {
  display: none !important;
}

.studio-dialogue-heading {
  min-width: 0;
  display: grid;
  gap: 1px;
  margin-right: auto;
}

.studio-dialogue-heading small {
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.2;
}

.studio-dialogue-heading small[data-state="working"] { color: #a69cff; }
.studio-dialogue-heading small[data-state="decision"] { color: var(--warning); }
.studio-dialogue-heading small[data-state="blocked"] { color: var(--danger); }
.studio-dialogue-heading small[data-state="ready"] { color: var(--success); }

.studio-dialogue-dock {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}

.studio-dialogue-dock:hover,
.studio-dialogue-dock[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), .1);
  color: var(--ink);
}

.workbench.canvas-full.workspace-dialogue-floating .chat-stage {
  top: auto;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: auto;
  width: min(410px, calc(100vw - 48px));
  height: min(610px, calc(100dvh - 96px));
}

.workbench.canvas-full.workspace-dialogue-docked {
  --workspace-dialogue-dock-width: clamp(360px, 31vw, 440px);
}

.workbench.canvas-full.workspace-dialogue-docked .work-surface {
  right: var(--workspace-dialogue-dock-width);
}

.app-shell.team-edition .workbench.canvas-full.workspace-dialogue-docked .work-surface {
  right: var(--workspace-dialogue-dock-width);
}

.workbench.canvas-full.workspace-dialogue-docked .chat-stage {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--workspace-dialogue-dock-width);
  height: 100dvh;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.workbench.canvas-full.workspace-dialogue-docked .composer {
  margin-bottom: max(20px, env(safe-area-inset-bottom));
}

.workbench.canvas-full.studio-dialogue-collapsed .studio-dialogue-heading strong,
.workbench.canvas-full.studio-dialogue-collapsed .studio-dialogue-dock {
  display: none;
}

.workbench.canvas-full.studio-dialogue-collapsed .studio-dialogue-heading {
  position: absolute;
  right: 72px;
  width: max-content;
  margin: 0;
  pointer-events: none;
}

.workbench.canvas-full.studio-dialogue-collapsed
  .studio-dialogue-heading small[data-state="idle"] {
  display: none;
}

.workbench.canvas-full.studio-dialogue-collapsed .studio-dialogue-heading small {
  display: block;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.app-shell.spaces-active .studio-input-mode {
  width: max-content;
  max-width: calc(100vw - 24px);
}

.app-shell.spaces-active .studio-input-mode-actions > button {
  min-height: 36px;
  padding-inline: 12px;
}

@media (max-width: 820px) {
  .app-shell.spaces-active.studio-active #team-rail-open {
    position: fixed;
    z-index: 26;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    display: grid;
    pointer-events: auto;
  }

  /* Point maps and focused workflows start with actionable content at the
     top-left, directly under the shell-owned Navigator button. Reserve that
     mobile control strip inside those typed surfaces without shrinking every
     Canvas or live Preview. */
  .workbench.canvas-full .point-map-surface,
  .workbench.canvas-full .workflow-surface {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  }

  .workbench.canvas-full.workspace-dialogue-floating .chat-stage,
  .workbench.canvas-full.workspace-dialogue-docked .chat-stage {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: min(68dvh, 620px);
    max-height: calc(100dvh - var(--m-header-h, 54px));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, .2);
  }

  .workbench.canvas-full.workspace-dialogue-docked .work-surface {
    right: 0;
  }

  .workbench.canvas-full.studio-dialogue-collapsed .studio-dialogue-heading {
    right: 66px;
  }
}