/* Metis design tokens. Colours mirror the shipped iOS app at d92e19b06 (Theme.swift, asset colours, ReadableInk); where the app and wiki/product/system.html differ, the app wins here and the difference is listed in the README. */
:root {
  --work: #FF5C4D; --health: #5FE3C0; --craft: #6BB6FF; --network: #C9A0FF;
  --bg: #0A0A0C; --surface: #16161A; --surface-hi: #242429;
  --line: #26262E; --line-2: #1F1F25;
  --ink: #FFFFFF; --ink-2: rgba(235, 235, 245, .6); --ink-3: rgba(235, 235, 245, .3);
  --error: #DC2626; --warn: #FF9F0A; --ok: #30D158;
  --mint: #5FE3C0; --mint-ink: #062019; --mint-text: #5FE3C0;
  --selected-fill: #FFFFFF; --selected-ink: #000000;
  --glass: rgba(20, 20, 24, .42); --glass-border: rgba(255, 255, 255, .12);
  --steady-surface: rgba(0, 0, 0, .1); --steady-blur: blur(37.5px);
  --inverted-strong: rgba(255, 255, 255, .18); --bubble-user: #EBEBF0; --tab-selection: rgba(120, 120, 128, .32);
  --warning-ink: #FF9F0A; --tag-ink: #9AA0B5; --glass-control: rgba(255, 255, 255, .07);
  --settings-group-fill: #16161A; --settings-page-fill: #0A0A0C; --switch-off-track: rgba(235, 235, 245, .3);
  --sheet-overlay: rgba(0, 0, 0, .48); --sheet-grabber: #3D3D3F; --sheet-button-fill: rgba(120, 120, 128, .32); --sheet-button-ink: #EDEDED; --wheel-band: rgba(118, 118, 128, .18);
  --inverted-faint: rgba(255, 255, 255, .12); --kept-text-fill: rgba(255, 255, 255, .1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --title: 600 34px/41px var(--font);
  --title-2: 600 22px/28px var(--font);
  --body: 400 17px/22px var(--font);
  --body-mono: 400 17px/22px var(--mono);
  --caption: 400 15px/20px var(--font);
  --caption-mono: 400 15px/20px var(--mono);

  --space-s: 10px; --space-m: 15px; --space-l: 20px; --space-xl: 25px;
  --radius-s: 10px; --radius-l: 20px; --radius-sheet: 34px; --radius-tray: 56px;

  --m-short: 200ms; --m-medium: 380ms; --m-ring: 1500ms;
  --aurora-loop: 4s;
  --catch-up-inset: 20px; --catch-up-row-spacing: 12px; --catch-up-footer-height: 52px;
  --catch-up-peek-step: 10px; --catch-up-peek-scale-step: .04; --catch-up-peek-opacity-step: .3;
  --check-circle-size: 22px; --check-circle-stroke: 1.5px;
  --space-tiny: 5px; --card-top-glyph-box: 18px; --card-top-glyph-ink: 15px; --card-top-glyph-gap: 8px;
  --outline-chip-height: 44px; --outline-chip-value-height: 34px; --outline-chip-accessory-horizontal-padding: 14px; --outline-chip-value-icon-gap: 5px;
  --catch-up-receipt-undo-gap: 10px; --catch-up-receipt-glyph-gap: 9px;
  --ios-red: #FF4245; --ios-progress-track: rgba(120, 120, 128, .36); --ios-secondary-label: rgba(235, 235, 245, .6);
  --ios-swipe-action-width: 60px; --ios-swipe-action-gap: 10px; --ios-swipe-row-corner: 26px; --ios-progress-height: 4px;
  --settings-shell-edge: 20px; --settings-shell-row-inset: 15px; --settings-shell-row-vertical-inset: 13px;
  --settings-shell-group-gap: 20px; --settings-shell-header-gap: 6px; --settings-shell-footnote-gap: 8px; --settings-shell-top-inset: 8px;
  --settings-row-mark-slot: 40.8px; --settings-row-nested-indent: 55.8px; --settings-row-text-spacing: 1px;
  --wrap-score-ring-diameter: 64px; --kept-code-size: 132px; --kept-quiet-zone: 6px; --kept-corner-radius: 10px;
  --settings-accordion-body-gap: 10px; --sheet-item-gap: 24px; --day-strip-compact-diameter: 32px;
  --settle: cubic-bezier(.2, .8, .2, 1); --exit: ease-out;
  --disabled: .35;

  --shadow-lifted: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-rising: 0 -20px 60px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --work: #E8483B; --health: #13A884; --craft: #2C86E0; --network: #9160E0;
    --bg: #FFFFFF; --surface: #F2F2F7; --surface-hi: #E5E5EA;
    --ios-red: #FF383C; --ios-progress-track: rgba(120, 120, 120, .2); --ios-secondary-label: rgba(60, 60, 67, .6);
    --line: #E0E0E6; --line-2: #EAEAEF;
    --ink: #000000; --ink-2: #636369; --ink-3: #6E6E74;
    --error: #D11F1F; --warn: #FF9500; --ok: #34C759;
    --mint: #13A884; --mint-text: #0A7C5F;
    --selected-fill: #000000; --selected-ink: #FFFFFF;
    --glass: rgba(255, 255, 255, .62); --glass-border: rgba(0, 0, 0, .08);
    --steady-surface: rgba(255, 255, 255, .1); --steady-blur: blur(22.5px);
    --inverted-strong: rgba(0, 0, 0, .11); --bubble-user: #000000; --tab-selection: rgba(120, 120, 128, .16);
    --warning-ink: #A35000; --tag-ink: #6C7389; --glass-control: rgba(0, 0, 0, .008);
    --settings-group-fill: #FFFFFF; --settings-page-fill: #F2F2F7; --switch-off-track: rgba(60, 60, 67, .3);
    --sheet-overlay: rgba(0, 0, 0, .2); --sheet-grabber: #C1C1C6; --sheet-button-fill: rgba(120, 120, 128, .16); --sheet-button-ink: #1A1A1A; --wheel-band: rgba(116, 116, 128, .08);
    --inverted-faint: rgba(0, 0, 0, .07); --kept-text-fill: rgba(0, 0, 0, .16);
  }
}

