@layer tokens, base, layout, components, app;

/* docs/css/tokens.css */
@layer tokens {
  @layer tokens, base, layout, components, app;
  @layer tokens {
    :root {
      --color-bg: #fbf7f1;
      --color-bg-elevated: #ffffff;
      --color-bg-sunken: #f1ebe0;
      --color-fg: #2a1f17;
      --color-fg-muted: #6b5a4a;
      --color-fg-subtle: #9b8a78;
      --color-border: #e8dfd0;
      --color-border-strong: #d2c4ac;
      --color-accent: #b34a1c;
      --color-accent-fg: #ffffff;
      --color-accent-soft: #f4dcc8;
      --color-success: #5e7a3a;
      --color-warning: #b8861a;
      --color-danger: #9a2a2a;
      --color-focus-ring: #9a4a1a;
      --font-display:
        "Source Serif 4",
        "Lora",
        "Iowan Old Style",
        Georgia,
        serif;
      --font-body:
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
      --text-xs: 0.75rem;
      --text-sm: 0.875rem;
      --text-md: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.375rem;
      --text-2xl: 1.75rem;
      --text-3xl: 2.25rem;
      --leading-tight: 1.15;
      --leading-snug: 1.3;
      --leading-normal: 1.5;
      --leading-relaxed: 1.7;
      --tracking-tight: -0.01em;
      --tracking-wide: 0.04em;
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 14px;
      --radius-pill: 999px;
      --shadow-sm: 0 1px 2px rgba(42, 31, 23, 0.06);
      --shadow-lg: 0 12px 32px rgba(42, 31, 23, 0.12);
      --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
      --dur-fast: 120ms;
      --dur-base: 160ms;
      --container-narrow: 40rem;
      --container-base: 60rem;
      --container-wide: 80rem;
      --z-toast: 50;
      --z-card-deco-back: 1;
      --z-card-deco: 2;
      --z-card-toolbar: 3;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #1a140e;
        --color-bg-elevated: #221a13;
        --color-bg-sunken: #15100a;
        --color-fg: #f4ecdf;
        --color-fg-muted: #b8a48c;
        --color-fg-subtle: #7a6856;
        --color-border: #2f2519;
        --color-border-strong: #4a3a28;
        --color-accent: #e07a4a;
        --color-accent-fg: #1a140e;
        --color-accent-soft: #3a2418;
        --color-success: #a8c47a;
        --color-warning: #d4a642;
        --color-danger: #d66060;
        --color-focus-ring: #c87a4a;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
      }
    }
    :root[data-theme=dark] {
      --color-bg: #1a140e;
      --color-bg-elevated: #221a13;
      --color-bg-sunken: #15100a;
      --color-fg: #f4ecdf;
      --color-fg-muted: #b8a48c;
      --color-fg-subtle: #7a6856;
      --color-border: #2f2519;
      --color-border-strong: #4a3a28;
      --color-accent: #e07a4a;
      --color-accent-fg: #1a140e;
      --color-accent-soft: #3a2418;
      --color-success: #a8c47a;
      --color-warning: #d4a642;
      --color-danger: #d66060;
      --color-focus-ring: #c87a4a;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
    }
    :root[data-theme=light] {
      --color-bg: #fbf7f1;
      --color-bg-elevated: #ffffff;
      --color-bg-sunken: #f1ebe0;
      --color-fg: #2a1f17;
      --color-fg-muted: #6b5a4a;
      --color-fg-subtle: #9b8a78;
      --color-border: #e8dfd0;
      --color-border-strong: #d2c4ac;
      --color-accent: #b34a1c;
      --color-accent-fg: #ffffff;
      --color-accent-soft: #f4dcc8;
      --color-success: #5e7a3a;
      --color-warning: #b8861a;
      --color-danger: #9a2a2a;
      --color-focus-ring: #9a4a1a;
      --shadow-sm: 0 1px 2px rgba(42, 31, 23, 0.06);
      --shadow-lg: 0 12px 32px rgba(42, 31, 23, 0.12);
    }
    :root[data-theme=sepia] {
      --color-bg: #f4ead5;
      --color-bg-elevated: #fbf2dd;
      --color-bg-sunken: #e8dcbe;
      --color-fg: #3a2a14;
      --color-fg-muted: #7a5a3a;
      --color-fg-subtle: #a88860;
      --color-border: #d8c8a4;
      --color-border-strong: #b8a478;
      --color-accent: #9c5a1c;
      --color-accent-fg: #ffffff;
      --color-accent-soft: #ead4b0;
      --color-success: #6e8a3e;
      --color-warning: #c8901a;
      --color-danger: #a83a2a;
      --color-focus-ring: #7a4a1a;
      --shadow-sm: 0 1px 2px rgba(58, 42, 20, 0.10);
      --shadow-lg: 0 12px 32px rgba(58, 42, 20, 0.18);
    }
    :root[data-theme=forest] {
      --color-bg: #1d2a23;
      --color-bg-elevated: #243328;
      --color-bg-sunken: #161e19;
      --color-fg: #e6efe1;
      --color-fg-muted: #a8b8a3;
      --color-fg-subtle: #7a8a78;
      --color-border: #324538;
      --color-border-strong: #4a5e4f;
      --color-accent: #7fb069;
      --color-accent-fg: #1d2a23;
      --color-accent-soft: #2c4230;
      --color-success: #9bc77a;
      --color-warning: #d4a642;
      --color-danger: #ef8585;
      --color-focus-ring: #a0c890;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
    }
    :root[data-theme=ocean] {
      --color-bg: #0e2333;
      --color-bg-elevated: #15304a;
      --color-bg-sunken: #091826;
      --color-fg: #dceaf2;
      --color-fg-muted: #9ab4c4;
      --color-fg-subtle: #5d7a8e;
      --color-border: #1d3a52;
      --color-border-strong: #2c5070;
      --color-accent: #5dbcd2;
      --color-accent-fg: #0e2333;
      --color-accent-soft: #1d3a4a;
      --color-success: #6dc89a;
      --color-warning: #e0b34a;
      --color-danger: #e07878;
      --color-focus-ring: #7dd0e6;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62);
    }
    :root[data-theme=summer] {
      --color-bg: #fff8df;
      --color-bg-elevated: #fffdf5;
      --color-bg-sunken: #f3edc7;
      --color-fg: #24352e;
      --color-fg-muted: #587166;
      --color-fg-subtle: #60766b;
      --color-border: #d8e5ce;
      --color-border-strong: #9ccdb5;
      --color-accent: #c8483b;
      --color-accent-fg: #ffffff;
      --color-accent-soft: #ffe1d3;
      --color-success: #2f7556;
      --color-warning: #8a5a08;
      --color-danger: #b33a3a;
      --color-focus-ring: #0f7183;
      --shadow-sm: 0 1px 3px rgba(36, 83, 66, 0.10);
      --shadow-lg: 0 14px 36px rgba(36, 83, 66, 0.18);
    }
    @media (prefers-reduced-motion: reduce) {
      :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
      }
    }
    @media (min-width: 64rem) {
      :root {
        --text-md: 1.0625rem;
        --text-lg: 1.25rem;
        --text-xl: 1.5rem;
        --text-2xl: 2rem;
        --text-3xl: 2.75rem;
      }
    }
  }
}

/* docs/css/base.css */
@layer base {
  @layer base {
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
    }
    :where([hidden]) {
      display: none !important;
    }
    html {
      -webkit-text-size-adjust: 100%;
      max-width: 100%;
      overflow-x: clip;
    }
    body {
      font-family: var(--font-body);
      font-size: var(--text-md);
      line-height: var(--leading-normal);
      color: var(--color-fg);
      background: var(--color-bg);
      min-height: 100vh;
      min-height: 100dvh;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    h1,
    h2,
    h3,
    h4 {
      font-family: var(--font-display);
      font-weight: 600;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--color-fg);
    }
    h1 {
      font-size: var(--text-3xl);
    }
    h2 {
      font-size: var(--text-2xl);
    }
    h3 {
      font-size: var(--text-xl);
    }
    h4 {
      font-size: var(--text-lg);
    }
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    ::selection {
      background: var(--color-accent-soft);
      color: var(--color-fg);
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition: none !important;
        animation: none !important;
      }
    }
  }
}

/* docs/css/layout.css */
@layer layout {
  @layer layout {
    .stack-0 {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .stack-1 {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }
    .stack-2 {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .stack-3 {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .stack-4 {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .stack-6 {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }
    .stack-8 {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }
    .stack-10 {
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
    }
    .stack-12 {
      display: flex;
      flex-direction: column;
      gap: var(--space-12);
    }
    .stack-16 {
      display: flex;
      flex-direction: column;
      gap: var(--space-16);
    }
    .cluster-1 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1);
      align-items: center;
    }
    .cluster-2 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-items: center;
    }
    .cluster-3 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
    }
    .cluster-4 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      align-items: center;
    }
    .cluster-6 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-6);
      align-items: center;
    }
    .grid-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
      gap: var(--space-6);
    }
    .container-narrow {
      max-width: var(--container-narrow);
      margin-inline: auto;
      padding-inline: var(--space-4);
    }
    .container-base {
      max-width: var(--container-base);
      margin-inline: auto;
      padding-inline: var(--space-4);
    }
    .container-wide {
      max-width: var(--container-wide);
      margin-inline: auto;
      padding-inline: var(--space-4);
    }
    .divider {
      border: 0;
      border-top: 1px solid var(--color-border);
      margin-block: var(--space-4);
    }
  }
}

