/*
  Thraft 0.2, by role. The page is quiet and the window is the subject:
  every colour inside the window is a token from app/src/theme.rs, the
  same values the 0.2 canvas boards read, and the window's parts follow
  those boards (the shell, the rail, the board, the dock, the block).
*/
:root {
  color-scheme: dark;
  --bg: #040406;
  --panel: #0e0d11;
  --card: #141418;
  --field: #1f1e24;
  --menu: #18171c;
  --border: #1d1d21;
  --border-hover: #494851;
  --menu-border: #2b2a30;
  --text: #e1e1e5;
  --on-accent: #090911;
  --text-soft: #c7c6cd;
  --text-muted: #a9a9b1;
  --text-rail: #95949d;
  --text-faint: #807f89;
  --text-dim: #515158;
  --icon-ink: #55555e;
  --accent: #7b74e8;
  --accent-hover: #9d92fa;
  --agent: #4fae9e;
  --open: #d9a03c;
  --settled: #69ad52;
  --delete: #c96a5f;
  --row-hover: #101013;
  --row-active: #121215;
  --accent-wash: #7b74e826;
  --insert-wash: #69ad522e;
  --delete-wash: #c96a5f24;
  --agent-wash: #4fae9e26;
  --chip-wash: #e1e1e512;
  --edge: #e1e1e51f;
  --hair: rgba(225, 225, 229, 0.08);
  --sans: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --code: Menlo, ui-monospace, "Geist Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; }
svg.i { width: 16px; height: 16px; flex: none; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- */
/* Site chrome                                                       */
/* ---------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, calc((100vw - 1480px) / 2 + 40px)) 0;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--hair); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; text-decoration: none; letter-spacing: -0.01em; }
.brand svg { width: 16px; height: 20px; color: var(--text); }
.nav-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--text-faint); }
.nav-links a { text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-sp { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  font: 500 13.5px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-light { background: #ececf0; color: #09090b; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.1); }
.btn-light:hover { background: #fff; }
.btn-ghost { color: var(--text); border: 1px solid var(--hair); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: rgba(225,225,229,.18); background: rgba(255,255,255,.05); }
.btn-lg { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 11px; }
.btn svg { width: 14px; height: 17px; }
.btn .i { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */

.hero { position: relative; padding: calc(150px + env(safe-area-inset-top, 0px)) 16px 0; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,.025);
  font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.pill b { font-weight: 500; font-size: 11.5px; letter-spacing: .02em; color: var(--text); background: var(--accent-wash); border: 1px solid rgba(123,116,232,.35); border-radius: 999px; padding: 2px 8px; }
.pill .i { width: 13px; height: 13px; color: var(--text-dim); }
.hero h1 {
  margin: 28px auto 22px;
  max-width: 13ch;
  font-weight: 500;
  font-size: clamp(44px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.052em;
  background: linear-gradient(180deg, #f6f6f8 22%, #a3a3ac 108%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.hero .lede { max-width: 36rem; margin: 0 auto; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
/* The glow under the window reaches past the page's sides, so the hero clips it there. */
.hero { overflow-x: clip; }
.hero-stage { position: relative; margin: 76px auto 0; max-width: 1240px; perspective: 2400px; }
.hero-stage::before {
  content: ""; position: absolute; inset: -12% -8% 20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 40%, rgba(123,116,232,.16), transparent 70%),
    radial-gradient(35% 45% at 72% 35%, rgba(79,174,158,.12), transparent 70%);
  filter: blur(20px);
}
.hero-tilt { position: relative; z-index: 1; transform-origin: 50% 0; will-change: transform; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: -2px; height: 20%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg) 88%); }

/* ---------------------------------------------------------------- */
/* Roles: the text on the left, the pinned window on the right       */
/* ---------------------------------------------------------------- */

.roles {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.62fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1560px;
  margin: 40px auto 0;
  padding: 0 clamp(16px, 3vw, 40px);
}
.roles-intro { grid-column: 1 / -1; text-align: center; padding: 60px 0 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-faint); }
.eyebrow .i { width: 14px; height: 14px; }
.roles-intro h2 { margin: 14px auto 0; max-width: 18ch; font-weight: 500; font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.roles-intro p { margin: 16px auto 0; max-width: 34rem; color: var(--text-muted); font-size: 16px; }

.chapters { position: relative; }
.ch { min-height: 100vh; display: flex; align-items: center; padding: 60px 0; }
.ch-in { max-width: 27rem; transition: opacity .5s; }
.ch:not(.on) .ch-in { opacity: .32; }
.ch-label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-muted); }
.ch-label .n { font: 500 11.5px/1 var(--mono); color: var(--text-dim); letter-spacing: .04em; }
.ch-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 10px var(--c, var(--accent)); }
.ch h3 { margin: 14px 0 14px; font-weight: 500; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.ch p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.ch ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--hair); }
.ch li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--text-soft); }
.ch li .i { width: 15px; height: 15px; color: var(--text-dim); }
.ch .who { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-faint); }
.av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 9.5px/1 var(--sans); color: #fff; flex: none; }
.replay { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--hair); background: transparent; color: var(--text-faint); font: 500 12px/1 var(--sans); cursor: pointer; }
.replay:hover { color: var(--text); border-color: rgba(225,225,229,.2); }
.replay .i { width: 12px; height: 12px; }

.stage { position: relative; }
.stage-pin { position: sticky; top: 76px; height: calc(100vh - 92px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.rtabs { display: flex; gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid var(--hair); background: rgba(255,255,255,.02); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs button { position: relative; flex: none; height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-faint); font: 500 12.5px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; }
.rtabs button:hover { color: var(--text); }
.rtabs button.on { color: var(--text); background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.rtabs button i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--c); opacity: .9; }
.win-host { position: relative; width: 100%; }
.win-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage-glow { position: absolute; inset: 8% 0 0 4%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, var(--glow, rgba(123,116,232,.12)), transparent 70%); filter: blur(30px); transition: background 1s; }

/* ---------------------------------------------------------------- */
/* The end                                                           */
/* ---------------------------------------------------------------- */

