*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1100px; margin:0 auto; padding:28px 28px 60px}

.masthead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:8px;
}
.wordmark{
  font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1;
  margin:0; color:var(--ink);
}
.masthead-meta{font-size:13px; color:var(--muted); text-align:right; white-space:nowrap}
.masthead-meta a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.masthead-meta a:hover{color:var(--ink)}

.masthead-home{justify-content:flex-end; margin-bottom:0}

.usage{font-size:12px; color:var(--muted); text-align:right; margin:4px 0 0}

.choose-hero{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center; margin:9vh 0 0;
}
.choose-orb{width:96px; height:96px; display:block}
.choose-title{
  font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.1;
  margin:0; color:var(--ink);
}
.choose-title em{font-style:italic; color:#006943}

.empty{color:var(--muted); font-size:13px; margin:24px 0 0; text-align:center}

.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tile{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 20px; min-height:140px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  position:relative; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.tile:hover{background:var(--surface-hover); border-color:var(--rule-strong); transform:translateY(-1px)}
.tile-name{font-size:16px; font-weight:600; letter-spacing:-.01em}
.tile-status{
  position:absolute; top:18px; right:18px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
}
.tile[data-status="running"] .tile-status{color:var(--good)}
.tile[data-status="failed"] .tile-status{color:var(--bad)}
.tile[data-status="provisioning"] .tile-status{color:var(--soon)}
.tile-links{margin-top:auto; display:flex; gap:14px; font-size:13px}
.tile-links a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.tile-links a:hover{color:var(--ink)}

.btn{
  display:inline-block; padding:9px 16px; border:none; border-radius:var(--radius-sm);
  background:var(--ink); color:#fff; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background .15s ease;
}
.btn:hover{background:#000}
.btn-secondary{
  background:transparent; color:var(--ink); border:1px solid var(--rule-strong);
}
.btn-secondary:hover{background:var(--rule); color:var(--ink)}

.intro-stage{
  min-height:100vh; padding:48px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
}
.intro-line{
  font-size:clamp(18px, 2.2vw, 24px); font-weight:500; letter-spacing:-.01em;
  line-height:1.4; min-height:1.4em; margin:0; color:var(--ink);
}
.intro-caret{
  display:inline-block; width:1ch; height:1em; vertical-align:text-bottom;
  background:var(--ink); animation:caret-blink .85s step-end infinite;
}
@keyframes caret-blink{50%{opacity:0}}

.signin{
  max-width:380px; margin:0 auto; padding:0 24px; text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-morph) var(--ease-morph), transform var(--dur-morph) var(--ease-morph);
}
.signin.is-ready{opacity:1; transform:translateY(0)}
.signin .wordmark{font-size:34px; margin-bottom:24px}
.signin .btn{display:inline-block}
.signin-providers{display:flex; flex-direction:column; gap:12px; align-items:stretch}
.signin-providers .btn{width:100%}
.signin .muted{color:var(--muted); font-size:13px; margin-top:18px}

.masthead-orb{width:36px; height:36px; vertical-align:middle; margin-right:10px}

.tile[data-status="provisioning"] .tile-status::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--soon); margin-right:6px; vertical-align:middle;
  animation:dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse{50%{opacity:.35}}

.empty-state{margin:0}
.empty-title{font-size:15px; font-weight:500; margin:0 0 4px}
.empty-hint{font-size:13px; color:var(--muted); margin:0}

@keyframes tile-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: no-preference){
  .tile{animation:tile-in var(--dur-pop) var(--ease-pop) backwards}
  .tile:nth-child(1){animation-delay:calc(var(--stagger-step) * 1)}
  .tile:nth-child(2){animation-delay:calc(var(--stagger-step) * 2)}
  .tile:nth-child(3){animation-delay:calc(var(--stagger-step) * 3)}
  .tile:nth-child(4){animation-delay:calc(var(--stagger-step) * 4)}
  .tile:nth-child(5){animation-delay:calc(var(--stagger-step) * 5)}
  .tile:nth-child(6){animation-delay:calc(var(--stagger-step) * 6)}
  .tile:nth-child(7){animation-delay:calc(var(--stagger-step) * 7)}
  .tile:nth-child(8){animation-delay:calc(var(--stagger-step) * 8)}
}
@media (prefers-reduced-motion: reduce){
  .intro-caret{animation:none}
  .signin{opacity:1; transform:none; transition:none}
  .tile[data-status="provisioning"] .tile-status::before{animation:none}
}

