/* Housekeep's website, made of the dashboard's own materials (assets/dashboard.html): pitch
   black, a shell inset from the window's edges, layers a few percent apart, panels outlined by a
   hairline, and colour only for state, as a dot or a line. Tokens and components are the app's. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --black: #000;
  --shell: #080808;
  --layer-1: #0e0e0e;
  --layer-2: #151515;
  --layer-3: #1b1b1b;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --text: #ededed;
  --text-2: #9b9b9b;
  --text-3: #5f5f5f;
  --accent: #8a8fd9;
  --green: #52a67c;
  --amber: #c89b4e;
  --red: #cf6360;
  --track: #d9d9d9;
  --track-soft: #3b3b3b;
  --font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --column: 1080px;
  --edge: 24px;
  --gutter: max(var(--edge), calc((100% - var(--column)) / 2));
  --inset: 24px;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--black); color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--black); color: var(--text); font: 400 14px/1.5 var(--font); font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--text-2); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; }
code { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.01em; color: var(--text); }
[hidden] { display: none !important; }
/* Scrollbars: a hairline thumb that shows while something scrolls, then hides again.
   Chrome and Safari take the ::-webkit-scrollbar rules; Firefox takes the standard ones. */
*::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 3px; background: transparent padding-box; }
.scrolling::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.18); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .scrolling { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

[data-tier="at-risk"] { --c: var(--red); }
[data-tier="attention"] { --c: var(--amber); }
[data-tier="safe"] { --c: var(--green); }
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
/* Shape as well as colour: red a filled dot, amber a ring, green a small quiet dot. */
.dot[data-tier="attention"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.dot[data-tier="safe"] { width: 5px; height: 5px; opacity: 0.85; }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; white-space: nowrap; }
.status[data-tier="safe"] { color: var(--text-3); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--layer-2); color: var(--text-3); font-size: 11px; white-space: nowrap; }
.muted { color: var(--text-3); font-size: 12.5px; }

/* ---------- layout: the app's sidebar and inset shell ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.app.solo { grid-template-columns: minmax(0, 1fr); }
.side { height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 20px 12px 16px; }
/* The index can outgrow the window; the sidebar scrolls rather than squashing what's in it. */
.side > * { flex: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 26px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
/* The mark: main arriving at the map's interchange, the station for "in sync", with the light inside. */
.logo { flex: none; width: 22px; height: 22px; margin: -2px 0; }
.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.nav + .nav { margin-top: 18px; }
.nav a { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.nav a:hover { color: var(--text); background: var(--layer-1); }
.nav a[aria-current="true"] { color: var(--text); background: var(--layer-2); }
.nav a .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a .n { color: var(--text-3); font-size: 12px; }
.nav svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.side-head { padding: 0 12px 6px; color: var(--text-3); font-size: 12px; }
.side-tools { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; }
.side-tools a { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-size: 13px; }
.side-tools a:hover { color: var(--text); background: var(--layer-1); }
.side-tools svg { width: 16px; height: 16px; color: var(--text-3); }
.side-note { padding: 8px 12px 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.find { display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 0 18px; padding: 0 8px 0 12px; border-radius: 10px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); cursor: text; }
.find:focus-within { box-shadow: inset 0 0 0 1px var(--line-2); }
.find svg { width: 15px; height: 15px; flex: none; }
.find input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font-size: 13.5px; outline: none; }
.find input::placeholder { color: var(--text-3); }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
kbd, .find kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--layer-2); color: var(--text-3); font: 11px/1 var(--mono); }
.find:focus-within kbd { visibility: hidden; }

