/* Live scenes: the app's dark UI drawn in the page. Base styles are each scene's end state; motion plays them. */
:root {
  --app-window: var(--glass-solid);
  --app-sidebar: rgba(14, 10, 14, 0.42);
  --app-fill: rgba(255, 255, 255, 0.07);
  --app-fill-strong: rgba(255, 255, 255, 0.12);
  --user-bubble: rgba(10, 132, 255, 0.25);
  --state-doing: #ffd60a;
  --state-review: #0a84ff;
  --state-done: #32d74b;
  --state-crown: #ffb50a;
  --state-idle: #98989d;
  --state-input: #ff9f0a;
  --state-merged: #bf5af2;
  --step: 220ms;
  --loop: 8s;
  --rise: 10px;

  --icon-hammer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 3.2l3-1.2 6.4 6.4-2.6 2.6-1.6-1.6-1.4 1.4-2.2-2.2-8.5 8.5a1.8 1.8 0 01-2.6-2.6l8.5-8.5-2.2-2.2z'/%3E%3C/svg%3E");
  --icon-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.2'/%3E%3Cpath d='M14.6 14.6L20.5 20.5'/%3E%3C/svg%3E");
  --icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E");
  --icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 7.5l5 4.2L12 4.5l4.5 7.2 5-4.2-2 11.5h-15z'/%3E%3C/svg%3E");
  --icon-idle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 2.5a9.5 9.5 0 107 16.2A8 8 0 0114.5 2.5z'/%3E%3C/svg%3E");
  --icon-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5-5 5M12.5 17.5H19'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4.5h4v15H6zM14 4.5h4v15h-4z'/%3E%3C/svg%3E");
  --icon-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 6.5A2 2 0 014.5 4.5h4.6l2 2.2h8.4a2 2 0 012 2v9.8a2 2 0 01-2 2h-15a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  --icon-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.6' y='4.5' width='3' height='10' rx='1.5'/%3E%3Crect x='10.1' y='2.2' width='3' height='11' rx='1.5'/%3E%3Crect x='13.6' y='3' width='3' height='11' rx='1.5'/%3E%3Crect x='17.1' y='6' width='3' height='9' rx='1.5'/%3E%3Cpath d='M6.6 11h13.5v3.6c0 4.3-3 7.4-6.9 7.4-2.8 0-4.5-1.3-5.9-3.7L3.6 13.6a1.6 1.6 0 012.7-1.8l.3.5z'/%3E%3C/svg%3E");
  --icon-merged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2.3'/%3E%3Ccircle cx='6' cy='19' r='2.3'/%3E%3Ccircle cx='18' cy='19' r='2.3'/%3E%3Cpath d='M6 7.3v9.4M18 16.7V10a3 3 0 00-3-3h-4M13 4.5L10.5 7l2.5 2.5'/%3E%3C/svg%3E");
  --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 2.5h7l-1.2 6.2 3.2 3.3v2.2h-11V12l3.2-3.3z'/%3E%3Crect x='11.2' y='13.5' width='1.6' height='8' rx='.8'/%3E%3C/svg%3E");
  --icon-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='3'/%3E%3Cpath d='M14 4.5v15'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5L7.5 12l7.5 7.5'/%3E%3C/svg%3E");
  --icon-arrow-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11.5 5.5L5 12l6.5 6.5'/%3E%3C/svg%3E");
  --icon-spaces: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2.4'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2.4'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2.4'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2.4'/%3E%3C/svg%3E");
  --icon-chats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5c5 0 9 3.4 9 7.6s-4 7.6-9 7.6c-1 0-2-.1-2.9-.4L4.5 20.5l1.2-4C4 15 3 13.2 3 11.1 3 6.9 7 3.5 12 3.5z'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Ccircle cx='19' cy='12' r='2.2'/%3E%3C/svg%3E");
  --icon-thought: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.2 6.6 6.8 2.4-6.8 2.4L12 20.5l-2.2-6.6L3 11.5l6.8-2.4z'/%3E%3C/svg%3E");
  --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h8l4 4v14.4H6z'/%3E%3Cpath d='M14 2.8v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
  --icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 015 0c0 1.8-2.5 2-2.5 4M12 17.2v.3'/%3E%3C/svg%3E");
  --icon-tools: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 4.5-9 4.5-9-4.5zM3 12l9 4.5 9-4.5M3 16.5L12 21l9-4.5'/%3E%3C/svg%3E");
  --icon-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Crect y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='9' y='3' width='3' height='9' rx='1'/%3E%3Crect x='13.5' width='3' height='12' rx='1'/%3E%3Cpath d='M24 3.5a12 12 0 0116 0l-1.6 1.7a9.6 9.6 0 00-12.8 0zM26.9 6.6a7.6 7.6 0 0110.2 0l-1.7 1.7a5.2 5.2 0 00-6.8 0zM29.9 9.6a3.2 3.2 0 014.2 0L32 11.8z'/%3E%3Crect x='44.5' y='.5' width='20' height='11' rx='3.2' fill='none' stroke='black' stroke-opacity='.45'/%3E%3Crect x='46.3' y='2.3' width='14' height='7.4' rx='1.8'/%3E%3Cpath d='M66 4v4a2 2 0 000-4z' fill-opacity='.45'/%3E%3C/svg%3E");
  --icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--window-radius);
  background: var(--app-window);
  box-shadow: inset 0 0 0 1px var(--line), var(--window-shadow);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}