:root[data-theme="light"] {
  --work: #E8483B; --health: #13A884; --craft: #2C86E0; --network: #9160E0;
  --bg: #FFFFFF; --surface: #F2F2F7; --surface-hi: #E5E5EA;
    --ios-red: #FF383C; --ios-progress-track: rgba(120, 120, 120, .2); --ios-secondary-label: rgba(60, 60, 67, .6);
  --line: #E0E0E6; --line-2: #EAEAEF;
  --ink: #000000; --ink-2: #636369; --ink-3: #6E6E74;
  --error: #D11F1F; --warn: #FF9500; --ok: #34C759;
  --mint: #13A884; --mint-text: #0A7C5F;
  --selected-fill: #000000; --selected-ink: #FFFFFF;
  --glass: rgba(255, 255, 255, .62); --glass-border: rgba(0, 0, 0, .08);
  --steady-surface: rgba(255, 255, 255, .1); --steady-blur: blur(22.5px);
  --inverted-strong: rgba(0, 0, 0, .11); --bubble-user: #000000; --tab-selection: rgba(120, 120, 128, .16);
  --warning-ink: #A35000; --tag-ink: #6C7389; --glass-control: rgba(0, 0, 0, .008);
  --settings-group-fill: #FFFFFF; --settings-page-fill: #F2F2F7; --switch-off-track: rgba(60, 60, 67, .3);
  --sheet-overlay: rgba(0, 0, 0, .2); --sheet-grabber: #C1C1C6; --sheet-button-fill: rgba(120, 120, 128, .16); --sheet-button-ink: #1A1A1A; --wheel-band: rgba(116, 116, 128, .08);
  --inverted-faint: rgba(0, 0, 0, .07); --kept-text-fill: rgba(0, 0, 0, .16);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-medium: 200ms; --m-ring: 0ms; }
}
/* Metis components for prototypes. Each one mirrors a shipped SwiftUI piece; add a new one only through the principal designer. */
.title { font: var(--title); color: var(--ink); margin: var(--space-xl) 0 var(--space-l); }
.title-2 { font: var(--title-2); color: var(--ink); margin: var(--space-xl) 0 var(--space-m); }
.body { font: var(--body); color: var(--ink); }
.body-2 { font: var(--body); color: var(--ink-2); }
.caption { font: var(--caption); color: var(--ink-2); }
.caption-3 { font: var(--caption); color: var(--ink-3); }
.mono { font: var(--body-mono); }
.caption-mono { font: var(--caption-mono); color: var(--ink-3); }

.card {
  position: relative; background: var(--steady-surface); border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--steady-blur); backdrop-filter: var(--steady-blur);
  border-radius: var(--radius-l); padding: var(--space-m); margin-bottom: var(--space-l);
}
.card.arc, .capsule-row.arc { box-shadow: inset 2px 0 0 var(--arc, var(--health)); }
.card.arc { padding-left: 13px; }
.card .row { display: flex; align-items: center; gap: var(--space-s); }

.glyph { width: 17px; height: 17px; flex: none; color: var(--glyph, var(--ink)); }
.glyph.medium { width: 24px; height: 24px; }
.glyph.large { width: 34px; height: 34px; }

.group { background: var(--surface); border-radius: var(--radius-l); overflow: hidden; margin-bottom: var(--space-l); }
.group .item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-m); border-bottom: 1px solid var(--line-2); font: var(--body);
}
.group .item:last-child { border-bottom: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 var(--space-xl); border-radius: 999px; border: none;
  font: 600 17px/1 var(--font); cursor: pointer;
  transition: transform var(--m-short) var(--settle), opacity var(--m-short) var(--settle);
}
.button:active { transform: scale(.94); }
.button.wide { width: 100%; }
.button.primary { background: var(--mint); color: var(--mint-ink); }
.button.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button.selected { background: var(--selected-fill); color: var(--selected-ink); }
.button.destructive { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1px var(--line); }
.button.glass {
  background: var(--glass); color: var(--ink); border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.button.circle { width: 44px; height: 44px; padding: 0; }
.button[disabled] { opacity: var(--disabled); }
.link-primary { font: 600 17px/1 var(--font); color: var(--mint-text); background: none; border: none; }

.chips { display: flex; gap: 8px; margin: var(--space-m) 0; }
.chip {
  height: 48px; padding: 0 24px; border-radius: 24px; display: inline-flex; align-items: center;
  font: 600 15px/1 var(--font); color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.chip.selected { background: var(--selected-fill); color: var(--selected-ink); border-color: transparent; }

.sheet {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 50; height: 68%;
  background: var(--surface); border-radius: var(--radius-tray); box-shadow: var(--shadow-rising);
  padding: var(--space-xl) var(--space-l); overflow-y: auto;
  animation: sheet-in var(--m-medium) var(--settle) both;
}
.sheet.top { left: 0; right: 0; bottom: 0; height: calc(100% - 64px); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
.sheet .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--ink-3); margin: -12px auto 18px; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.input {
  width: 100%; height: 44px; border-radius: var(--radius-s); border: none; padding: 0 var(--space-m);
  background: var(--surface-hi); color: var(--ink); font: var(--body);
}

.dot-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.arrive { animation: arrive var(--m-medium) var(--settle) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .arrive, .sheet { animation: fade var(--m-short) var(--exit) both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

.pillar { display: inline-block; width: 20.74px; height: 20.74px; flex: none; background: var(--glyph, currentColor);
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.pillar.medium { width: 29.28px; height: 29.28px; }
.pillar.work { --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxyZWN0IHg9IjMiIHk9IjciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMyIgcng9IjIiIHJ5PSIyIi8+CiAgPHBhdGggZD0iTTkgNyBWNSBROSAzIDExIDMgSDEzIFExNSAzIDE1IDUgVjciLz4KICA8bGluZSB4MT0iMyIgeTE9IjEzIiB4Mj0iMjEiIHkyPSIxMyIvPgo8L3N2Zz4K"); --glyph: var(--work); }
.pillar.health { --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjMsMTIgNywxMiA5LDYgMTMsMTggMTUsMTIgMjEsMTIiLz4KPC9zdmc+Cg=="); --glyph: var(--health); }
.pillar.craft { --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5Z29uIHBvaW50cz0iMTQsNCAyMCwxMCAxMSwxOSA1LDIwIDYsMTQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSI3IiB4Mj0iMTciIHkyPSIxMyIvPgo8L3N2Zz4K"); --glyph: var(--craft); }
.pillar.network { --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSIyLjIiLz4KICA8Y2lyY2xlIGN4PSIxOCIgY3k9IjYiIHI9IjIuMiIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTgiIHI9IjIuMiIvPgogIDxsaW5lIHgxPSI3LjUiIHkxPSI3LjUiIHgyPSIxMSIgeTI9IjE2Ii8+CiAgPGxpbmUgeDE9IjE2LjUiIHkxPSI3LjUiIHgyPSIxMyIgeTI9IjE2Ii8+CiAgPGxpbmUgeDE9IjgiIHkxPSI2IiB4Mj0iMTYiIHkyPSI2Ii8+Cjwvc3ZnPgo="); --glyph: var(--network); }
.pillar.goals { width: 19px; height: 19px; --mask: url("data:image/png;base64,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"); --glyph: var(--tag-ink); }
.pillar.errands { width: 18px; height: 24px; --mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABICAYAAAC9bQZsAAAAAXNSR0IArs4c6QAAAGxlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAADYAAAAAQAAANgAAAABAAKgAgAEAAAAAQAAADagAwAEAAAAAQAAAEgAAAAAYaxwZAAAAAlwSFlzAAAhOAAAITgBRZYxYAAABJFJREFUaAXtml2oVUUUx00zrcjSipCQ0pKsoKxQiIpCiOxBwYcgjB4SIsXS8M1A+yDI9CGiIOghxKLHiKhIoboqhT30kJlRWqKpCQVlYqap9fvnmcNisefcu2f23fvc3Av+zJq1ZtbH7JnZc2afUaNaakegHYF2BNoROAtG4JyacrwcPzeC0+ArcBiMaJpC9O+CU+CfDv6mXA8mgRFJ1xD1IRAS8uV36C4biZl97pI6SP1XJ3t7pCU22yXwZCeB0ZQvGd1J+Cs6ur4ttGZuBbeBF0GYet/DWzqPyl8g6B+HV5+Z4CLQV7SUaDT6IVhb/uAiHU/9RKTtn8gXuPa1VK/Dy/1gIRjX8ahXxhFgk/H8SvRqdy54bZC2O9EHuhTmQXAfuCoIqyovwNBq8DOwAStIkZxbeYzXxqH3V0wf5EdpE0g7a5Cr3A2WgeAbNo0m0207sMYDP6ZjUlt2kFVRHuvYVTEtYvtT5BeqQSptpmMs2OFKTOssUCwxxbQhNCpbzqVDUVJ6seo0EUZMCdpdrqhPGZndbK7G9ntgL/A2dDy7AZSm9fSwxv6gro2jiNYgtG1TeQW7pMCBNp5HgN95nyto+59IHWL0LYoZRvkE/Kum7tlbEGixj/aKIdZ1ntwBNCNi9DIKbR6BNsFoxyxFv9PajvyVpXoPT+O7XUza2Aqp1+hOcD0OuXoTVR+Dj7EbU6/E/DTVVGmafAzR+KOKpjPI9d8mljuCdfdvn1jdI57rr31ikRHUldoiMDWib0yc87tmDlFvBLKhE/ksEH4kToR/Cyhx/z5ENCTSYfhhcGBIrUs0sscp8Z7eQGDbrDINljqdbVeGf8bYFHstsP33OX23mrPGvu5aOcN8Y+rb4PVTJod0kv8s1UDOVHwFpxeDO8H74B0Q6EsYrTud9lOn4l76/gQqJ/vIxfcD1TIV+yHRaAw5ayxqtB8U/9vEcjYPPZj54HbwEdgMPI31ghJ1fW4aFhps83gIr6GNLmG0OwbSjrgbBH1KuZ/+NwWDnbKWzeNe41Rb+hxTnwevrT6HdMfyQKqBnDX2iXM6YOofwOcehXQlbt+NxvzgbM4a24B5nS60xj4EW0AgnfOmgAlBkFAeoY+meOXk10XlDhIM1rLGEuKqr0vOGqsvygRPbWKRQZuE/C7Qd9+Oc3bFm0loAFwC9FeH2SBs8ePhnwfXg1TaQ8engL7yVEqD7Yqv4822WWm8P+p0tl0ZXolZqmVX1DdpS/aDwY9WkcHrfZhEOVNxHR6nA50RddLQCzvQxzCamrrMSSUltTW1c69+fsr0aluXrpapWFcySX7a91jSsDXYqX1iDQ5+kuuz8on5y5RxSUNXbScfw4mY+V5PTP/zsJRz7rN2cngfg4+xa7tXYru6rc4wK1y97uoYHC53Tn2MTl1cfQGxP328iWwm8FOi2EI10vMxcwfQ3aWPZ3GKi2l0OllgzBtvqq4/dUYvi/R4Y/QbCt0X3hNr0LBcT+uL1BiU2LPgFGjqyXi/uvJ7DFRCOlWvBdvAL0CvAu9wuOrH8aXfegPgaTAZtNSOQDsCDY/AvxGtGZ0ddwGtAAAAAElFTkSuQmCC"); --glyph: var(--tag-ink); }
.pillar.habits { width: 22px; height: 17px; --mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAzCAYAAAAjKt6MAAAAAXNSR0IArs4c6QAAAGxlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAADYAAAAAQAAANgAAAABAAKgAgAEAAAAAQAAAEKgAwAEAAAAAQAAADMAAAAA+BJIBgAAAAlwSFlzAAAhOAAAITgBRZYxYAAAA1dJREFUaAXtmt2LTkEcxx8W5XW9RLlQsm5skfwD3FBS3jYpLly4o4QSCntBUW78Ay6QpUiEC24UceklF+JG3rWxZMv72+ernW12mvM8p+c5M/Os5/zqu2dmzpn5fud7zpmZM89WKmWUDpQOlA5kO9CWfSrpmfGwLwbfwaekShKT34D/D/gGtiXWkpS+D3YZYXCK9NikihKRf7BMMGbco2x2Ij3JaH1GyJD3YGkyVQmIs4yQGb/AngSaklBWM8K8KudRNqEodaMabGgm9aeDqWBcg23Z1fPo6qLCPLAGPLErx0hL4DpwDrwC5u6kPH5ER9RxYwOEL5qk867xL9EVPEbD0ANc8mbKn2jUhRE1Ghg5YML6jOt6KX8EtAD6mXFNPcWrqaQbkCeOctFeoNkkWGylZd+dP035omCslUqeWaMffo1XwWMyDO+AbYTW/hqlQ0ctIx4joDO0CNP+FhK2CUpvNicDH6sZcQnu9sD8Q5q/TM424i75WmPKkAYayPiM0BiwP6KGQfnPSNlG7Bo8Ez7hGqHBeHl4Wj/DV4ptI5b5LwtS+tzifkC6IwhLzkZtE5QOOUu4klZScAUcAkUu3V2eXHnXiIW5ag3Ti7RgyorfzomgCxaHq6myt1BjngqtIIfjVtladOs75C3YBOoKfWIfA8fBgrpaSFtJU709+2gxmHy8SWHJJEjNE22Oc7KEVBsjsurUW669jKaNGEbMpfe3gX6suRjRiTEeLj0ZSWIFrPZ7KiF6ZGPEfEjMK2GOM2IQ2xwaqA4ATcFGhDlOsy8MmHa3ED7DFetb6V+32vmrL0TTcfcYw4g2+B86Gm6SjxadMGmvwO28nY9hRLdHw/ZYLnRB1O8RYJugdEgjtL132KPhNWWF/QZCW97QY3gEuB3OyhdtxES49UG4GzzN0LGR8qAxhdavg6xO+8q1wisKP3JwH+Sa4HEBBl9nm6HsC9p2BHdggOBsExqhhdsZoIE7dzQ6r2pxdBKsys1Y7O8f2kXrA/p3gfvgDrgK3oDoITP3Ae1X5Hklih4so3e4FqE2V3V3apnx3xshozqANlurmdESRsgMbX70VDGjZYyQGYqdwDfPt5wRMmMJ6AX2q6KVYEvGLHp9DegzWFNtGaUDpQOlA8POgb+duQOFbXZV9gAAAABJRU5ErkJggg=="); --glyph: var(--tag-ink); }
.pillar.errands.medium { width: 26px; height: 34px; --mask: url("data:image/png;base64,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"); }
.pillar.habits.medium { width: 32px; height: 25px; --mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABLCAYAAACP84LNAAAAAXNSR0IArs4c6QAAAGxlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAADYAAAAAQAAANgAAAABAAKgAgAEAAAAAQAAAGCgAwAEAAAAAQAAAEsAAAAAyy9BNQAAAAlwSFlzAAAhOAAAITgBRZYxYAAABQBJREFUeAHtXElr1kAYrlrFfaUIIoq1KK6gl1IV/VS8CILiQTyIWKyoqD/Ag/SgB1ERFxTBa29eimsVPXjTm2tdEEVF1OJ2cKn780ADacgkky/J5J0v88JDlpnMPPO8yWTmnXxfXZ0zp4BTwCngFHAKOAWcAmVUYFCNNnos2rUFWAK8BT4DzgwqcAd1/evDD2xbDdZd+qom9QnvOcDbHsH5gaVXx4AATQoH0BGXgNEGOJS6iigH0AkPgemlVijnxsc5gE74ACzPmUdpi9dxAJ3wC9heWpVybLiuA+gE4gRQnyOf0hWd1AF0wjVgXOmUyqnB1TiATngCzMyJk7LYAcqUbBI40x4PDAMGZ1NkbClTkeN6bK7wDJwxbwCuhifLPstJTgvQDnC8/RL4DfDusgnkvAewxhh32QdQcJuEjuO6X7oHeMfvAvjYxjXGxnQOU9l1ijSOGLoAG4XV5cwoqshocQOI3atx8b+gfSuA3C3pKGgIGN0EmjWY/UWe50AP8AngsQkbgUoqKSp6hmvXAN0pysjt0sMoOe4RPo88awG+nIuwaucBbBeHrxw2i7Q5YBU1rGSUcYEA5tU64BS41wvgr6TQgRTV3X8FaXz0JVhSB3C0s0MC8SgOHPX0AmEO4At5VNTFhtOSOIBhaSMv27QabEIBYeLz3OK0hWd8va4DrFqYOatwAOcC0kzHARdB2qqlyVsgHPYEtElTH3ziHMCR3ECBvCMpvUNqmAMaI68qJlHlAL7DNhdDKX2t31FEmANMhZiTtIBdS5ArwwqLkhQiLW+wQTzm7FaqHQQxj/MN7E+RSlSXl9cY//a97sUF5eOMdmJBdWtXW6+d076MH22gbN1owAZRk3DUfQIYnh0TKJgLMWW3yRBgPcB1g06AkdRc7ChK9ff/3N+bS032FDoPVHljerrwK+wKkIsNRamnAd71jJ9wMqP79CBrTdpltMoT39syLubMkAKvUY8nvLflolOi92qizIYaZks1YevFXGFMtMroHFCwuyX248uhyUaAsZuTwGPAmQEF+DQeArz+lFv2sxJvEtCq+wb4uXKf74BEXRDyizAG0BijDzaIx00iGPYnwRXAMK5f+2ez46gRNB8oGsRGzhLYjKUKvoknYkW/hCtoyG1gNmCTrVaQfao4L/L0NrD6CYQ9yv5z0p6AkeCsWqBqR5p44/j5OOAXOWpfmgMORHBvka4+v5bjjx+iBA+mSXLAOnD/o+CfuP9HOUZtBmrjmD4ocNyxFAfwAwTV0izbsBMQa6vAjEuYcWKHpRftgGbwvhDDvRvp/HA5sZmY5OwGK4azw2InOoTnIxPH3SaMo8JxQAOwEFgJzAWijJ82tgIcUIgyfjFxBgi7q2vp3FZRqvvIdNS4+LzzOZQWacPBinGRWrrT/W15gbZVALHGgFQ1Ix5/IyXucwmyHeBkTLzxV+ccG0sUMgknDj35+wf29ZkLn3fodAJInwMqQLXWiQt555kw9usUvAd4BdwH7gK9gLWWdjRU9DzAWuGDxDkfiPqNmapbcA4IKpniuJoZsXNACsHDLmVM6BGguuOD550DwlRMeY5R0S5NJzgHpBRbdTljQ8c0nOAcoFIwo/NtKCdqZcw5ICOho4pZhkSOvYP9P4+dA6KUyzBtGsrixMfvBE6MTIWiM2yKvUVRbP5nA3/d8gZg9+TMKeAUcAo4BZwCTgGngFOg5hT4D78+OboGHerQAAAAAElFTkSuQmCC"); }

/* Notification offer card: NotificationOfferCard.swift, mounted by NotificationOfferMount.swift */
.offer-card {
  position: absolute; left: 20px; right: 20px; bottom: 98px; z-index: 36; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-m);
  border-radius: var(--radius-l); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
.offer-card .offer-kind { display: flex; align-items: center; gap: var(--space-s); font: var(--caption); color: var(--ink-2); }
.offer-card .offer-kind .symbol { width: 14px; height: 15px; background: currentColor; -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat; mask: url("data:image/png;base64,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") center / contain no-repeat; }
.offer-card .offer-line { font: var(--body); color: var(--ink); margin: 0; }
.offer-card .offer-actions { display: flex; flex-direction: column; margin-top: 5px; }
.offer-card .offer-actions .button { width: 100%; }
.offer-card .offer-later { height: 44px; display: flex; align-items: center; justify-content: center; font: var(--body); color: var(--ink); background: none; border: none; }
.web { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.web main { max-width: 640px; margin: 0 auto; padding: 48px 22px 64px; }
.web .web-icon { display: block; width: 64px; height: 64px; border-radius: 14.4px; margin: 0 0 20px; }
.web h1 { font-size: 34px; line-height: 1.15; font-weight: 700; margin: 0 0 12px; }
.web .lead { color: rgba(235, 235, 245, .72); margin: 0 0 28px; }
.web .web-section { margin: 40px 0 0; }
.web .web-section > h2 { font: var(--title-2); margin: 0 0 12px; }
.web .card { background: #1C1C1E; border-radius: 22px; padding: 20px 22px; margin: 0 0 14px; }
.web .card h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.web .card p { color: rgba(235, 235, 245, .72); margin: 0; }
.web a { color: var(--mint-text); text-decoration: none; }
.web-signup { display: flex; flex-direction: column; gap: var(--space-s); margin: 0 0 12px; }
.web-signup input { height: 50px; border-radius: 25px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: var(--body); padding: 0 20px; outline: none; }
.web-signup input:focus { border-color: var(--ink-3); }
.web-signup input::placeholder { color: var(--ink-3); }
.web-signup button { height: 50px; border-radius: 25px; border: 0; background: var(--mint); color: var(--mint-ink); font: 600 17px/22px var(--font); padding: 0 24px; cursor: pointer; transition: opacity var(--m-short) var(--exit); }
.web-signup.is-sending button { opacity: var(--disabled); cursor: default; }
.web-signup-note { font: var(--caption); color: var(--ink-2); margin: 0; min-height: 20px; }
.web-signup-note.is-done { color: var(--ink); }
.web-signup-note.is-error { color: var(--ios-red); }
.web-shot { display: flex; justify-content: center; margin: 40px 0 0; }
.web-shot img { width: 100%; max-width: 300px; height: auto; display: block; border-radius: 42px; border: 1px solid var(--line); }
.web footer { max-width: 640px; margin: 0 auto; padding: 24px 22px 48px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 8px 18px; font: var(--caption); color: var(--ink-2); }
.web footer a { color: var(--ink-2); }
@media (min-width: 600px) {
  .web-signup { flex-direction: row; }
  .web-signup input { flex: 1; }
}
/* Full-width marketing pieces for metisagent.app (proposed, 11-09). No shipped counterpart: the shipped public pages are the 640px column in web.css.
   Colours come from tokens.css; the brand spectrum is the logo's own stops (work → network → craft → health). The only marketing-only token is --site-bezel.
   Directions set custom properties only, in site-a.css … site-d.css. Every piece holds at 390 wide with 16px gutters. */
:root {
  --site-bezel: #000000;
  --site-max: 1200px; --site-gutter: 16px; --site-band-space: 88px; --site-band-rule: none;
  --site-display: 700 clamp(44px, 7vw, 96px)/1.02 var(--font); --site-display-track: -0.03em;
  --site-h2: 700 clamp(34px, 4.6vw, 60px)/1.05 var(--font); --site-h2-track: -0.02em;
  --site-lede: 400 clamp(19px, 1.7vw, 23px)/1.45 var(--font);
  --site-tile: var(--surface); --site-tile-blur: none; --site-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  --site-spectrum: linear-gradient(90deg, var(--work), var(--network) 35%, var(--craft) 65%, var(--health));
  --site-signal-paint: none; --site-signal-ink: var(--ink); --site-glow: none; --stack-tilt: 0deg;
}
@media (min-width: 768px) { :root { --site-gutter: 32px; --site-band-space: 120px; } }
@media (min-width: 1200px) { :root { --site-gutter: 48px; --site-band-space: 152px; } }

.site { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: clip; }
.site a { color: inherit; text-decoration: none; }
.site-wrap { box-sizing: border-box; max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }

.site-nav { position: sticky; top: 0; z-index: 10; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--line-2); }
.site-nav .site-wrap { height: 60px; display: flex; align-items: center; gap: 24px; }
.site-brand { display: flex; align-items: center; gap: 10px; font: 600 19px/24px var(--font); margin-right: auto; }
.site-brand img { width: 30px; height: 30px; border-radius: 6.75px; }
.site-nav .links { display: none; gap: 24px; font: var(--caption); color: var(--ink-2); }
.site-nav .store-capsule { display: none; }
@media (min-width: 600px) { .site-nav .store-capsule { display: inline-flex; height: 36px; padding: 0 16px; font: var(--caption); font-weight: 600; } }
@media (min-width: 768px) { .site-nav .links { display: flex; } }

.site-hero { padding: calc(var(--site-band-space) * .8) 0 var(--site-band-space); }
.site-display { font: var(--site-display); letter-spacing: var(--site-display-track); margin: 0; max-width: 14ch; text-wrap: balance; }
.site-lede { font: var(--site-lede); color: var(--ink-2); margin: 24px 0 0; max-width: 36ch; text-wrap: pretty; }
.site-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.site-cta .web-signup { flex: 1 1 320px; max-width: 460px; margin: 0; }
.site-cycle { display: inline-grid; }
.site-cycle > span { grid-area: 1 / 1; opacity: 0; animation: site-cycle 9s var(--settle, ease) infinite; animation-delay: calc(var(--i, 0) * 3s); }
@keyframes site-cycle { 0% { opacity: 0; transform: translateY(.2em); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-.2em); } }

.site-band { padding: var(--site-band-space) 0; border-top: var(--site-band-rule); position: relative; isolation: isolate; }
.site-band.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--site-glow); pointer-events: none; }
.site-kicker { font: 600 15px/20px var(--font); color: var(--ink-2); margin: 0 0 16px; }
.site-h2 { font: var(--site-h2); letter-spacing: var(--site-h2-track); margin: 0; max-width: 16ch; text-wrap: balance; }
.site-body { font: var(--site-lede); color: var(--ink-2); margin: 20px 0 0; max-width: 40ch; text-wrap: pretty; }
.site-center { text-align: center; }
.site-center .site-h2, .site-center .site-body, .site-center .site-display, .site-center .site-lede { margin-left: auto; margin-right: auto; }
.site-center .site-cta { justify-content: center; }

.site-split { display: grid; gap: 56px; align-items: center; }
.site-split .media { display: flex; justify-content: center; }
@media (min-width: 900px) {
  .site-split { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .site-split .text { grid-column: 1 / span 5; }
  .site-split .media { grid-column: 7 / span 6; }
  .site-split.reverse .text { grid-column: 8 / span 5; grid-row: 1; }
  .site-split.reverse .media { grid-column: 1 / span 6; grid-row: 1; }
}

.site-phone { --w: 300px; flex: none; box-sizing: border-box; width: min(var(--w), 72vw); padding: 3%; background: var(--site-bezel); border-radius: 15.5% / 7.4%; box-shadow: 0 0 0 1px var(--glass-border), var(--site-shadow); }
.site-phone img { display: block; width: 100%; height: auto; border-radius: 13.3% / 6.1%; }
.site-phone .screens { display: grid; }
.site-phone .screens img { grid-area: 1 / 1; opacity: 0; transition: opacity 400ms var(--settle, ease); }
.site-phone .screens img.is-shown { opacity: 1; }
.site-phone .screens > picture { grid-area: 1 / 1; display: block; }

.site-stack { display: grid; justify-items: center; padding: 0 12%; }
.site-stack > .site-phone { grid-area: 1 / 1; }
.site-stack > .site-phone:nth-child(1) { z-index: 3; }
.site-stack > .site-phone:nth-child(2) { z-index: 2; transform: translateX(-42%) translateY(6%) scale(.84) rotate(calc(-1 * var(--stack-tilt))); }
.site-stack > .site-phone:nth-child(3) { z-index: 1; transform: translateX(42%) translateY(6%) scale(.84) rotate(var(--stack-tilt)); }
.site-pair { display: flex; align-items: flex-start; justify-content: center; gap: 4%; }
.site-pair > .site-phone { --w: 260px; width: min(var(--w), 44vw); }
.site-pair > .site-phone:nth-child(2) { margin-top: 12%; }

.site-noise { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-noise li { font: 600 clamp(26px, 3.6vw, 44px)/1.15 var(--font); letter-spacing: -0.02em; color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.site-noise li.signal { margin-top: 18px; text-decoration: none; color: var(--site-signal-ink); background: var(--site-signal-paint); -webkit-background-clip: text; background-clip: text; }

.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 48px; }
.site-tile { padding: 28px; border-radius: 28px; background: var(--site-tile); -webkit-backdrop-filter: var(--site-tile-blur); backdrop-filter: var(--site-tile-blur); border: 1px solid var(--line); }
.site-tile h3 { font: var(--title-2); margin: 12px 0 8px; }
.site-tile p { font: var(--body); color: var(--ink-2); margin: 0; }

.store-capsule { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 25px; box-shadow: inset 0 0 0 1px var(--line); font: 600 17px/22px var(--font); color: var(--ink); white-space: nowrap; }

.site-trust { list-style: none; margin: 40px 0 0; padding: 0; max-width: 720px; }
.site-trust li { padding: 18px 0; border-top: 1px solid var(--line); font: var(--site-lede); color: var(--ink); }
.site-center .site-trust { margin-left: auto; margin-right: auto; }

.site-story { display: grid; gap: 0; }
.site-story .sticky { display: none; }
.site-step { padding: 48px 0; }
.site-step .site-phone { margin-top: 32px; }
@media (min-width: 900px) {
  .site-story { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .site-story .steps { grid-column: 1 / span 5; }
  .site-story .sticky { display: flex; align-items: center; justify-content: center; grid-column: 7 / span 6; position: sticky; top: 12vh; height: 76vh; align-self: start; }
  .site-story .sticky .site-phone { --w: min(340px, 34vh); }
  .site-step { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .site-step .site-phone { display: none; }
}

.site-footer { border-top: 1px solid var(--line-2); padding: 32px 0 48px; }
.site-footer .site-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; font: var(--caption); color: var(--ink-2); }
.site-footer .owner { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .site-cycle > span { animation: none; }
  .site-cycle > span:first-child { opacity: 1; }
  .site-phone .screens img { transition: none; }
}
/* Direction E · Hussam's combination (11-09). Dark. D's sticky phone story and type scale; the app's aurora (MetisAuroraWords) behind the hero and on the signal line.
   Aurora as in the app: Theme.Brand.order work → network → craft → health, drawn twice and closed on work, flowing left to right once every 4s (MetisAuroraMetrics.loopSeconds), with a blurred copy at 0.35 for the glow. The hero copy wanders instead of sweeping: two layers on unrelated periods (11, 13, 17, 23s) so it never visibly repeats. Page sets data-theme="dark". */
:root {
  --site-display: 700 clamp(44px, 6.6vw, 88px)/1.02 var(--font);
  --site-h2: 700 clamp(32px, 4vw, 52px)/1.06 var(--font);
  --aurora-loop: 4s;
  --aurora: linear-gradient(90deg, var(--work), var(--network), var(--craft), var(--health), var(--work), var(--network), var(--craft), var(--health), var(--work));
  --site-signal-ink: transparent; --site-signal-paint: var(--aurora);
}
@keyframes aurora-flow { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.site-noise li.signal { background-size: 200% 100%; animation: aurora-flow var(--aurora-loop) linear infinite; }
.aurora { overflow: hidden; }
.aurora::before, .aurora::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: var(--aurora); background-size: 300% 100%; filter: blur(90px); }
.aurora::before { left: -10%; right: -10%; top: 14%; height: 56%; opacity: .35;
  animation: aurora-sway 11s ease-in-out infinite alternate, aurora-drift-a 17s ease-in-out infinite alternate; }
.aurora::after { left: 5%; right: 15%; top: 30%; height: 46%; opacity: .25;
  animation: aurora-sway 13s ease-in-out -5s infinite alternate-reverse, aurora-drift-b 23s ease-in-out -9s infinite alternate; }
@keyframes aurora-sway { 0% { background-position: 0% 0; } 35% { background-position: 60% 0; } 60% { background-position: 25% 0; } 100% { background-position: 100% 0; } }
@keyframes aurora-drift-a { 0% { transform: translate(-6%, -4%) scale(1) rotate(-3deg); } 50% { transform: translate(4%, 6%) scale(1.15) rotate(2deg); } 100% { transform: translate(8%, -2%) scale(.95) rotate(5deg); } }
@keyframes aurora-drift-b { 0% { transform: translate(10%, 4%) scale(1.1) rotate(4deg); } 40% { transform: translate(-8%, -6%) scale(.9) rotate(-2deg); } 100% { transform: translate(2%, 8%) scale(1.2) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .site-noise li.signal { animation: none; } }
.site-band .site-h2 .line { display: block; }
.site-band .site-h2:has(.line) { max-width: none; }
@media (min-width: 900px) { .site-story .site-step { min-height: 70vh; } }