.main { min-width: 0; margin: 8px 8px 8px 0; height: calc(100vh - 16px); overflow-y: auto; border-radius: 22px; background: var(--shell); border: 1px solid var(--line); overscroll-behavior: contain; scroll-behavior: smooth; }
.solo .main { margin: 8px; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(var(--edge) * 0.75) var(--gutter); background: var(--shell); box-shadow: 0 1px 0 transparent; transition: box-shadow 160ms var(--ease); }
.bar.scrolled { box-shadow: 0 1px 0 var(--line); }
.bar .brand { padding: 0; }
.bar-left { display: flex; align-items: center; gap: 28px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text-3); font-size: 13.5px; }
.crumbs a { transition: color 120ms var(--ease); }
.crumbs a:hover { color: var(--text-2); }
.crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links { gap: 20px; }
.bar-right { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); font-size: 13px; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 120ms var(--ease), transform 120ms var(--ease), opacity 120ms var(--ease);
}
.btn:hover { background: var(--layer-3); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; flex: none; color: var(--text-2); stroke-width: 1.7; }
.btn:has(> svg:first-child) { padding-left: 16px; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--layer-2); color: var(--text); }
.btn.primary { background: var(--text); color: var(--black); box-shadow: none; font-weight: 500; }
.btn.primary svg { color: var(--black); }
.btn.primary:hover { opacity: 0.88; background: var(--text); }
.btn .done { display: none; }
.btn.copied .idle { display: none; }
.btn.copied .done { display: block; color: var(--green); }
.btn.cmd { gap: 12px; font: 13px/1 var(--mono); }
.btn.cmd .prompt { color: var(--text-3); }
.seg { display: inline-flex; gap: 2px; }
.seg .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.seg .btn[aria-selected="true"] { background: var(--layer-2); color: var(--text); }

/* ---------- content ---------- */
/* The bar pads evenly so it balances once it sticks; the view makes up the rest of the gap. */
.view { padding: calc(var(--edge) / 4) var(--gutter) var(--edge); display: grid; gap: 16px; align-content: start; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
.head .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--text-3); font-size: 13px; }
.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.kicker { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }

.panel { background: transparent; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 var(--inset); }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 500; }
.panel-head .end { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12.5px; }
.panel-body { padding: 4px var(--inset) var(--inset); }
.panel-note { margin: -6px 0 0; padding: 0 var(--inset); color: var(--text-3); font-size: 12.5px; }
.panel-note a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { padding: 22px var(--inset) var(--inset); min-width: 0; }
.cell + .cell { box-shadow: inset 1px 0 0 var(--line); }
.cell .label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.cell .value { display: block; margin-top: 18px; font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: -0.035em; }
.cell[data-tier="safe"] .value { color: var(--text-3); }
.cell .unit { display: block; margin-top: 8px; color: var(--text-2); font-size: 12.5px; }
.cell .caption { margin: 10px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }

.plan-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px var(--inset); border-top: 1px solid var(--line); }
.plan-row b { display: block; font-size: 14px; font-weight: 500; }
.plan-row small { display: block; color: var(--text-3); font-size: 12.5px; }
/* The site's rows carry a sentence or two, not the app's one-liners: give them room. */
.view .plan-row { min-height: 72px; padding: 18px var(--inset); align-items: center; }
.view .plan-row small { margin-top: 4px; line-height: 1.5; }
.plan-row .num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--layer-2); color: var(--text-3); font: 500 11px/1 var(--font); }
.plan-row b.mono { font-size: 13px; font-weight: 400; }

.folder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 54px; padding: 0 var(--inset); border-top: 1px solid var(--line); }
.folder b { display: block; font-size: 13.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder small { display: block; color: var(--text-3); font: 11.5px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table { width: 100%; border-collapse: collapse; }
th { padding: 0 16px 10px; color: var(--text-3); font-size: 12px; font-weight: 400; text-align: left; white-space: nowrap; }
td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th:first-child, td:first-child { padding-left: var(--inset); }
th:last-child, td:last-child { padding-right: var(--inset); }
th.end, td.end { text-align: right; }
.bname { display: flex; align-items: center; gap: 8px; }
.bname i { font-style: normal; color: var(--text-3); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--text-3); font-size: 12px; }
.legend li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend svg { flex: none; overflow: visible; }
.map svg { display: block; overflow: visible; max-width: 100%; height: auto; }

/* The confirm dialog, as the map shows it before any change. */
.confirm { width: 100%; max-width: 500px; background: var(--layer-2); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line-2), 0 32px 80px rgba(0, 0, 0, 0.8); }
.confirm-body { display: grid; gap: 12px; padding: 22px 22px 18px; }
.confirm-body h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; }
.confirm-body p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.confirm-body ul { margin: 4px 0 0; padding: 4px 0; list-style: none; border-radius: 14px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); }
.confirm-body li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 12px; font-size: 13px; }
.confirm-body li span:last-child { color: var(--text-3); }
.confirm-body pre, .pre { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--black); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 11.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; }

/* ---------- the landing page ---------- */
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ob-swap { from { opacity: 0; filter: blur(4px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.97); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to { opacity: 0; } }
.rise { animation: ob-rise 640ms var(--ease) var(--d, 0ms) both; }
.swap { animation: ob-swap 420ms var(--ease) both; }

.hero { padding: 72px 0 40px; }
/* The kicker as a pill, like the onboarding's caption under the menu bar. */
.hero .kicker { width: fit-content; height: 30px; padding: 0 13px 0 12px; border-radius: 999px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.hero h1 { max-width: 13ch; margin: 18px 0 0; font-size: clamp(44px, 7vw, 84px); line-height: 0.98; font-weight: 500; letter-spacing: -0.045em; text-wrap: balance; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: 30px; }
.hero-foot p { max-width: 470px; margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act .btn { height: 40px; padding: 0 20px; font-size: 13.5px; }
.act .btn:has(> svg:first-child) { padding-left: 18px; }
.act .btn.cmd { padding: 0 8px 0 18px; font-size: 13px; }
.btn.cmd .copy { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.btn.cmd:hover .copy { background: var(--layer-2); }

/* Border beam, the light that travels the install command. From border-beam by Jakub Antalik
   (https://libraries.dev/beam), MIT License, Copyright (c) 2026 Jakub Antalik: the "md" preset,
   rendered once to plain CSS so the page needs no React. */
@property --beam-angle-cmd {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@property --beam-opacity-cmd {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam="cmd"] {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

[data-beam="cmd"][data-active] {
  animation:
    beam-spin-cmd 1.96s linear infinite,
    beam-fade-in-cmd 0.6s ease forwards;
}

[data-beam="cmd"][data-fading] {
  animation:
    beam-spin-cmd 1.96s linear infinite,
    beam-fade-out-cmd 0.5s ease forwards;
}

[data-beam="cmd"][data-active]::after,
[data-beam="cmd"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 19px;
  padding: 1px;
  clip-path: inset(0 round 20px);
  background: conic-gradient(
        from var(--beam-angle-cmd),
        transparent 0%, transparent 54%,
        rgba(255, 255, 255, 0.1) 57%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0.6) 63%,
        rgba(255, 255, 255, 0.75) 66%,
        rgba(255, 255, 255, 0.6) 69%,
        rgba(255, 255, 255, 0.3) 72%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 78%, transparent 100%
      ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-cmd),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle-cmd),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-cmd) * 0.26 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-cmd 12s ease-in-out infinite;
}

[data-beam="cmd"][data-active]::before,
[data-beam="cmd"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27);
  -webkit-mask-image:
    conic-gradient(
      from var(--beam-angle-cmd),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(
      from var(--beam-angle-cmd),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-cmd) * 0.42 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round 20px);
  animation: beam-hue-shift-cmd 12s ease-in-out infinite;
}

[data-beam="cmd"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 19px;
  clip-path: inset(0 round 20px);
  background: conic-gradient(
        from var(--beam-angle-cmd),
        transparent 0%, transparent 58%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.08) 65%,
        rgba(255, 255, 255, 0.2) 67%,
        rgba(255, 255, 255, 0.45) 69%,
        rgba(255, 255, 255, 0.85) 70%,
        rgba(255, 255, 255, 0.85) 70.5%,
        rgba(255, 255, 255, 0.45) 71.5%,
        rgba(255, 255, 255, 0.2) 73%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0.03) 78%,
        transparent 82%
      );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
  filter: blur(8px) brightness(1.30) saturate(1.20);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

[data-beam="cmd"][data-active] [data-beam-bloom],
[data-beam="cmd"][data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-cmd) * 0.24 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
}