@media (max-width:960px){ .tools-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .wrap{padding:18px}
  .tools-grid{grid-template-columns:1fr}
  .masthead{flex-direction:column}
  .masthead-meta{text-align:left}
}

.spaces-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:48px}
.space-card{position:relative;display:flex;flex-direction:column;width:250px;background:var(--surface);padding:22px 20px 18px;min-height:260px;text-decoration:none;color:inherit;transition:background var(--dur-pop) var(--ease-pop)}
.space-card:hover{background:var(--surface-hover)}
.space-card:hover .sc-blob{transform:scale(1.06)}
.space-card>.sc-tl,.space-card>.sc-tr,.space-card>.sc-bl,.space-card>.sc-br{position:absolute;width:12px;height:12px;pointer-events:none}
.space-card>.sc-tl{top:0;left:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.space-card>.sc-tr{top:0;right:0;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.space-card>.sc-bl{bottom:0;left:0;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink)}
.space-card>.sc-br{bottom:0;right:0;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}
.sc-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sc-blob{display:flex;align-items:center;justify-content:center;height:84px;margin-bottom:14px;transition:transform var(--dur-pop) var(--ease-pop)}
.sc-blob-holder{width:72px;height:72px;position:relative}
.sc-blob-holder canvas,.sp-blob canvas{display:block;width:100%;height:100%}
.sc-name{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-align:center;margin:0 0 8px}
.sc-apps{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.55;margin:0 0 14px;flex:1 0 auto}
.sc-sources{margin:0 0 12px;display:flex;align-items:center;justify-content:center;gap:7px 12px;flex-wrap:wrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}
.sc-access{border-top:1px solid var(--rule);padding-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sc-lock{flex:none}
.sc-locked{cursor:default}
.sc-locked:hover{background:var(--surface)}
.sc-locked:hover .sc-blob{transform:none}
.sc-locked .sc-access{color:var(--muted)}
.sc-source{display:inline-flex;align-items:center;gap:5px}
.sc-dot-ok,.sc-dot-pending,.sc-dot-orphaned{width:5px;height:5px;border-radius:50%}
.sc-dot-ok{background:var(--good)}
.sc-dot-pending{background:var(--soon)}
.sc-dot-orphaned{background:var(--bad)}
.sc-source-user{border:1px dashed var(--rule-strong);border-radius:999px;padding:2px 9px;text-decoration:none;color:inherit}
.sc-source-user:hover{border-style:solid}
@media (max-width:560px){.space-card{width:100%}}
@media (prefers-reduced-motion: no-preference){
.space-card{animation:tile-in var(--dur-pop) var(--ease-pop) backwards}
.spaces-grid .space-card:nth-child(1){animation-delay:calc(var(--stagger-step) * 1)}
.spaces-grid .space-card:nth-child(2){animation-delay:calc(var(--stagger-step) * 2)}
.spaces-grid .space-card:nth-child(3){animation-delay:calc(var(--stagger-step) * 3)}
.spaces-grid .space-card:nth-child(4){animation-delay:calc(var(--stagger-step) * 4)}
.spaces-grid .space-card:nth-child(n+5){animation-delay:calc(var(--stagger-step) * 5)}
}

.wordmark a{color:inherit;text-decoration:none}
.space-hero{display:flex;align-items:center;gap:16px;margin:28px 0 18px}
.sp-blob{width:44px;height:44px;display:block}
.sp-name{font-size:28px;font-weight:600;letter-spacing:-.01em;margin:0}
.sp-meta{font-size:13px;color:var(--muted);margin:2px 0 0}
.sp-meta a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.sp-meta a:hover{color:var(--ink)}
.sp-sources{margin:0 0 0 auto}
.sp-back{display:inline-block;font-size:12px;color:var(--ink-soft);text-decoration:none;margin:18px 0 0}
.sp-back:hover{text-decoration:underline}
.sp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 28px}
.sp-action{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;font-size:13px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.sp-action:hover{background:var(--surface-hover);border-color:var(--ink-soft);color:var(--ink);transform:translateY(-1px)}
.sp-action::before{content:"+";font-size:15px;line-height:0;color:var(--muted);transition:color .15s ease}
.sp-action:hover::before{color:var(--ink)}
.sp-action-accent{color:var(--good);border-color:var(--good-border)}
.sp-action-accent::before{content:none}
.sp-action-accent:hover{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.act-section{margin:28px 0 0}
.act-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.act-title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
.act-count{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.act-list{display:flex;flex-direction:column;gap:10px}
.act-row{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-sm)}
.act-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.act-spec{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-next{font-size:12px;color:var(--muted)}
.act-runs{display:inline-flex;align-items:center;gap:6px}
.act-run{display:inline-flex}
.act-status{font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.act-status[data-status="ready"]{color:var(--good)}
.act-status[data-status="failed"]{color:var(--bad)}
.act-btns{display:flex;gap:8px}
.act-btn{font:inherit;font-size:12px;padding:6px 12px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.act-btn:hover{background:var(--surface-hover);border-color:var(--ink-soft);color:var(--ink)}
.act-btn:disabled{opacity:.5;cursor:default}
.act-btn-danger:hover{background:var(--bad-soft);border-color:var(--bad-border);color:var(--bad)}
.tile-by{font-size:11px;color:var(--muted)}

.icon-sprite{display:none}

.shell{display:flex;min-height:100vh}
.space-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

.side{
  width:var(--sidebar-w);flex:none;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--rule);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width .18s var(--ease-pop);
}
.side-icon{width:20px;height:20px;flex:none}
.side-head{
  display:flex;align-items:center;height:60px;
  border-bottom:1px solid var(--rule);
}
.side-brand{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  padding:0 8px 0 18px;color:var(--ink);text-decoration:none;
}
.side-collapse{
  flex:none;width:30px;height:30px;margin-right:12px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--rule);
  background:var(--surface);border-radius:8px;cursor:pointer;color:var(--muted);
  transition:color .15s,border-color .15s,background .15s;
}
.side-collapse:hover{color:var(--ink);border-color:var(--rule-strong);background:var(--surface-hover)}
.side-icon-expand{display:none}
.side-brand .side-icon{width:24px;height:24px}
/* The Ask Otto button's mark is the living Orb (an OrganicLoader brain),
   matching the v9 sidebar. Sized like a side icon; the loader fills it. */
.side-ask-orb{display:block;width:100%;max-width:150px;aspect-ratio:1/1;margin:0 auto}
.side-ask-orb canvas{display:block;width:100%;height:100%}
.side-brand-text{display:flex;flex-direction:column;min-width:0}
.side-brand-name{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.side-brand-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);padding:16px 10px 6px;
}
.side-item{
  display:flex;align-items:center;gap:12px;padding:9px 10px;
  border-radius:10px;font-size:14px;text-decoration:none;position:relative;
  white-space:nowrap;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
a.side-item:hover{background:var(--surface-hover);color:var(--ink)}
.side-item.is-active{color:var(--ink);background:var(--surface);box-shadow:inset 2px 0 0 var(--ink)}
.side-item.is-active .side-icon{color:var(--ink)}
.side-item-off{color:var(--muted)}
.side-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-dot{width:6px;height:6px;border-radius:50%;flex:none}
.side-dot-ok{background:var(--good)}
.side-dot-pending{background:var(--faint);animation:dot-pulse 1.6s ease-in-out infinite}
.side-dot-bad{background:var(--bad)}

.side-row{display:flex;align-items:center;border-radius:10px;transition:background .15s;touch-action:pan-y;-webkit-user-drag:none;user-select:none}
.side-row .side-item{-webkit-user-drag:none}
.side-row:hover{background:var(--surface-hover)}
/* Active app row wears the same rounded selector + inset stripe as Home,
   spanning the whole row (the wrapper is already rounded). */
.side-row.is-active{background:var(--surface);box-shadow:inset 2px 0 0 var(--ink)}
.side-row.is-active:hover{background:var(--surface)}
.side-dragging{opacity:.55;background:var(--surface-hover);box-shadow:var(--shadow-pop,0 6px 24px rgba(0,0,0,.12))}
body.side-reordering{cursor:grabbing;user-select:none}
body.side-reordering .side-item,body.side-reordering .side-act{pointer-events:none}
.side-row .side-item{flex:1;min-width:0;border-radius:0;background:transparent}
.side-row .side-item:hover{background:transparent}
.side-row:hover .side-item{color:var(--ink)}
/* The row carries the selector, so neutralise the link's own stripe/fill. */
.side-row .side-item.is-active{background:transparent;box-shadow:none}
.side-tail{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 10px 0 4px;flex:none}
.side-acts{display:none;align-items:center;gap:2px}
.side-row:hover .side-tail.has-acts .side-dot{display:none}
.side-row:hover .side-tail.has-acts .side-acts{display:flex}
.side-act{
  width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:6px;cursor:pointer;color:var(--muted);
  transition:background .15s,color .15s;
}
.side-act:hover{background:var(--rule);color:var(--ink)}
.side-act-icon{width:15px;height:15px}

/* Ask Otto is a large breathing Orb with the label beneath it (v9 sidebar).
   The Orb is an OrganicLoader that fills .side-ask-orb via ResizeObserver. */
.side-ask{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:calc(100% - 20px);margin:12px 10px 14px;padding:4px 10px;
  border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .15s;
}
.side-ask:hover{color:var(--ink)}
.side-ask .side-item-label{flex:none;text-align:center;opacity:.75;transition:opacity .15s}
.side-ask:hover .side-item-label{opacity:1}
.side-foot{padding:12px 14px 14px;border-top:1px solid var(--rule)}
.side-airgap{
  display:flex;align-items:center;gap:8px;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
}
.side-airgap-dot{
  width:8px;height:8px;border-radius:50%;background:var(--good);
  animation:dot-pulse 3.2s ease-in-out infinite;
}
.side-user{font-size:12px;color:var(--muted);margin-top:10px}
.side-user a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.side-user a:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .side-airgap-dot,.side-dot-pending{animation:none}
}
/* Narrow: keep the shell a row (never stack — that dropped the app frame
   below the nav) and hide the collapse toggle; JS forces the icon rail. */
@media (max-width:860px){
  .side-collapse{display:none}
}

/* Collapsed sidebar — icon-only rail. State lives on <html> so it can be
   applied before first paint from localStorage (no flash). */
html.nav-collapsed .side{width:var(--sidebar-w-collapsed)}
html.nav-collapsed .side-head{flex-direction:column;gap:8px;height:auto;padding:12px 0 14px}
html.nav-collapsed .side-brand{flex:none;padding:0;justify-content:center}
html.nav-collapsed .side-collapse{margin:0}
html.nav-collapsed .side-brand-text,
html.nav-collapsed .side-item-label,
html.nav-collapsed .side-label,
html.nav-collapsed .side-tail,
html.nav-collapsed .side-user{display:none}
html.nav-collapsed .side-icon-collapse{display:none}
html.nav-collapsed .side-icon-expand{display:inline-flex}
html.nav-collapsed .side-item,
html.nav-collapsed .side-ask{justify-content:center;gap:0;padding-left:0;padding-right:0}
html.nav-collapsed .side-nav{padding:14px 8px}
html.nav-collapsed .side-ask{width:auto;margin:10px 0 12px;padding:0}
html.nav-collapsed .side-ask-orb{width:44px;max-width:44px}
html.nav-collapsed .side-foot{padding:12px 0;display:flex;justify-content:center}
html.nav-collapsed .side-airgap{font-size:0;gap:0}

/* Right panel: overview vs. the in-place app frame. */
.space-overview{flex:1;min-height:0;overflow-y:auto}
.space-frame{flex:1;min-height:0;display:flex;flex-direction:column}
.frame-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:60px;padding:0 16px;border-bottom:1px solid var(--rule);background:var(--surface);
}
.frame-title{
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame-actions{display:flex;gap:8px;flex:none}
.frame-btn{
  font:inherit;font-size:12px;padding:6px 12px;border:1px solid var(--rule-strong);
  border-radius:999px;background:var(--surface);color:var(--ink-soft);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.frame-btn:hover{background:var(--surface-hover);color:var(--ink);border-color:var(--ink)}
.frame-menu{position:relative}
.frame-menu-list{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:180px;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop,0 6px 24px rgba(0,0,0,.12));padding:6px;
  display:flex;flex-direction:column;gap:2px;
}
.frame-menu-item{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--ink-soft);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s;
}
.frame-menu-item:hover{background:var(--surface-hover);color:var(--ink)}
.frame-menu-danger{color:var(--bad)}
.frame-menu-danger:hover{background:var(--bad-soft);color:var(--bad)}
.app-frame{flex:1;min-height:0;width:100%;border:0;display:block;background:var(--surface)}

/* Ask Otto — centered two-pane modal, ported from the v9 copilot dialog. */
.copilot-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(13,13,13,.30);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:32px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.copilot-backdrop.show{opacity:1;pointer-events:auto}
.copilot-drawer{
  width:min(1160px,100%);height:min(860px,calc(100vh - 64px));
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  display:grid;grid-template-columns:300px 1fr;overflow:hidden;
  transform:scale(.96) translateY(8px);opacity:0;
  transition:transform .28s var(--ease-pop),opacity .25s ease;
}
.copilot-backdrop.show .copilot-drawer{transform:none;opacity:1}
.copilot-pane-loader-wrap{
  background:var(--paper);border-right:1px solid var(--rule);padding:32px 28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.copilot-pane-loader{display:block;width:100%;max-width:200px;aspect-ratio:1/1}
.copilot-pane-loader canvas{display:block;width:100%;height:100%}
.copilot-pane-meta{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;
}
.copilot-tune{
  font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;
}
.copilot-tune:hover{color:var(--ink)}
.copilot-pane-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.copilot-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--rule)}
.copilot-title{flex:1;min-width:0}
.copilot-title-name{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.copilot-title-sub{font-size:12px;color:var(--muted);margin-top:3px}
.copilot-close{
  width:30px;height:30px;flex:none;border:1px solid var(--rule);background:var(--surface);
  border-radius:8px;cursor:pointer;font-size:18px;line-height:1;color:var(--ink-soft);
  transition:color .15s,border-color .15s;
}
.copilot-close:hover{color:var(--ink);border-color:var(--rule-strong)}
.copilot-messages{flex:1 1 0;min-height:0;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
/* Host for the .otto-ask React island; fills the chat pane below the header. */
.copilot-body{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:18px 20px}
.copilot-welcome{
  padding:16px 18px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  font-size:13px;color:var(--ink-soft);line-height:1.5;
}
.copilot-welcome p{margin:0 0 14px}
.copilot-starters{display:flex;flex-direction:column;gap:6px}
.copilot-starter{
  text-align:left;padding:8px 12px;border:1px solid var(--rule);background:var(--surface);
  border-radius:8px;cursor:pointer;font-size:12px;color:var(--ink);font-family:inherit;
  transition:border-color .15s,background .15s;
}
.copilot-starter:hover{border-color:var(--ink);background:var(--surface-hover)}
.copilot-error{margin:0 20px 8px;font-size:12px;color:var(--bad)}
.copilot-composer{
  display:flex;gap:8px;padding:14px 18px 18px;border-top:1px solid var(--rule);background:var(--surface);
}
.copilot-input{
  flex:1;padding:10px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);
  font-family:inherit;font-size:14px;color:var(--ink);resize:none;
  min-height:40px;max-height:160px;line-height:1.5;
}
.copilot-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,13,13,.10)}
.copilot-send{
  width:40px;height:40px;flex-shrink:0;background:var(--ink);border:1px solid var(--ink);
  border-radius:10px;color:#fff;cursor:pointer;font-size:16px;transition:background .15s,transform .15s;
}
.copilot-send:hover{background:#000;transform:translateY(-1px)}
@media (max-width:720px){
  .copilot-backdrop{padding:16px}
  .copilot-drawer{grid-template-columns:1fr;height:min(720px,100%)}
  .copilot-pane-loader-wrap{display:none}
}
@media (prefers-reduced-motion: reduce){
  .copilot-backdrop,.copilot-drawer{transition:none}
}

/* The orb travels: exactly one element carries the shared name per state —
   the sidebar slot when the modal is closed, the modal pane when open — and
   setAsk() flips html.ask-open inside a view transition, so the browser
   morphs the orb between the two. The sidebar slot goes empty while the orb
   is "away" (visibility keeps its layout). */
html:not(.ask-open) #side-ask-orb{view-transition-name:otto-orb}
html.ask-open .copilot-pane-loader{view-transition-name:otto-orb}
html.ask-open #side-ask-orb{visibility:hidden}
::view-transition-group(otto-orb){
  animation-duration:.45s;
  animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* "Your apps" — copied from the Venus home shelf (body[data-app="home"]):
   the warm dashboard palette scoped to the panel — white card, grey tiles,
   green icons. The warm tokens (== v9's home scope) are the --dash-* set. */
.home-tools-section{
  --paper:var(--dash-bg);--surface:var(--dash-card);
  --rule:var(--dash-hair);--rule-strong:var(--dash-hair-strong);
  --ink:var(--dash-ink);--ink-soft:var(--dash-ink-soft);--muted:var(--dash-muted);
  --accent:var(--dash-accent);--accent-soft:var(--dash-accent-soft);--good:#006943;
  margin:28px 0 0;padding:28px 30px 32px;background:var(--surface);
  border:0;border-radius:var(--dash-r-card);box-shadow:var(--dash-shadow);
}
.home-tools-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 24px}
.home-tools-label{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;line-height:1.1}
.home-tools-count{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:10px}
.home-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.home-app-tile{
  display:flex;flex-direction:column;gap:8px;padding:18px 20px;min-height:156px;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  text-decoration:none;color:var(--ink);cursor:pointer;position:relative;font-family:inherit;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
a.home-app-tile:hover{background:var(--surface);border-color:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 18px rgba(40,30,10,.06)}
.home-app-tile-icon{width:26px;height:26px;color:var(--accent);margin-bottom:6px}
.home-app-tile-name{font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.home-app-tile-tagline{font-size:12px;line-height:1.45;color:var(--ink-soft);flex:1}
.home-app-tile-status{
  position:absolute;top:18px;right:18px;font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:var(--good);
}
.home-app-tile-status[data-status="soon"]{color:var(--muted)}
.home-app-tile-status[data-status="failed"]{color:var(--bad)}
.home-app-new{
  align-items:center;justify-content:center;text-align:center;gap:6px;
  background:transparent;border:1px dashed var(--rule-strong);border-radius:14px;color:var(--ink-soft);
}
.home-app-new:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateY(-2px)}
.home-app-new-plus{font-size:32px;font-weight:300;line-height:1;color:var(--accent);margin-bottom:4px}
.home-app-new-name{font-size:14px;font-weight:600;color:var(--ink)}
.home-app-new-sub{font-size:12px;color:var(--muted);max-width:22ch;line-height:1.4}
@media (max-width:960px){.home-tools-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.home-tools-section{margin-top:24px;padding:24px 20px 28px}.home-tools-label{font-size:17px}}
@media (max-width:540px){.home-tools-grid{grid-template-columns:1fr}}

@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
@view-transition{navigation:none}
}

.ad-wrap{max-width:760px}
.ad-section{margin:30px 0 0}
.ad-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.ad-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 2px rgba(13,13,13,.04),0 6px 24px rgba(13,13,13,.05);
  overflow:hidden;
}
.ad-card + .ad-card{margin-top:14px}
.ad-card-head{display:flex;align-items:baseline;gap:10px;padding:16px 18px 2px}
.ad-card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.ad-card-count{font-size:12px;color:var(--muted)}
.ad-table{width:100%;border-collapse:collapse;font-size:14px}
.ad-table th{
  padding:14px 18px 8px;text-align:left;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ad-table td{padding:10px 18px;border-top:1px solid var(--rule);vertical-align:middle}
.ad-table tbody tr:hover td{background:rgba(0,0,0,.02)}
.ad-email{font-weight:500}
.ad-name{color:var(--ink-soft)}
.ad-role{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ad-pill{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.ad-actions{text-align:right;white-space:nowrap}
.ad-act{
  display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid transparent;
  background:transparent;font:inherit;font-size:12px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.ad-act:hover{color:var(--ink);border-color:var(--rule-strong);background:var(--surface-hover)}
.ad-empty{color:var(--muted);font-size:13px}
.ad-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--rule)}
.ad-input,.ad-select{
  height:34px;padding:0 12px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  background:var(--surface);font:inherit;font-size:13px;color:var(--ink);min-width:0;
}
.ad-input:focus,.ad-select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,13,13,.10)}
.ad-select{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
.ad-grow{flex:1 1 140px}
.ad-form .btn{height:34px;padding:0 16px;font-size:13px}

/* /_me — "How Otto talks": preset cards + style note. */
.me-lede{margin:0 0 14px;color:var(--ink-soft);font-size:14px}
.me-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.me-style{
  display:flex;flex-direction:column;gap:8px;text-align:left;padding:16px;
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  font:inherit;color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(13,13,13,.04),0 6px 24px rgba(13,13,13,.05);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.me-style:hover{border-color:var(--rule-strong)}
.me-style.is-selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 6px 24px rgba(13,13,13,.05)}
.me-style:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.me-style-label{font-size:14px;font-weight:600;letter-spacing:-.01em}
.me-style-blurb{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.me-style-sample{
  font-size:12.5px;color:var(--muted);line-height:1.5;font-style:italic;
  border-top:1px solid var(--rule);padding-top:8px;margin-top:auto;
}
.me-note-card{margin-top:14px;padding:16px 18px}
.me-note-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.me-note{
  width:100%;min-height:84px;resize:vertical;padding:10px 12px;
  border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  background:var(--surface);font:inherit;font-size:13px;color:var(--ink);line-height:1.5;
}
.me-note:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,13,13,.10)}
.me-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}
.me-actions .btn{height:34px;padding:0 16px;font-size:13px}
.me-status{font-size:12.5px;color:var(--muted)}
.me-foot{margin:14px 0 0;font-size:12.5px;color:var(--muted)}