:root {
    color-scheme: dark;
    --bg: #111318;
    --bg-2: #15171d;
    --surface: #1b1f27;
    --surface-2: #202631;
    --surface-3: #282f3a;
    --border: rgba(226, 232, 240, 0.105);
    --border-strong: rgba(226, 232, 240, 0.18);
    --ink: #f4f1e9;
    --ink-soft: #d8d1c3;
    --muted: #8e98a8;
    --muted-2: #7f8898;
    --accent: #c9a84a;
    --accent-ink: #19150a;
    --ok: #65c08d;
    --warn: #d8a657;
    --danger: #d9826b;
    --cool: #9fb1d8;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --pad: var(--space-18);
    --gap: var(--space-lg);
    --space-hairline: 1px;
    --space-2xs: 2px;
    --space-3xs: 3px;
    --space-xs: 4px;
    --space-5: 5px;
    --space-6: 6px;
    --space-7: 7px;
    --space-sm: 8px;
    --space-9: 9px;
    --space-10: 10px;
    --space-11: 11px;
    --space-md: 12px;
    --space-13: 13px;
    --space-14: 14px;
    --space-lg: 16px;
    --space-18: 18px;
    --space-22: 22px;
    --space-xl: 24px;
    --tap: 48px;
    --ease: cubic-bezier(.2, .9, .2, 1);
  }

  [data-density="compact"] {
    --pad: var(--space-14);
    --gap: var(--space-10);
    --radius-xl: 24px;
    --radius-lg: 18px;
  }

  [data-density="generous"] {
    --pad: var(--space-22);
    --gap: var(--space-18);
    --radius-xl: 32px;
    --radius-lg: 26px;
  }

  [data-accent="sage"] { --accent: #9fbd8a; --accent-ink: #10150c; }
  [data-accent="ember"] { --accent: #d89757; --accent-ink: #190f07; }
  [data-accent="tide"] { --accent: #8cb8cf; --accent-ink: #071218; }
  [data-accent="rose"] { --accent: #d59c91; --accent-ink: #1b0d0b; }
  [data-accent="gold"] { --accent: #c9a84a; --accent-ink: #19150a; }

  [data-mood="dawn"] {
    --bg: #14151a;
    --bg-2: #1a1715;
    --surface: #211f22;
    --surface-2: #2b2727;
    --surface-3: #342f2b;
    --ink: #fff4e2;
    --ink-soft: #decfb7;
    --muted: #9d9388;
  }

  * { box-sizing: border-box; }

  html {
    min-height: 100%;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
    margin: 0;
    background:
      radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34rem),
      radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30rem),
      radial-gradient(circle at 95% 12%, rgba(104, 113, 129, 0.2), transparent 28rem),
      radial-gradient(circle at 0% 82%, rgba(101, 192, 141, 0.08), transparent 24rem),
      radial-gradient(circle at 100% 84%, rgba(159, 177, 216, 0.1), transparent 28rem),
      linear-gradient(180deg, var(--bg), var(--bg-2) 52%, #101218 100%);
    color: var(--ink);
    font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    display: flex;
    justify-content: center;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }

  button, input, textarea {
    font: inherit;
  }

  button {
    border: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  a {
    color: inherit;
  }

  .app-shell {
    width: min(100%, 640px);
    min-height: 100dvh;
    padding: max(env(safe-area-inset-top), var(--space-18)) var(--space-lg) max(env(safe-area-inset-bottom), var(--space-18));
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    position: relative;
    overflow-x: clip;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-14);
    align-items: start;
    padding: var(--space-xs) var(--space-2xs) 0;
  }

  .mark {
    display: flex;
    gap: var(--space-11);
    align-items: center;
  }

  .loom-glyph {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-md);
    background: #15171c;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: grid;
    place-items: center;
    transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
  }

  .loom-glyph svg {
    width: 24px;
    height: 24px;
  }

  .loom-glyph:active {
    transform: scale(0.97);
  }

  @media (hover: hover) {
    .loom-glyph:hover,
    .primary-action:not(:disabled):hover,
    .icon-action:hover,
    .ghost-action:hover {
      transform: translateY(-1px);
    }
  }

  .kicker {
    display: block;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    margin-bottom: var(--space-hairline);
  }

  h1 {
    margin: 0;
    font-size: clamp(26px, 8vw, 38px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 720;
  }

  .mode-chip {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-7) var(--space-10);
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.035);
    display: inline-flex;
    gap: var(--space-7);
    align-items: center;
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0.015em;
    white-space: nowrap;
  }

  .pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent);
  }

  .tabs {
    position: sticky;
    top: max(env(safe-area-inset-top), 10px);
    z-index: 20;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(22px);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  .tab {
    min-height: 44px;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 14px;
    font-weight: 690;
    letter-spacing: 0.01em;
    position: relative;
    transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
  }

  .tab svg {
    width: 17px;
    height: 17px;
  }

  .tab[aria-selected="true"] {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    color: color-mix(in srgb, var(--accent) 86%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
  }

  .tab:active {
    transform: scale(0.985);
  }

  main {
    display: grid;
    gap: var(--gap);
    padding-bottom: calc(var(--tap) + var(--space-xl) + var(--space-xs));
  }

  .view {
    display: none;
    animation: view-in 260ms var(--ease);
  }

  .view.active {
    display: grid;
    gap: var(--gap);
  }

  @keyframes view-in {
    from { opacity: 0; transform: translateY(8px) scale(0.994); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .capture-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%),
      var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .capture-head {
    padding: var(--pad) var(--pad) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    align-items: flex-start;
  }

  .capture-title {
    display: grid;
    gap: var(--space-3xs);
  }

  .capture-title strong {
    font-size: 18px;
    letter-spacing: -0.025em;
  }

  .capture-title span,
  .soft-copy {
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0;
  }

  .queue-pill {
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: var(--space-5) var(--space-9);
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.035);
    font-size: 14px;
    font-weight: 620;
    white-space: nowrap;
  }

  .queue-pill.offline .pulse-dot {
    background: var(--warn);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 16%, transparent);
  }

  .composer {
    padding: var(--space-14) var(--pad) var(--pad);
    display: grid;
    gap: var(--space-md);
  }

  .thought-field {
    position: relative;
    border-radius: calc(var(--radius-xl) - var(--space-sm));
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015)),
      #171b22;
    border: 1px solid var(--border);
    overflow: hidden;
  }

  textarea {
    width: 100%;
    min-height: clamp(172px, 32dvh, 260px);
    border: 0;
    resize: vertical;
    background: transparent;
    color: var(--ink);
    padding: var(--pad);
    outline: none;
    font-size: clamp(20px, 5.8vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 520;
    caret-color: var(--accent);
    /* Override inherited `text-wrap: pretty` from body: in an editable field it
       re-balances earlier lines on every keystroke, making words jump between
       lines as you type. Greedy wrapping keeps prior lines stable. */
    text-wrap: wrap;
  }

  textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
  }

  .field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-10);
    padding: 0 var(--space-14) var(--space-14);
    color: var(--muted);
    font-size: 14px;
  }

  .field-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 0 0 auto;
  }

  .field-mic {
    width: 40px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
  }

  .char-ring {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: conic-gradient(var(--accent) var(--progress, 0%), rgba(255, 255, 255, 0.09) 0);
    display: grid;
    place-items: center;
  }

  .char-ring::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: inherit;
    background: #171b22;
  }

  .capture-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .primary-action,
  .icon-action,
  .ghost-action {
    min-height: var(--tap);
    border-radius: var(--radius-md);
    transition: transform 140ms var(--ease), opacity 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
  }

  .primary-action {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 96%, white 10%), var(--accent));
    color: var(--accent-ink);
    font-weight: 760;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-9);
    box-shadow: var(--shadow-md);
  }

  .primary-action:disabled {
    opacity: 0.48;
  }

  .primary-action:not(:disabled) {
    cursor: pointer;
  }

  .primary-action svg,
  .icon-action svg,
  .ghost-action svg {
    width: 18px;
    height: 18px;
  }

  .primary-action:active,
  .icon-action:active,
  .ghost-action:active {
    transform: translateY(1px) scale(0.99);
  }

  .icon-action {
    width: var(--tap);
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
  }

  .icon-action.listening {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .status-line {
    min-height: 22px;
    color: var(--muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .status-line:not(:empty) {
    min-height: 42px;
    padding: var(--space-10) var(--space-13);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
      color-mix(in srgb, var(--surface-2) 72%, transparent);
    box-shadow: var(--shadow-md);
    animation: notice-in 180ms var(--ease);
  }

  @keyframes notice-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .status-line.ok { color: var(--ok); }
  .status-line.warn { color: var(--warn); }

  .recent-panel,
  .digest-panel,
  .tweak-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    overflow: hidden;
  }

  .panel-head {
    padding: var(--space-14) var(--pad) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border);
  }

  .panel-head h2 {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 760;
  }

  .panel-head .count {
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 620;
  }

  .recent-list {
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
  }

  .recent-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    padding: var(--space-14) var(--pad);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .recent-item:last-child {
    border-bottom: 0;
  }

  .time-chip {
    width: 58px;
    color: var(--muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding-top: var(--space-2xs);
  }

  .recent-copy {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
  }

  .recent-copy p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.34;
  }

  .recent-meta {
    display: flex;
    gap: var(--space-7);
    flex-wrap: wrap;
    color: var(--muted-2);
    font-size: 14px;
  }

  .mini-pill {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-2xs) var(--space-7);
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.03);
  }

  .empty-state {
    padding: var(--space-22) var(--pad);
    color: var(--muted);
    display: grid;
    gap: var(--space-sm);
  }

  .empty-state strong {
    color: var(--ink-soft);
    font-size: 17px;
  }

  .digest-hero {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-strong);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
      var(--surface);
    box-shadow: var(--shadow);
    padding: var(--pad);
    display: grid;
    gap: var(--gap);
  }

  .date-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: end;
  }

  .date-row label {
    display: grid;
    gap: var(--space-5);
  }

  .label-text {
    color: var(--muted);
    font-size: 14px;
    font-weight: 690;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  input[type="date"] {
    min-height: 46px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink);
    padding: 0 var(--space-md);
    outline: none;
  }

  .digest-title {
    display: grid;
    gap: var(--space-5);
  }

  .digest-title h2 {
    margin: 0;
    font-size: clamp(27px, 7vw, 36px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  .digest-title p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 46ch;
  }

  .digest-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .summary-card {
    min-width: 0;
    min-height: 78px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    padding: var(--space-md);
    display: grid;
    align-content: space-between;
    gap: var(--space-sm);
  }

  @media (min-width: 600px) {
    .digest-summary {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .summary-card strong {
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .summary-card span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .group-stack {
    display: grid;
    gap: var(--gap);
  }

  .digest-group {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .group-header {
    padding: var(--space-14) var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border);
  }

  .group-name {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    min-width: 0;
  }

  .status-symbol {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
    flex: 0 0 auto;
  }

  .status-symbol svg {
    width: 17px;
    height: 17px;
  }

  .group-name h3 {
    margin: 0;
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .group-note {
    color: var(--muted);
    font-size: 14px;
    margin-top: var(--space-hairline);
  }

  .group-count {
    color: var(--muted);
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
  }

  .digest-cards {
    display: grid;
    gap: var(--space-hairline);
  }

  .work-card {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.018);
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    transition: background 160ms var(--ease);
  }

  .digest-group.is-empty {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }

  .digest-group.is-empty .group-header {
    border-bottom: 0;
  }

  .digest-group.is-empty .status-symbol,
  .digest-group.is-empty .group-count {
    opacity: 0.68;
  }

  .work-card:last-child {
    border-bottom: 0;
  }

  .loom-glyph:focus-visible,
  .view:focus-visible,
  .tab:focus-visible,
  .primary-action:focus-visible,
  .icon-action:focus-visible,
  .ghost-action:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, white);
    outline-offset: 2px;
  }

  .work-card:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .work-card-main {
    width: 100%;
    text-align: left;
    padding: var(--space-14) var(--pad);
    color: inherit;
    display: grid;
    gap: var(--space-sm);
  }

  .card-topline {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: flex-start;
  }

  .card-title {
    font-weight: 690;
    color: var(--ink-soft);
    line-height: 1.24;
  }

  .state-pill {
    border-radius: 999px;
    border: 1px solid currentColor;
    color: var(--muted);
    padding: var(--space-2xs) var(--space-7);
    font-size: 14px;
    font-weight: 760;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .card-state {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .state-pill.ok { color: var(--ok); }
  .state-pill.warn { color: var(--warn); }
  .state-pill.cool { color: var(--accent); }

  .card-meta {
    color: var(--muted);
    font-size: 14px;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .card-detail {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.42;
    padding: 0 var(--pad) var(--space-14);
    opacity: 1;
    transform: translateY(0);
  }

  .artifact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--accent);
    font-weight: 650;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 14px;
    min-height: 46px;
  }

  .artifact-slot {
    margin-top: var(--space-sm);
  }

  .floating-controls {
    position: fixed;
    inset: auto var(--space-lg) max(env(safe-area-inset-bottom), var(--space-lg)) var(--space-lg);
    z-index: 30;
    pointer-events: none;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }

  .floating-controls.revealed {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .control-cluster {
    width: min(100%, 608px);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-10);
    pointer-events: none;
  }

  .floating-controls.revealed .control-cluster {
    pointer-events: auto;
  }

  .ghost-action {
    min-width: 52px;
    padding: 0 var(--space-14);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    backdrop-filter: blur(18px);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-md);
  }

  .tweak-panel {
    position: fixed;
    z-index: 40;
    inset: auto var(--space-lg) calc(max(env(safe-area-inset-bottom), var(--space-lg)) + var(--tap) + var(--space-lg)) var(--space-lg);
    margin: 0 auto;
    width: min(calc(100% - (var(--space-lg) * 2)), 608px);
    background: color-mix(in srgb, var(--surface-2) 94%, transparent);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow);
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms var(--ease);
  }

  .tweak-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .tweak-body {
    padding: var(--pad);
    display: grid;
    gap: var(--gap);
  }

  .tweak-row {
    display: grid;
    gap: var(--space-9);
  }

  .segmented,
  .swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .segmented button,
  .swatch,
  .toggle-button {
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink-soft);
    padding: 0 var(--space-md);
    font-size: 14px;
    font-weight: 650;
  }

  .segmented button.active,
  .toggle-button.active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }

  .swatch {
    width: 46px;
    padding: 0;
    background: var(--swatch);
  }

  .swatch.active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 30%, transparent);
    border-color: color-mix(in srgb, var(--swatch) 80%, white);
  }

  @media (min-width: 680px) {
    .app-shell {
      padding-left: var(--space-22);
      padding-right: var(--space-22);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }