:root {
  color-scheme: light;
  --bg: #fbfaf8;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-solid: #fff;
  --hair: rgba(22, 24, 38, 0.09);
  --hair-soft: rgba(22, 24, 38, 0.055);
  --hair-firm: rgba(22, 24, 38, 0.16);
  --ink: #16181f;
  --ink-2: #3e4454;
  --ink-3: #666e82;
  --ink-4: #8b92a5;
  --pink: #c74e82;
  --violet: #7a5ce8;
  --blue: #3b6ce0;
  --teal: #0f9d84;
  --red: #c93636;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: Figtree, "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body, p, li { text-wrap: pretty; }
::selection { background: rgba(122, 92, 232, .18); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a, summary, input, textarea, select {
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.aurora { position: absolute; z-index: -1; pointer-events: none; }
.aurora-top {
  top: -260px;
  left: 50%;
  width: min(1100px, 100vw);
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,111,240,.16), rgba(229,139,180,.07) 55%, transparent 75%);
  transform: translateX(-50%);
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1240px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hair-soft);
}
.founder-shell { position: relative; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 96px; }
.brand, h1, h2, h3 { font-family: "Space Grotesk", "Avenir Next", Avenir, Helvetica, sans-serif; }
.brand { font-size: 1.0625rem; letter-spacing: -.014em; font-weight: 600; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: 12px; font-size: clamp(1.8rem, 4vw, 2.65rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
h3 { margin-bottom: 8px; font-size: .9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -.011em; }
p { color: var(--ink-2); font-size: .875rem; line-height: 1.62; }

.eyebrow, .status-word, .orb-hint, .identity, .quiet-divider p, .history-group-heading span, .section-heading > span, .lifecycle small, .event time, code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
.eyebrow { margin-bottom: 9px; color: var(--ink-4); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.muted, .status-objective { color: var(--ink-3); }
.identity, .card-title-row { display: flex; align-items: center; gap: 10px; }
.identity { min-width: 0; color: var(--ink-4); font-size: 11px; letter-spacing: .05em; }
.status-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 999px; background: radial-gradient(circle at 34% 30%, #8b94aa, #5c6579 72%); box-shadow: 0 0 12px rgba(139,148,170,.3); }
.status-dot.running { background: radial-gradient(circle at 34% 30%, #b9aeea, #4c7ef3 72%); box-shadow: 0 0 12px rgba(76,126,243,.5); }
.status-dot.completed { background: radial-gradient(circle at 34% 30%, #9be1d3, #0f9d84 72%); box-shadow: 0 0 12px rgba(15,157,132,.4); }
.status-dot.needs-you { background: radial-gradient(circle at 34% 30%, #e58bb4, #c74e82 70%); box-shadow: 0 0 12px rgba(229,139,180,.5); }
.status-dot.blocked { background: var(--red); box-shadow: 0 0 10px rgba(201,54,54,.25); }
.status-word { display: inline-flex; width: fit-content; color: var(--ink-3); font-size: 11px; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.status-word.needs-you, .status-word.attention { color: var(--pink); }
.status-word.running { color: var(--blue); }
.status-word.completed { color: var(--teal); }
.status-word.blocked { color: var(--red); }

.presence-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 530px; padding: 54px 28px 42px; text-align: center; }
.presence-copy { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 720px; }
.presence-copy .eyebrow { margin: 22px 0 10px; }
.presence-copy h1 { max-width: 680px; font-size: 42px; }
.hero-sentence { max-width: 62ch; margin-bottom: 10px; color: var(--ink-2); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.6; }
.gradient-word { background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue)); color: transparent; font-weight: 600; background-clip: text; -webkit-background-clip: text; }
.safety-line { color: var(--ink-4); font-size: 12.5px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }

button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; overflow: hidden; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink-2); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
button:not(:disabled):active { transform: scale(.977); transition: transform 90ms ease-out; }
button:hover { border-color: var(--hair-firm); color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .48; }
.primary-button { border-color: var(--hair-firm); color: var(--ink); background: linear-gradient(135deg, rgba(229,139,180,.18), rgba(139,111,240,.18)); font-weight: 600; }
.primary-button:hover { box-shadow: 0 8px 20px rgba(139,111,240,.16); transform: translateY(-1px); }
.ghost-button { border-color: transparent; color: var(--ink-3); }

.orb-presence { position: relative; display: flex; flex-direction: column; align-items: center; width: 216px; gap: 10px; }
.orb-visual { position: relative; width: 216px; height: 216px; }
.orb-halo { position: absolute; inset: -46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(229,139,180,.2), rgba(139,111,240,.1) 55%, transparent 72%); }
.orb-presence canvas { position: relative; display: block; width: 216px; height: 216px; background-image: radial-gradient(circle closest-side at 43% 40%, #e58bb4, #8b6ff0 54%, #4c7ef3 98%, transparent 100%); background-position: center; background-repeat: no-repeat; background-size: 72% 72%; }
.orb-presence canvas[data-orb-ready="true"] { background-image: none; }
.orb-hint { display: block; width: max-content; max-width: min(320px, calc(100vw - 40px)); color: var(--ink-4); font-size: 10px; letter-spacing: .2em; line-height: 1.5; text-align: center; text-transform: uppercase; }
.orb-presence.needs-you .orb-hint { color: var(--pink); }

.quiet-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 38px; }
.quiet-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hair)); }
.quiet-divider span:last-child { background: linear-gradient(90deg, var(--hair), transparent); }
.quiet-divider p { margin: 0; color: var(--ink-4); font-size: 10px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }

.project-grid { display: grid; gap: 16px; }
.home-projects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-card, .detail-panel, .history-pane, .result-card, .decision-card, .failure-card, .delivery-card, .activity-card, .secondary-home, .empty-state {
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--glass);
}
.project-card { display: flex; min-height: 196px; flex-direction: column; gap: 10px; padding: 20px; transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
.project-card:hover { border-color: var(--hair-firm); transform: translateY(-3px); }
.project-card.tone-needs-you { border-color: rgba(229,139,180,.35); }
.card-row, .section-heading, .history-group-heading, .ribbon-heading, .delivery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title-row { min-width: 0; }
.project-card h2 { margin: 0; font-size: 15px; }
.project-card > p { margin: 0; font-size: 13px; }
.card-next { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair-soft); }
.card-next span { color: var(--ink-3); font-size: 12px; line-height: 1.5; }

.section-space { padding-top: 76px; scroll-margin-top: 20px; }
.section-heading { align-items: end; margin-bottom: 20px; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.section-heading > span { color: var(--ink-4); font-size: 10px; }
.work-console { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.history-pane { display: grid; gap: 24px; min-width: 0; padding: 20px; }
.history-group { min-width: 0; }
.history-group-heading { align-items: center; margin-bottom: 10px; }
.history-group-heading h3 { margin: 0; }
.history-group-heading span { color: var(--ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.history-list { display: grid; gap: 9px; }
.history-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 15px 16px; border: 1px solid var(--hair); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.58); text-align: left; }
.history-item:hover, .history-item.selected { border-color: rgba(122,92,232,.32); background: rgba(139,111,240,.075); }
.history-item.delivered { border-color: rgba(15,157,132,.22); background: linear-gradient(135deg, rgba(15,157,132,.065), rgba(139,111,240,.055)); }
.history-item.delivered.selected { border-color: rgba(15,157,132,.46); box-shadow: 0 10px 28px rgba(15,157,132,.08); }
.history-item.stopped { color: var(--ink-3); background: rgba(22,24,38,.018); }
.history-copy { min-width: 0; }
.history-copy strong, .history-copy small, .history-state strong, .history-state small { display: block; }
.history-copy strong { margin-bottom: 3px; font-size: 13px; }
.history-copy small { overflow: hidden; color: var(--ink-3); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.history-state { flex: 0 0 auto; text-align: right; }
.history-state strong { color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.history-item.tone-running .history-state strong { color: var(--blue); }
.history-item.tone-needs-you .history-state strong { color: var(--pink); }
.history-item.delivered .history-state strong { color: var(--teal); }
.history-item.stopped .history-state strong { color: var(--ink-4); }
.history-state small { margin-top: 4px; color: var(--ink-4); font-size: 10px; }
.audit-history { padding-top: 16px; border-top: 1px solid var(--hair-soft); }
.audit-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 13px; font-weight: 600; cursor: pointer; }
.audit-history > summary span:last-child { color: var(--ink-3); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.audit-history > p { margin: 10px 0 14px; color: var(--ink-4); font-size: 11.5px; }
.secondary-history { opacity: .82; }
.empty-state { display: grid; min-height: 160px; padding: 20px; place-content: center; text-align: center; }
.empty-state h3, .empty-state p { margin-bottom: 4px; }

.detail-panel { position: sticky; top: 18px; min-width: 0; max-height: calc(100vh - 36px); padding: clamp(22px, 3.2vw, 38px); overflow-y: auto; scroll-margin-top: 16px; }
.detail-panel.tone-delivered { border-color: rgba(15,157,132,.23); box-shadow: 0 24px 70px rgba(15,157,132,.07); }
.status-heading h2 { max-width: 760px; margin: 13px 0 10px; font-size: 30px; }
.status-objective { max-width: 82ch; margin-bottom: 0; }
.progress-ribbon-card { margin: 24px 0 0; padding: 18px 0 22px; border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.ribbon-heading { align-items: center; }
.ribbon-heading .eyebrow { margin: 0; }
.lifecycle { display: grid; grid-template-columns: repeat(var(--stage-count, 6), minmax(0, 1fr)); gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.lifecycle li { display: grid; min-width: 0; gap: 8px; }
.lifecycle li > span { height: 4px; border-radius: 999px; background: rgba(22,24,38,.07); }
.lifecycle li.complete > span { background: var(--teal); }
.lifecycle li.active > span { background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue)); }
.lifecycle li.failed > span { background: var(--red); }
.lifecycle small { overflow: hidden; color: var(--ink-3); font-size: 10px; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; }
.result-card, .decision-card, .failure-card, .delivery-card, .activity-card { margin-top: 20px; padding: 22px; }
.result-card h3, .decision-card h3, .failure-card h3, .delivery-card h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 2rem); }
.result-card { background: rgba(255,255,255,.56); }
.mode-summary { margin: 16px 0 0; padding: 12px 14px; border-left: 2px solid var(--violet); color: var(--ink-2); background: rgba(139,111,240,.06); }
.decision-card { border-color: rgba(229,139,180,.35); background: linear-gradient(135deg, rgba(229,139,180,.08), rgba(139,111,240,.06)); }
.failure-card { border-color: rgba(201,54,54,.22); background: rgba(201,54,54,.035); }
.failure-card .eyebrow, .failure-card h3 { color: var(--red); }
.delivery-card { border-color: rgba(15,157,132,.22); background: linear-gradient(135deg, rgba(15,157,132,.06), rgba(139,111,240,.045)); }
.delivery-heading { align-items: flex-start; }
.delivery-intro { color: var(--ink-3); }
.delivery-grid { margin: 18px 0 0; }
.delivery-grid > div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair-soft); }
.delivery-grid dt { color: var(--ink-4); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .04em; }
.delivery-grid dd { min-width: 0; margin: 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.delivery-grid a { color: var(--violet); font-weight: 600; }
.preline { white-space: pre-line; }
.activity-card { background: rgba(255,255,255,.38); }
.activity-card > .eyebrow { margin-bottom: 0; }
.activity { color: var(--ink-3); font-size: 13px; }
.event { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.event:first-child { margin-top: 10px; }
.event time { color: var(--ink-4); font-size: 10px; }
.response-form { display: grid; gap: 10px; margin-top: 14px; }
.intake-console .history-pane { align-content: start; }
.proposal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.proposal-section { padding: 18px; border: 1px solid var(--hair-soft); border-radius: 14px; background: rgba(255,255,255,.46); }
.proposal-section h3 { margin: 0 0 9px; font-size: 14px; }
.proposal-section p, .proposal-section li { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.proposal-section p:last-child, .proposal-section ul:last-child { margin-bottom: 0; }
.proposal-section ul { margin: 0; padding-left: 18px; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.secondary-home { padding: 18px; }
.secondary-home > summary { color: var(--ink-3); font-weight: 500; cursor: pointer; }
.secondary-home[open] > summary { margin-bottom: 20px; }
.request-form { display: grid; gap: 16px; padding: clamp(18px, 4vw, 38px); border-top: 1px solid var(--hair); }
.request-heading h2 { max-width: 820px; }
label { display: grid; gap: 7px; color: var(--ink-3); font-size: 12px; font-weight: 500; }
textarea, select, input { width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.78); outline: none; }
textarea { min-height: 130px; resize: vertical; }
textarea:focus, select:focus, input:focus { border-color: rgba(199,78,130,.45); background: var(--glass-solid); }
.request-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.request-notice { min-height: 22px; margin: 0; color: var(--teal); font-size: 12px; }

.login-shell { display: grid; min-height: calc(100vh - 76px); place-items: center; padding: 50px 0; }
.login-card { width: min(520px, 100%); padding: 38px; border: 1px solid var(--hair); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 24px 70px rgba(77,60,124,.08); text-align: center; }
.login-card h1 { font-size: 38px; }
.login-orb { margin: 0 auto 28px; transform: scale(.72); transform-origin: center bottom; height: 166px; }
.login-form { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
.login-form button { width: 100%; }
.error { min-height: 22px; margin: 12px 0 0; color: var(--red); font-size: 13px; }

@media (max-width: 1000px) {
  .home-projects { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .work-console { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 820px) {
  .founder-shell, .topbar { width: min(100% - 32px, 620px); }
  .topbar { min-height: 62px; }
  .identity { max-width: 170px; }
  .identity span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .presence-hero { min-height: auto; padding: 34px 0 42px; }
  .presence-copy .eyebrow { margin: 8px 0 10px; }
  .presence-copy h1 { max-width: 370px; margin-bottom: 8px; font-size: 29px; line-height: 1.15; }
  .hero-sentence { max-width: 370px; margin-bottom: 8px; font-size: 14px; line-height: 1.55; }
  .orb-presence { width: 150px; gap: 8px; }
  .orb-visual, .orb-presence canvas { width: 150px; height: 150px; }
  .orb-halo { inset: -30px; }
  .hero-actions { width: 100%; }
  .hero-actions > button { width: 100%; }
  .home-projects { grid-template-columns: minmax(0,1fr); }
  .project-card { min-height: 180px; }
  .section-space { padding-top: 54px; }
  .section-heading { display: grid; align-items: start; }
  .work-console { display: flex; flex-direction: column; }
  .detail-panel { position: static; order: 1; width: 100%; max-height: none; overflow: visible; }
  .history-pane { order: 2; width: 100%; }
  .status-heading h2 { font-size: 27px; }
  .delivery-grid > div { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .proposal-grid { grid-template-columns: minmax(0,1fr); }
  .request-footer { align-items: stretch; flex-direction: column; }
  .request-footer button { width: 100%; }
  .login-shell { min-height: calc(100vh - 62px); }
}

@media (max-width: 410px) {
  .founder-shell, .topbar { width: calc(100% - 24px); }
  .quiet-divider p { max-width: 220px; }
  .history-pane, .detail-panel { padding: 18px; }
  .history-item { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .history-state { text-align: left; }
  .history-copy small { white-space: normal; }
  .result-card, .decision-card, .failure-card, .delivery-card, .activity-card { padding: 18px; }
  .lifecycle { gap: 4px; }
  .lifecycle small { font-size: 10px; letter-spacing: 0; }
  .login-card { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  button:not(:disabled):active, .primary-button:hover { transform: none; }
}