.scene p { margin: 0; text-wrap: pretty; }

/* State icons: one glyph per state, drawn as a mask in its state's color */
.state {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
}
.state::before,
.state::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--state-color);
  mask: var(--state-icon) center / contain no-repeat;
  -webkit-mask: var(--state-icon) center / contain no-repeat;
  transition: opacity var(--step) var(--ease), transform var(--step) var(--ease);
}
.state::after { display: none; }
.state--doing,
[data-state="doing"] { --state-color: var(--state-doing); --state-icon: var(--icon-hammer); }
.state--input,
[data-state="input"] { --state-color: var(--state-input); --state-icon: var(--icon-hand); }
.state--review,
[data-state="review"] { --state-color: var(--state-review); --state-icon: var(--icon-review); }
.state--done { --state-color: var(--state-done); --state-icon: var(--icon-done); }
.state--merged,
[data-state="merged"] { --state-color: var(--state-merged); --state-icon: var(--icon-merged); }
.state--crown { --state-color: var(--state-crown); --state-icon: var(--icon-crown); }
.state--idle { --state-color: var(--state-idle); --state-icon: var(--icon-idle); }

/* A doing icon that turns to review: the review glyph waits behind it */
.state--turns { --state-color: var(--state-doing); --state-icon: var(--icon-hammer); }
.state--turns::after {
  display: block;
  --state-color: var(--state-review);
  --state-icon: var(--icon-review);
}
.state--turns.is-doing::after,
.state--turns:not(.is-doing)::before { opacity: 0; transform: scale(0.6); }
.motion .is-playing :is(.is-doing, .state--doing, [data-state="doing"] > .state, .state[data-state="doing"])::before { animation: hammer 0.9s var(--ease) infinite; }
.motion .is-playing :is(.state--input, [data-state="input"] > .state, .state[data-state="input"])::before { animation: wave 1.2s ease-in-out infinite; transform-origin: 60% 90%; }
@keyframes wave {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-16deg); }
  60% { transform: rotate(12deg); }
}
@keyframes hammer {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-28deg); }
  55% { transform: rotate(6deg); }
}

/* Revealed rows: their height opens while they rise and fade in */
.step {
  display: grid;
  grid-template-rows: 1fr;
}
.step > * { min-height: 0; }
.motion .step {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--step) var(--ease);
}
.motion .step > * {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--step) var(--ease), transform var(--step) var(--ease);
}
.motion .step.is-shown { grid-template-rows: 1fr; }
.motion .step.is-shown > * { opacity: 1; transform: none; }

/* Chat */
.scene--chat { aspect-ratio: 4 / 3.2; }
.chat {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.82rem;
}
.chat__head p { color: var(--text); font-weight: 600; }
.chat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.chat__model { margin-left: auto; color: var(--text-3); }
.chat__log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(14px, 2.4vw, 28px);
  overflow: hidden;
  mask: linear-gradient(transparent, #000 56px);
  -webkit-mask: linear-gradient(transparent, #000 56px);
  transition: opacity 400ms var(--ease);
}
.chat__log.is-fading { opacity: 0; }
.chat__log > .step > * { padding-top: 12px; }
.msg { display: flex; }
.msg p { max-width: 30em; }
.msg--user { justify-content: flex-end; }
.msg--user p,
.msg--user .video {
  max-width: min(76%, 26em);
  border-radius: 18px;
}
.msg--user p {
  padding: 8px 14px;
  background: var(--user-bubble);
}
.msg--agent p { color: var(--text); }
.video {
  display: block;
  width: min(64%, 280px);
  height: auto;
  border-radius: 10px;
  background: #0d0e12;
  box-shadow: 0 0 0 1px var(--line);
}
.msg--tool {
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px 6px 10px;
  border-radius: 10px;
  background: var(--app-fill);
  color: var(--text-2);
  font-size: 0.8rem;
}
.tool__icon {
  width: 12px;
  height: 12px;
  background: var(--text-3);
  mask: var(--icon-tool) center / contain no-repeat;
  -webkit-mask: var(--icon-tool) center / contain no-repeat;
}
.chat__composer {
  display: flex;
  align-items: center;
  margin: 14px clamp(14px, 2.4vw, 28px) 16px;
  padding: 8px 8px 8px 16px;
  border-radius: 20px;
  background: var(--app-fill);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-3);
}
.chat__send {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--app-fill-strong);
  position: relative;
}
.chat__send::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--text-3);
  mask: var(--icon-send) center / contain no-repeat;
  -webkit-mask: var(--icon-send) center / contain no-repeat;
}