/* docs/css/components.css */
@layer components {
  @layer components {
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding-inline: var(--space-4);
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: var(--text-md);
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
      user-select: none;
    }
    .btn[disabled],
    .btn[aria-disabled=true] {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .btn-primary {
      background: var(--color-accent);
      color: var(--color-accent-fg);
    }
    .btn-primary:hover {
      background: var(--color-focus-ring);
    }
    .btn-secondary {
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      border-color: var(--color-border-strong);
    }
    .btn-secondary:hover {
      border-color: var(--color-accent);
    }
    .btn-ghost {
      background: transparent;
      color: var(--color-fg);
    }
    .btn-ghost:hover {
      background: var(--color-accent-soft);
    }
    .btn-sm {
      min-height: 32px;
      padding-inline: var(--space-3);
      font-size: var(--text-sm);
    }
    .btn-md {
      min-height: 44px;
    }
    .btn-lg {
      min-height: 52px;
      padding-inline: var(--space-6);
      font-size: var(--text-lg);
    }
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--color-fg-muted);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .icon-btn:hover {
      background: var(--color-accent-soft);
      color: var(--color-fg);
    }
    .icon-btn.danger {
      color: var(--color-danger);
    }
    .icon-btn.danger:hover {
      background: var(--color-accent-soft);
    }
    .icon-btn-sm {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-sm);
    }
    .input,
    .select,
    textarea.input {
      display: block;
      width: 100%;
      min-height: 44px;
      padding: var(--space-2) var(--space-3);
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      font: inherit;
      font-size: var(--text-md);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-md);
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    textarea.input {
      min-height: 6rem;
      resize: vertical;
      line-height: var(--leading-snug);
    }
    .input::placeholder,
    .select::placeholder {
      color: var(--color-fg-subtle);
    }
    .input:focus-visible,
    .select:focus-visible,
    textarea.input:focus-visible {
      border-color: var(--color-accent);
      outline-color: var(--color-focus-ring);
    }
    .input[aria-invalid=true],
    .select[aria-invalid=true],
    textarea.input[aria-invalid=true] {
      border-color: var(--color-danger);
    }
    .label {
      display: block;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-fg-muted);
      margin-block-end: var(--space-1);
    }
    .checkbox {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 1.5px solid var(--color-border-strong);
      border-radius: var(--radius-sm);
      background: var(--color-bg-elevated);
      display: inline-grid;
      place-content: center;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .checkbox:checked {
      background: var(--color-accent);
      border-color: var(--color-accent);
    }
    .checkbox:checked::after {
      content: "";
      width: 12px;
      height: 6px;
      border-left: 2px solid var(--color-accent-fg);
      border-bottom: 2px solid var(--color-accent-fg);
      transform: rotate(-45deg) translate(1px, -1px);
    }
    .checkbox:focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-pill);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      background: var(--color-bg-sunken);
      color: var(--color-fg-muted);
      border: 1px solid var(--color-border);
    }
    .badge-accent {
      background: var(--color-accent-soft);
      color: var(--color-accent);
      border-color: transparent;
    }
    .badge-success {
      background: color-mix(in oklab, var(--color-success) 12%, transparent);
      color: var(--color-success);
      border-color: transparent;
    }
    .badge-warning {
      background: color-mix(in oklab, var(--color-warning) 12%, transparent);
      color: var(--color-warning);
      border-color: transparent;
    }
    .badge-danger {
      background: color-mix(in oklab, var(--color-danger) 12%, transparent);
      color: var(--color-danger);
      border-color: transparent;
    }
    .card {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .card-pad-sm {
      padding: var(--space-3);
    }
    .card-pad-md {
      padding: var(--space-4);
    }
    .card-pad-lg {
      padding: var(--space-6);
    }
    .icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .toast {
      position: fixed;
      inset: auto 0 var(--space-6) 0;
      margin-inline: auto;
      width: max-content;
      max-width: 90vw;
      padding: var(--space-3) var(--space-6);
      background: var(--color-fg);
      color: var(--color-bg);
      border-radius: var(--radius-pill);
      font-size: var(--text-sm);
      font-weight: 500;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
      z-index: var(--z-toast);
      pointer-events: none;
    }
    .toast.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .toast [data-toast-action] {
      min-width: 44px;
      min-height: 44px;
      margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) calc(var(--space-2) * -1) var(--space-3);
      padding-inline: var(--space-3);
      border: 1px solid color-mix(in oklab, var(--color-bg) 35%, transparent);
      border-radius: var(--radius-pill);
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: 750;
      cursor: pointer;
    }
    .toast-error {
      background: var(--color-danger);
      color: var(--color-accent-fg);
    }
    .aria-live {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .recipe-card {
      display: flex;
      flex-direction: column;
    }
    .recipe-card .card-stripe {
      height: 4px;
      background: var(--color-accent);
    }
    .recipe-card.complete .card-stripe {
      background: var(--color-success);
    }
    .recipe-card .card-body {
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      flex: 1;
    }
    .recipe-card .card-category {
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-muted);
      font-weight: 600;
    }
    .recipe-card .card-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      line-height: var(--leading-tight);
      color: var(--color-fg);
    }
    .recipe-card .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .recipe-card .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px var(--space-2);
      border-radius: var(--radius-pill);
      background: var(--color-bg-sunken);
    }
    .recipe-card .card-ingredients {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .recipe-card .ingredients-label {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-fg-subtle);
    }
    .recipe-card .ingredient-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1);
    }
    .recipe-card .ing-tag {
      padding: 2px var(--space-2);
      border-radius: var(--radius-pill);
      background: var(--color-bg-sunken);
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
    }
    .recipe-card .ing-tag.have {
      background: color-mix(in oklab, var(--color-success) 18%, transparent);
      color: var(--color-success);
    }
    .recipe-card .ing-tag.missing {
      background: color-mix(in oklab, var(--color-danger) 12%, transparent);
      color: var(--color-danger);
    }
    .recipe-card .card-footer {
      display: flex;
      align-items: center;
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--color-border);
      background: var(--color-bg-sunken);
    }
    .recipe-card .card-status {
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }
    .recipe-card .status-dot {
      width: 8px;
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--color-fg-subtle);
    }
    .recipe-card.complete .status-dot {
      background: var(--color-success);
    }
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-12) var(--space-4);
      color: var(--color-fg-muted);
      text-align: center;
      grid-column: 1 / -1;
    }
    .empty-state strong {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: var(--color-fg);
    }
    .detail-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      gap: var(--space-3);
      padding: var(--space-4);
      background: var(--color-bg-sunken);
      border-radius: var(--radius-md);
      margin-block: var(--space-4);
    }
    .detail-meta-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .detail-meta-item .k {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-fg-subtle);
    }
    .detail-meta-item .v {
      font-size: var(--text-md);
      color: var(--color-fg);
      font-weight: 500;
    }
    .recipe-detail {
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }
    .recipe-detail h2 {
      font-family: var(--font-display);
    }
    .recipe-detail-body {
      display: grid;
      gap: var(--space-8);
      grid-template-columns: 1fr;
    }
    @media (min-width: 64rem) {
      .recipe-detail-body {
        grid-template-columns: minmax(0, 18rem) 1fr;
      }
    }
    .detail-ing-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .detail-ing-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out);
    }
    .detail-ing-item:hover {
      background: var(--color-bg-sunken);
    }
    .detail-ing-item.missing-item {
      color: var(--color-fg-muted);
    }
    .detail-ing-check {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--color-border-strong);
      color: var(--color-accent);
    }
    .detail-ing-check.have {
      background: var(--color-accent);
      color: var(--color-accent-fg);
      border-color: var(--color-accent);
    }
    .detail-step {
      display: grid;
      grid-template-columns: 2rem 1fr;
      gap: var(--space-3);
      padding-block: var(--space-2);
    }
    .detail-step .step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      color: var(--color-accent);
      font-weight: 600;
    }
    .detail-step .step-text {
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
      color: var(--color-fg);
    }
    .detail-nutrition {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      gap: var(--space-3);
    }
    .nutrition-cell {
      background: var(--color-bg-sunken);
      padding: var(--space-3);
      border-radius: var(--radius-md);
    }
    .nutrition-cell .k {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-fg-subtle);
    }
    .nutrition-cell .v {
      font-size: var(--text-md);
      color: var(--color-fg);
      font-weight: 500;
    }
    .recipe-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      padding: var(--space-6);
    }
    .recipe-form .form-row {
      display: grid;
      gap: var(--space-3);
      grid-template-columns: 1fr;
    }
    @media (min-width: 40rem) {
      .recipe-form .form-row-2 {
        grid-template-columns: 1fr 1fr;
      }
    }
    .recipe-form .form-error {
      color: var(--color-danger);
      font-size: var(--text-sm);
      margin-block-start: var(--space-1);
    }
    .ing-row,
    .step-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .step-row .step-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      color: var(--color-accent);
      font-weight: 600;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }
    .cart-shell {
      max-width: 760px;
      margin-inline: auto;
      padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      overflow: visible;
    }
    .cart-empty {
      padding: var(--space-6);
      text-align: center;
      color: var(--color-fg-muted);
    }
    .shopping-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .cart-row {
      min-height: 44px;
      padding: var(--space-1) var(--space-2);
      border-bottom: 1px solid var(--color-border);
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto 34px;
      gap: var(--space-2);
      align-items: center;
    }
    .cart-row:last-child {
      border-bottom: 0;
    }
    .cart-row.is-completed {
      opacity: 0.72;
    }
    .cart-row.is-completing,
    .cart-row.is-restoring {
      overflow: hidden;
      pointer-events: none;
      transform-origin: center;
      will-change:
        max-height,
        min-height,
        padding,
        opacity,
        transform;
    }
    .cart-row.is-completing {
      animation: cart-row-complete 140ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .cart-row.is-restoring {
      animation: cart-row-restore 140ms var(--ease-out) both;
    }
    .cart-row.is-completing .cart-check {
      animation: cart-check-pop 140ms cubic-bezier(.34, 1.56, .64, 1) both;
    }
    @keyframes cart-row-complete {
      0% {
        max-height: 96px;
        min-height: 44px;
        opacity: 1;
        transform: translateX(0) scale(1);
      }
      38% {
        max-height: 96px;
        min-height: 44px;
        opacity: 1;
        transform: translateX(4px) scale(.995);
        background: color-mix(in oklab, var(--color-success) 10%, transparent);
      }
      100% {
        max-height: 0;
        min-height: 0;
        padding-block: 0;
        opacity: 0;
        transform: translateX(14px) scale(.98);
        border-bottom-color: transparent;
      }
    }
    @keyframes cart-row-restore {
      0% {
        max-height: 96px;
        min-height: 44px;
        opacity: .72;
        transform: translateX(0);
      }
      100% {
        max-height: 0;
        min-height: 0;
        padding-block: 0;
        opacity: 0;
        transform: translateX(-10px);
        border-bottom-color: transparent;
      }
    }
    @keyframes cart-check-pop {
      0% {
        transform: scale(.72);
      }
      60% {
        transform: scale(1.14);
      }
      100% {
        transform: scale(1);
      }
    }
    .cart-check {
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--color-border-strong);
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--color-accent);
      font-weight: 700;
      cursor: pointer;
    }
    .cart-check[aria-pressed=true] {
      background: var(--color-accent-soft);
      border-color: var(--color-accent);
    }
    .cart-name {
      min-width: 0;
      font-weight: 600;
      color: var(--color-fg);
      line-height: var(--leading-tight);
    }
    .cart-name small {
      display: inline;
      margin-inline-start: var(--space-2);
      font-weight: 400;
      font-size: var(--text-xs);
      color: var(--color-fg-muted);
    }
    .cart-total {
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
      text-align: end;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .cart-pantry {
      color: var(--color-success) !important;
      opacity: 0.75;
    }
    .cart-recipes {
      display: grid;
      gap: var(--space-1);
      padding: var(--space-2);
      border-bottom: 1px solid var(--color-border);
      background: var(--color-bg-sunken);
    }
    .cart-recipe {
      min-height: 40px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 34px;
      align-items: center;
      gap: var(--space-2);
    }
    .cart-recipe-name {
      min-width: 0;
      font-weight: 600;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: var(--leading-tight);
    }
    .cart-serving-controls {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
      white-space: nowrap;
    }
    .cart-item-menu,
    .cart-recipe-menu {
      position: relative;
    }
    .cart-item-menu > summary,
    .cart-recipe-menu > summary {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-sm);
      cursor: pointer;
      list-style: none;
      color: var(--color-fg-muted);
    }
    .cart-item-menu > summary::-webkit-details-marker,
    .cart-recipe-menu > summary::-webkit-details-marker {
      display: none;
    }
    .cart-item-menu[open] > button,
    .cart-recipe-menu[open] > button {
      position: absolute;
      z-index: 2;
      inset-inline-end: 0;
      top: 36px;
      white-space: nowrap;
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
    }
    .cart-completed {
      border-top: 1px solid var(--color-border);
    }
    .cart-completed > summary {
      padding: var(--space-3);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-fg-muted);
      cursor: pointer;
    }
    @media (max-width: 36rem) {
      .cart-serving-controls span {
        min-width: 4.5rem;
        text-align: center;
      }
      .cart-recipe {
        grid-template-columns: minmax(0, 1fr) auto 34px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .cart-row.is-completing,
      .cart-row.is-restoring,
      .cart-row.is-completing .cart-check {
        animation: none;
      }
    }
    .cook-history-card {
      display: grid;
      gap: var(--space-3);
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
    }
    .cook-memory-field {
      display: grid;
      gap: var(--space-1);
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      font-weight: 600;
    }
    .cook-memory-field textarea {
      min-height: 4.5rem;
      resize: vertical;
      font-weight: 400;
    }
    .cook-member-review {
      display: grid;
      gap: var(--space-1);
      padding: var(--space-3);
      border-radius: var(--radius-md);
      background: var(--color-bg-sunken);
    }
    .cook-member-review span,
    .cook-member-review p {
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .cook-ratings {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
      gap: var(--space-3);
    }
    .cook-star-field {
      display: grid;
      gap: var(--space-1);
    }
    .cook-star-field > span {
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      font-weight: 600;
    }
    .cook-star-rating {
      display: flex;
      flex-wrap: nowrap;
    }
    .cook-star-rating > button {
      width: 44px;
      min-width: 36px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--color-border-strong);
      font-size: 1.65rem;
      cursor: pointer;
    }
    .cook-star-rating > button[aria-checked=true],
    .cook-star-rating > button:has(~ button[aria-checked=true]) {
      color: var(--color-accent);
    }
    .cook-star-rating > button:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 1px;
    }
    .cook-history-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    @media (max-width: 36rem) {
      .cook-ratings {
        grid-template-columns: minmax(0, 1fr);
      }
      .cook-star-rating > button {
        flex: 1;
      }
      .detail-modal .btn-sm,
      .detail-modal .detail-close,
      .detail-modal .detail-pantry-note button,
      .detail-modal .cook-history-actions button {
        min-width: 44px;
        min-height: 44px;
      }
    }
    .week-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-3);
      max-width: 760px;
      margin-inline: auto;
      padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }
    .week-eyebrow {
      color: var(--color-accent);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .workspace-status {
      max-width: 760px;
      margin: 0 auto var(--space-3);
      padding: var(--space-3);
      border: 1px solid var(--color-danger);
      border-radius: var(--radius-md);
      color: var(--color-danger);
    }
    .week-day {
      min-width: 0;
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
    }
    .week-day.is-tonight {
      border-color: var(--color-accent);
      box-shadow: var(--shadow-sm);
    }
    .week-day > header {
      margin-bottom: var(--space-2);
    }
    .week-day > header > div {
      display: flex;
      justify-content: space-between;
      gap: var(--space-2);
      color: var(--color-fg-muted);
    }
    .week-day.is-tonight > header span {
      color: var(--color-accent);
      font-weight: 700;
    }
    .week-meals {
      display: grid;
      gap: var(--space-2);
    }
    .week-meal {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      min-width: 0;
      padding: var(--space-3) 3.25rem var(--space-3) var(--space-3);
      border-radius: var(--radius-md);
      background: var(--color-bg-sunken);
    }
    .week-meal.is-skipped {
      opacity: .6;
    }
    .week-meal-copy {
      flex: 1 1 12rem;
      min-width: 0;
    }
    .week-meal-copy small {
      display: block;
      color: var(--color-fg-muted);
    }
    .week-meal-slot {
      display: block;
      margin-bottom: .15rem;
      color: var(--color-accent);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .week-meal-title {
      display: block;
      overflow-wrap: anywhere;
      line-height: var(--leading-tight);
    }
    .week-meal-remove {
      position: absolute;
      top: .25rem;
      right: .25rem;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 1.4rem;
    }
    .week-meal-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-1);
    }
    .week-add {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) auto;
      gap: var(--space-2);
      margin-top: var(--space-2);
    }
    .week-add-split {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .week-add-primary {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    .week-add-menu-toggle {
      min-width: 44px;
      padding-inline: var(--space-2);
      border-inline-start: 1px solid color-mix(in oklab, white 35%, transparent);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    .week-add-menu {
      position: absolute;
      z-index: 5;
      top: calc(100% + .25rem);
      right: 0;
      min-width: 9rem;
      padding: var(--space-1);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-md);
    }
    .week-add-menu[hidden] {
      display: none;
    }
    .week-add-menu button {
      display: block;
      width: 100%;
      min-height: 44px;
      padding: var(--space-2) var(--space-3);
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--color-fg);
      text-align: left;
      cursor: pointer;
    }
    .week-add-menu button:hover,
    .week-add-menu button:focus-visible {
      background: var(--color-bg-sunken);
    }
    .shopping-tools {
      display: grid;
      gap: var(--space-3);
      max-width: 760px;
      margin: 0 auto var(--space-3);
    }
    .shopping-manual-add {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2);
    }
    .plan-shop-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto auto;
      align-items: end;
      gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
    }
    .plan-shop-tools strong,
    .plan-shop-tools small {
      display: block;
    }
    .plan-shop-tools small {
      color: var(--color-fg-muted);
      margin-top: var(--space-1);
    }
    .plan-shop-tools label {
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
    }
    @media (max-width: 36rem) {
      .week-add {
        grid-template-columns: minmax(0, 1fr);
      }
      .week-add-split {
        width: 100%;
      }
      .week-meal-controls {
        width: 100%;
      }
      .shopping-manual-add,
      .plan-shop-tools {
        grid-template-columns: minmax(0, 1fr);
      }
      #cart-clear-btn {
        min-height: 44px;
      }
    }
    #feedback-haptics-setting[hidden] {
      display: none;
    }
    [data-feedback] {
      transition:
        transform var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        opacity var(--dur-fast) var(--ease-out);
      -webkit-tap-highlight-color: transparent;
    }
    [data-feedback].is-feedback-pressed {
      transform: translateY(1px) scale(.985);
      filter: saturate(.92);
      opacity: .9;
    }
    [data-feedback].has-feedback-success {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-success) 34%, transparent);
    }
    [data-feedback].has-feedback-blocked {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-danger) 34%, transparent);
    }
    @media (prefers-reduced-motion: reduce) {
      [data-feedback].is-feedback-pressed {
        transform: none;
        filter: none;
        opacity: .82;
      }
    }
  }
  .field-uncertain {
    outline: 2px solid var(--accent, #d97706);
    outline-offset: 2px;
  }
}

