@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.5

package/bundled-test-harness/assets/dashboard-CzN49x74.css

@@ -0,0 +1,2400 @@
+
+  @layer PretComponent {
+    .pretui-collapsible[data-scopedcss-21cf1356bc-55cb741b11] {
+      display: grid;
+      min-inline-size: 0;
+      font-size: var(--pretui-size-m, var(--text-ui-md, 0.78rem));
+      letter-spacing: var(--track-ui, 0.01em);
+      color: var(--foreground);
+    }
+    .pretui-collapsible[data-size='xs'][data-scopedcss-21cf1356bc-55cb741b11] {
+      font-size: var(--pretui-size-xs, var(--text-ui-xs, 0.66rem));
+    }
+    .pretui-collapsible[data-size='s'][data-scopedcss-21cf1356bc-55cb741b11] {
+      font-size: var(--pretui-size-s, var(--text-ui-sm, 0.72rem));
+    }
+    .pretui-collapsible[data-size='l'][data-scopedcss-21cf1356bc-55cb741b11] {
+      font-size: var(--pretui-size-l, var(--text-ui-lg, 0.875rem));
+    }
+    .pretui-collapsible[data-size='xl'][data-scopedcss-21cf1356bc-55cb741b11] {
+      font-size: var(--pretui-size-xl, var(--text-ui-xl, 1rem));
+    }
+    .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11] {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+      justify-self: start;
+      min-block-size: var(--pretui-collapsible-h, 2.24em);
+      padding: 0 var(--pretui-collapsible-px, 0.5em);
+      margin-inline-start: calc(var(--pretui-collapsible-px, 0.5em) * -1);
+      border: 0;
+      border-radius: var(--radius-chip, 6px);
+      background: none;
+      color: inherit;
+      font: inherit;
+      letter-spacing: inherit;
+      font-weight: 600;
+      text-align: start;
+      cursor: pointer;
+      min-inline-size: 0;
+    }
+    .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11]:hover {
+      background: var(--hover, var(--boxel-100));
+    }
+    .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 1px;
+    }
+    .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11]:active {
+      transform: scale(0.985);
+    }
+    .pretui-collapsible[data-disabled='true'] .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11] {
+      opacity: 0.45;
+      cursor: default;
+    }
+    .pretui-collapsible[data-disabled='true'] .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11]:hover {
+      background: none;
+    }
+    .pretui-collapsible-label[data-scopedcss-21cf1356bc-55cb741b11] {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .pretui-collapsible-caret[data-scopedcss-21cf1356bc-55cb741b11] {
+      flex: none;
+      inline-size: 0.45em;
+      block-size: 0.45em;
+      border-inline-end: 1.5px solid currentColor;
+      border-block-end: 1.5px solid currentColor;
+      transform: rotate(-45deg) translate(-0.1em, -0.1em);
+      color: var(--muted-foreground);
+      transition: transform var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, ease);
+    }
+    .pretui-collapsible-trigger[data-state='open'] .pretui-collapsible-caret[data-scopedcss-21cf1356bc-55cb741b11] {
+      transform: rotate(45deg) translate(-0.05em, -0.15em);
+    }
+    .pretui-collapsible-fold[data-scopedcss-21cf1356bc-55cb741b11] {
+      display: grid;
+      grid-template-rows: 0fr;
+      visibility: hidden;
+      transition: grid-template-rows var(--pretui-dur-morph, 300ms)
+          var(--pretui-ease-morph, cubic-bezier(0.3, 0.7, 0.2, 1.02)),
+        visibility 0s linear var(--pretui-dur-morph, 300ms);
+    }
+    .pretui-collapsible-fold[data-state='open'][data-scopedcss-21cf1356bc-55cb741b11] {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      transition: grid-template-rows var(--pretui-dur-morph, 300ms)
+          var(--pretui-ease-morph, cubic-bezier(0.3, 0.7, 0.2, 1.02)),
+        visibility 0s;
+    }
+    .pretui-collapsible-inner[data-scopedcss-21cf1356bc-55cb741b11] {
+      min-block-size: 0;
+      min-inline-size: 0;
+      overflow: hidden;
+    }
+    /* Reduced motion lands on the END state — open is open, closed is
+       closed, never a frozen midpoint of the row track. */
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-collapsible-fold[data-scopedcss-21cf1356bc-55cb741b11],
+      .pretui-collapsible-fold[data-state='open'][data-scopedcss-21cf1356bc-55cb741b11],
+      .pretui-collapsible-caret[data-scopedcss-21cf1356bc-55cb741b11] {
+        transition: none;
+      }
+      .pretui-collapsible-trigger[data-scopedcss-21cf1356bc-55cb741b11]:active {
+        transform: none;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-optioncard[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      --oc-pad: var(--space-4, 0.6875rem);
+      --oc-gap: var(--space-3, 0.5rem);
+      --oc-text: var(--text-ui-md, 0.78rem);
+      --oc-small: var(--text-ui-sm, 0.72rem);
+      --oc-strong: var(--weight-strong, 600);
+      --oc-radius: var(--radius-surface, 0.625rem);
+      --oc-snap: var(--pretui-dur-snap, 180ms) var(--pretui-ease-snap, ease);
+      --oc-shadow: var(--pretui-shadow-control, 0 1px 2px rgb(0 0 0 / 0.04));
+      --oc-highlight: var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+      --oc-tone: var(--pretui-choice-card-tone, var(--primary));
+      --oc-mark: 0.9375rem;
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--oc-gap);
+      min-inline-size: 0;
+      padding: var(--oc-pad);
+      padding-inline-end: calc(var(--oc-pad) * 2 + var(--oc-mark));
+      background-color: var(--card);
+      color: var(--card-foreground);
+      border-radius: var(--oc-radius);
+      box-shadow:
+        0 0 0 1px var(--border),
+        var(--oc-shadow);
+      font-size: var(--oc-text);
+      cursor: pointer;
+      transition:
+        box-shadow var(--oc-snap),
+        background-color var(--oc-snap);
+    }
+    /* --hover is translucent, so it's laid over the card, not in place of it */
+    .pretui-optioncard[data-scopedcss-8f2c6951d3-fb0eb20c4a]:hover {
+      background-image: linear-gradient(var(--hover), var(--hover));
+    }
+    .pretui-optioncard[data-selected='true'][data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      box-shadow:
+        0 0 0 1px var(--oc-tone),
+        0 0 0 4px color-mix(in oklch, var(--oc-tone) 12%, transparent),
+        var(--oc-shadow);
+      /* Forced colors drop the box shadows; this outline, unseen
+         otherwise, is repainted there, so the chosen card still stands
+         out. The focus outline below is more specific and wins. */
+      outline: 2px solid transparent;
+      outline-offset: -2px;
+    }
+    .pretui-optioncard[data-scopedcss-8f2c6951d3-fb0eb20c4a]:has(.pretui-optioncard-input:focus-visible) {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+    .pretui-optioncard[data-disabled='true'][data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      opacity: 0.45;
+      cursor: default;
+    }
+    /* the real control: in the tree and in the tab order, painted by the mark */
+    .pretui-optioncard-input[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+    .pretui-optioncard-media[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      flex: none;
+      display: inline-flex;
+    }
+    .pretui-optioncard-body[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      min-inline-size: 0;
+    }
+    .pretui-optioncard-title[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      font-weight: var(--oc-strong);
+    }
+    .pretui-optioncard-desc[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      font-size: var(--oc-small);
+      color: var(--muted-foreground);
+    }
+    .pretui-optioncard-meta[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      flex: none;
+      font-size: var(--oc-small);
+      font-variant-numeric: tabular-nums;
+      color: var(--muted-foreground);
+      white-space: nowrap;
+    }
+    .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      position: absolute;
+      inset-block-start: var(--oc-pad);
+      inset-inline-end: var(--oc-pad);
+      inline-size: var(--oc-mark);
+      block-size: var(--oc-mark);
+      display: grid;
+      place-content: center;
+      border-radius: 50%;
+      background-color: var(--pretui-control-rest, var(--field));
+      box-shadow: 0 0 0 1px var(--pretui-control-border, var(--input));
+      transition:
+        background-color var(--oc-snap),
+        box-shadow var(--oc-snap);
+    }
+    .pretui-optioncard[data-kind='checkbox'] .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      border-radius: 0.3125rem;
+    }
+    .pretui-optioncard[data-selected='true'] .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a] {
+      background-color: var(--oc-tone);
+      box-shadow:
+        0 0 0 1px var(--oc-tone),
+        var(--oc-highlight);
+    }
+    .pretui-optioncard[data-selected='true'] .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a]::before {
+      content: '';
+      display: block;
+    }
+    .pretui-optioncard[data-kind='radio'][data-selected='true'] .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a]::before {
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      border-radius: 50%;
+      background-color: var(--card);
+      box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
+    }
+    .pretui-optioncard[data-kind='checkbox'][data-selected='true'] .pretui-optioncard-mark[data-scopedcss-8f2c6951d3-fb0eb20c4a]::before {
+      inline-size: 0.5625rem;
+      block-size: 0.5625rem;
+      background-color: var(--primary-foreground);
+      clip-path: polygon(14% 47%, 38% 70%, 86% 18%, 96% 30%, 39% 89%, 4% 58%);
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-choicecards[data-scopedcss-8f2c6951d3-c7147e5aa6] {
+      --cc-gap: var(--space-3, 0.5rem);
+      --cc-min: 11rem;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--cc-gap);
+    }
+    .pretui-choicecards[data-orientation='horizontal'][data-scopedcss-8f2c6951d3-c7147e5aa6] {
+      grid-template-columns: repeat(auto-fit, minmax(var(--cc-min), 1fr));
+    }
+    .pretui-choicecards[data-orientation='horizontal'][data-columns='2'][data-scopedcss-8f2c6951d3-c7147e5aa6] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .pretui-choicecards[data-orientation='horizontal'][data-columns='3'][data-scopedcss-8f2c6951d3-c7147e5aa6] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .pretui-choicecards[data-orientation='horizontal'][data-columns='4'][data-scopedcss-8f2c6951d3-c7147e5aa6] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  .agent-mark[data-scopedcss-6925226061-a445c6f0a0] {
+    --_agent-mark-size: 2rem;
+    display: inline-flex;
+    flex: none;
+    width: var(--_agent-mark-size);
+    height: var(--_agent-mark-size);
+  }
+  .agent-mark.is-small[data-scopedcss-6925226061-a445c6f0a0] {
+    --_agent-mark-size: 1.5rem;
+  }
+  .agent-mark-image[data-scopedcss-6925226061-a445c6f0a0] {
+    width: 100%;
+    height: 100%;
+  }
+  .agent-mark-tile[data-scopedcss-6925226061-a445c6f0a0] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: calc(var(--_agent-mark-size) * 7 / 32);
+    background-color: var(--boxel-light);
+    color: var(--boxel-dark);
+  }
+  .agent-mark-icon[data-scopedcss-6925226061-a445c6f0a0] {
+    width: 75%;
+    height: 75%;
+  }
+
+  .agents[data-scopedcss-882b8dc7d2-df271e6598] {
+    --_agents-panel-max-width: 40rem;
+    --_agents-step-number-size: 1.5rem;
+    /* The code line is at least as tall as its Copy button, the
+       smallest Pret UI button (24px), so the two sit level. */
+    --_agents-code-line-height: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-lg);
+  }
+
+  .agent-panel-row[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: grid;
+    grid-template-columns: minmax(0, var(--_agents-panel-max-width));
+  }
+  .agent-panel[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-sm);
+    min-width: 0;
+    padding: var(--boxel-sp-lg);
+    border: 1px solid var(--boxel-light-10);
+    border-radius: var(--boxel-border-radius-xl);
+    background-color: var(--boxel-700);
+    color: var(--foreground);
+  }
+  .panel-head[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-xs);
+  }
+  .panel-title[data-scopedcss-882b8dc7d2-df271e6598] {
+    margin: 0;
+    font-size: var(--boxel-font-size);
+    font-weight: 700;
+  }
+  .panel-note[data-scopedcss-882b8dc7d2-df271e6598] {
+    margin: 0;
+    font-size: var(--boxel-font-size-sm);
+    color: var(--muted-foreground);
+  }
+
+  .step-list[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .step[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--boxel-sp-sm);
+  }
+  .step-number[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--_agents-step-number-size);
+    height: var(--_agents-step-number-size);
+    border-radius: 50%;
+    background-color: var(--secondary);
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-xs);
+    font-weight: 700;
+    color: var(--secondary-foreground);
+  }
+  /* Done is a filled highlight disc with a check, as in Get started; the
+     next step is ringed in the highlight, not filled. */
+  .step.is-next .step-number[data-scopedcss-882b8dc7d2-df271e6598] {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1.5px var(--boxel-highlight);
+    color: var(--boxel-highlight);
+  }
+  .step.is-done .step-number[data-scopedcss-882b8dc7d2-df271e6598] {
+    background-color: var(--boxel-highlight);
+    color: var(--boxel-highlight-foreground);
+  }
+  .step-content[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--boxel-sp-6xs);
+    flex: 1;
+    min-width: 0;
+  }
+  .step-title[data-scopedcss-882b8dc7d2-df271e6598] {
+    font-size: var(--boxel-font-size-sm);
+    font-weight: 600;
+    color: var(--foreground);
+  }
+  .step.is-later .step-title[data-scopedcss-882b8dc7d2-df271e6598] {
+    color: var(--muted-foreground);
+  }
+  .step-note[data-scopedcss-882b8dc7d2-df271e6598] {
+    font-size: var(--boxel-font-size-xs);
+    color: var(--muted-foreground);
+  }
+  .workspace-pick[data-scopedcss-882b8dc7d2-df271e6598] {
+    width: min(100%, 20rem);
+    margin-top: var(--boxel-sp-4xs);
+  }
+  /* Select grows its text on touch screens to keep iOS from zooming
+     into its search box. This one has no search box, so it and its list
+     keep the step's small text. */
+  @media (pointer: coarse) {
+    .workspace-pick[data-scopedcss-882b8dc7d2-df271e6598] {
+      --boxel-select-trigger-font-size: var(--boxel-font-size-xs);
+      --boxel-select-trigger-line-height: var(--boxel-line-height-xs);
+    }
+  }
+  .step-text[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--boxel-sp-2xs);
+    align-self: stretch;
+    margin-top: var(--boxel-sp-4xs);
+  }
+  .step-code[data-scopedcss-882b8dc7d2-df271e6598] {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    min-height: var(--_agents-code-line-height);
+    padding: var(--boxel-sp-6xs) var(--boxel-sp-xs);
+    border-radius: var(--boxel-border-radius-sm);
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    /* The text is an anonymous flex item, which won't shrink below its
+       min-content width; only anywhere lets a long URL count as
+       breakable there. */
+    overflow-wrap: anywhere;
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-xs);
+    line-height: var(--boxel-line-height-xs);
+  }
+  .copy[data-scopedcss-882b8dc7d2-df271e6598] {
+    --pretui-button-h: var(--_agents-code-line-height);
+    flex: none;
+  }
+  .steps-toggle[data-scopedcss-882b8dc7d2-df271e6598] {
+    align-self: flex-start;
+  }
+  .describe-it[data-scopedcss-882b8dc7d2-df271e6598] {
+    align-self: flex-start;
+  }
+  .show-coding-agents[data-scopedcss-882b8dc7d2-df271e6598] {
+    align-self: flex-start;
+  }
+  /* Centered on the label's line rather than sitting on its baseline. */
+  .show-coding-agents-icon[data-scopedcss-882b8dc7d2-df271e6598] {
+    vertical-align: middle;
+  }
+
+  .flyout-header[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-6xs);
+    padding: var(--boxel-sp-4xs) var(--boxel-sp-xs) var(--boxel-sp-xs);
+  }
+  .flyout-title[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    font-size: var(--boxel-font-size);
+    font-weight: 700;
+  }
+  .flyout-hint[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    font-size: var(--boxel-font-size-xs);
+    color: var(--muted-foreground);
+  }
+  .flyout-subhead[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    display: block;
+    padding: var(--boxel-sp-sm) var(--boxel-sp-xs) var(--boxel-sp-4xs);
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-xs);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .flyout-row[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    --pretui-button-h: 2.5rem;
+    --pretui-button-px: var(--boxel-sp-xs);
+    --pretui-button-radius: var(--boxel-border-radius-lg);
+    justify-content: flex-start;
+    width: 100%;
+  }
+  /* The panel's content width, less the row's padding and border, so a
+     long session name truncates instead of widening the row. */
+  .row-content[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-sm);
+    width: calc(
+      var(--section-rail-flyout-content-width) - 2 * var(--boxel-sp-xs) -
+        2px
+    );
+  }
+  .row-title[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    font-size: var(--boxel-font-size-sm);
+    font-weight: 600;
+  }
+  .row-meta[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    flex: none;
+    font-size: var(--boxel-font-size-xs);
+    color: var(--muted-foreground);
+  }
+  .row-picked[data-scopedcss-c93971a45c-d9e0d2e7e6] {
+    flex: none;
+    color: var(--boxel-highlight);
+  }
+
+  .archived-row[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-sm);
+    min-width: 0;
+    min-height: var(--dashboard-row-height);
+    padding: var(--boxel-sp-xs);
+    border-radius: var(--dashboard-tile-radius);
+    background-color: var(--dashboard-row-tint);
+    box-shadow: inset 0 0 0 1px var(--boxel-light-25);
+    color: var(--boxel-light);
+  }
+  .thumb[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--dashboard-row-height) - 2 * var(--boxel-sp-xs));
+    height: 100%;
+    border-radius: var(--boxel-border-radius-lg);
+    background-color: var(--dashboard-thumb-tint);
+  }
+  .realm-icon-wrapper[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    position: relative;
+    display: flex;
+    border-radius: var(--boxel-border-radius-sm);
+    box-shadow: 0 0.125rem 0.375rem var(--boxel-dark-40);
+  }
+  .realm-icon-wrapper[data-scopedcss-443a7d4fc7-d92e4623bf]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--boxel-light-50);
+    pointer-events: none;
+  }
+  .realm-icon[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    --boxel-realm-icon-size: 1.5rem;
+    --boxel-realm-icon-border-radius: var(--boxel-border-radius-sm);
+    --boxel-realm-icon-background-color: var(--boxel-light);
+  }
+  .info[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--boxel-sp-4xs);
+    min-width: 0;
+  }
+  .name[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    display: block;
+    overflow: hidden;
+    font: 600 var(--boxel-font-sm);
+    letter-spacing: var(--boxel-lsp);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Wraps, so a long server error reads whole. */
+  .restore-error[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    color: var(--boxel-danger);
+    font: 600 var(--boxel-font-xs);
+    overflow-wrap: break-word;
+  }
+  .restore-btn[data-scopedcss-443a7d4fc7-d92e4623bf] {
+    flex: none;
+  }
+
+  @layer PretComponent {
+    .pretui-alert[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      --pretui-alert-mix: 20%;
+      display: flex;
+      gap: var(--boxel-sp-xs);
+      padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
+      border-radius: var(--boxel-border-radius);
+      background-color: color-mix(in oklch, var(--pretui-alert-hue) var(--pretui-alert-mix), var(--card));
+      color: var(--foreground);
+      box-shadow: 0 0 0 1px color-mix(in oklch, var(--pretui-alert-hue) 25%, var(--border));
+      font-size: var(--boxel-font-size-xs);
+    }
+    .pretui-alert-glyph[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      flex: none;
+      display: grid;
+      place-items: center;
+      background-color: var(--pretui-alert-hue);
+      color: var(--pretui-alert-on-hue);
+      margin-top: 1px;
+    }
+    .pretui-alert-body[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      display: grid;
+      gap: var(--boxel-sp-6xs);
+      min-width: 0;
+    }
+    .pretui-alert-title[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      margin: 0;
+      font-weight: 600;
+    }
+    .pretui-alert-action[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      margin-top: var(--boxel-sp-3xs);
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-avatar[data-scopedcss-5178d38d8c-2454ccc101] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* the default diameter, declared once */
+      --_avatar-size: var(--pretui-avatar-size, 1.5rem);
+      --_avatar-hue: var(--pretui-chip-hue, var(--primary));
+      width: var(--_avatar-size);
+      height: var(--_avatar-size);
+      /* 0.42 of the diameter; rounded to the whole pixel below where
+         round() is supported */
+      font-size: calc(var(--_avatar-size) * 0.42);
+      border-radius: 50%;
+      font-family: var(--font-mono);
+      font-weight: 600;
+      background-color: color-mix(in oklch, var(--_avatar-hue) 16%, var(--card));
+      color: var(--foreground);
+      /* drawn inside the box: an outer ring is clipped by a scroll
+         container when the avatar sits flush with its edge. An outline
+         paints over the photo, where an inset shadow would sit under it. */
+      outline: 1px solid color-mix(in oklch, var(--_avatar-hue) 28%, var(--border));
+      outline-offset: -1px;
+      overflow: hidden;
+      flex: none;
+    }
+    /* Gated rather than declared after the calc() fallback: a value
+       containing var() is accepted at parse time, so an engine without
+       round() would keep it, fail at computed-value time, and inherit
+       the parent's font size instead of using the fallback. */
+    @supports (font-size: round(1px, 1px)) {
+      .pretui-avatar[data-scopedcss-5178d38d8c-2454ccc101] {
+        font-size: round(calc(var(--_avatar-size) * 0.42), 1px);
+      }
+    }
+    /* A photo gets a neutral ring: the name's hue carries no meaning once
+       the photo shows. The ring sits on the root, whose overflow: hidden
+       shape would clip an outline on the square img. */
+    .pretui-avatar[data-has-image][data-scopedcss-5178d38d8c-2454ccc101] {
+      outline-color: color-mix(in oklch, var(--foreground) 10%, transparent);
+    }
+    .pretui-avatar[data-shape='rounded'][data-scopedcss-5178d38d8c-2454ccc101] {
+      /* half the card's corner: never the same radius inside a rounded card */
+      border-radius: var(--pretui-avatar-radius, calc(var(--radius) / 2));
+    }
+    .pretui-avatar[data-shape='square'][data-scopedcss-5178d38d8c-2454ccc101] {
+      border-radius: 0;
+    }
+    .pretui-avatar img[data-scopedcss-5178d38d8c-2454ccc101] {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-dialog[data-scopedcss-fd5ccb4071-98262ab512] {
+      border: 0;
+      padding: 0;
+      background: var(--card);
+      color: var(--foreground);
+      border-radius: var(--radius-surface, 10px);
+      box-shadow: var(--pretui-shadow-overlay, 0 0 0 1px var(--border), 0 12px 40px rgb(16 24 40 / 0.18));
+      width: min(560px, calc(100vw - 32px));
+      max-height: calc(100dvh - 64px);
+      font-family: var(--font-sans);
+      font-size: var(--text-body, 15px);
+    }
+    .pretui-dialog[data-size='s'][data-scopedcss-fd5ccb4071-98262ab512] {
+      width: min(400px, calc(100vw - 32px));
+    }
+    .pretui-dialog[data-size='l'][data-scopedcss-fd5ccb4071-98262ab512] {
+      width: min(760px, calc(100vw - 32px));
+    }
+    .pretui-dialog[data-scopedcss-fd5ccb4071-98262ab512]::backdrop {
+      background: var(--pretui-overlay-scrim, rgb(16 24 40 / 0.4));
+    }
+    .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+      opacity: 1;
+      transform: none;
+      transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
+        transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+    @starting-style {
+      .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+        opacity: 0;
+        transform: translateY(6px) scale(0.98);
+      }
+    }
+    .pretui-dialog-inner[data-scopedcss-fd5ccb4071-98262ab512] {
+      display: grid;
+      gap: var(--space-4, 11px);
+      padding: var(--space-6, 19px);
+    }
+    .pretui-dialog-title[data-scopedcss-fd5ccb4071-98262ab512] {
+      font-size: var(--text-heading, 19px);
+      font-weight: var(--weight-heading, 700);
+      letter-spacing: var(--track-heading, -0.02em);
+    }
+    .pretui-dialog-body[data-scopedcss-fd5ccb4071-98262ab512] {
+      color: var(--muted-foreground);
+      line-height: calc(var(--leading-body, 24px) / var(--text-body, 15px));
+    }
+    .pretui-dialog-footer[data-scopedcss-fd5ccb4071-98262ab512] {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-3, 8px);
+      border-top: 1px solid var(--border);
+      padding-top: var(--space-4, 11px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+        transition: none;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-item[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      display: flex;
+      align-items: center;
+      gap: var(--pretui-item-gap, var(--space-4, 11px));
+      min-width: 0;
+      font-size: var(--text-ui-md, 12.5px);
+      letter-spacing: var(--track-ui, 0.01em);
+      color: var(--foreground);
+    }
+    .pretui-item[data-align='start'][data-scopedcss-8d0ffb3c65-113e8e2955] {
+      align-items: flex-start;
+    }
+    .pretui-item[data-size='xs'][data-scopedcss-8d0ffb3c65-113e8e2955] {
+      font-size: 10.5px;
+    }
+    .pretui-item[data-size='s'][data-scopedcss-8d0ffb3c65-113e8e2955] {
+      font-size: var(--text-ui-sm, 11.5px);
+    }
+    .pretui-item[data-size='l'][data-scopedcss-8d0ffb3c65-113e8e2955] {
+      font-size: 14px;
+    }
+    .pretui-item[data-size='xl'][data-scopedcss-8d0ffb3c65-113e8e2955] {
+      font-size: 16px;
+    }
+    .pretui-item-lead[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      flex: none;
+      display: flex;
+      align-items: center;
+    }
+    /* min-width:0 is half the fix; without the three truncation
+       declarations on the text it hard-clips instead of ellipsising
+       */
+    .pretui-item-body[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: grid;
+      gap: 2px;
+    }
+    .pretui-item-title[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    }
+    .pretui-item[data-wrap='true'] .pretui-item-title[data-scopedcss-8d0ffb3c65-113e8e2955],
+    .pretui-item[data-wrap='true'] .pretui-item-desc[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      overflow: visible;
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      color: inherit;
+      text-decoration: none;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-113e8e2955]:hover {
+      text-decoration: underline;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-113e8e2955]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+      border-radius: 3px;
+    }
+    .pretui-item-desc[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--muted-foreground);
+      font-size: 0.94em;
+    }
+    .pretui-item-content[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      min-width: 0;
+      margin-block-start: 2px;
+    }
+    .pretui-item-trail[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      color: var(--muted-foreground);
+      font-size: 0.94em;
+      font-variant-numeric: tabular-nums;
+    }
+    .pretui-item-actions[data-scopedcss-8d0ffb3c65-113e8e2955] {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: var(--space-2, 6px);
+    }
+    /* Unnamed container query on the nearest ancestor container (List's
+       row, or whatever the caller made a container). At this width the
+       trailing meta wraps under the body rather than crushing the title. */
+    @container (max-width: 22rem) {
+      .pretui-item[data-scopedcss-8d0ffb3c65-113e8e2955] {
+        flex-wrap: wrap;
+      }
+      .pretui-item-trail[data-scopedcss-8d0ffb3c65-113e8e2955] {
+        margin-inline-start: auto;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-broken[data-scopedcss-ff94cba008-71a083bb1d] {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 8px;
+      border-radius: 6px;
+      background: var(--inset, var(--boxel-100));
+      color: var(--ink-3, var(--boxel-400));
+      font-size: var(--text-ui-sm, 11.5px);
+      font-family: var(--font-mono);
+      outline: 1px dashed var(--line-strong, var(--boxel-400));
+      outline-offset: -1px;
+      text-decoration: line-through;
+      text-decoration-color: color-mix(in oklch, var(--ink-3, var(--boxel-400)) 50%, transparent);
+    }
+    .pretui-broken svg[data-scopedcss-ff94cba008-71a083bb1d] {
+      flex: none;
+    }
+    .pretui-broken-id[data-scopedcss-ff94cba008-71a083bb1d] {
+      opacity: 0.7;
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-empty[data-scopedcss-b2f493050b-b045568bce] {
+      display: grid;
+      place-items: center;
+      text-align: center;
+      gap: var(--boxel-sp-xs);
+      padding: var(--boxel-sp-3xl) var(--boxel-sp-lg);
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius);
+      background-color: var(--canvas);
+      color: var(--foreground);
+    }
+    /* compact: the well an empty note sits in inside a card section */
+    .pretui-empty[data-size='s'][data-scopedcss-b2f493050b-b045568bce] {
+      padding: var(--boxel-sp);
+    }
+    .pretui-empty-texture[data-scopedcss-b2f493050b-b045568bce] {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: radial-gradient(
+        ellipse 60% 45% at 50% 42%,
+        color-mix(in oklch, var(--primary) 8%, transparent),
+        transparent 70%
+      );
+    }
+    .pretui-empty-title[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      font-family: var(--font-serif);
+      font-size: var(--boxel-heading-font-size);
+      font-weight: var(--boxel-heading-font-weight);
+    }
+    .pretui-empty[data-size='s'] .pretui-empty-title[data-scopedcss-b2f493050b-b045568bce] {
+      font-size: var(--boxel-font-size);
+    }
+    .pretui-empty-msg[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      margin: 0;
+      font-size: var(--boxel-font-size-xs);
+      max-width: 34ch;
+    }
+    .pretui-empty-action[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      margin-top: var(--boxel-sp-2xs);
+    }
+    /* Two equal paths with a rule between. The rule is drawn on the
+       separator itself so it stretches to whatever the row/column is —
+       no measurement, and it flips axis with the fold. */
+    /* flex-wrap rather than a container query: EmptyState is often an auto
+       -sized grid/flex item, and `container-type: inline-size` would apply
+       inline-size containment to it and collapse that case. Wrapping folds
+       the two paths into a stack at exactly the width where they stop
+       fitting, with no containment side effect. */
+    .pretui-empty-paths[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: var(--boxel-sp-sm);
+    }
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce] {
+      display: flex;
+      align-items: center;
+      flex: 1 1 6rem;
+      gap: var(--boxel-sp-xs);
+      margin-top: var(--boxel-sp-2xs);
+      font-size: var(--boxel-font-size-2xs);
+      text-transform: lowercase;
+    }
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce]::before,
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce]::after {
+      content: '';
+      flex: 1;
+      min-inline-size: var(--boxel-sp-sm);
+      block-size: 1px;
+      background-color: var(--border);
+    }
+  }
+
+  @layer PretComponent {
+    @keyframes pretui-shimmer-data-scopedcss-537b3a02bc-0566fde4f2 {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+    .pretui-skeleton[data-scopedcss-537b3a02bc-0566fde4f2] {
+      display: block;
+      width: var(--_w, 100%);
+      height: var(--_h, 12px);
+      border-radius: 6px;
+      background: linear-gradient(90deg, var(--inset, var(--boxel-100)) 40%, var(--hover, var(--boxel-100)) 50%, var(--inset, var(--boxel-100)) 60%);
+      background-size: 200% 100%;
+      animation: pretui-shimmer-data-scopedcss-537b3a02bc-0566fde4f2 1.6s linear infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-skeleton[data-scopedcss-537b3a02bc-0566fde4f2] {
+        animation: none;
+      }
+    }
+  }
+
+  .pretui-data[data-scopedcss-cf92ce48c1-f088545998] {
+    container-type: inline-size;
+    display: block;
+    min-width: 0;
+    color: var(--foreground);
+    font-size: var(--text-ui-md, 12.5px);
+    letter-spacing: var(--track-ui, 0.01em);
+  }
+  .pretui-sr[data-scopedcss-cf92ce48c1-f088545998] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+  .pretui-data-loading[data-scopedcss-cf92ce48c1-f088545998] {
+    display: grid;
+    gap: var(--pretui-data-gap, var(--space-3, 8px));
+  }
+  .pretui-data-loading-head[data-scopedcss-cf92ce48c1-f088545998] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 8px);
+    color: var(--muted-foreground);
+    font-family: var(--font-mono);
+    font-size: var(--text-ui-sm, 11.5px);
+    letter-spacing: var(--track-eyebrow, 0.08em);
+    text-transform: uppercase;
+  }
+  .pretui-data-skeleton[data-scopedcss-cf92ce48c1-f088545998] {
+    display: grid;
+    gap: 7px;
+    padding: var(--space-4, 11px) var(--space-5, 14px);
+    border-radius: var(--radius-surface, 10px);
+    background: var(--card);
+    box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+  }
+  .pretui-data-errmsg[data-scopedcss-cf92ce48c1-f088545998] {
+    margin: 0 0 var(--space-2, 6px);
+    max-width: 60ch;
+  }
+  /* Unnamed container query only (a named one silently drops every
+     later rule in the transpiled stylesheet). It resolves against the
+     nearest ANCESTOR container — .pretui-data above — so it styles the
+     children, never the container element itself. */
+  @container (max-width: 24rem) {
+    .pretui-data-skeleton[data-scopedcss-cf92ce48c1-f088545998] {
+      padding: var(--space-3, 8px) var(--space-4, 11px);
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-list[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      font-size: var(--text-ui-md, 12.5px);
+      letter-spacing: var(--track-ui, 0.01em);
+      color: var(--foreground);
+    }
+    .pretui-list[data-size='xs'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 10.5px;
+    }
+    .pretui-list[data-size='s'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: var(--text-ui-sm, 11.5px);
+    }
+    .pretui-list[data-size='l'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 14px;
+    }
+    .pretui-list[data-size='xl'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 16px;
+    }
+    .pretui-list[data-bordered][data-scopedcss-d9a8b45361-cd067b2df8] {
+      border-radius: var(--radius-surface, 10px);
+      background: var(--card);
+      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+      overflow: hidden;
+    }
+    .pretui-list[aria-busy='true'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      opacity: 0.62;
+    }
+    .pretui-list-header[data-scopedcss-d9a8b45361-cd067b2df8],
+    .pretui-list-footer[data-scopedcss-d9a8b45361-cd067b2df8] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      padding: 0.62em var(--space-4, 11px);
+      color: var(--muted-foreground);
+    }
+    .pretui-list-header[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 -1px 0 var(--border);
+    }
+    .pretui-list-footer[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    .pretui-list-rows[data-scopedcss-d9a8b45361-cd067b2df8] {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+    }
+    .pretui-list-row[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      position: relative;
+    }
+    .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+      container-type: inline-size;
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      min-width: 0;
+      padding: 0.62em var(--space-4, 11px);
+    }
+    /* The divider and the hover both sit on the summary line, so a hover
+       tint never paints over the hairline above it. */
+    .pretui-list[data-divided]
+      .pretui-list-row
+      + .pretui-list-row
+      > .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    /* A selected row keeps its tint under the pointer, summary and
+       detail alike. */
+    .pretui-list-row:not([data-selected='true']) > .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8]:hover {
+      background: var(--hover, var(--boxel-100));
+    }
+    .pretui-list-row[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: -2px;
+    }
+    /* Selection reads in a still frame and in greyscale (Law 8): a rule on
+       the inline start, not colour alone. */
+    .pretui-list-row[data-selected='true'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      background: var(--pretui-selected, var(--boxel-100));
+    }
+    .pretui-list-row[data-selected='true'][data-scopedcss-d9a8b45361-cd067b2df8]::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inline-size: 2px;
+      background: var(--primary);
+    }
+    .pretui-list-pick[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: none;
+      display: flex;
+      align-items: center;
+    }
+    .pretui-list-body[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: none;
+      display: inline-grid;
+      place-content: center;
+      inline-size: 1.7em;
+      block-size: 1.7em;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: none;
+      color: var(--muted-foreground);
+      cursor: pointer;
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8]:hover {
+      background: var(--hover, var(--boxel-100));
+      color: var(--foreground);
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 1px;
+    }
+    .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+      display: block;
+      line-height: 1;
+      transition: transform var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, cubic-bezier(0.2, 0.9, 0.25, 1.05));
+    }
+    .pretui-list-expbtn[aria-expanded='true'] .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+      transform: rotate(90deg);
+    }
+    /* tabindex=-1 so a click in the detail focuses the detail, not the
+       row, and the row's Enter/Space stay with the row. */
+    .pretui-list-detail[data-scopedcss-d9a8b45361-cd067b2df8]:focus {
+      outline: none;
+    }
+    .pretui-list-detail[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      padding: 0.62em var(--space-4, 11px) 0.85em;
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+        transition: none;
+      }
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8] {
+      appearance: none;
+      width: 15px;
+      height: 15px;
+      margin: 0;
+      border-radius: 5px;
+      background: var(
+        --pretui-control-rest,
+        var(--field, var(--boxel-light))
+      );
+      box-shadow: 0 0 0 1px var(--pretui-control-border, var(--input));
+      cursor: pointer;
+      display: inline-grid;
+      place-content: center;
+      flex: none;
+    }
+    .pretui-list-radio[data-scopedcss-d9a8b45361-cd067b2df8] {
+      border-radius: 50%;
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:checked {
+      background: var(--primary);
+      box-shadow:
+        0 0 0 1px color-mix(in oklch, var(--primary) 70%, var(--border)),
+        var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:checked::before {
+      content: '';
+      width: 9px;
+      height: 9px;
+      background: var(--primary-foreground);
+      clip-path: polygon(
+        14% 47%,
+        38% 70%,
+        86% 18%,
+        96% 30%,
+        39% 89%,
+        4% 58%
+      );
+    }
+    .pretui-list-radio[data-scopedcss-d9a8b45361-cd067b2df8]:checked::before {
+      clip-path: circle(50%);
+      width: 7px;
+      height: 7px;
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+    /* Coarse pointers get the 44px floor without changing the fine-pointer
+       rhythm. */
+    @media (pointer: coarse) {
+      .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+        min-block-size: 44px;
+      }
+      .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8] {
+        inline-size: 2.4em;
+        block-size: 2.4em;
+      }
+      .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8] {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    @keyframes pretui-pixel-on-data-scopedcss-cae5827e83-d4debe2552 {
+      0%,
+      100% {
+        opacity: 0.15;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes pretui-shimmer-text-data-scopedcss-cae5827e83-d4debe2552 {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+    .pretui-loading[data-scopedcss-cae5827e83-d4debe2552] {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .pretui-pixelgrid[data-scopedcss-cae5827e83-d4debe2552] {
+      display: grid;
+      grid-template-columns: repeat(3, 4px);
+      gap: 1.5px;
+    }
+    .pretui-pixel[data-scopedcss-cae5827e83-d4debe2552] {
+      width: 4px;
+      height: 4px;
+      background: var(--foreground);
+      border-radius: 1px;
+      opacity: 0.15;
+      animation: pretui-pixel-on-data-scopedcss-cae5827e83-d4debe2552 650ms ease-in-out var(--pretui-pixel-delay, 0ms) infinite;
+    }
+    .pretui-pixelgrid[data-variant='orbit'] .pretui-pixel[data-scopedcss-cae5827e83-d4debe2552] {
+      animation-duration: 950ms;
+    }
+    .pretui-pixelgrid[data-variant='dots'] .pretui-pixel[data-scopedcss-cae5827e83-d4debe2552] {
+      border-radius: 50%;
+    }
+    .pretui-pixel[data-idle][data-scopedcss-cae5827e83-d4debe2552] {
+      opacity: 0.07;
+      animation: none;
+    }
+    .pretui-shimmer-label[data-scopedcss-cae5827e83-d4debe2552] {
+      font-size: var(--text-ui-md, 12.5px);
+      font-weight: 500;
+      background-image: linear-gradient(90deg, var(--ink-3, var(--boxel-400)) 35%, var(--foreground) 50%, var(--ink-3, var(--boxel-400)) 65%);
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: pretui-shimmer-text-data-scopedcss-cae5827e83-d4debe2552 1.4s linear infinite;
+      white-space: nowrap;
+    }
+    .pretui-elapsed[data-scopedcss-cae5827e83-d4debe2552] {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--ink-3, var(--boxel-400));
+      font-variant-numeric: tabular-nums;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-pixel[data-scopedcss-cae5827e83-d4debe2552] {
+        animation: none !important;
+        opacity: 0.6;
+      }
+      .pretui-shimmer-label[data-scopedcss-cae5827e83-d4debe2552] {
+        animation: none;
+        color: var(--muted-foreground);
+        background: none;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-scroller[data-scopedcss-11ca330a13-f16dc4fa82] {
+      position: relative;
+      display: block;
+      min-width: 0;
+      container-type: inline-size;
+    }
+    .pretui-scroller-viewport[data-scopedcss-11ca330a13-f16dc4fa82] {
+      min-width: 0;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+      scrollbar-gutter: stable;
+    }
+    .pretui-scroller-viewport[data-scopedcss-11ca330a13-f16dc4fa82]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+      border-radius: var(--radius-surface, 10px);
+    }
+    .pretui-scroller-viewport[data-orientation='horizontal'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    .pretui-scroller-viewport[data-orientation='vertical'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .pretui-scroller-viewport[data-orientation='both'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow: auto;
+    }
+    .pretui-scroller-viewport[data-hide-scrollbar='true'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      scrollbar-width: none;
+    }
+    .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      /* An opacity fade is not motion that encodes a state change so much
+         as a state change that would otherwise pop; it stays short and it
+         is cut entirely under reduced motion. */
+      transition: opacity 140ms linear;
+    }
+    .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block: 0;
+      inline-size: var(--pretui-scroller-fade, 28px);
+    }
+    .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline-start: 0;
+    }
+    .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline-end: 0;
+    }
+    .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline: 0;
+      block-size: var(--pretui-scroller-fade, 28px);
+    }
+    .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block-start: 0;
+    }
+    .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block-end: 0;
+    }
+    /* Sibling combinators off the viewport's own attributes: the state
+       never round-trips through Glimmer, so a flick costs no renders. */
+    .pretui-scroller-viewport[data-start-x='clipped'] ~ .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-end-x='clipped'] ~ .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-start-y='clipped'] ~ .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-end-y='clipped'] ~ .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      opacity: 1;
+    }
+    .pretui-scroller[data-edge='none'] .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+      display: none;
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to right,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to left,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to bottom,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to top,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to right,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to left,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to bottom,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to top,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+        transition: none;
+      }
+    }
+  }
+
+  .intro[data-scopedcss-6121faa312-c411e9d408] {
+    margin: 0;
+  }
+  /* The dialog inherits the dashboard's scrollbar color;
+     restate it from the dialog's own tokens, light or dark. */
+  .realm-list-frame[data-scopedcss-6121faa312-c411e9d408] {
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--muted-foreground) 50%,
+        transparent
+      )
+      transparent;
+  }
+  .realm-list-frame[data-scopedcss-6121faa312-c411e9d408] .pretui-scroller-viewport {
+    max-height: min(50dvh, 26rem);
+  }
+  /* Realm icons are rounded squares on the workspace tiles; match them. */
+  .realm-icon[data-scopedcss-6121faa312-c411e9d408] .pretui-avatar {
+    border-radius: var(--boxel-border-radius-xs);
+  }
+  .loading[data-scopedcss-6121faa312-c411e9d408] {
+    display: flex;
+    justify-content: center;
+    padding: var(--boxel-sp-lg) 0;
+  }
+
+  .manage-catalogs[data-scopedcss-6121faa312-bfb1490ce6] {
+    display: inline-flex;
+  }
+  .manage-catalogs[data-scopedcss-6121faa312-bfb1490ce6] .pretui-iconbtn {
+    color: var(--boxel-light);
+    background: transparent;
+  }
+  .manage-catalogs[data-scopedcss-6121faa312-bfb1490ce6] .pretui-iconbtn:hover,
+  .manage-catalogs[data-scopedcss-6121faa312-bfb1490ce6] .pretui-iconbtn:focus-visible {
+    color: var(--boxel-highlight);
+  }
+
+  .catalog-shelf[data-scopedcss-3416374426-c845240858] {
+    --_catalog-shelf-story-min-width: 13rem;
+    --_catalog-shelf-art-height: 9.5rem;
+    --_catalog-shelf-action-height: 1.875rem;
+    --_catalog-shelf-headline-lines: 2;
+    --_catalog-shelf-headline-leading: 1.2em;
+    --_catalog-shelf-copy-lines: 3;
+    --_catalog-shelf-copy-leading: 1.45em;
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp);
+  }
+  /* One row of equal stories that share the width between them. */
+  .stories[data-scopedcss-3416374426-c845240858] {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(var(--_catalog-shelf-story-min-width), 100%), 1fr)
+    );
+    gap: var(--boxel-sp);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .story[data-scopedcss-3416374426-c845240858] {
+    --_story-edge: color-mix(in oklch, var(--foreground) 12%, transparent);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-xs);
+    min-width: 0;
+    padding: var(--boxel-sp);
+    border-radius: var(--boxel-border-radius-2xl);
+    background-color: var(--_story-paper);
+    color: var(--foreground);
+    /* Edged like the workspace tiles, just outside the card so the edge
+       reads the same against the dashboard on every paper. */
+    box-shadow:
+      0 0 0 1px var(--boxel-light-25),
+      var(--shadow-md);
+  }
+  /* The hover ring stands 1px off the resting edge. */
+  .story[data-scopedcss-3416374426-c845240858]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    outline: 1px solid var(--boxel-light-50);
+    outline-offset: 1px;
+    opacity: 0;
+    transition: opacity var(--boxel-transition);
+    pointer-events: none;
+  }
+  @media (hover: hover) {
+    .story[data-scopedcss-3416374426-c845240858]:not(.is-pending):hover::after {
+      opacity: 1;
+    }
+  }
+  /* Keeps the hover ring off the keyboard ring. */
+  .story[data-scopedcss-3416374426-c845240858]:has(.story-open:focus-visible)::after {
+    opacity: 0;
+  }
+  /* The story draws the keyboard ring around the whole card. */
+  .story[data-scopedcss-3416374426-c845240858]:has(.story-open:focus-visible) {
+    box-shadow: var(--dashboard-ring), var(--shadow-md);
+  }
+  /* The papers, in turn: warm, ink, mint, lilac. */
+  .tint-warm[data-scopedcss-3416374426-c845240858] {
+    --_story-paper: color-mix(
+      in oklch,
+      color-mix(in oklch, var(--boxel-light) 90%, var(--boxel-orange)) 95%,
+      var(--boxel-dark)
+    );
+    --_story-accent: color-mix(
+      in oklch,
+      var(--boxel-orange) 70%,
+      var(--boxel-dark)
+    );
+  }
+  .tint-ink[data-scopedcss-3416374426-c845240858] {
+    --_story-paper: color-mix(
+      in oklch,
+      var(--boxel-purple) 18%,
+      var(--boxel-dark)
+    );
+    --_story-accent: var(--boxel-highlight);
+  }
+  .tint-mint[data-scopedcss-3416374426-c845240858] {
+    --_story-paper: color-mix(
+      in oklch,
+      var(--boxel-teal) 16%,
+      var(--boxel-light)
+    );
+    --_story-accent: color-mix(
+      in oklch,
+      var(--boxel-teal) 45%,
+      var(--boxel-dark)
+    );
+  }
+  .tint-lilac[data-scopedcss-3416374426-c845240858] {
+    --_story-paper: color-mix(
+      in oklch,
+      var(--boxel-lilac) 16%,
+      var(--boxel-light)
+    );
+    --_story-accent: color-mix(
+      in oklch,
+      var(--boxel-purple) 80%,
+      var(--boxel-dark)
+    );
+  }
+  /* Host chrome has no CardContainer zeroing these margins. */
+  .eyebrow[data-scopedcss-3416374426-c845240858] {
+    margin: 0;
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-2xs);
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--_story-accent);
+  }
+  /* Always two lines tall, so the art lines up across a row and the
+     stand-ins match. */
+  .headline[data-scopedcss-3416374426-c845240858] {
+    min-width: 0;
+    min-height: calc(
+      var(--_catalog-shelf-headline-lines) *
+        var(--_catalog-shelf-headline-leading)
+    );
+    margin: 0;
+    font-size: var(--boxel-font-size);
+    font-weight: 700;
+    line-height: var(--_catalog-shelf-headline-leading);
+    letter-spacing: -0.015em;
+  }
+  /* Its hit area covers the story; the actions sit above it. */
+  .story-open[data-scopedcss-3416374426-c845240858] {
+    display: block;
+    max-width: 100%;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    text-align: start;
+  }
+  /* A button ignores line-clamp, so its inner text clamps instead. */
+  .headline-text[data-scopedcss-3416374426-c845240858] {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--_catalog-shelf-headline-lines);
+    overflow-wrap: break-word;
+  }
+  .story-open[data-scopedcss-3416374426-c845240858]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+  }
+  /* The story draws the ring; the transparent outline stands in for it
+     in forced-colors mode, which drops box-shadows. */
+  .story-open[data-scopedcss-3416374426-c845240858]:focus-visible {
+    outline: 2px solid transparent;
+  }
+  .art[data-scopedcss-3416374426-c845240858] {
+    position: relative;
+    flex: none;
+    height: var(--_catalog-shelf-art-height);
+    overflow: hidden;
+    border-radius: var(--boxel-border-radius-xl);
+    background-color: var(--boxel-light);
+    box-shadow: 0 0 0 1px var(--boxel-dark-10);
+  }
+  /* The example card, laid out as a page and zoomed into the frame. */
+  .art-page[data-scopedcss-3416374426-c845240858] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--page-width);
+    height: var(--page-height);
+    overflow: hidden;
+    transform: scale(var(--page-zoom));
+    transform-origin: 0 0;
+    pointer-events: none;
+  }
+  /* The thumbnail is an icon, so it shows whole and centered rather than
+     cropped to fill the frame. */
+  .thumbnail[data-scopedcss-3416374426-c845240858] {
+    display: block;
+    width: 100%;
+    height: 70%;
+    margin-top: calc(var(--_catalog-shelf-art-height) * 0.15);
+    object-fit: contain;
+  }
+  .copy[data-scopedcss-3416374426-c845240858] {
+    display: -webkit-box;
+    margin: 0;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--_catalog-shelf-copy-lines);
+    /* Always three lines tall, so a story's height never depends on its
+       copy and the stand-ins match it. */
+    min-height: calc(
+      var(--_catalog-shelf-copy-lines) * var(--_catalog-shelf-copy-leading)
+    );
+    font-size: var(--boxel-font-size-sm);
+    line-height: var(--_catalog-shelf-copy-leading);
+    color: var(--muted-foreground);
+  }
+  .actions[data-scopedcss-3416374426-c845240858] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--boxel-sp-xs);
+    margin-top: auto;
+    padding-top: var(--boxel-sp-xs);
+    border-top: 1px solid var(--_story-edge);
+  }
+  /* Above the headline's hit area. */
+  .action[data-scopedcss-3416374426-c845240858] {
+    --pretui-button-h: var(--_catalog-shelf-action-height);
+    --pretui-button-px: var(--boxel-sp-sm);
+    position: relative;
+    z-index: 2;
+  }
+  /* The theme's ring vanishes on the light papers; the accent shows on
+     every paper. */
+  .action[data-scopedcss-3416374426-c845240858]:focus-visible {
+    outline-color: var(--_story-accent);
+  }
+  .see-all[data-scopedcss-3416374426-c845240858] {
+    align-self: flex-start;
+  }
+  .story.is-pending[data-scopedcss-3416374426-c845240858] {
+    --_story-edge: transparent;
+    background-color: var(--boxel-dark-50);
+    box-shadow: none;
+  }
+  .is-pending .art[data-scopedcss-3416374426-c845240858] {
+    background-color: var(--boxel-dark-50);
+    box-shadow: none;
+  }
+  .pending-action[data-scopedcss-3416374426-c845240858] {
+    display: block;
+    height: var(--_catalog-shelf-action-height);
+  }
+  .see-all.is-pending[data-scopedcss-3416374426-c845240858] {
+    visibility: hidden;
+  }
+
+  .section-count[data-scopedcss-39a875b699-c0208536ed] {
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-xs);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .section-count[data-scopedcss-39a875b699-c0208536ed]::before {
+    content: '· ' / '';
+  }
+
+  .section-head[data-scopedcss-67d76ed2b2-b2ee99fc89] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--boxel-sp-xs);
+    row-gap: var(--boxel-sp-2xs);
+    padding-bottom: var(--boxel-sp-sm);
+    border-bottom: 1px solid var(--boxel-light-10);
+  }
+  .section-title[data-scopedcss-67d76ed2b2-b2ee99fc89] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--boxel-sp-xs);
+    margin: 0;
+    font-size: var(--dashboard-section-title-font-size);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+  }
+  .section-icon[data-scopedcss-67d76ed2b2-b2ee99fc89] {
+    --icon-color: var(--muted-foreground);
+    color: var(--muted-foreground);
+    flex-shrink: 0;
+  }
+  .section-hint[data-scopedcss-67d76ed2b2-b2ee99fc89] {
+    flex-basis: 100%;
+    margin: 0;
+    font-size: var(--dashboard-section-hint-font-size);
+    color: var(--muted-foreground);
+  }
+
+  .dashboard-section[data-scopedcss-6b5900f04f-602032c2d9] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-xl);
+  }
+  .group-empty[data-scopedcss-6b5900f04f-602032c2d9] {
+    margin: 0;
+    color: var(--muted-foreground);
+    font: 400 var(--boxel-font-sm);
+  }
+  .catalog-list[data-scopedcss-6b5900f04f-602032c2d9] {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--dashboard-tile-min-width), 100%), 1fr)
+    );
+    gap: var(--boxel-sp-lg) var(--boxel-sp);
+    padding: var(--boxel-sp-xs) 0;
+  }
+
+  .get-started[data-scopedcss-697a231739-8115cad5a6] {
+    --_get-started-max-width: 60rem;
+    --_get-started-tick-size: 1.625rem;
+    --_get-started-progress-width: 8rem;
+    width: 100%;
+    max-width: var(--_get-started-max-width);
+    box-sizing: border-box;
+    padding: var(--boxel-sp) var(--boxel-sp-lg);
+    border: 1px solid var(--boxel-light-10);
+    border-radius: var(--boxel-border-radius-xl);
+    background-color: var(--boxel-700);
+    color: var(--foreground);
+    container: get-started / inline-size;
+  }
+  .get-started-head[data-scopedcss-697a231739-8115cad5a6] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--boxel-sp-xs) var(--boxel-sp);
+  }
+  .get-started-title[data-scopedcss-697a231739-8115cad5a6] {
+    margin: 0;
+    font-size: var(--boxel-font-size);
+    font-weight: 700;
+  }
+  .get-started-progress[data-scopedcss-697a231739-8115cad5a6] {
+    width: var(--_get-started-progress-width);
+  }
+  .get-started-count[data-scopedcss-697a231739-8115cad5a6] {
+    margin: 0;
+    font-size: var(--boxel-font-size-sm);
+    color: var(--muted-foreground);
+  }
+  /* Dismiss and the minimize button sit together at the far end. */
+  .get-started-dismiss[data-scopedcss-697a231739-8115cad5a6] {
+    margin-inline-start: auto;
+  }
+  .get-started-actions[data-scopedcss-697a231739-8115cad5a6] {
+    display: flex;
+    gap: var(--boxel-sp-xs);
+  }
+  .get-started-steps[data-scopedcss-697a231739-8115cad5a6] {
+    margin: var(--boxel-sp-sm) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  .get-started-step[data-scopedcss-697a231739-8115cad5a6] {
+    display: grid;
+    grid-template-columns: var(--_get-started-tick-size) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--boxel-sp-sm);
+    padding-block: var(--boxel-sp-sm);
+    border-top: 1px solid var(--boxel-light-10);
+  }
+  .tick[data-scopedcss-697a231739-8115cad5a6] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_get-started-tick-size);
+    height: var(--_get-started-tick-size);
+    box-sizing: border-box;
+    border: 1.5px solid var(--muted-foreground);
+    border-radius: 50%;
+  }
+  .get-started-step.is-done .tick[data-scopedcss-697a231739-8115cad5a6] {
+    border-color: var(--boxel-highlight);
+    background-color: var(--boxel-highlight);
+    color: var(--boxel-highlight-foreground);
+  }
+  .step-words[data-scopedcss-697a231739-8115cad5a6] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-6xs);
+    min-width: 0;
+  }
+  .step-title[data-scopedcss-697a231739-8115cad5a6] {
+    font-size: var(--boxel-font-size-sm);
+    font-weight: 600;
+  }
+  .get-started-step.is-done .step-title[data-scopedcss-697a231739-8115cad5a6] {
+    color: var(--muted-foreground);
+    font-weight: 500;
+  }
+  .step-hint[data-scopedcss-697a231739-8115cad5a6],
+  .step-note[data-scopedcss-697a231739-8115cad5a6] {
+    font-size: var(--boxel-font-size-xs);
+    color: var(--muted-foreground);
+  }
+  /* Keeps its size when the label runs short of room. */
+  .publish-chevron[data-scopedcss-697a231739-8115cad5a6] {
+    flex: none;
+  }
+  .get-started-dismissed[data-scopedcss-697a231739-8115cad5a6] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--boxel-sp-xs);
+    color: var(--muted-foreground);
+  }
+  .dismissed-note[data-scopedcss-697a231739-8115cad5a6] {
+    margin: 0;
+    font-size: var(--boxel-font-size-sm);
+    font-style: italic;
+  }
+  /* Narrow, the box stacks: the title row with Dismiss and the
+     minimize button, the progress bar across the box, the count, then
+     the steps. The header's items join the body's grid for that, in
+     their DOM order so Tab follows what's on screen. */
+  @container get-started (max-width: 30rem) {
+    .get-started-body[data-scopedcss-697a231739-8115cad5a6] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      grid-template-areas:
+        'title dismiss actions'
+        'progress progress progress'
+        'count count count'
+        'steps steps steps';
+      align-items: center;
+      gap: var(--boxel-sp-xs);
+    }
+    .get-started-head[data-scopedcss-697a231739-8115cad5a6] {
+      display: contents;
+    }
+    .get-started-steps[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: steps;
+    }
+    .get-started-title[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: title;
+    }
+    .get-started-actions[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: actions;
+    }
+    .get-started-progress[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: progress;
+      width: 100%;
+    }
+    .get-started-count[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: count;
+    }
+    .get-started-dismiss[data-scopedcss-697a231739-8115cad5a6] {
+      grid-area: dismiss;
+    }
+    .get-started-step[data-scopedcss-697a231739-8115cad5a6] {
+      grid-template-columns: var(--_get-started-tick-size) minmax(0, 1fr);
+    }
+    /* The action takes the whole row, tick column included: the text
+       column alone is narrower than a labeled button. It stays at the
+       row's end, as in the wide layout. */
+    .step-action[data-scopedcss-697a231739-8115cad5a6] {
+      grid-column: 1 / -1;
+      justify-self: end;
+    }
+  }
+
+  .flyout-header[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    display: flex;
+    align-items: baseline;
+    gap: var(--boxel-sp-xs);
+    padding: var(--boxel-sp-4xs) var(--boxel-sp-xs) var(--boxel-sp-xs);
+  }
+  .flyout-title[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    font-size: var(--boxel-font-size);
+    font-weight: 700;
+  }
+  .realm[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    --pretui-button-h: 2.75rem;
+    --pretui-button-px: var(--boxel-sp-xs);
+    --pretui-button-radius: var(--boxel-border-radius-lg);
+    justify-content: flex-start;
+    width: 100%;
+  }
+  /* The panel's content width, less the row's padding and border, so a
+     long name truncates instead of widening the row. */
+  .realm-content[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-sm);
+    width: calc(
+      var(--section-rail-flyout-content-width) - 2 * var(--boxel-sp-xs) -
+        2px
+    );
+  }
+  .realm-thumb[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    position: relative;
+    flex-shrink: 0;
+    width: 3rem;
+    height: 2rem;
+    border-radius: var(--boxel-border-radius-sm);
+    background-color: var(--muted);
+    background-image: var(--realm-wallpaper);
+    background-size: cover;
+    background-position: center;
+    box-shadow: inset 0 0 0 1px var(--boxel-light-10);
+  }
+  .realm-icon[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    --boxel-realm-icon-size: 1.125rem;
+    --boxel-realm-icon-border-radius: var(--boxel-border-radius-xs);
+    --boxel-realm-icon-background-color: var(--boxel-light);
+    position: absolute;
+    inset-inline-start: var(--boxel-sp-5xs);
+    bottom: var(--boxel-sp-5xs);
+  }
+  .realm-name[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--boxel-font-size-sm);
+    font-weight: 600;
+  }
+  .flyout-empty[data-scopedcss-156e4716fe-7ffa82dbb4] {
+    margin: 0;
+    padding: var(--boxel-sp-xs);
+    font-size: var(--boxel-font-size-sm);
+    color: var(--muted-foreground);
+  }
+
+  @keyframes dashboard-fade-in-data-scopedcss-fdd799e0b9-ce558d6f95 {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  /* Only takes focus in place of an item out of view; the cursor's ring
+     marks where the keyboard is. */
+  .dashboard[data-scopedcss-fdd799e0b9-ce558d6f95]:focus {
+    outline: none;
+  }
+  .dashboard[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    /* Pret UI selection reads this undefined token and falls back to a
+       light gray; remove once it reads --selected. */
+    --pretui-selected: var(--selected);
+    --dashboard-top-bar-clearance: calc(
+      var(--operator-mode-top-bar-item-height) + 2 *
+        var(--operator-mode-spacing)
+    );
+    --dashboard-page-padding-top: calc(
+      var(--dashboard-top-bar-clearance) + var(--boxel-sp-xl)
+    );
+    --dashboard-band-height: calc(
+      var(--dashboard-top-bar-clearance) + var(--boxel-sp-sm)
+    );
+    --dashboard-page-max-width: 90rem;
+    --dashboard-notice-max-width: 40rem;
+    --dashboard-grid-dot-size: 0.075rem;
+    --dashboard-grid-size: 2rem;
+    --dashboard-desk-min-width: 27.5rem;
+    --dashboard-desk-gap: var(--boxel-sp-3xl);
+    --dashboard-tile-min-width: 12rem;
+    --dashboard-tile-height: 8rem;
+    --dashboard-tile-radius: var(--boxel-border-radius-xl);
+    --dashboard-row-min-width: 15.5rem;
+    --dashboard-row-height: 3.75rem;
+    /* A row's and its thumbnail's tints, shared by workspace and
+       archived rows. */
+    --dashboard-row-tint: color-mix(
+      in oklch,
+      var(--boxel-light) 4%,
+      transparent
+    );
+    --dashboard-thumb-tint: color-mix(
+      in oklch,
+      var(--boxel-light) 6%,
+      transparent
+    );
+    /* The keyboard cursor's ring, on New Workspace and the desks. */
+    --dashboard-ring: 0 0 0 2px var(--boxel-highlight);
+    --dashboard-scrim-height: 7rem;
+    --dashboard-toggle-height: 2.75rem;
+    --dashboard-greeting-font-size: var(--boxel-font-size-xl);
+    --dashboard-greeting-font-weight: 500;
+    --dashboard-section-title-font-size: var(--boxel-font-size-lg);
+    --dashboard-section-hint-font-size: var(--boxel-font-size-xs);
+
+    /* Breakpoints follow the dashboard's own width, which is less than
+       the viewport's when the AI assistant panel is open. */
+    container: dashboard / inline-size;
+    color: var(--foreground);
+    /* A faint dot grid gives the page a surface to sit on. */
+    background-image: radial-gradient(
+      var(--boxel-light-10) var(--dashboard-grid-dot-size),
+      transparent var(--dashboard-grid-dot-size)
+    );
+    background-size: var(--dashboard-grid-size) var(--dashboard-grid-size);
+  }
+  /* Frosted band under the top bar: the page blurs out as it scrolls up
+     toward the wordmark. Sticky inside the scroller, so it spans the
+     scrollport and never covers the scrollbar. Negative margins pull it
+     over the gutters without taking up space. The scroller has no top
+     padding, since Chrome sticks below it, over the greeting. */
+  .frosted-band[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    position: sticky;
+    top: 0;
+    height: var(--dashboard-band-height);
+    margin: 0 calc(-1 * var(--dashboard-gutter))
+      calc(-1 * var(--dashboard-band-height))
+      calc(-1 * var(--dashboard-gutter-start));
+    background-color: color-mix(
+      in oklch,
+      var(--boxel-800) 55%,
+      transparent
+    );
+    backdrop-filter: blur(1.125rem) saturate(140%);
+    mask-image: linear-gradient(to bottom, black 65%, transparent);
+    pointer-events: none;
+    z-index: 1;
+  }
+  /* The gutter and tile widths live here, not on .dashboard, so the
+     container queries below can change them. */
+  .dashboard-scroller[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --dashboard-gutter: 5rem;
+    /* The section rail stands as an icon column in the wordmark's
+       column, so the page starts past it. Its labels slide out over the
+       page, so they need no room of their own. */
+    --dashboard-gutter-start: max(
+      var(--dashboard-gutter),
+      calc(
+        var(--container-button-size) + 2 * var(--operator-mode-spacing) +
+          var(--boxel-sp-xl)
+      )
+    );
+    height: 100%;
+    overflow: auto;
+    /* Tiles scrolled into view by the keyboard land below the frosted band. */
+    scroll-padding-top: var(--dashboard-band-height);
+    /* The bottom clears the floating AI assistant button. */
+    padding: 0 var(--dashboard-gutter)
+      max(
+        var(--dashboard-gutter),
+        calc(
+          var(--container-button-size) + var(--operator-mode-spacing) +
+            var(--boxel-sp)
+        )
+      )
+      var(--dashboard-gutter-start);
+    /* Only the contents fade in; the dark background paints at once, so
+       the operator-mode canvas never flashes after sign-in. The transparent
+       start lives only in the keyframes, so where the animation doesn't run
+       (a snapshot, a renderer without animations) the contents still show. */
+    animation: dashboard-fade-in-data-scopedcss-fdd799e0b9-ce558d6f95 0.5s ease-in both;
+  }
+  .dashboard-page[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-4xl);
+    max-width: var(--dashboard-page-max-width);
+    margin-inline: auto;
+    padding-top: var(--dashboard-page-padding-top);
+    /* One layer, so the frosted band sits over every tile. */
+    isolation: isolate;
+  }
+
+  /* Type scale: greeting, then section title, then everything inside a
+     section. Nothing inside a section outranks its heading. */
+  .page-head[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    /* Get started and the filter share one height. */
+    --dashboard-head-control-height: 1.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--boxel-sp);
+  }
+  /* The greeting and its Get started button grow to fill their line,
+     which pushes the filter to the right beside them, and leaves the
+     filter at the start once it wraps. */
+  .greeting-line[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--boxel-sp-xl);
+    min-width: 0;
+  }
+  .get-started-button[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --pretui-button-h: var(--dashboard-head-control-height);
+  }
+  .get-started-button.is-open[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --pretui-button-fg: var(--boxel-highlight);
+  }
+  .greeting[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: break-word;
+    font-size: var(--dashboard-greeting-font-size);
+    font-weight: var(--dashboard-greeting-font-weight);
+    letter-spacing: -0.02em;
+  }
+  /* The rail matches the page, and the selected pill is white on black.
+     SegmentedControl has no tone arg, so this sets the tokens it reads. */
+  .scope-filter[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    /* Both knobs set, so a touch screen keeps this size too. */
+    --pretui-seg-h: var(--dashboard-head-control-height);
+    --pretui-seg-px: var(--boxel-sp-sm);
+    --inset: var(--boxel-800);
+    --border: var(--boxel-light-10);
+    --border-strong: var(--boxel-light-25);
+    --card: var(--boxel-dark);
+    --card-foreground: var(--boxel-light);
+  }
+
+  .dashboard-section[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-xl);
+  }
+  .group-icon[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --icon-color: var(--muted-foreground);
+    color: var(--muted-foreground);
+    flex-shrink: 0;
+  }
+
+  /* Groups inside a section are quiet labels; the tiles are the
+     headline. */
+  .group[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-lg);
+  }
+  .group-head[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-xs);
+    margin: 0;
+    font: inherit;
+  }
+  .group-title[data-scopedcss-fdd799e0b9-ce558d6f95],
+  .group-count[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    font-family: var(--boxel-monospace-font-family);
+    font-size: var(--boxel-font-size-xs);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .group-count[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    color: var(--subtle-foreground);
+  }
+  .group-count[data-scopedcss-fdd799e0b9-ce558d6f95]::before {
+    content: '· ' / '';
+  }
+  /* Inside the fold, so the space collapses with it. */
+  .archived-content[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    padding-top: var(--boxel-sp-lg);
+  }
+  .group-empty[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    margin: 0;
+    color: var(--muted-foreground);
+    font: 400 var(--boxel-font-sm);
+  }
+  /* As many desks per row as fit at their minimum width, spanning the
+     section like the lists below them. */
+  .desk-list[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--dashboard-desk-min-width), 100%), 1fr)
+    );
+    gap: var(--dashboard-desk-gap);
+    padding: var(--boxel-sp-xs) 0;
+  }
+  .your-workspaces[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-xs);
+  }
+  .recent-list[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--dashboard-tile-min-width), 100%), 1fr)
+    );
+    gap: var(--boxel-sp-lg) var(--boxel-sp);
+    padding: var(--boxel-sp-xs) 0;
+  }
+  .row-list[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--dashboard-row-min-width), 100%), 1fr)
+    );
+    gap: var(--boxel-sp-sm);
+  }
+  /* A clipped list fades out over its last row, where the button to show
+     the rest sits. */
+  .row-list.is-clipped[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    position: relative;
+  }
+  .list-scrim[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    height: var(--dashboard-scrim-height);
+    background-image: linear-gradient(
+      to bottom,
+      transparent,
+      var(--boxel-800) 72%
+    );
+    pointer-events: none;
+  }
+  .list-toggle[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --pretui-button-h: var(--dashboard-toggle-height);
+    --pretui-button-px: var(--boxel-sp-lg);
+    --pretui-button-bg: var(--boxel-700);
+    --pretui-button-fg: var(--boxel-light);
+    --pretui-size-m: var(--boxel-font-size-sm);
+    /* Pret UI's neutral accent hover mixes in --background, which is this
+       same shade on the dark dashboard, so the hover is set here. */
+    --pretui-btn-accent-hover: var(--boxel-650);
+    position: relative;
+    z-index: 3;
+    align-self: center;
+    border-color: var(--boxel-light-25);
+    font-weight: 600;
+  }
+  /* Collapsed, it sits on the scrim over the last row shown. */
+  .list-toggle.is-collapsed[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    margin-top: calc(
+      -1 * (var(--dashboard-toggle-height) + var(--boxel-sp-sm))
+    );
+  }
+
+  /* Empty, it stays out of the page's flex gap. */
+  .unreachable-status[data-scopedcss-fdd799e0b9-ce558d6f95]:not(:has(.unreachable-notice)) {
+    position: absolute;
+  }
+  .unreachable-notice[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-2xs);
+    max-width: var(--dashboard-notice-max-width);
+    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+    border-radius: var(--boxel-border-radius);
+    background-color: var(--muted);
+    color: var(--foreground);
+    font: 400 var(--boxel-font-sm);
+    letter-spacing: var(--boxel-lsp-xs);
+  }
+  .unreachable-notice-icon[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    flex-shrink: 0;
+  }
+
+  /* The gutter narrows with the dashboard, so a tablet or phone spends
+     its width on the tiles. */
+  @container dashboard (max-width: 64rem) {
+    .dashboard-scroller[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      --dashboard-gutter: 2.5rem;
+    }
+    /* Tablet and phone: less room between the page's parts. */
+    .dashboard-page[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      gap: var(--boxel-sp-2xl);
+    }
+  }
+  @container dashboard (max-width: 48rem) {
+    .dashboard-scroller[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      --dashboard-gutter: 1.5rem;
+    }
+    /* The greeting takes its own line, with Get started, then the
+       filter, under it, at opposite ends. Once the filter wraps it
+       stays at the start. */
+    .page-head[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      justify-content: space-between;
+      column-gap: var(--boxel-sp-xl);
+    }
+    .greeting-line[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      display: contents;
+    }
+    .greeting[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      flex-basis: 100%;
+    }
+  }
+  @container dashboard (max-width: 40rem) {
+    .dashboard-scroller[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      --dashboard-gutter: 1rem;
+    }
+  }
+  /* Compact, where the section rail stays as icons, the page tightens
+     too: less room above it, and a smaller, lighter greeting. */
+  /* The frosted band shrinks with the page's top, so it never covers the
+     greeting. */
+  .dashboard.is-compact[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --dashboard-page-padding-top: calc(
+      var(--dashboard-top-bar-clearance) + var(--boxel-sp-xs)
+    );
+    --dashboard-band-height: var(--dashboard-page-padding-top);
+  }
+  .is-compact .page-head[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    gap: var(--boxel-sp-xs);
+  }
+  .is-compact .greeting[data-scopedcss-fdd799e0b9-ce558d6f95] {
+    --dashboard-greeting-font-size: var(--boxel-font-size-lg);
+    --dashboard-greeting-font-weight: 400;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .dashboard-scroller[data-scopedcss-fdd799e0b9-ce558d6f95] {
+      animation-duration: 0.01ms;
+    }
+  }