/* Orchestration: the sidebar beside the agent's terminal */
.orch {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  min-height: 100%;
}
.side {
  padding: 16px 14px 20px;
  background: var(--app-sidebar);
  border-right: 1px solid var(--line);
  font-size: 0.8rem;
}
.side__host {
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.side__host--later { margin-top: 14px; }
.side__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.side__row p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side__row--project { font-weight: 600; }
.side__emoji { width: 14px; font-size: 0.82rem; text-align: center; }
.side__row--ws { padding-left: 28px; }
.side__row--lead { background: var(--app-fill); }
.side__tree { margin-left: 34px; border-left: 1px solid var(--line-strong); }
.side__row--child { padding-left: 14px; color: var(--text-2); }
.side__row--child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  border-top: 1px solid var(--line-strong);
}
.side__row--tracked { color: var(--text-2); }
.terminal--scene {
  border-radius: 0;
  box-shadow: none;
  background: rgba(8, 6, 8, 0.6);
}
.terminal--scene .terminal__screen { font-size: clamp(0.72rem, 0.85vw, 0.82rem); }

/* Tiles */
.scene--tile {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 18px;
  font-size: 0.8rem;
}
.scene--tile > * { width: 100%; max-width: 300px; }
.motion .scene--tile * {
  animation-duration: var(--loop);
  animation-timing-function: var(--ease);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.motion .scene--tile:not(.is-playing) * { animation-play-state: paused !important; }

/* Reply to one sentence */
.t-reply__answer { color: var(--text-2); }
.t-reply__answer mark {
  color: var(--text);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) left / 100% 100% no-repeat;
  border-radius: 3px;
}
.t-reply__bubble {
  margin: 14px 0 0 auto;
  width: fit-content;
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--user-bubble);
}
.t-reply__quote {
  margin-bottom: 4px !important;
  padding-left: 8px;
  border-left: 2px solid rgba(236, 236, 238, 0.5);
  color: var(--text);
  font-size: 0.74rem;
}
.motion .t-reply__answer mark { animation-name: t-reply-select; }
.motion .t-reply__bubble { animation-name: t-reply-bubble; }
@keyframes t-reply-select {
  0%, 8% { background-size: 0% 100%; }
  26%, 90% { background-size: 100% 100%; }
  97%, 100% { background-size: 0% 100%; }
}
@keyframes t-reply-bubble {
  0%, 38% { opacity: 0; transform: translateY(var(--rise)); }
  44%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

/* Fork a chat */
.t-fork {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
}
.t-fork__col {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--app-fill);
}
.t-fork__col i {
  display: block;
  height: 8px;
  width: 80%;
  border-radius: 4px;
  background: var(--line-strong);
}
.t-fork__col i:nth-child(2) { width: 60%; }
.t-fork__col i.u { justify-self: end; width: 55%; background: var(--user-bubble); }
.t-fork__col--b .t-fork__new { width: 70%; }
.t-fork__branch { width: 40px; height: 60px; }
.t-fork__branch path {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
  stroke-dasharray: 60;
}
.motion .t-fork__col--b { animation-name: t-fork-copy; }
.motion .t-fork__branch path { animation-name: t-fork-branch; }
.motion .t-fork__col--a .t-fork__new { animation-name: t-fork-new-a; }
.motion .t-fork__col--b .t-fork__new { animation-name: t-fork-new-b; }
@keyframes t-fork-copy {
  0%, 10% { opacity: 0; transform: translateX(calc(-100% - 40px)); }
  30%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes t-fork-branch {
  0%, 14% { stroke-dashoffset: 60; }
  32%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes t-fork-new-a {
  0%, 42% { opacity: 0; transform: translateY(var(--rise)); }
  47%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes t-fork-new-b {
  0%, 56% { opacity: 0; transform: translateY(var(--rise)); }
  61%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* Free chat moves into a project */
.t-free {
  --row: 30px;
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, var(--row));
  align-items: center;
}
.t-free__head {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 600;
}
.t-free__head--project { grid-row: 3; color: var(--text); font-size: 0.8rem; }
.t-free__head--project span { margin-right: 4px; }
.t-free__ws,
.t-free__chat {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.t-free__ws { grid-row: 4; padding-left: 22px; color: var(--text-2); }
.t-free__chat {
  grid-row: 5;
  margin-left: 40px;
  background: var(--app-fill);
}
.motion .t-free__chat { animation-name: t-free-move; }
@keyframes t-free-move {
  0%, 20% { transform: translate(-40px, calc(var(--row) * -3)); box-shadow: none; }
  26% { transform: translate(-36px, calc(var(--row) * -3 - 4px)) scale(1.03); box-shadow: 0 0 0 1px var(--line-strong); }
  46% { transform: translate(-2px, -4px) scale(1.03); box-shadow: 0 0 0 1px var(--line-strong); }
  52%, 90% { transform: none; box-shadow: none; opacity: 1; }
  96% { transform: none; opacity: 0; }
  100% { transform: translate(-40px, calc(var(--row) * -3)); opacity: 0; }
}

/* Agent and account menu */
.t-switch__menu {
  padding: 8px;
  border-radius: 10px;
  background: var(--app-fill);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.t-switch__label {
  padding: 4px 10px 2px 26px;
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 600;
}
.t-switch__label:not(:first-child) { margin-top: 6px; }
.t-switch__group { --item: 24px; position: relative; }
.t-switch__group p {
  position: relative;
  height: var(--item);
  line-height: var(--item);
  padding-left: 26px;
}
.t-switch__hover,
.t-switch__check {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--item);
}
.t-switch__hover {
  right: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
}
.t-switch__check {
  left: 8px;
  width: 11px;
  background: var(--text);
  mask: var(--icon-done) center / contain no-repeat;
  -webkit-mask: var(--icon-done) center / contain no-repeat;
  transform: translateY(var(--item));
}
.motion .t-switch__group--agent .t-switch__hover { animation-name: t-switch-hover-agent; }
.motion .t-switch__group--agent .t-switch__check { animation-name: t-switch-check-agent; }
.motion .t-switch__group--account .t-switch__hover { animation-name: t-switch-hover-account; }
.motion .t-switch__group--account .t-switch__check { animation-name: t-switch-check-account; }
@keyframes t-switch-hover-agent {
  0%, 10% { opacity: 0; transform: none; }
  14% { opacity: 1; transform: none; }
  24%, 30% { opacity: 1; transform: translateY(var(--item)); }
  34%, 100% { opacity: 0; transform: translateY(var(--item)); }
}
@keyframes t-switch-check-agent {
  0%, 30% { transform: none; }
  31%, 92% { transform: translateY(var(--item)); }
  100% { transform: none; }
}
@keyframes t-switch-hover-account {
  0%, 46% { opacity: 0; transform: none; }
  50% { opacity: 1; transform: none; }
  60%, 66% { opacity: 1; transform: translateY(var(--item)); }
  70%, 100% { opacity: 0; transform: translateY(var(--item)); }
}
@keyframes t-switch-check-account {
  0%, 66% { transform: none; }
  67%, 92% { transform: translateY(var(--item)); }
  100% { transform: none; }
}

/* Scheduled prompt */
.t-clock { display: grid; justify-items: center; gap: 18px; }
.t-clock__face {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.t-clock__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--accent);
  opacity: 0;
}
.t-clock__hour,
.t-clock__minute {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  transform-origin: bottom center;
}
.t-clock__hour { height: 20px; transform: rotate(270deg); }
.t-clock__minute { height: 30px; background: var(--text-2); }
.t-clock__run {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--app-fill);
}
.t-clock__run .state--doing { display: none; }
.motion .t-clock__run .state--doing { display: block; animation-name: t-clock-doing; }
.motion .t-clock__run .state--done { margin-left: -21px; animation-name: t-clock-done; }
.motion .t-clock__minute { animation-name: t-clock-minute; animation-timing-function: linear; }
.motion .t-clock__hour { animation-name: t-clock-hour; animation-timing-function: linear; }
.motion .t-clock__face::after { animation-name: t-clock-fire; }
.motion .t-clock__run { animation-name: t-clock-run; }
@keyframes t-clock-minute {
  0% { transform: rotate(0); }
  36%, 100% { transform: rotate(360deg); }
}
@keyframes t-clock-hour {
  0% { transform: rotate(240deg); }
  36%, 100% { transform: rotate(270deg); }
}
@keyframes t-clock-fire {
  0%, 36% { opacity: 0; transform: none; }
  38% { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes t-clock-run {
  0%, 40% { opacity: 0; transform: translateY(var(--rise)); }
  44%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes t-clock-doing {
  0%, 68% { opacity: 1; transform: none; }
  72%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes t-clock-done {
  0%, 68% { opacity: 0; transform: scale(0.6); }
  72%, 100% { opacity: 1; transform: none; }
}

/* Inbox */
.t-inbox { display: grid; gap: 8px; }
.t-inbox__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.t-inbox__badge {
  --count: 3;
  counter-reset: inbox var(--count);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--app-fill-strong);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.t-inbox__badge::after { content: counter(inbox); }
.t-inbox__msg {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--app-fill);
}
.t-inbox__msg b { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-3); }
.t-inbox__msg p { color: var(--text); }
.motion .t-inbox__badge { animation-name: t-inbox-count; animation-timing-function: steps(1); }
.motion .t-inbox__msg { animation-name: t-inbox-msg-1; }
.motion .t-inbox__msg:nth-of-type(2) { animation-name: t-inbox-msg-2; }
.motion .t-inbox__msg:nth-of-type(3) { animation-name: t-inbox-msg-3; }
@keyframes t-inbox-count {
  0% { --count: 0; }
  14% { --count: 1; }
  38% { --count: 2; }
  62%, 94% { --count: 3; }
  100% { --count: 0; }
}
@keyframes t-inbox-msg-1 {
  0%, 10% { opacity: 0; transform: translateY(var(--rise)); }
  14%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes t-inbox-msg-2 {
  0%, 34% { opacity: 0; transform: translateY(var(--rise)); }
  38%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes t-inbox-msg-3 {
  0%, 58% { opacity: 0; transform: translateY(var(--rise)); }
  62%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* A friend's agent */
.t-friend { display: grid; gap: 10px; }
.t-friend__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.t-friend__avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--app-fill-strong);
  color: var(--text-2);
  font-size: 0.66rem;
}
.t-friend__ask {
  justify-self: end;
  max-width: 85%;
  padding: 7px 12px;
  border-radius: 16px;
  background: var(--user-bubble);
}
.t-friend__dots { display: none; gap: 4px; height: 0; }
.t-friend__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.t-friend__answer { color: var(--text); }
.motion .t-friend__ask { animation-name: t-friend-ask; }
.motion .t-friend__dots { display: flex; animation-name: t-friend-dots; }
.motion .t-friend__dots i { animation-name: t-friend-dot; animation-duration: 1s; animation-timing-function: ease-in-out; }
.motion .t-friend__dots i:nth-child(2) { animation-delay: 0.15s; }
.motion .t-friend__dots i:nth-child(3) { animation-delay: 0.3s; }
.motion .t-friend__answer { animation-name: t-friend-answer; }
@keyframes t-friend-ask {
  0%, 8% { opacity: 0; transform: translateY(var(--rise)); }
  12%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes t-friend-dots {
  0%, 18% { opacity: 0; }
  22%, 50% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes t-friend-dot {
  0%, 100% { transform: none; opacity: 0.5; }
  40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes t-friend-answer {
  0%, 54% { opacity: 0; transform: translateY(var(--rise)); }
  58%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* Unity play */
.t-unity { display: grid; gap: 10px; }
.t-unity__bar {
  justify-self: center;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--app-fill);
}
.t-unity__bar span {
  position: relative;
  width: 30px;
  height: 24px;
  border-radius: 6px;
}
.t-unity__bar span::after {
  content: "";
  position: absolute;
  inset: 6px 9px;
  background: var(--text-2);
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.t-unity__play { --icon: var(--icon-play); background: var(--accent-soft); }
.t-unity__play::after { background: var(--accent) !important; }
.t-unity__pause { --icon: var(--icon-pause); }
.t-unity__stop { --icon: var(--icon-stop); }
.t-unity__game {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.t-unity__marble { transform-origin: 100px 0; transform: rotate(18deg); }
.motion .t-unity__play { animation-name: t-unity-play; }
.motion .t-unity__play::after { animation-name: t-unity-play-icon; }
.motion .t-unity__marble { animation-name: t-unity-roll; animation-timing-function: ease-in-out; }
@keyframes t-unity-play {
  0%, 16% { background: transparent; transform: none; }
  18% { background: var(--accent-soft); transform: scale(0.9); }
  21%, 86% { background: var(--accent-soft); transform: none; }
  88%, 100% { background: transparent; }
}
@keyframes t-unity-play-icon {
  0%, 17% { background: var(--text-2); }
  19%, 86% { background: var(--accent); }
  88%, 100% { background: var(--text-2); }
}
@keyframes t-unity-roll {
  0%, 22% { transform: rotate(0); }
  32% { transform: rotate(-26deg); }
  44% { transform: rotate(24deg); }
  56% { transform: rotate(-22deg); }
  68% { transform: rotate(20deg); }
  80% { transform: rotate(-16deg); }
  88%, 100% { transform: rotate(0); }
}

/* Copy-on-write */
.t-cow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.t-cow__folder {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--app-fill);
  text-align: center;
}
.t-cow__icon {
  width: 34px;
  height: 28px;
  margin-bottom: 4px;
  background: var(--text-3);
  mask: var(--icon-folder) center / contain no-repeat;
  -webkit-mask: var(--icon-folder) center / contain no-repeat;
}
.t-cow__folder p { font-weight: 600; font-size: 0.76rem; }
.t-cow__folder small { color: var(--text-3); font-size: 0.7rem; }
.t-cow__disk {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.t-cow__disk span {
  display: block;
  width: 38%;
  height: 100%;
  background: var(--text-3);
}
.t-cow__note { grid-column: 1 / -1; color: var(--text-2); text-align: center; }
.motion .t-cow__folder--clone { animation-name: t-cow-clone; animation-timing-function: var(--ease); }
.motion .t-cow__note { animation-name: t-cow-note; }
@keyframes t-cow-clone {
  0%, 18% { opacity: 0; transform: scale(0.82); }
  21%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes t-cow-note {
  0%, 30% { opacity: 0; transform: translateY(var(--rise)); }
  34%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* Huge file to a host */
.t-send { display: grid; gap: 12px; }
.t-send__ends {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.t-send__host { color: var(--text-2); }
.t-send__track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.t-send__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
}
.t-send__pct {
  --count: 100;
  counter-reset: pct var(--count);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.t-send__pct::after { content: counter(pct) "% of 18.4 GB"; }
.motion .t-send__fill { animation-name: t-send-fill; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
.motion .t-send__pct { animation-name: t-send-count; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
@keyframes t-send-fill {
  0%, 8% { transform: scaleX(0); }
  78%, 94% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes t-send-count {
  0%, 8% { --count: 0; }
  78%, 94% { --count: 100; }
  100% { --count: 0; }
}

/* Scripted scenes (script.js): fade out before starting over; no transitions while resetting */
[data-fade] { transition: opacity 420ms var(--ease); }
.is-fading [data-fade] { opacity: 0; }
.is-resetting,
.is-resetting * { transition: none !important; }

/* Mac window: title bar, then a chat with its panes or a sidebar beside them */
.scene--mac { aspect-ratio: 4 / 3; font-size: 0.8rem; }
.mac {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.mac__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.mac__lights { display: flex; gap: 7px; }
.mac__lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.mac__lights i:nth-child(2) { background: #febc2e; }
.mac__lights i:nth-child(3) { background: #28c840; }
.mac__title { line-height: 1.25; transition: opacity 400ms var(--ease); }
.mac__title p { font-weight: 600; }
.mac__title small { display: block; color: var(--text-3); font-size: 0.7rem; }
.mac b { color: var(--text); font-weight: 600; }

.split { display: grid; min-height: 0; container-type: inline-size; }
.pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0 solid transparent;
  transition: border-color 400ms var(--ease);
}
.pane--chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pane--chat .chat__log { padding: 0 16px; }
.pane--chat .chat__composer { margin: 12px 16px 14px; padding-block: 6px; }
.pane--chat .chat__send { width: 22px; height: 22px; }
.pane--panel { border-left-width: 1px; background: rgba(255, 255, 255, 0.025); }
.pane--term { background: rgba(8, 6, 8, 0.55); }
.pane > * { transition: opacity 450ms var(--ease) 200ms, translate 700ms var(--ease) 150ms; }

/* A panel: tab, progress, checklist and a form field */
.panel { padding: 14px 18px; }
.panel__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 12px !important;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.2);
  color: #9fcbff;
  font-size: 0.74rem;
  font-weight: 600;
}
.panel__icon {
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: var(--icon-panel) center / contain no-repeat;
  -webkit-mask: var(--icon-panel) center / contain no-repeat;
}
.panel__lede { margin-bottom: 10px !important; color: var(--text-2); }
.panel__progress { margin-bottom: 6px !important; color: var(--text-2); font-size: 0.74rem; }
.panel__count::after { content: "1"; }
.is-tick .panel__count::after { content: "2"; }
.is-add .panel__count::after { content: "3"; }
.panel__bar {
  display: block;
  height: 5px;
  margin-bottom: 12px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.panel__bar i {
  display: block;
  height: 100%;
  background: var(--state-review);
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 700ms var(--ease);
}
.is-tick .panel__bar i,
.panel__bar--half i { transform: scaleX(0.5); }
.is-add .panel__bar i { transform: scaleX(0.75); }
.checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.checks__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  transition: background-color 300ms var(--ease);
}
.checks__item p {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.checks__box {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text-3);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.checks__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #fff;
  mask: var(--icon-done) center / contain no-repeat;
  -webkit-mask: var(--icon-done) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
:is(.checks__item--settled, .is-tick .checks__item--tick, .is-add .checks__item--answer) .checks__box {
  background: var(--state-review);
  box-shadow: none;
}
:is(.checks__item--settled, .is-tick .checks__item--tick, .is-add .checks__item--answer) .checks__box::after {
  opacity: 1;
  transform: none;
}
.is-tick:not(.is-focus) .checks__item--tick,
.is-focus:not(.is-add) .checks__item--answer { background: var(--app-fill); }
.tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.16);
  color: #8cc2ff;
  font-size: 0.66rem;
  font-weight: 600;
}
.tag--decided { background: rgba(50, 215, 75, 0.16); color: #6be283; }
.tag--blocked { background: rgba(255, 69, 58, 0.16); color: #ff8a82; }
.checks__item--tick .tag--decided,
.checks__item--answer .tag--decided,
.is-tick .checks__item--tick .tag--open,
.is-add .checks__item--answer .tag--open { display: none; }
.is-tick .checks__item--tick .tag--decided,
.is-add .checks__item--answer .tag--decided { display: inline; }
.panel__label { margin-bottom: 6px !important; font-size: 0.76rem; font-weight: 600; }
.answer { display: flex; align-items: center; gap: 8px; }
.answer__input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px var(--line);
  line-height: 30px;
  white-space: nowrap;
  transition: box-shadow 300ms var(--ease);
}
.answer__placeholder { position: absolute; left: 10px; color: var(--text-3); transition: opacity 200ms var(--ease); }
.answer__text { transition: opacity 200ms var(--ease); }
.answer__text.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--state-review);
}
.is-focus:not(.is-add) .answer__input { box-shadow: inset 0 0 0 1px var(--state-review), 0 0 0 3px rgba(10, 132, 255, 0.25); }
.is-focus:not(.is-add) .answer__placeholder,
.is-add .answer__text { opacity: 0; }
.answer__add {
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--app-fill);
  color: var(--text-3);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 30px;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.is-focus:not(.is-add) .answer__add { background: var(--state-review); color: #fff; }
.panel__sent {
  margin-top: 6px !important;
  color: var(--text-3);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.is-add .panel__sent { opacity: 1; }

/* Panels: the panel opens beside the chat */
.split--panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  transition: grid-template-columns 800ms var(--ease);
}
.is-panel .split--panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.split--panel .panel { width: 53cqw; }
.split--panel .pane--panel > * { opacity: 0; translate: 24px 0; }
.is-panel .split--panel .pane--panel { border-color: var(--line); }
.is-panel .split--panel .pane--panel > * { opacity: 1; translate: none; }

/* Panes: a sidebar beside the window's split panes; each project has its own layout */
.mac--sidebar {
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  grid-template-rows: none;
}
.side--layout { padding-top: 16px; }
.side--layout .mac__lights { margin: 0 0 18px 6px; }
.side--layout .side__row--ws { transition: background-color 300ms var(--ease); }
.side__row--marble,
.is-atlas:not(.is-back) .side__row--atlas { background: var(--app-fill-strong); }
.is-atlas:not(.is-back) .side__row--marble { background: transparent; }
.mac__main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.mac__title--atlas { position: absolute; left: 16px; opacity: 0; }
.is-atlas:not(.is-back) .mac__title--marble { opacity: 0; }
.is-atlas:not(.is-back) .mac__title--atlas { opacity: 1; }
.layouts { position: relative; min-height: 0; container-type: inline-size; }
.split--marble,
.split--atlas {
  position: absolute;
  inset: 0;
  transition: opacity 500ms var(--ease), scale 700ms var(--ease), grid-template-columns 800ms var(--ease), grid-template-rows 800ms var(--ease);
}
.split--marble {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 0fr);
  grid-template-areas: "chat panel" "term term";
}
.is-panel .split--marble { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.is-term .split--marble { grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--marble .pane--chat { grid-area: chat; }
.split--marble .pane--panel { grid-area: panel; }
.split--marble .pane--term { grid-area: term; border-top-width: 1px; }
.split--marble .panel { width: 47cqw; }
.split--marble :is(.pane--panel, .pane--term) > * { opacity: 0; }
.is-panel .split--marble .pane--panel,
.is-term .split--marble .pane--term { border-color: var(--line); }
.is-panel .split--marble .pane--panel > *,
.is-term .split--marble .pane--term > * { opacity: 1; }
.split--atlas {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  opacity: 0;
  scale: 0.98;
}
.split--atlas .pane--term { border-left-width: 1px; border-color: var(--line); }
.is-atlas:not(.is-back) .split--marble { opacity: 0; scale: 0.98; }
.is-atlas:not(.is-back) .split--atlas { opacity: 1; scale: none; }
.pane__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.72rem;
}
.pane__tab-icon {
  width: 11px;
  height: 11px;
  background: var(--text-3);
  mask: var(--icon-tool) center / contain no-repeat;
  -webkit-mask: var(--icon-tool) center / contain no-repeat;
}
.term {
  padding: 10px 14px;
  color: var(--text-3);
  font: 400 0.7rem/1.7 var(--mono);
}
.term p { white-space: nowrap; }
.term__command { min-height: 1.7em; color: var(--text); }
.term__command::before { content: "$ "; color: var(--text-3); }
.term__command.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--accent);
}
.term__output b { color: #e5c07b; font-weight: 400; }
.term__output i { color: #7fd1ff; font-style: normal; }

/* Panels on your Dashboard: pinned in Marblewood, opened over Atlas */
.t-dash {
  --loop: 10s;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.7rem;
}
.t-dash p { white-space: nowrap; }
.t-dash__side {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 7px;
  border-right: 1px solid var(--line);
  background: var(--app-sidebar);
}
.t-dash__label { padding: 0 6px; color: var(--text-3); font-size: 0.62rem; font-weight: 600; }
.t-dash__pin,
.t-dash__project {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  overflow: hidden;
}
.t-dash__pin { margin-bottom: 8px; }
.t-dash__pin-icon {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--state-review);
  mask: var(--icon-panel) center / contain no-repeat;
  -webkit-mask: var(--icon-panel) center / contain no-repeat;
}
.t-dash__project { font-weight: 600; }
.t-dash__project--atlas { background: var(--app-fill-strong); }
.t-dash__main { position: relative; overflow: hidden; }
.t-dash__atlas { display: grid; gap: 8px; padding: 14px 12px; }
.t-dash__atlas i {
  display: block;
  width: 85%;
  height: 7px;
  border-radius: 4px;
  background: var(--line-strong);
}
.t-dash__atlas i:nth-child(2) { width: 60%; }
.t-dash__atlas i.u { justify-self: end; width: 55%; background: var(--user-bubble); }
.t-dash__panel {
  position: absolute;
  top: 8px;
  left: 6px;
  right: 6px;
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #241c24;
  box-shadow: 0 0 0 1px var(--line-strong), 0 14px 30px -8px rgba(0, 0, 0, 0.75);
  transform-origin: 0 0;
}
.t-dash__panel .panel__bar { height: 4px; margin: 0 0 2px; }
.t-dash__title { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.t-dash__title .panel__icon { width: 10px; height: 10px; color: var(--state-review); }
.t-dash__pin-button {
  width: 10px;
  height: 10px;
  margin-left: auto;
  background: var(--accent);
  mask: var(--icon-pin) center / contain no-repeat;
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
}
.t-dash__check { position: relative; padding-left: 15px; color: var(--text-2); }
.t-dash__check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}
.t-dash__check.is-done::before { background: var(--state-review); box-shadow: none; }
.motion .t-dash { animation-name: t-dash-loop; }
.motion .t-dash__panel { animation-name: t-dash-panel; }
.motion .t-dash__atlas { animation-name: t-dash-atlas; }
.motion .t-dash__pin { animation-name: t-dash-pin; }
.motion .t-dash__pin-button { animation-name: t-dash-pin-button; }
.motion .t-dash__project--marble { animation-name: t-dash-marble; }
.motion .t-dash__project--atlas { animation-name: t-dash-atlas-row; }
@keyframes t-dash-loop {
  0% { opacity: 0; }
  3%, 93% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes t-dash-panel {
  0%, 28% { opacity: 1; top: 0; left: 0; right: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
  33%, 50% { opacity: 0; top: 0; left: 0; right: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
  51% { opacity: 0; transform: scale(0.9) translate(-8px, -4px); }
  58%, 100% { opacity: 1; transform: none; }
}
@keyframes t-dash-atlas {
  0%, 29% { opacity: 0; }
  35%, 100% { opacity: 1; }
}
@keyframes t-dash-pin {
  0%, 15% { opacity: 0; transform: translateX(-8px); background: transparent; }
  20%, 46% { opacity: 1; transform: none; background: transparent; }
  49%, 53% { background: var(--app-fill-strong); }
  58%, 100% { background: transparent; }
}
@keyframes t-dash-pin-button {
  0%, 10% { background: var(--text-3); transform: none; }
  12% { background: var(--accent); transform: scale(0.6); }
  16%, 100% { background: var(--accent); transform: none; }
}
@keyframes t-dash-marble {
  0%, 30% { background: var(--app-fill-strong); }
  33%, 100% { background: transparent; }
}
@keyframes t-dash-atlas-row {
  0%, 30% { background: transparent; }
  33%, 100% { background: var(--app-fill-strong); }
}

@media (max-width: 640px) {
  .scene--chat { aspect-ratio: 3 / 4.2; }
  .orch { grid-template-columns: minmax(0, 1fr); }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .scene--mac { aspect-ratio: 3 / 4.8; }
  .split--panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 0fr); transition-property: grid-template-rows; }
  .is-panel .split--panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1fr); }
  .split--panel .panel,
  .split--marble .panel { width: auto; }
  .split--panel .pane--panel { border-left-width: 0; border-top-width: 1px; }
  .split--panel .pane--panel > * { translate: 0 16px; }
  .panel { padding: 12px 14px; }
  .panel__lede { display: none; }
  .mac--sidebar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .side--layout { display: flex; gap: 6px; padding: 10px; }
  .side--layout :is(.mac__lights, .side__host, .side__row--project) { display: none; }
  .side--layout .side__row--ws { flex: 1; min-width: 0; padding-left: 8px; }
  .split--marble {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0fr) minmax(0, 0fr);
    grid-template-areas: "chat" "panel" "term";
  }
  .is-panel .split--marble { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0fr); }
  .is-term .split--marble { grid-template-rows: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  .split--marble .pane--panel { border-left-width: 0; border-top-width: 1px; }
  .split--atlas { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .split--atlas .pane--term { border-left-width: 0; border-top-width: 1px; }
}