/* docs/css/app.css */
@layer app {
  @layer app {
    .pwa-banner {
      position: fixed;
      z-index: 1200;
      left: max(var(--space-3), env(safe-area-inset-left));
      right: max(var(--space-3), env(safe-area-inset-right));
      top: max(var(--space-3), env(safe-area-inset-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      max-width: 42rem;
      margin-inline: auto;
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-lg);
    }
    .pwa-banner[hidden] {
      display: none;
    }
    .sidebar {
      width: 240px;
      background: var(--color-fg);
      color: var(--color-bg-elevated);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 50;
      padding: 32px 0 24px;
    }
    .sidebar-brand {
      padding: 0 24px 28px;
      border-bottom: 1px solid color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
    }
    .sidebar-brand h1 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--color-accent-fg);
      line-height: var(--leading-tight);
    }
    .sidebar-brand p {
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-top: 5px;
    }
    .sidebar-nav {
      padding: 22px 12px;
      flex: 1;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 12px;
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 400;
      color: var(--color-fg-subtle);
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
      margin-bottom: 2px;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: inherit;
    }
    .nav-item svg {
      opacity: 0.6;
      flex-shrink: 0;
    }
    .nav-item:hover {
      background: color-mix(in oklab, var(--color-bg-elevated) 7%, transparent);
      color: var(--color-accent-fg);
    }
    .nav-item:hover svg {
      opacity: 1;
    }
    .nav-item.active {
      background: var(--color-accent);
      color: var(--color-accent-fg);
      font-weight: 500;
    }
    .nav-item.active svg {
      opacity: 1;
    }
    .nav-sep {
      height: 1px;
      background: color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
      margin: 14px 12px;
    }
    .nav-tab-label {
      display: inline;
    }
    .sidebar-footer {
      padding: 0 24px;
      font-size: var(--text-xs);
      color: var(--color-fg-subtle);
      line-height: var(--leading-normal);
    }
    .sidebar-footer a {
      color: var(--color-fg-subtle);
    }
    .main {
      margin-left: 240px;
      flex: 1;
      min-width: 0;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      background: var(--color-bg-elevated);
      border-bottom: 1px solid var(--color-border);
      padding: 14px 28px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      position: sticky;
      top: 0;
      z-index: 40;
    }
    body:not([data-panel=recipes]) .topbar {
      display: none;
    }
    .search-wrap {
      display: flex;
      align-items: center;
      flex: 0 1 360px;
      min-width: 0;
      border: 1px solid var(--color-border-strong);
      background: var(--color-bg-elevated);
      border-radius: var(--radius-md);
      min-height: 44px;
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .search-wrap:focus-within {
      border-color: var(--color-accent);
    }
    .search-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      color: var(--color-fg-subtle);
      flex-shrink: 0;
    }
    .search-clear {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--color-fg-subtle);
      background: none;
      border: none;
      cursor: pointer;
      border-radius: var(--radius-pill);
      padding: 0;
    }
    .search-clear.show {
      display: inline-flex;
    }
    .search-clear:hover {
      color: var(--color-fg);
    }
    .search-wrap > .input {
      flex: 1;
      min-width: 0;
      width: 100%;
      background: transparent;
      border: none;
      border-radius: 0;
      min-height: 0;
      padding: var(--space-2) var(--space-2) var(--space-2) 0;
    }
    .search-wrap > .input:focus-visible {
      outline: none;
    }
    .chips-scroll {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 100%;
      padding-bottom: 2px;
      mask-image:
        linear-gradient(
          to right,
          black calc(100% - 24px),
          transparent);
      -webkit-mask-image:
        linear-gradient(
          to right,
          black calc(100% - 24px),
          transparent);
    }
    .chips-scroll::-webkit-scrollbar {
      display: none;
    }
    .chip {
      flex-shrink: 0;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      font-size: var(--text-xs);
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--color-border);
      background: var(--color-bg-elevated);
      color: var(--color-fg-muted);
      transition:
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
      white-space: nowrap;
      font-family: inherit;
      min-height: 32px;
    }
    .chip:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
    .chip.is-active {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-accent-fg);
    }
    .ready-toggle {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding-inline: var(--space-1);
      gap: 7px;
      cursor: pointer;
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
      white-space: nowrap;
      user-select: none;
      align-self: center;
    }
    .ready-toggle input {
      width: auto;
      accent-color: var(--color-accent);
    }
    .ready-toggle[hidden] {
      display: none;
    }
    .panel {
      display: none;
      padding: 28px;
      flex: 1;
    }
    .panel.active,
    .panel.is-active {
      display: block;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
      gap: 16px;
    }
    .panel-header h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 600;
    }
    .panel-header p {
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
      margin-top: 4px;
    }
    .recipe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 20px;
    }
    .empty-state {
      grid-column: 1 / -1;
    }
    .empty-state svg {
      margin: 0 auto 16px;
      display: block;
      opacity: 0.4;
    }
    .empty-state strong {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: var(--color-fg-muted);
      display: block;
      margin-bottom: 6px;
    }
    .empty-state p {
      font-size: var(--text-sm);
    }
    .recipe-card {
      cursor: pointer;
      transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
      position: relative;
    }
    @media (hover: hover) {
      .recipe-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
      }
    }
    .recipe-card:active {
      transform: scale(0.99);
    }
    .recipe-card::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 42px 42px 0;
      border-color: transparent var(--color-bg) transparent transparent;
      z-index: var(--z-card-deco);
    }
    .recipe-card::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 42px;
      height: 42px;
      z-index: var(--z-card-deco-back);
      background: var(--color-fg-subtle);
    }
    .card-fold-complete::after {
      background: var(--color-success);
    }
    .card-fold-partial::after {
      background: var(--color-warning);
    }
    .card-fold-none::after {
      background: var(--color-danger);
    }
    .card-fold-complete .card-stripe {
      background: var(--color-success);
    }
    .card-fold-partial .card-stripe {
      background: var(--color-warning);
    }
    .card-fold-none .card-stripe {
      background: var(--color-danger);
    }
    .card-body {
      user-select: none;
      padding: 18px 22px 16px;
    }
    .card-category {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-bottom: 6px;
    }
    .card-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 600;
      line-height: var(--leading-snug);
      margin-bottom: 10px;
    }
    .card-head {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 10px;
    }
    .card-head .card-title {
      flex: 1 1 auto;
      min-width: 0;
      margin-bottom: 0;
      padding-right: 8px;
    }
    .card-toolbar {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
      margin-left: auto;
      align-self: flex-start;
      position: relative;
      z-index: var(--z-card-toolbar);
    }
    .card-meta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .meta-pill {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      color: var(--color-fg-muted);
    }
    .meta-pill svg {
      color: var(--color-fg-subtle);
      flex-shrink: 0;
    }
    .card-ingredients {
      border-top: 1px solid var(--color-border);
      padding-top: 12px;
      margin-bottom: 14px;
    }
    .ingredients-label {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-bottom: 8px;
    }
    .ingredient-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ing-tag {
      font-size: var(--text-xs);
      padding: 4px 11px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border);
      color: var(--color-fg-muted);
      line-height: var(--leading-snug);
    }
    .ing-tag.have {
      background: color-mix(in oklab, var(--color-success) 22%, transparent);
      border-color: color-mix(in oklab, var(--color-success) 65%, transparent);
      color: var(--color-success);
      font-weight: 500;
    }
    .ing-tag.have::before {
      content: "\2713";
      opacity: 0.9;
      margin-right: 5px;
      font-weight: 700;
    }
    .ing-tag.missing {
      background: color-mix(in oklab, var(--color-danger) 14%, transparent);
      border-color: color-mix(in oklab, var(--color-danger) 60%, transparent);
      color: var(--color-danger);
      opacity: 0.82;
    }
    .ing-tag.missing::before {
      content: "+";
      opacity: 0.9;
      margin-right: 5px;
      font-weight: 700;
      text-decoration: none;
    }
    .card-footer {
      border-top: 1px solid var(--color-border);
      padding: 9px 12px 9px 18px;
      display: flex;
      align-items: center;
      background: var(--color-bg-sunken);
    }
    .card-status {
      font-size: var(--text-xs);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--color-fg-muted);
    }
    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: var(--radius-pill);
      flex-shrink: 0;
      background: var(--color-fg-subtle);
    }
    .card-fold-complete .status-dot {
      background: var(--color-success);
    }
    .card-fold-partial .status-dot {
      background: var(--color-warning);
    }
    .card-fold-none .status-dot {
      background: var(--color-danger);
    }
    .overlay {
      position: fixed;
      inset: 0;
      background: color-mix(in oklab, var(--color-fg) 45%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-base) var(--ease-out);
    }
    .overlay.open {
      opacity: 1;
      pointer-events: all;
    }
    #detail-overlay {
      z-index: 149;
    }
    #drawer-overlay {
      z-index: 159;
    }
    .detail-modal {
      position: fixed;
      left: 240px;
      right: 0;
      top: 0;
      bottom: 0;
      background: var(--color-bg-elevated);
      z-index: 150;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform var(--dur-base) var(--ease-out);
    }
    .detail-modal.open {
      transform: translateY(0);
    }
    .detail-modal[hidden],
    #detail-overlay[hidden] {
      display: none;
    }
    .detail-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 26px 32px 18px;
      padding-top: max(26px, env(safe-area-inset-top, 0px));
      border-bottom: 1px solid var(--color-border);
      flex-shrink: 0;
    }
    .detail-header-left {
      flex: 1;
      min-width: 0;
    }
    .detail-eyebrow {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-bottom: 6px;
    }
    .detail-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 700;
      line-height: var(--leading-tight);
    }
    .detail-meta-row {
      display: flex;
      gap: 14px 32px;
      flex-wrap: wrap;
      align-items: baseline;
      margin-top: 18px;
      flex: 1 1 auto;
    }
    .detail-meta-item {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 8px;
      flex: 0 0 auto;
    }
    .detail-meta-item .k {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
    }
    .detail-meta-item .v {
      font-size: var(--text-md);
      font-weight: 600;
      color: var(--color-fg);
    }
    .detail-close {
      flex-shrink: 0;
      background: var(--color-bg-sunken);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 0 14px;
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-fg-muted);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background var(--dur-fast) var(--ease-out);
      min-height: 44px;
      font-family: inherit;
    }
    .detail-close:hover {
      background: var(--color-bg-sunken);
    }
    .detail-body {
      flex: 1;
      overflow-y: auto;
      display: grid;
      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
      -webkit-overflow-scrolling: touch;
    }
    .detail-main {
      min-width: 0;
    }
    .section-label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--color-border);
    }
    .section-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .section-label-row .section-label {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }
    .section-label .sub {
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: var(--color-fg-subtle);
      font-size: var(--text-xs);
    }
    .detail-ingredients {
      border-right: 1px solid var(--color-border);
      padding: 26px 26px 40px;
      background: var(--color-bg);
    }
    .detail-ing-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .detail-ing-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 9px 10px;
      border-radius: 5px;
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .detail-ing-item:hover {
      background: var(--color-bg-sunken);
    }
    .detail-ing-item.missing-item .detail-ing-text {
      color: var(--color-fg-subtle);
    }
    .detail-ing-check {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: var(--radius-pill);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .detail-ing-check.have {
      background: color-mix(in oklab, var(--color-success) 18%, transparent);
      border: 1.5px solid color-mix(in oklab, var(--color-success) 60%, transparent);
      color: var(--color-success);
    }
    .detail-ing-check.missing {
      background: var(--color-bg-sunken);
      border: 1.5px dashed var(--color-border);
    }
    .detail-pantry-note {
      margin-top: 18px;
      padding: 11px 13px;
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--text-xs);
      color: var(--color-fg-muted);
      line-height: var(--leading-normal);
    }
    .detail-pantry-note strong {
      color: var(--color-fg);
    }
    .detail-steps {
      padding: 26px 32px 48px;
    }
    .detail-step {
      display: flex;
      gap: 15px;
      margin-bottom: 24px;
      align-items: flex-start;
    }
    .detail-step:last-child {
      margin-bottom: 0;
    }
    .step-num {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      color: var(--color-accent-fg);
      font-size: var(--text-sm);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .step-text {
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
      color: var(--color-fg-muted);
      padding-top: 4px;
    }
    .detail-nutrition {
      display: block;
      border-top: 1px solid var(--color-border);
    }
    .detail-nutrition .section-label {
      margin-bottom: 14px;
    }
    .nutrition-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(4, 1fr);
    }
    .nutrition-cell {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      min-width: 0;
      text-align: center;
    }
    .nutrition-cell .k {
      display: block;
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin-bottom: 4px;
    }
    .nutrition-cell .v {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-fg);
    }
    .detail-footer {
      flex-shrink: 0;
      border-top: 1px solid var(--color-border);
      padding: 12px 32px;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      background: var(--color-bg);
    }
    .detail-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 460px;
      max-width: 100vw;
      background: var(--color-bg-elevated);
      z-index: 160;
      transform: translateX(100%);
      transition: transform var(--dur-base) var(--ease-out);
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 32px color-mix(in oklab, var(--color-fg) 12%, transparent);
    }
    .drawer.open {
      transform: translateX(0);
    }
    .drawer-header {
      padding: 22px 26px 18px;
      padding-top: max(22px, env(safe-area-inset-top, 0px));
      border-bottom: 1px solid var(--color-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .drawer-header h3 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
    }
    .drawer-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-fg-muted);
      padding: 10px;
      border-radius: 6px;
      display: flex;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }
    .drawer-close:hover {
      color: var(--color-fg);
      background: var(--color-bg);
    }
    .drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 22px 26px;
      -webkit-overflow-scrolling: touch;
    }
    .drawer-footer {
      border-top: 1px solid var(--color-border);
      padding: 14px 26px;
      padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .form-group {
      margin-bottom: 16px;
    }
    .form-row {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }
    .form-col {
      flex: 1;
      min-width: 0;
    }
    .recipe-form label,
    form label {
      display: block;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-fg-muted);
      margin-bottom: 6px;
    }
    label .req {
      color: var(--color-accent);
    }
    .form-hint {
      font-size: var(--text-xs);
      color: var(--color-fg-subtle);
      margin-top: 4px;
    }
    .form-section-label {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-fg-subtle);
      margin: 22px 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--color-border);
    }
    .form-section-label:first-child {
      margin-top: 0;
    }
    .ing-editor,
    .steps-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ing-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .ing-row input {
      flex: 1;
    }
    .row-remove {
      flex-shrink: 0;
      background: none;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      cursor: pointer;
      color: var(--color-danger);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      transition: background var(--dur-fast) var(--ease-out);
    }
    .row-remove:hover {
      background: color-mix(in oklab, var(--color-danger) 12%, transparent);
    }
    .add-row {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    .add-row input {
      flex: 1;
    }
    .step-row {
      display: flex;
      gap: 9px;
      align-items: flex-start;
    }
    .step-badge {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      color: var(--color-accent);
      font-size: var(--text-sm);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 9px;
    }
    .step-row textarea {
      min-height: 64px;
    }
    .pantry-add-card {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      max-width: 46rem;
      padding: var(--space-4);
      border: 1px solid color-mix(in oklab, var(--color-accent) 28%, var(--color-border));
      border-radius: calc(var(--radius-lg) + 6px);
      background: color-mix(in oklab, var(--color-accent-soft) 42%, var(--color-bg-elevated));
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .pantry-add-card::after {
      content: "";
      position: absolute;
      width: 76px;
      height: 76px;
      right: -34px;
      top: -34px;
      border-radius: 50%;
      background: color-mix(in oklab, var(--color-accent) 13%, transparent);
      pointer-events: none;
    }
    .pantry-add {
      display: flex;
      gap: var(--space-2);
    }
    .pantry-add input {
      flex: 1;
    }
    .pantry-hint {
      font-size: var(--text-xs);
      color: var(--color-fg-muted);
      margin-top: 8px;
      line-height: var(--leading-normal);
    }
    .pantry-tools {
      display: grid;
      gap: var(--space-3);
      min-width: 0;
      max-width: 100%;
      width: min(100%, 60rem);
      margin-top: var(--space-6);
    }
    .pantry-search-wrap {
      position: relative;
      display: block;
      max-width: 34rem;
    }
    .pantry-search-wrap > span {
      position: absolute;
      left: 14px;
      top: 50%;
      translate: 0 -50%;
      font-size: 1.2rem;
      color: var(--color-fg-subtle);
      pointer-events: none;
    }
    .pantry-search-wrap .input {
      width: 100%;
      padding-left: 42px;
      border-radius: var(--radius-pill);
    }
    .pantry-filters {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      min-width: 0;
      max-width: 100%;
    }
    .pantry-filter {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 6px 12px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-bg-elevated);
      color: var(--color-fg-muted);
      font: inherit;
      font-size: var(--text-sm);
      font-weight: 650;
      cursor: pointer;
      transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
    }
    .pantry-filter:hover {
      transform: translateY(-1px);
      border-color: var(--color-border-strong);
    }
    .pantry-filter span {
      min-width: 20px;
      padding: 1px 6px;
      border-radius: var(--radius-pill);
      background: var(--color-bg-sunken);
      font-size: var(--text-xs);
      text-align: center;
    }
    .pantry-filter.is-active {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
      color: var(--color-fg);
    }
    .pantry-filter.is-active span {
      background: var(--color-bg-elevated);
      color: var(--color-accent);
    }
    .pantry-summary {
      min-height: 1.25em;
      margin: 0;
      color: var(--color-fg-subtle);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .pantry-grid {
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
      gap: var(--space-4);
      max-width: 72rem;
      margin-top: var(--space-4);
    }
    .pantry-group {
      min-width: 0;
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: calc(var(--radius-lg) + 6px);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-sm);
    }
    .pantry-group-heading {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-3);
    }
    .pantry-group-heading h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-md);
    }
    .pantry-group-heading > span:last-child {
      margin-left: auto;
      color: var(--color-fg-subtle);
      font-size: var(--text-xs);
      font-weight: 700;
    }
    .pantry-items {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    .pantry-category-dot {
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--color-fg-subtle);
    }
    [data-category=produce] > .pantry-category-dot,
    [data-category=produce] .pantry-group-heading .pantry-category-dot {
      background: var(--color-success);
    }
    [data-category=fridge] > .pantry-category-dot,
    [data-category=fridge] .pantry-group-heading .pantry-category-dot {
      background: #4e9fbd;
    }
    [data-category=proteins] > .pantry-category-dot,
    [data-category=proteins] .pantry-group-heading .pantry-category-dot {
      background: var(--color-danger);
    }
    [data-category=staples] > .pantry-category-dot,
    [data-category=staples] .pantry-group-heading .pantry-category-dot {
      background: var(--color-warning);
    }
    .pantry-empty {
      grid-column: 1 / -1;
      display: grid;
      justify-items: center;
      gap: var(--space-2);
      padding: var(--space-10) var(--space-4);
      border: 1px dashed var(--color-border-strong);
      border-radius: calc(var(--radius-lg) + 6px);
      background: color-mix(in oklab, var(--color-bg-elevated) 75%, transparent);
      color: var(--color-fg-muted);
      text-align: center;
    }
    .pantry-empty > span {
      font-size: 2rem;
    }
    .pantry-empty strong {
      color: var(--color-fg);
      font-family: var(--font-display);
      font-size: var(--text-lg);
    }
    .pantry-empty p {
      margin: 0;
    }
    .pantry-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 7px 7px 11px;
      border-radius: var(--radius-pill);
      background: color-mix(in oklab, var(--color-bg) 72%, var(--color-bg-elevated));
      font-size: var(--text-sm);
      color: var(--color-fg);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
    }
    .pantry-tag-copy {
      display: grid;
      gap: 1px;
      line-height: var(--leading-tight);
    }
    .pantry-tag-copy small {
      color: var(--color-fg-muted);
      font-size: 0.7rem;
      font-weight: var(--weight-semibold);
    }
    .pantry-tag-edit {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin-left: 2px;
      border-radius: 50%;
      background: var(--color-bg-sunken);
      color: var(--color-fg-muted);
      font-size: 1.25rem;
      line-height: 1;
      transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .pantry-tag {
      min-height: 44px;
      max-width: 100%;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
    }
    .pantry-tag:hover,
    .pantry-tag:focus-visible {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
    }
    .pantry-tag:hover .pantry-tag-edit,
    .pantry-tag:focus-visible .pantry-tag-edit {
      color: var(--color-accent);
      background: var(--color-bg-elevated);
    }
    .pantry-item-overlay {
      z-index: 169;
    }
    .pantry-item-modal {
      position: fixed;
      z-index: 170;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      display: flex;
      flex-direction: column;
      width: min(36rem, calc(100vw - 32px));
      max-height: min(46rem, calc(100dvh - 32px));
      border: 1px solid var(--color-border);
      border-radius: calc(var(--radius-lg) + 10px);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }
    .pantry-item-modal[hidden],
    .pantry-item-overlay[hidden],
    .pantry-item-measurement-grid > [hidden],
    .pantry-remove-confirm[hidden] {
      display: none;
    }
    .pantry-item-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-5) var(--space-6) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .pantry-item-header h2 {
      margin: 2px 0 var(--space-1);
      font-family: var(--font-display);
      font-size: var(--text-xl);
    }
    .pantry-item-header p {
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
    }
    .pantry-item-header .pantry-item-eyebrow {
      color: var(--color-accent);
      font-size: var(--text-xs);
      font-weight: 750;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .pantry-item-close {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: var(--color-bg-sunken);
      color: var(--color-fg-muted);
      font: inherit;
      font-size: 1.6rem;
      cursor: pointer;
    }
    .pantry-item-close:hover {
      color: var(--color-fg);
      background: var(--color-accent-soft);
    }
    .pantry-item-form {
      display: flex;
      min-height: 0;
      flex: 1;
      flex-direction: column;
    }
    .pantry-item-body {
      display: grid;
      gap: var(--space-4);
      padding: var(--space-5) var(--space-6);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .pantry-item-body .form-group {
      display: grid;
      gap: var(--space-2);
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      font-weight: 700;
    }
    .pantry-item-body .form-group[hidden] {
      display: none;
    }
    .pantry-item-measurement-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1fr;
      gap: var(--space-3);
      align-items: end;
    }
    .pantry-original {
      display: grid;
      gap: var(--space-1);
      padding: var(--space-3) var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-sunken);
    }
    .pantry-original strong {
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .pantry-original output {
      overflow-wrap: anywhere;
      color: var(--color-fg);
      font-size: var(--text-sm);
    }
    .pantry-original-evidence {
      display: grid;
      gap: var(--space-1);
      margin: var(--space-1) 0 0;
      padding-left: var(--space-5);
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
    }
    .pantry-original-evidence[hidden] {
      display: none;
    }
    .pantry-original-evidence li {
      overflow-wrap: anywhere;
    }
    .pantry-original small {
      color: var(--color-fg-subtle);
      line-height: var(--leading-snug);
    }
    .pantry-item-error {
      margin: 0;
      padding: var(--space-3);
      border-radius: var(--radius-md);
      background: color-mix(in oklab, var(--color-danger) 12%, transparent);
      color: var(--color-danger);
      font-size: var(--text-sm);
      font-weight: 650;
    }
    .pantry-item-status {
      min-height: 1.3em;
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .pantry-recipe-discovery {
      display: grid;
      gap: var(--space-3);
      min-width: 0;
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-border);
    }
    .pantry-recipe-discovery[hidden],
    .pantry-recipe-toggle[hidden] {
      display: none;
    }
    .pantry-recipe-heading {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .pantry-recipe-heading h3 {
      margin: 0;
      overflow-wrap: anywhere;
      font-family: var(--font-display);
      font-size: var(--text-lg);
      line-height: var(--leading-tight);
    }
    .pantry-recipe-heading p {
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
      line-height: var(--leading-snug);
    }
    .pantry-recipe-results {
      display: grid;
      gap: var(--space-2);
      min-width: 0;
    }
    .pantry-recipe-row {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
      min-width: 0;
      min-height: 56px;
      padding: 6px 8px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      text-align: left;
      font: inherit;
      cursor: pointer;
      touch-action: manipulation;
    }
    .pantry-recipe-row:hover {
      border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-border));
      background: var(--color-accent-soft);
    }
    .pantry-recipe-row:focus-visible,
    .pantry-recipe-toggle:focus-visible {
      outline: 3px solid var(--color-focus-ring);
      outline-offset: 2px;
    }
    .pantry-recipe-row:disabled {
      cursor: default;
      opacity: 0.72;
    }
    .pantry-recipe-row img,
    .pantry-recipe-image-fallback {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      background: var(--color-bg-sunken);
      object-fit: cover;
      overflow: hidden;
    }
    .pantry-recipe-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .pantry-recipe-copy strong,
    .pantry-recipe-match {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .pantry-recipe-copy strong {
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
    }
    .pantry-recipe-match {
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
      line-height: var(--leading-snug);
    }
    .pantry-recipe-availability {
      max-width: 9.5rem;
      padding: 3px 7px;
      border-radius: var(--radius-pill);
      background: var(--color-bg-sunken);
      color: var(--color-fg-muted);
      overflow-wrap: anywhere;
      font-size: var(--text-xs);
      font-weight: 750;
      line-height: var(--leading-snug);
      text-align: center;
    }
    .pantry-recipe-availability.is-all {
      background: color-mix(in oklab, var(--color-success) 14%, transparent);
      color: var(--color-success);
    }
    .pantry-recipe-availability.is-some {
      background: color-mix(in oklab, var(--color-warning) 16%, transparent);
      color: var(--color-fg);
    }
    .pantry-recipe-empty {
      display: grid;
      gap: var(--space-1);
      min-width: 0;
      padding: var(--space-4);
      border-radius: var(--radius-md);
      background: var(--color-bg-sunken);
    }
    .pantry-recipe-empty strong,
    .pantry-recipe-empty p {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .pantry-recipe-empty p {
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
    }
    .pantry-recipe-toggle {
      justify-self: start;
      min-height: 44px;
    }
    .pantry-remove-confirm {
      display: grid;
      gap: var(--space-3);
      padding: var(--space-4);
      border: 1px solid color-mix(in oklab, var(--color-danger) 35%, var(--color-border));
      border-radius: var(--radius-md);
      background: color-mix(in oklab, var(--color-danger) 7%, var(--color-bg-elevated));
    }
    .pantry-remove-confirm p {
      display: grid;
      gap: 2px;
      margin: 0;
    }
    .pantry-remove-confirm p span {
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .pantry-remove-confirm > div {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2);
    }
    .pantry-danger-button {
      border-color: var(--color-danger);
      background: var(--color-danger);
      color: white;
    }
    .pantry-item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--color-border);
      background: var(--color-bg-elevated);
    }
    .pantry-item-footer .btn {
      min-height: 44px;
    }
    .pantry-remove-action {
      color: var(--color-danger);
    }
    .pantry-remove-action[hidden] {
      display: none;
    }
    .theme-recommendation {
      position: fixed;
      top: max(16px, env(safe-area-inset-top, 0px));
      right: 16px;
      z-index: 175;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-3);
      width: min(420px, calc(100vw - 32px));
      padding: var(--space-4);
      border: 1px solid color-mix(in oklab, #e7b63c 55%, var(--color-border));
      border-radius: calc(var(--radius-lg) + 10px);
      background: color-mix(in oklab, #fff4b8 38%, var(--color-bg-elevated));
      box-shadow: var(--shadow-lg);
    }
    .theme-recommendation[hidden] {
      display: none;
    }
    .theme-recommendation-sun {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #fff0a3;
      font-size: 1.35rem;
    }
    .theme-recommendation-copy {
      display: grid;
      gap: 2px;
    }
    .theme-recommendation-copy strong {
      font-family: var(--font-display);
      font-size: var(--text-md);
    }
    .theme-recommendation-copy span {
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
      line-height: var(--leading-snug);
    }
    .theme-recommendation-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2);
    }
    .schema-overlay {
      position: fixed;
      inset: 0;
      background: color-mix(in oklab, var(--color-fg) 50%, transparent);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .schema-overlay.open {
      display: flex;
    }
    .schema-modal {
      background: var(--color-fg);
      border-radius: 10px;
      max-width: 640px;
      width: 100%;
      max-height: 82vh;
      display: flex;
      flex-direction: column;
    }
    .schema-modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .schema-modal-header h4 {
      font-family: var(--font-display);
      color: var(--color-accent-fg);
      font-size: var(--text-md);
    }
    .schema-modal-header button {
      background: none;
      border: none;
      color: var(--color-fg-subtle);
      cursor: pointer;
      display: flex;
      padding: 6px;
    }
    .schema-actions {
      display: flex;
      gap: 8px;
    }
    .schema-copy {
      background: color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
      border: none;
      color: var(--color-bg-elevated);
      cursor: pointer;
      font-size: var(--text-xs);
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 5px;
      font-family: inherit;
    }
    .schema-copy:hover {
      background: color-mix(in oklab, var(--color-bg-elevated) 18%, transparent);
    }
    .schema-modal pre {
      flex: 1;
      overflow: auto;
      padding: 20px;
      font-size: var(--text-xs);
      line-height: 1.6;
      color: var(--color-fg-subtle);
      font-family:
        ui-monospace,
        "SF Mono",
        Menlo,
        monospace;
      white-space: pre;
    }
    .url-input-row {
      display: flex;
      align-items: stretch;
      gap: var(--space-2);
      margin-bottom: var(--space-3);
    }
    .url-input-row > .input {
      flex: 1;
      min-width: 0;
    }
    .url-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    #url-status {
      color: var(--color-fg-subtle);
      font-size: var(--text-sm);
    }
    .toast {
      z-index: 210;
    }
    .fab {
      display: none;
    }
    body[data-panel=cart] .fab-stack {
      display: none;
    }
    .fab-stack {
      position: fixed;
      right: 16px;
      bottom: 24px;
      z-index: 60;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }
    .fab-stack .fab {
      display: flex;
    }
    .fab-dropdown {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      padding: 4px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 180px;
    }
    .fab-dropdown[hidden] {
      display: none;
    }
    .fab-dropdown-item {
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      color: var(--color-fg);
      min-height: 44px;
      font-family: inherit;
    }
    .fab-dropdown-divider {
      height: 1px;
      background: var(--color-border);
      margin: 4px 6px;
    }
    .fab-dropdown-item:hover {
      background: var(--color-bg-sunken);
    }
    .fab-dropdown-item:focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
    }
    .auth-signed-in {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
    }
    .auth-email {
      color: var(--color-fg);
    }
    .auth-signout {
      background: none;
      border: 1px solid var(--color-border);
      cursor: pointer;
      padding: 8px 14px;
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      color: var(--color-fg);
      font-family: inherit;
      min-height: 36px;
    }
    .auth-signout:hover {
      background: var(--color-bg-sunken);
    }
    .settings-section {
      margin-bottom: 32px;
    }
    .settings-section-label {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-fg-muted);
      font-weight: 600;
      margin-bottom: 12px;
    }
    .settings-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .settings-hint {
      font-size: var(--text-xs);
      color: var(--color-fg-subtle);
    }
    .theme-picker {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      align-items: center;
    }
    .theme-swatch {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--swatch-bg);
      border: 1px solid var(--swatch-border);
      box-shadow: inset 0 0 0 4px var(--swatch-accent);
      cursor: pointer;
      padding: 0;
      transition: transform var(--dur-fast) var(--ease-out);
    }
    .theme-swatch:hover {
      transform: scale(1.06);
    }
    .theme-swatch.is-active {
      box-shadow: inset 0 0 0 4px var(--swatch-accent), 0 0 0 2px var(--color-accent);
    }
    .theme-swatch:focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 3px;
    }
    .theme-picker-hint {
      margin-top: var(--space-3);
      font-size: var(--text-sm);
      color: var(--color-fg-muted);
    }
    #settings-auth-zone {
      display: flex;
      align-items: center;
      min-height: 44px;
    }
    @media (max-width: 760px) {
      .sidebar {
        flex-direction: row;
        width: 100%;
        height: auto;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px 4px;
        padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in oklab, var(--color-bg-elevated) 12%, transparent);
        justify-content: space-around;
      }
      .sidebar-brand,
      .sidebar-footer {
        display: none;
      }
      .sidebar-nav {
        display: flex;
        padding: 0;
        flex: 1;
        justify-content: space-around;
        gap: 2px;
      }
      .nav-item {
        flex-direction: column;
        gap: 3px;
        padding: 3px 2px;
        width: auto;
        flex: 1;
        align-items: center;
        font-size: var(--text-xs);
        border-radius: 10px;
        max-width: 90px;
      }
      .nav-item svg {
        width: 20px;
        height: 20px;
        opacity: 0.7;
      }
      .nav-item.active {
        background: transparent;
        color: var(--color-accent);
      }
      .nav-item.active svg {
        color: var(--color-accent);
      }
      .nav-tab-label {
        display: block;
        font-size: var(--text-xs);
      }
      .main {
        margin-left: 0;
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
        padding-top: env(safe-area-inset-top, 0px);
      }
      .topbar {
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top, 0px));
      }
      .search-wrap {
        flex: 1 1 auto;
      }
      .panel {
        padding: 18px 14px;
      }
      .panel-header h2 {
        font-size: var(--text-xl);
      }
      .recipe-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .detail-modal {
        left: 0;
      }
      .detail-body {
        grid-template-columns: 1fr;
      }
      .detail-nutrition-inner {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .nutrition-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .detail-ingredients {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 22px 18px 28px;
      }
      .detail-header {
        padding: 18px;
        padding-top: max(18px, env(safe-area-inset-top, 0px));
      }
      .detail-title {
        font-size: var(--text-xl);
      }
      .detail-meta-row {
        gap: 16px;
      }
      .detail-steps {
        padding: 22px 18px 32px;
      }
      .detail-footer {
        padding: 12px 18px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
      .drawer {
        width: 100vw;
      }
      .fab-stack {
        right: 16px;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
      }
      .fab-stack .fab {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-pill);
        background: var(--color-accent);
        color: var(--color-accent-fg);
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px color-mix(in oklab, var(--color-accent) 45%, transparent);
      }
      .fab-stack .fab:active {
        transform: scale(0.94);
      }
      #toast {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      }
    }
    @media (max-width: 380px) {
      .card-toolbar .icon-btn:first-child {
        display: none;
      }
    }
    .author-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      color: var(--ink-light, #a8a29e);
    }
    .author-avatar {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 auto;
    }
    .author-avatar.author-initial {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--surface-2, #2f2a25);
      color: var(--ink, #e7e5e4);
      font-size: 0.7rem;
      font-weight: 600;
    }
    .author-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .load-more-wrap {
      display: flex;
      justify-content: center;
      padding: 1rem;
    }
    .btn-danger {
      background: var(--color-danger);
      color: var(--color-accent-fg);
      border: 1px solid var(--color-danger);
    }
    .btn-danger:hover {
      background: color-mix(in oklab, var(--color-danger) 88%, black);
    }
  }
  @layer app {
    .login-gate {
      display: grid;
      place-items: center;
      grid-template-columns: minmax(0, 1fr);
      min-height: 100vh;
      min-height: 100dvh;
      padding: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
      background:
        radial-gradient(
          circle at 50% -10%,
          color-mix(in oklab, var(--color-accent) 18%, transparent),
          transparent 48%),
        var(--color-bg);
      color: var(--color-fg);
    }
    .login-gate-card {
      text-align: center;
      box-sizing: border-box;
      width: 100%;
      max-width: 27.5rem;
      padding: var(--space-12) var(--space-10);
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }
    .login-gate-card h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      margin: 0;
      color: var(--color-fg);
    }
    .login-gate-icon {
      display: grid;
      place-items: center;
      width: 4rem;
      height: 4rem;
      margin: 0 auto var(--space-6);
      border: 1px solid color-mix(in oklab, var(--color-accent) 28%, var(--color-border));
      border-radius: 50%;
      background: var(--color-accent-soft);
      color: var(--color-accent);
    }
    .login-gate-eyebrow {
      margin: 0 0 var(--space-2);
      color: var(--color-accent);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .login-gate-copy {
      max-width: 40ch;
      margin: var(--space-3) auto 0;
      color: var(--color-fg-muted);
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
    }
    .login-gate-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-8);
    }
    #login-gate-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
    }
    .login-gate-privacy {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
      line-height: var(--leading-normal);
    }
    .login-error {
      min-height: 1.25rem;
      margin: var(--space-4) 0 0;
      color: var(--color-danger);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
    }
    @media (max-width: 480px) {
      .login-gate {
        padding-inline: var(--space-4);
      }
      .login-gate-card {
        padding: var(--space-10) var(--space-6);
      }
      .login-gate-card h1 {
        font-size: var(--text-2xl);
      }
    }
  }
  @layer app {
    .sidebar {
      width: 220px;
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      border-right: 1px solid var(--color-border);
      padding-block: var(--space-8) var(--space-6);
    }
    .sidebar-brand {
      padding-inline: var(--space-6);
      border-bottom-color: var(--color-border);
    }
    .sidebar-brand h1 {
      color: var(--color-fg);
    }
    .sidebar-brand p,
    .sidebar-footer,
    .sidebar-footer a {
      color: var(--color-fg-muted);
    }
    .sidebar-nav {
      padding: var(--space-6) var(--space-3);
    }
    .nav-item {
      min-height: 44px;
      color: var(--color-fg-muted);
      font-weight: 600;
    }
    .nav-item:hover {
      background: var(--color-bg-sunken);
      color: var(--color-fg);
    }
    .nav-item.active {
      background: var(--color-accent-soft);
      color: var(--color-accent);
      box-shadow: inset 3px 0 0 var(--color-accent);
    }
    .main {
      margin-left: 220px;
    }
    .panel {
      width: min(100%, var(--container-wide));
      margin-inline: auto;
      padding: clamp(var(--space-6), 4vw, var(--space-12));
    }
    .panel-header {
      margin-bottom: var(--space-8);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .panel-header h2 {
      letter-spacing: var(--tracking-tight);
    }
    .panel-header p {
      max-width: 62ch;
      color: var(--color-fg-muted);
    }
    .pick-for-us-section {
      margin-bottom: var(--space-10);
      padding: var(--space-6);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: color-mix(in oklab, var(--color-accent-soft) 42%, var(--color-bg-elevated));
    }
    .pick-for-us-section > div:first-child {
      margin-bottom: var(--space-4);
    }
    .pick-for-us-section h3 {
      font-size: var(--text-xl);
    }
    .pick-for-us-section p {
      color: var(--color-fg-muted);
    }
    .suggestion-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-3);
    }
    .suggestion-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
      min-width: 0;
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-sm);
    }
    .suggestion-card small {
      color: var(--color-accent);
      font-weight: 700;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .suggestion-card strong {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      line-height: var(--leading-snug);
    }
    .suggestion-card p {
      flex: 1;
      font-size: var(--text-sm);
    }
    .suggestion-card .btn {
      min-height: 44px;
      margin-top: auto;
    }
    .week-grid {
      gap: var(--space-3);
    }
    .week-day {
      border-color: var(--color-border);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-sm);
    }
    .week-day.is-tonight {
      border-color: color-mix(in oklab, var(--color-accent) 58%, var(--color-border));
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 20%, transparent);
    }
    .week-add .btn {
      min-height: 44px;
    }
    .recipe-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
      gap: var(--space-5, 1.25rem);
      align-items: start;
    }
    .recipe-card {
      min-height: 0;
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-sm);
    }
    .recipe-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    .recipe-card .card-body {
      padding: var(--space-5, 1.25rem);
    }
    .recipe-card .card-title {
      font-size: var(--text-xl);
    }
    .card-ingredients {
      margin-top: var(--space-4);
    }
    .ingredient-tags {
      max-height: none;
      overflow: visible;
    }
    .ing-tag {
      line-height: var(--leading-snug);
    }
    .ing-tag-more {
      border-style: dashed;
      color: var(--color-fg-muted);
      background: transparent;
    }
    .card-toolbar {
      gap: var(--space-1);
    }
    .card-toolbar .icon-btn {
      min-width: 44px;
      min-height: 44px;
    }
    .household-attribution {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      margin-block: var(--space-2);
      border: 2px solid var(--color-bg-elevated);
      border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      box-shadow: 0 0 0 1px var(--color-border);
      vertical-align: middle;
    }
    .household-avatar {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      object-fit: cover;
    }
    .household-initial {
      display: grid;
      place-items: center;
      color: var(--color-accent);
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: 800;
    }
    .author-badge .household-attribution {
      width: 34px;
      height: 34px;
      margin: 0;
    }
    .shopping-tools,
    .settings-section {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-sm);
    }
    .shopping-tools {
      max-width: 56rem;
      padding: var(--space-4);
    }
    .settings-section {
      max-width: 48rem;
      padding: var(--space-5, 1.25rem);
      margin-bottom: var(--space-4);
    }
    .auth-signout,
    #cart-clear-btn,
    .theme-swatch {
      min-width: 44px;
      min-height: 44px;
    }
    .empty-state {
      padding: var(--space-10) var(--space-6);
      border: 1px dashed var(--color-border-strong);
      border-radius: var(--radius-lg);
      background: color-mix(in oklab, var(--color-bg-elevated) 70%, transparent);
      text-align: center;
      color: var(--color-fg-muted);
    }
    .detail-modal {
      left: 220px;
      background: var(--color-bg);
    }
    .detail-header {
      background: var(--color-bg-elevated);
    }
    .detail-body {
      grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    }
    .detail-ingredients {
      background: var(--color-bg-elevated);
      padding: var(--space-8);
    }
    .detail-steps {
      max-width: 58rem;
      padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-12));
    }
    .detail-step {
      margin-bottom: var(--space-6);
    }
    .step-text {
      max-width: 72ch;
      color: var(--color-fg);
    }
    .detail-nutrition {
      margin-top: var(--space-10);
      padding-top: var(--space-6);
    }
    .nutrition-grid {
      display: block;
    }
    .nutrition-strip {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-6);
      margin: 0;
      padding: var(--space-3) var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-elevated);
    }
    .nutrition-strip > div {
      display: inline-flex;
      align-items: baseline;
      gap: var(--space-2);
    }
    .nutrition-strip dt {
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
    }
    .nutrition-strip dd {
      margin: 0;
      color: var(--color-fg);
      font-size: var(--text-sm);
      font-weight: 700;
    }
    .detail-footer {
      gap: var(--space-2);
      background: var(--color-bg-elevated);
    }
    .detail-footer .btn {
      min-height: 44px;
    }
    #dm-cook-mode-btn {
      order: -1;
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-accent-fg);
    }
    .schema-overlay {
      background: color-mix(in oklab, var(--color-fg) 62%, transparent);
      backdrop-filter: blur(3px);
    }
    .schema-modal {
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-lg);
    }
    .schema-modal-header {
      border-bottom-color: var(--color-border);
    }
    .schema-modal-header h4 {
      color: var(--color-fg);
    }
    .schema-modal-header button {
      min-width: 44px;
      min-height: 44px;
      color: var(--color-fg-muted);
    }
    #image-capture-overlay .schema-modal {
      max-width: 38rem;
    }
    #image-capture-overlay .schema-modal > div:last-child {
      padding: var(--space-6) !important;
    }
    .cooking-mode-overlay {
      background: var(--color-bg);
      backdrop-filter: none;
    }
    .cooking-mode-container {
      width: min(100%, 54rem);
      min-height: min(42rem, 90vh);
      padding: var(--space-8);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-lg);
    }
    .cooking-mode-step {
      max-width: 34ch;
      font-family: var(--font-display);
    }
    .cooking-mode-controls .btn {
      min-height: 44px;
    }
    @media (max-width: 760px) {
      .sidebar {
        width: 100%;
        background: var(--color-bg-elevated);
        border-right: 0;
        border-top: 1px solid var(--color-border);
        padding: 2px 4px;
        padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
      }
      .nav-item {
        min-height: 44px;
        padding: 3px 2px;
      }
      .sidebar-nav {
        padding: 0;
      }
      .nav-item.active {
        box-shadow: inset 0 3px 0 var(--color-accent);
      }
      .main {
        margin-left: 0;
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
      }
      .topbar {
        top: env(safe-area-inset-top, 0px);
        padding-top: 10px;
      }
      .fab-stack {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
      }
      #toast {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      }
      .panel {
        padding: var(--space-5, 1.25rem) var(--space-4);
      }
      .panel-header {
        margin-bottom: var(--space-6);
      }
      .suggestion-grid {
        grid-template-columns: 1fr;
      }
      .pick-for-us-section {
        padding: var(--space-4);
      }
      .week-add {
        gap: var(--space-2);
      }
      .week-add .btn {
        width: 100%;
      }
      .week-meal-controls .icon-btn-sm,
      .cart-serving-controls .icon-btn-sm {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
      }
      .week-meal-controls .btn-sm {
        min-height: 44px;
      }
      .pantry-remove,
      .cart-check,
      .cart-item-menu > summary,
      .cart-recipe-menu > summary {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
      }
      .cart-row {
        grid-template-columns: 44px minmax(0, 1fr) auto 44px;
      }
      .cart-recipe {
        grid-template-columns: minmax(0, 1fr) auto 44px;
      }
      .detail-ing-item {
        min-height: 44px;
      }
      .recipe-card .card-body {
        padding: var(--space-4);
      }
      .card-toolbar .icon-btn {
        min-width: 44px;
        min-height: 44px;
      }
      .detail-modal {
        left: 0;
      }
      .detail-body {
        grid-template-columns: 1fr;
      }
      .detail-ingredients {
        padding: var(--space-6) var(--space-4);
      }
      .detail-steps {
        padding: var(--space-6) var(--space-4) var(--space-10);
      }
      .detail-footer {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-inline: var(--space-2);
      }
      .detail-footer .btn {
        min-width: 0;
        padding-inline: var(--space-1);
        font-size: var(--text-xs);
      }
      .nutrition-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
      }
      .nutrition-strip > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .drawer-body {
        padding-inline: var(--space-4);
      }
      .form-row {
        flex-direction: column;
      }
      .schema-overlay {
        padding: var(--space-3);
      }
      .schema-modal {
        max-height: calc(100dvh - var(--space-6));
      }
      .cooking-mode-container {
        width: 100%;
        min-height: 100dvh;
        padding: max(var(--space-5, 1.25rem), env(safe-area-inset-top)) var(--space-4) max(var(--space-5, 1.25rem), env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
      }
      .cooking-mode-step {
        font-size: var(--text-xl) !important;
      }
      .pantry-add {
        flex-direction: column;
      }
      .pantry-add .btn {
        width: 100%;
      }
      .pantry-search-wrap {
        max-width: none;
      }
      .pantry-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--space-1);
        scrollbar-width: none;
      }
      .pantry-filters::-webkit-scrollbar {
        display: none;
      }
      .pantry-filter {
        flex: 0 0 auto;
        min-height: 44px;
      }
      .pantry-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .pantry-items {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }
      .pantry-tag {
        width: 100%;
        border-radius: var(--radius-md);
      }
      .pantry-tag-copy {
        min-width: 0;
        flex: 1;
      }
      .pantry-tag-copy > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pantry-item-modal {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        translate: 0 0;
        width: auto;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
        border-radius: calc(var(--radius-lg) + 8px);
      }
      .pantry-item-header {
        padding: var(--space-4);
        padding-top: max(var(--space-4), env(safe-area-inset-top, 0px));
      }
      .pantry-item-body {
        padding: var(--space-4);
      }
      .pantry-item-measurement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .pantry-item-measurement-grid > :first-child {
        grid-column: 1 / -1;
      }
      .pantry-item-footer {
        padding-inline: var(--space-4);
      }
      .pantry-item-footer .btn {
        flex: 1 1 0;
        padding-inline: var(--space-2);
      }
      .pantry-recipe-row {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 60px;
      }
      .pantry-recipe-availability {
        grid-column: 2;
        justify-self: start;
        max-width: 100%;
        text-align: left;
      }
      .pantry-recipe-toggle {
        width: 100%;
      }
      .pantry-remove-confirm > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .theme-recommendation {
        left: 12px;
        right: 12px;
        width: auto;
      }
      .auth-signout {
        min-height: 44px;
      }
    }
  }
  @layer app {
    .detail-ing-item {
      cursor: default;
      padding: 4px;
      gap: var(--space-2);
    }
    .detail-ing-toggle {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      min-height: 44px;
      flex: 1 1 auto;
      padding: 5px 6px;
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: inherit;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .detail-ing-toggle:focus-visible,
    .ingredient-correction-action:focus-visible {
      outline: 3px solid var(--color-focus-ring);
      outline-offset: 2px;
    }
    .detail-ing-text {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .ingredient-review-status {
      flex: 0 0 auto;
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      background: color-mix(in oklab, var(--color-success) 14%, transparent);
      color: var(--color-success);
      font-size: var(--text-xs);
      font-weight: 700;
    }
    .ingredient-correction-action {
      flex: 0 0 auto;
      min-width: 44px;
      min-height: 44px;
      padding: 0 var(--space-2);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-bg-elevated);
      color: var(--color-accent);
      font: inherit;
      font-size: var(--text-xs);
      font-weight: 700;
      cursor: pointer;
    }
    .ingredient-correction-overlay {
      z-index: 179;
    }
    .ingredient-correction-modal {
      position: fixed;
      inset: 50% auto auto 50%;
      z-index: 180;
      translate: -50% -50%;
      display: flex;
      flex-direction: column;
      width: min(40rem, calc(100vw - 2rem));
      min-width: 0;
      max-width: calc(100vw - 2rem);
      max-height: calc(100dvh - 2rem);
      overflow: hidden;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      box-shadow: var(--shadow-lg);
    }
    .ingredient-correction-modal[hidden],
    .ingredient-correction-overlay[hidden] {
      display: none;
    }
    .ingredient-correction-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-5);
      border-bottom: 1px solid var(--color-border);
    }
    .ingredient-correction-header h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-xl);
    }
    .ingredient-correction-header p {
      margin: var(--space-1) 0 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .ingredient-correction-eyebrow {
      color: var(--color-accent) !important;
      font-size: var(--text-xs) !important;
      font-weight: 800;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .ingredient-correction-close {
      min-width: 44px;
      min-height: 44px;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--color-bg-sunken);
      color: var(--color-fg);
      font-size: var(--text-xl);
      cursor: pointer;
    }
    .ingredient-correction-form {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: column;
    }
    .ingredient-correction-body {
      display: grid;
      gap: var(--space-4);
      padding: var(--space-5);
      overflow-y: auto;
    }
    .ingredient-source-evidence {
      display: grid;
      gap: var(--space-2);
      min-width: 0;
      max-width: 100%;
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-sunken);
    }
    .ingredient-source-evidence > *,
    .ingredient-source-evidence output {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .ingredient-source-evidence output {
      font-weight: 700;
    }
    .ingredient-source-evidence small,
    .ingredient-correction-review-status {
      color: var(--color-fg-muted);
      font-size: var(--text-xs);
    }
    .ingredient-source-evidence a {
      color: var(--color-accent);
      overflow-wrap: anywhere;
    }
    .ingredient-correction-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
      min-width: 0;
    }
    .ingredient-correction-grid .form-group,
    .ingredient-correction-grid :where(input, select) {
      min-width: 0;
      max-width: 100%;
    }
    .ingredient-correction-error {
      margin: 0;
      color: var(--color-danger);
      font-size: var(--text-sm);
      font-weight: 700;
    }
    .ingredient-correction-pending {
      min-height: 1.25rem;
      margin: 0;
      color: var(--color-fg-muted);
      font-size: var(--text-sm);
    }
    .ingredient-correction-footer {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-3);
      padding: var(--space-4) var(--space-5);
      border-top: 1px solid var(--color-border);
      background: var(--color-bg);
    }
    .ingredient-correction-footer .btn {
      min-height: 44px;
    }
    @media (max-width: 720px) {
      .detail-ing-item {
        flex-wrap: wrap;
      }
      .ingredient-review-status {
        margin-left: 38px;
      }
      .ingredient-correction-modal {
        inset: auto 8px max(8px, env(safe-area-inset-bottom, 0px));
        translate: 0 0;
        width: auto;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
      }
      .ingredient-correction-header,
      .ingredient-correction-body {
        padding: var(--space-4);
      }
      .ingredient-correction-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .ingredient-source-evidence a {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 44px;
        max-width: 100%;
        padding-block: var(--space-2);
      }
      .ingredient-correction-footer {
        padding-inline: var(--space-4);
        flex-wrap: wrap;
      }
      .ingredient-correction-footer .btn {
        flex: 1 1 10rem;
        min-width: 0;
        padding-inline: var(--space-2);
        overflow-wrap: anywhere;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .ingredient-correction-modal,
      .ingredient-correction-overlay {
        transition: none;
        animation: none;
      }
    }
  }
  @layer app {
    .tour-layer {
      position: fixed;
      inset: 0;
      z-index: 2000;
    }
    .tour-layer[hidden] {
      display: none;
    }
    .tour-scrim {
      position: fixed;
      inset: 0;
      background: color-mix(in oklab, var(--color-fg) 68%, transparent);
      backdrop-filter: blur(2px);
    }
    .tour-layer.has-spotlight .tour-scrim {
      background: transparent;
      backdrop-filter: none;
    }
    .tour-spotlight {
      position: fixed;
      z-index: 501;
      box-sizing: border-box;
      border: 3px solid var(--color-accent);
      border-radius: var(--radius-md);
      box-shadow:
        0 0 0 2px var(--color-bg-elevated),
        0 0 0 9999px color-mix(in oklab, var(--color-fg) 68%, transparent),
        var(--shadow-lg);
      pointer-events: none;
    }
    .tour-spotlight[hidden] {
      display: none;
    }
    .tour-target {
      position: relative;
      border-radius: var(--radius-md);
      scroll-margin: 8rem;
    }
    .tour-dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 502;
      box-sizing: border-box;
      width: min(24rem, calc(100vw - 2rem));
      max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-6);
      transform: translate(-50%, -50%);
      border: 1px solid color-mix(in oklab, var(--color-accent) 32%, var(--color-border));
      border-radius: var(--radius-lg);
      background: var(--color-bg-elevated);
      color: var(--color-fg);
      box-shadow: var(--shadow-lg);
    }
    .tour-dialog[data-placement=right],
    .tour-dialog[data-placement=left],
    .tour-dialog[data-placement=bottom],
    .tour-dialog[data-placement=top] {
      transform: none;
    }
    .tour-dialog:focus {
      outline: none;
    }
    .tour-dialog:focus-visible {
      outline: 3px solid var(--color-focus-ring);
      outline-offset: 3px;
    }
    .tour-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }
    .tour-progress {
      color: var(--color-accent);
      font-size: var(--text-xs);
      font-weight: 800;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .tour-skip {
      min-height: 44px;
      padding-inline: var(--space-2);
      border: 0;
      background: transparent;
      color: var(--color-fg-muted);
      font: inherit;
      font-size: var(--text-sm);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .tour-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
    }
    .tour-body {
      margin: var(--space-3) 0 var(--space-6);
      color: var(--color-fg-muted);
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
    }
    .tour-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2);
    }
    .tour-actions .btn {
      min-height: 44px;
    }
    .tour-back {
      margin-right: auto;
    }
    body.tour-open {
      overflow: hidden;
    }
    @media (max-width: 720px) {
      .tour-dialog,
      .tour-dialog[data-placement] {
        top: auto;
        left: var(--space-3);
        right: var(--space-3);
        bottom: max(var(--space-3), env(safe-area-inset-bottom));
        width: auto;
        max-height: min(58dvh, calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        padding: var(--space-5, 1.25rem);
        transform: none;
      }
      .tour-title {
        font-size: var(--text-xl);
      }
      .tour-body {
        margin-bottom: var(--space-4);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .tour-target {
        scroll-behavior: auto;
      }
      .tour-dialog,
      .tour-scrim {
        transition: none;
        animation: none;
      }
    }
  }
}

/* scripts/.css-entry.css */