.end { text-align: center; padding: 140px 16px 60px; position: relative; }
.end-mark { width: 64px; height: 80px; margin: 0 auto 30px; color: var(--text); filter: drop-shadow(0 0 30px rgba(79,174,158,.35)); }
.end h2 { margin: 0 auto; max-width: 16ch; font-weight: 500; font-size: clamp(36px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.05em; background: linear-gradient(180deg, #f6f6f8 30%, #9d9da6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.end p { margin: 20px auto 0; max-width: 32rem; color: var(--text-muted); font-size: 17px; }
.end .ctas { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.tagline { margin-top: 70px; font-size: 14px; color: var(--text-faint); }
.tagline b { color: var(--text); font-weight: 500; }
footer { border-top: 1px solid var(--hair); margin-top: 90px; padding: 28px clamp(16px, 3vw, 40px) 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 13px; color: var(--text-dim); max-width: 1560px; margin-left: auto; margin-right: auto; }
footer a { text-decoration: none; color: var(--text-faint); }
footer a:hover { color: var(--text); }
.foot-links { display: inline-flex; gap: 18px; }

/* ---------------------------------------------------------------- */
/* The window: Thraft 0.2's shell                                    */
/* ---------------------------------------------------------------- */

.w {
  position: relative;
  width: 1000px;
  height: 660px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(225,225,229,.1), inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px -30px rgba(0,0,0,.9), 0 20px 50px -20px rgba(0,0,0,.8);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.w .i { width: 15px; height: 15px; }
.w-top { flex: none; height: 44px; display: flex; align-items: center; }
.w-left { width: 232px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; }
.w-lights { display: flex; gap: 7px; }
.w-lights i { width: 11px; height: 11px; border-radius: 50%; background: #3a2826; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.w-lights i:nth-child(2) { background: #3a3222; }
.w-lights i:nth-child(3) { background: #24332a; }
.w-acts { margin-left: auto; display: flex; gap: 12px; color: var(--text-dim); }
.w-acts .i { width: 14px; height: 14px; }
.w-acts .back { transform: scaleX(-1); }
.w-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; padding-right: 8px; }
.w-tab { display: flex; align-items: center; gap: 7px; height: 29px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; color: var(--text-faint); white-space: nowrap; max-width: 220px; transition: background .3s, color .3s; }
.w-tab .i { width: 13px; height: 13px; color: var(--text-dim); }
.w-tab.on { background: var(--panel); color: var(--text); }
.w-tab.on .i { color: var(--text-muted); }
.w-tab .tm { width: 6px; height: 6px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 6px var(--agent); animation: breathe 1.6s ease-in-out infinite; }
.w-tab .tm.new { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: none; }
.w-tabadd { color: var(--text-dim); display: grid; place-items: center; width: 24px; }
.w-tabadd .i { width: 13px; height: 13px; }
@keyframes breathe { 50% { opacity: .35; } }

.w-mid { flex: 1; min-height: 0; display: flex; }
.w-rail { width: 232px; flex: none; display: flex; flex-direction: column; padding: 4px 10px 8px; font-size: 13px; color: var(--text-rail); }
.w-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px; margin-bottom: 10px; }
.w-ws { width: 22px; height: 22px; border-radius: 6px; background: #26252c; color: var(--text); font: 600 9.5px/22px var(--sans); text-align: center; letter-spacing: .02em; }
.w-wsn { font-size: 13.5px; font-weight: 500; color: var(--text); }
.w-head .chev { width: 12px; height: 12px; color: var(--text-dim); }
.w-head .sp { flex: 1; }
.w-head .srch { width: 15px; height: 15px; color: var(--text-dim); }
.w-compose { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #1c1b21; color: var(--text-muted); }
.w-compose .i { width: 13px; height: 13px; }
.w-sec { font-size: 11.5px; color: var(--text-dim); padding: 12px 8px 5px; }
.w-row { position: relative; display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 8px; border-radius: 7px; white-space: nowrap; transition: background .25s, color .25s; }
.w-row .i { width: 14px; height: 14px; color: var(--icon-ink); transition: color .25s; }
.w-row .ct { margin-left: auto; font: 400 11px/1 var(--code); color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.w-row .ct .d { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.w-row .ct .d.ag { background: var(--agent); }
.w-row.on { background: #17161b; color: var(--text); }
.w-row.on .i { color: var(--text-muted); }
.w-row.sub { padding-left: 30px; }
.w-row.add { color: var(--accent); }
.w-row.add .i { color: var(--accent); }
.w-row .bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.5); color: var(--text); } }
.w-rail .grow { flex: 1; }
.w-foot { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; font-size: 12px; color: var(--text); white-space: nowrap; }
.w-foot .av { width: 18px; height: 18px; font-size: 8px; }
.w-foot .rl { color: var(--text-dim); }
.w-foot .i { margin-left: auto; width: 13px; height: 13px; color: var(--text-dim); }
.w-rail.guest .ws-only { display: none; }

.w-board { position: relative; flex: 1; min-width: 0; margin: 0 8px 0 0; border-radius: 11px; background: var(--panel); box-shadow: 0 0 0 .5px var(--edge); display: flex; flex-direction: column; overflow: hidden; }
.w-crumbs { flex: none; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #16151a; font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }
.w-crumbs .i { width: 13px; height: 13px; color: var(--text-dim); }
.w-crumbs .sep { color: var(--text-dim); font-size: 10px; }
.w-crumbs b { font-weight: 400; color: var(--text); }
.w-crumbs .dots { color: var(--text-dim); letter-spacing: 1px; margin-left: 4px; }
.w-crumbs .mx { margin-left: auto; }
.w-screens { position: relative; flex: 1; min-height: 0; }
.scr { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.scr-scroll { position: absolute; inset: 0; overflow: hidden; }
.scr-in { transition: transform .8s cubic-bezier(.3,.7,.2,1); will-change: transform; }

.w-status { flex: none; height: 30px; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 244px; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.w-status .code { font: 500 11px/1 var(--code); color: var(--text-muted); }
.w-status .mid { flex: 1; display: flex; justify-content: center; gap: 14px; }
.w-status .c { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.w-status .c::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--k, var(--text-dim)); }
.w-status .rm { display: inline-flex; align-items: center; gap: 7px; }
.w-status .rm::before { content: ""; width: 16px; height: 9px; border-radius: 5px; background: #2a292f; box-shadow: inset -7px 0 0 #3b3a41; }
.w-status .br, .w-status .mac { display: inline-flex; align-items: center; gap: 6px; }
.w-status .i { width: 12px; height: 12px; color: var(--text-dim); }
.w-status .mac.live { color: var(--text-soft); }
.w-status .mac.live .i { color: var(--agent); }

/* The dock: one object, a ladder of rungs */
.w-dock {
  position: absolute; left: 50%; bottom: 16px; z-index: 20;
  transform: translateX(-50%);
  height: 36px; display: flex; align-items: center; gap: 10px;
  padding: 0 5px 0 14px; border-radius: 20px;
  background: var(--menu);
  box-shadow: 0 0 0 .5px var(--edge), 0 2px 6px rgba(0,0,0,.55), 0 12px 32px -4px rgba(0,0,0,.7);
  font-size: 12.5px; color: var(--text-faint); white-space: nowrap;
  transition: width .45s cubic-bezier(.3,.7,.2,1), background .3s;
}
.w-dock .g { width: 18px; height: 7px; flex: none; }
.w-dock .g .dot { transition: cx .6s; }
.w-dock.run .g .dot { animation: glyph 1.2s ease-in-out infinite; }
@keyframes glyph { 50% { transform: translateX(3px); } }
.w-dock .tx { color: var(--text-muted); }
.w-dock .tx b { color: var(--text); font-weight: 500; }
.w-dock .tx code { font: 400 11px/1 var(--code); color: var(--text-faint); margin: 0 2px; }
.w-dock .tn { font-size: 11px; color: var(--text-dim); padding-right: 9px; }
.w-dock .db { height: 26px; padding: 0 12px; border-radius: 13px; background: var(--accent); color: #fff; font: 500 12.5px/26px var(--sans); transition: background .2s, transform .15s; }
.w-dock .db.ghost { background: transparent; color: var(--accent-hover); padding: 0 8px; }
.w-dock .db.press { transform: scale(.94); background: var(--accent-hover); }
.w-dock.fresh { background: #1b1930; animation: fresh 2.4s ease-in-out infinite; }
@keyframes fresh { 50% { box-shadow: 0 0 0 .5px var(--accent), 0 0 0 6px var(--accent-wash), 0 12px 32px -4px rgba(0,0,0,.7); } }
.w-dock .spin { width: 13px; height: 13px; color: var(--agent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.w-dock .ok { width: 14px; height: 14px; color: var(--settled); }
.w-dock-in { display: flex; align-items: center; gap: 10px; transition: opacity .25s; }
.w-dock-in.out { opacity: 0; }

/* The pointer */
.w-cursor { position: absolute; left: 0; top: 0; z-index: 40; width: 18px; height: 22px; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.45,.1,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.w-cursor.on { opacity: 1; }
.w-cursor svg { width: 18px; height: 22px; }
.w-cursor .ring { position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); opacity: 0; transform: scale(.4); }
.w-cursor.click .ring { animation: ring .45s ease-out; }
@keyframes ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------------------------------------------------------------- */
/* Screen parts                                                      */
/* ---------------------------------------------------------------- */

.pg { padding: 30px 40px 90px; }
.pg-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pg h4 { margin: 0; font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.pg .meta { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.pg .meta .d { color: var(--text-dim); margin: 0 5px; }
.btn-s { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; border: 1px solid #2a292f; font-size: 12px; color: var(--text); }
.btn-s .i { width: 12px; height: 12px; }
.btn-a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; transition: background .2s, transform .15s; }
.btn-g { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: #1f1e24; color: var(--text); font-size: 12px; transition: background .2s, transform .15s; }
.press { transform: scale(.95); filter: brightness(1.15); }
.flt { display: flex; gap: 16px; margin: 22px 0 14px; font-size: 12px; color: var(--text-faint); }
.flt b { color: var(--text); font-weight: 400; }
.flt em { font-style: normal; color: var(--text-dim); margin-left: 3px; }
.flt em.o { color: var(--open); }
.mono { font-family: var(--code); }

/* Asks: a list and the one you are on */
.split { display: grid; grid-template-columns: 300px 1fr; border: 1px solid #1c1b20; border-radius: 10px; overflow: hidden; height: 420px; }
.list { border-right: 1px solid #1c1b20; overflow: hidden; }
.lh { font-size: 11px; color: var(--text-dim); padding: 8px 16px 6px; background: #0c0b0f; border-bottom: 1px solid #17161b; }
.li { position: relative; padding: 11px 16px 12px; border-bottom: 1px solid #17161b; transition: background .3s; }
.li.on { background: #131217; }
.li .t { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); }
.li .t .d { width: 5px; height: 5px; border-radius: 50%; background: var(--open); }
.li .t .d.g { background: var(--settled); }
.li .t .d.n { background: transparent; box-shadow: inset 0 0 0 1px var(--text-dim); }
.li .t code { font: 400 10.5px/1 var(--code); color: var(--text-dim); }
.li .t .ago { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.li .s { margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .via { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--agent); background: var(--agent-wash); border-radius: 5px; padding: 1px 6px; }
.li.enter { animation: enter .7s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity: 0; transform: translateY(-14px); background: #1b1930; } to { opacity: 1; transform: none; } }
.det { padding: 20px 24px; position: relative; overflow: hidden; }
.det .k { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--code); letter-spacing: .06em; color: var(--text-muted); }
.det .k span:last-child { font: 400 11.5px/1 var(--sans); letter-spacing: 0; color: var(--text-faint); }
.det h5 { margin: 12px 0 5px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.det .by { font-size: 11.5px; color: var(--text-muted); }
.det .by code { font: 400 10.5px var(--code); }
.banner { margin: 14px 0 12px; display: flex; gap: 9px; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: 11.5px; transition: background .4s, color .4s; }
.banner .i { width: 13px; height: 13px; }
.banner.wait { background: #2a2010; color: var(--open); }
.banner.done { background: #16230f; color: var(--settled); }
.det p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
.det .lbl { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 5px; }
.det .acts { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid #1c1b20; }
.det .acts .dec { margin-left: auto; font-size: 12px; color: var(--text-faint); }
.menu { position: absolute; z-index: 5; width: 220px; padding: 5px; border-radius: 10px; background: var(--menu); box-shadow: inset 0 0 0 1px var(--menu-border), 0 12px 32px rgba(0,0,0,.6); font-size: 12px; color: var(--text-muted); opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .2s, transform .2s; pointer-events: none; }
.menu.on { opacity: 1; transform: none; }
.menu .r { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; }
.menu .r .i { width: 13px; height: 13px; }
.menu .r em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.menu .r.hl { background: var(--row-hover); color: var(--text); }
.became { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid #1f1e24; border-radius: 9px; font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.became.on { opacity: 1; transform: none; }
.became code { font: 500 11px var(--code); color: var(--text-muted); }
.became .st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--agent); font-size: 11.5px; }
.became .st .i { width: 12px; height: 12px; animation: spin 1s linear infinite; }
.act { margin-top: 12px; display: grid; gap: 10px; }
.act .e { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; font-size: 11.5px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.act .e.on { opacity: 1; transform: none; }
.act .e i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--text-dim); }
.act .e i.g { background: var(--settled); }
.act .e b { font-weight: 500; }
.act .e b.g { color: var(--settled); }
.act .e span { color: var(--text-dim); }
.act .e div div { color: var(--text-soft); margin-top: 2px; }

/* The document */
.doc { width: 600px; margin: 0 auto; padding: 30px 0 110px; }
.doc.wide { width: 640px; }
.views { position: absolute; left: 16px; top: 22px; display: grid; gap: 4px; font-size: 12px; color: var(--text-faint); }
.views span { padding: 3px 0; }
.views span.on { color: var(--text); }
.dh { padding-left: 102px; }
.dh h4 { margin: 0; font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.dh .row { margin-top: 7px; display: flex; align-items: center; font-size: 11.5px; color: var(--text-muted); }
.dh .row .st { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }
.dh .row .st .i { width: 12px; height: 12px; }
.dh .row .st.g { color: var(--settled); }
.dh .row .st.v { color: var(--text-muted); }
.dh .row .d { margin: 0 6px; color: var(--text-dim); }
.dh .row small { font-size: 10.5px; color: var(--text-faint); }
.dh .row .cts { margin-left: auto; display: flex; gap: 12px; }
.dh .row .cts span { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.dh .row .cts span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--k); }
.from { margin: 10px 0 0 102px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-faint); }
.from code { font: 400 10.5px var(--code); color: var(--text-muted); text-decoration: underline; text-decoration-color: #3a3940; text-underline-offset: 3px; }
.blocks { margin-top: 26px; }
.bk { position: relative; display: flex; padding: 8px 0 22px; border-radius: 8px; transition: background 1.2s, opacity .5s; }
.bk .mg { width: 82px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 2px; }
.bk .lb { font: 400 11px/1.2 var(--code); color: var(--text-muted); transition: color .4s; }
.bk .ss { font-size: 10px; transition: color .4s; }
.bk .ss.o { color: var(--open); }
.bk .ss.s { color: var(--settled); }
.bk .ss.n { display: none; }
.bk .ss.new { color: var(--accent); font-weight: 500; }
.bk .tx { flex: 1; min-width: 0; margin-left: 20px; }
.bk .tt { font-size: 14.5px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.bk .ct { margin-top: 5px; font-size: 13px; line-height: 1.62; color: var(--text-soft); }
.bk .ct mark { background: var(--selection-wash, #4b437788); color: var(--text); border-radius: 3px; padding: 0 1px; }
.bk.chg .lb { color: var(--accent); }
.bk.ins { background: var(--insert-wash); }
.bk.dim { opacity: .38; }
.bk .un { position: absolute; left: 60px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bk .under { display: flex; gap: 12px; margin-top: 8px; color: var(--text-dim); font-size: 11px; align-items: center; opacity: 0; transition: opacity .3s; }
.bk .under.on { opacity: 1; }
.bk .under .i { width: 13px; height: 13px; }
.bk .proof { margin-top: 7px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-faint); opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.bk .proof.on { opacity: 1; transform: none; }
.bk .proof .i { width: 13px; height: 13px; color: var(--settled); }
.bk .proof b { color: var(--settled); font-weight: 500; }
.bk.coll { max-height: 0; padding: 0; overflow: hidden; }
.grow-in { overflow: hidden; transition: max-height .7s cubic-bezier(.3,.7,.2,1), opacity .5s; }
.opts { margin-top: 12px; display: grid; gap: 6px; }
.opt { display: flex; gap: 10px; align-items: center; padding: 8px 11px; border-radius: 8px; background: #141318; box-shadow: inset 0 0 0 1px #201f25; font-size: 12.5px; color: var(--text-soft); transition: background .3s, box-shadow .3s, opacity .4s; }
.opt .k { font: 500 10.5px/1 var(--code); color: var(--text-dim); width: 12px; }
.opt.hl { background: #19171f; box-shadow: inset 0 0 0 1px #3a3650; color: var(--text); }
.opt.pick { background: var(--chosen-wash, #69ad5226); box-shadow: inset 0 0 0 1px rgba(105,173,82,.45); color: var(--text); }
.opt.back { opacity: .4; }
.opts-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--agent); }
.opts-h span:last-child { color: var(--text-dim); }
.thr { margin-top: 12px; padding: 10px 0 2px; border-top: 1px solid #1a191e; }
.thr .th { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-muted); }
.thr .th .ago { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.msg { margin-top: 8px; font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
.msg.r { text-align: right; }
.msg .q { display: inline-block; padding-right: 8px; border-right: 2px solid #3a3940; color: var(--text-faint); font-size: 12px; }
.msg .who { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.msg.ag { color: var(--agent); }
.msg.ag .who { color: var(--agent); opacity: .8; }
.comp { margin-top: 10px; border-radius: 10px; background: var(--field); padding: 10px 12px; }
.comp .in { font-size: 12.5px; color: var(--text); min-height: 19px; }
.comp .in .ph { color: var(--text-faint); }
.comp .in .car { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: var(--accent-hover); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.comp .bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.comp .bar code { font: 400 11px var(--code); color: var(--text-muted); }
.comp .bar .sp { flex: 1; }
.comp .bar .snd { width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #2a2748; color: var(--accent-hover); }
.comp .bar .snd .i { width: 12px; height: 12px; transform: rotate(0deg); }
.note { margin-top: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #2a2922; background: #121114; overflow: hidden; }
.note .nh { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 11.5px; border-bottom: 1px solid #1d1c21; color: var(--text-faint); }
.note .nh .from-b { display: inline-flex; align-items: center; gap: 6px; color: var(--open); font-weight: 500; }
.note .nh .from-b .i { width: 12px; height: 12px; }
.note .nh code { font: 400 10.5px var(--code); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3a3940; }
.note .nh .lc { margin-left: auto; color: var(--open); }
.note .nb { padding: 10px 12px 12px; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.note .nb .qt { padding-left: 10px; border-left: 2px solid #33323a; color: var(--text-faint); font-size: 12px; margin-bottom: 8px; }
.note .nb .pe { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--agent); }
.note .nb .pe small { display: block; font-size: 10.5px; color: var(--agent); margin-bottom: 2px; }
.note .nf { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-top: 1px solid #1d1c21; font-size: 12px; }
.note .nf .acc { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 7px; background: #18251a; color: #8fcf78; transition: transform .15s, filter .2s; }
.note .nf .acc .i { width: 12px; height: 12px; }
.note .nf .rep { color: var(--accent-hover); }
.note .nf .dis { color: var(--delete); }

/* Tickets */
.tk { position: relative; display: flex; padding: 12px 0 18px; transition: opacity .5s, transform .5s; }
.tk.hide { opacity: 0; transform: translateY(8px); }
.tk .mg { width: 82px; flex: none; text-align: right; }
.tk .key { font: 500 11px/1.2 var(--code); color: var(--text-muted); transition: color .4s; }
.tk .key.tracker { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(157,146,250,.4); }
.tk .ty { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.tk .tx { flex: 1; min-width: 0; margin-left: 20px; }
.tk .tt { font-size: 14px; font-weight: 500; }
.tk .ds { margin-top: 3px; font-size: 12.5px; color: var(--text-soft); }
.tk .refs { margin-top: 7px; display: flex; gap: 8px; font: 400 10.5px var(--code); color: var(--text-muted); }
.tk .refs span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3a3940; }
.tk .stt { position: absolute; right: 0; top: 12px; text-align: right; font-size: 11.5px; color: var(--text-faint); transition: color .3s; }
.tk .stt small { display: block; font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.tk .stt.draft { color: var(--text-dim); }
.tk .stt.settle { color: var(--settled); }
.tk .stt.done { color: var(--settled); }
.tk .stt.rev { color: var(--open); }
.tk .stt.prog { color: var(--text); }
.tk .stt.prog::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 6px var(--agent); animation: breathe 1.4s ease-in-out infinite; vertical-align: 1px; }
.tk-h { display: flex; justify-content: space-between; margin: 26px 0 6px 102px; font-size: 11.5px; color: var(--text-faint); }
.guests { margin: 8px 0 0 102px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); opacity: 0; transition: opacity .5s; }
.guests.on { opacity: 1; }
.guests .av { width: 18px; height: 18px; font-size: 7.5px; margin-right: -4px; box-shadow: 0 0 0 2px var(--panel); }

/* The run card, and the completed state */
.frozen .blocks { opacity: .85; }
.fz { display: inline-flex; align-items: center; gap: 6px; }

/* Inbox */
.ib .li .t .nm { color: var(--text-soft); }
.ib .li .t .nm.ag { color: var(--agent); }
.ib .li .s { white-space: normal; }
.ib .li .x { margin-top: 2px; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.bars .p { flex: none; width: 70px; height: 12px; position: relative; }
.bars .p::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: #3a3940; }
.bars .b { flex: 1; height: 12px; position: relative; }
.bars .b::before { content: ""; position: absolute; left: 0; top: 5px; height: 2px; width: var(--w, 100%); background: linear-gradient(90deg, #2e2d34, var(--settled)); transition: width 1.2s; }
.bars .b::after { content: ""; position: absolute; right: -3px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--settled); box-shadow: 0 0 8px var(--settled); }
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 9px 12px; font-size: 12px; }
.kv span { color: var(--text-faint); }
.kv b { font-weight: 400; color: var(--text); }
.kv a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #4a4950; }
.quote { margin: 10px 0 12px; padding-left: 12px; border-left: 2px solid var(--agent); color: var(--text-soft); font-size: 12.5px; }

/* Goals: a roadmap across teams */
.rm { --nm: 190px; position: relative; margin-top: 18px; border: 1px solid #1c1b20; border-radius: 10px; overflow: hidden; }
.rm-top { display: grid; grid-template-columns: var(--nm) 1fr; font-size: 10.5px; color: var(--text-dim); border-bottom: 1px solid #17161b; }
.rm-top div:last-child { position: relative; height: 26px; }
.rm-top .now { position: absolute; top: 8px; color: var(--text-muted); transform: translateX(-50%); transition: left 1.4s cubic-bezier(.3,.7,.2,1); }
.rm-row { display: grid; grid-template-columns: var(--nm) 1fr; min-height: 56px; border-bottom: 1px solid #17161b; }
.rm-row:last-child { border-bottom: 0; }
.rm-name { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; font-size: 12.5px; }
.rm-name small { font: 400 10.5px var(--code); color: var(--text-dim); margin-top: 2px; }
.rm-lane { position: relative; }
.chip { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; white-space: nowrap; background: #17161b; box-shadow: inset 0 0 0 1px #26252c; color: var(--text-soft); transition: box-shadow .25s, background .25s, opacity .5s; }
.chip code { font: 500 10.5px var(--code); color: var(--text-muted); }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--settled); }
.chip .d.m { background: var(--agent); box-shadow: 0 0 6px var(--agent); animation: breathe 1.4s infinite; }
.chip.item { background: transparent; box-shadow: inset 0 0 0 1px #2a292f; border-style: dashed; color: var(--text-faint); }
.chip.item::before { content: ""; position: absolute; inset: 0; border: 1px dashed #34333a; border-radius: 7px; }
.chip.item { box-shadow: none; }
.chip.hl { background: #1c1a2a; box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.rm-now { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(225,225,229,.28); transition: left 1.4s cubic-bezier(.3,.7,.2,1); }
.rm-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.peek { position: absolute; z-index: 6; width: 300px; padding: 12px 14px; border-radius: 10px; background: var(--menu); box-shadow: inset 0 0 0 1px var(--menu-border), 0 16px 40px rgba(0,0,0,.65); font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.peek.on { opacity: 1; transform: none; }
.peek .pk { font: 500 10.5px var(--code); color: var(--text-muted); letter-spacing: .04em; }
.peek .pt { margin: 5px 0 8px; font-size: 13.5px; font-weight: 500; }
.peek .pr { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; color: var(--text-soft); }
.peek .pr code { font: 400 10.5px var(--code); color: var(--text-muted); width: 22px; flex: none; }
.peek .pr .h { margin-left: auto; color: var(--settled); font-size: 11px; }
.peek .pf { margin-top: 8px; padding-top: 8px; border-top: 1px solid #26252c; color: var(--text-faint); font-size: 11.5px; }
.leftout { margin-top: 12px; display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-faint); opacity: 0; transition: opacity .6s; }
.leftout.on { opacity: 1; }
.leftout .i { width: 13px; height: 13px; color: var(--text-dim); }
.pct { font: 500 12px var(--code); color: var(--text); }

/* Memory: a decision, reversed */
.dom { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); padding-left: 0; }
.dom code { font: 500 10.5px var(--code); color: var(--text-muted); }
.dom .rv { color: var(--open); }
.tags { display: flex; gap: 12px; align-items: center; margin: 2px 0 20px 0; font-size: 11px; color: var(--text-dim); }
.tag2 { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; transition: all .4s; }
.tag2.holds { color: var(--settled); background: #16230f; }
.tag2.rev { color: var(--open); background: #2a2010; }
.tags code { font: 400 10.5px var(--code); color: var(--text-muted); }
.revcard { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(217,160,60,.55); background: #16120b; padding: 12px 14px; margin: 4px 0 8px; font-size: 12px; overflow: hidden; }
.revcard .rh { display: flex; gap: 8px; color: var(--open); line-height: 1.5; }
.revcard .rh .i { width: 13px; height: 13px; margin-top: 2px; }
.revcard .rr { display: flex; gap: 14px; margin-top: 10px; }
.revcard .rr code { font: 500 10.5px var(--code); color: var(--text-muted); width: 30px; }
.revcard s { color: var(--text-dim); }
.revcard .nw { color: var(--text); margin-top: 3px; }
.revcard .ra { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.revcard .ra span { font-size: 11px; color: var(--text-faint); border: 1px solid #2a2922; border-radius: 6px; padding: 4px 8px; }
.lnk { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #4a4950; }

/* Agents */
.ag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.agc { border-radius: 10px; box-shadow: inset 0 0 0 1px #212026; background: #111015; padding: 14px 16px; }
.agc .ah { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.agc .ah .g { width: 18px; height: 7px; }
.agc .ah b { font-weight: 500; color: var(--agent); }
.agc .ah span { color: var(--text-muted); }
.agc .ah .tm { margin-left: auto; font: 400 11px var(--code); color: var(--text-muted); }
.agc .ah .stop { font-size: 11px; padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #2a292f; color: var(--text-soft); }
.agc .an { margin-top: 10px; font-size: 13.5px; font-weight: 500; }
.agc .ak { font: 400 10.5px var(--code); color: var(--text-faint); margin-top: 2px; }
.ops { margin-top: 12px; display: grid; gap: 7px; }
.op { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-soft); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.op.on { opacity: 1; transform: none; }
.op .i { width: 12px; height: 12px; color: var(--settled); align-self: center; flex: none; }
.op .dt { width: 12px; height: 12px; flex: none; align-self: center; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 3px var(--agent-wash); animation: breathe 1.2s infinite; transform: scale(.55); }
.op code { font: 400 11px var(--code); color: var(--text-muted); white-space: nowrap; }
.prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }
.prog i { position: relative; width: 70px; height: 3px; border-radius: 2px; background: #26252c; overflow: hidden; }
.prog i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--settled); transition: width .6s; }
.term { margin-top: 12px; border-radius: 8px; background: #09090b; box-shadow: inset 0 0 0 1px #1d1c21; padding: 9px 11px; font: 400 10.5px/1.7 var(--code); color: var(--text-faint); height: 92px; overflow: hidden; }
.term div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .ok { color: var(--text-soft); }
.term .ok b { color: var(--settled); font-weight: 400; }
.mcp { margin-top: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px #212026; background: #111015; padding: 12px 16px; }
.mcp .mh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.mcp .mh .door { font: 600 10px/1 var(--code); letter-spacing: .06em; padding: 4px 6px; border-radius: 5px; background: var(--agent); color: #04211c; }
.mcp .mr { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 12px; color: var(--text-soft); opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.mcp .mr.on { opacity: 1; transform: none; }
.mcp .mr .src { width: 130px; flex: none; color: var(--agent); }
.mcp .mr .ago { margin-left: auto; color: var(--text-dim); font-size: 11px; }

/* Home */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.card { border-radius: 10px; box-shadow: inset 0 0 0 1px #212026; background: #111015; padding: 12px 13px; min-height: 108px; display: flex; flex-direction: column; font-size: 11.5px; transition: box-shadow .4s, background .4s, transform .6s, opacity .6s; }
.card .ck { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.card .ck .i { width: 12px; height: 12px; }
.card .ck.o { color: var(--open); }
.card .ck.v { color: var(--accent-hover); }
.card .ck span { font-weight: 400; color: var(--text-faint); }
.card .cn { margin-top: 7px; font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.card .cd { margin-top: 4px; color: var(--text-muted); line-height: 1.45; }
.card .cf { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; font: 400 10.5px var(--code); color: var(--text-dim); }
.card.new { box-shadow: inset 0 0 0 1px rgba(123,116,232,.6), 0 0 0 4px var(--accent-wash); background: #15132a; }
.card.hid { opacity: 0; transform: translateX(-12px); }
.sec-h { display: flex; justify-content: space-between; margin-top: 26px; font-size: 12px; color: var(--text-faint); }
.sec-h b { color: var(--open); font-weight: 400; }
.sec-h b.v { color: var(--text-muted); }
.sec-h em { font-style: normal; color: var(--settled); }
.tbl { margin-top: 10px; border: 1px solid #1c1b20; border-radius: 10px; overflow: hidden; }
.tr { display: grid; grid-template-columns: 54px 1fr 80px 110px 150px 60px; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid #17161b; font-size: 12px; }
.tr:last-child { border-bottom: 0; }
.tr code { font: 400 10.5px var(--code); color: var(--text-muted); }
.tr b { font-weight: 500; }
.tr .s { color: var(--text-faint); }
.tr .ago { text-align: right; color: var(--text-dim); font-size: 11px; }
.tr .ct2 { color: var(--text-faint); font-size: 11px; }
.pb { height: 3px; border-radius: 2px; background: #26252c; position: relative; overflow: hidden; }
.pb::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: linear-gradient(90deg, var(--settled) 0 var(--s, 100%), var(--open) var(--s, 100%)); transition: width 1.4s; }

/* ---------------------------------------------------------------- */
/* Narrow screens: the window pins at the top, the text scrolls under */
/* ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* A column, not a grid: a sticky child of a flex column pins against the
     whole section in every browser. The section's opening comes first, then
     the window, so the window never sits over the opening. */
  .roles { display: flex; flex-direction: column; gap: 0; }
  .roles-intro { order: -2; }
  .stage { order: -1; position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 5; height: 0; }
  .stage-pin { position: relative; top: 0; height: auto; padding: 8px 0 12px; background: linear-gradient(180deg, var(--bg) 85%, transparent); }
  .rtabs { align-self: stretch; }
  .chapters { padding-top: var(--stage-h, 60vh); }
  .ch { min-height: 90vh; align-items: flex-start; padding: 40px 0 60px; }
  .ch-in { max-width: 36rem; }
  .ch:not(.on) .ch-in { opacity: .45; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
  .hero-stage { margin-top: 48px; }
  .ch h3 { font-size: 26px; }
  .ch p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.ind { margin-left: 102px; }

/* The window on a phone: the board alone, and the plan in a narrower column */
.w.compact .w-left, .w.compact .w-rail { display: none; }
.w.compact .w-tabs { padding-left: 10px; }
.w.compact .w-tab:not(.on) { display: none; }
.w.compact .w-board { margin: 0 6px; }
.w.compact .w-status { padding-left: 14px; gap: 10px; }
.w.compact .w-status .rm, .w.compact .w-status .br { display: none; }
.w.compact .doc { width: auto; padding: 22px 16px 110px; }
.w.compact .bk .mg, .w.compact .tk .mg { width: 46px; }
.w.compact .bk .tx, .w.compact .tk .tx { margin-left: 14px; }
.w.compact .dh { padding-left: 0; }
.w.compact .from, .w.compact .ind, .w.compact .tk-h, .w.compact .guests { margin-left: 0; }
.w.compact .dh .row .cts, .w.compact .views, .w.compact .pg-h .btn-s { display: none; }
.w.compact .tk .stt { position: static; margin: 0 0 0 auto; padding-left: 10px; flex: none; }
.w.compact .pg { padding: 20px 16px 90px; }
.w.compact .split { grid-template-columns: 1fr !important; height: auto !important; }
.w.compact .list { display: none; }
/* A narrow window has room for one pane: the list until an ask is picked, then the ask. */
.w.compact .split.pick .list { display: block; border-right: 0; }
.w.compact .split.pick .det { display: none; }
.w.compact .ag-grid, .w.compact .cards { grid-template-columns: 1fr; }
.w.compact .agc:nth-child(2) { display: none; }
.w.compact .rm { --nm: 92px; }
.w.compact .rm-name { padding: 0 10px; font-size: 11.5px; }
.w.compact .chip { font-size: 10.5px; padding: 0 7px; }
.w.compact .chip code { display: none; }
.w.compact .flt { flex-wrap: wrap; gap: 10px; }
.w.compact .tags span:last-child { display: none; }
.w.compact .w-dock { max-width: calc(100% - 16px); }
.revcard .ra .btn-a { color: #fff; border: 0; padding: 0 12px; font-size: 12px; }

/* ---------------------------------------------------------------- */
/* Two acts: what ships today, and what comes with Workspace         */
/* ---------------------------------------------------------------- */

.tag { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; }
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag.today { color: #8fcf78; background: #16230f; box-shadow: inset 0 0 0 1px rgba(105,173,82,.35); }
.tag.ws { color: var(--accent-hover); background: #1a1830; box-shadow: inset 0 0 0 1px rgba(123,116,232,.4); }
.tag.lg { height: 26px; padding: 0 12px; font-size: 13px; }
.ch-label .tag { margin-left: 4px; }
.hero-note { margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--text-faint); }
.hero-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); margin: 0 4px; }
.nav-wait { height: 34px; }
.act { min-height: 82vh; display: flex; align-items: center; padding: 80px 0 40px; }
.act-in { max-width: 28rem; padding: 26px 0 0; border-top: 1px solid var(--hair); }
.act h2 { margin: 18px 0 14px; font-weight: 500; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; background: linear-gradient(180deg, #f6f6f8 30%, #a9a9b3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.act p { margin: 0 0 22px; color: var(--text-muted); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.rtabs .sep { flex: none; width: 1px; margin: 5px 6px; background: var(--hair); }
.rtabs button.ws-tab.on { background: rgba(123,116,232,.16); }
.lens { min-height: 22px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .35s; }
.lens.on { opacity: 1; }
.lens .av { width: 20px; height: 20px; font-size: 8.5px; }
.lens b { color: var(--text); font-weight: 500; }

/* The rail on this Mac, in a workspace, and for a guest */
.w-rail.solo .ws-only, .w-rail.ws .solo-only, .w-rail.guest .ws-only, .w-rail.guest .solo-only, .w-rail.guest .room, .w-rail.guest .not-guest { display: none; }
.w-ws .i { width: 13px; height: 13px; margin: 4.5px auto; color: var(--text-muted); }
.working { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.working i { width: 6px; height: 6px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 6px var(--agent); animation: breathe 1.5s ease-in-out infinite; }
.working u { text-decoration-color: #3a3940; text-underline-offset: 3px; color: var(--text); }

/* The audit's finding and the run's report */
.fd { margin-top: 10px; border-radius: 9px; background: #15120b; box-shadow: inset 0 0 0 1px rgba(217,160,60,.35); padding: 9px 12px 10px; font-size: 12.5px; line-height: 1.5; }
.fd .fh { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); margin-bottom: 4px; }
.fd .fk { display: inline-flex; align-items: center; gap: 6px; color: var(--open); font-weight: 500; }
.fd .fk .i { width: 12px; height: 12px; }
.fd code { font: 400 10.5px var(--code); color: var(--text-muted); }
.fd .fs { margin-left: auto; color: var(--open); transition: color .3s; }
.fd.ans { background: #121114; box-shadow: inset 0 0 0 1px #24232a; }
.fd.ans .fs { color: var(--settled); }
.fd.ans .fb { color: var(--text-faint); }
.runc { margin: 6px 0 0 102px; border-radius: 10px; box-shadow: inset 0 0 0 1px #24232a; background: #111015; padding: 14px 16px 12px; font-size: 12.5px; }
.runc .rh2 { display: flex; align-items: baseline; gap: 10px; }
.runc .rh2 b { font-weight: 500; font-size: 13.5px; }
.runc .rh2 span { color: var(--text-faint); font-size: 11.5px; }
.runc .rl { margin: 12px 0 5px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.runc .rr2 { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--text-soft); }
.runc .rr2 code { font: 400 10.5px var(--code); color: var(--text-muted); width: 20px; flex: none; }
.runc .rr2 em { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.runc .rr2 em.m { color: var(--open); }
.runc .rr2 span { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.w.compact .runc { margin-left: 0; }
code.cd { font: 400 11.5px var(--code); color: var(--agent); }

/* A goal: fog, items, plans */
.gsec { margin: 20px 0 6px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); transition: opacity .5s; }
.gsec.fold { display: flex; align-items: center; gap: 6px; margin-top: 22px; }
.gsec.fold .i { width: 11px; height: 11px; }
.fogh { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.fogh .i { width: 17px; height: 17px; color: var(--text-soft); }
.fogh b { color: var(--text); font-weight: 500; }
.way { border-radius: 10px; box-shadow: inset 0 0 0 1px #212026; background: #111015; overflow: hidden; }
.wr { display: grid; grid-template-columns: 30px 1fr 52px 150px 58px; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-top: 1px solid #1b1a20; font-size: 12.5px; transition: height .6s cubic-bezier(.3,.7,.2,1), opacity .5s, background 1.2s; }
.wr:first-child { border-top: 0; }
.wr.coll { height: 0; opacity: 0; border-top-width: 0; overflow: hidden; }
.wr.ins { background: var(--insert-wash); }
.wr code { font: 400 10.5px var(--code); color: var(--text-dim); }
.wr code.pn { font-weight: 500; color: var(--text-soft); }
.wr b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr .ws2 { color: var(--text-muted); font-size: 12px; transition: color .4s; }
.wr .ws2.b { color: var(--agent); }
.wr .ws2.c { color: var(--settled); }
.btn-a.sm { height: 24px; padding: 0 10px; font-size: 11.5px; justify-self: end; }
.w.compact .wr { grid-template-columns: 24px 1fr 40px; height: auto; padding: 9px 12px; row-gap: 2px; }
.w.compact .wr .ws2 { grid-column: 2 / -1; }
.w.compact .wr .btn-a { display: none; }
.w.compact .fogh { display: none; }

/* Inbox panes */
.trail { display: grid; gap: 9px; margin-top: 12px; }
.trail .t1 { display: grid; grid-template-columns: 62px 1fr; gap: 10px; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.trail .t1.on { opacity: 1; transform: none; }
.trail .t1 code { font: 500 10.5px var(--code); color: var(--accent-hover); }
.trail .t1 span { color: var(--text-faint); }
.trail .t1 span b { color: var(--settled); font-weight: 400; }
.via2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid #1c1b20; display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-faint); }
.via2 .door { font: 600 9.5px/1 var(--code); letter-spacing: .06em; padding: 3px 5px; border-radius: 4px; background: var(--agent); color: #04211c; }

@media (max-width: 1080px) {
  .act { min-height: 60vh; padding: 40px 0; }
  .lens { display: none; }
  .nav-wait { display: none; }
  .stage-pin { transition: opacity .25s; }
  .stage.past .stage-pin { opacity: 0; pointer-events: none; }
}
.stage, .stage-pin, .chapters { min-width: 0; }
.gsec.ind { margin-left: 102px; }
.w.compact .gsec.ind { margin-left: 0; }
.rtabs button { padding: 0 9px; font-size: 12px; }
.rtabs button i { margin-right: 6px; }
.w-status > * { line-height: 1; }
.w-status .rm { align-self: center; height: 12px; }

/* ---------------------------------------------------------------- */
/* Phones: while the window is pinned, the chapter tabs sit in the   */
/* header beside the name, three at a time, and Download moves to    */
/* the bottom of the screen. The window drops its own tab row.       */
/* ---------------------------------------------------------------- */

.dl-float { display: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 640px) {
  .nav { height: calc(52px + env(safe-area-inset-top, 0px)); gap: 12px; }
  .stage { top: calc(52px + env(safe-area-inset-top, 0px)); }
  .stage-pin { padding-top: 6px; }
  .nav .rtabs { display: none; position: relative; flex: 1 1 0; min-width: 0; align-self: center; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; scroll-snap-type: x mandatory; }
  .nav .rtabs .sep { display: none; }
  .nav .rtabs button { flex: 0 0 calc(100% / 3); height: 30px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; scroll-snap-align: start; }
  .locked .nav .rtabs { display: flex; animation: nav-in .3s both; }
  .locked .nav .nav-sp, .locked .nav .nav-dl { display: none; }
  .dl-float {
    display: inline-flex; position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: 40px; padding: 0 18px; border-radius: 11px; font-size: 14.5px;
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
    transition: opacity .3s, transform .3s, background .2s;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.1), 0 12px 32px -6px rgba(0,0,0,.9), 0 0 0 6px rgba(4,4,6,.55);
  }
  .locked .dl-float { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .w.compact .w-top { display: none; }
  .w.compact .w-board { margin-top: 6px; }
}