:root {
  --canvas: #f8f6fc;
  --surface: #ffffff;
  --ink: #24183a;
  --muted: #746b82;
  --line: #e9e2f1;
  --accent: #7546d2;
  --accent-bright: #9167e8;
  --accent-hover: #6034b6;
  --accent-soft: #f1eaff;
  --accent-wash: #fbf8ff;
  --pink: #f29ac2;
  --lime: #c7ef82;
  --danger: #ad3f5f;
  --danger-soft: #fce9ef;
  --radius: 22px;
  --content-width: 920px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  background: var(--canvas);
  color: var(--ink);
}

body {
  min-width: 0;
  margin: 0;
  background: radial-gradient(circle at 8% -8%, rgba(145, 103, 232, 0.14), transparent 32rem), var(--canvas);
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, input[type="submit"] { cursor: pointer; }
a { color: inherit; }
::selection { background: #d9c6ff; color: var(--ink); }

:focus-visible {
  outline: 3px solid #a987cc;
  outline-offset: 3px;
}

.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;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgba(226, 214, 241, 0.78);
  background: rgba(250, 248, 253, 0.82);
  backdrop-filter: blur(18px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 32px), var(--content-width));
  min-height: 72px;
  margin-inline: auto;
}

.site-header nav { display: flex; align-items: center; gap: 8px; }
.site-header form { margin: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 820; letter-spacing: -0.035em; text-decoration: none; }
.wordmark__mark { width: 36px; height: 36px; border: 2px solid white; border-radius: 13px; box-shadow: 0 5px 14px rgba(78, 43, 130, 0.2); }
.nav-link { padding: 10px 11px; border-radius: 999px; color: var(--muted); font-size: 0.86rem; font-weight: 650; text-decoration: none; }
.nav-link:hover { background: var(--accent-soft); color: var(--accent); }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 760;
  line-height: 1.15;
  text-decoration: none;
}