@keyframes beam-spin-cmd {
  to { --beam-angle-cmd: 360deg; }
}

@keyframes beam-fade-in-cmd {
  to { --beam-opacity-cmd: 1; }
}

@keyframes beam-fade-out-cmd {
  from { --beam-opacity-cmd: 1; }
  to { --beam-opacity-cmd: 0; }
}

@keyframes beam-hue-shift-cmd {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
}

[data-beam="cmd"][data-paused],
[data-beam="cmd"][data-paused]::after,
[data-beam="cmd"][data-paused]::before,
[data-beam="cmd"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) { [data-beam="cmd"][data-active] { animation: none; } }

/* The instrument: the onboarding modal's frame, holding one project you can fix. */
.instrument { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px; padding: 8px; border-radius: 28px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 120px rgba(0, 0, 0, 0.85); }
.inst-stage { position: relative; min-width: 0; padding: 12px 12px 30px; border-radius: 20px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.inst-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 14px 24px; }
.inst-head b { display: block; font-size: 22px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.inst-head small { display: block; margin-top: 8px; color: var(--text-3); font: 11.5px/1.4 var(--mono); }
.inst-stage .map { padding: 0 14px; }
.inst-text { display: grid; grid-template-rows: 1fr auto; gap: 24px; min-width: 0; padding: 26px 26px 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.inst-text h2 { margin: 10px 0 0; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.inst-text p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.inst-text .act { margin-top: 22px; }
.inst-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.inst-foot > span { display: inline-flex; align-items: center; gap: 9px; }
.inst-foot .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* The menu bar, as the onboarding draws it, with Housekeep's light. */
.mb-bar { display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 14px; border-radius: 9px; background: #1b1b1d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--text-2); font-size: 12.5px; }
.mb-bar b { color: var(--text); font-weight: 500; }
.mb-right { display: flex; align-items: center; gap: 14px; margin-left: auto; color: var(--text-2); }
.mb-right svg { width: 15px; height: 15px; }
.mb-gl { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 12.5px; }
.mb-gl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.mb-gl .n:empty { display: none; }

/* What changes on the map as you fix things. */
.hero-map path, .hero-map circle, .hero-map rect { transition: stroke 700ms var(--ease); }
.hero-map .note { transition: fill 700ms var(--ease); }
.hero-map .grp { transition: opacity 600ms var(--ease); }
.hero-map .grp.gone { opacity: 0; }

/* The confirm dialog, over the instrument as it sits over the map. */
.inst-dialog { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; border-radius: 28px; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.inst-dialog .confirm { animation: pop 180ms var(--ease) both; }
.btn .spin { display: none; }
.btn.busy { pointer-events: none; opacity: 0.6; }
.btn.busy .spin { display: block; animation: spin 900ms linear infinite; }
.btn.busy .idle { display: none; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 13px 15px; border-radius: 18px; background: var(--layer-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0, 0, 0, 0.7); animation: toast-in 220ms var(--ease) both; }
.toast .dot { margin-top: 7px; }
.toast b { display: block; font-size: 13.5px; font-weight: 400; }
.toast pre { margin: 4px 0 0; color: var(--text-3); font: 11px/1.5 var(--mono); white-space: pre-wrap; }
.toast.leaving { animation: toast-out 160ms var(--ease) both; }

/* Why: the week, told as the map would log it. */
.story { display: grid; gap: 16px; margin-top: 120px; scroll-margin-top: 90px; }
.story-head { display: grid; justify-items: start; padding: 0 var(--inset) 24px; }
.story-head h2 { max-width: 17ch; margin: 14px 0 0; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.02; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
.story-head p { max-width: 560px; margin: 18px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.tl-row { display: grid; grid-template-columns: 84px auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 18px var(--inset); border-top: 1px solid var(--line); }
.tl-row:first-child { border-top: 0; }
.tl-row .when { color: var(--text-3); }
.tl-row b { display: block; font-size: 14px; font-weight: 500; }
.tl-row small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.turn { display: flex; align-items: flex-start; gap: 18px; max-width: 760px; padding: 32px var(--inset) 24px; }
.turn .lights { display: inline-flex; flex: none; gap: 4px; margin-top: 2px; }
.turn .mb-gl { height: 24px; padding: 0 8px; }
.turn p { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.5; }
.turn b { color: var(--text); font-weight: 500; }
.strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip.three h3 { margin: 12px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 560ms var(--ease) var(--d, 0ms), transform 560ms var(--ease) var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Sections: a title that stays put beside its content, like a reference sheet. */
.sect { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 48px; margin-top: 104px; scroll-margin-top: 90px; }
.sect-head { position: sticky; top: 96px; align-self: start; }
.sect-head h2 { margin: 10px 0 0; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.sect-head p { margin: 10px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.sect-body { display: grid; gap: 16px; min-width: 0; align-content: start; }
.sect.wide { grid-template-columns: minmax(0, 1fr); }
.sect.wide .sect-head { position: static; max-width: 560px; }
.sect .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sect .strip .cell:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
.sect .strip .cell:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }

/* A real border, not the panel's inset line: the iframe would paint over an inset shadow. */
.embed { overflow: hidden; border: 1px solid var(--line); box-shadow: none; }
.embed .panel-head { box-shadow: inset 0 -1px 0 var(--line); }
.embed iframe { display: block; width: 100%; height: 760px; border: 0; background: var(--black); }
/* The terminal view: the report in a quiet terminal window, as it prints after npx housekeep. */
.embed .term { display: none; justify-content: center; align-items: start; min-height: 760px; padding: 56px 24px; background: var(--black); }
.term-window { width: min(780px, 100%); overflow: hidden; border-radius: 14px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.6); }
.term-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--layer-3); }
.term-bar span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 12px; pointer-events: none; }
.term-body { margin: 0; padding: 22px 26px 28px; overflow-x: auto; color: var(--text); font: 13px/1.75 var(--mono); }
.term .cursor { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -3px; background: var(--text-2); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term .cursor { animation: none; } }
.embed[data-view="terminal"] iframe { display: none; }
.embed[data-view="terminal"] .term { display: flex; }
.term .r { color: var(--red); } .term .a { color: var(--amber); } .term .g { color: var(--green); } .term .d { color: var(--text-3); } .term .b { font-weight: 500; }
.phone-only { display: none; }

/* The last word: the light, green. */
.closing { display: grid; justify-items: start; margin-top: 120px; padding: 56px 48px 52px; border-radius: 28px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.closing .mb-gl { height: 26px; padding: 0 10px; }
.closing h2 { margin: 22px 0 0; max-width: 14ch; font-size: clamp(36px, 5vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
.closing p { margin: 14px 0 0; max-width: 460px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.closing .act { margin-top: 28px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding: 20px var(--inset) 0; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.foot nav { display: flex; gap: 18px; }
.foot a:hover { color: var(--text-2); }

/* ---------- the glossary ---------- */
.chapter { display: grid; gap: 16px; scroll-margin-top: 90px; }
.chapter + .chapter { margin-top: 32px; }
.chapter > header { padding: 0 var(--inset); }
.chapter > header h2 { margin: 6px 0 0; font-size: 21px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; }
.chapter > header p { margin: 4px 0 0; max-width: 560px; color: var(--text-2); font-size: 13.5px; }
.word { scroll-margin-top: 90px; }
.word .panel-head h2 { font-size: 15px; }
.word .panel-body { display: grid; gap: 0; }
.word .map { padding: 6px 0 4px; }
.word .def { max-width: 620px; margin: 16px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.word .in { display: flex; align-items: baseline; gap: 10px; max-width: 620px; margin: 10px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.word .in b { flex: none; color: var(--text-2); font-weight: 500; }
.word .rows { margin: 0 calc(var(--inset) * -1); }
.word .rows > :first-child { border-top: 0; }
.word:target { box-shadow: inset 0 0 0 1px var(--line-2); }
.caption-row { color: var(--text-3); font-size: 12px; margin: 10px 0 2px; }
.caption-row:first-child { margin-top: 0; }
.gloss-empty { padding: 48px var(--inset); color: var(--text-2); text-align: center; }
.gloss-empty a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* Marks settle in the way the onboarding's do, once, when a map first scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .map .mk { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .js .map .ln { stroke-dashoffset: var(--len); stroke-dasharray: var(--len) var(--len); }
  .js .map.shown .mk { animation: pop-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms) forwards; }
  .js .map.shown .ln { transition: stroke-dashoffset 700ms var(--ease) var(--d, 0ms); stroke-dashoffset: 0; }
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }

/* ---------- small screens, as the app does them ---------- */
@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .cell:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
  .strip.three .cell:nth-child(3) { box-shadow: inset 1px 0 0 var(--line); }
}
@media (max-width: 860px) {
  :root { --edge: 16px; --gutter: 16px; --inset: 16px; }
  .app { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .side { height: auto; overflow: visible; padding: 14px 16px 10px; }
  .brand { padding: 2px 0 12px; }
  .side .nav.words-nav, .side-head, .side-tools, .side-note { display: none; }
  .side .find { margin-bottom: 10px; }
  .nav.chapters-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav.chapters-nav::-webkit-scrollbar { display: none; }
  .nav.chapters-nav a { flex: none; min-height: 32px; }
  .main, .solo .main { margin: 0 6px 6px; height: auto; overflow: visible; }
  .solo .main { margin-top: 6px; }
  .bar { border-radius: 22px 22px 0 0; }
  .links, .bar-right .btn.ghost { display: none; }
  .head h1 { font-size: 28px; }
  .hero { padding: 36px 0 28px; }
  .instrument { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .inst-dialog { border-radius: 24px; }
  .mb-bar .menu-name { display: none; }
  .inst-stage { padding: 12px 6px 24px; }
  .inst-stage .map { padding: 0; }
  .inst-head { flex-direction: column; gap: 12px; padding: 20px 8px 18px; }
  .sect { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .sect-head { position: static; padding: 0 var(--inset); }
  .closing { padding: 36px 24px; margin-top: 80px; }
  .story { margin-top: 80px; }
  .tl-row { grid-template-columns: 14px minmax(0, 1fr); row-gap: 6px; }
  .tl-row .when, .tl-row > div, .tl-row > :last-child { grid-column: 2; }
  .tl-row > :last-child { justify-self: start; }
  .turn { flex-direction: column; gap: 14px; }
  .strip.three { grid-template-columns: minmax(0, 1fr); }
  .strip.three .cell + .cell { box-shadow: inset 0 1px 0 var(--line); }
  .cell .value { font-size: 32px; margin-top: 12px; }
  .cell { padding-top: 16px; padding-bottom: 16px; }
  .embed iframe, .embed .panel-head .seg { display: none; }
  .embed .term { display: flex; min-height: 0; padding: 12px; }
  .term-body { padding: 16px 14px 20px; font-size: 11px; }
  .phone-only { display: inline; }
  .scroll { overflow-x: auto; }
  .embed .panel-head .end > span { display: none; }
  /* Maps keep their size and scroll sideways, as the app's tables do on a phone. */
  .word .map { overflow-x: auto; margin: 0 calc(var(--inset) * -1); padding-left: var(--inset); padding-right: var(--inset); scrollbar-width: none; }
  .word .map::-webkit-scrollbar { display: none; }
  .word .map svg { max-width: none; }
}
@media (min-width: 861px) {
  .nav.chapters-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .main { scroll-behavior: auto; }
}

/* "What's this?" links into the glossary, drawn like the map's own "?" buttons. */
.q { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--layer-2); color: var(--text-3); font: 500 10.5px/1 var(--font); transition: color 120ms var(--ease), background-color 120ms var(--ease); }
.q:hover, .q:focus-visible { color: var(--text); background: var(--layer-3); }
.side-group + .side-group { margin-top: 18px; }
.words-nav a { min-height: 32px; }
.u { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.u:hover { text-decoration-color: var(--text-2); }