.button--primary { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: 0 9px 22px rgba(117, 70, 210, 0.23); color: white; }
.button--primary:hover { background: linear-gradient(135deg, #8456df, var(--accent-hover)); transform: translateY(-1px); }
.button--secondary { width: 100%; border-color: #d7c5ef; background: var(--accent-soft); color: var(--accent-hover); }
.button--secondary:hover { border-color: #bea2e5; background: #e9ddfb; }
.button--quiet { border-color: var(--line); background: rgba(255, 255, 255, 0.82); color: var(--muted); }
.button--hero { width: 100%; min-height: 54px; justify-content: space-between; padding-inline: 22px; font-size: 1rem; }
.button--google {
  width: 100%;
  background: var(--ink);
  color: white;
  font-size: 1rem;
}
.google-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: white; color: #4285f4; font-weight: 800; }

.landing {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

.landing__card {
  width: min(100%, 540px);
  padding: clamp(28px, 7vw, 56px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(40, 46, 42, 0.09);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing h1, .dashboard-heading h1, .settings-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.35rem);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.03;
}
.landing__lede { margin: 20px 0 28px; color: var(--muted); font-size: 1.08rem; }
.landing__privacy { margin: 16px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.landing__text-button { width: 100%; }
.landing__number, .landing__setup-note { margin: 12px 0 0; color: var(--muted); font-size: 0.86rem; text-align: center; }
.landing__setup-note { padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.landing__divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.landing__divider::before, .landing__divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.landing__secondary { margin: 20px 0 0; color: var(--muted); font-size: 0.84rem; text-align: center; }

.auth-form { display: grid; gap: 9px; }
.auth-form label { font-size: 0.82rem; font-weight: 720; }
.auth-form__row { display: flex; gap: 8px; }
.auth-form input[type="tel"], .auth-form input[type="text"] { min-width: 0; width: 100%; padding: 11px 12px; border: 1px solid #cec1dc; border-radius: 11px; background: white; color: var(--ink); }
.auth-form__row input { flex: 1; }
.auth-form__row .button { flex: 0 0 auto; }
.auth-form .auth-form__code { padding: 14px; font-size: 1.5rem; font-weight: 720; letter-spacing: 0.28em; text-align: center; }

@media (max-width: 520px) {
  .auth-form__row { display: grid; }
  .auth-form__row .button { width: 100%; }
}

.auth-stage {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: 30px clamp(20px, 5vw, 72px) 56px;
  background:
    radial-gradient(circle at 8% 4%, rgba(199, 239, 130, 0.34), transparent 21rem),
    radial-gradient(circle at 92% 88%, rgba(242, 154, 194, 0.24), transparent 28rem),
    linear-gradient(145deg, #fbf9ff 0%, #f2eaff 52%, #fbf8ff 100%);
}

.auth-stage::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(91, 52, 153, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.auth-brand__mark {
  width: 42px;
  height: 42px;
  border: 3px solid white;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(67, 35, 112, 0.22);
}

.auth-brand__hello { margin-left: 2px; font-size: 0.92rem; letter-spacing: 0; }

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 1120px);
  min-height: calc(100dvh - 128px);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, 0.78fr);
  margin: 6px auto 0;
}

.auth-story h1 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3.35rem, 6.6vw, 6.6rem);
  font-weight: 820;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.auth-story__lede {
  max-width: 54ch;
  margin: 26px 0 32px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}

.text-demo {
  width: min(100%, 540px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 28px;
  background: #2d1c48;
  box-shadow: 0 30px 70px rgba(58, 31, 98, 0.25);
  color: white;
  transform: rotate(-1.25deg);
}

.text-demo__header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255, 255, 255, 0.08); }
.text-demo__avatar { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 14px; }
.text-demo__header div { display: grid; line-height: 1.2; }
.text-demo__header strong { font-size: 0.92rem; }
.text-demo__header div span { margin-top: 3px; color: #cfc0e5; font-size: 0.68rem; }
.text-demo__status { margin-left: auto; color: var(--lime); font-size: 0.7rem; }
.text-demo__thread { display: grid; gap: 10px; padding: 22px; }
.text-bubble { width: fit-content; max-width: 82%; margin: 0; padding: 11px 14px; border-radius: 18px; font-size: 0.89rem; line-height: 1.4; }
.text-bubble--sent { justify-self: end; border-bottom-right-radius: 5px; background: linear-gradient(135deg, #9367ec, #7445d1); }
.text-bubble--received { justify-self: start; border-bottom-left-radius: 5px; background: white; color: var(--ink); }
.text-demo__aside { margin: 3px 0 0; color: #bba9d4; font-size: 0.68rem; text-align: center; }

.auth-card {
  position: relative;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 28px 80px rgba(74, 41, 117, 0.16);
  backdrop-filter: blur(20px);
}

.auth-card__mascot {
  position: absolute;
  top: -26px;
  right: 30px;
  width: 76px;
  height: 76px;
  padding: 4px;
  border: 4px solid white;
  border-radius: 25px;
  background: white;
  box-shadow: 0 12px 28px rgba(76, 41, 127, 0.22);
  transform: rotate(4deg);
}

.auth-card__mascot img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.auth-card h1, .auth-card h2 { max-width: 10ch; margin: 0; font-size: clamp(2.35rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.98; }
.auth-card__lede { margin: 17px 0 24px; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.auth-card__number { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 0.78rem; }
.auth-card__number strong { color: var(--ink); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 20px; color: #968ca2; font-size: 0.68rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }

.auth-card .auth-form { gap: 10px; }
.auth-card .auth-form label { color: var(--ink); font-size: 0.76rem; }
.auth-card .auth-form input[type="tel"], .auth-card .auth-form input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #d8cce6;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(54, 32, 84, 0.04);
  color: var(--ink);
}
.auth-card .auth-form input:focus { border-color: var(--accent-bright); outline: 3px solid rgba(145, 103, 232, 0.15); }
.auth-form__help { margin: 0; color: var(--muted); font-size: 0.72rem; text-align: center; }
.auth-card__fineprint { margin: 25px 0 0; color: #988ea3; font-size: 0.69rem; text-align: center; }

.auth-stage--verification { display: grid; min-height: 100dvh; place-items: start center; }
.auth-stage--verification .auth-brand { justify-self: start; }
.auth-card--verification { width: min(100%, 470px); align-self: center; margin: 40px auto; }
.auth-card__mascot--message span { position: absolute; right: -12px; bottom: -8px; padding: 4px 9px 7px; border: 3px solid white; border-radius: 999px; background: var(--accent); color: white; font-size: 0.72rem; letter-spacing: 0.08em; }
.auth-card--verification .auth-form__code { min-height: 68px; font-size: 1.8rem; font-weight: 820; letter-spacing: 0.36em; text-align: center; }
.auth-card__secondary { margin: 22px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; text-align: center; }
.auth-card__secondary a { color: var(--accent); font-weight: 700; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; padding-top: 72px; }
  .auth-story { display: grid; justify-items: center; text-align: center; }
  .auth-story h1 { max-width: 10ch; }
  .auth-story__lede { max-width: 48ch; }
  .auth-card { width: min(100%, 500px); justify-self: center; }
  .text-demo { text-align: left; }
}

@media (max-width: 560px) {
  .auth-stage { padding: 20px 16px 38px; }
  .auth-layout { gap: 62px; padding-top: 58px; }
  .auth-story h1 { font-size: clamp(3rem, 16vw, 4.3rem); }
  .auth-story__lede { margin-top: 20px; }
  .text-demo { border-radius: 24px; transform: none; }
  .text-demo__thread { padding: 18px 14px; }
  .auth-card { padding: 34px 22px 28px; border-radius: 28px; }
  .auth-card__mascot { right: 20px; width: 66px; height: 66px; }
  .auth-card h1, .auth-card h2 { font-size: 2.35rem; }
  .auth-stage--verification { display: block; }
  .auth-card--verification { margin-top: 92px; }
}

.page-shell {
  width: min(calc(100% - 32px), var(--content-width));
  margin-inline: auto;
  padding: 58px 0 96px;
}
.page-shell--narrow { max-width: 620px; }

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.dashboard-heading h1 { max-width: 13ch; font-size: clamp(2.6rem, 7vw, 4.25rem); font-weight: 800; letter-spacing: -0.065em; line-height: 0.95; }
.dashboard-heading__lede { margin: 14px 0 0; color: var(--muted); font-size: 1rem; }
.status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #d9c9ed;
  border-radius: 999px;
  background: rgba(241, 234, 255, 0.88);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.status-pill--link { text-decoration: none; }
.status-pill--muted { border-color: var(--line); background: var(--surface); color: var(--muted); }

.assistant-panel {
  position: relative;
  margin-bottom: 24px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 154, 194, 0.19), transparent 18rem),
    linear-gradient(145deg, #34204f, #241537);
  box-shadow: 0 24px 55px rgba(54, 31, 87, 0.2);
  color: white;
}
.assistant-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.assistant-panel__identity { display: flex; align-items: center; gap: 13px; }
.assistant-panel__avatar { width: 48px; height: 48px; border: 2px solid rgba(255, 255, 255, 0.74); border-radius: 16px; box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24); }
.assistant-panel .eyebrow { margin-bottom: 3px; color: #cbb7ea; }
.assistant-panel__heading h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.03em; }
.assistant-panel__status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(199, 239, 130, 0.25); border-radius: 999px; background: rgba(199, 239, 130, 0.12); color: var(--lime); font-size: 0.67rem; font-weight: 800; }
.assistant-thread { display: grid; max-height: 320px; gap: 8px; margin: 16px 0 12px; overflow-y: auto; }
.assistant-empty { margin: 0; color: #c5b8d6; font-size: 0.88rem; }
.assistant-message { width: fit-content; max-width: min(88%, 560px); padding: 9px 12px; border-radius: 13px; overflow-wrap: anywhere; font-size: 0.9rem; }
.assistant-message div, .assistant-message p { margin: 0; }
.assistant-message--user { justify-self: end; background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.assistant-message--assistant { justify-self: start; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.95); color: var(--ink); border-bottom-left-radius: 4px; }
.assistant-pending { margin: 0; color: #c5b8d6; font-size: 0.8rem; }
.assistant-error { padding: 9px 11px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: 0.84rem; }
.assistant-composer { display: flex; align-items: end; gap: 8px; }
.assistant-composer textarea { min-width: 0; min-height: 50px; flex: 1; resize: vertical; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 17px; background: rgba(255, 255, 255, 0.1); color: white; }
.assistant-composer textarea::placeholder { color: #bfb0d2; }
.assistant-composer textarea:focus { border-color: rgba(199, 239, 130, 0.6); outline: 3px solid rgba(199, 239, 130, 0.1); }
.assistant-composer .button--primary { background: var(--lime); box-shadow: none; color: #2e2140; }
.assistant-composer .button--primary:hover { background: #d4f69c; }
.assistant-disclaimer { margin: 10px 0 0; color: #a99aba; font-size: 0.7rem; }

.quick-add {
  margin-bottom: 34px;
  padding: 8px;
  border: 1px solid #ded3e9;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 15px 35px rgba(58, 36, 86, 0.08);
}
.quick-add__field { display: flex; min-width: 0; gap: 8px; }
.quick-add input[type="text"] {
  min-width: 0;
  flex: 1;
  padding: 12px 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.03rem;
}
.quick-add .field-error { margin: 5px 10px 8px; }

.task-board { display: grid; gap: 30px; }
.task-section h2, .archive-section summary {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.task-section h2 span, .archive-section summary span { color: #a79cb2; }
.task-section--overdue h2 { color: var(--danger); }
.task-list { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 34px rgba(59, 37, 84, 0.06); }
.task-section__more { margin-top: 8px; }
.task-section__more summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 0.82rem; font-weight: 700; }
.task-section__more-open { display: none; }
.task-section__more[open] .task-section__more-closed { display: none; }
.task-section__more[open] .task-section__more-open { display: inline; }
.task-list--continuation { margin-top: 8px; }
.task-frame { display: block; min-width: 0; }
.task-frame + .task-frame .task-row { border-top: 1px solid var(--line); }

.task-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 34px;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 14px 12px;
}
.task-row__check form, .task-row__actions form { margin: 0; }
.check-button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1.5px solid #bcb1c8;
  border-radius: 50%;
  background: white;
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
}
.check-button:hover { border-color: var(--accent); }
.check-button--checked { border-color: var(--accent); background: var(--accent); }
.task-row__content { min-width: 0; }
.task-row__title { display: block; overflow-wrap: anywhere; font-weight: 650; text-decoration: none; }
a.task-row__title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.task-row__content p { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.task-row__meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.priority { padding: 3px 8px; border-radius: 999px; background: #f2edf7; font-weight: 700; }
.priority--high { background: var(--danger-soft); color: var(--danger); }
.priority--medium { background: #f5edda; color: #7b5b18; }
.icon-button {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
}
.icon-button::after { content: "×"; display: grid; color: #aaa79f; font-size: 1.25rem; place-items: center; }
.icon-button:hover::after { color: var(--danger); }
.task-row--completed .task-row__title { color: var(--muted); text-decoration: line-through; }
.task-row--deleted { grid-template-columns: 0 minmax(0, 1fr) auto auto; opacity: 0.78; }

.archive-section summary { min-height: 42px; padding: 12px 4px; cursor: pointer; }
.archive-section[open] summary { margin-bottom: 4px; }
.empty-state { padding: 44px 20px; border: 1px dashed #d3d0c6; border-radius: var(--radius); color: var(--muted); text-align: center; }
.empty-state__mark { margin: 0 auto 12px; color: var(--accent); font-size: 2rem; }
.empty-state h2 { margin: 0; color: var(--ink); font-size: 1.15rem; }
.empty-state p:last-child { margin: 5px 0 0; }
.undo-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: 0.82rem; }
.undo-bar form { margin: 0; }

.edit-card, .settings-card {
  padding: 20px;
  border: 1px solid #d9d6cd;
  border-radius: var(--radius);
  background: #fffefa;
  box-shadow: 0 12px 30px rgba(43, 49, 45, 0.08);
}
.edit-card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field { min-width: 0; margin-bottom: 18px; }
.field label, fieldset legend { display: block; margin-bottom: 6px; font-size: 0.82rem; font-weight: 720; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #cfccc3;
  border-radius: 10px;
  background: white;
  color: var(--ink);
}
.field textarea { resize: vertical; }
.field--compact { max-width: 160px; margin: 18px 0 0; }
.form-hint { min-height: 1.2em; margin: -9px 0 14px; color: var(--muted); font-size: 0.78rem; }
.field-error { color: var(--danger); font-size: 0.84rem; font-weight: 650; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.settings-heading { margin-bottom: 28px; }
.settings-heading h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
.settings-heading > p:last-child { max-width: 50ch; color: var(--muted); }
.settings-card { padding: clamp(20px, 5vw, 32px); }
.messaging-settings-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.messaging-settings-card h2, .connection-card h2 { margin: 0; font-size: 1.15rem; }
.messaging-settings-card p:last-child, .connection-help { margin: 5px 0 0; color: var(--muted); }
.connection-state { display: flex; align-items: center; gap: 16px; }
.connection-card form { margin: 20px 0 0; }
.pairing-code { margin: 20px 0 12px; padding: 18px; border: 1px solid #cbdace; border-radius: 12px; background: var(--accent-soft); }
.pairing-code__label { margin: 0 0 4px; color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pairing-code strong { display: block; font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: 0.04em; }
.pairing-code p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 0.82rem; }
.settings-back { margin: 18px 0 0; color: var(--muted); font-size: 0.88rem; }
.settings-card fieldset { margin: 28px 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); }
.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.text-button { min-height: 38px; padding: 7px 0; border: 0; background: transparent; color: var(--accent); font-size: 0.84rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.flash-region { position: fixed; z-index: 30; top: 72px; right: max(16px, calc((100vw - var(--content-width)) / 2)); width: min(calc(100% - 32px), 420px); }
.flash { margin: 0 0 8px; padding: 12px 16px; border: 1px solid #ceddd3; border-radius: 12px; background: #f0f6f2; box-shadow: 0 10px 30px rgba(30, 45, 36, 0.1); color: var(--accent); font-size: 0.9rem; }
.flash--alert { border-color: #efd1cd; background: #fff2f0; color: var(--danger); }

@media (max-width: 620px) {
  .site-header__inner, .page-shell { width: min(calc(100% - 24px), var(--content-width)); }
  .site-header__inner { min-height: 58px; }
  .site-header .button, .site-header .nav-link { min-height: 40px; padding-inline: 9px; font-size: 0.82rem; }
  .page-shell { padding-top: 32px; }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading h1 { max-width: 10ch; }
  .status-pill { margin-top: 22px; }
  .task-row { grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .task-row__meta { grid-column: 2; justify-content: flex-start; white-space: normal; }
  .task-row__actions { grid-column: 3; grid-row: 1 / span 2; }
  .task-row--deleted { grid-template-columns: minmax(0, 1fr) auto; }
  .task-row--deleted .task-row__content { grid-column: 1; }
  .task-row--deleted .task-row__meta { grid-column: 1; }
  .task-row--deleted .task-row__actions { grid-column: 2; }
  .edit-card__grid { grid-template-columns: 1fr; gap: 0; }
  .quick-add__field .button { padding-inline: 14px; }
  .assistant-panel { padding: 15px; }
  .assistant-composer { align-items: stretch; flex-direction: column; }
  .assistant-composer .button { align-self: flex-end; }
  .flash-region { top: 66px; right: 12px; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .task-row__title, .check-button, .icon-button::after { transition: 140ms ease; }
}

/* HiHippo 2009 edition */
.retro-page {
  min-height: 100dvh;
  padding: 24px 20px 32px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.9), transparent 34rem),
    repeating-linear-gradient(0deg, rgba(92, 70, 131, 0.045) 0, rgba(92, 70, 131, 0.045) 1px, transparent 1px, transparent 4px),
    #ded9ea;
  color: #342547;
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
}

.retro-masthead {
  display: flex;
  width: min(100%, 1000px);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 18px;
}

.retro-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #4d287d;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  text-decoration: none;
  text-shadow: 0 1px 0 white;
}

.retro-logo__icon {
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
  overflow: hidden;
  border: 1px solid #593383;
  border-radius: 11px;
  background: #8e5bd0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 5px rgba(55, 35, 77, 0.32);
}

.retro-logo__icon::after, .retro-signup__icon::after {
  position: absolute;
  inset: 2px 3px 48%;
  border-radius: 9px 9px 45% 45%;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  content: "";
  pointer-events: none;
}

.retro-logo__icon img { width: 100%; height: 100%; object-fit: cover; }
.retro-logo sup { align-self: flex-start; margin: 3px 0 0 -4px; padding: 2px 4px; border: 1px solid #d78000; border-radius: 3px; background: linear-gradient(#ffe67b, #f5a900); color: #7b4400; font: 700 0.47rem Verdana, sans-serif; letter-spacing: 0; text-shadow: 0 1px #fff1ae; transform: rotate(-5deg); }
.retro-masthead > p { margin: 0; color: #756881; font: 0.72rem Verdana, sans-serif; text-shadow: 0 1px white; }
.retro-masthead > p span { color: #6fba35; text-shadow: 0 0 4px rgba(89, 184, 33, 0.45); }

.retro-window {
  width: min(100%, 1000px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #674d8f;
  border-radius: 9px;
  background: white;
  box-shadow: 0 12px 32px rgba(45, 31, 65, 0.25), 0 2px 7px rgba(45, 31, 65, 0.28);
}

.retro-window__bar, .dashboard-titlebar {
  position: relative;
  display: grid;
  min-height: 35px;
  align-items: center;
  padding: 7px 13px;
  border-bottom: 1px solid #76599e;
  background: linear-gradient(#bca9d5 0%, #9478b8 48%, #7e5da8 51%, #9474bd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(67, 39, 99, 0.28);
  color: white;
  font: 700 0.76rem "Lucida Grande", Verdana, sans-serif;
  grid-template-columns: 90px 1fr 90px;
  text-align: center;
  text-shadow: 0 -1px 0 #543573;
}

.retro-window__lights { display: flex; gap: 6px; justify-self: start; }
.retro-window__lights i { display: block; width: 12px; height: 12px; border: 1px solid rgba(66, 48, 81, 0.45); border-radius: 50%; box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
.retro-window__lights i:nth-child(1) { background: linear-gradient(#ff9d9a, #db4c4a); }
.retro-window__lights i:nth-child(2) { background: linear-gradient(#ffe48b, #e5aa2b); }
.retro-window__lights i:nth-child(3) { background: linear-gradient(#bdec7f, #6ab43e); }
.retro-window__connection { justify-self: end; font-size: 0.63rem; font-weight: 400; opacity: 0.9; }

.retro-window__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.8fr); }
.retro-intro { padding: clamp(32px, 5vw, 58px); background: radial-gradient(circle at 20% 0, #fff 0, #fbf9ff 62%, #f0ebf8 100%); }
.retro-kicker { margin: 0 0 13px; color: #73528f; font: 700 0.7rem Verdana, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.retro-kicker span { display: inline-block; margin-right: 5px; padding: 3px 5px; border: 1px solid #cb6500; border-radius: 3px; background: linear-gradient(#ffdc65, #f5a818); box-shadow: inset 0 1px #fff3b2; color: #7d3f00; font-size: 0.57rem; text-shadow: 0 1px #ffeaa2; transform: rotate(-2deg); }
.retro-intro h1 { max-width: 11ch; margin: 0; color: #3d225b; font: 800 clamp(2.45rem, 5vw, 4.4rem)/0.94 "Trebuchet MS", sans-serif; letter-spacing: -0.065em; text-shadow: 0 2px white; }
.retro-intro__lede { max-width: 49ch; margin: 20px 0 25px; color: #70647c; font: 1rem/1.58 "Lucida Grande", Verdana, sans-serif; }

.buddy-chat { width: min(100%, 560px); overflow: hidden; border: 1px solid #7e6b97; border-radius: 7px; background: white; box-shadow: 0 5px 14px rgba(54, 38, 72, 0.17); }
.buddy-chat__toolbar { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 7px 10px; border-bottom: 1px solid #a99bb8; background: linear-gradient(#fefefe, #ded9e4); box-shadow: inset 0 1px white; }
.buddy-chat__avatar { width: 38px; height: 38px; overflow: hidden; border: 1px solid #72538d; border-radius: 8px; box-shadow: 0 1px 2px #aaa; }
.buddy-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.buddy-chat__toolbar div { display: grid; gap: 2px; }
.buddy-chat__toolbar strong { color: #39254d; font-size: 0.78rem; }
.buddy-chat__toolbar small { color: #6e9f2c; font-size: 0.61rem; }
.buddy-chat__actions { margin-left: auto; color: #76598f; font-size: 1.05rem; text-shadow: 0 1px white; }
.buddy-chat__transcript { min-height: 126px; padding: 13px 15px; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(250, 247, 254, 0.9)), repeating-linear-gradient(0deg, transparent, transparent 22px, #f1edf5 23px); color: #43364e; font: 0.77rem/1.52 Verdana, sans-serif; }
.buddy-chat__time { margin: 0 0 11px; color: #a399ab; font-size: 0.61rem; text-align: center; }
.buddy-line { margin: 7px 0; }
.buddy-line b { color: #2f68a1; }
.buddy-line--hippo b { color: #743fa3; }
.buddy-line--hippo span { color: #6da826; font-weight: 800; }
.buddy-chat__composer { display: flex; align-items: center; gap: 7px; padding: 7px; border-top: 1px solid #c5bccd; background: linear-gradient(#f2eff5, #ddd6e4); }
.buddy-chat__composer > span { min-height: 30px; flex: 1; padding: 7px 9px; border: 1px solid #afa4ba; border-radius: 4px; background: white; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09); color: #aaa; font: 0.68rem Verdana, sans-serif; }
.buddy-chat__composer button { min-height: 30px; padding: 5px 13px; border: 1px solid #654186; border-radius: 5px; background: linear-gradient(#b28bd6, #7952a1 52%, #68448e 53%, #855caf); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65); color: white; font: 700 0.67rem Verdana, sans-serif; text-shadow: 0 -1px #52306e; }

.retro-perks { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 20px 0 0; padding: 0; color: #6b6075; font: 0.67rem Verdana, sans-serif; list-style: none; }
.retro-perks span { color: #6ea72c; font-weight: 900; }

.retro-signup { position: relative; padding: 54px 32px 34px; border-left: 1px solid #8065a5; background: linear-gradient(145deg, #72509a, #4e2d72); box-shadow: inset 1px 0 rgba(255, 255, 255, 0.2); color: white; text-align: center; text-shadow: 0 -1px rgba(55, 31, 80, 0.65); }
.retro-signup::before { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 2px, transparent 2px, transparent 7px); content: ""; pointer-events: none; }
.retro-signup > * { position: relative; }
.retro-signup__icon { position: relative; display: block; width: 90px; height: 90px; margin: 0 auto 15px; overflow: hidden; border: 3px solid white; border-radius: 18px; background: #8c59c7; box-shadow: 0 3px 9px rgba(31, 14, 48, 0.55), inset 0 1px white; transform: rotate(2deg); }
.retro-signup__icon img { width: 100%; height: 100%; object-fit: cover; }
.retro-signup__burst { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 62px; height: 62px; place-items: center; border: 2px solid #c56300; border-radius: 50%; background: radial-gradient(circle, #fff59b 0, #ffd33e 60%, #f5a500 100%); box-shadow: 0 2px 5px rgba(36, 18, 51, 0.4), inset 0 1px #fffbc5; color: #864600; font: 900 0.78rem/0.9 Verdana, sans-serif; text-shadow: 0 1px #fff3a0; transform: rotate(9deg); }
.retro-signup__burst span { font-size: 0.55rem; }
.retro-signup__overline { margin: 0 0 8px; color: #d8c4ea; font: 700 0.58rem Verdana, sans-serif; letter-spacing: 0.1em; }
.retro-signup h2 { margin: 0; font: 800 2rem/1 "Trebuchet MS", sans-serif; letter-spacing: -0.04em; }
.retro-signup > p:not([class]) { margin: 13px auto 21px; color: #e3d8ec; font: 0.78rem/1.5 Verdana, sans-serif; }

.retro-button { display: inline-flex; width: 100%; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 7px; cursor: pointer; font: 700 0.78rem Verdana, sans-serif; text-decoration: none; }
.retro-button--primary { border: 1px solid #d98600; background: linear-gradient(#fff08c 0%, #ffd53b 48%, #f0a707 51%, #ffc523 100%); box-shadow: inset 0 1px #fffbd0, 0 2px 4px rgba(33, 15, 46, 0.42); color: #744100; text-shadow: 0 1px #fff0a0; }
.retro-button--primary:hover { background: linear-gradient(#fff7b4, #ffdf57 48%, #f5b41a 51%, #ffd13a); }
.retro-button--secondary { border: 1px solid #c9b8d8; background: linear-gradient(#fff, #e6dfec 49%, #d3c8dd 51%, #eee8f3); box-shadow: inset 0 1px white, 0 1px 2px rgba(40, 20, 56, 0.35); color: #4c3263; text-shadow: 0 1px white; }
.retro-button--secondary:hover { background: linear-gradient(#fff, #f0eaf4 49%, #ddd3e5 51%, #f5f1f7); }
.retro-signup__number { margin: 11px 0 0; color: #d9cce4; font: 0.65rem Verdana, sans-serif; }
.retro-signup__number strong { color: white; }
.retro-divider { display: flex; align-items: center; gap: 9px; margin: 23px 0 17px; color: #d8c8e5; font: 0.59rem Verdana, sans-serif; text-transform: uppercase; }
.retro-divider::before, .retro-divider::after { height: 1px; flex: 1; border-top: 1px solid rgba(37, 15, 54, 0.55); background: rgba(255, 255, 255, 0.17); content: ""; }
.retro-auth-form { display: grid; gap: 8px; text-align: left; }
.retro-auth-form label { font: 700 0.68rem Verdana, sans-serif; }
.retro-auth-form input[type="tel"], .retro-auth-form input[type="text"] { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #372245; border-radius: 5px; background: white; box-shadow: inset 0 2px 4px rgba(42, 22, 57, 0.18), 0 1px rgba(255, 255, 255, 0.2); color: #32243d; font: 0.84rem Verdana, sans-serif; }
.retro-auth-form > p { margin: 0; color: #cfc0dc; font: 0.58rem/1.4 Verdana, sans-serif; text-align: center; }
.retro-signup__fineprint { margin: 18px 0 0; color: #bdaaca; font: 0.54rem Verdana, sans-serif; }
.retro-footer { display: flex; width: min(100%, 1000px); justify-content: space-between; margin: 14px auto 0; color: #786b83; font: 0.58rem Verdana, sans-serif; text-shadow: 0 1px white; }
.retro-footer p { margin: 0; }

.retro-page--verification { min-height: 100dvh; }
.retro-window--verification { max-width: 560px; }
.retro-verification { padding: 48px clamp(25px, 8vw, 70px) 52px; background: radial-gradient(circle at 50% 0, #fff, #f6f1fb); text-align: center; }
.retro-verification__icon { display: block; width: 88px; height: 88px; margin: 0 auto 20px; overflow: hidden; border: 2px solid #664686; border-radius: 17px; box-shadow: 0 4px 10px #b7a9c3; }
.retro-verification__icon img { width: 100%; height: 100%; object-fit: cover; }
.retro-verification h1 { margin: 0; color: #42255e; font: 800 2.4rem/1 "Trebuchet MS", sans-serif; letter-spacing: -0.05em; }
.retro-verification > p:not([class]) { color: #716379; font: 0.8rem/1.5 Verdana, sans-serif; }
.retro-verification .retro-auth-form { max-width: 320px; margin: 25px auto 0; color: #453252; text-align: left; }
.retro-auth-form__code { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.3em; text-align: center; }
.retro-verification__help { margin: 22px 0 0; color: #7c6d85; font: 0.67rem/1.5 Verdana, sans-serif; }
.retro-verification__help a { color: #70429b; font-weight: 700; }

body:has(.site-header) { background: repeating-linear-gradient(0deg, rgba(84, 63, 111, 0.035) 0, rgba(84, 63, 111, 0.035) 1px, transparent 1px, transparent 4px), #e5e0eb; font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
.site-header { border-bottom: 1px solid #493064; background: linear-gradient(#8f70b3 0%, #6b4b8e 49%, #5d3d7f 51%, #745296 100%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 2px 7px rgba(49, 31, 65, 0.28); backdrop-filter: none; }
.site-header__inner { min-height: 62px; }
.wordmark { color: white; font-family: "Trebuchet MS", sans-serif; text-shadow: 0 -1px #3f2854; }
.wordmark::after { align-self: flex-start; margin-left: -7px; padding: 1px 3px; border: 1px solid #c36a00; border-radius: 3px; background: linear-gradient(#ffe56f, #f1a512); color: #7c4300; content: "BETA"; font: 700 0.43rem Verdana, sans-serif; text-shadow: 0 1px #fff0a3; transform: rotate(-5deg); }
.wordmark__mark { border: 1px solid #3d2459; border-radius: 9px; box-shadow: inset 0 1px white, 0 1px 3px #3e2852; }
.nav-link { color: #eee5f5; font: 700 0.71rem Verdana, sans-serif; text-shadow: 0 -1px #49315f; }
.nav-link:hover { background: rgba(255, 255, 255, 0.13); color: white; }
.site-header .button--quiet { min-height: 34px; padding: 7px 11px; border: 1px solid #402958; border-radius: 6px; background: linear-gradient(#9e81bd, #6a4a8c 50%, #593978 51%, #735195); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); color: white; font: 700 0.68rem Verdana, sans-serif; text-shadow: 0 -1px #3d2850; }

.page-shell { font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
.page-shell--dashboard { width: min(calc(100% - 32px), 960px); margin: 38px auto 80px; padding: 0; overflow: hidden; border: 1px solid #76638c; border-radius: 9px; background: white; box-shadow: 0 10px 30px rgba(48, 33, 63, 0.2); }
.dashboard-titlebar { grid-template-columns: 120px 1fr 120px; }
.dashboard-titlebar > span:last-child { justify-self: end; font-size: 0.58rem; font-weight: 400; }
.dashboard-content { padding: clamp(24px, 5vw, 48px); background: linear-gradient(#fbfaff, #f4f0f7); }
.dashboard-heading { align-items: center; margin-bottom: 27px; }
.dashboard-heading .eyebrow { color: #795397; font: 700 0.63rem Verdana, sans-serif; }
.dashboard-heading h1 { color: #44285c; font: 800 clamp(2.2rem, 6vw, 3.7rem)/0.95 "Trebuchet MS", sans-serif; letter-spacing: -0.06em; text-shadow: 0 2px white; }
.dashboard-heading__lede { color: #796c82; font: 0.82rem Verdana, sans-serif; }
.status-pill { border: 1px solid #9a8aa8; border-radius: 6px; background: linear-gradient(#fff, #e4dfe8); box-shadow: inset 0 1px white, 0 1px 2px rgba(47, 31, 60, 0.18); color: #5f4473; font: 700 0.65rem Verdana, sans-serif; text-shadow: 0 1px white; }
.status-pill span { color: #73b634; }

.assistant-panel { margin-bottom: 22px; padding: 0; overflow: hidden; border: 1px solid #79638e; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(43, 28, 55, 0.14); color: #403248; }
.assistant-panel__heading { align-items: center; padding: 9px 12px; border-bottom: 1px solid #9584a4; background: linear-gradient(#fefefe, #ded9e4); box-shadow: inset 0 1px white; }
.assistant-panel__avatar { width: 42px; height: 42px; border: 1px solid #71518c; border-radius: 8px; box-shadow: 0 1px 2px #a79fad; }
.assistant-panel .eyebrow { color: #80559f; font: 700 0.55rem Verdana, sans-serif; }
.assistant-panel__heading h2 { color: #3e2b4b; font: 800 1rem "Trebuchet MS", sans-serif; letter-spacing: -0.02em; }
.assistant-panel__status { border: 1px solid #8fad62; border-radius: 5px; background: linear-gradient(#f1fbdc, #cce99d); box-shadow: inset 0 1px white; color: #537a1d; font: 700 0.58rem Verdana, sans-serif; text-shadow: 0 1px white; }
.assistant-thread { min-height: 74px; margin: 0; padding: 15px; background: repeating-linear-gradient(0deg, #fff, #fff 24px, #f7f4f9 25px); }
.assistant-empty, .assistant-pending { color: #8b7e93; font: 0.7rem Verdana, sans-serif; }
.assistant-message { font: 0.72rem/1.5 Verdana, sans-serif; }
.assistant-message--user { background: #dcecff; color: #254d78; }
.assistant-message--assistant { border-color: #e0d5e8; background: #f4eaff; color: #53336d; }
.assistant-composer { padding: 8px; border-top: 1px solid #c3b9ca; background: linear-gradient(#f1eef4, #ddd7e3); }
.assistant-composer textarea { min-height: 42px; padding: 9px 10px; border: 1px solid #9f93a9; border-radius: 5px; background: white; box-shadow: inset 0 1px 3px rgba(40, 27, 51, 0.12); color: #3e3147; font: 0.72rem Verdana, sans-serif; }
.assistant-composer textarea::placeholder { color: #aaa1b0; }
.assistant-composer .button--primary, .quick-add .button--primary { border: 1px solid #674486; border-radius: 6px; background: linear-gradient(#ad89d0, #7b55a1 49%, #68448d 51%, #845bae); box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), 0 1px 2px rgba(47, 28, 64, 0.3); color: white; font: 700 0.7rem Verdana, sans-serif; text-shadow: 0 -1px #4e3068; }
.assistant-disclaimer { margin: 0; padding: 0 12px 9px; background: #ddd7e3; color: #82758a; font: 0.55rem Verdana, sans-serif; }

.quick-add { padding: 8px; border: 1px solid #c5a84e; border-radius: 8px; background: linear-gradient(#fffbe0, #f4e7a8); box-shadow: 0 3px 9px rgba(81, 65, 27, 0.15), inset 0 1px white; }
.quick-add input[type="text"] { font: 0.8rem Verdana, sans-serif; }
.task-section h2, .archive-section summary { color: #71627c; font: 700 0.6rem Verdana, sans-serif; }
.task-list { border-color: #b9afc0; border-radius: 7px; box-shadow: 0 2px 5px rgba(49, 35, 58, 0.09); }
.task-row { padding-block: 11px; }
.task-row__title { color: #3e3049; font: 700 0.75rem Verdana, sans-serif; }
.task-row__content p, .task-row__meta { font: 0.63rem Verdana, sans-serif; }
.check-button { border-color: #9e8bab; box-shadow: inset 0 1px 2px rgba(43, 25, 57, 0.12); }
.check-button--checked { background: linear-gradient(#9bd55e, #64a52e); border-color: #527f2b; box-shadow: inset 0 1px rgba(255, 255, 255, 0.6); }
.priority { border: 1px solid #d8cedf; border-radius: 4px; background: linear-gradient(#fff, #ece7ef); font-size: 0.56rem; text-shadow: 0 1px white; }
.empty-state, .edit-card, .settings-card { border-radius: 8px; }
.edit-card, .settings-card { border-color: #b7aabf; background: linear-gradient(#fff, #f8f5fa); box-shadow: 0 4px 12px rgba(49, 34, 59, 0.12); }

@media (max-width: 760px) {
  .retro-page { padding: 15px 10px 24px; }
  .retro-window__body { grid-template-columns: 1fr; }
  .retro-signup { border-top: 1px solid #8065a5; border-left: 0; }
  .retro-intro { padding: 34px 23px; }
  .retro-intro h1 { font-size: clamp(2.4rem, 12vw, 3.7rem); }
  .retro-footer { display: grid; gap: 5px; text-align: center; }
  .retro-footer p { justify-self: center; }
  .retro-window__bar { grid-template-columns: 55px 1fr 55px; }
  .retro-window__connection { font-size: 0; }
  .retro-window__connection::after { content: "●"; font-size: 0.6rem; }
  .page-shell--dashboard { width: calc(100% - 16px); margin-top: 16px; }
  .dashboard-titlebar { grid-template-columns: 55px 1fr 55px; }
  .dashboard-titlebar > span:last-child { font-size: 0; }
  .dashboard-titlebar > span:last-child::after { content: "●"; color: #c5ef85; font-size: 0.6rem; }
  .dashboard-content { padding: 25px 12px 36px; }
}

@media (max-width: 520px) {
  .retro-masthead { margin-bottom: 12px; }
  .retro-masthead > p { font-size: 0; }
  .retro-masthead > p span { font-size: 0.7rem; }
  .retro-logo { font-size: 1.28rem; }
  .retro-logo__icon { width: 40px; height: 40px; }
  .buddy-chat__actions { display: none; }
  .retro-signup { padding-inline: 23px; }
  .site-header__inner { width: calc(100% - 16px); }
  .wordmark span { display: none; }
  .wordmark::after { display: none; }
  .site-header .nav-link { padding-inline: 7px; }
  .dashboard-heading { display: grid; }
  .dashboard-heading h1 { max-width: none; }
  .dashboard-heading .status-pill { justify-self: start; margin-top: 3px; }
  .assistant-panel__status { display: none; }
}

/* HiHippo on the World Wide Web, circa 1996 */
.web96-page {
  width: min(calc(100% - 20px), 780px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 12px 10px 30px;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

body:has(.web96-page) {
  background-color: #b9b9c9;
  background-image:
    linear-gradient(45deg, #c9c9d8 25%, transparent 25%),
    linear-gradient(-45deg, #c9c9d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c9c9d8 75%),
    linear-gradient(-45deg, transparent 75%, #c9c9d8 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

.web96-welcome { margin: 0 0 7px; color: #555; font: 10px "Courier New", monospace; text-align: center; }
.web96-header { display: flex; min-height: 118px; align-items: center; justify-content: center; gap: 18px; padding: 10px 20px; border: 3px double #660099; background: #ffffcc; text-align: center; }
.web96-header__logo { width: 92px; height: 92px; border: 3px ridge #663399; border-radius: 0; object-fit: cover; }
.web96-header h1 { margin: 0; color: #660099; font: bold 58px/0.9 "Times New Roman", Times, serif; letter-spacing: -3px; text-shadow: none; }
.web96-header p { margin: 7px 0 0; color: #000080; font: bold italic 18px "Times New Roman", Times, serif; }
.web96-new { align-self: flex-start; margin: 8px 0 0 -8px; padding: 2px 4px; border: 1px solid #000; background: #ff0; color: #f00; font: bold 11px Arial, sans-serif; transform: rotate(7deg); }

.web96-nav { padding: 7px 10px; background: #000080; color: #fff; font: bold 12px Arial, sans-serif; text-align: center; }
.web96-nav a { color: #ffff00; text-decoration: underline; }
.web96-nav a:visited { color: #ffccff; }
.web96-nav span { padding: 0 5px; color: #fff; }
.web96-rainbow-rule { height: 6px; margin: 8px 0 12px; border: 0; background: linear-gradient(90deg, #f00 0 16.6%, #f90 16.6% 33.2%, #ff0 33.2% 49.8%, #090 49.8% 66.4%, #00c 66.4% 83%, #909 83%); }

.web96-columns { display: grid; align-items: start; gap: 16px; grid-template-columns: minmax(0, 1fr) 258px; }
.web96-main { padding: 4px 8px; }
.web96-main > h2 { margin: 6px 0 15px; color: #cc0000; font: bold 24px/1.1 "Times New Roman", Times, serif; text-align: center; }
.web96-blink { color: #ff9900; }
.web96-lede { font: 16px/1.4 "Times New Roman", Times, serif; }
.web96-example { margin: 18px 0; padding: 10px 12px; border: 2px inset #ccc; background: #eee; font: 13px/1.35 "Courier New", monospace; }
.web96-example h3 { margin: 0 0 10px; color: #000080; font: bold 14px Arial, sans-serif; text-decoration: underline; }
.web96-example p { margin: 8px 0; }
.web96-you { color: #0000cc; }
.web96-hippo { color: #660099; }
.web96-section-title { margin: 18px 0 8px; padding: 3px 6px; background: #660099; color: #fff; font: bold 16px Arial, sans-serif; }
.web96-feature-list { padding-left: 26px; font: 14px/1.45 Arial, sans-serif; list-style-type: square; }
.web96-feature-list li { margin: 5px 0; }
.web96-note { padding: 7px; border: 1px dashed #006600; background: #ccffcc; font-size: 12px; }
.web96-note span { color: #cc0000; font-weight: bold; }

.web96-sidebar { display: grid; gap: 14px; }
.web96-box { border: 2px solid #000; background: #fff; }
.web96-box h2 { margin: 0; padding: 5px; background: #660099; color: #fff; font: bold 18px "Times New Roman", Times, serif; text-align: center; }
.web96-box--yellow { padding: 0 10px 12px; background: #ffff99; text-align: center; }
.web96-box--yellow h2 { margin: 0 -10px 10px; background: #cc0000; }
.web96-sidebar__hippo { width: 78px; height: 78px; border: 2px solid #000080; border-radius: 0; object-fit: cover; }
.web96-box p { font-size: 12px; line-height: 1.35; }
.web96-cta { display: block; padding: 8px 5px; border: 2px outset #fff; background: #0000cc; color: #fff !important; font: bold 12px Arial, sans-serif; text-align: center; text-decoration: underline; }
.web96-cta:active { border-style: inset; }
.web96-phone { margin-bottom: 0; }
.web96-phone strong { color: #660099; font-size: 14px; }
.web96-box--login { padding: 0 10px 10px; background: #e8e8e8; }
.web96-box--login h2 { margin: 0 -10px 10px; background: #000080; }
.web96-form { display: grid; gap: 5px; }
.web96-form label { font: bold 12px Arial, sans-serif; }
.web96-form input[type="tel"], .web96-form input[type="text"] { width: 100%; min-height: 29px; padding: 3px 5px; border: 2px inset #ddd; border-radius: 0; background: #fff; color: #000; font: 14px "Courier New", monospace; }
.web96-form input[type="submit"] { min-height: 29px; padding: 3px 8px; border: 2px outset #eee; border-radius: 0; background: #ddd; color: #000; font: bold 12px Arial, sans-serif; }
.web96-form input[type="submit"]:active { border-style: inset; }
.web96-small { margin-bottom: 0; color: #555; font-size: 10px !important; text-align: center; }

.web96-footer { color: #333; font: 10px Arial, sans-serif; text-align: center; }
.web96-footer p { margin: 5px 0; }
.web96-footer a { color: #0000ee; text-decoration: underline; }
.web96-counter { padding: 1px 4px; border: 2px inset #777; background: #000; color: #00ff00; font: 12px "Courier New", monospace; letter-spacing: 1px; }

.web96-page--verification { min-height: 100dvh; }
.web96-page--verification .web96-header { justify-content: flex-start; min-height: 105px; text-align: left; }
.web96-page--verification .web96-header__logo { width: 78px; height: 78px; }
.web96-page--verification .web96-header h1 { font-size: 48px; }
.web96-verification { max-width: 520px; margin: 45px auto; padding: 16px 24px 24px; border: 2px solid #000080; background: #ffffcc; text-align: center; }
.web96-new-message { margin: -16px -24px 20px; padding: 5px; background: #000080; color: #fff; font: bold 12px "Courier New", monospace; }
.web96-verification h2 { color: #660099; font: bold 28px "Times New Roman", Times, serif; }
.web96-verification > p { font: 14px/1.4 Arial, sans-serif; }
.web96-form--code { max-width: 260px; margin: 20px auto; text-align: left; }
.web96-form--code input[type="text"] { font-size: 22px; font-weight: bold; letter-spacing: 6px; text-align: center; }
.web96-help { font-size: 11px !important; }
.web96-help a { color: #0000ee; text-decoration: underline; }

body:has(.site-header) { background-color: #b9b9c9; background-image: linear-gradient(45deg, #c9c9d8 25%, transparent 25%), linear-gradient(-45deg, #c9c9d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c9c9d8 75%), linear-gradient(-45deg, transparent 75%, #c9c9d8 75%); background-position: 0 0, 0 4px, 4px -4px, -4px 0; background-size: 8px 8px; color: #000; font-family: Arial, Helvetica, sans-serif; }
.site-header { position: static; border: 0; border-bottom: 5px solid #ffcc00; background: #660099; box-shadow: none; }
.site-header__inner { width: min(calc(100% - 20px), 780px); min-height: 58px; }
.wordmark { gap: 7px; color: #fff; font: bold 28px "Times New Roman", Times, serif; letter-spacing: -1px; text-shadow: none; }
.wordmark::after { display: inline; align-self: flex-start; margin: 3px 0 0 -4px; padding: 1px 3px; border: 1px solid #000; border-radius: 0; background: #ff0; color: #f00; content: "NEW!"; font: bold 8px Arial, sans-serif; text-shadow: none; transform: rotate(6deg); }
.wordmark__mark { width: 40px; height: 40px; border: 2px ridge #fff; border-radius: 0; box-shadow: none; }
.nav-link { padding: 4px; border-radius: 0; color: #ff0; font: bold 12px Arial, sans-serif; text-decoration: underline; text-shadow: none; }
.nav-link:hover { background: transparent; color: #fff; }
.site-header .button--quiet { min-height: 28px; padding: 3px 8px; border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: 12px Arial, sans-serif; text-shadow: none; }

.page-shell, .page-shell--dashboard { width: min(calc(100% - 20px), 780px); margin: 18px auto 40px; padding: 18px; overflow: visible; border: 1px solid #666; border-radius: 0; background: #fff; box-shadow: none; color: #000; font-family: Arial, Helvetica, sans-serif; }
.dashboard-heading { align-items: start; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 4px double #660099; }
.dashboard-heading .eyebrow { color: #000080; font: bold 11px Arial, sans-serif; }
.dashboard-heading h1 { max-width: none; color: #660099; font: bold 36px/1 "Times New Roman", Times, serif; letter-spacing: -1px; text-shadow: none; }
.dashboard-heading__lede { margin-top: 6px; color: #333; font: 13px Arial, sans-serif; }
.status-pill { border: 1px solid #000080; border-radius: 0; background: #e6e6fa; box-shadow: none; color: #000080; font: bold 10px Arial, sans-serif; text-shadow: none; }

.assistant-panel { margin-bottom: 16px; border: 2px solid #000080; border-radius: 0; background: #fff; box-shadow: none; color: #000; }
.assistant-panel__heading { padding: 5px 8px; border: 0; border-bottom: 1px solid #000080; background: #000080; box-shadow: none; color: #fff; }
.assistant-panel__avatar { width: 38px; height: 38px; border: 1px solid #fff; border-radius: 0; box-shadow: none; }
.assistant-panel .eyebrow { color: #ffff00; font: bold 9px Arial, sans-serif; }
.assistant-panel__heading h2 { color: #fff; font: bold 17px "Times New Roman", Times, serif; }
.assistant-panel__status { border: 1px solid #fff; border-radius: 0; background: #009900; box-shadow: none; color: #fff; font: bold 9px Arial, sans-serif; text-shadow: none; }
.assistant-thread { min-height: 66px; padding: 10px; background: #fff; }
.assistant-empty, .assistant-pending { color: #555; font: 11px "Courier New", monospace; }
.assistant-message { border-radius: 0; font: 11px/1.4 "Courier New", monospace; }
.assistant-message--user { background: #e6f2ff; color: #000080; }
.assistant-message--assistant { border-color: #cc99cc; background: #fff0ff; color: #660099; }
.assistant-composer { padding: 6px; border-top: 1px solid #000080; background: #ddd; }
.assistant-composer textarea { min-height: 42px; padding: 5px; border: 2px inset #ddd; border-radius: 0; background: #fff; box-shadow: none; color: #000; font: 12px Arial, sans-serif; }
.assistant-composer .button--primary, .quick-add .button--primary, .button--primary { border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: bold 12px Arial, sans-serif; text-shadow: none; transform: none; }
.assistant-disclaimer { padding: 0 8px 6px; background: #ddd; color: #555; font: 9px Arial, sans-serif; }
.quick-add { margin-bottom: 20px; padding: 5px; border: 2px solid #000; border-radius: 0; background: #ffff99; box-shadow: none; }
.quick-add input[type="text"] { font: 13px Arial, sans-serif; }
.task-board { gap: 20px; }
.task-section h2, .archive-section summary { margin-bottom: 4px; padding: 3px 5px; background: #660099; color: #fff; font: bold 11px Arial, sans-serif; letter-spacing: 0; text-transform: uppercase; }
.task-section h2 span, .archive-section summary span { color: #ffff00; }
.task-section--overdue h2 { background: #cc0000; color: #fff; }
.task-list { border: 1px solid #000; border-radius: 0; background: #fff; box-shadow: none; }
.task-frame + .task-frame .task-row { border-top: 1px dotted #777; }
.task-row { padding: 8px; }
.task-row__title { color: #0000ee; font: bold 12px Arial, sans-serif; text-decoration: underline; }
.task-row__content p, .task-row__meta { color: #333; font: 10px Arial, sans-serif; }
.check-button { border: 2px inset #ddd; border-radius: 0; box-shadow: none; }
.check-button--checked { border: 2px inset #ddd; background: #009900; box-shadow: none; }
.priority { border: 1px solid #000; border-radius: 0; background: #ff0; font-size: 9px; text-shadow: none; }
.empty-state, .edit-card, .settings-card { border-radius: 0; }
.edit-card, .settings-card { border: 2px solid #000080; background: #fff; box-shadow: none; }
.settings-heading h1 { color: #660099; font: bold 34px "Times New Roman", Times, serif; }
.flash { border-radius: 0; font-family: Arial, sans-serif; }

@media (max-width: 640px) {
  .web96-page { width: 100%; padding-inline: 7px; }
  .web96-header { min-height: 92px; gap: 10px; padding-inline: 8px; }
  .web96-header__logo { width: 68px; height: 68px; }
  .web96-header h1 { font-size: 40px; }
  .web96-header p { font-size: 14px; }
  .web96-columns { grid-template-columns: 1fr; }
  .web96-sidebar { grid-template-columns: 1fr 1fr; }
  .site-header__inner { width: calc(100% - 10px); }
  .wordmark span { display: inline; }
  .wordmark::after { display: none; }
  .page-shell, .page-shell--dashboard { width: calc(100% - 10px); margin-top: 8px; padding: 10px; }
}

@media (max-width: 440px) {
  .web96-welcome { display: none; }
  .web96-header { justify-content: flex-start; }
  .web96-header h1 { font-size: 34px; }
  .web96-header p { font-size: 12px; }
  .web96-new { display: none; }
  .web96-nav { font-size: 11px; line-height: 1.8; }
  .web96-columns, .web96-sidebar { grid-template-columns: 1fr; }
  .web96-main > h2 { font-size: 21px; }
  .web96-page--verification .web96-header h1 { font-size: 34px; }
  .web96-verification { margin: 20px auto; padding-inline: 14px; }
  .web96-new-message { margin-inline: -14px; }
  .wordmark span { display: none; }
  .site-header .nav-link { padding-inline: 3px; font-size: 11px; }
  .dashboard-heading { display: grid; }
  .dashboard-heading h1 { font-size: 30px; }
}

/* HiHippo: a small 1996-style website */
body:has(.simple96-page), body:has(.member96-page) { background: #fff; color: #000; font-family: "Times New Roman", Times, serif; }
.simple96-page { width: min(calc(100% - 24px), 1120px); min-height: 100dvh; margin: 18px auto 50px; padding: 0; background: #fff; color: #000; font: 16px/1.25 "Times New Roman", Times, serif; }
.simple96-page a, .member96-page a { color: #0000ee; text-decoration: underline; }
.simple96-page a:visited, .member96-page a:visited { color: #551a8b; }
.simple96-header { text-align: center; }
.simple96-header > div { width: 100%; text-align: center; }
.simple96-logo { display: block; width: 92px; height: 92px; margin: 12px auto 4px; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
.simple96-header h1 { margin: 6px 0 4px; color: #663399; font: normal 36px/1.1 "Times New Roman", Times, serif; letter-spacing: 0; }
.simple96-header p { margin: 0 0 18px; color: #000; font: bold 16px "Times New Roman", Times, serif; }
.simple96-header .simple96-tagline { width: 100%; margin: 10px 0 22px; color: #000; font: normal min(4vw, 48px)/1.05 "Times New Roman", Times, serif; white-space: nowrap; }
.simple96-tagline span:nth-child(1) { color: #663399; }
.simple96-tagline span:nth-child(2) { color: #d22f67; }
.simple96-tagline span:nth-child(3) { color: #3366cc; }
.simple96-page hr { height: 1px; margin: 18px 0; border: 0; border-top: 1px solid #777; }
.simple96-page > hr:first-of-type, .simple96-page > hr:last-of-type { height: 2px; border: 0; background: linear-gradient(90deg, #66ccff, #ffff66, #ff9999, #9966cc); }
.simple96-page h2 { margin: 30px 0 10px; color: #663399; font: bold 30px "Times New Roman", Times, serif; text-align: center; }
.simple96-page p { margin: 8px 0; }
.simple96-purpose-line { width: 100%; max-width: none; margin: -8px auto 18px; color: #000; font: normal 17px/1.25 "Times New Roman", Times, serif !important; font-weight: normal !important; text-align: center; white-space: nowrap; }
.simple96-about { max-width: 40em; margin-left: auto; margin-right: auto; text-align: left; }
.simple96-about h2 { text-align: center; }
.simple96-about p { font-size: 17px; line-height: 1.4; }
.simple96-intro { margin: 20px 0 36px; padding: 28px 64px 34px; border: 2px solid #663399; background: #ffffdd; text-align: center; }
.simple96-intro h2 { margin-top: 0; font-size: 34px; }
.simple96-intro > p:not(.simple96-small) { font-size: 20px; }
.simple96-example { width: 88%; margin: 24px auto; border: 1px solid #aaa; border-collapse: collapse; background: #fff; font: 18px/1.3 "Times New Roman", Times, serif; text-align: left; }
.simple96-example th, .simple96-example td { padding: 11px 14px; border: 1px solid #aaa; }
.simple96-example thead th { background: #eee; color: #663399; font-size: 20px; }
.simple96-example tbody th { width: 150px; color: #000; }
.simple96-section { margin-top: 26px; text-align: center; }
.simple96-section--quiet { font-size: 18px; }
.simple96-primary { font-size: 24px; font-weight: bold; }
.simple96-small { color: #555; font-size: 13px; }
.simple96-form { display: grid; max-width: 500px; gap: 5px; margin: 12px auto; grid-template-columns: 1fr auto; text-align: left; }
.simple96-form label { grid-column: 1 / -1; font-weight: bold; }
.simple96-form input[type="tel"], .simple96-form input[type="text"] { min-width: 0; min-height: 32px; padding: 4px 6px; border: 2px inset #ddd; border-radius: 0; background: #fff; color: #000; font: 16px Arial, sans-serif; }
.simple96-form input[type="submit"] { min-height: 32px; padding: 4px 12px; border: 2px outset #eee; border-radius: 0; background: #ddd; color: #000; font: bold 13px Arial, sans-serif; }
.simple96-form--prominent { max-width: 880px; margin-top: 20px; }
.simple96-form--prominent label { font-size: 19px; }
.simple96-form--prominent input[type="tel"] { min-height: 48px; font-size: 20px; }
.simple96-form--prominent input[type="submit"] { min-height: 48px; padding-inline: 28px; font-size: 17px; }
.simple96-privacy { margin: 16px auto 22px; color: #333; font-size: 13px; text-align: center; }
.simple96-footer { color: #555; font-size: 12px; text-align: center; }
.simple96-page--legal { max-width: 720px; }
.simple96-page--legal .simple96-header h1 { font-size: 32px; }
.simple96-page--legal .simple96-header p { font-weight: normal; color: #555; }
.simple96-legal { margin: 0 0 28px; text-align: left; }
.simple96-legal h2 { margin: 28px 0 10px; color: #663399; font: bold 22px "Times New Roman", Times, serif; text-align: left; }
.simple96-legal ul { margin: 8px 0 12px 1.4em; padding: 0; }
.simple96-legal li { margin: 6px 0; }
.simple96-page--verification { max-width: 620px; min-height: 100dvh; }
.simple96-page--verification > section { margin-top: 50px; text-align: center; }
.simple96-form--code { max-width: 330px; }
.simple96-form--code input[type="text"] { font: bold 20px "Courier New", monospace; letter-spacing: 5px; text-align: center; }

body:has(.site-header) { background: #fff; }
.site-header { position: static; border: 0; border-bottom: 1px solid #777; background: #fff; box-shadow: none; }
.site-header__inner { width: min(calc(100% - 24px), 680px); min-height: 62px; }
.wordmark { gap: 7px; color: #663399; font: normal 27px "Times New Roman", Times, serif; }
.wordmark::after { display: none; }
.wordmark__mark { display: inline-block; width: 34px; height: 34px; border: 0; border-radius: 7px; box-shadow: none; object-fit: cover; }
.site-header nav { gap: 4px; }
.nav-link { padding: 3px 5px; border-radius: 0; color: #0000ee; font: 14px "Times New Roman", Times, serif; text-decoration: underline; }
.nav-link:hover { background: transparent; color: #551a8b; }
.site-header .button--quiet { min-height: 25px; padding: 2px 7px; border: 2px outset #eee; border-radius: 0; background: #ddd; color: #000; font: 12px Arial, sans-serif; }
.page-shell.member96-page { width: min(calc(100% - 24px), 680px); margin: 18px auto 50px; padding: 0; overflow: visible; border: 0; background: #fff; box-shadow: none; color: #000; font: 16px/1.3 "Times New Roman", Times, serif; }
.member96-heading { align-items: baseline; margin: 0 0 22px; padding: 0 0 14px; border-bottom: 1px solid #777; }
.member96-heading .eyebrow { margin: 0; color: #555; font: 12px "Times New Roman", Times, serif; text-transform: none; }
.member96-heading h1 { margin: 4px 0 0; color: #663399; font: normal 32px "Times New Roman", Times, serif; letter-spacing: 0; }
.member96-heading .dashboard-heading__lede { margin-top: 3px; color: #000; font: 16px "Times New Roman", Times, serif; }
.status-pill { padding: 2px 5px; border: 0; border-radius: 0; background: transparent; color: #0000ee; font: 13px "Times New Roman", Times, serif; text-decoration: underline; }
.member96-section-title { margin: 0 0 6px; color: #663399; font: bold 22px "Times New Roman", Times, serif; }
.member96-page .quick-add { max-width: 540px; margin: 12px 0 24px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.member96-page .quick-add input[type="text"] { min-height: 30px; padding: 3px 5px; border: 2px inset #ddd; background: #fff; font: 15px Arial, sans-serif; }
.member96-page .button--primary { min-height: 30px; padding: 3px 10px; border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: bold 12px Arial, sans-serif; }
.member96-page .task-board { gap: 23px; }
.member96-page .task-section h2, .member96-page .archive-section summary { margin-bottom: 3px; padding: 0 0 3px; border-bottom: 1px solid #aaa; background: transparent; color: #000; font: bold 17px "Times New Roman", Times, serif; letter-spacing: 0; text-transform: none; }
.member96-page .task-section h2 span, .member96-page .archive-section summary span { color: #555; }
.member96-page .task-section--overdue h2 { color: #b00000; }
.member96-page .task-list { border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.member96-page .task-section__more { margin-top: 5px; }
.member96-page .task-section__more summary { color: #0000ee; font: 14px "Times New Roman", Times, serif; text-decoration: underline; }
.member96-page .task-list--continuation { margin-top: 5px; }
.member96-page .task-frame + .task-frame .task-row { border-top: 0; }
.member96-page .task-row { grid-template-columns: 25px minmax(0, 1fr) auto 25px; gap: 5px; padding: 7px 3px; border-bottom: 1px solid #ddd; }
.member96-page .check-button { width: 17px; height: 17px; border: 1px solid #777; border-radius: 0; font-size: 11px; }
.member96-page .check-button--reminder { display: grid; place-items: center; border-color: #71518c; color: #5a3378; font-weight: 800; }
.member96-page .task-row__title { color: #0000ee; font-weight: normal; text-decoration: underline; }
.member96-page .task-row__meta { color: #555; font-size: 13px; }
.member96-page .button { min-height: 27px; padding: 3px 8px; border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: bold 12px Arial, sans-serif; text-decoration: none; text-shadow: none; transform: none; white-space: nowrap; }
.member96-page .button:hover { background: #ddd; color: #000; transform: none; }
.member96-page .icon-button { display: grid; width: 22px; height: 22px; place-items: center; border: 2px outset #eee; background: #ddd; }
.member96-page .icon-button::after { color: #000; font: bold 15px/1 Arial, sans-serif; }
.member96-page .icon-button:hover::after { color: #b00000; }
.member96-page .archive-section summary { min-height: 0; padding: 0 0 3px; }
.member96-page .task-row--deleted { grid-template-columns: 0 minmax(0, 1fr) auto auto; opacity: 1; }
.member96-page .task-row--deleted .task-row__actions { min-width: max-content; }
.member96-page .undo-bar { justify-content: flex-start; gap: 9px; padding-top: 12px; border-top: 1px solid #aaa; color: #555; font: 14px "Times New Roman", Times, serif; }
.member96-page .empty-state { padding: 24px 16px; border: 1px dotted #777; border-radius: 0; color: #555; }
.member96-page .empty-state__mark { color: #008000; }
.member96-page .empty-state h2 { color: #663399; font: bold 18px "Times New Roman", Times, serif; }
.member96-page .assistant-composer .button { align-self: stretch; }
.member96-assistant { margin: 0 0 32px; padding-bottom: 22px; border-bottom: 1px solid #777; }
.member96-assistant > h2 { margin: 0; color: #663399; font: bold 18px "Times New Roman", Times, serif; }
.member96-assistant .assistant-panel { margin-top: 12px; border: 1px solid #999; border-radius: 0; box-shadow: none; }
.member96-assistant .assistant-panel__avatar { display: block; width: 48px; height: 48px; border: 0; border-radius: 8px; box-shadow: none; object-fit: cover; }
.member96-page #todo-detail:not(:empty) { display: block; margin-top: 30px; }
.member96-page .todo-detail96 { scroll-margin-top: 20px; }
.member96-page .todo-detail96__deleted p { text-align: center; }

/* Settings and texting use the same small 1996 website language. */
.page-shell.settings96-page { width: min(calc(100% - 24px), 680px); margin: 18px auto 50px; padding: 18px 0 0; overflow: visible; border: 0; background: #fff; box-shadow: none; color: #000; font: 16px/1.3 "Times New Roman", Times, serif; }
.settings96-page::before { display: block; height: 2px; margin-bottom: 24px; background: linear-gradient(90deg, #66ccff, #ffff66, #ff9999, #9966cc); content: ""; }
.settings96-page a { color: #0000ee; text-decoration: underline; }
.settings96-page a:visited { color: #551a8b; }
.settings96-page .settings-heading { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid #888; text-align: center; }
.settings96-page .settings-heading .eyebrow { margin: 0 0 3px; color: #555; font: normal 13px "Times New Roman", Times, serif; letter-spacing: 0; text-transform: none; }
.settings96-page .settings-heading h1 { margin: 0; color: #663399; font: bold 34px/1.1 "Times New Roman", Times, serif; letter-spacing: 0; }
.settings96-page .settings-heading > p:last-child { max-width: 58ch; margin: 8px auto 0; color: #000; }
.settings96-page .settings-card { margin-bottom: 20px; padding: 22px; border: 1px solid #999; border-radius: 0; background: #fff; box-shadow: none; }
.settings96-page .messaging-settings-card, .settings96-page .connection-card { border: 2px solid #663399; background: #ffffdd; }
.settings96-page .settings-card .eyebrow { margin: 0 0 2px; color: #555; font: normal 12px "Times New Roman", Times, serif; letter-spacing: 0; text-transform: none; }
.settings96-page .messaging-settings-card h2, .settings96-page .connection-card h2 { margin: 0; color: #663399; font: bold 22px "Times New Roman", Times, serif; }
.settings96-page .messaging-settings-card p:last-child, .settings96-page .connection-help { color: #333; }
.settings96-page .field { margin-bottom: 20px; }
.settings96-page .field label, .settings96-page fieldset legend { margin-bottom: 5px; color: #000; font: bold 16px "Times New Roman", Times, serif; }
.settings96-page .field input, .settings96-page .field select, .settings96-page .field textarea, .settings96-page input[type="time"] { min-height: 34px; padding: 4px 6px; border: 2px inset #ddd; border-radius: 0; background: #fff; color: #000; font: 14px Arial, sans-serif; }
.settings96-page .field--compact { max-width: 260px; }
.settings96-page .form-hint { margin-top: 4px; color: #555; font: 12px/1.3 "Times New Roman", Times, serif; }
.settings96-page .settings-card fieldset { margin: 24px 0; padding: 18px 0 0; border: 0; border-top: 1px solid #aaa; }
.settings96-page .toggle-row { align-items: flex-start; gap: 8px; }
.settings96-page .toggle-row input { width: 16px; height: 16px; accent-color: auto; }
.settings96-page .text-button { min-height: 0; padding: 5px 0; color: #0000ee; font: 13px "Times New Roman", Times, serif; }
.settings96-page .button { min-height: 30px; padding: 4px 10px; border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: bold 12px Arial, sans-serif; text-decoration: none; text-shadow: none; transform: none; }
.settings96-page .button:hover { background: #ddd; color: #000; transform: none; }
.settings96-page .status-pill { display: inline-block; padding: 2px 5px; border: 1px solid #663399; border-radius: 0; background: #fff; color: #008000; font: bold 11px Arial, sans-serif; text-decoration: none; }
.settings96-page .connection-state { align-items: flex-start; }
.settings96-page .pairing-code { margin: 20px 0 12px; padding: 16px; border: 1px solid #663399; border-radius: 0; background: #eee; }
.settings96-page .pairing-code__label { color: #663399; font: bold 12px "Times New Roman", Times, serif; letter-spacing: 0; text-transform: none; }
.settings96-page .pairing-code strong { color: #000; font: bold 28px "Courier New", monospace; }
.settings96-page .settings-back { margin-top: 20px; padding-top: 16px; border-top: 1px solid #888; font-size: 14px; }
.settings96-page .field-error { color: #b00000; font-family: Arial, sans-serif; }

/* The inline task detail view belongs to the same 1996 site. */
.edit96-card { width: 100%; padding: 22px; border: 2px solid #663399; border-radius: 0; background: #ffffdd; box-shadow: none; color: #000; font: 16px/1.3 "Times New Roman", Times, serif; }
.edit96-heading { margin: -4px 0 22px; padding-bottom: 14px; border-bottom: 1px solid #999; text-align: center; }
.edit96-heading p { margin: 0 0 2px; color: #555; font-size: 13px; }
.edit96-heading h2 { margin: 0; color: #663399; font: bold 26px "Times New Roman", Times, serif; }
.edit96-card .field { margin-bottom: 18px; }
.edit96-card .field label { margin-bottom: 4px; color: #000; font: bold 15px "Times New Roman", Times, serif; }
.edit96-card .field input, .edit96-card .field select, .edit96-card .field textarea, .edit96-card select { width: 100%; min-height: 34px; padding: 4px 6px; border: 2px inset #ddd; border-radius: 0; background: #fff; color: #000; font: 14px Arial, sans-serif; }
.edit96-card .field textarea { min-height: 80px; }
.edit96-card .edit-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding-top: 18px; border-top: 1px solid #aaa; }
.edit96-card .form-hint { margin: 4px 0 18px; color: #555; font: 12px/1.35 "Times New Roman", Times, serif; }
.edit96-card .form-actions { padding-top: 16px; border-top: 1px solid #aaa; }
.edit96-card .button { min-height: 30px; padding: 4px 10px; border: 2px outset #eee; border-radius: 0; background: #ddd; box-shadow: none; color: #000; font: bold 12px Arial, sans-serif; text-decoration: none; text-shadow: none; transform: none; }
.edit96-card .button:hover { background: #ddd; color: #000; transform: none; }
.edit96-card .field-error { color: #b00000; font-family: Arial, sans-serif; }

@media (max-width: 520px) {
  .simple96-page { width: calc(100% - 20px); margin-top: 10px; font-size: 15px; }
  .simple96-logo { width: 78px; height: 78px; }
  .simple96-header h1 { font-size: 32px; }
  .simple96-header .simple96-tagline { font-size: 4vw; }
  .simple96-purpose-line { font-size: 14px !important; white-space: normal; }
  .simple96-intro { padding-inline: 12px; }
  .simple96-example { width: 100%; }
  .simple96-example tbody th { width: auto; }
  .simple96-form { grid-template-columns: 1fr; }
  .simple96-form input[type="submit"] { width: 100%; }
  .simple96-page--verification > section { margin-top: 32px; }
  .site-header__inner { align-items: flex-start; padding: 9px 0; }
  .site-header nav { flex-wrap: wrap; justify-content: flex-end; }
  .wordmark > span:last-child { display: none; }
  .page-shell.member96-page { width: calc(100% - 20px); margin-top: 12px; }
  .page-shell.settings96-page { width: calc(100% - 20px); margin-top: 10px; }
  .settings96-page .settings-heading h1 { font-size: 29px; }
  .settings96-page .messaging-settings-card, .settings96-page .connection-state { display: block; }
  .settings96-page .messaging-settings-card .button, .settings96-page .connection-state .status-pill { margin-top: 12px; }
  .settings96-page .settings-card { padding: 16px; }
  .edit96-card { padding: 16px; }
  .edit96-card .edit-card__grid { grid-template-columns: 1fr; gap: 0; }
  .member96-heading { display: block; }
  .member96-heading .status-pill { margin-top: 8px; }
  .member96-page .task-row { grid-template-columns: 23px minmax(0, 1fr) 22px; }
  .member96-page .task-row__meta { grid-column: 2; justify-content: flex-start; }
  .member96-page .task-row--deleted { grid-template-columns: 0 minmax(0, 1fr) auto; }
  .member96-page .task-row--deleted .task-row__content { grid-column: 2; }
  .member96-page .task-row--deleted .task-row__meta { grid-column: 2; }
  .member96-page .task-row--deleted .task-row__actions { grid-column: 3; grid-row: 1 / span 2; }
  .member96-page .undo-bar { align-items: flex-start; flex-direction: column; }
}

/* Private owner analytics follows the same compact, legible site language. */
.admin96-page { width: min(calc(100% - 24px), 980px); margin: 18px auto 50px; color: #000; font: 15px/1.3 "Times New Roman", Times, serif; }
.admin96-page::before { display: block; height: 2px; margin-bottom: 24px; background: linear-gradient(90deg, #66ccff, #ffff66, #ff9999, #9966cc); content: ""; }
.admin96-heading { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid #777; text-align: center; }
.admin96-heading h1 { margin: 2px 0 6px; color: #663399; font: bold 34px/1.1 "Times New Roman", Times, serif; }
.admin96-heading p { margin: 3px auto; max-width: 68ch; }
.admin96-heading p:first-child { color: #555; font-size: 13px; }
.admin96-page section { margin: 26px 0; }
.admin96-page h2 { margin: 0 0 9px; padding-bottom: 4px; border-bottom: 1px solid #999; color: #663399; font: bold 21px "Times New Roman", Times, serif; }
.admin96-table-wrap { overflow-x: auto; }
.admin96-table { width: 100%; border-collapse: collapse; background: #fff; font-family: Arial, sans-serif; font-size: 12px; }
.admin96-table th, .admin96-table td { padding: 7px 9px; border: 1px solid #999; text-align: left; white-space: nowrap; }
.admin96-table thead th { background: #eee; color: #330066; }
.admin96-metrics td { font-size: 18px; font-weight: bold; text-align: center; }
.admin96-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.admin96-funnel { margin: 0; padding: 0; list-style: none; }
.admin96-funnel li { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px dotted #aaa; }
.admin96-funnel strong { color: #663399; }
.admin96-health { margin: 0; }
.admin96-health div { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px dotted #aaa; }
.admin96-health dt, .admin96-health dd { margin: 0; }
.admin96-health dd { color: #008000; font-weight: bold; }
.admin96-health .admin96-bad { color: #b00000; }
.admin96-chart { display: grid; height: 180px; align-items: end; gap: 7px; padding: 14px 8px 0; border: 1px solid #999; grid-template-columns: repeat(14, minmax(24px, 1fr)); }
.admin96-chart__day { display: grid; height: 100%; grid-template-rows: 1fr auto; text-align: center; }
.admin96-chart__bars { display: flex; min-height: 1px; align-items: end; justify-content: center; gap: 2px; }
.admin96-chart__bar { display: block; width: min(10px, 45%); min-height: 1px; }
.admin96-chart__bar--signup { background: #663399; }
.admin96-chart__bar--activation { background: #008000; }
.admin96-chart__day small { padding: 5px 0; color: #555; font: 9px Arial, sans-serif; }
.admin96-legend { color: #555; font-size: 12px; }
.admin96-legend span:first-child { color: #663399; }
.admin96-legend span:last-child { margin-left: 12px; color: #008000; }
.admin96-inline-form { display: grid; min-width: 150px; gap: 4px; }
.admin96-inline-form input, .admin96-inline-form select { width: 100%; font: 12px Arial, sans-serif; }
.admin96-details { margin-top: 12px; padding: 10px; border: 1px solid #999; background: #fafafa; }
.admin96-details summary { cursor: pointer; color: #663399; font-weight: bold; }
.admin96-line-form { display: grid; max-width: 520px; grid-template-columns: 170px 1fr; gap: 7px 10px; margin-top: 12px; align-items: center; }
.admin96-line-form input, .admin96-line-form select { min-width: 0; }
.admin96-line-form input[type="submit"] { grid-column: 2; }
.admin96-batch-form { display: flex; gap: 7px; margin: 8px 0; }
.admin96-batch-form input[type="number"] { width: 72px; }

@media (max-width: 680px) {
  .admin96-page { width: calc(100% - 20px); margin-top: 10px; }
  .admin96-columns { grid-template-columns: 1fr; gap: 0; }
  .admin96-chart { gap: 2px; padding-inline: 3px; }
  .admin96-chart__day small { font-size: 8px; transform: rotate(-45deg); }
}