.FreestyleGuide {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  min-width: 320px;
}
.FreestyleGuide-header, .FreestyleGuide-footer {
  display: flex;
  flex: none;
}
.FreestyleGuide-header {
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1px #b6b6b6;
  padding: 0.5rem 1rem;
}
.FreestyleGuide-cta {
  cursor: pointer;
  display: inline-block;
  flex-basis: 20px;
  font-size: 1.4rem;
  text-align: center;
}
.FreestyleGuide-cta--aside {
  background: none;
  border: 0;
  padding: 0;
}
.FreestyleGuide-ctaIcon:hover {
  fill: #00bcd4;
}
.FreestyleGuide-titleContainer {
  padding: 0 1rem;
  text-align: center;
}
.FreestyleGuide-title {
  font-size: 1.4rem;
  font-weight: bold;
}
@media (min-width: 600px) {
  .FreestyleGuide-title {
    font-size: 1.9rem;
  }
}
.FreestyleGuide-subtitle {
  margin: 0 auto;
}
.FreestyleGuide-body {
  background-color: #fff;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
@media (min-width: 600px) {
  .FreestyleGuide-body {
    flex-direction: row;
  }
}
.FreestyleGuide-content {
  margin-top: 1.5rem;
  overflow: auto;
}
@media (min-width: 600px) {
  .FreestyleGuide-content {
    flex: 1;
    margin: 0;
  }
}
.FreestyleGuide-nav {
  background-color: #fff;
  height: 100vh;
  order: -1;
  overflow: auto;
  padding: 1rem;
  position: sticky;
  top: 0;
}
@media (min-width: 600px) {
  .FreestyleGuide-nav {
    border-right: solid 1px #b6b6b6;
    flex: 0 0 18rem;
  }
}
.FreestyleGuide-aside {
  background: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin-right: 0.5rem;
  order: -2;
  position: fixed;
  right: 0.5rem;
}
@media (min-width: 600px) {
  .FreestyleGuide-aside {
    border-left: solid 1px #b6b6b6;
    order: 1;
  }
}
.FreestyleGuide-chooseSectionMessage {
  display: flex;
  height: 100%;
  font-size: 1.4rem;
}
.FreestyleGuide-chooseSectionMessage > span {
  margin: auto;
}

.FreestyleCollection {
  max-width: 1200px;
}
.FreestyleCollection-title {
  font-weight: bold;
  padding: 1rem 1rem 0;
  text-transform: uppercase;
}
.FreestyleCollection-variantList {
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #212121;
  display: flex;
  height: 48px;
  list-style-type: none;
  margin: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
.FreestyleCollection-variantListItem {
  cursor: pointer;
  display: block;
  flex-grow: 1;
  float: left;
  font-size: 14px;
  height: 48px;
  letter-spacing: 0.8px;
  line-height: 48px;
  margin: 0;
  min-width: 120px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  width: 15%;
}
.FreestyleCollection-variantListItem:hover, .FreestyleCollection-variantListItem--active {
  border-bottom: solid 3px #00bcd4;
  color: #00bcd4;
}

.FreestyleDynamic-input {
  margin-bottom: 10px;
}
.FreestyleDynamic-input input[type=text],
.FreestyleDynamic-input textarea {
  display: block;
}
.FreestyleDynamic-inputDescription {
  display: block;
}

.FreestyleVariant--inline {
  display: inline-block;
}

.FreestyleAnnotation {
  font-size: 0.9rem;
  padding: 0 1rem;
}

.FreestyleUsageControls {
  background: #fff;
  font-size: 0.9rem;
  padding: 1rem;
  text-align: left;
  width: 200px;
}
.FreestyleUsageControls-header {
  color: #00bcd4;
  font-weight: bold;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.FreestyleUsageControls-item {
  align-items: baseline;
  display: flex;
}
.FreestyleUsageControls-item--focus {
  padding-top: 0.6rem;
}
.FreestyleUsageControls-itemControl {
  cursor: pointer;
  padding-right: 0.1rem;
}
.FreestyleUsageControls-itemLabel {
  font-size: 0.8rem;
}
.FreestyleUsageControls-input--focus {
  margin-bottom: 0.2rem;
}
.FreestyleUsageControls-button {
  background-color: #00bcd4;
  border: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 0.6rem;
  padding: 0.4rem 1rem;
  text-transform: uppercase;
}

.FreestylePalette-title {
  font-size: 1.4rem;
  font-weight: bold;
  padding-bottom: 2px;
  padding-top: 10px;
}
.FreestylePalette-description {
  font-size: 0.8rem;
  padding-bottom: 5px;
}

/* BEGIN-FREESTYLE-USAGE fpi--notes
# Markdown Notes In SCSS!

Hey look... these are `markdown` notes:

- coming from scss
- looking nice

END-FREESTYLE-USAGE */
.FreestylePaletteItem {
  border: solid 1px #cecece;
  display: inline-block;
  margin: 0 5px 5px 0;
}
.FreestylePaletteItem-color {
  height: 90px;
  width: 160px;
}
.FreestylePaletteItem-info {
  background-color: #fff;
  border-top: solid 1px #cecece;
  padding: 5px;
}
.FreestylePaletteItem-hex {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 0;
}
.FreestylePaletteItem-name {
  color: #2f4f4f;
  font-size: 11px;
  margin-top: 0;
}

.FreestyleUsage {
  max-width: 1200px;
}
.FreestyleUsage-title {
  font-weight: bold;
  padding: 1rem 1rem 0;
  text-transform: uppercase;
}
.FreestyleUsage-rendered {
  padding: 1rem;
}
.FreestyleUsage-usage {
  padding-bottom: 10px;
}
.FreestyleUsage-sourceContainer pre {
  font-size: 0.8rem;
  margin-top: 0;
}
.FreestyleUsage-sourceContainer pre.hljs {
  padding: 0.5rem 1rem;
}
.FreestyleUsage--inline {
  border-bottom: 0;
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 0;
  width: 100%;
}
@media (min-width: 600px) {
  .FreestyleUsage--inline {
    max-width: inherit;
    width: auto;
  }
}
.FreestyleUsage-focusCta {
  cursor: pointer;
  fill: #b6b6b6;
  position: relative;
  top: 1px;
}
.FreestyleUsage-focusCta:hover {
  fill: #00bcd4;
}

.FreestyleSection-name {
  border-bottom: solid 1px #ccc;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 1rem;
  max-width: calc(1200px - 1rem);
  padding: 1rem 0 0.4rem;
}
.FreestyleSection--hidden {
  display: none;
}

.FreestyleSubsection.is-hidden {
  display: none;
}
.FreestyleSubsection-name {
  font-size: 1.3rem;
  margin: 0 1rem;
  padding: 0.8rem 0 0.4rem;
}

.FreestyleMenu {
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.FreestyleMenu-search {
  padding: 0 0.75rem 0.75rem;
}
.FreestyleMenu-searchInput {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background-color: rgba(33, 33, 33, 0.06);
  color: #212121;
}
.FreestyleMenu-searchInput::placeholder {
  color: rgba(33, 33, 33, 0.5);
}
.FreestyleMenu-searchInput:focus {
  background-color: rgba(33, 33, 33, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.3);
}
.FreestyleMenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.FreestyleMenu-item {
  list-style: none;
  margin: 0 0.5rem;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}
.FreestyleMenu-item.is-expanded {
  background-color: rgba(0, 188, 212, 0.06);
  margin-bottom: 2px;
  padding-bottom: 2px;
}
.FreestyleMenu-item.is-active:not(.is-expanded) {
  background-color: rgba(0, 188, 212, 0.1);
}
.FreestyleMenu-itemHeader {
  position: relative;
}
.FreestyleMenu-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid currentColor;
  margin-right: 0.3rem;
  transition: transform 0.2s ease;
  vertical-align: middle;
  opacity: 0.5;
}
.FreestyleMenu-chevron.is-expanded {
  transform: rotate(90deg);
}
.FreestyleMenu-collapseToggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.FreestyleMenu-collapseToggle:focus-visible {
  outline: 2px solid #00bcd4;
  outline-offset: -2px;
  border-radius: 4px;
}
.FreestyleMenu-itemLink {
  border-radius: 100px;
  color: #212121;
  display: block;
  padding: 0.45rem 0.75rem 0.45rem 1.4rem;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.FreestyleMenu-itemLink.active {
  background-color: rgba(0, 188, 212, 0.18);
  color: #008a9e;
  text-decoration: none;
  font-weight: 600;
}
.FreestyleMenu-itemLink:hover {
  background-color: rgba(33, 33, 33, 0.06);
  text-decoration: none;
}
.FreestyleMenu-item.is-expanded > .FreestyleMenu-itemHeader > .FreestyleMenu-itemLink {
  font-weight: 600;
}
.FreestyleMenu-item.is-active > .FreestyleMenu-itemHeader > .FreestyleMenu-itemLink {
  font-weight: 600;
}
.FreestyleMenu-submenu {
  list-style: none;
  padding: 0 0 0.15rem;
  margin: 0;
}
.FreestyleMenu-submenuItemLink {
  border-radius: 100px;
  color: rgba(33, 33, 33, 0.7);
  display: block;
  padding: 0.3rem 0.75rem 0.3rem 1.75rem;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.FreestyleMenu-submenuItemLink.active {
  background-color: rgba(0, 188, 212, 0.18);
  color: #008a9e;
  text-decoration: none;
  font-weight: 600;
}
.FreestyleMenu-submenuItemLink:hover {
  background-color: rgba(33, 33, 33, 0.06);
  color: #212121;
  text-decoration: none;
}
.FreestyleMenu-submenuItem.is-highlighted > .FreestyleMenu-submenuItemLink {
  background-color: rgba(0, 188, 212, 0.18);
  color: #008a9e;
  font-weight: 600;
}
.FreestyleMenu-submenuItem.is-active > .FreestyleMenu-submenuItemLink {
  color: #212121;
  font-weight: 700;
}
.FreestyleMenu-submenuItem {
  padding: 0 0.35rem;
}

.FreestyleSource-title {
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.5rem 1rem 0.2rem;
  text-transform: uppercase;
}

.FreestyleTypeface-previewHero, .FreestyleTypeface-previewSample {
  font-family: inherit;
}
.FreestyleTypeface-previewHero {
  font-size: 140px;
  line-height: 1.05;
}
.FreestyleTypeface-previewSample {
  font-size: 15px;
  margin: 0;
}

.FreestyleUsage {
  --radius: 4px;
  --border-color: #eee;
  padding: 0 1rem 1rem;
  margin-bottom: 1rem;
  max-width: 1200px;
}
.FreestyleUsage:last-child {
  border-bottom: 1px solid #ccc;
}
.FreestyleUsage-name {
  color: #333;
  margin-top: 1.5rem;
}
.FreestyleUsage-description {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  color: #666;
}
.FreestyleUsage-api + .FreestyleUsage-cssVars {
  margin-top: 1rem;
}
.FreestyleUsage-apiTitle, .FreestyleUsage-cssVarsTitle {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0;
}
.FreestyleUsage-standaloneFocusCta {
  float: right;
  margin-right: 1rem;
}
.FreestyleUsage-preview {
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  position: relative;
}
.FreestyleUsage-preview:after {
  content: "Preview";
  font-size: 0.7rem;
  position: absolute;
  right: 0;
  top: 0;
  background: #eee;
  color: #777;
  padding: 2px 8px;
  display: block;
  border-radius: 0 0 0 var(--radius);
}
.FreestyleUsage-sourceContainer, .FreestyleUsage-apiTable, .FreestyleUsage-cssVarsTable {
  margin-left: -1rem;
  margin-right: -1rem;
}
.FreestyleUsage-apiTable, .FreestyleUsage-cssVarsTable {
  width: 100%;
  padding: 0.5rem 0 0.2rem;
  border-collapse: collapse;
}
.FreestyleUsage-apiTable th, .FreestyleUsage-cssVarsTable th {
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
}
.FreestyleUsage-apiTable tr, .FreestyleUsage-cssVarsTable tr {
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.FreestyleUsage-apiTable tr:nth-child(even), .FreestyleUsage-cssVarsTable tr:nth-child(even) {
  background-color: #f9f9f9;
}
.FreestyleUsage-apiTable th,
.FreestyleUsage-apiTable td, .FreestyleUsage-cssVarsTable th,
.FreestyleUsage-cssVarsTable td {
  padding: 0.5rem 1rem;
}
.FreestyleUsage-sourceContainer {
  margin-top: 1rem;
}

/*
  FreestyleUsageArgument
*/
.FreestyleUsageArgument,
.FreestyleUsageCssVar {
  font-size: 0.8rem;
}
.FreestyleUsageArgument-name,
.FreestyleUsageCssVar-name {
  font-weight: bold;
  width: 20%;
}
.FreestyleUsageArgument-description,
.FreestyleUsageCssVar-description {
  width: 40%;
}
.FreestyleUsageArgument-required,
.FreestyleUsageCssVar-required {
  color: #d81c38;
  font-style: oblique;
}
.FreestyleUsageArgument-default,
.FreestyleUsageCssVar-default {
  font-family: monospace;
}
.FreestyleUsageArgument-jsonViewer,
.FreestyleUsageCssVar-jsonViewer {
  background-color: #222;
  min-width: 300px;
  padding: 1rem;
}

.FreestyleUsageBoolean {
  position: relative;
  display: flex;
}
.FreestyleUsageBoolean:after {
  content: "False";
  display: block;
  position: absolute;
  top: 2px;
  left: 27px;
  font-family: monospace;
  color: #999;
}
.FreestyleUsageBoolean.is-checked:after {
  content: "True";
  color: #333;
  font-weight: 700;
}

.FreestyleUsageArray-item {
  margin: 0 0 0.5em 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.FreestyleUsageArray-removeItem, .FreestyleUsageArray-addItem {
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  padding: 2px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8em;
  border-radius: 4px;
}
.FreestyleUsageArray-removeItem {
  color: #999;
  opacity: 0.5;
}
.FreestyleUsageArray-addItem {
  font-weight: 700;
  padding: 3px 8px;
  color: #666;
  background: #ddd;
}
.FreestyleUsageArray-item:hover .FreestyleUsageArray-removeItem {
  opacity: 1;
}

.u-codePill {
  background-color: #eee;
  border-radius: 2px;
  color: #777;
  display: inline-block;
  font-family: monospace;
  margin-right: 0.2em;
  padding: 1px 7px;
}
@layer vendor, reset, utilities, boxelComponentL1, boxelComponentL2,
  boxelComponentL3, boxelComponentL4;
/* The tiers are load-bearing. A wrapper that passes its own class onto the
   wrapped component's root shares one element with it, so both are single-class
   selectors that tie on specificity — only the tier breaks it. Sit one tier
   above the highest component you pass a class to; L1 if none. Button L1 →
   IconButton L2 → ContextButton L3 → CardHeader L4.

   This statement does not survive bundling — see "CSS layers" in
   ../../README.md. Every app entry repeats it in an inline \3c style> at the top
   of <head>, and that copy is the one that decides the order. Keep them in
   sync. */

/* Vendor stylesheets belong here, in the lowest layer. A JS `import` in a
   component arrives unlayered and wins instead. */

@layer vendor{

/* ember-basic-dropdown's structural styles. The addon ships them only as
   SCSS (scss/base.scss) and injects nothing into the build itself, so this
   is that file compiled with its default variable values. Without these
   rules, teleported dropdown content renders in normal flow at the
   destination element instead of positioned near its trigger. */

.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #fff;
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}
}

@layer vendor{

.ember-power-select-dropdown * {
  box-sizing: border-box;
}

.ember-power-select-trigger {
  position: relative;
  border-top: var(--ember-power-select-trigger-border-top, var(--ember-power-select-trigger-border, 1px solid #aaa));
  border-bottom: var(--ember-power-select-trigger-border-bottom, var(--ember-power-select-trigger-border, 1px solid #aaa));
  border-right: var(--ember-power-select-trigger-border-right, var(--ember-power-select-trigger-border, 1px solid #aaa));
  border-left: var(--ember-power-select-trigger-border-left, var(--ember-power-select-trigger-border, 1px solid #aaa));
  border-radius: var(--ember-power-select-trigger-default-border-radius, var(--ember-power-select-default-border-radius, 4px));
  background-color: var(--ember-power-select-background-color, #fff);
  line-height: var(--ember-power-select-line-height, 1.75em);
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: var(--ember-power-select-line-height, 1.75em);
  user-select: none;
  -webkit-user-select: none;
  color: var(--ember-power-select-text-color, inherit);
  /* Minimum clearfix for modern browsers */
}
.ember-power-select-trigger:after {
  content: "";
  display: table;
  clear: both;
}
.ember-power-select-trigger:not(.ember-power-select-multiple-trigger) .ember-power-select-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: var(--ember-power-select-active-trigger-border-top, var(--ember-power-select-active-trigger-border, 1px solid #aaa));
  border-bottom: var(--ember-power-select-active-trigger-border-bottom, var(--ember-power-select-active-trigger-border, 1px solid #aaa));
  border-right: var(--ember-power-select-active-trigger-border-right, var(--ember-power-select-active-trigger-border, 1px solid #aaa));
  border-left: var(--ember-power-select-active-trigger-border-left, var(--ember-power-select-active-trigger-border, 1px solid #aaa));
  box-shadow: var(--ember-power-select-focus-box-shadow, none);
  outline: var(--ember-power-select-focus-outline, none);
}

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] {
  border-bottom-left-radius: var(--ember-power-select-opened-border-radius, 0);
  border-bottom-right-radius: var(--ember-power-select-opened-border-radius, 0);
}

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] {
  border-top-left-radius: var(--ember-power-select-opened-border-radius, 0);
  border-top-right-radius: var(--ember-power-select-opened-border-radius, 0);
}

.ember-power-select-placeholder {
  color: var(--ember-power-select-placeholder-color, #999);
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: var(--ember-power-select-trigger-icon-color, var(--ember-power-select-border-color, #aaa)) transparent transparent transparent;
}
.ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon {
  transform: rotate(180deg);
}

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer;
}

.ember-power-select-multiple-options {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}
.ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container {
  flex-grow: 1;
  display: flex;
}
.ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container input {
  flex-grow: 1;
}

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  background-color: transparent;
  text-indent: 2px;
}
.ember-power-select-trigger-multiple-input:disabled {
  background-color: var(--ember-power-select-disabled-background-color, #eee);
}
.ember-power-select-trigger-multiple-input {
  /* There's a browser bug where this selectos cannot be chained with commas */
}
.ember-power-select-trigger-multiple-input::placeholder {
  opacity: 1;
  color: var(--ember-power-select-placeholder-color, #999);
}
.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
  opacity: 1;
  color: var(--ember-power-select-placeholder-color, #999);
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: var(--ember-power-select-placeholder-color, #999);
}
.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
  opacity: 1;
  color: var(--ember-power-select-placeholder-color, #999);
}

.ember-power-select-multiple-option {
  border: var(--ember-power-select-multiple-option-border, 1px solid var(--ember-power-select-multiple-option-border-color, gray));
  border-radius: var(--ember-power-select-multiple-option-border-radius, var(--ember-power-select-default-border-radius, 4px));
  color: var(--ember-power-select-multiple-selection-color, #333);
  background-color: var(--ember-power-select-multiple-selection-background-color, #e4e4e4);
  padding: var(--ember-power-select-multiple-option-padding, 0 4px);
  line-height: var(--ember-power-select-multiple-option-line-height, 1.45);
  margin: 2px 0 2px 3px;
}

.ember-power-select-multiple-remove-btn {
  cursor: pointer;
}
.ember-power-select-multiple-remove-btn:not(:hover) {
  opacity: 0.5;
}

.ember-power-select-search {
  padding: 4px;
}

.ember-power-select-search-input {
  border: var(--ember-power-select-search-field-border, var(--ember-power-select-default-border, 1px solid #aaa));
  border-radius: var(--ember-power-select-search-input-border-radius, 0);
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px;
}
.ember-power-select-search-input:focus {
  border: var(--ember-power-select-search-field-focus-border, var(--ember-power-select-default-focus-border, 1px solid #aaa));
  box-shadow: var(--ember-power-select-focus-box-shadow, none);
  outline: var(--ember-power-select-focus-outline, none);
}

.ember-power-select-search-input-field {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  background-color: transparent;
}

.ember-power-select-dropdown {
  border-left: var(--ember-power-select-dropdown-left-border, var(--ember-power-select-dropdown-border, 1px solid #aaa));
  border-right: var(--ember-power-select-dropdown-right-border, var(--ember-power-select-dropdown-border, 1px solid #aaa));
  line-height: var(--ember-power-select-line-height, 1.75em);
  border-radius: var(--ember-power-select-dropdown-default-border-radius, var(--ember-power-select-default-border-radius, 4px));
  box-shadow: var(--ember-power-select-dropdown-box-shadow, none);
  overflow: hidden;
  color: var(--ember-power-select-text-color, inherit);
  background-color: var(--ember-power-select-background-color, #fff);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  transform: translateY(calc(-1 * var(--ember-power-select-dropdown-margin, 0)));
  border-top: var(--ember-power-select-dropdown-top-border, var(--ember-power-select-dropdown-border, 1px solid #aaa));
  border-bottom: var(--ember-power-select-dropdown-contiguous-border, none);
  border-bottom-left-radius: var(--ember-power-select-opened-border-radius, 0);
  border-bottom-right-radius: var(--ember-power-select-opened-border-radius, 0);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below,
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  transform: translateY(var(--ember-power-select-dropdown-margin, 0));
  border-top: var(--ember-power-select-dropdown-contiguous-border, none);
  border-bottom: var(--ember-power-select-dropdown-bottom-border, var(--ember-power-select-dropdown-border, 1px solid #aaa));
  border-top-left-radius: var(--ember-power-select-opened-border-radius, 0);
  border-top-right-radius: var(--ember-power-select-opened-border-radius, 0);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%;
}

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
.ember-power-select-options[role=listbox] {
  overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
  -webkit-overflow-scrolling: touch;
  max-height: calc(var(--ember-power-select-number-of-visible-options, 7) * var(--ember-power-select-line-height, 1.75em));
}

.ember-power-select-option {
  cursor: pointer;
  padding: 0 var(--ember-power-select-option-padding, 8px);
}

.ember-power-select-group[aria-disabled=true] {
  color: var(--ember-power-select-disabled-option-color, #999);
  cursor: not-allowed;
}

.ember-power-select-group[aria-disabled=true] .ember-power-select-option,
.ember-power-select-option[aria-disabled=true] {
  color: var(--ember-power-select-disabled-option-color, #999);
  pointer-events: none;
  cursor: not-allowed;
}

.ember-power-select-option[aria-selected=true] {
  background-color: var(--ember-power-select-selected-background, #ddd);
}

.ember-power-select-option[aria-current=true] {
  background-color: var(--ember-power-select-highlighted-background, #5897fb);
  color: var(--ember-power-select-highlighted-color, #fff);
}

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold;
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: var(--ember-power-select-disabled-background-color, #eee);
}

.ember-power-select-trigger {
  padding: var(--ember-power-select-trigger-ltr-padding, 0 16px 0 0);
}

.ember-power-select-selected-item,
.ember-power-select-placeholder {
  margin-left: 8px;
}

.ember-power-select-status-icon {
  right: 5px;
}

.ember-power-select-clear-btn {
  right: var(--ember-power-select-clear-btn-margin, 25px);
}

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: calc(3 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: calc(5 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-group .ember-power-select-option {
  padding-left: calc(3 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-group .ember-power-select-group-name {
  padding-left: var(--ember-power-select-option-padding, 8px);
}

.ember-power-select-trigger[dir=rtl] {
  padding: var(--ember-power-select-trigger-rtl-padding, 0 0 0 16px);
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item,
.ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
  margin-right: 8px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
  left: 5px;
  right: initial;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
  left: var(--ember-power-select-clear-btn-margin, 25px);
  right: initial;
}

.ember-power-select-visually-hidden {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: calc(3 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: calc(5 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: calc(3 * var(--ember-power-select-option-padding, 8px));
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: var(--ember-power-select-option-padding, 8px);
}
}

@layer vendor{

.ember-power-calendar {
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  line-height: 1.4286;
}

.ember-power-calendar-nav {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  line-height: 2;
}

.ember-power-calendar-nav * {
  box-sizing: border-box;
}

.ember-power-calendar-days,
.ember-power-calendar-days * {
  box-sizing: border-box;
}

.ember-power-calendar-nav-title {
  flex: 1;
  text-align: center;
}

.ember-power-calendar-row {
  display: flex;
  justify-content: space-between;
}

.ember-power-calendar-weekday {
  appearance: none;
  flex: 1 1 100%;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 0;
}

.ember-power-calendar-day {
  appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  flex: 1 1 100%;
  font-size: inherit;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ember-power-calendar-nav-control {
  appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  line-height: 1;
  font-size: 150%;
}
.ember-power-calendar-nav-control:focus {
  transform: scale(1.2);
}

.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
  font-weight: bold;
}

.ember-power-calendar-day--interactive[disabled] {
  opacity: 0.4;
}

.ember-power-calendar {
  width: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 7 - 2px + 0px + 0px);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 1);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 2);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 3);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 4);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 5);
}
.ember-power-calendar .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 6);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 1);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 2);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 3);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 4);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 5);
}
.ember-power-calendar .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: calc(calc(var(--ember-power-calendar-cell-size, 35px) + 2px) * 6);
}
.ember-power-calendar .ember-power-calendar-day,
.ember-power-calendar .ember-power-calendar-weekday {
  max-width: var(--ember-power-calendar-cell-size, 35px);
  max-height: var(--ember-power-calendar-cell-size, 35px);
  width: var(--ember-power-calendar-cell-size, 35px);
  height: var(--ember-power-calendar-cell-size, 35px);
}
.ember-power-calendar .ember-power-calendar-weekdays,
.ember-power-calendar .ember-power-calendar-week {
  height: calc(var(--ember-power-calendar-cell-size, 35px) + 2px);
  padding-left: 0px;
  padding-right: 0px;
}
.ember-power-calendar .ember-power-calendar-day {
  color: #bbb;
}
.ember-power-calendar .ember-power-calendar-weekdays {
  color: #333333;
}
.ember-power-calendar .ember-power-calendar-nav-control {
  color: #0078c9;
}
.ember-power-calendar .ember-power-calendar-nav-control:focus {
  color: rgb(48, 171.5820895522, 255);
}
.ember-power-calendar .ember-power-calendar-day--current-month {
  color: #656d78;
  background-color: #f5f7fa;
}
.ember-power-calendar .ember-power-calendar-day--today {
  background-color: #eee;
}
.ember-power-calendar .ember-power-calendar-day:not([disabled]):hover {
  background-color: #eee;
}
.ember-power-calendar .ember-power-calendar-day--focused {
  box-shadow: inset 0 -2px 0 0 #0078c9;
}
.ember-power-calendar .ember-power-calendar-day--selected.ember-power-calendar-day--range-start {
  background-color: rgb(150, 212.6865671642, 255);
}
.ember-power-calendar .ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover {
  background-color: rgb(150, 212.6865671642, 255);
}
.ember-power-calendar .ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
  background-color: rgb(150, 212.6865671642, 255);
}
.ember-power-calendar .ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
  background-color: rgb(150, 212.6865671642, 255);
}
.ember-power-calendar .ember-power-calendar-day--selected {
  background-color: rgb(201, 233.2388059701, 255);
  color: #656d78;
}
.ember-power-calendar .ember-power-calendar-day--selected:not([disabled]):hover {
  background-color: rgb(201, 233.2388059701, 255);
  color: #656d78;
}
.ember-power-calendar .ember-power-calendar-day--other-month:not([disabled]):hover {
  color: #656d78;
}
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  :root {
    @supports (interpolate-size: allow-keywords) {
      interpolate-size: allow-keywords;
    }
  }

  #isolated-render {
    display: none;
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    color: var(--boxel-dark, #000);
    font-family: var(
      --boxel-font-family,
      'IBM Plex Sans',
      'Helvetica Neue',
      Arial,
      sans-serif
    );
    font-size: var(--boxel-body-font-size, 0.875rem);
    letter-spacing: var(--boxel-lsp-xs, 0.01em);
    line-height: var(--boxel-line-height-sm, calc(18 / 13));
    background-color: var(--boxel-light, #fff);
    overscroll-behavior: none;
  }

  body.has-modal {
    overflow: hidden;
  }

  code,
  pre,
  kbd,
  samp {
    font-family: var(
      --boxel-monospace-font-family,
      'IBM Plex Mono',
      'Menlo',
      'Courier New',
      Courier,
      monospace
    );
  }

  a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
  }

  button {
    display: inline-block;
    font: inherit;
  }

  img,
  svg {
    display: inline-block;
    max-width: 100%;
  }

  [alt] {
    --icon-color: currentColor;
    color: currentColor;
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
  }

  a:hover {
    color: var(--boxel-highlight);
    cursor: pointer;
  }

  a:focus {
    outline: var(--boxel-outline);
  }

  a:focus:not(:focus-visible) {
    outline-color: transparent;
  }

  button:hover:not(:disabled),
  [role='button']:hover:not(:disabled, [aria-disabled='true']) {
    cursor: pointer;
  }

  button:focus:not(:disabled),
  [role='button']:focus:not(:disabled) {
    outline: var(--boxel-outline);
  }

  button:focus:not(:focus-visible),
  [role='button']:focus:not(:focus-visible) {
    outline-color: transparent;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    letter-spacing: inherit;
  }

  input:not([type='color']):disabled,
  select:disabled,
  textarea:disabled {
    opacity: 0.5;
  }

  input[type='color']:disabled {
    pointer-events: none;
  }

  input:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible) {
    outline-color: transparent;
  }

  input:focus-visible,
  textarea:focus-visible {
    outline-color: var(--boxel-highlight);
  }
}

@layer utilities {
  .boxel-contents-only {
    display: contents;
  }

  /* Hides content visually only
  (accessible via screen readers) */
  .boxel-sr-only:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* may need to add "max-width: 100%;" in some cases */
  .boxel-ellipsize {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Thin translucent scrollbar for dark-background containers */
  .boxel-dark-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255 255 255 / 20%) transparent;
  }
  .boxel-dark-scrollbar::-webkit-scrollbar {
    width: 0.5rem;
  }
  .boxel-dark-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .boxel-dark-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255 255 255 / 20%);
    border-radius: var(--boxel-border-radius-xs);
  }
  .boxel-dark-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255 255 255 / 35%);
  }

  /* can be used via `--boxel-infinite-spin-animation` css-variable. example:
    @media (prefers-reduced-motion: no-preference) {
      .loading-icon {
        animation: var(--boxel-infinite-spin-animation);
      }
    }
  */
  @keyframes boxel-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

#ember-basic-dropdown-wormhole
  .boxel-dropdown__content.ember-basic-dropdown-content {
  z-index: calc(var(--boxel-layer-modal-urgent) + 1);
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src:
    local('IBM Plex Sans Var'),
    local('IBMPlexSansVar'),
    local('IBM Plex Sans Var Regular'),
    local('IBMPlexSansVar-Regular'),
    url('/assets/IBMPlexSansVar-Roman-DKYrB2Yq.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src:
    local('IBM Plex Sans Var Italic'),
    local('IBMPlexSansVar-Italic'),
    url('/assets/IBMPlexSansVar-Italic-Qfv9lJgr.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Mono'),
    local('IBMPlexMono'),
    url('/assets/IBMPlexMono-Regular-C-SBB-bw.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Mono Medium'),
    url('/assets/IBMPlexMono-Medium-B772pXP5.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Mono SemiBold'),
    url('/assets/IBMPlexMono-SemiBold-DAxHeMPo.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Mono Bold'),
    local('IBMPlexMono-Bold'),
    url('/assets/IBMPlexMono-Bold-DXjtWYQI.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Mono Italic'),
    url('/assets/IBMPlexMono-Italic-DYZFG3Th.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Mono Medium Italic'),
    url('/assets/IBMPlexMono-MediumItalic-DcUpDvfM.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Mono SemiBold Italic'),
    url('/assets/IBMPlexMono-SemiBoldItalic-D0lqA2ge.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Mono Bold Italic'),
    url('/assets/IBMPlexMono-BoldItalic-BgXsX49L.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Serif'),
    local('IBM Plex Serif Regular'),
    local('IBMPlexSerif'),
    local('IBMPlexSerif-Regular'),
    url('/assets/IBMPlexSerif-Regular-C9sZyoRs.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Serif Medium'),
    local('IBMPlexSerif-Medium'),
    url('/assets/IBMPlexSerif-Medium-BpRXNayp.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Serif SemiBold'),
    local('IBMPlexSerif-SemiBold'),
    url('/assets/IBMPlexSerif-SemiBold-CkQF1M7W.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local('IBM Plex Serif Bold'),
    local('IBMPlexSerif-Bold'),
    url('/assets/IBMPlexSerif-Bold-DfPAuzEv.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Serif Italic'),
    local('IBMPlexSerif-Italic'),
    url('/assets/IBMPlexSerif-Italic-DslcfnRo.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Serif Medium Italic'),
    local('IBMPlexSerif-MediumItalic'),
    url('/assets/IBMPlexSerif-MediumItalic-Bj_1Y4Ju.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Serif SemiBold Italic'),
    local('IBMPlexSerif-SemiBoldItalic'),
    url('/assets/IBMPlexSerif-SemiBoldItalic-xayuBPYu.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src:
    local('IBM Plex Serif Bold Italic'),
    local('IBMPlexSerif-BoldItalic'),
    url('/assets/IBMPlexSerif-BoldItalic-IdHRMZmK.woff2') format('woff2');
}
:root {
  /* internal variables used for base scaling defaults - do not override */
  --_boxel-font-size: 1rem; /* 16px */
  --_boxel-spacing: 1rem; /* 16px */
  --_boxel-radius: 0.625rem; /* 10px */
  --_boxel-sp-unit: 0.25rem; /* 4px */
  /* end of internal variables */

  /* boxel base variable defaults  */
  --boxel-font-size: var(--_boxel-font-size);
  --boxel-spacing: var(--_boxel-spacing);
  --boxel-radius: var(--_boxel-radius);

  /* font-family */
  --boxel-font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --boxel-serif-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
  --boxel-monospace-font-family:
    'IBM Plex Mono', 'Menlo', 'Courier New', Courier, monospace;

  /* font size range */
  --boxel-font-size-2xl: calc(var(--boxel-font-size) * 2.25); /* 36px */
  --boxel-font-size-xl: calc(var(--boxel-font-size) * 2); /* 32px */
  --boxel-font-size-lg: calc(var(--boxel-font-size) * 1.375); /* 22px */
  --boxel-font-size-md: calc(var(--boxel-font-size) * 1.25); /* 20px */
  /* --boxel-font-size: 16px; (base - declared on line 10) */
  --boxel-font-size-sm: calc(var(--boxel-font-size) * 0.875); /* 14px */
  --boxel-font-size-xs: calc(var(--boxel-font-size) * 0.75); /* 12px */
  --boxel-font-size-2xs: calc(var(--boxel-font-size) * 0.6875); /* 11px */
  /* text typed into a field on touch screens: iOS zooms in on focus under 16px */
  --boxel-form-control-touch-font-size: max(1rem, var(--boxel-font-size));

  /* font shorthand */
  --boxel-font-xl: var(--boxel-font-size-xl) / calc(43 / 32)
    var(--boxel-font-family);
  --boxel-font-lg: var(--boxel-font-size-lg) / calc(30 / 22)
    var(--boxel-font-family);
  --boxel-font-md: var(--boxel-font-size-md) / calc(28 / 20)
    var(--boxel-font-family);
  --boxel-font: var(--boxel-font-size) / calc(22 / 16) var(--boxel-font-family);
  --boxel-font-sm: var(--boxel-font-size-sm) / calc(18 / 13)
    var(--boxel-font-family); /* default */
  --boxel-font-xs: var(--boxel-font-size-xs) / calc(15 / 11)
    var(--boxel-font-family);

  /* line-height for corresponding font-size */
  --boxel-line-height-xl: calc(43 / 32); /* 1.34375 */
  --boxel-line-height-lg: calc(30 / 22); /* 1.3636 */
  --boxel-line-height-md: calc(28 / 20); /* 1.4 */
  --boxel-line-height: calc(22 / 16); /* 1.375 */
  --boxel-line-height-sm: calc(18 / 13); /* 1.3846 (body) */
  --boxel-line-height-xs: calc(15 / 11); /* 1.3636 */

  /* letter-spacing */
  /* Note: the px conversion is using default font_size = 16px (1rem) */
  /* Formula: px = em * font_size */
  --boxel-lsp-xxl: 0.1em; /* 1.6px */
  --boxel-lsp-xl: 0.05em; /* 0.8px */
  --boxel-lsp-lg: 0.035em; /* 0.56px */
  --boxel-lsp: 0.025em; /* 0.4px */
  --boxel-lsp-sm: 0.015em; /* 0.24px */
  --boxel-lsp-xs: 0.01em; /* 0.16px */
  --boxel-lsp-xxs: 0.005em; /* 0.08px */

  /* Modular scale for spacing */
  --boxel-ratio: 1.333; /* scale (based on "Perfect Fourth" scale) */
  --boxel-sp-6xs: calc(var(--boxel-sp-5xs) / var(--boxel-ratio)); /* 2.14px */
  --boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--boxel-ratio)); /* 2.86px */
  --boxel-sp-4xs: calc(var(--boxel-sp-3xs) / var(--boxel-ratio)); /* 3.57px */
  --boxel-sp-3xs: calc(var(--boxel-sp-2xs) / var(--boxel-ratio)); /* 4.76px */
  --boxel-sp-2xs: calc(var(--boxel-sp-xs) / var(--boxel-ratio)); /* 6.75px */
  --boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--boxel-ratio)); /* 9px */
  --boxel-sp-sm: calc(var(--boxel-sp) / var(--boxel-ratio)); /* 12px */
  --boxel-sp: var(--boxel-spacing); /* 16px */
  --boxel-sp-lg: calc(var(--boxel-sp) * var(--boxel-ratio)); /* 21.33px */
  --boxel-sp-xl: calc(var(--boxel-sp-lg) * var(--boxel-ratio)); /* 28.44px */
  --boxel-sp-2xl: calc(var(--boxel-sp-xl) * var(--boxel-ratio)); /* 37.92px */
  --boxel-sp-3xl: calc(var(--boxel-sp-2xl) * var(--boxel-ratio)); /* 50.56px */
  --boxel-sp-4xl: calc(var(--boxel-sp-3xl) * var(--boxel-ratio)); /* 67.41px */
  --boxel-sp-5xl: calc(var(--boxel-sp-4xl) * var(--boxel-ratio)); /* 89.88px */
  --boxel-sp-6xl: calc(var(--boxel-sp-5xl) * var(--boxel-ratio)); /* 119.84px */

  /* common icon sizes */
  --boxel-icon-2xs: 0.75rem; /* 12px */
  --boxel-icon-xxs: var(
    --boxel-icon-2xs
  ); /* DEPRECATED: use --boxel-icon-2xs */
  --boxel-icon-xs: 1rem; /* 16px */
  --boxel-icon-sm: 1.25rem; /* 20px */
  --boxel-icon-med: 1.875rem; /* 30px */
  --boxel-icon-lg: 2.5rem; /* 40px */
  --boxel-icon-xl: 3.75rem; /* 60px */
  --boxel-icon-xxl: 5rem; /* 80px */

  /* button sizes */
  --boxel-button-mini: 1.25rem; /* 20px */
  --boxel-button-xs: 1.5rem; /* 24px */
  --boxel-button-sm: 1.875rem; /* 30px - base */
  --boxel-button-tall: 2.5rem; /* 40px */
  --boxel-button-touch: 3rem; /* 48px */

  /* border-color */
  --boxel-border-color: #d3d3d3;
  --boxel-button-border-color: #acacac;

  /* border */
  --boxel-border: 1px solid var(--boxel-border-color);
  --boxel-border-dark: 1px solid var(--boxel-dark);
  --boxel-border-flexible: 1px solid rgba(255, 255, 255, 0.35);
  --boxel-border-card: 1px solid rgba(0, 0, 0, 0.1);

  /* border-radius */
  --boxel-border-radius-2xs: calc(var(--boxel-border-radius) * 0.5); /* 1.5px */
  --boxel-border-radius-xs: calc(var(--boxel-border-radius) * 0.4); /* 4px */
  --boxel-border-radius-sm: calc(var(--boxel-border-radius) * 0.6); /* 6px */
  --boxel-border-radius: var(--boxel-radius); /* 10px - base */
  --boxel-border-radius-lg: calc(var(--boxel-border-radius) * 1.2); /* 12px */
  --boxel-border-radius-xl: calc(var(--boxel-border-radius) * 1.5); /* 15px */
  --boxel-border-radius-2xl: calc(var(--boxel-border-radius) * 2); /* 20px */

  --boxel-border-radius-pill: 9999px; /* pill shape */

  /* animations */
  --boxel-infinite-spin-animation: boxel-spin 6000ms linear infinite;

  /* transition */
  --boxel-transition: 0.2s ease;
  --boxel-transition-properties:
    color var(--boxel-transition), background-color var(--boxel-transition),
    border-color var(--boxel-transition), box-shadow var(--boxel-transition),
    filter var(--boxel-transition); /* for commonly used properties */

  /* box-shadow */
  --boxel-box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  --boxel-box-shadow-hover: 0 3px 10px rgb(0 0 0 / 15%);
  --boxel-deep-box-shadow: 0 5px 15px 0 rgba(0 0 0 / 50%);

  /* outline */
  --boxel-outline-width: 2px;
  --boxel-outline-color: var(--primary, var(--boxel-highlight));
  --boxel-outline-style: solid;
  --boxel-outline: var(--boxel-outline-width) var(--boxel-outline-style)
    var(--boxel-outline-color);

  /* Container sizes */
  --boxel-xxs-container: 15.625rem; /* 250px */
  --boxel-xs-container: 17.8125rem; /* 285px */
  --boxel-sm-container: 36.25rem; /* 580px */
  --boxel-md-container: 40.625rem; /* 650px */
  --boxel-lg-container: 43.75rem; /* 700px */
  --boxel-xl-container: 65rem; /* 1040px */
  --boxel-xxl-container: 83.76rem; /* 1340px */

  /* COLOR PALETTE
   *
   * INTERNAL — these raw palette values are an implementation detail, not the
   * public theming API. Component styles and cards should consume the semantic
   * tokens defined in theme.css (--primary, --foreground, --background, --muted,
   * --border, --destructive, etc.), which are mapped onto this palette in the
   * default theme. Referencing a raw --boxel-<shade> for a semantic color role
   * bypasses theming and breaks under custom themes / dark mode; reach for the
   * semantic token instead. Keep a raw palette reference only when a specific
   * fixed shade is genuinely intended, independent of the active theme.
   */

  /**** Revisited Colors BOXEL-UI ****/
  --boxel-50: #f5f5f5;
  --boxel-100: #f8f7fa;
  --boxel-200: #e8e8e8;
  --boxel-300: #d1d1d1;
  --boxel-400: #afafb7;
  --boxel-450: #919191;
  --boxel-500: #5a586a;
  --boxel-550: #525252;
  --boxel-575: #4f4b57;
  --boxel-600: #413e4e;
  --boxel-650: #3b394b;
  --boxel-700: #272330;
  --boxel-800: #1a1628;

  --boxel-cyan: #00ebe5;
  --boxel-teal: #00ffba;
  --boxel-dark-teal: #00da9f; /* darker teal; feeds --boxel-highlight-hover */
  --boxel-red: #ff5050;
  --boxel-dark-red: #bc0302;
  --boxel-pink: #ff009d;
  --boxel-orange: #ff7f00;
  --boxel-amber: #d97706;
  --boxel-dark-amber: #b26106; /* attention status default */
  --boxel-yellow: #ffd800;
  --boxel-lime: #c3fc33;
  --boxel-green: #37eb77;
  --boxel-dark-green: #00ac3d;
  --boxel-deep-green: #00892f;
  --boxel-lilac: #a66dfa;
  --boxel-fuschia: #ac00ff;
  --boxel-purple: #6638ff;
  --boxel-blue: #0069f9;
  --boxel-navy: #281e78;

  --boxel-label-color: currentColor;
  /**** End of revisited colors ****/

  /* Primary colors */
  --boxel-light: #fff;
  --boxel-dark: #000;
  --boxel-light-10: rgba(255, 255, 255, 0.1);
  --boxel-light-25: rgba(255, 255, 255, 0.25);
  --boxel-light-35: rgba(255, 255, 255, 0.35);
  --boxel-light-50: rgba(255, 255, 255, 0.5);
  --boxel-light-60: rgba(255, 255, 255, 0.6);
  --boxel-light-70: rgba(255, 255, 255, 0.7);
  --boxel-dark-10: rgba(0, 0, 0, 0.1);
  --boxel-dark-30: rgba(0, 0, 0, 0.3);
  --boxel-dark-40: rgba(0, 0, 0, 0.4);
  --boxel-dark-50: rgba(0, 0, 0, 0.5);
  --boxel-dark-80: rgba(0, 0, 0, 0.8);
  --boxel-dark-hover: var(--boxel-dark-10);
  --boxel-darker-hover: var(--boxel-dark-50);
  --boxel-light-hover-35: var(--boxel-light-35);

  --boxel-highlight: var(--boxel-teal);
  --boxel-highlight-hover: var(--boxel-dark-teal);
  --boxel-highlight-foreground: #0a2e1c; /* readable dark-green foreground for text/icons on a --boxel-highlight surface */
  --boxel-danger: var(
    --boxel-red
  ); /* formerly boxel-error-100: the latest design docs (8/16/2023) use this color for danger instead */
  --boxel-danger-hover: #fa1521;
  --boxel-danger-bg: #ffe9e9;

  /* Boxel purples */
  --boxel-purple-100: var(--boxel-100);
  --boxel-purple-200: var(--boxel-400); /* formerly: #b3b1b8; */
  --boxel-purple-300: var(--boxel-400);
  --boxel-purple-400: var(--boxel-500); /* formerly: #6b6a80; */
  --boxel-purple-500: var(--boxel-500);
  --boxel-purple-600: var(--boxel-600); /* Cardspace bg */
  --boxel-purple-700: var(--boxel-700); /* formerly: #393642; */
  --boxel-purple-750: var(--boxel-700); /* formerly: #363441; */
  --boxel-purple-800: var(--boxel-700); /* formerly: #2e2d38; */
  --boxel-purple-900: var(--boxel-700); /* Card Wallet bg */

  /* Boxel neutrals */
  --boxel-light-100: var(--boxel-50); /* formerly: #f4f4f4; */
  --boxel-light-200: var(--boxel-200); /* formerly: #f0f0f0; */
  --boxel-light-300: var(--boxel-200); /* formerly: #efefef; */
  --boxel-light-400: var(--boxel-200);
  --boxel-light-500: var(--boxel-300); /* formerly: #dedede; */
  --boxel-light-600: var(--boxel-300);

  /* Status colors */
  --boxel-destructive: var(--boxel-error-100);
  --boxel-warning: var(--boxel-yellow);
  --boxel-success: var(--boxel-deep-green);

  --boxel-error-100: #dc0202; /* alert - attention - error */
  --boxel-error-200: #ed0000;
  --boxel-error-300: #ff0000;
  --boxel-error-400: #ff5050;
  --boxel-warning-100: var(--boxel-yellow); /* warning - notification */
  --boxel-warning-200: #ffba00;
  --boxel-success-100: var(--boxel-green);
  --boxel-success-200: var(--boxel-teal);
  --boxel-success-300: var(--boxel-dark-green);

  /* z-index layers */
  --boxel-layer-floating-button: 1000;
  --boxel-layer-modal-default: 1500;
  --boxel-layer-modal-urgent: 2000;

  /* Form control appearance */
  --boxel-form-control-height: 2.5rem; /* 40px */
  --boxel-form-control-height-sm: 1.75rem; /* 28px */
  /* the text line of a height-sm field with 0.25rem padding-block and 1px borders */
  --boxel-form-control-line-height-sm: calc(
    var(--boxel-form-control-height-sm) - 0.5rem - 2px
  ); /* 18px */
  --boxel-form-control-placeholder-color: var(--boxel-400);
  --boxel-form-control-border-color: var(--boxel-border-color);
  --boxel-form-control-border-radius: var(--boxel-border-radius);
  --boxel-form-control-dark-mode-placeholder-color: #acacac;
  --boxel-form-control-dark-mode-border: var(--boxel-border-flexible);
  /* a disabled control's dimming */
  --boxel-disabled-opacity: 0.45;

  /* deprecated - Do Not Use */
  --boxel-sp-xxxl: var(--boxel-sp-3xl); /* xxxl is deprecated, use 3xl */
  --boxel-sp-xxl: var(--boxel-sp-2xl); /* xxl is deprecated, use 2xl */
  --boxel-sp-xxs: var(--boxel-sp-2xs); /* xxs is deprecated, use 2xs */
  --boxel-sp-xxxs: var(--boxel-sp-3xs); /* xxxs is deprecated, use 3xs */
  --boxel-border-radius-xxs: var(
    --boxel-border-radius-2xs
  ); /* xxs is deprecated, use 2xs */
  --boxel-border-radius-xxl: var(
    --boxel-border-radius-2xl
  ); /* xxl is deprecated, use 2xl */
}
/* Boxel UI — semantic token contract + default (light) theme.

   This file is the source of record for the semantic design tokens that
   boxel-ui components consume (--primary, --foreground, --muted, etc.).
   Shipping it from the addon means components render correctly with zero
   host configuration — a consumer that imports the addon's styles gets a
   complete, working theme by default.

   The default values below map the semantic tokens onto the --boxel-*
   palette declared in variables.css, so the palette remains the single
   underlying source of truth for brand colors. A consumer overrides any
   token by redeclaring it on :root (or a scoped element) after this file.

   The semantic tokens declared here are the contract every theme must
   satisfy. The typography roles (--boxel-<role>-*) are only their defaults
   outside a card: a theme sets a role through its typography field, never
   by redeclaring the variable. The dark-mode counterpart (a `.dark` /
   `[data-theme='dark']` scope) is layered on separately, below.

   Every card renders against this contract. An unthemed card has the default
   theme: the values in this file. A themed card links its own Theme, so its
   CardContainer carries `data-boxel-theme-scope` and a scoped stylesheet that
   layers that Theme over these defaults. That scope element is the
   "themed-card boundary" the comments below refer to.
*/

/* The inherited light/dark signal that scoped theme stylesheets key off (via a
   style container query). Kept out of the token block below on purpose: it must
   inherit *through* themed-card boundaries so a card's own `.dark` variables
   can follow the ambient scheme, while the token values themselves must not. */
:root,
[data-theme='light'] {
  --boxel-color-scheme: light;
}

/* Typography roles, for readers outside a card. Inside one, CardContainer
   publishes the theme's values over these, and resolves to the same
   defaults when the theme sets no typography. Scheme-independent, so
   declared once on :root. */
:root {
  /* heading (h1) */
  --boxel-heading-font-family: var(--font-sans);
  --boxel-heading-font-size: var(--boxel-font-size-lg); /* 22px */
  --boxel-heading-font-weight: 700;
  --boxel-heading-line-height: var(--boxel-line-height-lg);
  --boxel-heading-letter-spacing: normal;

  /* section heading (h2) */
  --boxel-section-heading-font-family: var(--boxel-heading-font-family);
  --boxel-section-heading-font-size: var(--boxel-font-size-md); /* 20px */
  --boxel-section-heading-font-weight: 500;
  --boxel-section-heading-line-height: var(--boxel-line-height-md);
  --boxel-section-heading-letter-spacing: normal;

  /* subheading (h3) */
  --boxel-subheading-font-family: var(--boxel-heading-font-family);
  --boxel-subheading-font-size: var(--boxel-font-size); /* 16px */
  --boxel-subheading-font-weight: 500;
  --boxel-subheading-line-height: var(--boxel-line-height);
  --boxel-subheading-letter-spacing: normal;

  /* body */
  --boxel-body-font-family: var(--font-sans);
  --boxel-body-font-size: var(--boxel-font-size-sm); /* 14px */
  --boxel-body-font-weight: 400;
  --boxel-body-line-height: var(--boxel-line-height-sm);
  --boxel-body-letter-spacing: var(--tracking-normal);

  /* caption */
  --boxel-caption-font-family: var(--boxel-body-font-family);
  --boxel-caption-font-size: var(--boxel-font-size-xs); /* 12px */
  --boxel-caption-font-weight: 500;
  --boxel-caption-line-height: var(--boxel-line-height-xs);
  --boxel-caption-letter-spacing: var(--boxel-body-letter-spacing);

  /* ui label: control text, table headers, badges. Kept off the
     `--boxel-label-*` family, which is Label's own contract. */
  --boxel-ui-label-font-family: var(--boxel-body-font-family);
  --boxel-ui-label-font-size: var(--boxel-font-size-xs); /* 12px */
  --boxel-ui-label-font-weight: 500;
  --boxel-ui-label-line-height: var(--boxel-line-height-xs);
  --boxel-ui-label-letter-spacing: var(--boxel-body-letter-spacing);

  /* eyebrow: the tracked-out kicker above a title */
  --boxel-eyebrow-font-family: var(--boxel-ui-label-font-family);
  --boxel-eyebrow-font-size: var(--boxel-font-size-2xs); /* 11px */
  --boxel-eyebrow-font-weight: 600;
  --boxel-eyebrow-line-height: var(--boxel-line-height-xs);
  --boxel-eyebrow-letter-spacing: 0.08em;
}

/* Light — the default theme, and the explicit `data-theme="light"` scope used
   to force light back on inside a dark subtree. Both resolve to the same
   values.

   `:where([data-boxel-theme-scope])` re-declares the full contract at every
   themed-card boundary so token values can't inherit into a themed card from
   the chrome or an outer theme card — a theme only overrides the tokens it
   defines, and the rest reset to these defaults instead of leaking through.
   `:where()` keeps the reset at zero specificity, so the card's own scoped
   theme stylesheet always wins. */
:root,
[data-theme='light'],
:where([data-boxel-theme-scope]) {
  /* surfaces */
  --background: var(--boxel-light);
  --foreground: var(--boxel-dark);
  --card: var(--boxel-light);
  --card-foreground: var(--boxel-dark);
  --popover: var(--boxel-light);
  --popover-foreground: var(--boxel-dark);
  /* Neutral surfaces beyond shadcn's, by role: the workspace ground behind the
     page, a well sunk into a card, an editable region at rest, the pointer
     acknowledgement, zebra rows, the selected row. `--foreground` must read on
     all of them, so none carries its own -foreground. `--hover` is translucent
     so it composes over whichever surface it lands on. */
  --canvas: var(--boxel-100);
  --inset: var(--boxel-50);
  --field: var(--boxel-light);
  --hover: var(--boxel-dark-10);
  --stripe: var(--boxel-50);
  --selected: color-mix(in oklch, var(--primary) 15%, var(--card));
  --tooltip: var(--boxel-dark-80);
  --tooltip-foreground: var(--boxel-light);
  /* third ink step, fainter than --muted-foreground */
  --subtle-foreground: var(--boxel-450);

  /* roles */
  --primary: var(--boxel-highlight);
  --primary-foreground: var(--boxel-dark);
  --secondary: var(--boxel-200);
  --secondary-foreground: var(--boxel-dark);
  --muted: var(--boxel-100);
  --muted-foreground: var(--boxel-500);
  --accent: var(--boxel-200);
  --accent-foreground: var(--boxel-dark);
  --destructive: var(--boxel-destructive);
  --destructive-foreground: var(--boxel-50);

  /* form + focus */
  --border: var(--boxel-border-color);
  --border-strong: var(--boxel-400);
  --input: var(--boxel-400);
  --ring: var(--boxel-highlight);
  --control-height: 2.5rem;

  /* charts */
  --chart-1: var(--boxel-fuschia);
  --chart-2: var(--boxel-purple);
  --chart-3: var(--boxel-lime);
  --chart-4: var(--boxel-blue);
  --chart-5: var(--boxel-green);
  --chart-6: var(--boxel-orange);
  --chart-7: var(--boxel-cyan);

  /* sidebar */
  --sidebar: var(--boxel-light);
  --sidebar-foreground: var(--boxel-dark);
  --sidebar-primary: var(--boxel-dark);
  --sidebar-primary-foreground: var(--boxel-light);
  --sidebar-accent: var(--boxel-200);
  --sidebar-accent-foreground: var(--boxel-dark);
  --sidebar-border: var(--boxel-border-color);
  --sidebar-ring: var(--boxel-highlight);

  /* typography */
  --font-sans:
    'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif,
    system-ui;
  --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;
  --font-mono:
    'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace;
  --tracking-normal: 0.01em;

  /* geometry + spacing */
  --radius: 0.625rem;
  --spacing: 0.25rem;

  /* shadow scale */
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: var(--boxel-dark);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --shadow-inset: inset 0 1px 2px hsl(0 0% 0% / 0.1);

  /* status */
  --success: var(--boxel-success);
  --success-foreground: var(--boxel-light);
  --warning: var(--boxel-warning);
  --warning-foreground: var(--boxel-dark);
  --info: var(--boxel-blue);
  --info-foreground: var(--boxel-light);
  --attention: var(--boxel-dark-amber);
  --attention-foreground: var(--boxel-light);
  --overlay: var(--boxel-dark-50);

  /* Hue as ink. `--x`/`--x-foreground` cover ink *on* a hue's fill; `--x-ink` is
     the hue used *as* ink on a neutral surface (a status label, a link, an icon).
     The default pulls each hue toward --foreground so it darkens on light and
     lightens on dark; a theme that sets only `--x` still gets a readable ink.
     Re-declared in the dark block: a var() inside a custom property resolves
     where it is declared, so a dark subtree would otherwise inherit the
     light-resolved color. */
  --primary-ink: color-mix(in oklch, var(--primary) 60%, var(--foreground));
  --secondary-ink: color-mix(in oklch, var(--secondary) 60%, var(--foreground));
  --accent-ink: color-mix(in oklch, var(--accent) 60%, var(--foreground));
  --destructive-ink: color-mix(
    in oklch,
    var(--destructive) 60%,
    var(--foreground)
  );
  --success-ink: color-mix(in oklch, var(--success) 60%, var(--foreground));
  --warning-ink: color-mix(in oklch, var(--warning) 60%, var(--foreground));
  --info-ink: color-mix(in oklch, var(--info) 60%, var(--foreground));
  --attention-ink: color-mix(in oklch, var(--attention) 60%, var(--foreground));

  /* other */
  /* same values the Switch falls back to; declared so a light region nested
     in a dark subtree re-resolves them instead of inheriting the dark thumb */
  --boxel-switch-thumb: var(--background);
  --boxel-switch-thumb-icon: var(--foreground);
  --boxel-button-default-border: var(--boxel-button-border-color);
  --boxel-button-default-active-background: var(--background);
  --boxel-button-default-active-foreground: var(--foreground);
  --boxel-button-default-active-border: var(--foreground);
  --boxel-button-primary-active-background: var(--boxel-highlight-hover);
  --boxel-button-secondary-background: transparent;
  /* declared in both scheme blocks: a var() inside a knob resolves where the
     knob is declared, so a light region nested in a dark subtree would
     otherwise inherit the dark-resolved color */
  --boxel-button-secondary-foreground: var(--foreground);
  --boxel-button-secondary-border: var(--boxel-button-border-color);
  --boxel-button-secondary-active-border: var(--foreground);
  --boxel-button-destructive-active-background: var(--boxel-dark-red);
  --boxel-button-link-primary-foreground: var(--boxel-highlight-hover);
  --boxel-button-disabled-opacity: 1;
  --boxel-button-disabled-background: var(--boxel-border-color);
  --boxel-button-disabled-border: 1px solid var(--boxel-border-color);
  --boxel-button-disabled-foreground: var(--boxel-450);
}

/* The default theme's destructive fill is dark enough to read as ink on its
   light surfaces, so its ink is the fill itself. Themed cards keep the mix
   above, since a theme's own fill may be too light to read as text; a theme
   that wants the fill sets its own `--destructive-ink`. */
:root,
[data-theme='light']:not(:where([data-boxel-theme-scope]) *) {
  --destructive-ink: var(--destructive);
}

/* ── Themed-card boundary reset ─────────────────────────────────────────────

  Which values: the component knobs the light or dark block above sets, so
  they can't inherit into a themed card. Keep this list and the scheme-island
  copy below the dark block in step.

  Not listed here, for two different reasons:
  - --success and --warning are already declared with the rest of the contract
    on the scope selector above. Do not re-declare them `initial` here: same
    selector, later in the file, so `initial` would win and blank the token
    inside every themed card.
  - the --theme-* typography knobs are left undeclared on purpose, so a nested
    theme that omits them inherits the ambient typography; one that wants its
    own simply sets them.
*/
:where([data-boxel-theme-scope]) {
  --boxel-switch-thumb: initial;
  --boxel-switch-thumb-icon: initial;
  --boxel-button-default-border: initial;
  --boxel-button-default-active-background: initial;
  --boxel-button-default-active-foreground: initial;
  --boxel-button-default-active-border: initial;
  --boxel-button-primary-active-background: initial;
  --boxel-button-secondary-background: initial;
  --boxel-button-secondary-foreground: initial;
  --boxel-button-secondary-border: initial;
  --boxel-button-secondary-active-border: initial;
  --boxel-button-link-primary-foreground: initial;
  --boxel-button-destructive-active-background: initial;
  --boxel-button-disabled-opacity: initial;
  --boxel-button-disabled-background: initial;
  --boxel-button-disabled-border: initial;
  --boxel-button-disabled-foreground: initial;
}

/* ── Dark mode ──────────────────────────────────────────────────────────────
   Opt-in and explicit: add class `dark` or `data-theme="dark"` to <html>, or to
   any subtree you want themed dark. Force light back on inside a dark subtree
   with `data-theme="light"` (see the light block above).

   OS-driven dark ('system' preference) has no token set of its own: consumers
   (e.g. the host theme service) resolve `prefers-color-scheme` to a concrete
   `data-theme="light"|"dark"` so these two blocks stay the single source of
   truth in both directions. */
.dark,
[data-theme='dark'] {
  --boxel-color-scheme: dark;

  --background: var(--boxel-700);
  --foreground: var(--boxel-light);
  --card: var(--boxel-650);
  --card-foreground: var(--boxel-light);
  --popover: #4f4b57;
  --popover-foreground: var(--boxel-light);
  --primary: var(--boxel-highlight);
  --primary-foreground: var(--boxel-dark);
  --secondary: #46434e;
  --secondary-foreground: var(--boxel-light);
  --muted: #34313c;
  --muted-foreground: #b6b6be;
  --accent: #797788;
  --accent-foreground: var(--boxel-light);
  --destructive: var(--boxel-destructive);
  --destructive-foreground: var(--boxel-light-100);
  --canvas: #1e1b26;
  --inset: #302d3b;
  --field: var(--boxel-700);
  --hover: var(--boxel-light-10);
  --stripe: var(--boxel-600);
  --selected: color-mix(in oklch, var(--primary) 15%, var(--card));
  --tooltip: var(--boxel-dark-80);
  --tooltip-foreground: var(--boxel-light);
  --subtle-foreground: #8a8895;
  --border: var(--boxel-550);
  --border-strong: #6e6c78;
  --input: var(--boxel-550);
  --ring: var(--boxel-highlight);
  --overlay: var(--boxel-dark-80);
  --primary-ink: color-mix(in oklch, var(--primary) 60%, var(--foreground));
  --secondary-ink: color-mix(in oklch, var(--secondary) 60%, var(--foreground));
  --accent-ink: color-mix(in oklch, var(--accent) 60%, var(--foreground));
  /* destructive, success, info and attention mix in more --foreground to read
     on the dark surfaces */
  --destructive-ink: color-mix(
    in oklch,
    var(--destructive) 30%,
    var(--foreground)
  );
  --success-ink: color-mix(in oklch, var(--success) 40%, var(--foreground));
  --warning-ink: color-mix(in oklch, var(--warning) 60%, var(--foreground));
  --info-ink: color-mix(in oklch, var(--info) 40%, var(--foreground));
  --attention-ink: color-mix(in oklch, var(--attention) 40%, var(--foreground));
  --sidebar: #555366;
  --sidebar-foreground: var(--boxel-light);
  --sidebar-primary: var(--boxel-highlight);
  --sidebar-primary-foreground: var(--boxel-dark);
  --sidebar-accent: #797788;
  --sidebar-accent-foreground: var(--boxel-light);
  --sidebar-border: var(--boxel-550);
  --sidebar-ring: var(--boxel-highlight);
  --boxel-switch-thumb: var(--boxel-light);
  --boxel-switch-thumb-icon: var(--background);
  --boxel-button-default-border: var(--border);
  --boxel-button-default-active-background: var(--background);
  --boxel-button-default-active-foreground: var(--foreground);
  --boxel-button-default-active-border: var(--foreground);
  --boxel-button-primary-active-background: var(--boxel-highlight-hover);
  --boxel-button-secondary-background: transparent;
  --boxel-button-secondary-foreground: var(--foreground);
  --boxel-button-secondary-border: var(--border);
  --boxel-button-secondary-active-border: var(--foreground);
  --boxel-button-destructive-active-background: var(--boxel-dark-red);
  --boxel-button-disabled-opacity: 1;
  --boxel-button-disabled-background: #444051;
  --boxel-button-disabled-foreground: #817c93;
  --boxel-button-disabled-border: 1px solid#444051;
}

/* Scheme islands inside a themed card: a `.dark` / `[data-theme]` stamped
   below the card's scope element matches the light or dark block again and
   brings the chrome knobs back with it, so a button inside the island would
   hover to Boxel's colors while the rest of the card hovers to the theme's.
   Repeat the boundary reset there. Two attribute selectors outrank the
   single-selector scheme blocks, and this comes after both of them. The
   theme's own palette reaches the island via theme-scoped-css.ts. */
[data-boxel-theme-scope] :is(.dark, [data-theme]) {
  --boxel-switch-thumb: initial;
  --boxel-switch-thumb-icon: initial;
  --boxel-button-default-border: initial;
  --boxel-button-default-active-background: initial;
  --boxel-button-default-active-foreground: initial;
  --boxel-button-default-active-border: initial;
  --boxel-button-primary-active-background: initial;
  --boxel-button-secondary-background: initial;
  --boxel-button-secondary-foreground: initial;
  --boxel-button-secondary-border: initial;
  --boxel-button-secondary-active-border: initial;
  --boxel-button-link-primary-foreground: initial;
  --boxel-button-destructive-active-background: initial;
  --boxel-button-disabled-opacity: initial;
  --boxel-button-disabled-background: initial;
  --boxel-button-disabled-border: initial;
  --boxel-button-disabled-foreground: initial;
}

/* Dark defaults at themed-card boundaries. The light block re-declares the
   whole contract on `:where([data-boxel-theme-scope])`, so without this a
   themed card in a dark subtree would reset every token its theme omits to the
   light default. Keyed off the inherited scheme signal, the same way a card's
   own `.dark` variables are applied (see theme-scoped-css.ts), so it follows
   the nearest light/dark switch rather than any `[data-theme]` ancestor.
   `:where()` keeps it at zero specificity so the card's scoped stylesheet
   still wins. Declares the dark block's contract tokens, minus
   --boxel-color-scheme (which has to keep inheriting) and minus the
   --boxel-switch/button chrome knobs, which the boundary reset above
   sets to `initial` so themed cards derive them from their own tokens in both
   schemes — a test enforces both. */
@container style(--boxel-color-scheme: dark) {
  :where([data-boxel-theme-scope]) {
    --background: var(--boxel-700);
    --foreground: var(--boxel-light);
    --card: var(--boxel-650);
    --card-foreground: var(--boxel-light);
    --popover: #4f4b57;
    --popover-foreground: var(--boxel-light);
    --primary: var(--boxel-highlight);
    --primary-foreground: var(--boxel-dark);
    --secondary: #46434e;
    --secondary-foreground: var(--boxel-light);
    --muted: #34313c;
    --muted-foreground: #b6b6be;
    --accent: #797788;
    --accent-foreground: var(--boxel-light);
    --destructive: var(--boxel-destructive);
    --destructive-foreground: var(--boxel-light-100);
    --canvas: #1e1b26;
    --inset: #302d3b;
    --field: var(--boxel-700);
    --hover: var(--boxel-light-10);
    --stripe: var(--boxel-600);
    --selected: color-mix(in oklch, var(--primary) 15%, var(--card));
    --tooltip: var(--boxel-dark-80);
    --tooltip-foreground: var(--boxel-light);
    --subtle-foreground: #8a8895;
    --border: var(--boxel-550);
    --border-strong: #6e6c78;
    --input: var(--boxel-550);
    --ring: var(--boxel-highlight);
    --overlay: var(--boxel-dark-80);
    --primary-ink: color-mix(in oklch, var(--primary) 60%, var(--foreground));
    --secondary-ink: color-mix(
      in oklch,
      var(--secondary) 60%,
      var(--foreground)
    );
    --accent-ink: color-mix(in oklch, var(--accent) 60%, var(--foreground));
    --destructive-ink: color-mix(
      in oklch,
      var(--destructive) 30%,
      var(--foreground)
    );
    --success-ink: color-mix(in oklch, var(--success) 40%, var(--foreground));
    --warning-ink: color-mix(in oklch, var(--warning) 60%, var(--foreground));
    --info-ink: color-mix(in oklch, var(--info) 40%, var(--foreground));
    --attention-ink: color-mix(
      in oklch,
      var(--attention) 40%,
      var(--foreground)
    );
    --sidebar: #555366;
    --sidebar-foreground: var(--boxel-light);
    --sidebar-primary: var(--boxel-highlight);
    --sidebar-primary-foreground: var(--boxel-dark);
    --sidebar-accent: #797788;
    --sidebar-accent-foreground: var(--boxel-light);
    --sidebar-border: var(--boxel-550);
    --sidebar-ring: var(--boxel-highlight);
  }
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.47"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

  .social-preview-container[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    padding: var(--boxel-sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-2xl);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAgMAAABFxqmRAAAACVBMVEU5OTksZFUdmXisJCSwAAAAKElEQVR4AWMYiWAUjIJRwLgEuzgbLvEV2MWZcKhnCEBij4JRMApGAQCuDwL0gjsq5AAAAABJRU5ErkJggg==');
    background-position: left top;
    background-repeat: repeat;
    background-size: 22.5px;
    color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-lg);
    border: var(--boxel-border);
    box-shadow: var(--boxel-box-shadow);
  }

  .preview-header[data-scopedcss-e0a52c248c-e2c647c836] {
    padding: var(--boxel-sp-lg);
    border-bottom: 2px solid var(--boxel-200);
    background: var(--boxel-light);
    border-radius: var(--boxel-border-radius);
    box-shadow: var(--boxel-box-shadow);
  }

  .preview-title[data-scopedcss-e0a52c248c-e2c647c836] {
    font: 700 var(--boxel-font-lg);
    margin: 0 0 var(--boxel-sp-xxs);
    color: var(--boxel-dark);
  }

  .preview-subtitle[data-scopedcss-e0a52c248c-e2c647c836] {
    font: 400 var(--boxel-font-sm);
    color: var(--boxel-500);
    margin: 0;
  }

  .head-warning[data-scopedcss-e0a52c248c-e2c647c836] {
    display: flex;
    gap: var(--boxel-sp-sm);
    padding: var(--boxel-sp-sm) var(--boxel-sp-lg);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--boxel-border-radius);
    color: #664d03;
    font: 400 var(--boxel-font-sm);
    line-height: 1.5;
  }

  .head-warning-icon[data-scopedcss-e0a52c248c-e2c647c836] {
    flex-shrink: 0;
    font-size: 1.2em;
  }

  .platform-section[data-scopedcss-e0a52c248c-e2c647c836],
  .meta-section[data-scopedcss-e0a52c248c-e2c647c836] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
  }

  .section-title[data-scopedcss-e0a52c248c-e2c647c836] {
    font: 700 var(--boxel-font-sm);
    margin: 0;
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    background: var(--boxel-200);
    color: var(--boxel-dark);
    border-radius: var(--boxel-border-radius);
    border: 1px solid var(--boxel-200);
  }

  .google-preview[data-scopedcss-e0a52c248c-e2c647c836] {
    background: var(--boxel-light);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--boxel-sp-lg);
    box-shadow: 0 2px 8px rgba(0 0 0 / 0.08);
  }

  .google-result[data-scopedcss-e0a52c248c-e2c647c836] {
    max-width: 600px;
  }

  .google-url-row[data-scopedcss-e0a52c248c-e2c647c836] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    margin-bottom: var(--boxel-sp-3xs);
  }

  .google-favicon[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: #f1f3f4;
    font: 700 var(--boxel-font-xs);
    color: #5f6368;
  }

  .google-favicon img[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .google-url-info[data-scopedcss-e0a52c248c-e2c647c836] {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .google-site-name[data-scopedcss-e0a52c248c-e2c647c836] {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #202124;
    line-height: 1.3;
  }

  .google-breadcrumb[data-scopedcss-e0a52c248c-e2c647c836] {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #4d5156;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .google-title[data-scopedcss-e0a52c248c-e2c647c836] {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #1a0dab;
    line-height: 1.3;
    margin: 0 0 var(--boxel-sp-4xs);
  }

  .google-description[data-scopedcss-e0a52c248c-e2c647c836] {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #4d5156;
    line-height: 1.58;
    margin: 0;
  }

  .facebook-preview[data-scopedcss-e0a52c248c-e2c647c836] {
    background: transparent;
  }

  .facebook-card[data-scopedcss-e0a52c248c-e2c647c836] {
    background: var(--boxel-light);
    border-radius: 12px;
    overflow: hidden;
    max-width: 550px;
    box-shadow: var(--boxel-box-shadow);
  }

  .facebook-image[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    background: #e4e6eb;
    overflow: hidden;
  }

  .facebook-image img[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .facebook-content[data-scopedcss-e0a52c248c-e2c647c836] {
    padding: 12px 14px;
    background: #f0f2f5;
    border-top: 1px solid #dddfe2;
  }

  .facebook-domain[data-scopedcss-e0a52c248c-e2c647c836] {
    font-size: 12px;
    color: #65676b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }

  .facebook-title[data-scopedcss-e0a52c248c-e2c647c836] {
    font-size: 16px;
    font-weight: 600;
    color: #1c1e21;
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .facebook-description[data-scopedcss-e0a52c248c-e2c647c836] {
    font-size: 14px;
    color: #606770;
    line-height: 1.35;
  }

  .twitter-preview[data-scopedcss-e0a52c248c-e2c647c836] {
    background: transparent;
  }

  .twitter-card[data-scopedcss-e0a52c248c-e2c647c836] {
    background: var(--boxel-700);
    border: 1px solid var(--boxel-600);
    border-radius: 16px;
    overflow: hidden;
    max-width: 550px;
    box-shadow: var(--boxel-deep-box-shadow);
  }

  .twitter-image[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    background: #2f3336;
    overflow: hidden;
  }

  .twitter-image img[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .twitter-content[data-scopedcss-e0a52c248c-e2c647c836] {
    padding: 12px;
  }

  .twitter-title[data-scopedcss-e0a52c248c-e2c647c836] {
    font-size: 15px;
    font-weight: 400;
    color: var(--boxel-light);
    line-height: 1.3;
    margin-bottom: 2px;
  }

  .twitter-description[data-scopedcss-e0a52c248c-e2c647c836] {
    font-size: 15px;
    color: #71767b;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .twitter-domain[data-scopedcss-e0a52c248c-e2c647c836] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: #71767b;
  }

  .link-icon[data-scopedcss-e0a52c248c-e2c647c836] {
    width: 16px;
    height: 16px;
    color: #71767b;
  }

  .meta-code[data-scopedcss-e0a52c248c-e2c647c836] {
    background: var(--boxel-light);
    border: var(--boxel-border);
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp-md);
    overflow-x: auto;
    box-shadow: var(--boxel-box-shadow);
  }

  .meta-code pre[data-scopedcss-e0a52c248c-e2c647c836] {
    margin: 0;
    font-family: var(
      --boxel-monospace-font-family,
      'IBM Plex Mono',
      monospace
    );
    font-size: var(--boxel-font-xs);
    line-height: 1.6;
    color: var(--boxel-dark);
    white-space: pre-wrap;
  }

  @media (max-width: 640px) {
    .social-preview-container[data-scopedcss-e0a52c248c-e2c647c836] {
      padding: var(--boxel-sp-lg);
      gap: var(--boxel-sp-xl);
    }

    .preview-title[data-scopedcss-e0a52c248c-e2c647c836] {
      font-size: var(--boxel-font-md);
    }

    .google-title[data-scopedcss-e0a52c248c-e2c647c836] {
      font-size: 18px;
    }
  }

  .search-result-error[data-scopedcss-1788d4ca2a-7bb15ac080] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs);
    height: 100%;
    color: var(--boxel-error-300);
    overflow: hidden;
  }
  .icon[data-scopedcss-1788d4ca2a-7bb15ac080] {
    flex-shrink: 0;
    width: var(--boxel-icon-sm);
    height: var(--boxel-icon-sm);
  }
  .content[data-scopedcss-1788d4ca2a-7bb15ac080] {
    min-width: 0;
  }
  .title[data-scopedcss-1788d4ca2a-7bb15ac080] {
    font: 600 var(--boxel-font-sm);
    line-height: 1.2;
  }
  .name[data-scopedcss-1788d4ca2a-7bb15ac080] {
    font: 500 var(--boxel-font-xs);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message[data-scopedcss-1788d4ca2a-7bb15ac080] {
    font: var(--boxel-font-xs);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.ember-animated-hidden {
  visibility: hidden !important;
}

.ember-animated-none {
  display: none !important;
}

.ember-animated-top-collapse {
  margin-top: 0 !important;
}

.animated-container {
  position: relative;
}

.animated-container:before,
.animated-container:after {
  content: " ";
  display: table;
}

.animated-orphans {
  position: relative;
}

  .signed-capture-link-error[data-scopedcss-bc863c6b2e-700bc8d83b] {
    color: var(--destructive-ink);
    font-size: var(--boxel-font-size-sm);
  }

  @layer PretComponent {
    .pretui-diffstat[data-scopedcss-3b2b353918-8e86ed4263] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-3xs);
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-2xs);
      font-variant-numeric: tabular-nums;
    }
    .pretui-diffstat-n[data-op='add'][data-scopedcss-3b2b353918-8e86ed4263] {
      color: var(--success-ink);
    }
    .pretui-diffstat-n[data-op='del'][data-scopedcss-3b2b353918-8e86ed4263] {
      color: var(--destructive-ink);
    }
    .pretui-diffstat-bar[data-scopedcss-3b2b353918-8e86ed4263] {
      display: inline-flex;
      gap: 1px;
    }
    .pretui-diffstat-block[data-scopedcss-3b2b353918-8e86ed4263] {
      width: 0.4375rem;
      height: 0.4375rem;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--border-strong);
    }
    .pretui-diffstat-block[data-op='add'][data-scopedcss-3b2b353918-8e86ed4263] {
      background-color: var(--success);
    }
    .pretui-diffstat-block[data-op='del'][data-scopedcss-3b2b353918-8e86ed4263] {
      background-color: var(--destructive);
    }
  }

  @layer PretComponent {
    .pretui-tipwrap[data-scopedcss-3cc99c48ab-c137dd6928] {
      position: relative;
      display: inline-flex;
    }
    .pretui-tip-key[data-scopedcss-3cc99c48ab-c137dd6928] {
      display: none;
    }
    .pretui-tooltip[data-scopedcss-3cc99c48ab-c137dd6928] {
      /* the space between trigger and bubble, which the bridge spans */
      --_tip-gap: 0.375rem;
      position: absolute;
      /* kit stacking scale (pretui-css.gts): a tooltip describes whatever
         is under the pointer, which may be an item inside a dropdown or a
         popover, so it is the highest non-modal tier. */
      z-index: var(--pretui-z-tooltip, 80);
      background-color: var(--tooltip);
      color: var(--tooltip-foreground);
      font-size: var(--boxel-font-size-xs);
      font-weight: 500;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-sm);
      box-shadow: var(--shadow-lg);
      white-space: nowrap;
      width: max-content;
      opacity: 0;
      /* `visibility`, not opacity alone: an opacity-0 bubble is still in
         the accessibility tree and still hit-testable. Hidden here means
         hidden to everyone — while a DIRECT aria-describedby reference
         still resolves its text, which is the whole point. */
      visibility: hidden;
      transition: opacity 120ms ease, visibility 0s linear 120ms;
    }
    .pretui-tooltip[data-open='true'][data-scopedcss-3cc99c48ab-c137dd6928] {
      opacity: 1;
      visibility: visible;
      transition: opacity 120ms ease, visibility 0s;
    }
    /* WCAG 1.4.13 "Hoverable": the pointer must be able to travel onto the
       bubble without it vanishing. The gap between trigger and bubble is
       bridged by a transparent extension of the bubble's own box. */
    .pretui-tooltip[data-scopedcss-3cc99c48ab-c137dd6928]::before {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--_tip-gap));
    }
    .pretui-tooltip[data-side='top'][data-scopedcss-3cc99c48ab-c137dd6928] {
      bottom: calc(100% + var(--_tip-gap));
      left: 50%;
      transform: translateX(-50%);
    }
    .pretui-tooltip[data-side='bottom'][data-scopedcss-3cc99c48ab-c137dd6928] {
      top: calc(100% + var(--_tip-gap));
      left: 50%;
      transform: translateX(-50%);
    }
    .pretui-tooltip[data-side='left'][data-scopedcss-3cc99c48ab-c137dd6928] {
      right: calc(100% + var(--_tip-gap));
      top: 50%;
      transform: translateY(-50%);
    }
    .pretui-tooltip[data-side='right'][data-scopedcss-3cc99c48ab-c137dd6928] {
      left: calc(100% + var(--_tip-gap));
      top: 50%;
      transform: translateY(-50%);
    }
  }

  /* above Button's layer, so these win by layer order, not file order */
  @layer PretComponent, PretComposite;
  @layer PretComposite {
    .pretui-iconbtn[data-scopedcss-bcde96c7a5-62b5cc3853] {
      padding: 0;
      width: var(--pretui-button-h, 2.24em);
    }
    /* square against Button's 24px minimum height at xs */
    .pretui-iconbtn[data-size='xs'][data-scopedcss-bcde96c7a5-62b5cc3853] {
      width: max(var(--pretui-button-h, 2.24em), 1.5rem);
    }
    /* block-level, so the glyph is not set on Button's label line and
       its baseline */
    .pretui-iconbtn-glyph[data-scopedcss-bcde96c7a5-62b5cc3853] {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* pressed is a tint one step stronger than the filled appearance's,
       so it reads on outlined, plain and filled alike; an accent fill has
       no stronger step and a link has no fill, so toggles use another
       appearance */
    .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-62b5cc3853]:not(
        [data-appearance='accent'],
        [data-appearance='link'],
        [data-pressed-tint='none']
      ) {
      --_iconbtn-pressed-base: var(--background);
      --pretui-btn-surface: color-mix(
        in oklch,
        var(--pretui-tone) 28%,
        var(--_iconbtn-pressed-base)
      );
      --pretui-btn-surface-hover: color-mix(
        in oklch,
        var(--pretui-btn-tint) 34%,
        var(--_iconbtn-pressed-base)
      );
    }
    /* over the outlined appearance's own base surface, when a theme sets
       one, so pressing changes the tint and not the base */
    .pretui-iconbtn[aria-pressed='true'][data-appearance='outlined'][data-scopedcss-bcde96c7a5-62b5cc3853] {
      --_iconbtn-pressed-base: var(
        --pretui-button-secondary-bg,
        var(--background)
      );
    }
    /* not when disabled, whose GrayText edge from Button is its only cue */
    @media (forced-colors: active) {
      .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-62b5cc3853]:not(
          :disabled,
          [aria-disabled='true']
        ) {
        border-color: Highlight;
      }
    }
  }

  @layer PretComponent {
    .pretui-visually-hidden[data-scopedcss-1129855c2f-6ec51e5ae3] {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .pretui-visually-hidden[data-focusable='true'][data-scopedcss-1129855c2f-6ec51e5ae3]:focus-within,
    .pretui-visually-hidden[data-focusable='true'][data-scopedcss-1129855c2f-6ec51e5ae3]:focus {
      position: static;
      inline-size: auto;
      block-size: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  @layer PretComponent {
    .pretui-copy-glyphs[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      position: relative;
      display: inline-flex;
    }
    .pretui-copy-glyph[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      scale: 0.25;
      opacity: 0;
      filter: blur(4px);
    }
    .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e],
    .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      position: absolute;
      inset: 0;
    }
    .pretui-copy-glyphs[data-glyph='copy'] .pretui-copy-idle[data-scopedcss-9e59ed1fa4-db98d6f70e],
    .pretui-copy-glyphs[data-glyph='check'] .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e],
    .pretui-copy-glyphs[data-glyph='cross'] .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      scale: 1;
      opacity: 1;
      filter: blur(0);
    }
    @media (prefers-reduced-motion: no-preference) {
      .pretui-copy-glyph[data-scopedcss-9e59ed1fa4-db98d6f70e] {
        transition-property: scale, opacity, filter;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }
    }
    .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      color: var(--success-ink);
    }
    .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      color: var(--destructive-ink);
    }
    /* an -ink tone loses contrast on a fill (the cross on a filled hover
       surface measures under 3:1), so there the glyph keeps the fill's
       own text color and its shape carries the result */
    [data-appearance='accent'] .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e],
    [data-appearance='accent'] .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e],
    [data-appearance='filled'] .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e],
    [data-appearance='filled'] .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e],
    [data-appearance='filled-outlined'] .pretui-copy-check[data-scopedcss-9e59ed1fa4-db98d6f70e],
    [data-appearance='filled-outlined'] .pretui-copy-failed[data-scopedcss-9e59ed1fa4-db98d6f70e] {
      color: inherit;
    }
  }

  @layer PretComponent {
    /* Law 1 — the surface's depth is one token, and nothing sets a border
       for separation. */
    .pretui-code[data-scopedcss-1e312418e2-2aacb55384] {
      margin: 0;
      display: grid;
      border-radius: var(--boxel-border-radius);
      background-color: var(--card);
      color: var(--card-foreground);
      box-shadow: var(--pretui-shadow-card, 0 0 0 1px var(--border));
      overflow: hidden;
      container-type: inline-size;
    }
    /* compact: code inside a row is a glance, not a read: small, short,
       and scrolled */
    .pretui-code[data-density='compact'][data-scopedcss-1e312418e2-2aacb55384] {
      --pretui-code-size: var(--boxel-font-size-2xs);
      --pretui-code-leading: 1.45;
    }
    .pretui-code[data-density='compact'] .pretui-code-head[data-scopedcss-1e312418e2-2aacb55384] {
      padding: var(--boxel-sp-6xs) var(--boxel-sp-2xs) var(--boxel-sp-6xs)
        var(--boxel-sp-xs);
    }
    .pretui-code[data-density='compact'] .pretui-code-body[data-scopedcss-1e312418e2-2aacb55384] {
      padding-block: var(--boxel-sp-4xs);
    }
    .pretui-code[data-density='compact']
      .pretui-code-body[data-clamped='true'][data-scopedcss-1e312418e2-2aacb55384] {
      max-height: calc(
        var(--pretui-code-max, 24) * var(--pretui-code-leading, 1.6) *
          var(--pretui-code-size, var(--boxel-font-size-xs)) +
          var(--boxel-sp-4xs) * 2
      );
    }
    .pretui-code-head[data-scopedcss-1e312418e2-2aacb55384] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
      background-color: color-mix(
        in oklch,
        var(--foreground) 4%,
        var(--card)
      );
      box-shadow: inset 0 -1px 0 var(--border);
    }
    .pretui-code-title[data-scopedcss-1e312418e2-2aacb55384] {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
    }
    .pretui-code-count[data-scopedcss-1e312418e2-2aacb55384] {
      flex: 0 0 auto;
      font-size: var(--boxel-font-size-2xs);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
    }
    .pretui-code-actions[data-scopedcss-1e312418e2-2aacb55384] {
      flex: 0 0 auto;
      display: flex;
    }
    .pretui-code-caption[data-scopedcss-1e312418e2-2aacb55384] {
      margin: 0;
      padding: var(--boxel-sp-2xs) var(--boxel-sp-xs) 0;
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
    }
    .pretui-code-binary[data-scopedcss-1e312418e2-2aacb55384] {
      margin: 0;
      padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
    }
    .pretui-code-body[data-scopedcss-1e312418e2-2aacb55384] {
      margin: 0;
      padding: var(--boxel-sp-xs) 0;
      overflow: auto;
      font-family: var(--font-mono);
      font-size: var(--pretui-code-size, var(--boxel-font-size-xs));
      line-height: var(--pretui-code-leading, 1.6);
      /* Law 8 — code is numerals as often as it is words. */
      font-variant-numeric: tabular-nums;
      tab-size: var(--pretui-code-tab, 2);
    }
    /* The scroll ceiling. `--pretui-code-max` is a line COUNT set from the
       component; the line height and font size are already tokens, so the
       arithmetic stays in CSS and no length is ever interpolated. */
    .pretui-code-body[data-clamped='true'][data-scopedcss-1e312418e2-2aacb55384] {
      max-height: calc(
        var(--pretui-code-max, 24) * var(--pretui-code-leading, 1.6) *
          var(--pretui-code-size, var(--boxel-font-size-xs)) +
          var(--boxel-sp-xs) * 2
      );
    }
    .pretui-code-body[data-scopedcss-1e312418e2-2aacb55384]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-code-code[data-scopedcss-1e312418e2-2aacb55384] {
      display: block;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      min-width: max-content;
    }
    .pretui-code-line[data-scopedcss-1e312418e2-2aacb55384] {
      display: block;
      padding-inline: var(--boxel-sp-xs);
      /* A blank line is still a line. Without this an empty block collapses
         to nothing and the code silently loses its paragraphing. */
      min-height: calc(var(--pretui-code-leading, 1.6) * 1em);
    }
    /* The mark carries a SHAPE as well as a tint, so it
       survives greyscale and a colour-blind reader. */
    .pretui-code-line[data-marked='true'][data-scopedcss-1e312418e2-2aacb55384] {
      background-color: color-mix(
        in oklch,
        var(--primary) 10%,
        transparent
      );
      box-shadow: inset 2px 0 0 var(--primary);
    }
    /* The gutter is as wide as the widest number it will hold. A fixed
       width overflows into the code the moment @startLine pushes the count
       to four digits, which is exactly what @startLine exists to allow. */
    .pretui-code-ln[data-scopedcss-1e312418e2-2aacb55384] {
      display: inline-block;
      width: var(
        --pretui-code-gutter,
        calc(var(--pretui-code-digits, 2) * 1ch + 0.5ch)
      );
      margin-inline-end: var(--boxel-sp-xs);
      text-align: end;
      /* Not selectable, so dragging across the code does not drag the
         numbers into the clipboard with it. The prefix is not optional:
         without it iOS Safari selects them anyway, which is the platform
         where a drag-select is most likely. */
      -webkit-user-select: none;
      user-select: none;
      color: color-mix(in oklch, var(--muted-foreground) 65%, transparent);
    }
    .pretui-code-text[data-scopedcss-1e312418e2-2aacb55384] {
      white-space: pre;
    }
    .pretui-code[data-wrap='true'] .pretui-code-body[data-scopedcss-1e312418e2-2aacb55384] {
      overflow-x: hidden;
    }
    .pretui-code[data-wrap='true'] .pretui-code-code[data-scopedcss-1e312418e2-2aacb55384] {
      min-width: 0;
    }
    .pretui-code[data-wrap='true'] .pretui-code-text[data-scopedcss-1e312418e2-2aacb55384] {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    /* Law 2 applied to syntax: one hue in, ink derived from it, so contrast
       holds in light and dark with zero dark branches and a theme this
       component has never seen re-tints the code with everything else. */
    .pretui-code-t[data-scopedcss-1e312418e2-2aacb55384] {
      color: inherit;
    }
    .pretui-code-comment[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--foreground) 8%,
        var(--pretui-code-comment, var(--muted-foreground))
      );
      font-style: italic;
    }
    .pretui-code-string[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-string, var(--chart-1))
      );
    }
    .pretui-code-number[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-number, var(--chart-3))
      );
    }
    .pretui-code-keyword[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-keyword, var(--chart-4))
      );
      font-weight: 500;
    }
    .pretui-code-name[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-name, var(--chart-2))
      );
    }
    .pretui-code-punct[data-scopedcss-1e312418e2-2aacb55384] {
      color: color-mix(
        in oklch,
        var(--muted-foreground) 70%,
        var(--foreground)
      );
    }
    .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384] {
      appearance: none;
      border: 0;
      width: 100%;
      padding: var(--boxel-sp-2xs);
      background-color: color-mix(
        in oklch,
        var(--foreground) 4%,
        var(--card)
      );
      box-shadow: inset 0 1px 0 var(--border);
      font-family: inherit;
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
      cursor: pointer;
      transition: background-color 160ms
        var(--pretui-ease-snap, cubic-bezier(0.23, 1, 0.32, 1));
    }
    .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384]:hover {
      background-color: var(--hover);
      color: var(--foreground);
    }
    .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384]:active {
      transform: scale(0.99);
    }
    .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    @media (pointer: coarse) {
      .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384] {
        min-height: 2.75rem;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384] {
        transition: none;
      }
      .pretui-code-more[data-scopedcss-1e312418e2-2aacb55384]:active {
        transform: none;
      }
    }
  }

  @layer PretComponent {
    /* a diff is pasteable: mono at the data size, on the inset well */
    .pretui-diff[data-scopedcss-c294f646f1-c8aed31152] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
      background-color: var(--inset);
      color: var(--foreground);
      border-radius: var(--boxel-border-radius-sm);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      overflow: hidden;
    }
    .pretui-diff[data-wrap] .pretui-diff-line[data-scopedcss-c294f646f1-c8aed31152] {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .pretui-diff[data-view='split'] .pretui-diff-row[data-scopedcss-c294f646f1-c8aed31152] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .pretui-diff-cell[data-scopedcss-c294f646f1-c8aed31152] {
      min-width: 0;
    }
    .pretui-diff[data-view='split'] .pretui-diff-cell[data-scopedcss-c294f646f1-c8aed31152]:first-child {
      box-shadow: inset -1px 0 0 var(--border);
    }
    .pretui-diff-hunk[data-scopedcss-c294f646f1-c8aed31152] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.625rem;
      padding: 0 var(--boxel-sp-sm);
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
      box-shadow: inset 0 1px 0 var(--border);
    }
    /* "Change 1 of 3 · +2 −1" is a count, not a string to paste: sans */
    .pretui-diff-hunk-label[data-scopedcss-c294f646f1-c8aed31152] {
      margin-inline-end: auto;
      font-variant-numeric: tabular-nums;
    }
    .pretui-diff-hunk-state[data-scopedcss-c294f646f1-c8aed31152] {
      font-weight: 600;
    }
    .pretui-diff-hunk-state[data-scopedcss-c294f646f1-c8aed31152]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    /* kept is done: ink with a check, not green */
    .pretui-diff-hunk[data-state='kept'] .pretui-diff-hunk-state[data-scopedcss-c294f646f1-c8aed31152] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      color: var(--foreground);
    }
    .pretui-diff-line[data-state='reverted'][data-scopedcss-c294f646f1-c8aed31152] {
      text-decoration: line-through;
      opacity: 0.55;
    }
    .pretui-diff-action[data-scopedcss-c294f646f1-c8aed31152] {
      height: 1.375rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border-strong);
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--foreground);
      cursor: pointer;
    }
    .pretui-diff-action[data-kind='quiet'][data-scopedcss-c294f646f1-c8aed31152] {
      box-shadow: none;
      color: var(--muted-foreground);
    }
    .pretui-diff-action[data-scopedcss-c294f646f1-c8aed31152]:hover {
      color: var(--primary-ink);
    }
    .pretui-diff-action[data-scopedcss-c294f646f1-c8aed31152]:focus-visible,
    button.pretui-diff-n[data-scopedcss-c294f646f1-c8aed31152]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    button.pretui-diff-n[data-scopedcss-c294f646f1-c8aed31152] {
      padding: 0;
      border: 0;
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      cursor: pointer;
    }
    button.pretui-diff-n[data-scopedcss-c294f646f1-c8aed31152]:hover {
      color: var(--primary-ink);
    }
    .pretui-diff-comment[data-scopedcss-c294f646f1-c8aed31152] {
      display: grid;
      gap: var(--boxel-sp-6xs);
      margin: var(--boxel-sp-6xs) var(--boxel-sp-xs) var(--boxel-sp-4xs)
        2.5rem;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--card);
      box-shadow: 0 0 0 1px var(--border);
      font-family: var(--font-sans);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--card-foreground);
      white-space: normal;
    }
    .pretui-diff-comment-author[data-scopedcss-c294f646f1-c8aed31152] {
      font-weight: 600;
    }
    .pretui-diff-comment-field[data-scopedcss-c294f646f1-c8aed31152] {
      width: 100%;
      box-sizing: border-box;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: var(--field);
      box-shadow: inset 0 0 0 1px var(--input);
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      color: var(--foreground);
      resize: vertical;
    }
    .pretui-diff-comment-actions[data-scopedcss-c294f646f1-c8aed31152] {
      display: flex;
      justify-content: flex-end;
      gap: var(--boxel-sp-4xs);
    }
    .pretui-diff-large[data-scopedcss-c294f646f1-c8aed31152] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--boxel-sp-xs);
      padding: var(--boxel-sp-sm);
      font-family: var(--font-sans);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
    }
    .pretui-diff-head[data-scopedcss-c294f646f1-c8aed31152] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      padding: var(--boxel-sp-4xs) var(--boxel-sp-sm);
      font-family: var(--font-sans);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      box-shadow: 0 1px 0 var(--border);
    }
    /* the file is a path, a pasteable string: mono at the data size */
    .pretui-diff-file[data-scopedcss-c294f646f1-c8aed31152] {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    /* the counts are figures: sans, tabular */
    .pretui-diff-counts[data-scopedcss-c294f646f1-c8aed31152] {
      display: flex;
      gap: var(--boxel-sp-4xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
    }
    .pretui-diff-line[data-scopedcss-c294f646f1-c8aed31152] {
      padding: 0 var(--boxel-sp-sm);
      white-space: pre;
    }
    /* the tint is the fill, the line's text is the hue's ink */
    .pretui-diff-line[data-op='add'][data-scopedcss-c294f646f1-c8aed31152] {
      background-color: color-mix(
        in oklch,
        var(--success) 12%,
        transparent
      );
      color: var(--success-ink);
    }
    .pretui-diff-line[data-op='del'][data-scopedcss-c294f646f1-c8aed31152] {
      background-color: color-mix(
        in oklch,
        var(--destructive) 10%,
        transparent
      );
      color: var(--destructive-ink);
    }
    .pretui-diff-sign[data-scopedcss-c294f646f1-c8aed31152] {
      user-select: none;
    }
    /* the number gutter: the line's place in the file, out of the way */
    .pretui-diff-n[data-scopedcss-c294f646f1-c8aed31152] {
      display: inline-block;
      width: 3ch;
      margin-inline-end: 1ch;
      text-align: end;
      /* muted, not subtle: the number sits on the add and remove tints,
         where the subtle ink falls under 4.5:1 */
      color: var(--muted-foreground);
      user-select: none;
    }
    /* With a language, the tint says added or removed and the tokens
       keep their own colours, as in CodeBlock; the sign keeps the op's
       colour so the change still reads in greyscale. */
    .pretui-diff[data-language] .pretui-diff-line[data-op][data-scopedcss-c294f646f1-c8aed31152] {
      color: var(--foreground);
    }
    .pretui-diff[data-language]
      .pretui-diff-line[data-op='add']
      .pretui-diff-sign[data-scopedcss-c294f646f1-c8aed31152] {
      color: var(--success-ink);
    }
    .pretui-diff[data-language]
      .pretui-diff-line[data-op='del']
      .pretui-diff-sign[data-scopedcss-c294f646f1-c8aed31152] {
      color: var(--destructive-ink);
    }
    .pretui-code-t[data-scopedcss-c294f646f1-c8aed31152] {
      color: inherit;
    }
    .pretui-code-comment[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--foreground) 8%,
        var(--pretui-code-comment, var(--muted-foreground))
      );
      font-style: italic;
    }
    .pretui-code-string[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-string, var(--chart-1))
      );
    }
    .pretui-code-number[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-number, var(--chart-3))
      );
    }
    .pretui-code-keyword[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-keyword, var(--chart-4))
      );
      font-weight: 400;
    }
    .pretui-code-name[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--foreground) 18%,
        var(--pretui-code-name, var(--chart-2))
      );
    }
    .pretui-code-punct[data-scopedcss-c294f646f1-c8aed31152] {
      color: color-mix(
        in oklch,
        var(--muted-foreground) 70%,
        var(--foreground)
      );
    }
    .pretui-diff-toggle[data-scopedcss-c294f646f1-c8aed31152] {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      background-color: transparent;
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--primary-ink);
      cursor: pointer;
    }
    /* the unchanged run between two hunks: a quiet gap, never a line
       of the file */
    .pretui-diff-skip[data-scopedcss-c294f646f1-c8aed31152] {
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
      background-color: color-mix(in oklch, var(--border) 35%, transparent);
      user-select: none;
    }
    .pretui-diff-receipt[data-scopedcss-c294f646f1-c8aed31152] {
      padding: var(--boxel-sp-4xs) var(--boxel-sp-sm);
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
      box-shadow: 0 -1px 0 var(--border);
    }
  }

  .apply-button[data-scopedcss-f8b092568e-86788c10ee] {
    --boxel-button-font: 600 var(--boxel-font-xs);
    padding: 3px 10px;
    min-width: inherit;
    min-height: inherit;
    height: 1.5rem;
    border-radius: inherit;
  }
  .apply-button[data-scopedcss-f8b092568e-86788c10ee]:hover:not(:disabled),
  .apply-button[data-scopedcss-f8b092568e-86788c10ee]:focus:not(:disabled) {
    --boxel-button-color: var(--boxel-highlight);
    filter: brightness(1.1);
  }
  .state-indicator[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-color: var(--boxel-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    background-color: var(--boxel-highlight);
    transition:
      width var(--boxel-transition),
      border-radius var(--boxel-transition);
  }
  .state-indicator.compact[data-scopedcss-f8b092568e-86788c10ee] {
    flex-shrink: 0;
    order: 1;
  }
  .state-indicator.ready[data-scopedcss-f8b092568e-86788c10ee] {
    border-radius: 100px;
    width: fit-content;
  }
  .state-indicator.applying[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-stroke-width: 5;
    width: 58px;
    border-radius: 100px;
  }
  .state-indicator.compact.applying[data-scopedcss-f8b092568e-86788c10ee],
  .state-indicator.compact.preparing[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-stroke-width: 5;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
  }

  /* The "Working…" pill with its animated gradient border only fits the
    full-size layout; compact mode renders a spinner instead, so keep all
    pill styling scoped to non-compact. */
  .state-indicator.preparing[data-scopedcss-f8b092568e-86788c10ee]:not(.compact) {
    width: 78px;
    padding: 1px;
    border-radius: 100px;
  }
  .state-indicator.preparing .apply-button[data-scopedcss-f8b092568e-86788c10ee] {
    --boxel-button-font: 600 0.625rem / calc(15 / 11) var(--boxel-font-family);
    --boxel-button-color: transparent;
    --boxel-button-text-color: var(--boxel-200);
    /* The theme's disabled-button tokens are light-theme values; on this
      always-dark pill they would paint an opaque light-gray capsule over
      the dark background and its gradient ring, so pin the disabled look
      to the pill's own transparent/dark styling. */
    --boxel-button-disabled-background: transparent;
    --boxel-button-disabled-foreground: var(--boxel-200);
    --boxel-button-disabled-border: 0;
    border: 0;
    min-width: 74px;
  }
  .state-indicator.preparing .apply-button[data-scopedcss-f8b092568e-86788c10ee]:disabled {
    opacity: 1;
  }
  .state-indicator.preparing .apply-button[data-scopedcss-f8b092568e-86788c10ee]:focus {
    filter: none;
    cursor: not-allowed;
  }
  .state-indicator.preparing[data-scopedcss-f8b092568e-86788c10ee]:not(.compact)::before {
    content: '';
    position: absolute;
    top: -105px;
    left: -55px;
    width: 250px;
    height: 250px;
    background: conic-gradient(
      #ffcc8f 0deg,
      #ff3966 45deg,
      #ff309e 90deg,
      #aa1dc9 135deg,
      #d7fad6 180deg,
      #5fdfea 225deg,
      #3d83f2 270deg,
      #5145e8 315deg,
      #ffcc8f 360deg
    );
    z-index: -1;
    animation: spin-data-scopedcss-f8b092568e-86788c10ee 4s infinite linear;
  }

  .state-indicator.preparing[data-scopedcss-f8b092568e-86788c10ee]:not(.compact)::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: var(--ai-bot-message-background-color);
    border-radius: inherit;
    z-index: -1;
  }

  .state-indicator.preparing[data-scopedcss-f8b092568e-86788c10ee]:not(.compact) {
    position: relative;
    display: inline-block;
    border-radius: 3rem;
    color: white;
    background: var(--boxel-700);
    border: none;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
  }

  .state-indicator[data-scopedcss-f8b092568e-86788c10ee]:not(.applying):not(.preparing):not(.ready):not(.compact) {
    width: 1.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  .state-indicator.compact[data-scopedcss-f8b092568e-86788c10ee] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  .state-indicator.compact.ready[data-scopedcss-f8b092568e-86788c10ee] {
    visibility: hidden;
    pointer-events: none;
  }
  .state-indicator.compact svg[data-scopedcss-f8b092568e-86788c10ee] {
    width: 10px;
    height: 10px;
  }
  .state-indicator.compact.applied-with-error svg[data-scopedcss-f8b092568e-86788c10ee] {
    margin-top: -1px;
  }
  .state-indicator.failed[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-color: var(--boxel-light);
    background-color: var(--boxel-error-400);
    border-color: var(--boxel-error-400);
  }
  .state-indicator.canceled[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-color: var(--boxel-light);
    background-color: var(--boxel-450);
    border-color: var(--boxel-450);
  }
  .state-indicator.invalid[data-scopedcss-f8b092568e-86788c10ee],
  .state-indicator.applied-with-error[data-scopedcss-f8b092568e-86788c10ee] {
    --icon-color: var(--boxel-light);
    background-color: var(--boxel-warning-200);
    border-color: var(--boxel-warning-200);
  }

  @keyframes spin-data-scopedcss-f8b092568e-86788c10ee {
    to {
      transform: rotate(360deg);
    }
  }

  .example-container[data-scopedcss-8c45d11f7a-5de4c4ef6c] {
    background: var(--boxel-ai-purple);
    overflow: hidden;
    position: relative;
    padding: var(--boxel-sp);
  }

  .dialog-box[data-scopedcss-adeaf99312-d66846fe00] {
    height: 100%;
    display: grid;
    grid-template-areas:
      'header'
      'content'
      'footer';
    grid-template-rows: auto 1fr auto;
    box-shadow: var(--boxel-deep-box-shadow);
    /* container-type applies layout containment, which makes .dialog-box
       the containing block for position: fixed descendants. A nested
       modal rendered inside :content gets trapped by it (sized and
       positioned against this box instead of the viewport), so nested
       modals must portal out to the app root via in-element. */
    container-type: inline-size;
    container-name: dialog-box;
  }

  .dialog-box--with-sidebar[data-scopedcss-adeaf99312-d66846fe00] {
    grid-template-areas:
      'sidebar-header header'
      'sidebar content'
      'sidebar footer';
    grid-template-columns: auto 1fr;
  }

  .dialog-box__sidebar-header[data-scopedcss-adeaf99312-d66846fe00] {
    grid-area: sidebar-header;
    background-color: var(--boxel-100);
    border-top-left-radius: var(--boxel-border-radius);
  }

  .dialog-box__sidebar[data-scopedcss-adeaf99312-d66846fe00] {
    grid-area: sidebar;
    width: 18.75rem;
    background-color: var(--boxel-100);
    border-bottom-left-radius: var(--boxel-border-radius);
  }

  .dialog-box__header[data-scopedcss-adeaf99312-d66846fe00] {
    display: grid;
    grid-area: header;
    gap: var(--boxel-sp-sm);
  }

  .dialog-box__content[data-scopedcss-adeaf99312-d66846fe00] {
    grid-area: content;
    padding: var(--boxel-sp-5xs) var(--boxel-sp-xl) var(--boxel-sp-xl);
    height: 100%;
    overflow: auto;
  }

  .dialog-box__content > * + *[data-scopedcss-adeaf99312-d66846fe00] {
    margin-top: var(--boxel-sp);
  }

  .dialog-box__close[data-scopedcss-adeaf99312-d66846fe00] {
    --icon-color: var(--boxel-dark);
    border: none;
    background: none;
    font: var(--boxel-font-lg);
    position: absolute;
    top: 1px;
    right: 1px;
    width: 50px;
    height: 50px;
    border-top-right-radius: calc(var(--boxel-border-radius) - 1px);
  }

  .dialog-box__close[data-scopedcss-adeaf99312-d66846fe00]:hover:not(:disabled) {
    --icon-color: var(--boxel-highlight);
  }

  .dialog-box__close[data-scopedcss-adeaf99312-d66846fe00]:disabled {
    --icon-color: var(--boxel-300);
    cursor: default;
  }

  /* When the close button carries a tooltip, the Tooltip's trigger wrapper
     takes over the absolute placement so it (and the anchored overlay) hug
     the top-right corner; the button itself sits statically inside it. */
  .dialog-box__close-tooltip[data-scopedcss-adeaf99312-d66846fe00] {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 1;
  }

  .dialog-box__close--in-tooltip[data-scopedcss-adeaf99312-d66846fe00] {
    position: static;
  }

  /* Tooltip content: label at left, key badge at right. Lives in the shared
     #tooltip-overlay, but scoped CSS keys off the class, not DOM position. */
  .close-tooltip[data-scopedcss-adeaf99312-d66846fe00] {
    display: inline-flex;
    align-items: center;
    gap: var(--boxel-sp-xxs);
  }

  .shortcut-key[data-scopedcss-adeaf99312-d66846fe00] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    padding: 0 var(--boxel-sp-5xs);
    border-radius: var(--boxel-border-radius-xs, 4px);
    background: rgb(0 0 0 / 35%);
    color: var(--boxel-450, #939393);
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.5;
  }

  .dialog-box__footer[data-scopedcss-adeaf99312-d66846fe00] {
    grid-area: footer;
    width: 100%;
    height: var(--stack-card-footer-height);
    padding: var(--boxel-sp);
    background-color: var(--boxel-light);
    border-top: 1px solid var(--boxel-300);
    border-bottom-left-radius: var(--boxel-border-radius);
    border-bottom-right-radius: var(--boxel-border-radius);
    display: flex;
  }

  @container dialog-box (width <= 48rem) {
    .dialog-box--with-sidebar > .dialog-box__sidebar[data-scopedcss-adeaf99312-d66846fe00],
    .dialog-box--with-sidebar > .dialog-box__sidebar-header[data-scopedcss-adeaf99312-d66846fe00] {
      display: none;
    }
    .dialog-box--with-sidebar > .dialog-box__content[data-scopedcss-adeaf99312-d66846fe00] {
      padding-inline: var(--boxel-sp);
    }
    .dialog-box--with-sidebar > .dialog-box__footer[data-scopedcss-adeaf99312-d66846fe00] {
      height: auto;
      min-height: var(--stack-card-footer-height);
      padding-inline: var(--boxel-sp-2xs);
    }
  }

  /* `display: contents` so the wrapper is not visually
     represented; the CSS variables and `:deep()` rules below still
     attach to this element and cascade / match against descendants
     normally. This element is also the marker `getBoundaryElement`
     walks up to; its parent's `getBoundingClientRect()` defines
     where the label may extend. */
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] {
    display: contents;

    /* Token definitions live with the context, not in the global
       stylesheet. --boxel-highlight is the app-wide highlight accent
       shipped by boxel-ui; --boxel-highlight-hover is its darker
       companion, used here when a selected card is hovered. */
    --adorn-accent-light: var(--boxel-highlight);
    --adorn-accent: var(--boxel-highlight-hover);
  }
  /* Stroke utility. The consumer applies `.adorn-stroke` to
     whichever descendant should carry the outline (typically the
     card-like element itself), then drives `.selected` and either
     the `:hover` pseudo-class or a `.hovered` class. Plain hover and
     selection use the light accent; hovering a selected card shifts
     both the stroke and the type-label background to the darker
     accent — the label inherits `--adorn-label-bg` from the stroke
     element it's rendered inside. */
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] .adorn-stroke:hover:not(.selected),
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] .adorn-stroke.hovered:not(.selected) {
    box-shadow: 0 0 0 0.125rem var(--adorn-accent-light);
  }
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] .adorn-stroke.selected {
    box-shadow: 0 0 0 0.25rem var(--adorn-accent-light);
  }
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] .adorn-stroke.selected:hover,
  .adorn-context[data-scopedcss-95b2635fcc-e8cd77d91f] .adorn-stroke.selected.hovered {
    box-shadow: 0 0 0 0.25rem var(--adorn-accent);
    --adorn-label-bg: var(--adorn-accent);
  }

  .search-results[data-scopedcss-a3bbad9ce8-2efef37df9] {
    display: contents;
  }

  .realm-url-tooltip-label[data-scopedcss-ae8eced542-bd5a0c5e0b],
  .realm-url-tooltip[data-scopedcss-ae8eced542-bd5a0c5e0b] {
    display: block;
    text-align: start;
  }

  .adorn-label[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.75rem 0.1875rem 0.4375rem;
    background: var(--adorn-label-bg, var(--adorn-accent-light));
    color: var(--boxel-highlight-foreground);
    font: 700 0.625rem/1 var(--boxel-font-family, inherit);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0.3125rem 0 0 0.3125rem;
    clip-path: polygon(0 0, calc(100% - 0.8125rem) 0, 100% 100%, 0 100%);
    z-index: 1;
  }
  /* Mirrored polygon when the label flips below the card so the
     slope still points toward the card edge. */
  .adorn-label[data-side='bottom'][data-scopedcss-fda6d6ab0d-ec555d48a3] {
    clip-path: polygon(0 100%, calc(100% - 0.8125rem) 100%, 100% 0, 0 0);
  }
  .adorn-label.compact[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    padding: 0.125rem 0.625rem 0.125rem 0.3125rem;
    font-size: 0.5625rem;
    gap: 0.25rem;
  }
  /* Without an in-tab menu filling the right side, the text would
     crowd the flag's sloped right edge — add clearance so it clears
     the slope. */
  .adorn-label.no-menu[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    padding-right: 1.125rem;
  }
  .adorn-label.no-menu.compact[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    padding-right: 0.9375rem;
  }

  .adorn-label-icon-slot[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--boxel-highlight-foreground);
  }
  .adorn-label.compact .adorn-label-icon-slot[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    width: 0.6875rem;
    height: 0.6875rem;
  }
  /* Cascade the slot's size to whatever the consumer puts inside
     (typically an SVG icon), so they don't have to size it
     themselves. */
  .adorn-label-icon-slot > *[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    width: 100%;
    height: 100%;
  }

  .adorn-label-text[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    /* `min-width: 0` lets the flex item shrink below its
       min-content size when the label is capped by a max-width;
       without it, text-overflow:ellipsis can't kick in. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* In-tab menu slot. Inline-flex so the menu trigger and its
     portal-origin element count as a single flex item of the
     label. Otherwise the label's natural width grows by one
     flex-gap when the menu opens (the open-state wormhole-origin
     becomes a flex item where the closed-state placeholder was
     display:none), shifting the label on every menu open/close. */
  .adorn-label-dropdown[data-scopedcss-fda6d6ab0d-ec555d48a3] {
    display: inline-flex;
    align-items: center;
  }

  .adorn-select-chip[data-scopedcss-c93f95e5f5-84e8845a5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.1875rem;
    border-radius: 0.3125rem;
    /* Chip-specific token so the chip can be themed independently
       of the label — reading the label's `--adorn-label-bg` here
       would let a label-selection override (operator-mode sets it
       to the darker accent) bleed into the chip. */
    background: var(--adorn-chip-bg, var(--adorn-accent-light));
    color: var(--adorn-accent-light);
    z-index: 1;
  }
  .adorn-select-chip.compact[data-scopedcss-c93f95e5f5-84e8845a5e] {
    width: 1rem;
    height: 1rem;
    padding: 0.125rem;
  }
  .adorn-select-icon[data-scopedcss-c93f95e5f5-84e8845a5e] {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
  }
  .adorn-select-chip.compact .adorn-select-icon[data-scopedcss-c93f95e5f5-84e8845a5e] {
    width: 0.75rem;
    height: 0.75rem;
  }

  .item-button[data-scopedcss-f0cc88a542-34ef04f773] {
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: relative;
  }
  .item-button[data-scopedcss-f0cc88a542-34ef04f773]:not(.create-new-button) {
    --boxel-button-padding: 0;

    box-sizing: content-box;
    text-align: start;
    display: block;
  }
  .item-button[data-scopedcss-f0cc88a542-34ef04f773] * {
    box-sizing: border-box;
  }
  .item-button[data-scopedcss-f0cc88a542-34ef04f773]:focus {
    --host-outline-offset: -1px;
  }
  .item-button.selected[data-scopedcss-f0cc88a542-34ef04f773] {
    border-color: var(--boxel-highlight);
  }
  .item-button[data-scopedcss-f0cc88a542-34ef04f773]:hover {
    box-shadow: var(--boxel-box-shadow);
  }
  .item-button.selected[data-scopedcss-f0cc88a542-34ef04f773]:hover {
    border-color: var(--boxel-highlight);
    box-shadow:
      0 0 0 1px var(--boxel-highlight),
      var(--boxel-box-shadow);
  }

  .create-new-button[data-scopedcss-f0cc88a542-34ef04f773] {
    gap: var(--boxel-sp-xs);
    flex-wrap: nowrap;
    justify-content: flex-start;
    letter-spacing: var(--boxel-lsp-xs);
  }
  .plus-icon[data-scopedcss-f0cc88a542-34ef04f773] >  path {
    stroke: none;
  }

  .selection-indicator[data-scopedcss-f0cc88a542-34ef04f773] {
    position: absolute;
    top: var(--boxel-sp-xxxs);
    left: var(--boxel-sp-xxxs);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--boxel-light);
    border: 1px solid var(--boxel-450);
    border-radius: var(--boxel-border-radius-sm);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5);
    padding: var(--boxel-sp-3xs);
    pointer-events: none;
  }
  .selection-circle[data-scopedcss-f0cc88a542-34ef04f773] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--boxel-highlight);
    border: 1.5px solid var(--boxel-dark);
  }

  /* Adorn treatment — the outline, the label tab, and the selection chip
     are provided by AdornContext + the AdornLabel / AdornSelectChip
     primitives. The rules below only position the catalog-rendered wrappers
     around those primitives and drop the Button's default border so
     AdornContext's teal outline shows through when adorn is active. */
  .item-button.adorn[data-scopedcss-f0cc88a542-34ef04f773]:hover,
  .item-button.adorn.selected[data-scopedcss-f0cc88a542-34ef04f773] {
    border-color: transparent;
  }
  /* Selection ring for adorn catalog items. Defined here on the item itself
     (rather than relying on AdornContext's :deep stroke rule, which the
     portaled catalog item didn't reliably inherit — leaving only the thin
     1px button border) so the ring stays a full-weight 4px whether or not
     the item is hovered, darkening on hover to match the rest of the Adorn
     treatment. `transition: none` makes the ring appear in lockstep with
     the selection tag/chip (which render instantly) instead of fading in
     ~0.2s later — and it's needed on the hover variant too, since a card is
     normally hovered at the moment it's clicked to select, so that rule
     governs the ring's first paint. */
  .item-button.adorn.selected[data-scopedcss-f0cc88a542-34ef04f773],
  .item-button.adorn.selected[data-scopedcss-f0cc88a542-34ef04f773]:hover {
    box-shadow: 0 0 0 0.25rem var(--boxel-highlight);
    transition: none;
  }
  .item-button.adorn.selected[data-scopedcss-f0cc88a542-34ef04f773]:hover {
    box-shadow: 0 0 0 0.25rem var(--boxel-highlight-hover);
  }
  /* The type-label tab is placed by the shared positionAdornLabel modifier
     (inline position/top/left), so this class only carries the consumer's
     concerns: keep it out of pointer events and fade it in on hover. */
  .search-type-label[data-scopedcss-f0cc88a542-34ef04f773] {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 1;
  }
  .item-button.adorn:hover .search-type-label[data-scopedcss-f0cc88a542-34ef04f773] {
    opacity: 1;
  }
  /* Selection chip in the bottom-right corner — purely decorative here, so
     no button wrapper. */
  .adorn-select-position[data-scopedcss-f0cc88a542-34ef04f773] {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    pointer-events: none;
    z-index: 1;
  }
  /* Right-aligned check icon for single-select rows (mini chooser).
     Vertically centered on the row; the row-level background is
     supplied by the variant's parent scope. */
  .selected-checkmark[data-scopedcss-f0cc88a542-34ef04f773] {
    position: absolute;
    top: 50%;
    right: var(--boxel-sp);
    transform: translateY(-50%);
    color: var(--boxel-dark);
    pointer-events: none;
    z-index: 1;
  }

  .search-sheet-section-header[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-sm);
    padding: var(--boxel-sp) 0 var(--boxel-sp-xs);
    margin-bottom: var(--boxel-sp-lg);
  }
  .icon[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    --boxel-realm-icon-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }
  .icon-svg[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    width: 1.5rem;
    height: 1.5rem;
  }
  .title[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    font: 600 var(--boxel-font);
  }
  .count[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    font: 500 var(--boxel-font);
    color: var(--boxel-450);
  }
  .search-sheet-section-header:not(:has(.show-only)) .count[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    margin-left: auto;
  }
  .show-only[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxs);
    cursor: pointer;
    font: var(--boxel-font-sm);
  }
  .show-only-label[data-scopedcss-81a7c6a4ba-87c83c50ac] {
    user-select: none;
  }

  .search-result-block[data-scopedcss-d5cdd6561b-860fabdff2] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--boxel-sp-lg);
  }
  .search-result-block--collapsed[data-scopedcss-d5cdd6561b-860fabdff2] {
    opacity: 0.6;
  }
  .search-result-block--collapsed[data-scopedcss-d5cdd6561b-860fabdff2] .search-sheet-section-header {
    margin-bottom: 0;
    padding-bottom: var(--boxel-sp-lg);
    border-bottom: 1px solid var(--boxel-400);
  }
  .search-result-block--collapsed .cards[data-scopedcss-d5cdd6561b-860fabdff2],
  .search-result-block--collapsed .show-more[data-scopedcss-d5cdd6561b-860fabdff2] {
    display: none;
  }
  .grid-view[data-scopedcss-d5cdd6561b-860fabdff2] .create-new-button {
    flex-direction: column;
    justify-content: center;
  }
  .show-more[data-scopedcss-d5cdd6561b-860fabdff2] {
    margin-top: var(--boxel-sp);
    width: fit-content;
  }
  .search-result-block--mini .show-more[data-scopedcss-d5cdd6561b-860fabdff2] {
    border-radius: var(--boxel-border-radius-xl);
    padding: var(--boxel-sp-xs) var(--boxel-sp);
    font-weight: 600;
  }
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] {
    margin-bottom: var(--boxel-sp);
  }
  /* The recents/realm "in {realm}" caption is rendered as a GridItem
     :after — hide it in the mini variant so each row collapses to icon
     + name only. The Spec card type also renders a `spec-tag-pill`
     badge inside its prerendered body; suppress it for the same
     single-line reason. */
  .search-result-block--mini .realm-name-tooltip[data-scopedcss-d5cdd6561b-860fabdff2],
  .search-result-block--mini .realm-name[data-scopedcss-d5cdd6561b-860fabdff2],
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .spec-tag-pill {
    display: none;
  }
  /* `.compact-view` was authored for the horizontal quick-menu strip
     (row of cards scrolling sideways). The mini chooser wants the
     opposite — a vertical list of single-line rows, one per card. */
  .search-result-block--mini .compact-view[data-scopedcss-d5cdd6561b-860fabdff2] {
    flex-flow: column nowrap;
    gap: 0;
  }
  /* The realm/recents section header is bottom-margined for the full
     search-sheet layout; in mini it sits right above the rows, so
     tighten the gap. */
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .search-sheet-section-header {
    margin-bottom: var(--boxel-sp-xxs);
    padding-block: var(--boxel-sp-xs);
  }
  /* Rows in the mini variant are bare — no border or hover shadow.
     Selection is signaled by a teal fill + a black checkmark on the
     right, matching the design. */
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button {
    border: none;
    background-color: transparent;
    border-radius: var(--boxel-border-radius);
  }
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button:hover {
    box-shadow: none;
    background-color: var(--boxel-200);
  }
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button.selected,
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button.selected:hover {
    background-color: var(--boxel-highlight);
    box-shadow: none;
    border: none;
    --background: transparent;
    --card: transparent;
  }
  /* The Button's own scoped CSS sets `background-color` via the
     `--boxel-button-color` variable; override that var here too so
     the teal fill wins regardless of which selector lands first. */
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button.selected {
    --boxel-button-color: var(--boxel-highlight);
  }
  /* The fitted-format card template (and the prerendered HTML for
     each card type) renders with its own opaque background — that
     covers the Button's teal so only the strip of padding around
     the card would show through. Force every descendant of a
     selected row to transparent so the teal reads end-to-end.
     SVG fills (e.g. the CheckMark icon) aren't `background-color`,
     so the icon glyph stays visible. */
  .search-result-block--mini[data-scopedcss-d5cdd6561b-860fabdff2] .item-button.selected * {
    background-color: transparent;
    background-image: none;
  }
  .realm-name[data-scopedcss-d5cdd6561b-860fabdff2] {
    padding-top: var(--boxel-sp-4xs);
    color: var(--boxel-450);
    font-size: var(--boxel-font-size-xs);
    font-weight: 500;
  }
  .compact-view[data-scopedcss-d5cdd6561b-860fabdff2] {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--boxel-sp-xs);
  }
  .recent-card-item--compact[data-scopedcss-d5cdd6561b-860fabdff2] {
    display: flex;
    flex-direction: column;
    align-items: self-end;
  }
  .realm-name--compact[data-scopedcss-d5cdd6561b-860fabdff2] {
    max-width: 15rem;
  }
  .realm-name-tooltip[data-scopedcss-d5cdd6561b-860fabdff2] {
    max-width: 100%;
  }

  .search-result-header[data-scopedcss-4ae6670630-904e3477ed] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--boxel-sp);
    padding-block: var(--boxel-sp-lg);
    border-bottom: 1px solid var(--boxel-200);
  }
  .summary[data-scopedcss-4ae6670630-904e3477ed] {
    font: 600 var(--boxel-font);
  }
  .controls[data-scopedcss-4ae6670630-904e3477ed] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-lg);
    --boxel-view-option-column-gap: var(--boxel-sp-xs);
    --boxel-radio-input-option-padding: var(--boxel-sp-xs);
  }
  .controls[data-scopedcss-4ae6670630-904e3477ed] .view-options-label {
    display: none;
  }
  .controls[data-scopedcss-4ae6670630-904e3477ed] .view-option {
    --boxel-radio-input-option-padding: 0;
  }
  .controls[data-scopedcss-4ae6670630-904e3477ed] .sort-options-group {
    gap: var(--boxel-sp-xs);
  }
  .controls[data-scopedcss-4ae6670630-904e3477ed] .sort-button {
    min-width: 140px;
    gap: var(--boxel-sp-xs);
  }

  .empty-state[data-scopedcss-bc9cf6ac34-e953a4aba6] {
    padding-block: var(--boxel-sp);
  }

  .search-sheet-content[data-scopedcss-e668b43069-ed705c4d71] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: none;
    height: 100%;
    background-color: var(--boxel-light);
    /* `overflow-y: auto` also clips horizontal overflow, so the
       Adorn outline stroke and type-label tab (which extend a few
       px outside each card) get cut off on the top/left edges
       without room. Block + inline-start padding keeps them inside
       the clip region; the larger inline-end padding is the
       existing scrollbar gutter. */
    padding-block: var(--boxel-sp-xs);
    padding-inline: var(--boxel-sp-xs) var(--boxel-sp);
    transition: opacity var(--boxel-transition);
  }
  /* While persistScrollPosition is still working a saved offset toward
     sticking (content laying out, the sheet's open transition running),
     hide the list so its clamped-to-top intermediate states never paint;
     removing the tag fades the results in already at the right offset.
     The transition: none here keeps the hide itself instant — only the
     reveal animates. */
  .search-sheet-content[data-scroll-restore-pending][data-scopedcss-e668b43069-ed705c4d71] {
    opacity: 0;
    transition: none;
  }
  .search-sheet-content.compact[data-scopedcss-e668b43069-ed705c4d71] {
    flex-direction: row;
    flex-wrap: nowrap;
    /* Top-align the result cards so each keeps its natural height
       (title + realm caption) instead of stretching to the row and
       clipping the caption. The slack then falls below the cards,
       where it leaves room for the horizontal scrollbar — so the
       bottom caption clears it instead of being cropped behind it. */
    align-items: flex-start;
    padding-inline: var(--boxel-sp-xs);
    /* `overflow-y: hidden` (needed so only the row scrolls
       horizontally) would clip the Adorn outline stroke and the
       hover type-label tab, which flips below the card. Bias the
       block padding toward the block-end so the tab has room below
       (the block-start only needs to clear the outline stroke),
       working with the taller prompt sheet (--search-sheet-prompt-height). */
    padding-block: var(--boxel-sp-2xs) var(--boxel-sp);
    overflow-y: hidden;
    overflow-x: auto;
  }
  .search-sheet-content.compact[data-scopedcss-e668b43069-ed705c4d71] .search-result-block {
    margin-bottom: 0;
  }
  /* Mini variant — tighten the layout so the chooser fits into a
     narrow side-by-side envelope. No top padding here: the results header
     below is sticky, and a top padding on the scroll container leaves a
     transparent band above the pinned header that scrolled rows bleed
     through. The header's own padding-block supplies its breathing room;
     keep the bottom padding for end-of-list room. */
  .search-sheet-content.mini[data-scopedcss-e668b43069-ed705c4d71] {
    padding-block: 0 var(--boxel-sp-xs);
  }
  /* Pin the results header to the top of the .search-sheet-content
     scroll container so the "Searching…"/count indicator stays visible
     while the results scroll underneath it. The opaque background matches
     the container so scrolled cards are fully occluded, and z-index keeps
     it above the in-flow result sections. */
  .search-sheet-content.mini[data-scopedcss-e668b43069-ed705c4d71] .search-result-header {
    padding-block: var(--boxel-sp-xs);
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--boxel-light);
  }
  /* The summary is 16px bold in the full sheet; in the mini envelope drop
     it to the chooser's shared 14px scale (weight stays 600). */
  .search-sheet-content.mini[data-scopedcss-e668b43069-ed705c4d71] .search-result-header .summary {
    font: 600 var(--boxel-font-sm);
  }
  /* Summary + Sort sit on one row, with the Sort dropdown shrunk to
     fit its label rather than padded to a comfortable touch target. */
  .search-sheet-content.mini[data-scopedcss-e668b43069-ed705c4d71] .search-result-header .controls {
    gap: var(--boxel-sp-xs);
  }
  .search-sheet-content.mini[data-scopedcss-e668b43069-ed705c4d71] .search-result-header .sort-button {
    min-width: 0;
  }

  .loading[data-scopedcss-80f225c8cd-8da59e0c6d] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    padding: 0 var(--boxel-sp-sm);
    color: var(--boxel-450);
    font-size: var(--boxel-font-size-sm);
  }
  .loading-label[data-scopedcss-80f225c8cd-8da59e0c6d] {
    font-weight: 500;
  }

  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d] {
    --search-bar-bg: var(
      --boxel-input-search-background-color,
      var(--foreground, var(--boxel-dark))
    );
    --search-bar-color: var(
      --boxel-input-search-color,
      var(--background, var(--boxel-light))
    );
    --search-bar-border-color: var(--border, var(--boxel-dark));
    --search-bar-separator-color: rgba(255, 255, 255, 0.25);

    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    flex-wrap: wrap;
    min-height: 3.125rem;
    background-color: var(--search-bar-bg);
    color: var(--search-bar-color);
    border: 1px solid var(--search-bar-border-color);
    border-radius: var(
      --boxel-form-control-border-radius,
      var(--boxel-border-radius-xl)
    );
    outline: 1px solid transparent;
    transition:
      outline-color var(--boxel-transition),
      border-color var(--boxel-transition);
  }

  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d]:focus-within {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    border-color: var(--ring, var(--boxel-highlight));
  }

  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d] .boxel-input,
  .search-sheet__search-bar .search-sheet__search-bar-input[data-scopedcss-6dc0e43c33-971d23ec6d] {
    outline: none !important;
  }
  .search-sheet__search-bar-input[data-scopedcss-6dc0e43c33-971d23ec6d] {
    padding-left: var(--boxel-sp-2xs);
  }

  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d] .boxel-input:focus,
  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d] .boxel-input:focus-visible {
    outline: none !important;
    border-color: transparent !important;
  }

  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d]:focus-within
    .ember-power-select-trigger:focus,
  .search-sheet__search-bar[data-scopedcss-6dc0e43c33-971d23ec6d]:focus-within
    .ember-power-select-trigger:focus-visible {
    outline: none;
  }

  .search-sheet__search-bar-icon[data-scopedcss-6dc0e43c33-971d23ec6d] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--boxel-sp-xs);
    flex-shrink: 0;
  }

  .search-sheet__search-bar-search-icon[data-scopedcss-6dc0e43c33-971d23ec6d] {
    --icon-color: var(
      --boxel-input-search-icon-color,
      var(--boxel-highlight)
    );
    color: var(--icon-color);
  }

  .search-sheet__search-bar-picker[data-scopedcss-6dc0e43c33-971d23ec6d] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
  }

  .search-sheet__search-bar-picker[data-scopedcss-6dc0e43c33-971d23ec6d] .boxel-trigger {
    border: none;
    color: var(--boxel-dark);
    padding: var(--boxel-sp-3xs);
  }

  .search-sheet__search-bar-separator[data-scopedcss-6dc0e43c33-971d23ec6d] {
    width: 1px;
    background-color: var(--search-bar-separator-color);
    flex-shrink: 0;
  }

  .search-sheet__search-bar-input-wrap[data-scopedcss-6dc0e43c33-971d23ec6d] {
    flex: 1;
    display: flex;
  }

  .search-sheet__search-bar-input-wrap[data-scopedcss-6dc0e43c33-971d23ec6d] .boxel-input {
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    border-left: none;
  }

  .search-sheet__search-bar-input-wrap[data-scopedcss-6dc0e43c33-971d23ec6d] .input-container {
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .card-chooser-modal[data-scopedcss-69780b92a4-181f83c2d0] >  .boxel-modal__inner {
    max-height: 80vh;
  }
  .card-chooser-modal.large[data-scopedcss-69780b92a4-181f83c2d0] {
    --boxel-modal-offset-top: var(--boxel-sp-xxxl);
  }
  [data-scopedcss-69780b92a4-181f83c2d0] .dialog-box__header {
    gap: var(--boxel-sp);
  }
  [data-scopedcss-69780b92a4-181f83c2d0] .dialog-box__header,[data-scopedcss-69780b92a4-181f83c2d0] .dialog-box__content {
    padding-bottom: 0;
  }
  .footer[data-scopedcss-69780b92a4-181f83c2d0] {
    display: flex;
    justify-content: space-between;
    gap: var(--boxel-sp);
    margin-left: auto;
  }
  .footer__actions-left[data-scopedcss-69780b92a4-181f83c2d0] {
    display: flex;
    gap: var(--boxel-sp);
    flex-grow: 1;
  }
  .footer-button + .footer-button[data-scopedcss-69780b92a4-181f83c2d0] {
    margin-left: var(--boxel-sp-xs);
  }

  .attach-button[data-scopedcss-19e32a2ed7-42694512ea] {
    border: none;
    margin-top: var(--boxel-sp-4xs);
  }
  .attach-button[data-scopedcss-19e32a2ed7-42694512ea]:not(:disabled):hover,
  .attach-button[data-scopedcss-19e32a2ed7-42694512ea]:not(:disabled):focus:not(:focus-visible) {
    color: #e0e0e0;
  }
  .attach-button[data-scopedcss-19e32a2ed7-42694512ea]
    +  
      .ember-basic-dropdown-content-wormhole-origin .attach-button__dropdown
     {
    border-radius: var(--round-row, 8px);
    width: 256px;
    padding: 0;
    position: absolute;
    z-index: var(--boxel-layer-modal-urgent);
    min-width: 140px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.25);
  }
  .attach-button[data-scopedcss-19e32a2ed7-42694512ea]
    +  
      .ember-basic-dropdown-content-wormhole-origin
        .attach-button__dropdown
        .ember-power-select-option
     {
    padding: 7.5px 5.5px;
    border-radius: var(--round-chip, 4px);
  }
  .menu-option[data-scopedcss-19e32a2ed7-42694512ea] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-wrap: nowrap;
    font-family: var(--boxel-font-family);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 400;
  }

  .content[data-scopedcss-39df46fdc8-d920daa38c] {
    width: 100%;
    margin: 0;
    font: 500 var(--boxel-font);
    letter-spacing: var(--boxel-lsp-xs);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content + .content[data-scopedcss-39df46fdc8-d920daa38c] {
    margin-top: var(--boxel-sp-xs);
  }
  .disclaimer[data-scopedcss-39df46fdc8-d920daa38c] {
    color: var(--boxel-danger);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }
  .restore[data-scopedcss-39df46fdc8-d920daa38c] {
    padding: var(--boxel-sp-lg) var(--boxel-sp-lg) var(--boxel-sp);
    background-color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-xl);
    box-shadow: var(--boxel-deep-box-shadow);
  }
  .buttons[data-scopedcss-39df46fdc8-d920daa38c] {
    margin-top: var(--boxel-sp-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  button[data-scopedcss-39df46fdc8-d920daa38c]:first-child {
    margin-right: var(--boxel-sp-xs);
  }
  .error[data-scopedcss-39df46fdc8-d920daa38c] {
    flex-grow: 1;
    color: var(--boxel-danger);
    font: 500 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    margin-top: var(--boxel-sp);
    margin-bottom: 0;
  }

  .card-pill[data-scopedcss-64c760ebba-3b4e11ca17] {
    --pill-gap: var(--boxel-sp-xxxs);
    --pill-icon-size: 18px;
    --boxel-realm-icon-size: var(--pill-icon-size);
    border: 1px solid var(--boxel-400);
    height: var(--pill-height, 1.875rem);
    overflow: hidden;
  }
  .border-dashed[data-scopedcss-64c760ebba-3b4e11ca17] {
    border-style: dashed;
  }
  .border-solid[data-scopedcss-64c760ebba-3b4e11ca17] {
    border-style: solid;
  }
  .fallback-card-icon[data-scopedcss-64c760ebba-3b4e11ca17] {
    display: block;
    flex-shrink: 0;
  }
  .card-content[data-scopedcss-64c760ebba-3b4e11ca17] {
    max-width: 100px;
    max-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .remove-button[data-scopedcss-64c760ebba-3b4e11ca17] {
    --boxel-icon-button-width: var(--boxel-icon-sm);
    --boxel-icon-button-height: var(--boxel-icon-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--boxel-border-radius-xs);
  }

  .file-pill[data-scopedcss-d9038518d9-74805ca0ee] {
    --pill-icon-size: 16px;
    --boxel-realm-icon-size: var(--pill-icon-size);
    border: 1px solid var(--boxel-400);
    height: var(--pill-height, 1.875rem);
    overflow: hidden;
    padding-left: 3px;
  }
  .border-dashed[data-scopedcss-d9038518d9-74805ca0ee] {
    border-style: dashed;
  }
  .border-solid[data-scopedcss-d9038518d9-74805ca0ee] {
    border-style: solid;
  }

  .has-warning[data-scopedcss-d9038518d9-74805ca0ee] {
    border-color: var(--boxel-warning-200);
  }
  .warning-icon[data-scopedcss-d9038518d9-74805ca0ee] {
    color: var(--boxel-warning-200);
  }
  .file-name[data-scopedcss-d9038518d9-74805ca0ee] {
    display: inline-block;
    max-width: 100px;
    max-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--boxel-900);
    font: var(--boxel-font-sm);
  }
  .remove-button[data-scopedcss-d9038518d9-74805ca0ee] {
    --boxel-icon-button-width: var(--boxel-icon-sm);
    --boxel-icon-button-height: var(--boxel-icon-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--boxel-border-radius-xs);
  }

  .attached-items[data-scopedcss-6b03763bf4-82c44e0f37] {
    /* the box's own tint shows through: no white band across it */
    background-color: transparent;
    color: var(--boxel-dark);
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxxs);
  }

  .chat-input-container[data-scopedcss-be6c467814-1b26eafeec] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 54px;
    gap: var(--step-4, 4px);
    padding: 0 var(--step-12, 12px);
    background-color: transparent;
    border-top-left-radius: var(--chat-input-area-border-radius);
    border-top-right-radius: var(--chat-input-area-border-radius);

    /*
      Detecting overflow with CSS: https://csscade.com/can-you-detect-overflow-with-css/
      This adds a bottom border to this container when the input has overflowed.
    */

    animation: detect-input-overflow-data-scopedcss-be6c467814-1b26eafeec linear forwards;
    animation-timeline: --chat-input-scroll-timeline;

    --border-bottom-color-if-overflow: var(--has-overflow) var(--boxel-400);
    --border-bottom-color-no-overflow: transparent;

    border-bottom: 1px solid
      var(
        --border-bottom-color-if-overflow,
        var(--border-bottom-color-no-overflow)
      );
  }

  /* Adapted autoexpanding textarea: https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
  .input-and-clone[data-scopedcss-be6c467814-1b26eafeec] {
    display: grid;
  }

  .clone[data-scopedcss-be6c467814-1b26eafeec] {
    white-space: pre-wrap;
    visibility: hidden;

    scroll-timeline: --chat-input-scroll-timeline block;
  }

  .chat-input[data-scopedcss-be6c467814-1b26eafeec],
  .clone[data-scopedcss-be6c467814-1b26eafeec] {
    width: 100%;
    padding: var(--boxel-sp-4xs);

    max-height: 150px;
    overflow-y: auto;

    /* the entry reads at the reading size, 14 on 22 */
    font-family: var(--boxel-font-family);
    font-size: var(--type-read, 14px);
    line-height: var(--leading-read, 22px);
    font-weight: 400;
    letter-spacing: normal;

    grid-area: 1 / 1 / 2 / 2;
  }

  /* iOS zooms into inputs under 16px on focus */
  @media (pointer: coarse) {
    .chat-input[data-scopedcss-be6c467814-1b26eafeec],
    .clone[data-scopedcss-be6c467814-1b26eafeec] {
      font-size: var(--boxel-font-size);
    }
  }

  .chat-input[data-scopedcss-be6c467814-1b26eafeec] {
    background: transparent;
    border: 0;
    border-radius: 0;
    resize: none;
    outline: 0;
  }

  @keyframes detect-input-overflow-data-scopedcss-be6c467814-1b26eafeec {
    from,
    to {
      --has-overflow: ;
    }
  }

  .chat-input[data-scopedcss-be6c467814-1b26eafeec]::placeholder {
    color: var(--boxel-500);
  }
  .chat-input[data-scopedcss-be6c467814-1b26eafeec]:hover:not(:disabled) {
    border-color: transparent;
  }
  /* Send is the box's one primary: solid teal while there is something
     to send, a quiet gray well until then */
  .send-button[data-scopedcss-be6c467814-1b26eafeec] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--round-row, 8px);
    margin-top: 2px;
    background-color: var(--boxel-highlight);
    color: var(--boxel-dark);
  }
  .send-button[data-scopedcss-be6c467814-1b26eafeec]:disabled {
    color: var(--boxel-450);
    background-color: var(--ai-composer-well, var(--boxel-200));
    pointer-events: none;
  }
  .send-button[data-scopedcss-be6c467814-1b26eafeec] svg {
    padding: var(--boxel-sp-5xs);
  }

  @layer PretComponent {
    .pretui-agentmark[data-scopedcss-ccce454656-26b0eaab12] {
      display: inline-grid;
      place-items: center;
      flex: none;
      width: var(--pretui-agent-mark-size);
      height: var(--pretui-agent-mark-size);
      background-image: var(--pretui-agent-icon, none);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      /* a mark, not text: the glyph scales with the mark's box */
      font-size: calc(var(--pretui-agent-mark-size) * 0.75);
      line-height: 1;
      /* settled, the fallback glyph is ink; teal is for live work */
      color: var(--muted-foreground);
      vertical-align: -0.2em;
    }
    .pretui-agentmark[data-working][data-scopedcss-ccce454656-26b0eaab12] {
      color: var(--primary-ink);
    }
    .pretui-agentmark[data-scopedcss-ccce454656-26b0eaab12]::before {
      content: var(--pretui-agent-glyph, '✦');
    }
    .pretui-agentmark[data-working][data-scopedcss-ccce454656-26b0eaab12] {
      background-image: var(
        --pretui-agent-icon-working,
        var(--pretui-agent-icon, none)
      );
    }
    .pretui-agentmark[data-working][data-scopedcss-ccce454656-26b0eaab12]::before {
      animation: pretui-agentmark-pulse-data-scopedcss-ccce454656-26b0eaab12 1.2s ease-in-out infinite;
    }
    @keyframes pretui-agentmark-pulse-data-scopedcss-ccce454656-26b0eaab12 {
      50% {
        opacity: 0.35;
        transform: scale(0.8);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-agentmark[data-working][data-scopedcss-ccce454656-26b0eaab12] {
        background-image: var(--pretui-agent-icon, none);
      }
      .pretui-agentmark[data-working][data-scopedcss-ccce454656-26b0eaab12]::before {
        animation: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] {
      --pretui-cap-ink: var(--foreground);
      /* a row's least height, which its buttons fill */
      --_cap-row-h: 1.75rem;
      display: flex;
      flex-direction: column;
      margin-inline: var(--pretui-cap-inset, var(--boxel-sp-sm));
      border-radius: var(--boxel-border-radius-lg)
        var(--boxel-border-radius-lg) 0 0;
      background-color: var(
        --pretui-cap-surface,
        color-mix(in oklch, var(--foreground) 8%, var(--background))
      );
      box-shadow: 0 0 0 1px var(--pretui-cap-edge, var(--border-strong));
      color: var(--pretui-cap-ink);
      font-family: var(--font-sans);
      container: pretui-cap / inline-size;
    }
    /* a narrow cap keeps the moment's primary and drops what it can
       reach another way */
    @container pretui-cap (width < 20rem) {
      .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] [data-cap-optional] {
        display: none;
      }
    }
    /* every row is UI size; a queued row is the compact one */
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-row {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: var(--_cap-row-h);
      padding: 0 var(--boxel-sp-4xs) 0 var(--boxel-sp-xs);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      min-width: 0;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] >  * + * {
      box-shadow: inset 0 1px 0 var(--pretui-cap-edge, var(--border-strong));
    }
    /* the status is the row you read first: one step stronger than the
       queue by weight (its title is 600) and height, never by size */
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status {
      min-height: 2.25rem;
      padding: 0 var(--boxel-sp-4xs) 0 var(--boxel-sp-xs);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status[data-wrap] {
      align-items: flex-start;
      padding-block: var(--boxel-sp-xs);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status[data-wrap] .pretui-cap-lead {
      margin-top: 0;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status[data-wrap] .pretui-cap-actions {
      margin-top: calc(-1 * var(--boxel-sp-4xs));
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-lead {
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.125rem;
      height: 1.125rem;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-queued .pretui-cap-lead {
      width: 1rem;
      height: 1rem;
      color: var(--subtle-foreground);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-status[data-tone='idle'] .pretui-cap-lead {
      opacity: 0.55;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: currentColor;
      box-shadow: 0 0 0 0.1875rem
        color-mix(in oklch, currentColor 20%, transparent);
      transition: color 160ms ease;
    }
    /* a state colours the mark only: waiting on you is attention, a
       problem is failed, done and live work are live */
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-status[data-tone='waiting'] .pretui-cap-lead {
      color: var(--attention-ink);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-status[data-tone='problem'] .pretui-cap-lead {
      color: var(--destructive-ink);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-status[data-tone='done'] .pretui-cap-lead {
      color: var(--primary-ink);
    }
    /* the title holds its words; the detail gives way first */
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-text {
      flex: 1 1 auto;
      display: flex;
      align-items: baseline;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-title {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dots {
      flex: none;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-text > .pretui-cap-detail {
      flex: 0 4 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status[data-wrap] .pretui-cap-text {
      display: block;
      white-space: normal;
      overflow-wrap: anywhere;
      color: var(--muted-foreground);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status[data-wrap] .pretui-cap-title {
      font-weight: 400;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-title {
      font-weight: 600;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-queued .pretui-cap-text {
      color: var(--muted-foreground);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-detail {
      color: var(--muted-foreground);
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dots span {
      animation: pretui-cap-blink-data-scopedcss-1f51644262-4793cdc3ed 1.4s infinite both;
      opacity: 0.4;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dots span:nth-child(2) {
      animation-delay: 0.2s;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dots span:nth-child(3) {
      animation-delay: 0.4s;
    }
    @keyframes pretui-cap-blink-data-scopedcss-1f51644262-4793cdc3ed {
      0%,
      80%,
      100% {
        opacity: 0.4;
      }
      40% {
        opacity: 1;
      }
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-actions {
      flex: none;
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-actions:empty {
      display: none;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-section {
      padding: var(--boxel-sp-4xs) var(--boxel-sp-sm) var(--boxel-sp-xs)
        var(--boxel-sp-xl);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--boxel-sp-4xs);
      height: 1.5rem;
      min-width: 1.5rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      color: var(--muted-foreground);
      font-family: var(--font-sans);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-status .pretui-cap-button {
      height: var(--_cap-row-h);
      min-width: var(--_cap-row-h);
      padding: 0 var(--boxel-sp-sm);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-status .pretui-cap-button[data-kind='icon'] {
      padding: 0;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-kind='icon'] {
      padding: 0;
    }
    /* the moment's one action */
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-kind='primary'] {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-button[data-kind='primary']:hover:not(:disabled) {
      background-color: color-mix(
        in oklch,
        var(--primary) 88%,
        var(--pretui-cap-ink)
      );
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-kind='secondary'] {
      box-shadow: inset 0 0 0 1px var(--border-strong);
      color: var(--pretui-cap-ink);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-kind='quiet'],
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-kind='icon'] {
      color: var(--muted-foreground);
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-button[data-kind='quiet']:hover:not(:disabled),
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed]
      .pretui-cap-button[data-kind='icon']:hover:not(:disabled) {
      color: var(--pretui-cap-ink);
      background-color: color-mix(
        in oklch,
        var(--pretui-cap-ink) 8%,
        transparent
      );
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button:disabled,
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button[data-busy] {
      cursor: default;
      background-color: color-mix(
        in oklch,
        var(--pretui-cap-ink) 10%,
        transparent
      );
      color: var(--subtle-foreground);
      box-shadow: none;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-button:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-glyph {
      flex: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-cap[data-scopedcss-1f51644262-4793cdc3ed] .pretui-cap-dots span {
        animation: none;
        opacity: 0.7;
      }
    }
  }

  @layer PretComponent {
    .pretui-planmark[data-scopedcss-c5d643d39d-3e81140bad] {
      position: relative;
      display: inline-grid;
      place-items: center;
      flex: none;
      color: var(--pretui-planmark-ink, var(--muted-foreground));
      vertical-align: -0.2em;
    }
    .pretui-planmark > *[data-scopedcss-c5d643d39d-3e81140bad] {
      grid-area: 1 / 1;
    }
    .pretui-planmark-ring[data-scopedcss-c5d643d39d-3e81140bad] {
      display: block;
      overflow: visible;
    }
    .pretui-planmark-ring circle[data-scopedcss-c5d643d39d-3e81140bad] {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.25;
    }
    /* done and failed: a soft tint of the state behind a thin mark, the
       old glyph's weight in the new shape */
    .pretui-planmark[data-state='done'][data-scopedcss-c5d643d39d-3e81140bad] {
      color: var(--success-ink);
    }
    .pretui-planmark[data-state='done'] .pretui-planmark-ring circle[data-scopedcss-c5d643d39d-3e81140bad],
    .pretui-planmark[data-state='failed'] .pretui-planmark-ring circle[data-scopedcss-c5d643d39d-3e81140bad] {
      fill: color-mix(in oklch, currentColor 16%, transparent);
      stroke: color-mix(in oklch, currentColor 40%, transparent);
    }
    .pretui-planmark[data-state='done'] .pretui-planmark-icon[data-scopedcss-c5d643d39d-3e81140bad],
    .pretui-planmark[data-state='failed'] .pretui-planmark-icon[data-scopedcss-c5d643d39d-3e81140bad] {
      stroke-width: 2.5;
    }
    .pretui-planmark[data-state='failed'][data-scopedcss-c5d643d39d-3e81140bad] {
      color: var(--destructive-ink);
    }
    /* what comes next: a dashed circle, quieter */
    .pretui-planmark[data-state='next'][data-scopedcss-c5d643d39d-3e81140bad] {
      color: var(--subtle-foreground);
    }
    .pretui-planmark[data-state='next'] .pretui-planmark-ring circle[data-scopedcss-c5d643d39d-3e81140bad] {
      stroke-dasharray: 2.2 2.3;
    }
    .pretui-planmark[data-state='skipped'][data-scopedcss-c5d643d39d-3e81140bad] {
      color: var(--subtle-foreground);
    }
    .pretui-planmark[data-state='skipped'] .pretui-planmark-icon[data-scopedcss-c5d643d39d-3e81140bad] {
      stroke-width: 2.25;
    }
    .pretui-planmark[data-state='current'][data-scopedcss-c5d643d39d-3e81140bad] {
      color: var(--success-ink);
    }
    /* under way: a ring with a gap that turns */
    .pretui-planmark[data-state='current'] .pretui-planmark-ring circle[data-scopedcss-c5d643d39d-3e81140bad] {
      stroke-width: 1.5;
      stroke-dasharray: 28 14.4;
      stroke-linecap: round;
    }
    .pretui-planmark[data-state='current'] .pretui-planmark-ring[data-scopedcss-c5d643d39d-3e81140bad] {
      animation: pretui-planmark-turn-data-scopedcss-c5d643d39d-3e81140bad 1.4s linear infinite;
    }
    @keyframes pretui-planmark-turn-data-scopedcss-c5d643d39d-3e81140bad {
      to {
        transform: rotate(1turn);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-planmark[data-state='current'] .pretui-planmark-ring[data-scopedcss-c5d643d39d-3e81140bad] {
        animation: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-toolplan[data-scopedcss-33333e2ba3-8d03a9092f] {
      display: grid;
      gap: 1px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    /* ToolLine's grid: the glyph in the disc column, the words on the
       row's text edge */
    .pretui-toolplan-step[data-scopedcss-33333e2ba3-8d03a9092f] {
      display: grid;
      grid-template-columns: var(--pretui-toolrow-disc, var(--boxel-sp)) minmax(
          0,
          1fr
        );
      column-gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
      align-items: center;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--pretui-toolrow-settled-ink, var(--foreground));
    }
    .pretui-toolplan-glyph[data-scopedcss-33333e2ba3-8d03a9092f] {
      justify-self: center;
      align-self: center;
    }
    /* done steps step back; the step under way and what is left keep
       the ink, so the eye lands on the work still to do */
    .pretui-toolplan-step[data-state='done'][data-scopedcss-33333e2ba3-8d03a9092f] {
      color: var(--muted-foreground);
    }
    .pretui-toolplan-step[data-state='current'][data-scopedcss-33333e2ba3-8d03a9092f] {
      color: var(--foreground);
    }
    .pretui-toolplan-step[data-state='next'][data-scopedcss-33333e2ba3-8d03a9092f] {
      color: var(--foreground);
    }
    .pretui-toolplan-step[data-state='skipped'][data-scopedcss-33333e2ba3-8d03a9092f] {
      color: var(--subtle-foreground);
    }
    .pretui-toolplan-step[data-state='skipped'] .pretui-toolplan-label[data-scopedcss-33333e2ba3-8d03a9092f] {
      text-decoration: line-through;
    }
    /* a failed step keeps ink-1: its mark carries the state */
    .pretui-toolplan-step[data-state='failed'][data-scopedcss-33333e2ba3-8d03a9092f] {
      color: var(--foreground);
    }
    .pretui-toolplan[data-density='comfortable'][data-scopedcss-33333e2ba3-8d03a9092f] {
      gap: var(--boxel-sp-xs);
    }
    .pretui-toolplan[data-density='comfortable'] .pretui-toolplan-step[data-scopedcss-33333e2ba3-8d03a9092f] {
      grid-template-columns: var(--boxel-sp) minmax(0, 1fr);
      column-gap: var(--boxel-sp-xs);
      align-items: center;
    }
    .pretui-toolplan-label[data-scopedcss-33333e2ba3-8d03a9092f] {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .pretui-toolplan-note[data-scopedcss-33333e2ba3-8d03a9092f] {
      margin-inline-start: var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
    /* what a step did sits under its words, smaller and quieter: it
       belongs to the step, it is not a step of its own */
    .pretui-toolplan-details[data-scopedcss-33333e2ba3-8d03a9092f] {
      grid-column: 2;
      display: grid;
      gap: var(--boxel-sp-6xs);
      margin: var(--boxel-sp-6xs) 0 var(--boxel-sp-4xs);
      padding: 0;
      list-style: none;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
    }
    .pretui-toolplan-detail[data-scopedcss-33333e2ba3-8d03a9092f] {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* the state in words, for a reader who does not see the glyph */
    .pretui-toolplan-spoken[data-scopedcss-33333e2ba3-8d03a9092f] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @layer PretComponent {
    .pretui-checklist[data-scopedcss-01ae132a94-5faabb139b] {
      display: grid;
      gap: var(--boxel-sp-xs);
      min-width: 0;
    }
    .pretui-checklist-activity[data-scopedcss-01ae132a94-5faabb139b] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      justify-self: start;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      text-align: start;
      color: var(--muted-foreground);
    }
    button.pretui-checklist-activity[data-scopedcss-01ae132a94-5faabb139b] {
      cursor: pointer;
    }
    button.pretui-checklist-activity[data-scopedcss-01ae132a94-5faabb139b]:hover {
      color: var(--foreground);
    }
    button.pretui-checklist-activity[data-scopedcss-01ae132a94-5faabb139b]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: var(--boxel-border-radius-xs);
    }
    .pretui-checklist-activity-text[data-scopedcss-01ae132a94-5faabb139b] {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    /* while it runs, the line's tail shimmers as TextShimmer does */
    .pretui-checklist[data-running] .pretui-checklist-activity-text[data-scopedcss-01ae132a94-5faabb139b] {
      background: linear-gradient(
          90deg,
          var(--muted-foreground) 0%,
          var(--muted-foreground) 40%,
          var(--foreground) 50%,
          var(--muted-foreground) 60%,
          var(--muted-foreground) 100%
        )
        0 0 / 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: pretui-checklist-shimmer-data-scopedcss-01ae132a94-5faabb139b 2.4s linear infinite;
    }
    @keyframes pretui-checklist-shimmer-data-scopedcss-01ae132a94-5faabb139b {
      from {
        background-position: 100% 0;
      }
      to {
        background-position: 0% 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-checklist[data-running] .pretui-checklist-activity-text[data-scopedcss-01ae132a94-5faabb139b] {
        animation: none;
        background-image: none;
        color: var(--muted-foreground);
      }
    }
    .pretui-checklist-chevron[data-scopedcss-01ae132a94-5faabb139b] {
      flex: none;
    }
    .pretui-checklist-card[data-scopedcss-01ae132a94-5faabb139b] {
      padding: var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-lg);
      box-shadow: inset 0 0 0 1px var(--border);
      background-color: var(--card);
    }
    /* the count is for a screen reader; the marks say it to the eye */
    .pretui-checklist-summary[data-scopedcss-01ae132a94-5faabb139b] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* the cap reads at the UI size whatever the composer's own size is,
     and runs 12px down behind the box, whose rounded top covers its
     lower corners, as the showcase's composer draws it */
  .composer-cap[data-scopedcss-8dd6d0b37a-526fb6c03e] {
    position: relative;
    z-index: 1;
    padding-bottom: var(--step-12, 12px);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    --pretui-cap-surface: var(--ai-composer-cap-surface);
    --pretui-cap-edge: var(--ai-composer-cap-edge);
    /* the cap spans the composer's full width, its top edge continued */
    --pretui-cap-inset: var(--ai-composer-cap-inset, 0px);
  }

  .example-container[data-scopedcss-9ff80a6710-c10f876601] {
    background-color: var(--boxel-ai-purple);
    color: var(--boxel-light);
    padding: var(--boxel-sp);
    --foreground: #f7f8fa;
    --muted-foreground: #a8a2ba;
    --primary: var(--boxel-highlight);
    --primary-foreground: var(--boxel-dark);
    --ai-composer-cap-surface: color-mix(
      in oklch,
      var(--boxel-light) 9%,
      var(--boxel-ai-purple)
    );
    --ai-composer-cap-edge: color-mix(
      in oklch,
      var(--boxel-light) 16%,
      var(--boxel-ai-purple)
    );
    --ai-composer-attention: #f0b44c;
  }
  .example-box[data-scopedcss-9ff80a6710-c10f876601] {
    padding: var(--boxel-sp-sm);
    border-radius: 14px;
    background-color: color-mix(
      in oklch,
      var(--boxel-ai-purple) 5%,
      var(--boxel-light)
    );
    color: var(--boxel-450);
  }

  .ai-focus-pill[data-scopedcss-e08b2c0a46-60c8b1c323] {
    --boxel-pill-border: none;
    --boxel-pill-border-radius: var(--round-row, 8px);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    height: 30px;
    padding: var(--boxel-sp-4xs) var(--boxel-sp-xxs);
    gap: var(--boxel-sp-xxs);
  }
  .ai-focus-pill[data-scopedcss-e08b2c0a46-60c8b1c323]:hover {
    filter: brightness(0.95);
  }

  .meta-pill[data-scopedcss-e08b2c0a46-60c8b1c323] {
    flex-shrink: 0;
    height: 22px;
    padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    font-variant-numeric: tabular-nums;
    border-radius: var(--round-chip, 4px);
  }

  .container-to-constrain-width[data-scopedcss-cd9165ce8c-3ea97d4309] {
    max-width: 325px;
  }

  @layer PretComponent {
    .pretui-speaker[data-scopedcss-2d4a5a12cb-384d5539e5] {
      display: flex;
      align-items: center;
      /* the mark is the thread's glyph column, its words one gap after,
         as every mark in the transcript */
      gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
      min-width: 0;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
    }
    /* the host's avatar, held to the mark's circle */
    .pretui-speaker-avatar[data-scopedcss-2d4a5a12cb-384d5539e5] {
      flex: none;
      display: inline-flex;
      width: var(--pretui-toolrow-disc, 1rem);
      height: var(--pretui-toolrow-disc, 1rem);
      overflow: hidden;
      border-radius: 50%;
    }
    .pretui-speaker-mark[data-scopedcss-2d4a5a12cb-384d5539e5] {
      flex: none;
      display: grid;
      place-items: center;
      width: var(--pretui-toolrow-disc, 1rem);
      height: var(--pretui-toolrow-disc, 1rem);
      border-radius: 50%;
      background-color: var(--inset);
      box-shadow: inset 0 0 0 1px var(--border);
      /* one initial, not a kicker: caption, set to the circle's height */
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 600;
      text-transform: uppercase;
      color: var(--foreground);
    }
    .pretui-speaker-name[data-scopedcss-2d4a5a12cb-384d5539e5] {
      font-weight: 600;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-speaker-via[data-scopedcss-2d4a5a12cb-384d5539e5],
    .pretui-speaker-time[data-scopedcss-2d4a5a12cb-384d5539e5] {
      white-space: nowrap;
    }
    /* the assistant's name is one short word and always reads; what
       follows it (a time, or a turn's "Worked for 2m 55s · 6 calls")
       gives way first */
    .pretui-speaker[data-agent] .pretui-speaker-name[data-scopedcss-2d4a5a12cb-384d5539e5] {
      flex: none;
    }
    .pretui-speaker[data-agent] .pretui-speaker-time[data-scopedcss-2d4a5a12cb-384d5539e5] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-speaker-via[data-scopedcss-2d4a5a12cb-384d5539e5]::before,
    .pretui-speaker-time[data-scopedcss-2d4a5a12cb-384d5539e5]::before {
      content: '·';
      margin-inline-end: var(--boxel-sp-xs);
    }
    .pretui-speaker-time[data-scopedcss-2d4a5a12cb-384d5539e5] {
      font-variant-numeric: tabular-nums;
    }
  }

  @layer PretComponent {
    .pretui-stick-to-bottom[data-scopedcss-33aee2d926-1fa7cbc88f] {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }
    .pretui-stick-to-bottom-viewport[data-scopedcss-33aee2d926-1fa7cbc88f] {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-gutter: stable;
      /* The component owns the scroll position: following, it pins
         the end; detached, it holds the anchor (settle). The browser
         must not anchor as well. */
      overflow-anchor: none;
    }
    .pretui-stick-to-bottom-viewport[data-scopedcss-33aee2d926-1fa7cbc88f]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-stick-to-bottom-content[data-scopedcss-33aee2d926-1fa7cbc88f] {
      display: flow-root;
    }
    .pretui-stick-to-bottom-edge[data-scopedcss-33aee2d926-1fa7cbc88f] {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      block-size: var(--pretui-stick-to-bottom-fade, var(--boxel-sp-lg));
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(
        to bottom,
        var(--pretui-stick-to-bottom-ground, var(--card)),
        transparent
      );
      transition: opacity 140ms linear;
    }
    .pretui-stick-to-bottom-viewport[data-start-y='clipped']
      ~ .pretui-stick-to-bottom-edge[data-scopedcss-33aee2d926-1fa7cbc88f] {
      opacity: 1;
    }
    /* The overlay adds no box: its children position against the root,
       which is what JumpChip expects of its nearest positioned ancestor. */
    .pretui-stick-to-bottom-overlay[data-scopedcss-33aee2d926-1fa7cbc88f] {
      display: contents;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-stick-to-bottom-edge[data-scopedcss-33aee2d926-1fa7cbc88f] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-disclosure[data-scopedcss-a6bb80bc3e-312465d76b] {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition:
        grid-template-rows var(--pretui-disclosure-duration, 320ms)
          var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1)),
        opacity 180ms linear;
    }
    .pretui-disclosure[data-open][data-scopedcss-a6bb80bc3e-312465d76b] {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .pretui-disclosure-inner[data-scopedcss-a6bb80bc3e-312465d76b] {
      overflow: hidden;
      min-height: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-disclosure[data-scopedcss-a6bb80bc3e-312465d76b] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-glyph[data-scopedcss-e409980a68-6220b8d5b7] {
      display: inline-grid;
      place-items: center;
      line-height: 1;
      vertical-align: -0.125em;
    }
    .pretui-glyph-icon[data-scopedcss-e409980a68-6220b8d5b7] {
      display: block;
      stroke-width: 2.25;
    }
  }

  @layer PretComponent {
    .pretui-progresswrap[data-scopedcss-f9559c8797-1c990b0b5e] {
      display: grid;
      gap: var(--boxel-sp-3xs);
    }
    .pretui-progress-head[data-scopedcss-f9559c8797-1c990b0b5e] {
      display: flex;
      justify-content: space-between;
      align-items: last baseline;
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
    }
    .pretui-progress-count[data-scopedcss-f9559c8797-1c990b0b5e] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-2xs);
      font-variant-numeric: tabular-nums;
      color: var(--foreground);
    }
    .pretui-progress[data-scopedcss-f9559c8797-1c990b0b5e] {
      height: 0.25rem;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--inset);
      overflow: hidden;
    }
    .pretui-progress-fill[data-scopedcss-f9559c8797-1c990b0b5e] {
      height: 100%;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--pretui-progress-hue, var(--primary));
      transition: width var(--pretui-dur-morph, 300ms) var(--pretui-ease-morph, ease-out);
    }
    .pretui-progress-steps[data-scopedcss-f9559c8797-1c990b0b5e] {
      display: flex;
      gap: var(--boxel-sp-5xs);
    }
    .pretui-progress-step[data-scopedcss-f9559c8797-1c990b0b5e] {
      flex: 1;
      height: 0.25rem;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--inset);
      transition: background-color var(--pretui-dur-morph, 300ms) var(--pretui-ease-morph, ease-out);
    }
    .pretui-progress-step[data-on][data-scopedcss-f9559c8797-1c990b0b5e] {
      background-color: var(--pretui-progress-hue, var(--primary));
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-progress-fill[data-scopedcss-f9559c8797-1c990b0b5e],
      .pretui-progress-step[data-scopedcss-f9559c8797-1c990b0b5e] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    @keyframes pretui-spin-data-scopedcss-168137d984-a3a2d631cc {
      to {
        transform: rotate(360deg);
      }
    }
    .pretui-spinner[data-scopedcss-168137d984-a3a2d631cc] {
      display: inline-block;
      border-radius: 50%;
      border: 1.5px solid color-mix(in oklch, currentColor 25%, transparent);
      border-top-color: currentColor;
      animation: pretui-spin-data-scopedcss-168137d984-a3a2d631cc 0.7s linear infinite;
      flex: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-spinner[data-scopedcss-168137d984-a3a2d631cc] {
        animation-duration: 2.8s;
      }
    }
  }

  @layer PretComponent {
    .pretui-workitem[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      /* the row's inset, disc and gap, which the body's leading edge
         adds up to so its text lines up under the title */
      --_workitem-inset: var(--boxel-sp-sm);
      --_workitem-disc: 1rem;
      --_workitem-gap: var(--boxel-sp-xs);
      display: flex;
      flex-direction: column;
      background-color: var(--card);
      border-radius: var(--boxel-border-radius);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      font-size: var(--boxel-font-size-xs);
    }
    /* needs you: the attention hue tints the face and draws the edge;
       the status words and the disc's mark take its ink (below) */
    .pretui-workitem[data-attention][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      box-shadow:
        0 0 0 1px color-mix(in oklch, var(--attention) 60%, var(--border)),
        0 0.125rem 0.625rem
          color-mix(in oklch, var(--attention) 14%, transparent);
      background-image: linear-gradient(
        180deg,
        color-mix(in oklch, var(--attention) 7%, var(--card)),
        var(--card) 55%
      );
    }
    .pretui-workitem[data-state='failed'][data-scopedcss-4ed6978fd3-14cff6ef9a],
    .pretui-workitem[data-state='invalid'][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      box-shadow: 0 0 0 1px
        color-mix(in oklch, var(--destructive) 45%, var(--border));
    }
    .pretui-workitem[data-recede] > .pretui-workitem-row[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      opacity: var(--pretui-recede-opacity, 1);
      transition: opacity 200ms linear;
    }
    .pretui-workitem[data-recede]:is(:hover, :focus-within)
      > .pretui-workitem-row[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      opacity: 1;
    }
    .pretui-workitem-row[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      display: flex;
      align-items: center;
      gap: var(--_workitem-gap);
      padding: var(--boxel-sp-2xs) var(--_workitem-inset);
      min-height: 2rem;
    }
    .pretui-workitem-body[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      padding: 0 var(--_workitem-inset) var(--boxel-sp-xs)
        calc(
          var(--_workitem-inset) + var(--_workitem-disc) +
            var(--_workitem-gap)
        );
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-xs);
    }
    .pretui-disc[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      width: var(--_workitem-disc);
      height: var(--_workitem-disc);
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      font-size: 0.5625rem;
      font-weight: 700;
      background-color: var(--inset);
      color: var(--muted-foreground);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
    }
    .pretui-disc[data-tone='failed'][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      background-color: color-mix(
        in oklch,
        var(--destructive) 15%,
        var(--card)
      );
      color: var(--destructive-ink);
    }
    .pretui-disc[data-tone='attention'][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      background-color: color-mix(
        in oklch,
        var(--attention) 22%,
        var(--card)
      );
      color: var(--attention-ink);
    }
    .pretui-verb[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--muted-foreground);
      flex: none;
    }
    .pretui-workitem-title[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1;
    }
    .pretui-workitem-status[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      margin-left: auto;
      flex: none;
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-3xs);
      font-variant-numeric: tabular-nums;
    }
    .pretui-workitem-status[data-tone='attention'][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      color: var(--attention-ink);
      font-weight: 600;
    }
    .pretui-workitem-status[data-tone='failed'][data-scopedcss-4ed6978fd3-14cff6ef9a] {
      color: var(--destructive-ink);
      font-weight: 500;
    }
    .pretui-activity[data-scopedcss-4ed6978fd3-14cff6ef9a] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-2xs);
      color: var(--subtle-foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  @layer PretComponent {
    .pretui-toolrow-generic[data-scopedcss-5ed8ae86bf-6d5882cd65] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-xs);
    }
  }

  @layer PretComponent {
    .pretui-toolline[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      /* a ToolLine reads the row's grid; alone it falls back to it */
      --pretui-toolline-disc: var(--pretui-toolrow-disc, var(--boxel-sp));
      --pretui-toolline-gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
      --pretui-toolline-step: calc(
        var(--pretui-toolline-disc) + var(--pretui-toolline-gap)
      );
      display: grid;
      grid-template-columns: var(--pretui-toolline-disc) minmax(0, 1fr);
      column-gap: var(--pretui-toolline-gap);
      align-items: baseline;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      /* what happened reads in the settled ink; only a line still in
         progress takes the bright foreground */
      color: var(--pretui-toolrow-settled-ink, var(--foreground));
    }
    .pretui-toolline[data-tone='live'][data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--foreground);
    }
    /* the rail sits under the parent glyph's centre; the padding then
       carries this glyph to the parent's text edge */
    .pretui-toolline[data-depth][data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      box-shadow: inset 1px 0 0 var(--border);
      padding-inline-start: calc(
        var(--pretui-toolline-step) - var(--pretui-toolline-disc) / 2
      );
    }
    .pretui-toolline[data-depth='1'][data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      margin-inline-start: calc(var(--pretui-toolline-disc) / 2);
    }
    .pretui-toolline[data-depth='2'][data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      margin-inline-start: calc(
        var(--pretui-toolline-step) + var(--pretui-toolline-disc) / 2
      );
      box-shadow: inset 1px 0 0 var(--border-strong);
    }
    .pretui-toolline[data-depth='3'][data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      margin-inline-start: calc(
        var(--pretui-toolline-step) * 2 + var(--pretui-toolline-disc) / 2
      );
      box-shadow: inset 1px 0 0 var(--border-strong);
    }
    .pretui-toolline-glyph[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      text-align: center;
      font-size: var(--boxel-caption-font-size);
      color: var(--subtle-foreground);
    }
    /* done is ink with its check, not green; a state colours the mark
       only, and the line's words stay in the row's ink */
    .pretui-toolline[data-tone='done'] .pretui-toolline-glyph[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--foreground);
    }
    .pretui-toolline[data-tone='live'] .pretui-toolline-glyph[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--primary-ink);
    }
    .pretui-toolline[data-tone='failed'] .pretui-toolline-glyph[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--destructive-ink);
    }
    .pretui-toolline[data-tone='attention'] .pretui-toolline-glyph[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--attention-ink);
    }
    .pretui-toolline[data-tone='muted'] .pretui-toolline-text[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      color: var(--muted-foreground);
    }
    .pretui-toolline[data-mono] .pretui-toolline-text[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    .pretui-toolline-text[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* square, small, inside the text column: a look, not a preview */
    .pretui-toolline-thumb[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      display: block;
      width: 4.5rem;
      height: 4.5rem;
      margin-block: var(--boxel-sp-4xs) var(--boxel-sp-6xs);
      border-radius: var(--boxel-border-radius-xs);
      object-fit: cover;
      background-color: var(--inset);
      box-shadow: 0 0 0 1px var(--border);
    }
    .pretui-toolline-sub[data-scopedcss-5ed8ae86bf-30a9eb0f39] {
      display: block;
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
  }

  @layer PretComponent {
    .pretui-toolchange[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      display: grid;
      grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
      column-gap: var(--boxel-sp-sm);
      align-items: baseline;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-toolchange-label[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      color: var(--muted-foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-toolchange-values[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      min-width: 0;
      overflow-wrap: anywhere;
      /* a long value wraps to the width, up to three lines */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    /* the values are field values, so they quote in the mono voice */
    .pretui-toolchange-from[data-scopedcss-5ed8ae86bf-fcee37efbc],
    .pretui-toolchange-to[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    .pretui-toolchange-from[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      color: var(--muted-foreground);
      text-decoration-color: var(--subtle-foreground);
    }
    .pretui-toolchange-arrow[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      margin-inline: var(--boxel-sp-4xs);
      vertical-align: -0.1em;
      color: var(--subtle-foreground);
    }
    .pretui-toolchange-to[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      text-decoration: none;
      font-weight: 400;
      color: var(--foreground);
    }
    /* a value the assistant did not read plainly says so, in the
       attention ink: the reader checks it before keeping it */
    .pretui-toolchange-confidence[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      margin-inline-start: var(--boxel-sp-xs);
      padding: 0 var(--boxel-sp-4xs);
      border-radius: var(--boxel-border-radius-xs);
      box-shadow: inset 0 0 0 1px var(--attention);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--attention-ink);
    }
    .pretui-toolchange-count[data-scopedcss-5ed8ae86bf-fcee37efbc] {
      margin-inline-start: var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
    }
  }

  @layer PretComponent {
    /* the diff sits a step below the row's card, as the design board
       draws it: a darker well with no ring, a quiet file header, and
       the change tints mixed into that well */
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] {
      /* the well follows the theme: its muted surface by default, light
         on a light theme and dark on a dark one, so the code always
         reads in the foreground ink. A theme that wants a deeper well
         sets --pretui-code-well */
      --pretui-tooldiff-well: var(--pretui-code-well, var(--muted));
      margin-block: var(--boxel-sp-6xs) 0;
      min-width: 0;
      overflow-x: auto;
      /* square: inside a row, only the row rounds */
      border-radius: 0;
      background-color: var(--pretui-tooldiff-well);
      box-shadow: none;
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-head {
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--muted-foreground);
      box-shadow: 0 1px 0
        color-mix(in oklch, var(--border) 60%, transparent);
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-line {
      padding-inline: var(--boxel-sp-4xs) var(--boxel-sp-xs);
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-line[data-op='add'] {
      /* mixed in sRGB: oklch would carry a teal through blue on its
         way to a purple well, and an added line must read green */
      background-color: color-mix(
        in srgb,
        var(--success) 9%,
        var(--pretui-tooldiff-well)
      );
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-line[data-op='del'] {
      background-color: color-mix(
        in srgb,
        var(--destructive) 11%,
        var(--pretui-tooldiff-well)
      );
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-skip {
      background: none;
      padding-inline-start: var(--boxel-sp-xs);
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-toggle {
      padding-inline-start: var(--boxel-sp-xs);
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 600;
    }
    .pretui-tooldiff[data-scopedcss-5ed8ae86bf-0d529f03b5] .pretui-diff-receipt {
      box-shadow: none;
      padding: var(--boxel-sp-6xs) var(--boxel-sp-xs) var(--boxel-sp-4xs);
    }
  }

  @layer PretComponent {
    /* the receipt's one verb, as text: the settled ink at rest, the
       foreground under the pointer. 1.5rem tall, the smallest target
       a pointer is asked to hit */
    .pretui-toolaction[data-scopedcss-5ed8ae86bf-df7c897a61] {
      flex: none;
      min-height: 1.5rem;
      margin-inline-end: calc(-1 * var(--boxel-sp-xs));
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 600;
      color: var(--pretui-toolrow-settled-ink, var(--muted-foreground));
      cursor: pointer;
    }
    /* a text action says it acts under the pointer in the link ink */
    .pretui-toolaction[data-scopedcss-5ed8ae86bf-df7c897a61]:hover:not([aria-disabled='true']) {
      color: var(--primary-ink);
    }
    .pretui-toolaction[data-scopedcss-5ed8ae86bf-df7c897a61]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-toolaction-refusal[data-scopedcss-5ed8ae86bf-df7c897a61] {
      font-family: var(--font-sans);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--attention-ink);
    }
    .pretui-toolaction-refusal[data-scopedcss-5ed8ae86bf-df7c897a61]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-toolaction[aria-disabled='true'][data-scopedcss-5ed8ae86bf-df7c897a61] {
      cursor: default;
      color: var(--subtle-foreground);
    }
  }

  @layer PretComponent {
    /* the verb is no kicker: the row's icon (toolIcon(name, verb))
       already says what kind of call this is, so the word is kept for a
       screen reader only. Density has no label of its own either: it
       is the row's frame (steps plain, the rest boxed). */
    .pretui-toolrow-verb[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .pretui-toolrow-disc[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      width: var(--pretui-toolrow-disc, var(--boxel-sp));
      height: var(--pretui-toolrow-disc, var(--boxel-sp));
      display: grid;
      place-items: center;
      flex: none;
      margin-block-start: calc(
        (
            var(--boxel-ui-label-line-height) -
              var(--pretui-toolrow-disc, var(--boxel-sp))
          ) /
          2
      );
      /* the tool's icon in the quiet ink; a failure or a question tints
         it, and the words beside it say which */
      color: var(--subtle-foreground);
    }
    .pretui-toolrow-icon[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      display: block;
      stroke-width: 1.75;
    }
    .pretui-toolrow-disc[data-tone='failed'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--destructive-ink);
    }
    .pretui-toolrow-disc[data-tone='attention'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--attention-ink);
    }
    /* titles can be a whole sentence (an assistant's description of the
       call), so the title shrinks before the status does: the state in
       words must always stay visible */
    .pretui-toolrow-title[data-register='machine'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    /* the reader's answer, kept in the settled title as the thing they
       picked, not as prose */
    .pretui-toolrow-choice[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      flex: none;
      display: inline-flex;
      align-items: center;
      max-width: 40%;
      height: 1.125rem;
      padding: 0 var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      box-shadow: inset 0 0 0 1px var(--border);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-toolrow-title[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      font-size: var(
        --pretui-toolrow-title-size,
        var(--boxel-ui-label-font-size)
      );
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      flex: 0 1 auto;
      min-width: 3em;
      /* one line: a column of calls stays short, and a long title runs
         off its end (whole on hover, and wrapped once the row is open) */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* settled work says so in a quieter ink, never by fading: a screen
       of history must stay readable */
    .pretui-toolrow-title[data-tone='done'][data-scopedcss-5ed8ae86bf-352afe6ec1],
    .pretui-toolrow-title[data-tone='idle'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      font-weight: 400;
      color: var(--pretui-toolrow-settled-ink, var(--muted-foreground));
    }
    /* the state in the words: a running call's title shimmers, a queued
       one waits dimmed, a canceled or superseded one is struck */
    .pretui-toolrow-title[data-tone='running'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      background: linear-gradient(
          90deg,
          var(--foreground) 0%,
          var(--foreground) 40%,
          color-mix(in oklch, var(--foreground) 45%, transparent) 50%,
          var(--foreground) 60%,
          var(--foreground) 100%
        )
        0 0 / 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: pretui-toolrow-shimmer-data-scopedcss-5ed8ae86bf-352afe6ec1 2.4s linear infinite;
    }
    @keyframes pretui-toolrow-shimmer-data-scopedcss-5ed8ae86bf-352afe6ec1 {
      from {
        background-position: 100% 0;
      }
      to {
        background-position: 0% 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-toolrow-title[data-tone='running'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
        animation: none;
        background: none;
        color: var(--foreground);
      }
    }
    /* queued: the quietest ink, never faded with opacity */
    .pretui-toolrow-title[data-state='pending'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--subtle-foreground);
    }
    .pretui-toolrow-title[data-state='canceled'][data-scopedcss-5ed8ae86bf-352afe6ec1],
    .pretui-toolrow-title[data-state='superseded'][data-scopedcss-5ed8ae86bf-352afe6ec1],
    .pretui-toolrow-title[data-state='reverted'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      text-decoration: line-through;
      text-decoration-color: color-mix(
        in oklch,
        currentColor 55%,
        transparent
      );
    }
    .pretui-toolrow-subtitle[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      min-width: 0;
      flex: 0 1 auto;
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
      color: var(--muted-foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-toolrow-source[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      flex: none;
      --pretui-chip-font-size: var(--boxel-caption-font-size);
    }
    .pretui-toolrow-status[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      margin-inline-start: auto;
      /* a caption line centred on the title's first line */
      margin-block-start: 1px;
      flex: none;
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
      font-variant-numeric: tabular-nums;
    }
    /* a state colours the word, never the row */
    .pretui-toolrow-status[data-tone='attention'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--attention-ink);
      font-weight: 600;
    }
    .pretui-toolrow-status[data-tone='failed'][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--destructive-ink);
      font-weight: 600;
    }
    .pretui-toolrow-duration[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      color: var(--muted-foreground);
      font-weight: 400;
    }
    .pretui-toolrow-chevron[data-scopedcss-5ed8ae86bf-352afe6ec1] {
      flex: none;
      width: 0.375rem;
      height: 0.375rem;
      margin-block-start: 0.375rem;
      border-inline-end: 1.5px solid var(--subtle-foreground);
      border-block-end: 1.5px solid var(--subtle-foreground);
      transform: rotate(-45deg);
      transition: transform 160ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    .pretui-toolrow-chevron[data-open][data-scopedcss-5ed8ae86bf-352afe6ec1] {
      transform: rotate(45deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-toolrow-chevron[data-scopedcss-5ed8ae86bf-352afe6ec1] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    /* ── one grid ─────────────────────────────────────────────────
       Every part of a row hangs off three numbers: the inset, the
       disc, and the gap after it. Everything under the header starts
       at the text column (inset + disc + gap), so the progress line,
       the rows, the body, the gate, the result and the receipt all
       share one left edge with the title, and a nested ToolLine puts
       its own glyph on that edge. Framed rows widen the inset and
       nothing else, so the parts recombine the same way in both. */
    /* every row, framed or not, hangs its inset outside the text edge:
       its disc sits in the transcript's one mark column (with the
       speaker's initial, the system lines' icons and the fold row's
       check) and its title on the one title edge, so a column of steps
       and boxed calls never zig-zags. A frame is drawn in the gutter */
    .pretui-toolrow[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      margin-inline: calc(-1 * var(--pretui-toolrow-inset));
    }
    .pretui-toolrow[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      --pretui-toolrow-inset: var(--boxel-sp-xs);
      --pretui-toolrow-disc: var(--boxel-sp);
      --pretui-toolrow-gap: var(--boxel-sp-xs);
      --pretui-toolrow-text: calc(
        var(--pretui-toolrow-inset) + var(--pretui-toolrow-disc) +
          var(--pretui-toolrow-gap)
      );
      display: flex;
      flex-direction: column;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      border-radius: var(--boxel-border-radius-sm);
      /* one rounded box per row: it clips what meets its edge (the
         header's hover, the receipt's rule), and nothing inside it
         rounds again */
      overflow: clip;
      /* the row answers its own width, not the window's: the same row
         in a 320px side panel and a 680px one reads right in both */
      container-type: inline-size;
      container-name: pretui-toolrow;
      /* off-screen rows skip layout and paint; the browser remembers each
         row's last size, so the scrollbar does not jump */
      content-visibility: auto;
      contain-intrinsic-size: auto 2rem;
    }
    /* the prominence ramp: settled work recedes, the live frontier and
       anything needing the reader stay at full strength. Off unless a
       container sets the token; hover or focus brings a row back. */
    .pretui-toolrow-row[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      transition: opacity 200ms linear;
    }
    .pretui-toolrow[data-recede] > .pretui-toolrow-row[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      opacity: var(--pretui-recede-opacity, 1);
    }
    .pretui-toolrow[data-recede]:is(:hover, :focus-within)
      > .pretui-toolrow-row[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      opacity: 1;
    }
    /* an open row has room to say all of it, and a row that needs the
       reader says all of what it asks: its title wraps */
    .pretui-toolrow:is([data-open='true'], [data-tone='attention'])
      > .pretui-toolrow-row[data-scopedcss-5ed8ae86bf-599f97bdd3]
      .pretui-toolrow-title {
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .pretui-toolrow-row[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      min-width: 0;
    }
    /* everything in the header sits on the title's first line, so a
       title that wraps keeps its icon, status and chevron level with
       the words they belong to: the block padding plus one label
       line is the 2rem row */
    .pretui-toolrow-header[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: flex-start;
      gap: var(--pretui-toolrow-gap);
      padding: 0.4375rem var(--pretui-toolrow-inset);
      min-height: 2rem;
      box-sizing: border-box;
      border: 0;
      /* square: the row is the one box that rounds, and clips this */
      border-radius: 0;
      background-color: transparent;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-align: start;
    }
    button.pretui-toolrow-header[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      cursor: pointer;
    }
    button.pretui-toolrow-header[data-scopedcss-5ed8ae86bf-599f97bdd3]:hover {
      background-color: var(--inset);
    }
    /* both header forms: the static one takes focus when a gate hands
       it back on a row with no body */
    .pretui-toolrow-header[data-scopedcss-5ed8ae86bf-599f97bdd3]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    /* focus handed over after a click on the gate: kept for the next
       Tab, but drawn only for a keyboard reader */
    .pretui-toolrow-header[data-quiet-focus][data-scopedcss-5ed8ae86bf-599f97bdd3]:focus-visible {
      outline: none;
    }
    .pretui-toolrow-actions[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      flex: none;
      padding-inline-end: var(--pretui-toolrow-inset);
    }
    /* a failure's first line reads in ink: the status word and the
       mark carry the state, never red text */
    .pretui-toolrow-errorline[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      padding: 0 var(--pretui-toolrow-inset) var(--boxel-sp-xs)
        var(--pretui-toolrow-text);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-toolrow-body[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-xs);
      padding: var(--boxel-sp-6xs) var(--pretui-toolrow-inset)
        var(--boxel-sp-xs) var(--pretui-toolrow-text);
      min-width: 0;
    }
    /* the sections under the header, in reading order. Each owns its
       bottom spacing, so any subset stacks evenly. */
    .pretui-toolrow-progress[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-4xs);
      padding: 0 var(--pretui-toolrow-inset) var(--boxel-sp-xs)
        var(--pretui-toolrow-text);
    }
    .pretui-toolrow-progress-label[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
    }
    .pretui-toolrow-progress-track[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: block;
      height: 0.1875rem;
      border-radius: var(--boxel-border-radius-2xs);
      overflow: hidden;
      background-color: var(--inset);
    }
    .pretui-toolrow-progress-fill[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: block;
      height: 100%;
      background-color: var(--primary);
      transition: width 200ms
        var(--pretui-ease, cubic-bezier(0.2, 0, 0.2, 1));
    }
    .pretui-toolrow-rows[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-4xs);
      padding: 0 var(--pretui-toolrow-inset) var(--boxel-sp-xs)
        var(--pretui-toolrow-text);
      min-width: 0;
    }
    .pretui-toolrow-gate[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-xs);
      margin: 0 var(--pretui-toolrow-inset) var(--boxel-sp-xs)
        var(--pretui-toolrow-text);
      padding: var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-sm);
      /* the question is a surface, not an alarm: the row's status word
         and mark carry the attention colour */
      background-color: var(--inset);
      box-shadow: inset 0 0 0 1px var(--border);
    }
    /* a framed row is already the box (and ringed in the attention
       colour while it needs the reader): its gate draws no second box,
       it is the row's next lines. A gate waiting on someone else, in an
       idle row, gets no attention box either */
    .pretui-toolrow[data-framed] > .pretui-toolrow-gate[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      padding: 0;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none;
    }
    .pretui-toolrow-result[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      padding: 0 var(--pretui-toolrow-inset) var(--boxel-sp-xs)
        var(--pretui-toolrow-text);
      min-width: 0;
    }
    .pretui-toolrow-receipt[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.875rem;
      padding: 0 var(--pretui-toolrow-inset) 0 var(--pretui-toolrow-text);
      box-shadow: 0 -1px 0 var(--border);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
    .pretui-toolrow-receipt-text[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pretui-toolrow-receipt-action[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      flex: none;
      font-family: var(--font-sans);
    }
    /* three widths, one grid. Narrow (a 320px panel): the subtitle and
       the duration step aside so the title and its state keep their
       room; the verb stays, it says what kind of call this is. Wide
       (680px): the subtitle may run longer. The grid itself never
       changes, so nothing under the header moves. */
    @container pretui-toolrow (max-width: 359px) {
      .pretui-toolrow-subtitle[data-scopedcss-5ed8ae86bf-599f97bdd3],
      .pretui-toolrow-status:not([data-timed]) .pretui-toolrow-duration[data-scopedcss-5ed8ae86bf-599f97bdd3] {
        display: none;
      }
      /* narrow, the grid gives its width back to the words: the small
         inset framed or not, and a smaller gap. Every part reads these,
         so they move together */
      .pretui-toolrow > *[data-scopedcss-5ed8ae86bf-599f97bdd3] {
        --pretui-toolrow-inset: var(--boxel-sp-xs);
        --pretui-toolrow-gap: var(--boxel-sp-2xs);
        --pretui-toolrow-text: calc(
          var(--pretui-toolrow-inset) + var(--pretui-toolrow-disc) +
            var(--pretui-toolrow-gap)
        );
      }
      /* a completed call's title in the settled ink already reads as
         finished, so its word steps aside. The other done states (kept,
         delivered, partly kept) keep theirs, and a time always stays */
      .pretui-toolrow-status[data-state='completed'][data-scopedcss-5ed8ae86bf-599f97bdd3]:not([data-timed]) {
        display: none;
      }
    }
    @container pretui-toolrow (min-width: 600px) {
      .pretui-toolrow-subtitle[data-scopedcss-5ed8ae86bf-599f97bdd3] {
        flex-shrink: 0.4;
      }
    }
    /* Glimmer passes a named block or not, never "sometimes", so a host
       whose gate or rows are conditional passes the block and lets its
       content come and go. A section that renders no element takes no
       space: no empty box, no stray gap. */
    .pretui-toolrow-actions[data-scopedcss-5ed8ae86bf-599f97bdd3]:not(:has(:not([hidden]))),
    .pretui-toolrow-receipt[data-scopedcss-5ed8ae86bf-599f97bdd3]:has(.pretui-toolrow-receipt-text:empty):not(
        :has(.pretui-toolrow-receipt-action *)
      ),
    .pretui-toolrow-rows[data-scopedcss-5ed8ae86bf-599f97bdd3]:not(:has(*)),
    .pretui-toolrow-gate[data-scopedcss-5ed8ae86bf-599f97bdd3]:not(:has(*)),
    .pretui-toolrow-result[data-scopedcss-5ed8ae86bf-599f97bdd3]:not(:has(*)) {
      display: none;
    }
    /* framed: the same grid with a wider inset, in a box whose ring
       carries the state. A framed row closes with its own padding when
       it has no receipt to close it. */
    .pretui-toolrow[data-framed][data-scopedcss-5ed8ae86bf-599f97bdd3] {
      --pretui-toolrow-inset: var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--card);
      box-shadow: 0 0 0 1px var(--border);
      overflow: hidden;
    }
    /* a sliver above the header and below the last section, added to
       each section's own bottom spacing. A receipt is the box's floor,
       so it takes the sliver back and sits flush */
    .pretui-toolrow[data-framed][data-scopedcss-5ed8ae86bf-599f97bdd3] {
      --_toolrow-edge: var(--boxel-sp-6xs);
      padding-block: var(--_toolrow-edge);
    }
    .pretui-toolrow[data-framed] > .pretui-toolrow-receipt[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      margin-block-end: calc(-1 * var(--_toolrow-edge));
    }
    /* a receipt with neither words nor an action takes no line */
    .pretui-toolrow-receipt[data-scopedcss-5ed8ae86bf-599f97bdd3]:not(
        :has(.pretui-toolrow-receipt-text:not(:empty))
      ):not(:has(.pretui-toolrow-receipt-action *)) {
      display: none;
    }
    /* a framed row with nothing under its header (a settled call whose
       detail is closed) is one line: it reads as a plain row, so a
       column of finished calls does not become a column of boxes. The
       frame returns as soon as anything shows under the header */
    .pretui-toolrow[data-framed][data-scopedcss-5ed8ae86bf-599f97bdd3]:not([data-open='true']):not(
        [data-tone='attention'],
        [data-tone='failed'],
        [data-tone='running']
      ):not(
        :has(
          > .pretui-toolrow-progress,
          > .pretui-toolrow-rows > *,
          > .pretui-toolrow-gate > *,
          > .pretui-toolrow-result > *,
          > .pretui-toolrow-receipt .pretui-toolrow-receipt-text:not(:empty)
        )
      ) {
      --pretui-toolrow-inset: var(--boxel-sp-xs);
      background-color: transparent;
      box-shadow: none;
      padding-block: 0;
    }
    /* a framed row's ring stays the border in every state: a state
       colours the mark and the word, never the row */
    .pretui-toolrow[data-framed] button.pretui-toolrow-header[data-scopedcss-5ed8ae86bf-599f97bdd3]:hover {
      background-color: var(--hover);
    }
    /* the whole failure is pasteable text: mono, in ink, on the inset
       well, not a red box */
    .pretui-toolrow-error[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      margin: 0;
      padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-xs);
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      color: var(--foreground);
      background-color: var(--inset);
    }
    .pretui-toolrow-live[data-scopedcss-5ed8ae86bf-599f97bdd3] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @layer PretComponent {
    .pretui-turnchanges[data-scopedcss-40a4bd08ef-b99c4343be] {
      display: grid;
      gap: var(--boxel-sp-6xs);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-turnchanges-head[data-scopedcss-40a4bd08ef-b99c4343be] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.75rem;
    }
    .pretui-turnchanges-summary[data-scopedcss-40a4bd08ef-b99c4343be] {
      font-weight: 600;
      color: var(--foreground);
    }
    .pretui-turnchanges-review[data-scopedcss-40a4bd08ef-b99c4343be] {
      margin-inline-start: auto;
      height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border-strong);
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      font-weight: 400;
      color: var(--foreground);
      cursor: pointer;
    }
    .pretui-turnchanges-review[data-scopedcss-40a4bd08ef-b99c4343be]:hover {
      color: var(--primary-ink);
    }
    .pretui-turnchanges-list[data-scopedcss-40a4bd08ef-b99c4343be] {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pretui-turnchanges-file[data-scopedcss-40a4bd08ef-b99c4343be] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      width: 100%;
      min-height: 1.75rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      text-align: start;
      color: var(--pretui-toolrow-settled-ink, var(--foreground));
      cursor: pointer;
    }
    .pretui-turnchanges-file[data-scopedcss-40a4bd08ef-b99c4343be]:hover,
    .pretui-turnchanges-file[aria-current='true'][data-scopedcss-40a4bd08ef-b99c4343be] {
      background-color: var(--hover);
      color: var(--foreground);
    }
    .pretui-turnchanges-file[data-scopedcss-40a4bd08ef-b99c4343be]:focus-visible,
    .pretui-turnchanges-review[data-scopedcss-40a4bd08ef-b99c4343be]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* the status letter is the row's mark, not a string to paste: sans */
    .pretui-turnchanges-letter[data-scopedcss-40a4bd08ef-b99c4343be] {
      width: 0.75rem;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 600;
      color: var(--muted-foreground);
    }
    .pretui-turnchanges-file[data-status='added']
      .pretui-turnchanges-letter[data-scopedcss-40a4bd08ef-b99c4343be] {
      color: var(--success-ink);
    }
    .pretui-turnchanges-file[data-status='deleted']
      .pretui-turnchanges-letter[data-scopedcss-40a4bd08ef-b99c4343be] {
      color: var(--destructive-ink);
    }
    .pretui-turnchanges-path[data-scopedcss-40a4bd08ef-b99c4343be] {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* a path is a pasteable string: mono at the data size */
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    .pretui-turnchanges-file[data-state='reverted']
      .pretui-turnchanges-path[data-scopedcss-40a4bd08ef-b99c4343be] {
      text-decoration: line-through;
      color: var(--muted-foreground);
    }
    .pretui-turnchanges-state[data-scopedcss-40a4bd08ef-b99c4343be] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
    }
    /* kept is done: ink with a check, not green */
    .pretui-turnchanges-file[data-state='kept'] .pretui-turnchanges-state[data-scopedcss-40a4bd08ef-b99c4343be] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      color: var(--foreground);
    }
  }

  @layer PretComponent {
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] {
      max-width: var(--pretui-prose-measure, 62ch);
      line-height: var(
        --pretui-prose-leading,
        var(--boxel-body-line-height)
      );
      overflow-wrap: break-word;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] p {
      margin: 0 0 var(--boxel-sp-sm);
      text-wrap: pretty;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f]
      :is(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
      max-inline-size: var(--pretui-prose-block-measure, none);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] code {
      font-family: var(--font-mono);
      font-size: var(--pretui-prose-code-size, 0.92em);
      background-color: var(--inset);
      padding: var(--boxel-sp-6xs) var(--boxel-sp-3xs);
      border-radius: var(--boxel-border-radius-xs);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
    }

    /* Headings: a step scale off the body size, tight leading, balanced
       wrap. Real heading styles remove the temptation to fake a heading
       with a bold paragraph, which loses the document's structure. */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] :is(h1, h2, h3, h4, h5, h6) {
      margin: var(--boxel-sp-lg) 0
        var(--pretui-prose-heading-gap, var(--boxel-sp-2xs));
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
      text-wrap: balance;
      color: var(--foreground);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] h1 {
      font-size: var(--pretui-prose-h1-size, 1.6em);
      line-height: var(--pretui-prose-h1-leading, 1.25);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] h2 {
      font-size: var(--pretui-prose-h2-size, 1.35em);
      line-height: var(--pretui-prose-h2-leading, 1.25);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] h3 {
      font-size: var(--pretui-prose-h3-size, 1.15em);
      line-height: var(--pretui-prose-h3-leading, 1.25);
      letter-spacing: var(--pretui-prose-h3-tracking, normal);
      text-transform: var(--pretui-prose-h3-case, none);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] :is(h4, h5, h6) {
      font-size: var(--pretui-prose-h4-size, 1em);
      line-height: var(--pretui-prose-h4-leading, 1.25);
    }

    /* Lists on the spacing scale, nested lists without extra gap. */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] ul,
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] ol {
      margin: 0 0 var(--boxel-sp-sm);
      padding-inline-start: 1.4em;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] li {
      margin: 0.2em 0;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] li > ul,
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] li > ol {
      margin-block: 0.2em 0;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] li::marker {
      color: var(--muted-foreground);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] li > p {
      margin: 0;
    }

    /* Links: the primary hue's ink, which the theme guarantees as text,
       underlined so a link is not told apart by colour alone (WCAG
       1.4.1). */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] a {
      /* a link is words in the sentence: it wraps like them, even where
         a host's reset makes anchors inline-block */
      display: inline;
      color: var(--primary-ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] a:hover {
      text-decoration-thickness: 2px;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] a:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: var(--boxel-border-radius-2xs);
    }

    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] blockquote {
      margin: 0 0 var(--boxel-sp-sm);
      padding: 0 0 0 var(--boxel-sp-sm);
      box-shadow: inset 2px 0 0 var(--border);
      color: var(--muted-foreground);
    }

    /* Preformatted blocks scroll inside themselves; the page never does. */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] pre {
      margin: 0 0 var(--boxel-sp-sm);
      padding: var(--boxel-sp-2xs) var(--boxel-sp-sm);
      overflow-x: auto;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      font-size: var(--pretui-prose-pre-size, 0.9em);
      line-height: var(--pretui-prose-pre-leading, 1.5);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] pre code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
      font-size: inherit;
    }

    /* A table wider than the measure scrolls itself rather than the page. */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      margin: 0 0 var(--boxel-sp-sm);
      border-collapse: collapse;
      font-size: var(--pretui-prose-table-size, 0.94em);
      line-height: var(--pretui-prose-table-leading, inherit);
      font-variant-numeric: tabular-nums;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] th,
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] td {
      padding: 0.35em 0.75em;
      text-align: start;
      vertical-align: top;
      box-shadow: inset 0 -1px 0 var(--border);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] th {
      font-size: var(--pretui-prose-th-size, inherit);
      line-height: var(--pretui-prose-th-leading, inherit);
      font-weight: 600;
      letter-spacing: var(--pretui-prose-th-tracking, normal);
      text-transform: var(--pretui-prose-th-case, none);
      vertical-align: var(--pretui-prose-th-align, top);
      color: var(--pretui-prose-th-ink, var(--foreground));
      box-shadow: inset 0 -1px 0 var(--muted-foreground);
    }

    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] hr {
      margin: var(--boxel-sp-lg) 0;
      border: 0;
      height: 1px;
      background-color: var(--border);
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] img {
      max-width: 100%;
      height: auto;
      border-radius: var(--boxel-border-radius-sm);
    }

    /* The surface owns its outer edges: no stray margin above the first
       block or below the last. */
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] >  :first-child {
      margin-block-start: 0;
    }
    .pretui-prose[data-scopedcss-a9be8abafb-aba2f5969f] >  :last-child {
      margin-block-end: 0;
    }
  }

  @layer PretComponent, PretComposite;
  @layer PretComposite {
    .pretui-md-surface[data-scopedcss-f4b6a9b97f-51532911fe] {
      /* the whole answer is as wide as the panel, so code and tables
         can use it; the line length is capped per text block instead */
      --pretui-prose-measure: none;
      --pretui-prose-block-measure: 68ch;
      --pretui-prose-leading: var(--boxel-body-line-height);
      /* the heading ladder: h1 at the small heading size, h2 at reading
         size, h3 at UI size in tracked caps; all 600 */
      --pretui-prose-heading-gap: var(--boxel-sp-xs);
      --pretui-prose-h1-size: var(--boxel-font-size-sm);
      --pretui-prose-h1-leading: var(--boxel-line-height-sm);
      --pretui-prose-h2-size: var(--boxel-body-font-size);
      --pretui-prose-h2-leading: var(--boxel-body-line-height);
      --pretui-prose-h3-size: var(--boxel-ui-label-font-size);
      --pretui-prose-h3-leading: var(--boxel-ui-label-line-height);
      --pretui-prose-h3-tracking: 0.04em;
      --pretui-prose-h3-case: uppercase;
      --pretui-prose-h4-size: var(--boxel-ui-label-font-size);
      --pretui-prose-h4-leading: var(--boxel-ui-label-line-height);
      /* code is a pasteable string: mono at the data size */
      --pretui-prose-code-size: var(--boxel-font-size-xs);
      --pretui-prose-pre-size: var(--boxel-font-size-xs);
      --pretui-prose-pre-leading: var(--boxel-line-height-xs);
      /* table cells read at reading size; headers are caption in
         tracked caps, the only other tracked caps an answer has */
      --pretui-prose-table-size: var(--boxel-body-font-size);
      --pretui-prose-table-leading: var(--boxel-body-line-height);
      --pretui-prose-th-size: var(--boxel-caption-font-size);
      --pretui-prose-th-leading: var(--boxel-caption-line-height);
      --pretui-prose-th-tracking: 0.04em;
      --pretui-prose-th-case: uppercase;
      --pretui-prose-th-align: bottom;
      --pretui-prose-th-ink: var(--muted-foreground);
      min-width: 0;
      font-size: var(--boxel-body-font-size);
      line-height: var(--boxel-body-line-height);
      color: var(--foreground);
    }
  }

  @layer PretComponent, PretComposite;
  @layer PretComposite {
    /* the answer's typography is MarkdownSurface's: the reading voice,
       the heading ladder, code and tables; this keeps the blocks' own
       rhythm and the stream's marks */
    .pretui-md[data-scopedcss-6c75bdfb39-361346dfdb] {
      min-width: 0;
    }
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb] {
      min-width: 0;
    }
    /* Each block wraps the HTML its renderer returned and adds no
       spacing of its own: the block has no padding or border, so its
       children's margins collapse through it and Prose's margins
       between paragraphs and around headings hold exactly as in a
       static render. Prose zeroes the outer edges of its own first and
       last child, which here are blocks, so the same edges are zeroed
       one level down. */
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb]:first-child >  :first-child {
      margin-block-start: 0;
    }
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb]:last-child >  :last-child {
      margin-block-end: 0;
    }
    .pretui-md-block[data-kind='code'][data-scopedcss-6c75bdfb39-361346dfdb] {
      margin-block: var(--boxel-sp-sm);
    }
    .pretui-md-block[data-kind='code'][data-scopedcss-6c75bdfb39-361346dfdb]:first-child {
      margin-block-start: 0;
    }
    .pretui-md-block[data-kind='code'][data-scopedcss-6c75bdfb39-361346dfdb]:last-child {
      margin-block-end: 0;
    }
    /* an unconfirmed relative link reads as the plain text it is */
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb] [data-markdown-link='pending'] {
      color: inherit;
      text-decoration: none;
      cursor: text;
    }
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb] code[data-markdown-link='resolved'] {
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: var(--muted-foreground);
      text-underline-offset: 0.18em;
    }
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb]
      code[data-markdown-link='resolved']:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb] .pretui-md-caret {
      display: inline-block;
      width: 0.5em;
      height: 1em;
      margin-inline-start: var(--boxel-sp-6xs);
      vertical-align: text-bottom;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: color-mix(in oklch, var(--foreground) 60%, transparent);
      animation: pretui-md-caret-data-scopedcss-6c75bdfb39-361346dfdb 1s steps(2, start) infinite;
    }
    @keyframes pretui-md-caret-data-scopedcss-6c75bdfb39-361346dfdb {
      to {
        visibility: hidden;
      }
    }
    /* math still arriving is its source, a pasteable string, in the
       quieter ink rather than faded */
    .pretui-md-math-pending[data-scopedcss-6c75bdfb39-361346dfdb] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
      color: var(--muted-foreground);
    }
    .pretui-md-live[data-scopedcss-6c75bdfb39-361346dfdb] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-md-block[data-scopedcss-6c75bdfb39-361346dfdb] .pretui-md-caret {
        animation: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-trace[data-scopedcss-72077c874f-37920d1981] {
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-sr[data-scopedcss-72077c874f-37920d1981] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .pretui-trace-head[data-scopedcss-72077c874f-37920d1981] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.75rem;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      margin: calc(-1 * var(--boxel-sp-4xs)) calc(-1 * var(--boxel-sp-xs));
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-trace-head[data-scopedcss-72077c874f-37920d1981]:hover {
      background-color: var(--hover);
    }
    .pretui-trace-head[data-scopedcss-72077c874f-37920d1981]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-trace-spark[data-scopedcss-72077c874f-37920d1981] {
      flex: none;
      color: var(--subtle-foreground);
    }
    .pretui-trace-head[data-working] .pretui-trace-spark[data-scopedcss-72077c874f-37920d1981] {
      color: var(--muted-foreground);
    }
    .pretui-trace-label[data-scopedcss-72077c874f-37920d1981] {
      font-weight: 600;
    }
    /* Law 5: the sweep says "still going" and nothing else animates */
    .pretui-trace-label[data-shimmer][data-scopedcss-72077c874f-37920d1981] {
      background: linear-gradient(
        100deg,
        var(--muted-foreground) 30%,
        var(--foreground) 48%,
        var(--muted-foreground) 66%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: pretui-trace-shimmer-data-scopedcss-72077c874f-37920d1981 2.2s linear infinite;
    }
    @keyframes pretui-trace-shimmer-data-scopedcss-72077c874f-37920d1981 {
      from {
        background-position: 150% 0;
      }
      to {
        background-position: -150% 0;
      }
    }
    .pretui-trace-chev[data-scopedcss-72077c874f-37920d1981] {
      flex: none;
      color: var(--subtle-foreground);
      transition: transform 300ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    .pretui-trace-head[aria-expanded='true'] .pretui-trace-chev[data-scopedcss-72077c874f-37920d1981] {
      transform: rotate(180deg);
    }
    .pretui-trace-rail[data-scopedcss-72077c874f-37920d1981] {
      position: relative;
      margin: var(--boxel-sp-3xs) 0 0 var(--boxel-sp-3xs);
      padding-left: var(--boxel-sp);
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-6xs);
    }
    .pretui-trace-rail[data-scopedcss-72077c874f-37920d1981]::before {
      content: '';
      position: absolute;
      left: var(--boxel-sp-5xs);
      top: var(--boxel-sp-4xs);
      bottom: var(--boxel-sp-3xs);
      width: 1px;
      background-color: var(--border);
    }
    .pretui-trace-row[data-scopedcss-72077c874f-37920d1981] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.625rem;
      padding: var(--boxel-sp-6xs) var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-sm);
      color: var(--foreground);
    }
    .pretui-trace-row[data-scopedcss-72077c874f-37920d1981]:hover {
      background-color: var(--hover);
    }
    .pretui-trace-row[data-kind='query'][data-scopedcss-72077c874f-37920d1981] {
      color: var(--muted-foreground);
    }
    .pretui-trace-row > svg[data-scopedcss-72077c874f-37920d1981] {
      flex: none;
    }
    .pretui-trace-check[data-scopedcss-72077c874f-37920d1981] {
      color: var(--subtle-foreground);
    }
    .pretui-trace-primary[data-scopedcss-72077c874f-37920d1981] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 400;
    }
    .pretui-trace-primary[data-wrap][data-scopedcss-72077c874f-37920d1981] {
      white-space: normal;
      color: var(--muted-foreground);
    }
    .pretui-trace-sec[data-scopedcss-72077c874f-37920d1981] {
      margin-left: auto;
      flex: none;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
    /* a machine value is a pasteable string: mono at the data size */
    .pretui-trace-sec[data-mono][data-scopedcss-72077c874f-37920d1981] {
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
    }
    /* the counts are figures, not strings to paste: sans, tabular */
    .pretui-trace-diff[data-scopedcss-72077c874f-37920d1981] {
      flex: none;
      display: inline-flex;
      gap: var(--boxel-sp-4xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
    }
    .pretui-trace-add[data-scopedcss-72077c874f-37920d1981] {
      color: var(--success-ink);
    }
    .pretui-trace-del[data-scopedcss-72077c874f-37920d1981] {
      color: var(--destructive-ink);
    }
    /* the stagger is a precomputed delay, retriggered by the open flip.
       The flag lives on the rail, not on Collapse's own element: a
       scoped stylesheet may only address elements authored in ITS template,
       so reaching into a child component's markup would silently match
       nothing (and `:deep()` is not allowed in the kit). */
    .pretui-trace-rail[data-open] .pretui-trace-row[data-scopedcss-72077c874f-37920d1981] {
      animation: pretui-trace-in-data-scopedcss-72077c874f-37920d1981 320ms var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1))
        var(--pretui-trace-delay, 0ms) both;
    }
    @keyframes pretui-trace-in-data-scopedcss-72077c874f-37920d1981 {
      from {
        opacity: 0;
        transform: translateY(var(--boxel-sp-4xs));
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-trace-label[data-shimmer][data-scopedcss-72077c874f-37920d1981] {
        animation: none;
        background-image: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: var(--foreground);
      }
      .pretui-trace-chev[data-scopedcss-72077c874f-37920d1981] {
        transition: none;
      }
      .pretui-trace-rail[data-open] .pretui-trace-row[data-scopedcss-72077c874f-37920d1981] {
        animation: none;
      }
    }
  }

  .code-block-actions[data-scopedcss-f2e6b870ae-21600371c8] {
    height: 45px;
    padding: var(--boxel-sp-xs) var(--boxel-sp);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }

  .hide-info-button[data-scopedcss-159709351d-f242ec39b4] {
    --boxel-button-padding: 0 var(--boxel-sp-xxxs);
    --boxel-button-min-width: auto;
    --boxel-button-font: 600 var(--boxel-font-xs);
  }
  .hide-info-button.compact[data-scopedcss-159709351d-f242ec39b4] {
    order: 3;
    margin-left: auto;
  }
  .view-info-button.compact[data-scopedcss-159709351d-f242ec39b4] {
    --boxel-icon-button-width: 1.5rem;
    --boxel-icon-button-height: 1.5rem;
  }
  .view-info-tooltip.compact[data-scopedcss-159709351d-f242ec39b4] {
    order: 3;
    margin-left: auto;
  }

  .code-block-header[data-scopedcss-c76a70bc4c-4ed91528ca] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--boxel-sp-xxxs);
    align-items: center;
    min-height: 3.125rem; /* 50px */
    padding: var(--boxel-sp-sm);
    background-color: var(--boxel-650);
    color: var(--boxel-light);
    /* the below font-smoothing options are only recommended for light-colored
      text on dark background (otherwise not good for accessibility) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .code-block-header.compact[data-scopedcss-c76a70bc4c-4ed91528ca] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    min-height: auto;
    padding: 2px 0;
    background-color: transparent;
  }
  .tool-description[data-scopedcss-c76a70bc4c-4ed91528ca] {
    font: 400 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    line-height: 1.5em;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .code-block-header.compact .tool-description[data-scopedcss-c76a70bc4c-4ed91528ca] {
    order: 2;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
  }
  .actions[data-scopedcss-c76a70bc4c-4ed91528ca] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-4xs);
  }
  .code-block-header.compact .actions[data-scopedcss-c76a70bc4c-4ed91528ca] {
    display: contents;
    margin-left: 0;
  }
  .tool-action[data-scopedcss-c76a70bc4c-4ed91528ca] {
    margin-left: var(--boxel-sp-5xs);
  }
  /* Sized like the apply button it sits beside, outlined in light so
    it reads on the dark header. The header class outranks the button
    kind's own colors. */
  .code-block-header .secondary-action[data-scopedcss-c76a70bc4c-4ed91528ca] {
    --boxel-button-color: transparent;
    --boxel-button-text-color: var(--boxel-light);
    --boxel-button-border: 1px solid var(--boxel-light);
    --boxel-button-font: 600 var(--boxel-font-xs);
    padding: 3px 10px;
    min-width: inherit;
    min-height: inherit;
    height: 1.5rem;
    border-radius: 100px;
    margin-left: var(--boxel-sp-5xs);
  }

  .code-block[data-scopedcss-4fbb0adcfc-6ce99938e6] {
    --code-block-max-height: 15.625rem; /* 250px */
    background-color: var(--boxel-dark);
    color: var(--boxel-light);
    border: 1px solid var(--boxel-550);
    border-radius: var(--boxel-border-radius-xxl);
    overflow: hidden;
  }
  .code-block.compact[data-scopedcss-4fbb0adcfc-6ce99938e6] {
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  [data-scopedcss-4fbb0adcfc-6ce99938e6] .monaco-editor {
    --vscode-editor-background: var(--boxel-dark);
    --vscode-editorGutter-background: var(--boxel-dark);
  }
  [data-scopedcss-4fbb0adcfc-6ce99938e6] .monaco-editor span[title='Double click to unfold'] {
    margin-left: 5px;
  }

  .code-block-editor[data-scopedcss-4fbb0adcfc-ad7d559162] {
    max-height: var(--code-block-max-height);
  }

  @layer PretComponent {
    /* a size container at the text column's width: the card's own
       container queries see the embed, not the window */
    .pretui-embed[data-scopedcss-9567d5c23d-47696d849f] {
      container-type: inline-size;
      position: relative;
      box-sizing: border-box;
      width: var(--pretui-embed-w, 100%);
      max-width: var(--pretui-embed-max, 37.5rem);
      min-height: var(--pretui-embed-min);
      height: var(--pretui-embed-h, auto);
      max-height: var(--pretui-embed-max-h, none);
      overflow: auto;
      border-radius: var(--boxel-border-radius);
      box-shadow: 0 0 0 1px var(--border);
      isolation: isolate;
      contain: layout paint;
      /* the transcript's prose stops at the frame: the card brings
         its own measure, leading and link colour */
      font-family: var(--font-sans);
      font-size: var(--boxel-font-size);
      font-weight: 400;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: start;
      white-space: normal;
      color: var(--foreground);
    }
    /* the hat: one quiet line in the frame's own chrome over the card's
       surface, lower than the host's card header: the type as a mono
       eyebrow, the title at the small size, and the actions as text */
    .pretui-embed[data-hat][data-scopedcss-9567d5c23d-47696d849f] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }
    .pretui-embed-hat[data-scopedcss-9567d5c23d-47696d849f] {
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-2xs);
      min-width: 0;
      height: 1.625rem;
      padding: 0 var(--boxel-sp-2xs) 0 var(--boxel-sp-xs);
      background-color: var(--card);
      box-shadow: 0 1px 0 var(--border);
      color: var(--card-foreground);
    }
    .pretui-embed-hat-icon[data-scopedcss-9567d5c23d-47696d849f] {
      flex: none;
      color: var(--muted-foreground);
    }
    .pretui-embed-hat-kind[data-scopedcss-9567d5c23d-47696d849f] {
      flex: none;
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-2xs);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--subtle-foreground);
    }
    .pretui-embed-hat-title[data-scopedcss-9567d5c23d-47696d849f] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--boxel-font-size-xs);
      font-weight: 500;
    }
    .pretui-embed-hat-actions[data-scopedcss-9567d5c23d-47696d849f] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-6xs);
      margin-inline-start: auto;
    }
    .pretui-embed-hat-open[data-scopedcss-9567d5c23d-47696d849f] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-5xs);
      height: 1.5rem;
      padding: 0 var(--boxel-sp-2xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-font-size-2xs);
      font-weight: 500;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-embed-hat-open[data-scopedcss-9567d5c23d-47696d849f]:hover {
      color: var(--primary-ink);
      background-color: var(--hover);
    }
    .pretui-embed-hat-open[data-scopedcss-9567d5c23d-47696d849f]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* the iframe's top level: the whole width, no cap, no edge */
    .pretui-embed[data-fill][data-scopedcss-9567d5c23d-47696d849f] {
      max-width: none;
      border-radius: 0;
      box-shadow: none;
    }
    .pretui-embed-card[data-scopedcss-9567d5c23d-47696d849f] {
      display: grid;
      min-height: inherit;
    }
    .pretui-embed-card[data-scopedcss-9567d5c23d-47696d849f] >  * {
      min-width: 0;
    }
    .pretui-embed-pending[data-scopedcss-9567d5c23d-47696d849f],
    .pretui-embed-error[data-scopedcss-9567d5c23d-47696d849f] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      box-sizing: border-box;
      height: 100%;
      min-height: var(--pretui-embed-min);
      padding: var(--boxel-sp-sm);
      background-color: var(--inset);
      font-size: var(--boxel-font-size-xs);
      color: var(--muted-foreground);
    }
    /* the shimmer is a moving gradient in CSS: no clock */
    .pretui-embed-shimmer[data-scopedcss-9567d5c23d-47696d849f] {
      background-image: linear-gradient(
        90deg,
        var(--muted-foreground) 0%,
        var(--foreground) 50%,
        var(--muted-foreground) 100%
      );
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: pretui-embed-shimmer-data-scopedcss-9567d5c23d-47696d849f 1.6s linear infinite;
    }
    @keyframes pretui-embed-shimmer-data-scopedcss-9567d5c23d-47696d849f {
      from {
        background-position: 100% 0;
      }
      to {
        background-position: -100% 0;
      }
    }
    .pretui-embed-error[data-kind='auth'][data-scopedcss-9567d5c23d-47696d849f] {
      color: var(--foreground);
    }
    .pretui-embed-act[data-kind='primary'][data-scopedcss-9567d5c23d-47696d849f] {
      padding: 0 var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-pill);
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    .pretui-embed[data-state='error'] .pretui-embed-error[data-scopedcss-9567d5c23d-47696d849f] {
      color: var(--destructive-ink);
    }
    /* 1.5rem tall, the least a pointer target takes */
    .pretui-embed-act[data-scopedcss-9567d5c23d-47696d849f] {
      min-height: 1.5rem;
      padding: 0 var(--boxel-sp-4xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      font-weight: 600;
      color: var(--foreground);
      cursor: pointer;
    }
    .pretui-embed-act[data-scopedcss-9567d5c23d-47696d849f]:hover {
      color: var(--primary-ink);
    }
    /* Open sits in the corner, quiet until the frame is hovered or
       focused (always on touch), never over the card's own controls'
       focus order: it comes after the card */
    .pretui-embed-corner[data-scopedcss-9567d5c23d-47696d849f] {
      position: absolute;
      inset-block-start: var(--boxel-sp-2xs);
      inset-inline-end: var(--boxel-sp-2xs);
      display: flex;
      gap: var(--boxel-sp-4xs);
      opacity: 0;
      transition: opacity 120ms ease-out;
    }
    .pretui-embed:hover .pretui-embed-corner[data-scopedcss-9567d5c23d-47696d849f],
    .pretui-embed:focus-within .pretui-embed-corner[data-scopedcss-9567d5c23d-47696d849f] {
      opacity: 1;
    }
    @media (hover: none) {
      .pretui-embed-corner[data-scopedcss-9567d5c23d-47696d849f] {
        opacity: 1;
      }
    }
    .pretui-embed-open[data-scopedcss-9567d5c23d-47696d849f] {
      height: 1.5rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-pill);
      background-color: var(--popover);
      box-shadow: 0 0 0 1px var(--border-strong);
      font-family: inherit;
      font-size: var(--boxel-font-size-2xs);
      font-weight: 500;
      color: var(--popover-foreground);
      cursor: pointer;
    }
    .pretui-embed-open[data-scopedcss-9567d5c23d-47696d849f]:hover {
      color: var(--primary-ink);
    }
    .pretui-embed-open[data-scopedcss-9567d5c23d-47696d849f]:focus-visible,
    .pretui-embed-act[data-scopedcss-9567d5c23d-47696d849f]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-embed-shimmer[data-scopedcss-9567d5c23d-47696d849f] {
        animation: none;
        color: var(--muted-foreground);
      }
      .pretui-embed-corner[data-scopedcss-9567d5c23d-47696d849f] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-menu[data-scopedcss-a159ccddf5-10acb9eacf] {
      /* anchored overlays must escape scroll clipping; measured on open
         only — never during prerender (lint warns, accepted, same as
         components/popup.gts) */
      position: fixed;
      top: 0;
      left: 0;
      /* Named, not invented. The kit's stacking components each picked their
         own number, which is why none of them can be ordered against the
         others; this consumes the shared scale and re-tints the moment the
         token lands. The palette needs no z-index at all — a native
         <dialog> lives in the top layer, above every stacking context. */
      z-index: var(--pretui-z-dropdown, 60);
      margin: 0;
      padding: var(--pretui-menu-padding, 5px);
      list-style: none;
      min-width: var(--pretui-menu-min-width, 200px);
      max-width: var(--pretui-menu-max-width, 320px);
      max-height: min(60vh, 520px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--popover);
      color: var(--foreground);
      border-radius: var(--radius-surface, 10px);
      box-shadow: var(
        --pretui-shadow-overlay,
        0 0 0 1px var(--border),
        0 8px 28px rgb(0 0 0 / 0.16)
      );
      font-family: var(--font-sans);
      font-size: var(--text-ui-md, 12.5px);
      opacity: 1;
      transform: none;
      transition:
        opacity 120ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    @starting-style {
      .pretui-menu[data-scopedcss-a159ccddf5-10acb9eacf] {
        opacity: 0;
        transform: translateY(-3px) scale(0.985);
      }
    }
    .pretui-menu menu[data-scopedcss-a159ccddf5-10acb9eacf] {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pretui-menugroup[data-scopedcss-a159ccddf5-10acb9eacf] {
      display: block;
    }
    .pretui-menugroup[data-labelled='true'][data-scopedcss-a159ccddf5-10acb9eacf] {
      padding-block-start: 3px;
    }
    .pretui-menugroup-label[data-scopedcss-a159ccddf5-10acb9eacf] {
      display: block;
      padding-block: 3px;
      padding-inline: 8px;
      font-size: var(--text-ui-xs, 11px);
      font-weight: 600;
      letter-spacing: var(--track-eyebrow, 0.06em);
      text-transform: uppercase;
      color: var(--muted-foreground);
    }
    .pretui-menuitem[data-scopedcss-a159ccddf5-10acb9eacf] {
      position: relative;
      display: grid;
      grid-template-columns: 15px 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: var(--pretui-menu-item-height, 28px);
      padding-block: 3px;
      padding-inline: 6px 8px;
      border-radius: var(--radius-control, 6px);
      color: inherit;
      cursor: default;
      user-select: none;
      scroll-margin: 6px;
    }
    .pretui-menuitem[data-submenu='true'][data-scopedcss-a159ccddf5-10acb9eacf] {
      grid-template-columns: 15px 1fr auto auto;
    }
    .pretui-menuitem[data-default='true'] .pretui-menulabel[data-scopedcss-a159ccddf5-10acb9eacf] {
      font-weight: 600;
    }
    .pretui-menuitem[data-destructive='true'][data-scopedcss-a159ccddf5-10acb9eacf] {
      color: var(--pretui-destructive-ink, var(--boxel-danger));
    }
    .pretui-menuitem[aria-disabled='true'][data-scopedcss-a159ccddf5-10acb9eacf] {
      /* dimmed, still focusable, still announced — HIG's "dim, don't
         remove", which the `disabled` attribute cannot express */
      opacity: 0.42;
    }
    .pretui-menuitem[data-active='true'][data-scopedcss-a159ccddf5-10acb9eacf]:not([aria-disabled='true']) {
      background: var(--hover, var(--boxel-100));
    }
    .pretui-menuitem[data-active='true'][data-destructive='true'][data-scopedcss-a159ccddf5-10acb9eacf] {
      background: color-mix(
        in oklch,
        var(--destructive) 12%,
        var(--popover)
      );
    }
    .pretui-menuitem[data-scopedcss-a159ccddf5-10acb9eacf]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-menulabel[data-scopedcss-a159ccddf5-10acb9eacf] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-menuicon[data-scopedcss-a159ccddf5-10acb9eacf] {
      width: 14px;
      height: 14px;
      color: var(--muted-foreground);
    }
    .pretui-menukbd[data-scopedcss-a159ccddf5-10acb9eacf] {
      font-family: var(--font-mono);
      font-size: var(--text-ui-xs, 11px);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
      white-space: nowrap;
    }
    .pretui-menuitem[data-active='true'] .pretui-menukbd[data-scopedcss-a159ccddf5-10acb9eacf] {
      color: inherit;
    }

    /* The checkmark is drawn, not typed: a glyph inherits whatever the
       reader's emoji font does to it and ignores currentColor. */
    .pretui-menucheck[data-scopedcss-a159ccddf5-10acb9eacf] {
      position: relative;
      width: 15px;
      height: 15px;
    }
    .pretui-menuitem[data-check='on'] .pretui-menucheck[data-scopedcss-a159ccddf5-10acb9eacf]::after {
      content: '';
      position: absolute;
      inset-block-start: 2px;
      inset-inline-start: 4px;
      width: 5px;
      height: 9px;
      border: solid currentColor;
      border-width: 0 1.75px 1.75px 0;
      transform: rotate(43deg);
    }
    .pretui-menuitem[data-check='mixed'] .pretui-menucheck[data-scopedcss-a159ccddf5-10acb9eacf]::after {
      /* the partial state a multi-selection produces — a dash, with
         aria-checked='mixed' carrying it to assistive tech */
      content: '';
      position: absolute;
      inset-block-start: 6px;
      inset-inline-start: 2px;
      width: 9px;
      height: 1.75px;
      background: currentColor;
      border-radius: 1px;
    }
    .pretui-menuchevron[data-scopedcss-a159ccddf5-10acb9eacf] {
      position: relative;
      width: 10px;
      height: 10px;
      margin-inline-start: 2px;
    }
    .pretui-menuchevron[data-scopedcss-a159ccddf5-10acb9eacf]::after {
      content: '';
      position: absolute;
      inset-block-start: 2px;
      inset-inline-start: 2px;
      width: 5px;
      height: 5px;
      border: solid currentColor;
      border-width: 1.5px 1.5px 0 0;
      transform: rotate(45deg);
      opacity: 0.75;
    }
    .pretui-menusep[data-scopedcss-a159ccddf5-10acb9eacf] {
      height: 1px;
      margin-block: 4px;
      margin-inline: 6px;
      background: var(--border);
    }

    /* Touch: a 28px row is a miss target on a finger. */
    @media (any-pointer: coarse) {
      .pretui-menuitem[data-scopedcss-a159ccddf5-10acb9eacf] {
        min-height: 44px;
      }
    }
    /* Reduced motion lands on the end state: with no transition the
       @starting-style values are never interpolated toward. */
    @media (prefers-reduced-motion: reduce) {
      .pretui-menu[data-scopedcss-a159ccddf5-10acb9eacf] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-menuwrap[data-scopedcss-f8d03307c0-4eb33f7b3c] {
      position: relative;
      display: inline-flex;
    }
    .pretui-menu-trigger[data-scopedcss-f8d03307c0-4eb33f7b3c] {
      display: inline-flex;
    }
    .pretui-menu-watch[data-scopedcss-f8d03307c0-4eb33f7b3c] {
      display: none;
    }
  }

  /* the hat is a gray band over the card's white face: the frame's,
     not the card's, so it never reads as part of the card */
  .answer-card[data-scopedcss-b5fc194af6-b6e5b51707] {
    --pretui-embed-min: 0;
    min-height: 0;
  }
  .answer-card[data-scopedcss-b5fc194af6-b6e5b51707] .pretui-embed-hat {
    background-color: var(--boxel-100);
    box-shadow: 0 1px 0 var(--boxel-200);
  }
  /* the menu's trigger fits the hat's line, in the hat's gray */
  .answer-card-options[data-scopedcss-b5fc194af6-b6e5b51707] {
    color: var(--boxel-450);
  }

  .message[data-scopedcss-6db748dd97-049adacbae] {
    position: relative;
    /* reading type: answers and the reader's bubble, 14 on 22 */
    font-size: var(--type-read, 14px);
    font-weight: 400;
    line-height: var(--leading-read, 22px);
    text-wrap: pretty;
    /* its own block context, without clipping: a reply's table and a
       framed row hang their inset into the gutter */
    display: flow-root;
  }
  .message[data-scopedcss-6db748dd97-049adacbae] >  * {
    margin-block: 0;
  }
  .message[data-scopedcss-6db748dd97-049adacbae] >  * + * {
    margin-top: var(--step-12, 12px);
  }

  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
    color: var(--ai-assistant-ink, var(--boxel-light));
    /* the below font-smoothing options are only recommended for light-colored
      text on dark background (otherwise not good for accessibility) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* the work under way: one quiet line that moves on with it */
  .reasoning-tail[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
    margin: 0;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    color: transparent;
    background: linear-gradient(
        90deg,
        var(--ink-3) 0%,
        var(--ink-3) 40%,
        var(--foreground) 50%,
        var(--ink-3) 60%,
        var(--ink-3) 100%
      )
      0 0 / 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: reasoning-tail-shimmer-data-scopedcss-8e0ab3cb6f-2c0cc74e74 2.4s linear infinite;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @keyframes reasoning-tail-shimmer-data-scopedcss-8e0ab3cb6f-2c0cc74e74 {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reasoning-tail[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
      animation: none;
      color: var(--ink-3);
    }
  }
  /* the turn's thinking, opened from its header: quiet text on a rule,
     where it happened */
  .reasoning-shown[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
    padding-inline-start: var(--step-12, 12px);
    box-shadow: inset 2px 0 0 var(--border, #3a3446);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    color: var(--ink-3);
  }
  .reasoning-shown[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p {
    margin: 0 0 var(--step-4, 4px);
  }
  .reasoning-body[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
    color: var(--ink-2, var(--boxel-300));
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] {
    line-height: inherit;
    min-width: 0;
  }
  /* the reply fits the panel at any width: a card or a table never sets
     the panel's width, and a wide table scrolls inside its own box. Its
     blocks and images only: a card or a Pret UI part inside the reply
     keeps its own widths (an unlayered rule here beats every layered
     Pret UI rule it matches) */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-content > * {
    max-width: 100%;
  }
  /* a table in a reply, as the board's Main draws it: full width, one
     rounded box with a hairline ring (the box that scrolls a table too
     wide for it), a quiet mono header and hairline rules between rows.
     Nothing inside the box rounds. The card-aware renderer wraps each
     table in .table-wrapper; the streaming one, Prose, does not, so a
     bare table is its own box. */
  /* answer furniture, as the board's Main draws it. Stat chips and
     source refs speak sans: they are figures and names, not strings to
     paste */
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-chips] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-8, 8px);
    font-size: 0;
  }
  /* the reading measure is in ch, which font-size 0 makes nothing: a
     row of chips takes the column's width (prose sets the measure on
     its paragraphs, hence the weight here) */
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-chips][data-chips],
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .pretui-prose p[data-chips] {
    max-width: none;
    max-inline-size: none;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-chips] > code {
    /* a figure is one line: the row wraps between chips, never inside
       one, and a chip longer than the column truncates */
    flex: 0 0 auto;
    max-inline-size: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
    padding: var(--step-4, 4px) var(--step-8, 8px);
    border-radius: var(--round-chip, 4px);
    background-color: var(--inset);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
  }
  /* a figure with its words: one chip, the figure in the chip's ink
     and weight, its words quieter beside it */
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-chips] > [data-chip] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--step-4, 4px);
    flex: 0 1 auto;
    max-inline-size: 100%;
    min-width: 0;
    padding: var(--step-4, 4px) var(--step-8, 8px);
    border-radius: var(--round-chip, 4px);
    background-color: var(--inset);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    white-space: nowrap;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-chips] > [data-chip] > code {
    flex: none;
    padding: 0;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] [data-chip-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-2, #c9c4d6);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] a[data-ref] {
    display: inline-block;
    padding: 0 var(--step-4, 4px);
    border-radius: var(--round-chip, 4px);
    background-color: var(--inset);
    font-family: inherit;
    font-size: var(--type-caption, 11px);
    font-weight: 600;
    line-height: var(--leading-caption, 16px);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-sources] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--step-8, 8px);
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    color: var(--ink-3);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-sources] a {
    padding: 2px var(--step-8, 8px);
    border-radius: var(--round-row, 8px);
    box-shadow: inset 0 0 0 1px var(--border, #3a3446);
    text-decoration: none;
    white-space: nowrap;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-sources] a[data-host]::after {
    content: attr(data-host);
    margin-inline-start: var(--step-4, 4px);
    font-family: var(--boxel-font-family, inherit);
    color: var(--ink-2, #c9c4d6);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-sources] span[data-sep] {
    display: none;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    color: var(--ink-2, #c9c4d6);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method][data-open='true'] {
    display: block;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method] > button {
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method] > button > strong {
    font-weight: 600;
    color: var(--ink-3);
  }
  /* the disclosure mark leads, as every other fold in the thread does:
     "› Method: …", turning when open */
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method] > button > strong::before {
    content: '›';
    display: inline-block;
    width: 10px;
    margin-inline-end: 4px;
    text-align: center;
    transition: transform 160ms cubic-bezier(0.22, 0.61, 0.25, 1);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    p[data-method][data-open='true'] > button > strong::before {
    transform: rotate(90deg);
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] p[data-method] > button:focus-visible {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    outline-offset: 2px;
  }
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-content {
    max-width: none;
  }
  /* a finished reply keeps the rhythm it streamed in, so the swap from
     the streaming renderer moves nothing: 12 between blocks, the
     reading line's 22px, and no margin at its edges, so the reply sits
     on the transcript's 12px like every other block */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-content > * {
    margin-block: 0 var(--step-12, 12px);
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-content > :last-child {
    margin-block-end: 0;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] [data-card-ref] {
    cursor: pointer;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] [data-card-ref]:focus-visible {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    outline-offset: 2px;
  }
  /* a card in its own box clips to its rounded corners, which would cut
     a ring drawn outside it: the box itself carries the ring, inside its
     edge, all the way round */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    
      :is(
          .markdown-bfm-card-slot--block,
          .markdown-bfm-card-slot--inline-embed
        )
        [data-card-ref]:focus-visible
     {
    outline: none;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    
      :is(
        .markdown-bfm-card-slot--block,
        .markdown-bfm-card-slot--inline-embed
      ):has([data-card-ref]:focus-visible)
     {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    outline-offset: -2px;
  }
  /* a block card draws its own frame (CardEmbed); a card embedded in a
     line gets the light card surface a final result has, so its own
     colors read as designed */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--block {
    display: block;
    margin-block: 0;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline-embed {
    display: block;
    margin-block: 0;
    border-radius: var(--round-surface, 12px);
    background-color: var(--boxel-light);
    color: var(--boxel-dark);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--boxel-600);
  }
  /* a card in a reply is a light card in a dark panel: it gets the
     light theme's inks back, or its text would take the panel's
     foreground and vanish on its own white face */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot {
    --foreground: var(--boxel-dark);
    --ai-assistant-ink: var(--boxel-dark);
    --muted-foreground: var(--boxel-500);
    --subtle-foreground: var(--boxel-450);
    --pretui-toolrow-settled-ink: var(--boxel-600);
    --background: var(--boxel-light);
    --card: var(--boxel-light);
    --inset: var(--boxel-100);
    --border: var(--boxel-200);
    --ring: var(--boxel-dark);
    color: var(--boxel-dark);
  }
  /* a fitted card the reply gives no height is a size container, so
     its content cannot grow it: give it a tile's height rather than the
     40px strip that cuts it to one line */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    
      .markdown-bfm-card-slot--fitted:not([style*='height'])
        > .field-component-card
    ,
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    
      .markdown-bfm-card-slot--fitted:not([style*='height'])
        .pretui-embed-card
        > .field-component-card
     {
    height: 5.5rem;
  }
  /* the slot is the one rounded box; the card inside meets its edge
     square */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot > .field-component-card,
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74]
    
      .markdown-bfm-card-slot .pretui-embed-card > .field-component-card
     {
    border-radius: 0;
  }
  /* a card named in a sentence is one pill: UI type, semibold, 18px
     tall inside the reading line's 22, so the leading never jumps; 8px
     each side, the slot the only rounded box. The card inside takes the
     pill's type and no surface of its own */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline,
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-loading--inline,
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .streamed-card-ref {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 18px;
    padding: 0 var(--step-8, 8px);
    vertical-align: 1px;
    border-radius: var(--round-row, 8px);
    background-color: var(--boxel-light);
    color: var(--boxel-dark);
    font-size: var(--type-ui, 12.5px);
    font-weight: 600;
    line-height: 18px;
    overflow: hidden;
    cursor: pointer;
  }
  /* a card still loading is already its pill, named from its URL: the
     shell's shimmer bar is 6em by 1.2em on the middle of the line, and
     the line moved when the card replaced it */
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-content .markdown-bfm-loading--inline {
    width: auto;
    height: 18px;
    vertical-align: 1px;
    border-radius: var(--round-row, 8px);
    background-color: var(--boxel-light);
    white-space: nowrap;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline:hover {
    background-color: var(--boxel-100);
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline * {
    cursor: pointer;
  }
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline > .field-component-card,
  .bfm-reply[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .markdown-bfm-card-slot--inline .atom-default-template {
    min-width: 0;
    background: none;
    box-shadow: none;
    outline: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* a stopped reply, as AgentTurn's stopped note: a quiet caption on
     the text edge, in sans: it is status, not a string to paste */
  .generation-cancelled[data-scopedcss-8e0ab3cb6f-2c0cc74e74],
  .ai-bot-message[data-scopedcss-8e0ab3cb6f-2c0cc74e74] .generation-cancelled {
    margin: var(--step-12, 12px) 0 0;
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    color: var(--ink-3);
  }
  [data-scopedcss-8e0ab3cb6f-2c0cc74e74] span.streaming-text:after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    font-family: system-ui, sans-serif;
    line-height: normal;
    vertical-align: baseline;
    margin-left: 5px;
  }

  @layer PretComponent {
    .pretui-answerfooter[data-superseded][data-scopedcss-6c04f6367b-9a4793eab8] {
      opacity: var(--pretui-answerfooter-reveal, 0);
      transition: opacity var(--pretui-dur-snap, 130ms) ease-out;
    }
    .pretui-answerfooter[data-superseded][data-scopedcss-6c04f6367b-9a4793eab8]:is(:hover, :focus-within) {
      opacity: 1;
    }
    .pretui-answerfooter[data-scopedcss-6c04f6367b-9a4793eab8] {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--boxel-sp-6xs);
      min-height: 1.75rem;
      /* plain-row hang: the first action's text stays on the edge */
      margin-inline-start: calc(-1 * var(--boxel-sp-xs));
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--subtle-foreground);
    }
    .pretui-answerfooter-copy[data-scopedcss-6c04f6367b-9a4793eab8] {
      color: inherit;
    }
    .pretui-answerfooter-action[data-scopedcss-6c04f6367b-9a4793eab8] {
      height: 1.75rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      color: inherit;
      cursor: pointer;
      white-space: nowrap;
    }
    .pretui-answerfooter-action[data-scopedcss-6c04f6367b-9a4793eab8]:hover:not([aria-disabled='true']) {
      background-color: var(--hover);
      color: var(--primary-ink);
    }
    .pretui-answerfooter-action[data-scopedcss-6c04f6367b-9a4793eab8]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-answerfooter-action[aria-disabled='true'][data-scopedcss-6c04f6367b-9a4793eab8] {
      cursor: default;
    }
    .pretui-answerfooter-action[data-diff][data-scopedcss-6c04f6367b-9a4793eab8] {
      font-variant-numeric: tabular-nums;
    }
    .pretui-answerfooter-count[data-op='add'][data-scopedcss-6c04f6367b-9a4793eab8] {
      color: var(--success-ink);
    }
    .pretui-answerfooter-count[data-op='del'][data-scopedcss-6c04f6367b-9a4793eab8] {
      color: var(--destructive-ink);
    }
    /* a failure colours its mark, not its words */
    .pretui-answerfooter-error[data-scopedcss-6c04f6367b-9a4793eab8] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--foreground);
    }
    .pretui-answerfooter-error-mark[data-scopedcss-6c04f6367b-9a4793eab8] {
      margin-inline-end: var(--boxel-sp-4xs);
      vertical-align: -0.0625rem;
      color: var(--destructive-ink);
    }
    /* a receipt, not a string to paste: sans with tabular figures */
    .pretui-answerfooter-cost[data-scopedcss-6c04f6367b-9a4793eab8] {
      margin-inline-start: auto;
      padding-inline-end: var(--boxel-sp-6xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
    }
  }

  /* the same context as the user's last message: the chips already
     said it, so they step aside rather than repeat on every turn */
  .items.repeats-context[data-scopedcss-778f828930-c38675c09f] {
    display: none;
  }
  .items[data-scopedcss-778f828930-c38675c09f] {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxs);
  }

  @layer PretComponent {
    .pretui-compaction[data-scopedcss-8f139de421-27ffdc9772] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-4xs);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-compaction-marker[data-scopedcss-8f139de421-27ffdc9772] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
    }
    /* a failure colours its mark, not its words. The mark's rule names
       the chip as well, so it outranks the quiet colour every icon in
       the chip takes below */
    .pretui-compaction[data-state='failed'] .pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772] {
      color: var(--foreground);
    }
    .pretui-compaction-chip > .pretui-compaction-failed[data-scopedcss-8f139de421-27ffdc9772] {
      color: var(--destructive-ink);
    }
    .pretui-compaction-rule[data-scopedcss-8f139de421-27ffdc9772] {
      flex: 1;
      height: 1px;
      min-width: var(--boxel-sp-sm);
      background-color: var(--border);
    }
    .pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 1.625rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
      /* shrinks between its rules, so a narrow panel truncates the
         label instead of pushing the chip past the edge */
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
    }
    button.pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772] {
      cursor: pointer;
    }
    button.pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772]:hover {
      background-color: var(--hover);
      color: var(--foreground);
    }
    button.pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-compaction-chip > svg[data-scopedcss-8f139de421-27ffdc9772] {
      flex: none;
      color: var(--subtle-foreground);
    }
    .pretui-compaction-label[data-scopedcss-8f139de421-27ffdc9772] {
      font-weight: 400;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-compaction-counts[data-scopedcss-8f139de421-27ffdc9772] {
      flex: none;
      color: var(--subtle-foreground);
      font-variant-numeric: tabular-nums;
    }
    .pretui-compaction-chev[data-scopedcss-8f139de421-27ffdc9772] {
      transition: transform 300ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    .pretui-compaction-chip[aria-expanded='true'] .pretui-compaction-chev[data-scopedcss-8f139de421-27ffdc9772] {
      transform: rotate(180deg);
    }
    .pretui-compaction-summary[data-scopedcss-8f139de421-27ffdc9772] {
      margin: var(--boxel-sp-4xs) auto 0;
      max-inline-size: 68ch;
      padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      color: var(--muted-foreground);
    }
    .pretui-compaction-summary p[data-scopedcss-8f139de421-27ffdc9772] {
      margin: 0;
    }
    .pretui-compaction-none[data-scopedcss-8f139de421-27ffdc9772] {
      color: var(--subtle-foreground);
      font-style: italic;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-compaction-chev[data-scopedcss-8f139de421-27ffdc9772] {
        transition: none;
      }
    }
    @media (any-pointer: coarse) {
      button.pretui-compaction-chip[data-scopedcss-8f139de421-27ffdc9772] {
        min-height: 2.75rem;
        padding: 0 var(--boxel-sp);
      }
    }
  }

  .compaction-status[data-scopedcss-093ba8831d-4d83e15f42] {
    margin-bottom: var(--boxel-sp-xs);
  }
  .summary[data-scopedcss-093ba8831d-4d83e15f42] {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* on the spine: the mark in a 16px column at the transcript's edge,
     the time on the 40px text edge */
  .meta[data-scopedcss-7007737f56-92ddf98100] {
    display: grid;
    grid-template-columns: var(--step-16, 16px) 1fr;
    grid-template-rows: minmax(var(--ai-assistant-message-meta-height), auto);
    align-items: center;
    justify-items: start;
    column-gap: var(--step-8, 8px);
  }
  .meta > .time[data-scopedcss-7007737f56-92ddf98100] {
    justify-self: stretch;
  }
  .ai-avatar[data-scopedcss-7007737f56-92ddf98100] {
    width: var(--ai-assistant-message-avatar-size);
    height: var(--ai-assistant-message-avatar-size);
    background-image: image-set(url('data:image/webp;base64,UklGRgYCAABXRUJQVlA4WAoAAAAQAAAAGQAAGQAAQUxQSMUAAAABgFXbVt1qS0ACEnBQHBQHxUFxUCRcB40TcNA4AAeJg/2xeVwJETEBGHuSrJUkPTbDStjJ8ndI3mmSkvw2ItVaYVxyl3Sgy+UWXhfVA0F4veTx/DQOKwBUIX+f54PzbsT0wXp3GLq+VQ2mpq51j2XfB7UeyWLbpqPWUr7v/3h/S6E2vxYal4uZmcLd5kaucb8ZMY1zH/I5YJHC4ZmDB4B4Cz0QqHfE3N3SgCa3w2oUWkuNWO+SkpzYzHIckneC1Cphx6/4CQBWUDggGgEAANAIAJ0BKhoAGgA+bTCTRyQjIaEoCqiADYlsAJ0y43mfjXDn75NhnMfImEA54jcQPZr58v2MfJAAbPO7yGJmutiLvayjgnMJdH1F2DmS5YAA/sNd5nCfj0nyEoYDCcd/a+s8rM6SzWFYyWRtmknvHddHhrszX/vEF+DSzHS12Ipf4rsqCDi4/Y8hXXNZIh9h1RGCFdzS01aOcoZrbEMhfDAVbYP4DMUiZ2Z33RnvHaDXvQEFvTfUf7h9cMs7+frGUnfFJhxEMu7Gpnx9pu0g4H6//JvvL/lO6yxZ+Ss7ZI09hg86DATL93vF6Qr45v+G511//3aKOEPl+ed21HH7yY5JH/bvJ/ztHqofit+OQBz8BEv/48NeW8AAAA==') 1x, url('data:image/webp;base64,UklGRoYDAABXRUJQVlA4WAoAAAAQAAAAMwAAMwAAQUxQSHIBAAABgJZtb9YqEioBCThYnRwcUAetg+EAHAwHw0HrAByAg+zzbRJ2/kcEA7dt48i9d2/JkjdQTYm/leAtUE0/wSxj1rLIWLSsgC4AViUtA7xH99DoCAjnEMFqXogKmlr1A9Fg07kd0RJ5xO7kNTNgo5c2dB/ZSevIiPRpjEijU4/5cB+3crBy2O8MCeBbwAP6mgn1K2MV+lJhrLVvP4jxdl+5pqPF9lhbuN9iZJE6bClWmghqsquVYlXNyyGy6KCltEJvLharosVDypYcKeTSJjn30JJafvg+dXqp846M5Hz33hZf+rvYceljBDabr95gcs0sMPuo2yVCBxJ6psyrFcpSW8qsVC9aZb3GOiOzRRFU+zKylYLa/1KaF4HZa/5d2zKnzxDdhNpC/ibXVkKj8swgWjs6iVUWyO7q8YmLMFBMutgyiQNS4VpEXdXjevzxlVh5uDNickcabejE+MzbOTnGWbmM0bQLaH5ObvYTOeC/yU8JVlA4IO4BAABQDQCdASo0ADQAPm0skkakIj+hMBIMA/ANiWwAuRfov4fAeaLWeyFGPhU7ernd/RzvIm8wgb58DypeQ+Xe6C73cPt4lM/nKeQIJaIh+0w5W06DfzKUkLwzzvI0Z1mZEQoj3f1onuOrUcKFF6G4HDt8nUWAAP7+9l3+RfZSNX2uw5INGJe5fm2NPbC9v4//Jv/Sx9j/wThZvDxAX6+Mski7H3YP9gB/k3PNtNddfbp/APAt2n27hXnf+Gf++NLmHyMMah7BB2pXZMN3Qjb1YTbt+t8um///sRDqdL/FwJsZtZqDVGGWWjryAzaiV4GXO9DN/CilzOvJ3+P+GViVOGsi8//fRQcxJxrwpy5j/k6GG/eHsYtaVAnhtMDGZXYGDJWdsDvL18YntWV/dv6PEtspt6inaWA38/NApOoAl5ehJRg2GZd/+UJn3EYhCqpJfPHRwUM1L2q/+Qi+Z3/GTAbNpdPy4fuPR+LFKfCJU59oVibJbYQ22VV/USYkoQuNLeNXhc9iUfBRZDLbZeSm4B0wopJ+X8Qr9/X0D9AjiTrBjN7wZcif+pif//6C1tTlo1jibaNsEftdPVofm//N2DLM8S1F3FdVFm/X+8oRGst0f0IATfAP/3iMwGZtTjWKkBM96hm4kqe9JzvZeAAAAA==') 2x, url('data:image/webp;base64,UklGRhAFAABXRUJQVlA4WAoAAAAQAAAATQAATQAAQUxQSCECAAABkFVbe5hYn4RfQiTEAXEwSKgD4oA6GBxQB9QBcVActA4SB98Dhf/P37n3OSImANaFypSoLHD+1yy9Fm/sxX+a9BNfSRWCKvkaVYAq+yqaArw0xZVQOwOzhuIpqzKQVdnTqopAVK2OMrUNAJqG2Y1U1fQ2qap4eVB9fjur+HCSqd6wu6mYXQzUj3ujjoODgfome2LAoduFhhM+Tga89JEHLcOnYMGHdLhUWo74crRgvRjJZaXphm9lsyDXi2jkdH3SOn2FZEPyeT3JzvO5sOsNypvV/vJ8svML6leX/i3oQjtQizCM7TAtwjS2g7QI49gO0SLMYzvAK6BjeLm7ofPN15bQPW2ORrgcnbQpwGmYWr9tFDiWcevSpjPcn6dmU+YccdCY5/Ip7QYcPqTd0+5fcNrlx+VxiUeJl8dC03r/8fdzr+y5XsWTXFf2vwcv4U6nVxdypd819UsrXf/2+qX3JfQIC/3XaBcrj1ijVaw8Zo02kYet0SLW47AGXag88qJb2LmUVxfeNDd2LaXgXVIuVkzfJVqXnARKyZvN+pWsNlsW2OZmwfGbkZZtgL3MFgyfAi1nQddsMX2aLDJ6DwZV9oT6NqD/oOO4NxoM8Jh1696qy/A5q3h+O1M9w6k01fQ2qZp4QVbVt6oa4HfTMAKR2g2OsyoDWZU9iWoGZpV4QtEUYNHMcD1qCFCbfSVVCKrkS1QpqcQX+uGf9upVvJX/AwBWUDggyAIAAJATAJ0BKk4ATgA+bS6VRy8iv6Erk5qD8A2JaAZwZID9K4EAeuSV/qvPrZE9J+OXss1v+x74+bztPnv4T1/gP1m92P+l3wD0APLT9jz908JoDe17MOXQ+VU3kY/ujlBWyvItHBx5//oew2eiG3ORvlhMj6q0nGYXrinhrcY+On0D9eJ7QYxleXJdgGYk9wyyj+KiP7cj5O9t7dJVA4svtLpryDkiAAD+/gbUH9X3zTDTdpEcekMcumgoBHlKQ4bY2cb0OTdd4aXOPGw9AxiuyNPDJPDxDHHDNsB3k8YSGJCzYwl+v+QMhVCHJZE8c/8gxH9KSolDsm8PwljgRau5WAK6AEQzK74q6dDOsb9H7H/gnLybt3eC/In/eFYn+zX7q7tigvmmR6ex3octo0hX7xM4VFjvv9lTu7/9TZ//mv7//zxU1RrpJuuCcOMNtSht3PebW0jfZxwSiwX2FXZGSZ/+2WTRC+4i2/+mfxvRz7jv7YrSmcynqS7B6yN4XGiZwhI0V8NNE49j316x+xjgFCMTsaU/uHT8OF/YX+dbPBFNgIKP/uz9sm7i1fX6PG7svkim2e5lQvcGodeuqUYT0JuZIv+uszUi+2rFluWHpeoG+LAEGSX4XbJ+RP/hatLx2B7EQDfBr1x9J3rpEWEPox/WzmtB7raXYq4HqNdh3dyPG30V6tP74fVeJn0ISTePh1CUMHRvnnuPzjgox/Bs8qZZe+VBrA9GqHBZiEaGYaHNeFNZ/u+D/tfM6HDFiBtQ4mrnw5bqOd2hp5w1RfZN74fM4A/ZtXhtzDxXYLRH/Oq9Y8dY2Oc7QwiVTY7+Wwr9PhMX+KfUtbUeIjbSKC2u+1pG9g9HSVibAmuRc3sEd6UG/UY6J+uZP0mHSxo/NIG9v+f+P+LesIoL7IK/+kChRD7HBOxKkzv04LM/SQOQSXQ1/9ChAAAAAAA='));
    background-repeat: no-repeat;
    background-size: var(--ai-assistant-message-avatar-size);
  }
  .ai-avatar-animated[data-scopedcss-7007737f56-92ddf98100] {
    background-image: url('/assets/ai-assist-icon-animated-C8cXGt-5.webp');
  }
  /* a time is a caption: sans, ink-3, tabular figures */
  .time[data-scopedcss-7007737f56-92ddf98100] {
    display: block;
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    white-space: nowrap;
  }

  @layer PretComponent {
    /* the turn row is full width and a size container, so the bubble's
       share follows the panel, not the window */
    .pretui-bubble-turn[data-scopedcss-20defd9ec7-6135d75e87] {
      container-type: inline-size;
      display: grid;
      /* left-justified, as main draws it: its one small corner, top
         left, points at the edge it hangs from */
      justify-items: start;
      gap: var(--boxel-sp-4xs);
    }
    /* a continued run sits closer to the message above it */
    .pretui-bubble-turn[data-continued][data-scopedcss-20defd9ec7-6135d75e87] {
      margin-block-start: calc(
        -1 * var(--pretui-block-gap, var(--boxel-sp-sm)) +
          var(--boxel-sp-4xs)
      );
    }
    /* the reader's bubble steps back: the theme's inset with ink-1
       text at reading size, holding at 70% of the panel */
    .pretui-bubble[data-scopedcss-20defd9ec7-6135d75e87] {
      box-sizing: border-box;
      max-width: 70%;
      padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-lg);
      border-top-left-radius: var(--boxel-border-radius-xs);
      background-color: var(--pretui-bubble-bg, var(--inset));
      color: var(--pretui-bubble-ink, var(--foreground));
      font-size: var(--boxel-body-font-size);
      line-height: var(--boxel-body-line-height);
      font-weight: 400;
    }
    .pretui-bubble-text[data-scopedcss-20defd9ec7-6135d75e87] {
      margin: 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    /* rich content keeps its own blocks; only text pre-wraps */
    .pretui-bubble-text[data-rich][data-scopedcss-20defd9ec7-6135d75e87] {
      white-space: normal;
    }
    .pretui-bubble-text[data-rich][data-scopedcss-20defd9ec7-6135d75e87] >  :first-child {
      margin-top: 0;
    }
    .pretui-bubble-text[data-rich][data-scopedcss-20defd9ec7-6135d75e87] >  :last-child {
      margin-bottom: 0;
    }
    .pretui-bubble-text[data-clamped][data-scopedcss-20defd9ec7-6135d75e87] {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--pretui-bubble-lines);
      overflow: hidden;
    }
    .pretui-bubble-attachments[data-scopedcss-20defd9ec7-6135d75e87] {
      display: flex;
      flex-wrap: wrap;
      gap: var(--boxel-sp-4xs);
      margin-bottom: var(--boxel-sp-xs);
    }
    /* a host that always passes the block, with nothing to attach this
       time, gets no empty line */
    .pretui-bubble-attachments[data-scopedcss-20defd9ec7-6135d75e87]:empty {
      display: none;
    }
    /* a clamped message fades into its Show more, so the cut reads as a
       cut */
    .pretui-bubble-text[data-clamped][data-scopedcss-20defd9ec7-6135d75e87] {
      mask-image: linear-gradient(
        to bottom,
        black calc(100% - var(--boxel-body-line-height)),
        color-mix(in srgb, black 35%, transparent)
      );
    }
    /* Show more: a quiet control in ink-2 with a chevron, so it never
       reads as the message's last word */
    .pretui-bubble-more[data-scopedcss-20defd9ec7-6135d75e87] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-6xs);
      margin-top: var(--boxel-sp-4xs);
      margin-inline-start: calc(-1 * var(--boxel-sp-xs));
      height: 1.5rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-bubble-more[data-scopedcss-20defd9ec7-6135d75e87]:hover {
      background-color: var(--hover);
      color: var(--foreground);
    }
    .pretui-bubble-more[aria-expanded='true'] .pretui-bubble-more-icon[data-scopedcss-20defd9ec7-6135d75e87] {
      transform: rotate(180deg);
    }
    /* not yet delivered: the text steps down to ink-2; the line under
       the bubble says why */
    .pretui-bubble-turn[data-delivery='pending'] .pretui-bubble[data-scopedcss-20defd9ec7-6135d75e87],
    .pretui-bubble-turn[data-delivery='queued'] .pretui-bubble[data-scopedcss-20defd9ec7-6135d75e87] {
      color: var(--muted-foreground);
    }
    .pretui-bubble-context[data-scopedcss-20defd9ec7-6135d75e87] {
      display: flex;
      justify-content: flex-start;
      max-width: 92%;
    }
    .pretui-bubble-foot[data-scopedcss-20defd9ec7-6135d75e87] {
      display: flex;
      align-items: baseline;
      gap: var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
    /* a state colours the word, never the bubble */
    .pretui-bubble-turn[data-delivery='steer'] .pretui-bubble-delivery[data-scopedcss-20defd9ec7-6135d75e87] {
      color: var(--attention-ink);
    }
    .pretui-bubble-turn[data-delivery='rejected'] .pretui-bubble-delivery[data-scopedcss-20defd9ec7-6135d75e87] {
      color: var(--destructive-ink);
    }
    /* a text action, 1.5rem tall so it is a whole pointer target */
    .pretui-bubble-link[data-scopedcss-20defd9ec7-6135d75e87] {
      display: inline-flex;
      align-items: center;
      min-height: 1.5rem;
      padding: 0;
      border: 0;
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      font-weight: 600;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-bubble-link[data-scopedcss-20defd9ec7-6135d75e87]:hover {
      color: var(--foreground);
    }
    .pretui-bubble-link[data-scopedcss-20defd9ec7-6135d75e87]:focus-visible,
    .pretui-bubble-more[data-scopedcss-20defd9ec7-6135d75e87]:focus-visible,
    .pretui-bubble-act[data-scopedcss-20defd9ec7-6135d75e87]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* a sent message's foot holds only hover items: it takes no line,
       and they hang in the gap below the bubble */
    .pretui-bubble-turn[data-delivery='sent'] .pretui-bubble-foot[data-scopedcss-20defd9ec7-6135d75e87] {
      height: 0;
      margin-top: calc(-1 * var(--boxel-sp-4xs));
      overflow: visible;
    }
    /* edit and the time are for the reader who looks for them */
    .pretui-bubble-hover[data-scopedcss-20defd9ec7-6135d75e87] {
      opacity: 0;
    }
    .pretui-bubble-turn:hover .pretui-bubble-hover[data-scopedcss-20defd9ec7-6135d75e87],
    .pretui-bubble-turn:focus-within .pretui-bubble-hover[data-scopedcss-20defd9ec7-6135d75e87] {
      opacity: 1;
    }
    @media (hover: none) {
      .pretui-bubble-hover[data-scopedcss-20defd9ec7-6135d75e87] {
        opacity: 1;
      }
    }
    .pretui-bubble-editor[data-scopedcss-20defd9ec7-6135d75e87] {
      display: grid;
      gap: var(--boxel-sp-xs);
      width: 100%;
      max-width: 100%;
    }
    .pretui-bubble-field[data-scopedcss-20defd9ec7-6135d75e87] {
      box-sizing: border-box;
      width: 100%;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--field);
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      resize: vertical;
    }
    .pretui-bubble-field[data-scopedcss-20defd9ec7-6135d75e87]:focus {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-bubble-editnote[data-scopedcss-20defd9ec7-6135d75e87] {
      margin: 0;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
    }
    .pretui-bubble-editactions[data-scopedcss-20defd9ec7-6135d75e87] {
      display: flex;
      justify-content: flex-end;
      gap: var(--boxel-sp-xs);
    }
    .pretui-bubble-act[data-scopedcss-20defd9ec7-6135d75e87] {
      height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: inherit;
      cursor: pointer;
    }
    /* Save and resend is the moment's one action */
    .pretui-bubble-act[data-kind='primary'][data-scopedcss-20defd9ec7-6135d75e87] {
      box-shadow: none;
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    .pretui-bubble-act[data-scopedcss-20defd9ec7-6135d75e87]:disabled {
      opacity: 0.5;
      cursor: default;
    }
  }

  /* the bubble's own block owns the type; the message's paragraphs sit
     12px apart, as an answer's do */
  .user-message-text[data-scopedcss-8577621302-c54624bec2] {
    overflow-wrap: anywhere;
  }
  .user-message-text[data-scopedcss-8577621302-c54624bec2] >  * {
    margin-block: 0;
  }
  .user-message-text[data-scopedcss-8577621302-c54624bec2] >  * + * {
    margin-top: var(--step-12, 12px);
  }
  /* the bubble steps back on --inset (the kit's default), so its card
     and file pills are outlined tokens on that inset, in ink-1 */
  .user-message-bubble[data-scopedcss-8577621302-c54624bec2] {
    /* `--boxel-pill-*` overrides win over the variant-class `--pill-*`
       declarations on the Pill element itself; setting the inner
       `--pill-*` vars here would be shadowed by `.variant-default` /
       `.variant-muted` further down the tree. */
    --boxel-pill-background-color: var(--inset);
    --boxel-pill-font-color: var(--foreground);
    --boxel-pill-border-radius: var(--round-row, 8px);
  }
  .is-pending[data-scopedcss-8577621302-c54624bec2] {
    --boxel-pill-background-color: transparent;
    --boxel-pill-font-color: var(--ink-3);
  }
  /* the profile avatar, drawn at the speaker mark's 16px */
  .user-message-bubble[data-scopedcss-8577621302-c54624bec2] {
    --profile-avatar-icon-size: 16px;
    --profile-avatar-icon-border: 0;
  }
  .user-message-text[data-scopedcss-8577621302-c54624bec2] a:hover {
    color: var(--pretui-link, var(--boxel-highlight-hover));
  }

  .ai-assistant-message[data-scopedcss-a985c327b3-aede1cc121] {
    --ai-bot-message-background-color: var(--boxel-650);
    --ai-assistant-message-avatar-size: 0.75rem; /* 12px. */
    --ai-assistant-message-meta-height: 0.75rem; /* 12px */
    --ai-assistant-message-gap: var(--boxel-sp-xxxs);
    --profile-avatar-icon-size: var(--ai-assistant-message-avatar-size);
    --profile-avatar-icon-border: 1px solid var(--boxel-400);
  }
  .ai-assistant-message > * + *[data-scopedcss-a985c327b3-aede1cc121] {
    margin-top: var(--step-12, 12px);
  }
  .content[data-scopedcss-a985c327b3-aede1cc121] {
    /* clip only sideways: wide content stays in the column, and what
       shows below the last line on hover (the bubble's time) isn't cut */
    overflow: clip visible;
    /* room for what hangs outside the text edge (a step row's hover
       inset and its rounded corners), given back so the text edge
       stays where it was */
    padding-inline: 13px;
    margin-inline: -13px;
    /* and a framed row's 1px ring, drawn just outside its box, at the
       bottom of the message (and at its top); the margins below give
       the 2px back, so the parts' own rhythm is what shows */
    padding-block: 2px;
    margin-bottom: -2px;
  }
  .ai-assistant-message > .content[data-scopedcss-a985c327b3-aede1cc121]:first-child {
    margin-top: -2px;
  }
  .ai-assistant-message > * + .content[data-scopedcss-a985c327b3-aede1cc121] {
    margin-top: calc(var(--step-12, 12px) - 2px);
  }
  /* the turn's label sits 8px over what it labels, as the study's
     speaker line does */
  .ai-assistant-message > .turn-head + .content[data-scopedcss-a985c327b3-aede1cc121] {
    margin-top: calc(var(--step-8, 8px) - 2px);
  }
  /* a turn's parts: 12px between blocks; calls in a run 4px apart,
     and plain step rows flush, as one list */
  .content[data-scopedcss-a985c327b3-aede1cc121] >  * + * {
    margin-top: var(--step-12, 12px);
  }
  .content[data-scopedcss-a985c327b3-aede1cc121] >  .room-message-tool + .room-message-tool {
    margin-top: var(--step-4, 4px);
  }
  .content[data-scopedcss-a985c327b3-aede1cc121]
    >  
      .room-message-tool:has(> .pretui-toolrow:not([data-framed]))
        + .room-message-tool:has(> .pretui-toolrow:not([data-framed]))
     {
    margin-top: 0;
  }
  /* a framed call is a box: it stands 8px off the call beside it, so
     two open boxes never touch */
  .content[data-scopedcss-a985c327b3-aede1cc121]
    >  
      .room-message-tool:has(> .pretui-toolrow[data-framed])
        + .room-message-tool
    ,
  .content[data-scopedcss-a985c327b3-aede1cc121]
    >  
      .room-message-tool
        + .room-message-tool:has(> .pretui-toolrow[data-framed])
     {
    margin-top: var(--step-8, 8px);
  }
  /* Choreo's layers come first in a message's region and sit out of
     flow: the rhythm starts at the message's first part, not 12px
     below an invisible layer */
  .content[data-scopedcss-a985c327b3-aede1cc121] >  [data-choreo-tethers] + * {
    margin-top: 0;
  }

  .ai-assistant-message.code-patch-correctness
    .content[data-scopedcss-a985c327b3-aede1cc121]
    >  .room-message-tool.compact + .room-message-tool.compact {
    margin-top: 0;
  }
  /* code in what was written (the reply, the user's message) wraps;
     a Pret UI code block or a tool row's code keeps its own rules */
  [data-scopedcss-a985c327b3-aede1cc121] :is(.pretui-md-block, .markdown-content, .user-message-text) pre {
    white-space: pre-wrap;
  }
  [data-scopedcss-a985c327b3-aede1cc121] :is(.pretui-md-block, .markdown-content, .user-message-text) code {
    overflow-wrap: break-word;
  }

  /* the turn's head sits as a row does: the mark on the mark column
     (16px), its words on the row-title edge (40px) */
  /* the turn's thinking, behind one quiet control in its header */
  .turn-head-thinking[data-scopedcss-a985c327b3-aede1cc121] {
    flex: none;
    white-space: nowrap;
    margin-inline-start: var(--step-8, 8px);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink-3);
    text-decoration: underline;
    text-decoration-color: color-mix(
      in oklch,
      currentColor 40%,
      transparent
    );
    text-underline-offset: 0.18em;
    cursor: pointer;
  }
  .turn-head-thinking[data-scopedcss-a985c327b3-aede1cc121]:hover {
    color: var(--ink-2, var(--boxel-300));
  }
  .turn-head-thinking[data-scopedcss-a985c327b3-aede1cc121]:focus-visible {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* the speaker line and its one control; "Worked for 24s" is the
     line's time, its figures tabular */
  .turn-head[data-scopedcss-a985c327b3-aede1cc121] {
    display: flex;
    align-items: center;
    gap: var(--step-8, 8px);
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }
  .turn-head[data-scopedcss-a985c327b3-aede1cc121] >  .pretui-speaker {
    flex: 0 1 auto;
  }

  .delivery-note[data-scopedcss-a985c327b3-aede1cc121] {
    display: flex;
    align-items: baseline;
    gap: var(--step-8, 8px);
    margin: 0;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    color: var(--ink-2, var(--boxel-450));
  }
  .delivery-note-mark[data-scopedcss-a985c327b3-aede1cc121] {
    color: var(--success, var(--boxel-teal));
  }

  .alert-action-buttons-row[data-scopedcss-a985c327b3-aede1cc121] {
    display: flex;
    justify-content: flex-end;
    gap: var(--boxel-sp-sm);
  }

  .alert-action-buttons-row[data-scopedcss-a985c327b3-aede1cc121] >  .action-button {
    margin-left: 0;
  }

  .add-more-credits-button[data-scopedcss-a985c327b3-aede1cc121] {
    --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
    --boxel-button-min-height: max-content;
    --boxel-button-min-width: max-content;
    border-color: transparent;
    width: fit-content;
    margin-left: auto;
    font-size: var(--type-ui, 12.5px);
    font-weight: 600;
  }
  .credits-action-row[data-scopedcss-a985c327b3-aede1cc121] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--boxel-sp-sm);
  }
  .credits-action-row[data-scopedcss-a985c327b3-aede1cc121] .action-button {
    margin-left: 0;
  }
  .credits-added[data-scopedcss-a985c327b3-aede1cc121] {
    font-size: var(--type-ui, 12.5px);
    font-weight: 600;
  }
  .ai-assistant-message[data-scopedcss-a985c327b3-aede1cc121] {
    position: relative;
  }
  /* the per-message count is a diagnostic: the footer's title and the
     session line say it to the eye; here it is only text for assistive
     tech and tools, with no box that could overlap the next row */
  .content > .token-usage[data-scopedcss-a985c327b3-aede1cc121] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ai-assistant-conversation[data-scopedcss-a985c327b3-fc8991a84b] {
    /* This lets the conversation be visible in the missing border radius of the form, with its gradient */
    margin-bottom: calc(var(--chat-input-area-border-radius) * -1);
    /* the conversation is a grid item: without these, its widest child
       (a long unbroken label, a wide table) sets the panel's width.
       The old scroller got this for free from overflow: auto */
    min-height: 0;
    min-width: 0;
    --pretui-stick-to-bottom-ground: transparent;
    /* the transcript answers the panel's width, not the window's:
       narrow (320), medium (440) and wide (680) panels each read right */
    container-type: inline-size;
    container-name: ai-conversation;
  }
  /* the reader's bubble is Pret UI's UserBubble, which keeps its own
     reading measure (92% narrow, 80%, 70% wide) and hangs left */
  /* narrow: give the text the panel's edges back */
  /* the gutter stays 16px at every width: a framed row and a reply's
     table hang 12px into it, so their text sits on the text edge, and
     4px of panel always shows outside them */
  /* the header's fade runs on this scroll: it must name the element
     that scrolls, which in Pret UI's StickToBottom is the viewport, not
     its content */
  .ai-assistant-conversation[data-scopedcss-a985c327b3-fc8991a84b] .pretui-stick-to-bottom-viewport {
    scroll-timeline: --ai-assistant-chat-scroll-timeline;
    /* the kit keeps the bar thin and its gutter stable; this quietens
       its thumb on the dark panel */
    scrollbar-color: color-mix(in oklch, var(--foreground) 24%, transparent)
      transparent;
  }
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b] {
    display: flex;
    flex-direction: column;
    /* the transcript's base is the UI type (rows, steps, status);
       answers and the reader's bubble set the reading type themselves */
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    /* the transcript's own words (rows, steps, receipts) are settled
       work: ink-2, as the study draws them. Answers and the reader's
       bubble set ink-1 themselves */
    color: var(--pretui-toolrow-settled-ink, var(--foreground));
    --pretui-toolrow-title-size: var(--type-ui, 12.5px);
    /* the spine: text edges at 16 from the transcript's edge (marks at
       16, row titles at 40) */
    /* at the end, just clear of the fade over the composer's edge: the
       last answer ends close to the box it was asked from */
    padding: var(--step-16, 16px) var(--ai-assistant-panel-padding)
      calc(
        var(--ai-assistant-panel-bottom-gradient-height) +
          var(--step-4, 4px)
      )
      var(--ai-assistant-panel-padding);
  }
  /* one rhythm: 12 between blocks within a turn, 24 between turns */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b] >  * + *,
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b] >  * + .meta-hidden {
    margin-top: var(--step-12, 12px);
  }
  /* a change of speaker starts a turn: 24px, either way round */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  .from-assistant + .ai-assistant-message:not(.from-assistant),
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  
      .ai-assistant-message:not(.from-assistant)
        + .ai-assistant-message.from-assistant
     {
    margin-top: var(--step-24, 24px);
  }
  /* a headerless bot-tool indicator message stacks flush against a
     preceding message of the same kind — headered or not, since the run's
     first message may carry the header — so a burst of reads presents as
     one list */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  .bot-tools-only + .bot-tools-only.meta-hidden {
    margin-top: 0;
  }
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b] >  * + .code-patch-correctness {
    margin-top: var(--step-8, 8px);
  }
  /* a turn's calls are one list across its events: a call event under
     one that ended in a call stacks 4px apart; an answer keeps the
     12px a block gets */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  
      .from-assistant:has(.room-message-tool) + .work-part.meta-hidden
     {
    margin-top: var(--step-4, 4px);
  }
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  
      .from-assistant:has(.room-message-tool > .pretui-toolrow[data-framed])
        + .work-part.meta-hidden
    ,
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    >  
      .from-assistant:has(.room-message-tool)
        + .work-part.meta-hidden:has(
          .room-message-tool > .pretui-toolrow[data-framed]
        )
     {
    margin-top: var(--step-8, 8px);
  }
  /* a check right after a write is a step like any other: on the
     rows' edge, at their size, 4px under the write as work parts are */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    .code-patch-correctness .pretui-toolrow-header {
    min-height: 24px;
    padding-block: 4px;
  }

  /* a part folded away is hidden at once; its region moves what is
     left (motion/transcript-motion.gts) */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b]
    
      :is(.ai-assistant-conversation-messages > *, .content > *)[hidden]
     {
    display: none;
  }
  /* Choreo's own layers (leavers, raised, wires) come first in the
     region and sit out of flow; the rhythm starts at the first message */
  .ai-assistant-conversation-messages[data-scopedcss-a985c327b3-fc8991a84b] >  [data-choreo-tethers] + * {
    margin-top: 0;
  }

  .example-container[data-scopedcss-cee90e17fb-04416a52ea] {
    background: var(--boxel-ai-purple);
    width: 371px;
    overflow: hidden;
    position: relative;
    --profile-avatar-icon-background: blue;
  }

  .toggle-and-realm-icon[data-scopedcss-2724285e6e-9e37aca8f6] {
    width: 100%;
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--boxel-sp-4xs);
  }

  .skill-toggle[data-scopedcss-2724285e6e-9e37aca8f6] {
    --pill-padding: 0 var(--boxel-sp-xxxs) 0 var(--boxel-sp-xs);
    --pill-gap: var(--boxel-sp-xxxs);
    --pill-icon-size: 18px;
    --boxel-realm-icon-size: var(--pill-icon-size);
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid var(--boxel-400);
    --boxel-pill-border-radius: var(--round-row, 8px);
    height: var(--pill-height, 1.875rem);
    overflow: hidden;
  }
  .skill-dropdown__trigger[data-scopedcss-2724285e6e-9e37aca8f6] {
    --boxel-icon-button-height: 26px;
    --boxel-icon-button-width: 26px;
  }
  .skill-toggle--unavailable[data-scopedcss-2724285e6e-9e37aca8f6] {
    grid-template-columns: 1fr;
    border-style: dashed;
    color: var(--boxel-450);
    font-style: italic;
  }
  .is-autoattached[data-scopedcss-2724285e6e-9e37aca8f6] {
    border-style: dashed;
  }
  .card-content[data-scopedcss-2724285e6e-9e37aca8f6] {
    max-width: 100%;
    min-width: 0;
    max-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .toggle[data-scopedcss-2724285e6e-9e37aca8f6] {
    margin-left: var(--boxel-sp-xxxs);
  }

  .pill-menu[data-scopedcss-a60d4c9c1a-9572978145] {
    --boxel-header-gap: var(--boxel-sp-4xs);
    --boxel-header-detail-margin-left: 0;
    --pill-menu-spacing: var(--boxel-pill-menu-spacing, var(--boxel-sp-xs));
    --boxel-header-padding: 0 0 0 var(--pill-menu-spacing);
    --button-outline: 2px;
    --boxel-header-min-height: fit-content;
    --pill-menu-gradient-height: 5px;
    --pill-menu-content-max-height: 18.75rem;

    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 100%;
    min-height: max-content;
    width: var(--boxel-pill-menu-width, 100%);
    background-color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-xl);
    color: var(--boxel-dark);
    font: 700 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp);
    box-shadow: var(--boxel-box-shadow);
    transition: width 0.2s ease-in;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pill-menu[data-scopedcss-a60d4c9c1a-9572978145] {
      /* The collapsed pill row's height, so the swap between button and
         menu lands exactly where the height animation starts/ends. */
      --pill-menu-collapsed-height: 2.5rem;

      /* Lets the height keyframe interpolate to its auto endpoint. */
      interpolate-size: allow-keywords;
      overflow: hidden;
      animation: pill-menu-expand-data-scopedcss-a60d4c9c1a-9572978145 var(--pill-menu-expand-duration, 0.2s)
        ease-out;
    }
    .pill-menu.is-collapsing[data-scopedcss-a60d4c9c1a-9572978145] {
      /* A separately named animation: only an animation-name change
         restarts the animation and re-arms its animationend event. */
      animation: pill-menu-collapse-data-scopedcss-a60d4c9c1a-9572978145 var(--pill-menu-collapse-duration, 0.15s) ease-in forwards;
    }

    /* While the menu height is animating, the squeezed content region
       would briefly become scrollable and flash a scrollbar; suppress it
       for the duration. hidden (not clip) keeps the region
       programmatically scrollable for the scroll-into-view modifier. */
    .pill-menu.is-expanding .menu-content-scroll[data-scopedcss-a60d4c9c1a-9572978145],
    .pill-menu.is-collapsing .menu-content-scroll[data-scopedcss-a60d4c9c1a-9572978145] {
      overflow-y: hidden;
    }
  }
  .pill-menu-button[data-scopedcss-a60d4c9c1a-9572978145] {
    --boxel-button-font: 600 var(--boxel-font-xs);
    --boxel-button-secondary-border: transparent;
    --boxel-button-min-width: 0;
    --boxel-button-transition:
      var(--boxel-transition-properties), scale 0.15s ease-out;
    padding-inline: var(--boxel-sp-2xs);
    gap: var(--boxel-sp-3xs);
    width: fit-content;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .pill-menu-button[data-scopedcss-a60d4c9c1a-9572978145]:not(:disabled):active {
    scale: 0.96;
  }
  .menu-header[data-scopedcss-a60d4c9c1a-9572978145] {
    overflow: hidden;
    padding: var(--boxel-sp-sm);
    font: 700 var(--boxel-font-xs);
  }
  .menu-header[data-scopedcss-a60d4c9c1a-9572978145] .title {
    font: 700 var(--boxel-font);
  }
  .header-button[data-scopedcss-a60d4c9c1a-9572978145] {
    margin: var(--button-outline);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--boxel-border-radius-xl);
    font: 700 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-button[data-scopedcss-a60d4c9c1a-9572978145]:focus:focus-visible {
    outline-color: var(--boxel-highlight);
  }
  .collapse-icon[data-scopedcss-a60d4c9c1a-9572978145] {
    color: var(--icon-color, var(--boxel-dark));
  }

  .detail-close-button[data-scopedcss-a60d4c9c1a-9572978145] {
    border: none;
    padding: 0;
    background: none;
  }

  .expandable-header-button[data-scopedcss-a60d4c9c1a-9572978145] {
    width: var(
      --boxel-pill-menu-expandable-header-button-width,
      fit-content
    );
    color: var(--boxel-450);
    text-transform: uppercase;
  }
  .menu-content[data-scopedcss-a60d4c9c1a-9572978145] {
    /* Non-scrolling wrapper: the edge shadows are its pseudo-elements and
       it is their containing block, so they stay pinned to the visible
       edges while .menu-content-scroll scrolls underneath them. */
    position: relative;
    display: grid;
    min-height: 0;

    timeline-scope: --pill-menu-content-scroll-timeline;
  }

  .menu-content-scroll[data-scopedcss-a60d4c9c1a-9572978145] {
    padding: 0 var(--boxel-sp-sm);
    display: grid;
    gap: var(--pill-menu-spacing);
    overflow-y: auto;
    min-height: 0;
    max-height: var(--pill-menu-content-max-height);

    /* The scroll region and the timeline the edge shadows animate on are
       the same element, so a consumer capping the height here gets the
       shadows for free — no inner list should scroll on its own. */
    scroll-timeline: --pill-menu-content-scroll-timeline;
  }

  .pill-menu:not(:has(.menu-content-actions > *)) .menu-content-scroll[data-scopedcss-a60d4c9c1a-9572978145] {
    padding-bottom: var(--boxel-sp-sm);
  }

  .menu-content[data-scopedcss-a60d4c9c1a-9572978145]::before,
  .menu-content[data-scopedcss-a60d4c9c1a-9572978145]::after {
    content: '';
    display: block;
    width: 100%;
    height: var(--pill-menu-gradient-height);
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }

  .menu-content[data-scopedcss-a60d4c9c1a-9572978145]::before {
    top: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 100%
    );

    animation: scroll-pill-menu-content-data-scopedcss-a60d4c9c1a-9572978145 linear forwards;
    animation-timeline: --pill-menu-content-scroll-timeline;
  }

  .menu-content[data-scopedcss-a60d4c9c1a-9572978145]::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 100%
    );

    animation: scroll-pill-menu-content-data-scopedcss-a60d4c9c1a-9572978145 reverse linear backwards;
    animation-timeline: --pill-menu-content-scroll-timeline;

    bottom: 0;
  }

  .menu-content-actions[data-scopedcss-a60d4c9c1a-9572978145] {
    border-top: 1px solid var(--boxel-200);
    padding-block: var(--boxel-sp-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-3xs);
  }

  .menu-content-actions[data-scopedcss-a60d4c9c1a-9572978145]:not(:has(*)) {
    display: none;
  }

  .pill-menu[data-scopedcss-a60d4c9c1a-9572978145] .menu-header .detail {
    order: -1;
    margin-left: 0;
  }
  .minimized-arrow[data-scopedcss-a60d4c9c1a-9572978145] {
    transform: rotate(180deg);
    transform-origin: center;
    flex-shrink: 0;
  }

  @keyframes pill-menu-expand-data-scopedcss-a60d4c9c1a-9572978145 {
    /* min-height is pinned in both keyframes so the base
       min-height: max-content doesn't hold the menu open mid-animation. */
    from {
      height: var(--pill-menu-collapsed-height);
      min-height: 0;
    }
    to {
      height: auto;
      min-height: 0;
    }
  }

  @keyframes pill-menu-collapse-data-scopedcss-a60d4c9c1a-9572978145 {
    from {
      height: auto;
      min-height: 0;
    }
    to {
      height: var(--pill-menu-collapsed-height);
      min-height: 0;
    }
  }

  @keyframes scroll-pill-menu-content-data-scopedcss-a60d4c9c1a-9572978145 {
    0% {
      opacity: 0;
    }
    1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  .skill-menu[data-scopedcss-69ef22e013-8f022ac2f1] {
    background-color: transparent;
    box-shadow: none;
  }
  .skills-length[data-scopedcss-69ef22e013-8f022ac2f1] {
    min-width: 0;
  }
  /* closed, the count stays the button's accessible name, unseen */
  .skills-count[data-scopedcss-69ef22e013-8f022ac2f1] {
    font-size: var(--type-ui, 12.5px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--boxel-dark);
  }
  .skills-length--hidden[data-scopedcss-69ef22e013-8f022ac2f1] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skills-icon[data-scopedcss-69ef22e013-8f022ac2f1] {
    flex: none;
  }
  .skill-menu[data-collapsed][data-scopedcss-69ef22e013-8f022ac2f1] .minimized-arrow {
    display: none;
  }
  .skill-list[data-scopedcss-69ef22e013-8f022ac2f1] {
    display: grid;
    gap: var(--step-4, 4px);
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .skill-list[data-scopedcss-69ef22e013-8f022ac2f1] .card-content {
    max-width: initial;
    font-family: var(--boxel-font-family);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 600;
  }
  .attach-button[data-scopedcss-69ef22e013-8f022ac2f1] {
    --boxel-button-font: 600 var(--type-ui, 12.5px) /
      var(--leading-ui, 18px) var(--boxel-font-family);
    --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
    --boxel-button-disabled-background: none;
    --boxel-button-disabled-opacity: 1;

    justify-content: flex-start;
    text-wrap: balance;
  }
  .attach-button[data-scopedcss-69ef22e013-8f022ac2f1] >  svg > path {
    stroke: none;
  }

  .mini-card-chooser[data-scopedcss-25cc3a1708-d087770017] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--boxel-light);
    /* Share the file chooser's compact scale so the two lists match when
       toggling tabs in the markdown embed chooser. */
    font: var(--boxel-font-sm);
  }
  .mini-card-chooser__header[data-scopedcss-25cc3a1708-d087770017] {
    flex: 0 0 auto;
    /* Top padding also absorbs the spacing removed from the results scroll
       container's top (dropped so the sticky results header pins flush,
       without a transparent band above it). Bottom keeps the search bar's
       2px focus outline clear of the results list below. */
    padding: calc(var(--boxel-sp-xs) + var(--boxel-sp-xs))
      var(--boxel-sp-xs) var(--boxel-sp-4xs);
  }
  /* Pill-shaped, design-matched bar height. SearchBar's defaults are
     tuned for the full search-sheet (50px tall, generous focus ring);
     in the mini envelope we want a tighter pill. */
  .mini-card-chooser__header[data-scopedcss-25cc3a1708-d087770017] .search-sheet__search-bar {
    min-height: 2.5rem;
    border-radius: 999px;
  }
  .mini-card-chooser__results[data-scopedcss-25cc3a1708-d087770017] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .example-container[data-scopedcss-b63b83895e-75170228c5] {
    width: 360px;
    height: 480px;
    border: 1px solid var(--boxel-border-color, var(--boxel-300));
    border-radius: var(--boxel-border-radius);
    overflow: hidden;
  }
  .selection-readout[data-scopedcss-b63b83895e-75170228c5] {
    margin-top: var(--boxel-sp-xs);
    font: var(--boxel-font-sm);
  }

  .mask[data-scopedcss-42511afe7c-86a71fc77b] {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav[data-scopedcss-42511afe7c-86a71fc77b] {
    position: relative;
    min-height: 100%;
  }
  nav[data-scopedcss-42511afe7c-86a71fc77b]:focus {
    outline: none;
  }

  .level[data-scopedcss-42511afe7c-cf50230efa] {
    --icon-length: 14px;
    --icon-margin: 4px;

    padding-left: 0em;
  }

  .level .level[data-scopedcss-42511afe7c-cf50230efa] {
    padding-left: 1em;
  }

  .directory[data-scopedcss-42511afe7c-cf50230efa],
  .file[data-scopedcss-42511afe7c-cf50230efa] {
    border-radius: var(--boxel-border-radius-xs);
    background: transparent;
    border: 0;
    padding: var(--boxel-sp-xxxs);
    width: 100%;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    transition:
      background-color var(--boxel-transition),
      outline-color var(--boxel-transition),
      box-shadow var(--boxel-transition);
  }

  .directory[data-scopedcss-42511afe7c-cf50230efa]:hover:not(.cursor),
  .file[data-scopedcss-42511afe7c-cf50230efa]:hover:not(.cursor):not(.selected) {
    background-color: var(--boxel-200);
  }

  /* Selected file: green inverse state */
  .file.selected[data-scopedcss-42511afe7c-cf50230efa] {
    color: var(--boxel-dark);
    background-color: var(--boxel-highlight);
  }

  /* Keyboard cursor on files: same green inverse state */
  .file.cursor[data-scopedcss-42511afe7c-cf50230efa] {
    color: var(--boxel-dark);
    background-color: var(--boxel-highlight);
  }

  /* Keyboard cursor on directories, and on unselected files in
     multi-select where the cursor and the selection differ: lighter
     active state */
  .directory.cursor[data-scopedcss-42511afe7c-cf50230efa],
  .file.multi-select.cursor[data-scopedcss-42511afe7c-cf50230efa]:not(.selected) {
    color: var(--boxel-dark);
    background-color: color-mix(
      in srgb,
      var(--boxel-highlight) 24%,
      var(--boxel-light)
    );
    box-shadow: inset 0 0 0 1px var(--boxel-highlight);
  }

  /* Ensure stacked states stay visually identical */
  .file.selected.cursor[data-scopedcss-42511afe7c-cf50230efa] {
    box-shadow: none;
  }

  .directory[data-scopedcss-42511afe7c-cf50230efa] {
    padding-left: 0;
  }

  .directory[data-scopedcss-42511afe7c-cf50230efa] .icon {
    width: var(--icon-length);
    height: var(--icon-length);
    margin-bottom: -2px;
    padding: 0 2px;
  }

  .directory[data-scopedcss-42511afe7c-cf50230efa] .icon.closed {
    transform: rotate(-90deg);
  }

  .file[data-scopedcss-42511afe7c-cf50230efa] {
    padding-left: calc(var(--icon-length) + var(--icon-margin));
  }

  .realm-dropdown-trigger[data-scopedcss-ad7b4c7a09-0889af90f9] {
    height: 37px;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-items: flex-start;
    gap: var(--boxel-sp-xxs);
    padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
    border-radius: var(--boxel-border-radius);
  }
  .realm-dropdown-trigger > *[data-scopedcss-ad7b4c7a09-0889af90f9] {
    flex-shrink: 0;
  }
  .arrow-icon[data-scopedcss-ad7b4c7a09-0889af90f9] {
    margin-left: auto;
  }
  .realm-dropdown-trigger[aria-expanded='true'] .arrow-icon[data-scopedcss-ad7b4c7a09-0889af90f9] {
    transform: scaleY(-1);
  }
  .selected-realm[data-scopedcss-ad7b4c7a09-0889af90f9] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    min-width: 0;
    max-width: 100%;
  }
  .selected-item[data-scopedcss-ad7b4c7a09-0889af90f9] {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .read-only-tag[data-scopedcss-ad7b4c7a09-0889af90f9] {
    color: #777;
    font: 500 var(--boxel-font-xs);
    overflow: hidden;
    white-space: nowrap;
    margin-left: auto;
  }
  .realm-dropdown-menu[data-scopedcss-ad7b4c7a09-0889af90f9] {
    --boxel-menu-item-content-padding: var(--boxel-sp-xs);
    --boxel-menu-item-gap: var(--boxel-sp-xs);
    min-width: 13rem;
    max-height: 13rem;
    overflow-y: scroll;
  }
  .realm-dropdown-search[data-scopedcss-ad7b4c7a09-0889af90f9] {
    --boxel-input-search-background-color: transparent;
    --boxel-input-search-color: var(--boxel-dark);
    --boxel-input-height: 2rem;
    padding: var(--boxel-sp-xxs);
    border-bottom: 1px solid var(--boxel-200);
  }
  .realm-dropdown-search-input[data-scopedcss-ad7b4c7a09-0889af90f9] {
    width: 100%;
  }
  /* The menu clips its items to its own rounded corners, which only
     belong at the top of the dropdown, not under the search field */
  .realm-dropdown-search + .realm-dropdown-menu[data-scopedcss-ad7b4c7a09-0889af90f9] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .realm-dropdown-no-results[data-scopedcss-ad7b4c7a09-0889af90f9] {
    margin: 0;
    padding: var(--boxel-sp-xs);
    min-width: 13rem;
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
  }
  .realm-dropdown-menu[data-scopedcss-ad7b4c7a09-0889af90f9] .menu-item__icon-url {
    border-radius: var(--boxel-border-radius-xs);
  }
  .realm-dropdown-menu[data-scopedcss-ad7b4c7a09-0889af90f9] .menu-item .subtext {
    margin-left: auto;
    font: 500 var(--boxel-font-xs);
    color: var(--boxel-secondary-text-color, #777);
    text-align: right;
  }

  .mini-file-chooser[data-scopedcss-a9855c2d90-6786754a44] {
    --boxel-border-color: var(--boxel-400);
    --boxel-button-border-color: var(--boxel-border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: var(--boxel-sp-xs);
    background-color: var(--boxel-light);
    color: var(--boxel-dark);
    font: var(--boxel-font-sm);
  }
  .mini-file-chooser__field[data-scopedcss-a9855c2d90-6786754a44] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-3xs);
    flex: 0 0 auto;
  }
  .mini-file-chooser__tree-field[data-scopedcss-a9855c2d90-6786754a44] {
    flex: 1 1 auto;
    min-height: 0;
  }
  .mini-file-chooser__label[data-scopedcss-a9855c2d90-6786754a44] {
    font: var(--boxel-font-sm);
    font-weight: 600;
  }
  .mini-file-chooser__realm-chooser[data-scopedcss-a9855c2d90-6786754a44] {
    width: 100%;
  }
  .mini-file-chooser__tree[data-scopedcss-a9855c2d90-6786754a44] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--boxel-border-color);
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp-2xs);
  }
  .mini-file-chooser__tree[data-scopedcss-a9855c2d90-6786754a44]:has(:focus-visible) {
    outline: 2px solid var(--boxel-highlight);
    outline-offset: -2px;
  }
  .mini-file-chooser__footer[data-scopedcss-a9855c2d90-6786754a44] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    min-width: 0;
    padding-top: var(--boxel-sp-2xs);
    padding-left: var(--boxel-sp-xs);
    padding-bottom: var(--boxel-sp-xs);
  }
  .mini-file-chooser__upload-button[data-scopedcss-a9855c2d90-6786754a44] {
    font-size: inherit;
  }
  .mini-file-chooser__upload-progress[data-scopedcss-a9855c2d90-6786754a44] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    min-width: 0;
  }
  .mini-file-chooser__upload-name[data-scopedcss-a9855c2d90-6786754a44] {
    font: var(--boxel-font-xs);
    color: var(--boxel-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .mini-file-chooser__upload-spinner[data-scopedcss-a9855c2d90-6786754a44] {
    --boxel-loading-indicator-size: 1.25em;
  }
  .mini-file-chooser__upload-error-row[data-scopedcss-a9855c2d90-6786754a44] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    min-width: 0;
  }
  .mini-file-chooser__upload-error[data-scopedcss-a9855c2d90-6786754a44] {
    color: var(--boxel-error-200);
    font: var(--boxel-font-xs);
    overflow-wrap: anywhere;
  }
  /* Drag-and-drop overlay: dim the chooser and surface the drop label. */
  .mini-file-chooser[data-drop-zone-active][data-scopedcss-a9855c2d90-6786754a44]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--boxel-darker-hover);
    pointer-events: none;
    z-index: 2;
  }
  .mini-file-chooser[data-drop-zone-active][data-scopedcss-a9855c2d90-6786754a44]::after {
    content: attr(data-drop-zone-label);
    position: absolute;
    inset: 0;
    padding: var(--boxel-sp-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--boxel-light);
    font: 600 var(--boxel-font);
    text-align: center;
    pointer-events: none;
    z-index: 3;
  }

  .example-container[data-scopedcss-c05bcee642-75170228c5] {
    width: 360px;
    height: 480px;
    border: 1px solid var(--boxel-border-color, var(--boxel-300));
    border-radius: var(--boxel-border-radius);
    overflow: hidden;
  }
  .selection-readout[data-scopedcss-c05bcee642-75170228c5] {
    margin-top: var(--boxel-sp-xs);
    font: var(--boxel-font-sm);
  }

  .placement-toggle[data-scopedcss-5ee2dca419-be22cbd501] {
    display: inline-flex;
    border: 1px solid var(--boxel-border-color);
    border-radius: 999px;
    background-color: var(--boxel-light);
    overflow: hidden;
  }
  .placement-toggle__option[data-scopedcss-5ee2dca419-be22cbd501] {
    appearance: none;
    border: none;
    background: transparent;
    padding: var(--boxel-sp-5xs) var(--boxel-sp);
    font: 600 var(--boxel-font-sm);
    color: var(--boxel-dark);
    cursor: pointer;
    line-height: 1.2;
    min-width: 3.5rem;
    flex: 1;
  }
  .placement-toggle__option.is-active[data-scopedcss-5ee2dca419-be22cbd501] {
    background-color: var(--boxel-200);
  }
  .placement-toggle__option[data-scopedcss-5ee2dca419-be22cbd501]:focus-visible {
    outline: 2px solid var(--boxel-highlight);
    outline-offset: -2px;
  }
  .placement-toggle__option[data-scopedcss-5ee2dca419-be22cbd501]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .markdown-embed-preview[data-scopedcss-684ac4b4b2-8fb53502ce] {
    max-width: 100%;
  }
  .markdown-embed-preview--inline[data-scopedcss-684ac4b4b2-8fb53502ce] {
    display: inline-flex;
    vertical-align: middle;
  }
  .markdown-embed-preview--inline-embed[data-scopedcss-684ac4b4b2-8fb53502ce] {
    display: inline-block;
    vertical-align: middle;
  }
  .markdown-embed-preview--block[data-scopedcss-684ac4b4b2-8fb53502ce] {
    display: block;
  }
  .markdown-embed-preview--fitted[data-scopedcss-684ac4b4b2-8fb53502ce] {
    border-radius: var(--boxel-border-radius);
    overflow: hidden;
  }
  /* Frame the embed so reviewers can see where the card body sits against
     the pane background — applied for embedded/isolated/fitted, never atom
     (which is its own pill shape). */
  .markdown-embed-preview--card-frame[data-scopedcss-684ac4b4b2-8fb53502ce] {
    border: 1px solid var(--boxel-300);
    border-radius: var(--boxel-border-radius);
    background-color: var(--boxel-light);
    overflow: hidden;
  }
  /* Loading placeholder: keep the resolved embed's footprint (size + frame)
     but center a small spinner where the card body will land. Force a flex
     box so the spinner centers in the block / inline-embed variants (the atom
     variant is already inline-flex). */
  .markdown-embed-preview.is-loading[data-scopedcss-684ac4b4b2-8fb53502ce] {
    align-items: center;
    justify-content: center;
  }
  .markdown-embed-preview--block.is-loading[data-scopedcss-684ac4b4b2-8fb53502ce] {
    display: flex;
  }
  .markdown-embed-preview--inline-embed.is-loading[data-scopedcss-684ac4b4b2-8fb53502ce] {
    display: inline-flex;
  }
  /* Small enough to sit inside an atom pill, unobtrusive in larger frames. */
  .markdown-embed-preview__spinner[data-scopedcss-684ac4b4b2-8fb53502ce] {
    --boxel-loading-indicator-size: 1.25rem;
  }

  .broken-embed[data-scopedcss-684ac4b4b2-87d9bb71e2] {
    max-width: 100%;
  }
  .broken-embed--inline[data-scopedcss-684ac4b4b2-87d9bb71e2] {
    display: inline-flex;
    vertical-align: middle;
  }
  .broken-embed--inline-embed[data-scopedcss-684ac4b4b2-87d9bb71e2] {
    display: inline-block;
    vertical-align: middle;
  }
  .broken-embed--block[data-scopedcss-684ac4b4b2-87d9bb71e2] {
    display: block;
  }

  .markdown-embed-preview-doc[data-scopedcss-684ac4b4b2-8cf02343e8] {
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
  }
  .markdown-embed-preview-doc__line[data-scopedcss-684ac4b4b2-8cf02343e8] {
    display: block;
    height: 0.75rem;
    border-radius: var(--boxel-border-radius-sm);
    background-color: var(--boxel-200);
  }
  .markdown-embed-preview-doc__line.is-short[data-scopedcss-684ac4b4b2-8cf02343e8] {
    width: 60%;
  }
  .markdown-embed-preview-doc__para[data-scopedcss-684ac4b4b2-8cf02343e8] {
    margin: 0;
    line-height: 2.2;
  }
  .markdown-embed-preview-doc__word[data-scopedcss-684ac4b4b2-8cf02343e8] {
    display: inline-block;
    width: 5rem;
    height: 0.75rem;
    margin: 0 var(--boxel-sp-5xs);
    border-radius: var(--boxel-border-radius-sm);
    background-color: var(--boxel-200);
    vertical-align: middle;
  }
  .markdown-embed-preview-doc__word.is-sm[data-scopedcss-684ac4b4b2-8cf02343e8] {
    width: 3rem;
  }
  .markdown-embed-preview-doc__word.is-lg[data-scopedcss-684ac4b4b2-8cf02343e8] {
    width: 7rem;
  }

  .markdown-embed-preview-pane[data-scopedcss-18b3afc343-aff3a2cb99] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* Inherit the preview column's off-white surface; the inner card
       viewport supplies its own background. */
    background-color: transparent;
  }
  .markdown-embed-preview-pane__header[data-scopedcss-18b3afc343-aff3a2cb99] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--boxel-sp-sm) var(--boxel-sp) var(--boxel-sp-xs);
  }
  .markdown-embed-preview-pane__viewport[data-scopedcss-18b3afc343-aff3a2cb99] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--boxel-sp);
    overflow: auto;
    background-color: var(--boxel-100);
  }
  .markdown-embed-preview-pane__format-select[data-scopedcss-18b3afc343-aff3a2cb99] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 330px;
    --boxel-select-trigger-padding: var(--boxel-sp-2xs);
  }
  .markdown-embed-preview-pane__format-option-name[data-scopedcss-18b3afc343-aff3a2cb99] {
    font-weight: 500;
  }
  .markdown-embed-preview-pane__size[data-scopedcss-18b3afc343-aff3a2cb99] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-3xs);
    --boxel-input-icon-size: fit-content;
  }
  .markdown-embed-preview-pane__size-input[data-scopedcss-18b3afc343-aff3a2cb99] {
    --boxel-input-height: 30px;
    --boxel-input-width: 46px;
    padding: var(--boxel-sp-4xs);
    text-align: center;
  }
  .markdown-embed-preview-pane__size-input[data-scopedcss-18b3afc343-aff3a2cb99] .boxel-input {
    padding: 0;
    text-align: center;
    font: 600 var(--boxel-font-sm);
  }
  .markdown-embed-preview-pane__size-x[data-scopedcss-18b3afc343-aff3a2cb99] {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    --icon-color: var(--boxel-dark);
  }
  .markdown-embed-preview-pane__footer[data-scopedcss-18b3afc343-aff3a2cb99] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs) var(--boxel-sp) var(--boxel-sp);
  }
  .markdown-embed-preview-pane__cta[data-scopedcss-18b3afc343-aff3a2cb99] {
    --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-sm);
    font-weight: 600;
  }

  .side-by-side[data-scopedcss-a1c2ab2811-9241ed992e] {
    display: flex;
    gap: var(--boxel-sp);
    height: 480px;
  }
  .panel[data-scopedcss-a1c2ab2811-9241ed992e] {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--boxel-border-color, var(--boxel-300));
    border-radius: var(--boxel-border-radius);
    overflow: hidden;
  }
  .hint[data-scopedcss-a1c2ab2811-9241ed992e] {
    padding: var(--boxel-sp);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
  }
  .readout[data-scopedcss-a1c2ab2811-9241ed992e] {
    margin-top: var(--boxel-sp-xs);
    font: var(--boxel-font-sm);
  }

  .picker[data-scopedcss-2a4e744223-c9b9366996] {
    width: 360px;
    height: 360px;
    border: 1px solid var(--boxel-border-color, var(--boxel-300));
    border-radius: var(--boxel-border-radius);
    overflow: hidden;
  }
  .live[data-scopedcss-2a4e744223-c9b9366996] {
    margin-top: var(--boxel-sp);
    padding: var(--boxel-sp);
    border: 1px dashed var(--boxel-300);
    border-radius: var(--boxel-border-radius);
  }
  .gallery-toggle[data-scopedcss-2a4e744223-c9b9366996] {
    margin-top: var(--boxel-sp);
  }
  .gallery-toggle summary[data-scopedcss-2a4e744223-c9b9366996] {
    cursor: pointer;
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    margin-bottom: var(--boxel-sp-xs);
  }
  .gallery[data-scopedcss-2a4e744223-c9b9366996] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp);
  }
  .gallery figcaption[data-scopedcss-2a4e744223-c9b9366996] {
    margin-bottom: var(--boxel-sp-xxs);
    font: var(--boxel-font-xs);
    color: var(--boxel-450);
  }
  .hint[data-scopedcss-2a4e744223-c9b9366996] {
    margin-top: var(--boxel-sp-xs);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
  }

  :root {
    --search-sheet-closed-height: calc(
      var(--operator-mode-bottom-bar-item-height) +
        var(--operator-mode-spacing)
    );
    --search-sheet-closed-width: var(--container-button-size);
    --search-sheet-prompt-height: 10.45rem;
  }

  .search-sheet[data-scopedcss-338647613d-b0eb498e6b] {
    --search-sheet-left-offset: calc(var(--operator-mode-spacing));
    --search-sheet-right-offset: calc(
      var(--container-button-size) + 2 * var(--operator-mode-spacing)
    );
    background-color: transparent;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    left: var(--search-sheet-left-offset);
    width: calc(
      100% - var(--search-sheet-left-offset) -
        var(--search-sheet-right-offset)
    );
    position: absolute;
    z-index: var(--host-search-sheet-z-index);
    transition:
      height var(--boxel-transition),
      width var(--boxel-transition);
  }
  .search-sheet[data-scopedcss-338647613d-b0eb498e6b]:not(.closed) {
    overflow: hidden;
    background-color: var(--boxel-light);
    border-top-right-radius: var(--boxel-border-radius-xxl);
    border-top-left-radius: var(--boxel-border-radius-xxl);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .search-sheet__search-input-group[data-scopedcss-338647613d-b0eb498e6b] {
    width: calc(100% - 2 * var(--boxel-sp-xs));
    margin: var(--boxel-sp-xs);
    flex-wrap: nowrap;
    overflow: hidden;
    animation: fade-in-data-scopedcss-338647613d-b0eb498e6b var(--boxel-transition);
  }
  @keyframes fade-in-data-scopedcss-338647613d-b0eb498e6b {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .results .search-sheet__search-input-group[data-scopedcss-338647613d-b0eb498e6b] {
    margin-bottom: 3px;
  }

  .closed[data-scopedcss-338647613d-b0eb498e6b] {
    height: var(--search-sheet-closed-height);
    width: var(--search-sheet-closed-width);
  }

  .prompt[data-scopedcss-338647613d-b0eb498e6b] {
    height: var(--search-sheet-prompt-height);
    box-shadow: var(--boxel-deep-box-shadow);
  }

  .results[data-scopedcss-338647613d-b0eb498e6b] {
    height: calc(100% - var(--stack-padding-top));
    box-shadow: var(--boxel-deep-box-shadow);
  }

  .search-sheet__content[data-scopedcss-338647613d-b0eb498e6b] {
    padding-inline: var(--boxel-sp);
  }

  .footer[data-scopedcss-338647613d-b0eb498e6b] {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    opacity: 1;
    height: var(--stack-card-footer-height);
    padding: var(--boxel-sp);
    background-color: var(--boxel-light);
    border-top: 1px solid var(--boxel-200);
    overflow: hidden;

    transition:
      flex var(--boxel-transition),
      opacity calc(var(--boxel-transition) / 4);
  }

  .closed .footer[data-scopedcss-338647613d-b0eb498e6b],
  .prompt .footer[data-scopedcss-338647613d-b0eb498e6b] {
    height: 0;
    padding: 0;
  }

  .closed .footer[data-scopedcss-338647613d-b0eb498e6b],
  .prompt .footer[data-scopedcss-338647613d-b0eb498e6b] {
    height: 0;
    opacity: 0;
  }

  .buttons[data-scopedcss-338647613d-b0eb498e6b] {
    margin-top: var(--boxel-sp-xs);
  }
  .buttons > * + *[data-scopedcss-338647613d-b0eb498e6b] {
    margin-left: var(--boxel-sp-xs);
  }

  .open-search-field[data-scopedcss-338647613d-b0eb498e6b] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: top left;
  }
  .open-search-field[data-scopedcss-338647613d-b0eb498e6b]:focus:focus-visible {
    outline-offset: 0;
    outline-width: 2px;
  }

  .example-container[data-scopedcss-a51fb67ee3-b680393219] {
    background: #494559;
    min-height: 300px;
    overflow: hidden;
    position: relative;
  }

  .container[data-scopedcss-83d675b5ff-e9ca62d4c7] {
    margin: 5em;
  }

  .error[data-scopedcss-83d675b5ff-e9ca62d4c7] {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .breadcrumb-item-icon[data-scopedcss-6a93ae0849-74054e2b81] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--boxel-highlight);
  }

  .label[data-scopedcss-6a93ae0849-74054e2b81] {
    font: 500 var(--boxel-font-sm);
    color: var(--boxel-light);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .muted[data-scopedcss-6a93ae0849-74054e2b81] {
    opacity: 0.7;
    font-weight: 500;
  }

  .breadcrumb-item[data-scopedcss-6a93ae0849-e2b0a99fcb] {
    display: inline-flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    max-width: 16rem;
    min-height: 1.5rem;
    box-sizing: border-box;
    background: none;
    border: none;
    padding-block: var(--boxel-sp-4xs);
    padding-inline: 0;
    margin: 0;
    color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  button.breadcrumb-item[data-scopedcss-6a93ae0849-e2b0a99fcb]:focus-visible {
    outline: 1px solid var(--boxel-light-60);
    border-radius: var(--boxel-border-radius-lg);
  }

  .host-mode-breadcrumbs[data-scopedcss-009e402578-297855ed8c] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--boxel-700);
    box-shadow: var(--boxel-deep-box-shadow);
    border: 1px solid var(--boxel-light-35);
    min-height: 2.25rem;
    padding-block: 0;
    padding-inline: var(--boxel-sp-xs);
    border-radius: 7px;
  }

  .list[data-scopedcss-009e402578-297855ed8c] {
    display: inline-flex;
    list-style: none;
    gap: var(--boxel-sp-xs);
    margin: 0;
    padding: 0;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .list[data-scopedcss-009e402578-297855ed8c]::-webkit-scrollbar {
    display: none;
  }

  .item[data-scopedcss-009e402578-297855ed8c] {
    display: inline-flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    flex-shrink: 1;
    min-width: 2.5rem;
  }

  .item[data-scopedcss-009e402578-297855ed8c]:first-child,
  .item[data-scopedcss-009e402578-297855ed8c]:last-child {
    flex-shrink: 0;
    min-width: 4rem;
  }

  .item[data-scopedcss-009e402578-297855ed8c]:first-child .breadcrumb-item,
  .item[data-scopedcss-009e402578-297855ed8c]:last-child .breadcrumb-item {
    min-width: 4rem;
  }

  .separator[data-scopedcss-009e402578-297855ed8c] {
    color: var(--boxel-light-70);
    font-size: var(--boxel-font-size);
    line-height: 1;
  }

  .send-error-to-ai-assistant[data-scopedcss-2dc551c894-a9f98f9a3d] {
    --boxel-button-color: var(--boxel-ai-purple);
    --boxel-button-border: 1px solid var(--boxel-ai-purple);
    --boxel-button-text-color: var(--boxel-light);
    padding: 6px 12px;
    font-size: var(--boxel-font-size-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-wrap: nowrap;
    background-image: image-set(url('data:image/webp;base64,UklGRgYCAABXRUJQVlA4WAoAAAAQAAAAGQAAGQAAQUxQSMUAAAABgFXbVt1qS0ACEnBQHBQHxUFxUCRcB40TcNA4AAeJg/2xeVwJETEBGHuSrJUkPTbDStjJ8ndI3mmSkvw2ItVaYVxyl3Sgy+UWXhfVA0F4veTx/DQOKwBUIX+f54PzbsT0wXp3GLq+VQ2mpq51j2XfB7UeyWLbpqPWUr7v/3h/S6E2vxYal4uZmcLd5kaucb8ZMY1zH/I5YJHC4ZmDB4B4Cz0QqHfE3N3SgCa3w2oUWkuNWO+SkpzYzHIckneC1Cphx6/4CQBWUDggGgEAANAIAJ0BKhoAGgA+bTCTRyQjIaEoCqiADYlsAJ0y43mfjXDn75NhnMfImEA54jcQPZr58v2MfJAAbPO7yGJmutiLvayjgnMJdH1F2DmS5YAA/sNd5nCfj0nyEoYDCcd/a+s8rM6SzWFYyWRtmknvHddHhrszX/vEF+DSzHS12Ipf4rsqCDi4/Y8hXXNZIh9h1RGCFdzS01aOcoZrbEMhfDAVbYP4DMUiZ2Z33RnvHaDXvQEFvTfUf7h9cMs7+frGUnfFJhxEMu7Gpnx9pu0g4H6//JvvL/lO6yxZ+Ss7ZI09hg86DATL93vF6Qr45v+G511//3aKOEPl+ed21HH7yY5JH/bvJ/ztHqofit+OQBz8BEv/48NeW8AAAA==') 1x, url('data:image/webp;base64,UklGRoYDAABXRUJQVlA4WAoAAAAQAAAAMwAAMwAAQUxQSHIBAAABgJZtb9YqEioBCThYnRwcUAetg+EAHAwHw0HrAByAg+zzbRJ2/kcEA7dt48i9d2/JkjdQTYm/leAtUE0/wSxj1rLIWLSsgC4AViUtA7xH99DoCAjnEMFqXogKmlr1A9Fg07kd0RJ5xO7kNTNgo5c2dB/ZSevIiPRpjEijU4/5cB+3crBy2O8MCeBbwAP6mgn1K2MV+lJhrLVvP4jxdl+5pqPF9lhbuN9iZJE6bClWmghqsquVYlXNyyGy6KCltEJvLharosVDypYcKeTSJjn30JJafvg+dXqp846M5Hz33hZf+rvYceljBDabr95gcs0sMPuo2yVCBxJ6psyrFcpSW8qsVC9aZb3GOiOzRRFU+zKylYLa/1KaF4HZa/5d2zKnzxDdhNpC/ibXVkKj8swgWjs6iVUWyO7q8YmLMFBMutgyiQNS4VpEXdXjevzxlVh5uDNickcabejE+MzbOTnGWbmM0bQLaH5ObvYTOeC/yU8JVlA4IO4BAABQDQCdASo0ADQAPm0skkakIj+hMBIMA/ANiWwAuRfov4fAeaLWeyFGPhU7ernd/RzvIm8wgb58DypeQ+Xe6C73cPt4lM/nKeQIJaIh+0w5W06DfzKUkLwzzvI0Z1mZEQoj3f1onuOrUcKFF6G4HDt8nUWAAP7+9l3+RfZSNX2uw5INGJe5fm2NPbC9v4//Jv/Sx9j/wThZvDxAX6+Mski7H3YP9gB/k3PNtNddfbp/APAt2n27hXnf+Gf++NLmHyMMah7BB2pXZMN3Qjb1YTbt+t8um///sRDqdL/FwJsZtZqDVGGWWjryAzaiV4GXO9DN/CilzOvJ3+P+GViVOGsi8//fRQcxJxrwpy5j/k6GG/eHsYtaVAnhtMDGZXYGDJWdsDvL18YntWV/dv6PEtspt6inaWA38/NApOoAl5ehJRg2GZd/+UJn3EYhCqpJfPHRwUM1L2q/+Qi+Z3/GTAbNpdPy4fuPR+LFKfCJU59oVibJbYQ22VV/USYkoQuNLeNXhc9iUfBRZDLbZeSm4B0wopJ+X8Qr9/X0D9AjiTrBjN7wZcif+pif//6C1tTlo1jibaNsEftdPVofm//N2DLM8S1F3FdVFm/X+8oRGst0f0IATfAP/3iMwGZtTjWKkBM96hm4kqe9JzvZeAAAAA==') 2x, url('data:image/webp;base64,UklGRhAFAABXRUJQVlA4WAoAAAAQAAAATQAATQAAQUxQSCECAAABkFVbe5hYn4RfQiTEAXEwSKgD4oA6GBxQB9QBcVActA4SB98Dhf/P37n3OSImANaFypSoLHD+1yy9Fm/sxX+a9BNfSRWCKvkaVYAq+yqaArw0xZVQOwOzhuIpqzKQVdnTqopAVK2OMrUNAJqG2Y1U1fQ2qap4eVB9fjur+HCSqd6wu6mYXQzUj3ujjoODgfome2LAoduFhhM+Tga89JEHLcOnYMGHdLhUWo74crRgvRjJZaXphm9lsyDXi2jkdH3SOn2FZEPyeT3JzvO5sOsNypvV/vJ8svML6leX/i3oQjtQizCM7TAtwjS2g7QI49gO0SLMYzvAK6BjeLm7ofPN15bQPW2ORrgcnbQpwGmYWr9tFDiWcevSpjPcn6dmU+YccdCY5/Ip7QYcPqTd0+5fcNrlx+VxiUeJl8dC03r/8fdzr+y5XsWTXFf2vwcv4U6nVxdypd819UsrXf/2+qX3JfQIC/3XaBcrj1ijVaw8Zo02kYet0SLW47AGXag88qJb2LmUVxfeNDd2LaXgXVIuVkzfJVqXnARKyZvN+pWsNlsW2OZmwfGbkZZtgL3MFgyfAi1nQddsMX2aLDJ6DwZV9oT6NqD/oOO4NxoM8Jh1696qy/A5q3h+O1M9w6k01fQ2qZp4QVbVt6oa4HfTMAKR2g2OsyoDWZU9iWoGZpV4QtEUYNHMcD1qCFCbfSVVCKrkS1QpqcQX+uGf9upVvJX/AwBWUDggyAIAAJATAJ0BKk4ATgA+bS6VRy8iv6Erk5qD8A2JaAZwZID9K4EAeuSV/qvPrZE9J+OXss1v+x74+bztPnv4T1/gP1m92P+l3wD0APLT9jz908JoDe17MOXQ+VU3kY/ujlBWyvItHBx5//oew2eiG3ORvlhMj6q0nGYXrinhrcY+On0D9eJ7QYxleXJdgGYk9wyyj+KiP7cj5O9t7dJVA4svtLpryDkiAAD+/gbUH9X3zTDTdpEcekMcumgoBHlKQ4bY2cb0OTdd4aXOPGw9AxiuyNPDJPDxDHHDNsB3k8YSGJCzYwl+v+QMhVCHJZE8c/8gxH9KSolDsm8PwljgRau5WAK6AEQzK74q6dDOsb9H7H/gnLybt3eC/In/eFYn+zX7q7tigvmmR6ex3octo0hX7xM4VFjvv9lTu7/9TZ//mv7//zxU1RrpJuuCcOMNtSht3PebW0jfZxwSiwX2FXZGSZ/+2WTRC+4i2/+mfxvRz7jv7YrSmcynqS7B6yN4XGiZwhI0V8NNE49j316x+xjgFCMTsaU/uHT8OF/YX+dbPBFNgIKP/uz9sm7i1fX6PG7svkim2e5lQvcGodeuqUYT0JuZIv+uszUi+2rFluWHpeoG+LAEGSX4XbJ+RP/hatLx2B7EQDfBr1x9J3rpEWEPox/WzmtB7raXYq4HqNdh3dyPG30V6tP74fVeJn0ISTePh1CUMHRvnnuPzjgox/Bs8qZZe+VBrA9GqHBZiEaGYaHNeFNZ/u+D/tfM6HDFiBtQ4mrnw5bqOd2hp5w1RfZN74fM4A/ZtXhtzDxXYLRH/Oq9Y8dY2Oc7QwiVTY7+Wwr9PhMX+KfUtbUeIjbSKC2u+1pG9g9HSVibAmuRc3sEd6UG/UY6J+uZP0mHSxo/NIG9v+f+P+LesIoL7IK/+kChRD7HBOxKkzv04LM/SQOQSXQ1/9ChAAAAAAA='));
    background-color: var(--boxel-ai-purple);
    background-size: 14px 14px;
    background-position: 12px center;
    background-repeat: no-repeat;
    padding-left: 32px;
  }

  .send-error-to-ai-assistant[data-scopedcss-2dc551c894-a9f98f9a3d]:hover:not(:disabled) {
    --boxel-button-color: var(--boxel-ai-purple);
    --boxel-button-border: 1px solid var(--boxel-ai-purple);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .send-error-to-ai-assistant[data-scopedcss-2dc551c894-a9f98f9a3d]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .error-display[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    background: var(--boxel-warning-200);
    border-radius: var(--boxel-border-radius-lg);
    padding-bottom: var(--boxel-sp-xs);
    color: black;
    min-width: fit-content;
    width: 100%;
    box-shadow: var(--boxel-deep-box-shadow);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    max-height: 100%;
  }

  .error-header[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--boxel-sp-xs);
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp) var(--boxel-sp) 0 var(--boxel-sp);
  }

  .error-type[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    font-weight: 600;
    text-transform: uppercase;
  }

  .error-icon[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    width: 20px;
    height: 20px;
    color: black;
  }

  .error-message[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    font-size: var(--boxel-font-size-sm);
    padding: 0 var(--boxel-sp) 0
      calc(var(--boxel-sp) + 20px + var(--boxel-sp-xs));
  }

  .error-actions[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--boxel-sp);
    padding: 0 var(--boxel-sp);

    --boxel-icon-button-height: 20px;
    --boxel-icon-button-width: 20px;
  }

  .toggle-details-button[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxs);
    width: 100px;
    justify-content: flex-end;
    font-weight: 400;
    border: none;
  }

  .toggle-details-button[data-scopedcss-cf8cd396c8-f6e119dc2e]:hover {
    background-color: transparent;
  }

  .error-details[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    background: white;
    padding: var(--boxel-sp);
    width: 100%;
    margin-bottom: calc(-1 * var(--boxel-sp));
    overflow: auto;
    scrollbar-width: thin;
    flex: 1;
  }

  .error-details[data-scopedcss-cf8cd396c8-f6e119dc2e]::-webkit-scrollbar {
    width: 8px;
  }

  .error-details[data-scopedcss-cf8cd396c8-f6e119dc2e]::-webkit-scrollbar-track {
    background: var(--boxel-light);
  }

  .error-details[data-scopedcss-cf8cd396c8-f6e119dc2e]::-webkit-scrollbar-thumb {
    background: var(--boxel-dark);
    border-radius: 4px;
  }

  .detail-item[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    margin-bottom: var(--boxel-sp);
  }

  .detail-item[data-scopedcss-cf8cd396c8-f6e119dc2e]:last-child {
    margin-bottom: 0;
  }

  .detail-title[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    font-weight: 600;
    margin-bottom: var(--boxel-sp-xs);
  }

  .detail-contents[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    word-break: break-word;
  }

  pre[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .no-stack-message[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    color: var(--boxel-purple-700);
    font-style: italic;
    margin: 0;
  }

  .diagnostics-summary[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    margin: 0 0 var(--boxel-sp-xs) 0;
    font-family: var(--boxel-monospace-font-family, monospace);
    font-size: var(--boxel-font-size-xs);
    line-height: 1.5;
    word-break: break-word;
    background: #fff6d6;
    padding: var(--boxel-sp-xs) var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius);
    border-left: 3px solid var(--boxel-warning-200);
  }

  .actions[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    display: flex;
    justify-content: center;
    gap: var(--boxel-sp);
    margin-top: var(--boxel-sp-lg);
  }

  .additional-error-entry[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    margin-bottom: var(--boxel-sp);
    padding-bottom: var(--boxel-sp-xs);
    border-bottom: 1px solid var(--boxel-200, #ddd);
  }

  .additional-error-entry[data-scopedcss-cf8cd396c8-f6e119dc2e]:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .additional-error-heading[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    font-weight: 600;
    margin-bottom: var(--boxel-sp-xxs);
    word-break: break-word;
  }

  .additional-error-message[data-scopedcss-cf8cd396c8-f6e119dc2e] {
    margin: 0 0 var(--boxel-sp-xs) 0;
    font-size: var(--boxel-font-size-sm);
    word-break: break-word;
  }

  .error-detail[data-scopedcss-5282387679-8b3827d8c0] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
    overflow: visible;
    max-height: 100%;
    margin: auto var(--boxel-sp) var(--boxel-sp) var(--boxel-sp);
  }
  @media (min-height: 800px) {
    .error-detail[data-scopedcss-5282387679-8b3827d8c0] {
      flex: 1;
    }
  }

  .icon[data-scopedcss-2f43164026-1682cec7b7] {
    height: 100px;
    width: 100px;
  }
  .card-pending[data-scopedcss-2f43164026-1682cec7b7] {
    display: flex;
    flex: 1;
    height: 100%;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp);
  }
  .pending-icon[data-scopedcss-2f43164026-1682cec7b7] {
    --boxel-loading-indicator-size: 60px;
    color: var(--boxel-400);
  }
  .pending-message[data-scopedcss-2f43164026-1682cec7b7] {
    width: 100%;
    text-align: center;
    text-wrap: pretty;
  }
  .pending-headline[data-scopedcss-2f43164026-1682cec7b7] {
    margin: 0;
    font: 600 var(--boxel-font);
  }
  .pending-detail[data-scopedcss-2f43164026-1682cec7b7] {
    margin: var(--boxel-sp-xxs) auto 0;
    max-width: 40ch;
    color: var(--boxel-450);
    font: var(--boxel-font-sm);
  }
  .error-header.pending[data-scopedcss-2f43164026-1682cec7b7] {
    min-height: var(--boxel-form-control-height);
    background-color: var(--boxel-100);
    box-shadow: 0 1px 0 0 rgba(0 0 0 / 15%);
  }
  /* The consumer sets --boxel-card-header-text-color from the realm's own
     colour — white for a dark realm — which says nothing about the grey
     painted above. Name a colour that belongs to this background, the way
     the error state names its own. */
  .error-header.pending[data-scopedcss-2f43164026-1682cec7b7] .card-type-display-name,
  .error-header.pending[data-scopedcss-2f43164026-1682cec7b7] .boxel-loading-indicator {
    color: var(--boxel-dark);
  }
  .card-error-default[data-scopedcss-2f43164026-1682cec7b7] {
    display: flex;
    height: 100%;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp);
  }
  .card-error[data-scopedcss-2f43164026-1682cec7b7] {
    flex: 1;
    opacity: 0.4;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }
  .message[data-scopedcss-2f43164026-1682cec7b7] {
    width: 100%;
    text-align: center;
    font: 600 var(--boxel-font);
    text-wrap: pretty;
  }
  .error-header[data-scopedcss-2f43164026-1682cec7b7] {
    min-height: var(--boxel-form-control-height);
    background-color: var(--boxel-100);
    box-shadow: 0 1px 0 0 rgba(0 0 0 / 15%);
  }
  .error-header[data-scopedcss-2f43164026-1682cec7b7] .card-type-display-name {
    color: var(--boxel-error-300);
  }
  .card-error-detail[data-scopedcss-2f43164026-1682cec7b7] {
    position: absolute;
    bottom: var(--boxel-sp);
    left: var(--boxel-sp);
    right: var(--boxel-sp);
    max-height: calc(
      100% -
        calc(
          calc(var(--boxel-sp) * 2) +
            var(
              --card-error-header-height,
              var(--boxel-form-control-height)
            )
        )
    );
    z-index: 10;
    margin: 0;
  }

  .host-mode-card[data-scopedcss-311b19b6d8-c73eae9404],
  .card[data-scopedcss-311b19b6d8-c73eae9404] {
    width: var(--host-mode-card-width, 50rem);
    padding: var(--host-mode-card-padding);
    border-radius: var(--host-mode-card-border-radius, 20px);
    flex: 1;
    z-index: 0;
    overflow: auto;
    /* This is the scroller in host submode, so it owns the rubber-band.
       Without this, overscrolling past either end chains out to the
       document and bounces the UA canvas into view behind the card. */
    overscroll-behavior: none;
    position: relative;
  }

  .message[data-scopedcss-311b19b6d8-c73eae9404] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    text-align: center;
    gap: var(--boxel-sp);
  }

  .not-found[data-scopedcss-311b19b6d8-c73eae9404] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    height: 100%;
    text-align: center;
    gap: var(--boxel-sp-xs);
  }

  .not-found-code[data-scopedcss-311b19b6d8-c73eae9404] {
    margin: 0;
    font: 700 var(--boxel-font-xl);
    line-height: 1;
  }

  .not-found-message[data-scopedcss-311b19b6d8-c73eae9404] {
    margin: 0;
    color: var(--boxel-450);
    font: var(--boxel-font);
  }

  @media print {
    .host-mode-card.is-primary[data-scopedcss-311b19b6d8-c73eae9404] {
      display: contents;
    }

    .host-mode-card.is-primary .card[data-scopedcss-311b19b6d8-c73eae9404] {
      max-height: none;
      overflow: visible;
    }
  }

  @keyframes scaleIn-data-scopedcss-ee62035d54-864cf1155c {
    from {
      transform: scale(0.1);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes fadeOut-data-scopedcss-ee62035d54-864cf1155c {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @keyframes moveForward-data-scopedcss-ee62035d54-864cf1155c {
    from {
      transform: translateY(0);
      opacity: 0.8;
    }
    to {
      transform: translateY(25px);
      opacity: 1;
    }
  }

  .host-mode-stack-item[data-scopedcss-ee62035d54-864cf1155c] {
    justify-self: center;
    position: absolute;
    width: var(--host-stack-item-width);
    max-width: var(--host-stack-item-max-width);
    height: inherit;
    margin-top: var(--host-stack-item-margin-top);
    padding-top: var(--boxel-sp-2xl);
    z-index: 0;
    pointer-events: none;
  }

  .host-mode-stack-item[data-scopedcss-ee62035d54-864cf1155c]:not(.buried) {
    /* Keeps a gutter while the viewport is narrower than the 50rem card,
       the same one the narrow layout uses. */
    max-width: min(
      var(--host-stack-item-max-width),
      calc(100% - var(--boxel-sp-xs) * 2)
    );
    padding-bottom: var(--boxel-sp-2xl);
    /* The top card fills its item; otherwise it keeps its 50rem default
       and is clipped when the item is narrower. */
    --host-mode-card-width: 100%;
  }

  /* Buried cards stay 50rem, even behind a wide primary card that sets
     100%, so they don't reflow every time the stack changes. */
  .host-mode-stack-item.buried[data-scopedcss-ee62035d54-864cf1155c] {
    --host-mode-card-width: 50rem;
  }

  .host-mode-stack-item.full-width[data-scopedcss-ee62035d54-864cf1155c] {
    max-width: 100%;
  }

  /* When host mode is narrow, only the top card shows, wide-format or
     not, with a small gutter. */
  .host-mode-stack-item.narrow[data-scopedcss-ee62035d54-864cf1155c]:not(.buried) {
    width: calc(100% - var(--boxel-sp-xs) * 2);
    margin-top: 0;
    padding-block: var(--boxel-sp-xs);
  }

  .host-mode-stack-item.narrow.buried[data-scopedcss-ee62035d54-864cf1155c] {
    display: none;
  }

  .host-mode-stack-item.opening-animation[data-scopedcss-ee62035d54-864cf1155c] {
    animation: scaleIn-data-scopedcss-ee62035d54-864cf1155c 0.2s forwards;
    transition: margin-top var(--boxel-transition);
  }

  .host-mode-stack-item.closing-animation[data-scopedcss-ee62035d54-864cf1155c] {
    animation: fadeOut-data-scopedcss-ee62035d54-864cf1155c 0.2s forwards;
  }

  .host-mode-stack-item.move-forward-animation[data-scopedcss-ee62035d54-864cf1155c] {
    animation: moveForward-data-scopedcss-ee62035d54-864cf1155c 0.2s none;
  }

  .host-mode-stack-item.opening-animation.testing[data-scopedcss-ee62035d54-864cf1155c] {
    animation-duration: 0s;
  }

  .host-mode-stack-item.closing-animation.testing[data-scopedcss-ee62035d54-864cf1155c] {
    animation-duration: 0s;
  }

  .host-mode-stack-item.move-forward-animation.testing[data-scopedcss-ee62035d54-864cf1155c] {
    animation-duration: 0s;
  }

  /* reduced motion: a card fades in and out where it stands, and the
     cards under it keep their places rather than sliding */
  @keyframes stackItemFadeIn-data-scopedcss-ee62035d54-864cf1155c {
    from {
      opacity: 0;
    }
  }

  @keyframes stackItemFadeOut-data-scopedcss-ee62035d54-864cf1155c {
    to {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .host-mode-stack-item[data-scopedcss-ee62035d54-864cf1155c] {
      transition: none;
    }

    .host-mode-stack-item.opening-animation[data-scopedcss-ee62035d54-864cf1155c] {
      animation-name: stackItemFadeIn-data-scopedcss-ee62035d54-864cf1155c;
      transition: none;
    }

    .host-mode-stack-item.closing-animation[data-scopedcss-ee62035d54-864cf1155c] {
      animation-name: stackItemFadeOut-data-scopedcss-ee62035d54-864cf1155c;
    }

    .host-mode-stack-item.move-forward-animation[data-scopedcss-ee62035d54-864cf1155c] {
      animation: none;
    }
  }

  .host-mode-stack-item.buried[data-scopedcss-ee62035d54-864cf1155c] {
    --realm-icon-border-radius: 4px;
  }

  .stack-item-card[data-scopedcss-ee62035d54-864cf1155c] {
    height: 100%;
    border-radius: var(--boxel-border-radius-2xl);
    box-shadow: var(--boxel-deep-box-shadow);
    pointer-events: auto;
    overflow: hidden;
    background-color: var(--boxel-light);
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .host-mode-stack-item.buried > .stack-item-card[data-scopedcss-ee62035d54-864cf1155c] {
    border-radius: var(--boxel-border-radius-lg);
    background-color: var(--boxel-200);
  }

  .close-button-container[data-scopedcss-ee62035d54-864cf1155c] {
    position: absolute;
    top: var(--boxel-sp-xs);
    right: var(--boxel-sp-xs);
    z-index: 1;
  }
  .close-button-container[data-scopedcss-ee62035d54-864cf1155c] .boxel-context-button {
    box-shadow: var(--boxel-box-shadow);
  }
  .close-button-container[data-scopedcss-ee62035d54-864cf1155c] .boxel-context-button:hover {
    box-shadow: var(--boxel-box-shadow-hover);
  }

  .host-mode-stack-item-card[data-scopedcss-ee62035d54-864cf1155c] {
    border-radius: inherit;
    box-shadow: none;
    z-index: 0;
  }
  .host-mode-stack-item-card[data-scopedcss-ee62035d54-864cf1155c] >  .boxel-card-container {
    border-radius: inherit;
  }

  @media print {
    .host-mode-stack-item[data-scopedcss-ee62035d54-864cf1155c] {
      height: 100% !important;
    }
    .host-mode-stack-item-card[data-scopedcss-ee62035d54-864cf1155c] {
      height: 100%;
      overflow: auto;
    }
    .close-button-container[data-scopedcss-ee62035d54-864cf1155c] {
      display: none;
    }
  }

  .host-mode-stack[data-scopedcss-e29b45ce28-de0dedac99] {
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    background-position: center;
    background-size: cover;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .inner[data-scopedcss-e29b45ce28-de0dedac99] {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-bottom-left-radius: var(--boxel-border-radius);
    border-bottom-right-radius: var(--boxel-border-radius);
    z-index: 1;
  }

  @media screen {
    .inner[data-scopedcss-e29b45ce28-de0dedac99] {
      overflow: auto;
      overscroll-behavior: none;
    }
    /* .inner will handle overflow in host mode stack. The card's own
       overscroll-behavior: none would stop scrolls from reaching it. */
    .host-mode-stack[data-scopedcss-e29b45ce28-de0dedac99] .host-mode-card {
      overflow: hidden;
    }
    .host-mode-stack[data-scopedcss-e29b45ce28-de0dedac99] .host-mode-card,
    .host-mode-stack[data-scopedcss-e29b45ce28-de0dedac99] .host-mode-card > .card {
      overscroll-behavior: auto;
    }
  }

  .stack-items[data-scopedcss-e29b45ce28-de0dedac99] {
    display: contents;
  }

  /* the top card takes focus from script as it opens, to carry the
     keyboard into it; it is no control, so it draws no ring */
  .host-mode-stack[data-scopedcss-e29b45ce28-de0dedac99] [data-host-mode-stack-item]:focus {
    outline: none;
  }

  .host-mode-content[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    padding: var(--boxel-sp);
    position: relative;
    background-color: #686283;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  @media screen {
    .host-mode-content[data-scopedcss-6ca6aec9c3-7671ccbafc] {
      height: 100%;
      overscroll-behavior: none;
    }
  }

  @media print {
    .host-mode-content[data-scopedcss-6ca6aec9c3-7671ccbafc] {
      min-height: 100vh;
    }
  }

  .breadcrumb-container[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    position: absolute;
    top: var(--boxel-sp);
    left: var(--boxel-sp);
    z-index: 2;
    max-width: calc(100% - 2 * var(--boxel-sp));
  }

  .host-mode-content.is-wide[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    padding: 0;
    --host-mode-card-width: 100%;
    --host-mode-card-padding: 0;
    --host-mode-card-border-radius: 0;
  }

  .current-card[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    flex: 1;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .host-mode-content.is-wide .breadcrumb-container[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    top: var(--boxel-sp-lg);
    left: var(--boxel-sp-lg);
    max-width: calc(100% - 2 * var(--boxel-sp-lg));
  }

  /* When narrow, the primary card fits the screen instead of keeping its
     desktop width and being clipped, with the same gutter as the top
     stack card. Wide cards keep their own zero padding. */
  .host-mode-content.is-narrow[data-scopedcss-6ca6aec9c3-7671ccbafc]:not(.is-wide) {
    --host-mode-card-width: 100%;
    padding: var(--boxel-sp-xs);
  }

  /* When narrow, only the top stack card shows, so there is no trail to
     navigate; its close button steps back. */
  .host-mode-content.is-narrow .breadcrumb-container[data-scopedcss-6ca6aec9c3-7671ccbafc] {
    display: none;
  }

  .backdrop[data-scopedcss-0d77a076d1-679e3cd572] {
    fill: var(--icon-bg-color, #00ffba);
    fill-opacity: var(--icon-bg-opacity, 0);
  }
  .shape[data-scopedcss-0d77a076d1-679e3cd572] {
    fill: var(--icon-color, #00ffba);
  }

  .auth[data-scopedcss-37f33160f4-3dddb4d4d1] {
    /* theme color variable updates */
    --background: #272432;
    --foreground: var(--boxel-light);
    /* local color vars */
    /* The secure origin's pages name this colour (`global.css`); the
       app's sign-in screens, which don't load that stylesheet, take the
       fallback. */
    --auth-background: var(--auth-page-background, #191624);
    --auth-foreground: var(--boxel-light);

    position: relative;
    min-height: 100dvh;
    background-color: var(--auth-background);
    color: var(--auth-foreground);
    overflow: auto;
  }
  .logo[data-scopedcss-37f33160f4-3dddb4d4d1] {
    position: absolute;
    top: var(--boxel-sp-lg);
    left: var(--boxel-sp-lg);
    --icon-color: var(--boxel-highlight);
    width: 2rem;
    height: 2rem;
  }
  .logo[data-scopedcss-37f33160f4-3dddb4d4d1] svg {
    width: 100%;
    height: 100%;
  }
  .container[data-scopedcss-37f33160f4-3dddb4d4d1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: var(--boxel-sp-lg);
  }
  .content[data-scopedcss-37f33160f4-3dddb4d4d1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 25rem;
    padding: var(--boxel-sp) 0 calc(var(--boxel-sp) * 2) 0;
  }

  .centered[data-scopedcss-30e1a72aed-4343c41756] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp-sm);
    text-align: center;
  }
  .title[data-scopedcss-30e1a72aed-4343c41756] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0;
  }
  .message[data-scopedcss-30e1a72aed-4343c41756] {
    margin: 0 0 var(--boxel-sp-xs);
    color: var(--foreground);
    font: 500 var(--boxel-font-sm);
    line-height: 1.4;
  }

  /* zero specificity default sizing */
  [data-scopedcss-2a525b4516-7b3b0da76c]:where(.boxel-loading-indicator) {
    --loading-indicator-size: var(
      --boxel-loading-indicator-size,
      var(--boxel-icon-sm)
    );
    --loading-indicator-color: var(
      --boxel-loading-indicator-color,
      currentColor
    );
    --icon-color: var(--loading-indicator-color);
    display: inline-block;
    width: var(--loading-indicator-size);
    height: var(--loading-indicator-size);
    flex-shrink: 0;
  }

  svg[data-scopedcss-2a525b4516-7b3b0da76c] {
    display: block;
    width: var(--loading-indicator-size);
    height: var(--loading-indicator-size);
  }

  g[data-scopedcss-2a525b4516-7b3b0da76c] {
    stroke: var(--icon-color, currentColor);
  }

  /* Only animate if the user has not said that they want reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    svg[data-scopedcss-2a525b4516-7b3b0da76c] {
      animation: var(--boxel-infinite-spin-animation);
    }
  }

  @keyframes boxel-spin-data-scopedcss-2a525b4516-7b3b0da76c {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @layer boxelComponentL1 {
    /* Button */
    .boxel-button[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-loading-indicator-size: var(
        --boxel-button-loading-icon-size,
        var(--boxel-icon-xs)
      );

      display: inline-flex;
      justify-content: center;
      height: min-content;
      align-items: center;
      border-radius: var(
        --boxel-button-border-radius,
        var(--radius, var(--boxel-border-radius))
      );
      transition: var(
        --boxel-button-transition,
        var(--boxel-transition-properties)
      );

      /* kind variants + disabled state */
      border: var(--boxel-button-border, none);
      color: var(--boxel-button-text-color);
      background-color: var(--boxel-button-color);

      /* size variants */
      font: var(--boxel-button-font, 700 var(--boxel-font-sm));
      font-family: inherit;
      min-height: var(--boxel-button-min-height);
      min-width: var(--boxel-button-min-width);
      padding: var(--boxel-button-padding);
      letter-spacing: var(--boxel-button-letter-spacing, var(--boxel-lsp));
      box-shadow: var(--boxel-button-box-shadow);
    }
    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not(.rectangular) {
      border-radius: var(--boxel-button-border-radius, 100px);
    }
    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:is(.pill) {
      border-radius: var(
        --boxel-button-border-radius,
        var(--boxel-border-radius-pill)
      );
    }
    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover {
      background-color: color-mix(
        in oklab,
        var(--boxel-button-color) 90%,
        transparent
      );
    }
    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:focus-visible {
      outline-color: var(--ring, var(--boxel-highlight));
      outline-offset: 2px;
    }

    .loading-indicator[data-scopedcss-087c0205a8-290bc269b4] {
      /* boxel-ui passes this as the indicator's @color. */
      --boxel-loading-indicator-color: var(--boxel-button-text-color);
      margin-right: var(
        --boxel-button-loading-indicator-gap,
        var(--boxel-sp-xxs)
      );
    }

    /* select disabled buttons and links that don't have href */

    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:disabled:not(.loading),
    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not([href]),
    a.boxel-button[href=''][data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-box-shadow: none;
      background-color: var(
        --boxel-button-disabled-background,
        var(--boxel-button-color)
      );
      border: var(--boxel-button-disabled-border, var(--boxel-button-border));
      color: var(
        --boxel-button-disabled-foreground,
        var(--boxel-button-text-color)
      );
      opacity: var(--boxel-button-disabled-opacity, 0.5);
      cursor: default;
    }

    /* the a element does not have a disabled attribute. Clicking will still trigger event listeners */
    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not([href]),
    a.boxel-button[href=''][data-scopedcss-087c0205a8-290bc269b4] {
      pointer-events: none;
    }

    /*
      loading state.
      this should only be relevant for buttons - links shouldn't need it.
      We want to preserve the "normal" styling of the button but not allow interaction
    */
    .loading[data-scopedcss-087c0205a8-290bc269b4] {
      pointer-events: none;
    }

    /* overwrite the global style for links in global.css */
    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:hover {
      color: var(--boxel-button-text-color);
    }

    /**
    * Kind variants - variants that control the colors on a button
    *
    * The @kind argument on the button component should create a corresponding class with format
    * kind-@kind
    *
    * Classes for the @kind argument can control the following properties:
    *
    * --boxel-button-color (css "background-color" property)
    * --boxel-button-border (css shorthand "border" property)
    * --boxel-button-text-color (css "color" property)
    *
    */
    .kind-default[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-color: var(
        --boxel-button-default-background,
        var(--background)
      );
      --boxel-button-text-color: var(
        --boxel-button-default-foreground,
        var(--foreground)
      );
      --boxel-button-border: 1px solid
        var(--boxel-button-default-border, var(--border));
    }
    .kind-default[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-default[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-color: var(
        --boxel-button-default-active-background,
        var(--accent)
      );
      --boxel-button-text-color: var(
        --boxel-button-default-active-foreground,
        var(--accent-foreground)
      );
      --boxel-button-border: 1px solid
        var(--boxel-button-default-active-border, var(--border));
    }

    .kind-primary[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-color: var(
        --boxel-button-primary-background,
        var(--primary)
      );
      --boxel-button-text-color: var(
        --boxel-button-primary-foreground,
        var(--primary-foreground)
      );
    }
    .kind-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-color: var(
        --boxel-button-primary-active-background,
        var(--primary)
      );
    }

    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-color: var(
        --boxel-button-secondary-background,
        var(--secondary)
      );
      --boxel-button-text-color: var(
        --boxel-button-secondary-foreground,
        var(--secondary-foreground)
      );
      --boxel-button-border: 1px solid
        var(--boxel-button-secondary-border, var(--secondary));
    }
    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-border: 1px solid
        var(--boxel-button-secondary-active-border, var(--secondary));
    }

    .kind-muted[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-color: var(--muted);
      --boxel-button-text-color: var(--foreground);
    }
    .kind-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover {
      background-color: color-mix(
        in oklab,
        var(--muted) 96%,
        var(--foreground)
      );
    }

    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-color: var(--destructive);
      --boxel-button-text-color: var(--destructive-foreground);
    }
    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-color: var(
        --boxel-button-destructive-active-background,
        var(--destructive)
      );
    }

    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4] {
      /* transparent background and border */
      --boxel-button-color: var(--boxel-button-ghost-background, transparent);
      --boxel-button-text-color: var(
        --boxel-button-ghost-foreground,
        inherit
      );
    }
    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-color: color-mix(
        in oklab,
        currentColor 10%,
        transparent
      );
      --boxel-button-text-color: currentColor;
    }

    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4] {
      /* always dark */
      --boxel-button-color: var(--boxel-dark);
      --boxel-button-text-color: var(--boxel-light);
    }
    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      --boxel-button-color: color-mix(
        in oklab,
        var(--boxel-dark) 80%,
        var(--boxel-light)
      );
    }

    /**
    * Size variants - variants that control the size and spacing of a button
    *
    * The @size argument on the button component should create a corresponding class with format
    * size-@size
    *
    * Classes for the @size argument can control the following properties:
    *
    * --boxel-button-padding
    * --boxel-button-min-width
    * --boxel-button-min-height
    * --boxel-button-font
    * --boxel-button-letter-spacing
    * --boxel-loading-indicator-size
    *
    */

    .size-extra-small[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
      --boxel-button-min-height: var(--boxel-button-xs);
      --boxel-button-min-width: 5rem;
      --boxel-button-loading-icon-size: var(--boxel-icon-2xs);
      --boxel-button-font: 500 var(--boxel-font-xs);
      --boxel-button-letter-spacing: var(--boxel-lsp-lg);
    }
    .size-extra-small.rectangular[data-scopedcss-087c0205a8-290bc269b4] {
      border-radius: var(--boxel-border-radius-sm);
    }

    .size-small[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-sm);
      --boxel-button-min-height: var(--boxel-button-sm);
      --boxel-button-min-width: 5rem;
    }
    .size-small.rectangular[data-scopedcss-087c0205a8-290bc269b4] {
      border-radius: var(--boxel-border-radius-sm);
    }

    .size-base[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-xl);
      --boxel-button-min-height: var(--boxel-button-sm);
      --boxel-button-min-width: 5rem;
    }

    /* tall but thinner button */
    .size-tall[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-lg);
      --boxel-button-min-height: var(--boxel-button-tall);
      --boxel-button-min-width: 5rem;
      --boxel-button-letter-spacing: var(--boxel-lsp-xs);
    }

    /*
      extra tall button mainly used in mobile screens
      touchable as it's bigger
      */
    .size-touch[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-lg);
      --boxel-button-min-height: var(--boxel-button-touch);
      --boxel-button-min-width: 5rem;
      --boxel-button-loading-icon-size: var(--boxel-icon-sm);
      --boxel-button-font: 600 var(--boxel-font);
      --boxel-button-letter-spacing: var(--boxel-lsp-xs);
    }

    /* auto size properties & smallest padding size */
    .size-auto[data-scopedcss-087c0205a8-290bc269b4] {
      --boxel-button-padding: 2px;
    }

    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4],
    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4],
    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4] {
      min-height: initial;
      min-width: initial;
      padding-block: 0;
      padding-inline: 0;
      background: none;
      border: none;
      border-radius: var(--boxel-border-radius-xs);
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      box-shadow: none;
    }
    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4] {
      color: var(--boxel-button-link-foreground, var(--foreground));
    }
    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      color: var(--boxel-button-link-active-foreground, var(--foreground));
      text-decoration: underline;
    }
    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4] {
      color: var(--boxel-button-link-primary-foreground, var(--primary));
    }
    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      color: var(
        --boxel-button-link-primary-active-foreground,
        color-mix(in oklab, var(--primary) 80%, black)
      );
    }
    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4] {
      color: var(
        --boxel-button-link-muted-foreground,
        var(--muted-foreground)
      );
    }
    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
      color: var(
        --boxel-button-link-muted-active-foreground,
        var(--foreground)
      );
    }
  }

  .auth-btn[data-scopedcss-110d79932d-0ba5950cda] {
    width: 100%;
  }
  .auth-btn[data-scopedcss-110d79932d-0ba5950cda] .boxel-loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @layer boxelComponentL1 {
    .boxel-label[data-scopedcss-a97311d81c-714ce88996] {
      color: var(--boxel-label-color);
      font-size: var(--boxel-label-font-size, var(--boxel-body-font-size));
      font-weight: var(--boxel-label-font-weight, 500);
      line-height: var(--boxel-label-line-height, 1.1);
      font-family: inherit;
      letter-spacing: var(--boxel-label-letter-spacing, var(--boxel-lsp-sm));
    }
  }

  @layer boxelComponentL2 {
    .boxel-field[data-scopedcss-72c7667213-74fb2454c9] {
      --boxel-field-label-align: normal;
      --boxel-field-label-padding-top: 0;

      display: grid;
      width: 100%;
      max-width: 100%;
      overflow-wrap: break-word;
    }
    .label-container[data-scopedcss-72c7667213-74fb2454c9] {
      align-items: start;
    }
    .with-icon .label-container[data-scopedcss-72c7667213-74fb2454c9] {
      display: flex;
      gap: var(--boxel-sp-xs);
    }
    .boxel-field__icon[data-scopedcss-72c7667213-74fb2454c9] {
      flex-shrink: 0;
    }

    .label[data-scopedcss-72c7667213-74fb2454c9] {
      --boxel-label-letter-spacing: var(--boxel-lsp-xs);

      display: flex;
      align-items: var(--boxel-field-label-align);
      padding-top: var(--boxel-field-label-padding-top);
    }

    .content[data-scopedcss-72c7667213-74fb2454c9] {
      max-width: 100%;
      padding: var(
        --boxel-field-content-padding,
        var(--boxel-outline-width)
      ); /* necessary for our various overlays utilizing box-shadow */
      word-break: break-word;
    }

    .horizontal[data-scopedcss-72c7667213-74fb2454c9] {
      grid-template-columns:
        var(--boxel-field-label-size, minmax(8rem, 25%))
        1fr;
      min-height: var(--boxel-form-control-height);
    }

    .horizontal > .label-container[data-scopedcss-72c7667213-74fb2454c9] {
      padding-top: var(--boxel-sp-sm);
    }

    .horizontal > .content[data-scopedcss-72c7667213-74fb2454c9] {
      align-self: center;
    }

    .vertical[data-scopedcss-72c7667213-74fb2454c9] {
      grid-template-rows: auto 1fr;
      gap: var(--boxel-sp-4xs);
    }

    .vertical .label[data-scopedcss-72c7667213-74fb2454c9] {
      grid-column: 2;
    }
  }

  .auth-form-field[data-scopedcss-1d373e8f7b-c6e3eee311] {
    margin-top: var(--boxel-sp);
  }
  .auth-form-field[data-scopedcss-1d373e8f7b-c6e3eee311] input:autofill {
    transition:
      background-color 0s 600000s,
      color 0s 600000s;
  }
  .auth-form-field[data-scopedcss-1d373e8f7b-c6e3eee311] .validation-icon-container {
    display: none;
  }
  .auth-form-field[data-scopedcss-1d373e8f7b-c6e3eee311] .boxel-input.has-validation-icon {
    padding-inline-end: var(--boxel-input-padding-inline-end, 0);
  }
  .auth-form-field[data-scopedcss-1d373e8f7b-c6e3eee311] .error-message {
    margin-inline-start: 0;
    font: 500 var(--boxel-font-xs);
  }

  @layer boxelComponentL1 {
    .input-container[data-scopedcss-c5329cc7c9-5a0f684ade] {
      --icon-size: var(--boxel-icon-sm);
      --icon-space: var(--boxel-sp-xs);
      --_icon-full-length: var(
        --boxel-input-icon-size,
        calc(var(--icon-size) + var(--icon-space) * 2)
      );

      display: grid;
      grid-template-columns:
        var(--_icon-full-length)
        1fr
        var(--_icon-full-length);
      grid-template-areas:
        'optional optional optional'
        'pre-icon input post-icon'
        'error error error'
        'helper helper helper';
      width: 100%;
    }

    .boxel-input[data-scopedcss-c5329cc7c9-5a0f684ade] {
      grid-column: 1 / span 3;
      grid-row: 2;

      box-sizing: border-box;
      width: var(--boxel-input-width, 100%);
      min-width: 0;
      max-width: 100%;
      min-height: var(
        --boxel-input-height,
        var(--boxel-form-control-height)
      );
      padding-block: var(--boxel-sp-xs);
      padding-inline: var(--boxel-sp-sm)
        var(--boxel-input-padding-inline-end, 0);
      background-color: var(--background, var(--boxel-light));
      color: var(--foreground, var(--boxel-dark));
      border: 1px solid
        var(--border, var(--boxel-form-control-border-color));
      border-radius: var(--boxel-form-control-border-radius);
      box-shadow: var(--boxel-form-control-box-shadow);
      outline: var(--boxel-input-outline, 1px solid transparent);
      transition:
        var(--boxel-transition-properties),
        outline-color var(--boxel-transition);
    }

    /* keep text out from under the validation icon */
    .boxel-input.has-validation-icon[data-scopedcss-c5329cc7c9-5a0f684ade] {
      padding-inline-end: var(--_icon-full-length);
    }

    .boxel-input[data-scopedcss-c5329cc7c9-5a0f684ade]:focus-visible {
      outline-color: var(--ring, var(--boxel-highlight));
      border-color: var(--ring, var(--boxel-highlight));
    }

    .boxel-input[data-scopedcss-c5329cc7c9-5a0f684ade]::placeholder {
      color: var(--muted-foreground, var(--boxel-450));
    }

    .boxel-input[data-scopedcss-c5329cc7c9-5a0f684ade]:hover:not(:focus-visible):not(:disabled):not(.invalid) {
      border-color: currentColor;
    }

    .invalid[data-scopedcss-c5329cc7c9-5a0f684ade]:not(:disabled) {
      border-color: var(--destructive, var(--boxel-error-100));
      box-shadow: 0 0 0 1px var(--destructive, var(--boxel-error-100));
    }

    .invalid[data-scopedcss-c5329cc7c9-5a0f684ade]:focus-visible {
      outline: 1px solid transparent; /* Make sure that we make the invalid state visible */
      box-shadow: 0 0 0 1.5px var(--destructive, var(--boxel-error-100));
    }

    .invalid[data-scopedcss-c5329cc7c9-5a0f684ade]:hover:not(:disabled) {
      border-color: var(--destructive, var(--boxel-error-100));
    }

    .validation-icon-container[data-scopedcss-c5329cc7c9-5a0f684ade] {
      grid-area: post-icon;

      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }

    .error-message[data-scopedcss-c5329cc7c9-5a0f684ade] {
      grid-area: error;

      margin-top: var(--boxel-sp-3xs);
      margin-inline-start: calc(var(--boxel-sp-sm) + 1px);
      color: var(--destructive-ink);
      font-size: var(--boxel-font-size-sm);
      font-weight: 500;
      letter-spacing: var(--boxel-lsp);
    }
  }

  .step[data-scopedcss-c2ff73f62d-6cb670351b] {
    display: contents;
  }
  .title[data-scopedcss-c2ff73f62d-6cb670351b] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp);
  }
  .info[data-scopedcss-c2ff73f62d-6cb670351b] {
    margin-top: 0;
    margin-bottom: var(--boxel-sp-sm);
    letter-spacing: var(--boxel-lsp);
    line-height: 20px;
    color: var(--foreground);
  }
  .button-wrapper[data-scopedcss-c2ff73f62d-6cb670351b] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--boxel-sp-lg);
    gap: var(--boxel-sp-sm);
    color: var(--muted-foreground);
  }

  .title[data-scopedcss-c2ff73f62d-d07ecea739] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp);
  }
  .email-validation-instruction[data-scopedcss-c2ff73f62d-d07ecea739] {
    padding: 0;
    list-style-position: inside;
    margin-top: 0;
    margin-bottom: var(--boxel-sp);
    color: var(--foreground);
  }
  .email-validation-instruction li[data-scopedcss-c2ff73f62d-d07ecea739] {
    margin-bottom: var(--boxel-sp-sm);
  }

  .step[data-scopedcss-c2ff73f62d-b6a1cba89e] {
    display: contents;
  }
  .title[data-scopedcss-c2ff73f62d-b6a1cba89e] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp);
  }
  .button-wrapper[data-scopedcss-c2ff73f62d-b6a1cba89e] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--boxel-sp-lg);
    gap: var(--boxel-sp-sm);
    color: var(--muted-foreground);
  }
  .error[data-scopedcss-c2ff73f62d-b6a1cba89e] {
    color: var(--destructive-ink);
    padding: 0;
    font: 500 var(--boxel-font-xs);
    margin: var(--boxel-sp-2xs) auto 0 auto;
    text-align: center;
  }
  .error a[data-scopedcss-c2ff73f62d-b6a1cba89e] {
    color: var(--boxel-highlight);
    text-decoration: underline;
  }

  .title[data-scopedcss-c2ff73f62d-01c5f27b5d] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp);
  }
  .info[data-scopedcss-c2ff73f62d-01c5f27b5d] {
    margin-top: 0;
    margin-bottom: var(--boxel-sp-sm);
    letter-spacing: var(--boxel-lsp);
    line-height: 20px;
    color: var(--foreground);
  }
  .button-wrapper[data-scopedcss-c2ff73f62d-01c5f27b5d] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--boxel-sp-lg);
    gap: var(--boxel-sp-sm);
    color: var(--muted-foreground);
  }

  /* Until the frame reports the height of its fields, it takes the
     height they will have, worked out from the same tokens, so nothing
     around it moves when they arrive. A layout that changes that height
     sets --credential-fields-height. */
  .credential-fields[data-scopedcss-cc21998a3e-6534d31eb3] {
    --credential-layout: wide;
    --_control: calc(
      var(--boxel-outline-width) * 2 + var(--boxel-form-control-height)
    );
    --_label: calc(var(--boxel-body-font-size) * 1.1);
    --_auth-field: calc(
      var(--boxel-sp) + var(--_label) + var(--boxel-sp-4xs) +
        var(--_control)
    );
    position: relative;
    display: block;
    width: 100%;
    height: var(--credential-fields-height, var(--_reserved, 0));
  }
  .credential-fields--login[data-scopedcss-cc21998a3e-6534d31eb3],
  .credential-fields--cli-login[data-scopedcss-cc21998a3e-6534d31eb3],
  .credential-fields--register[data-scopedcss-cc21998a3e-6534d31eb3],
  .credential-fields--reset[data-scopedcss-cc21998a3e-6534d31eb3] {
    --_reserved: calc(var(--_auth-field) * 2);
  }
  .credential-fields--change-password[data-scopedcss-cc21998a3e-6534d31eb3] {
    --_reserved: calc(
      var(--_control) * 3 + var(--settings-modal-gap, 0px) * 2
    );
  }
  .credential-fields--confirm-password[data-scopedcss-cc21998a3e-6534d31eb3] {
    --_reserved: calc(var(--boxel-sp-4xs) + var(--_control));
  }
  .credential-fields-frame[data-scopedcss-cc21998a3e-6534d31eb3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
  }

  form[data-scopedcss-980806eb28-c21383075e] {
    display: flex;
    flex-direction: column;
  }
  .title[data-scopedcss-980806eb28-c21383075e] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp-sm);
    padding: 0;
  }
  .subtitle[data-scopedcss-980806eb28-c21383075e] {
    margin: 0 0 var(--boxel-sp-lg);
    color: var(--foreground);
    font: var(--boxel-font-sm);
    line-height: 1.4;
  }
  .intro[data-scopedcss-980806eb28-c21383075e] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
    margin-bottom: var(--boxel-sp-lg);
    color: var(--foreground);
    font: var(--boxel-font-sm);
    line-height: 1.4;
  }
  .forgot-password[data-scopedcss-980806eb28-c21383075e] {
    --host-outline-offset: 2px;
    margin-top: var(--boxel-sp-4xs);
    margin-bottom: var(--boxel-sp-lg);
    margin-inline-start: auto;
  }
  .google-button[data-scopedcss-980806eb28-c21383075e] {
    margin-top: var(--boxel-sp-sm);
    gap: var(--boxel-sp-xs);
  }
  .google-g[data-scopedcss-980806eb28-c21383075e] {
    flex-shrink: 0;
  }
  .divider[data-scopedcss-980806eb28-c21383075e] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    margin: var(--boxel-sp-lg) 0 var(--boxel-sp-xs);
  }
  .divider[data-scopedcss-980806eb28-c21383075e]::before,
  .divider[data-scopedcss-980806eb28-c21383075e]::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border);
  }
  .divider-label[data-scopedcss-980806eb28-c21383075e] {
    color: var(--muted-foreground);
    font: 600 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-lg);
    text-transform: uppercase;
  }
  .error[data-scopedcss-980806eb28-c21383075e] {
    color: var(--destructive-ink);
    padding: 0;
    font: 500 var(--boxel-font-xs);
    margin: var(--boxel-sp-2xs) auto 0 auto;
  }
  .register-prompt[data-scopedcss-980806eb28-c21383075e] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--boxel-sp-3xs);
    margin: var(--boxel-sp) 0 0;
    font: 500 var(--boxel-font-sm);
  }
  .register-prompt-text[data-scopedcss-980806eb28-c21383075e] {
    color: var(--muted-foreground);
  }
  .register-link[data-scopedcss-980806eb28-c21383075e] {
    --host-outline-offset: 2px;
  }

  .centered-loading[data-scopedcss-3c09b9d01d-79530542ae] {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp);
    text-align: center;
  }
  .loading-title[data-scopedcss-3c09b9d01d-79530542ae] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
  }
  .loading-spinner[data-scopedcss-3c09b9d01d-79530542ae] {
    --boxel-loading-indicator-size: var(--boxel-icon-md);
    --loading-indicator-color: var(--boxel-highlight);
  }
  .error[data-scopedcss-3c09b9d01d-79530542ae] {
    color: var(--destructive-ink);
    padding: 0;
    font: 500 var(--boxel-font-xs);
    margin: var(--boxel-sp-2xs) auto 0 auto;
  }

  @layer boxelComponentL1 {
    .text-accessory[data-scopedcss-dc6aa69add-8174b3cb53] {
      align-items: center;
      color: color-mix(
        in oklch,
        var(--muted-foreground) 55%,
        var(--foreground)
      );
      display: flex;
      font-size: var(--boxel-font-size-sm);
      padding: var(--boxel-input-group-padding-y)
        var(--boxel-input-group-padding-x);
      text-align: center;
      white-space: nowrap;
    }
  }

  .container[data-scopedcss-dc6aa69add-2aef12e129] {
    display: flex;
    flex-direction: column;
  }
  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129] {
    --boxel-input-group-padding-x: var(--boxel-sp-sm);
    --boxel-input-group-padding-y: var(--boxel-sp-xxs);
    --boxel-input-group-border-color: var(
      --border,
      var(--boxel-form-control-border-color)
    );
    --boxel-input-group-border-radius: var(
      --boxel-form-control-border-radius
    );
    --boxel-input-group-inner-border-radius: calc(
      var(--boxel-input-group-border-radius) - 1px
    );
    --boxel-input-group-interior-border-width: 0;
    --boxel-input-group-height: var(
      --boxel-input-height,
      var(--boxel-form-control-height)
    );
    --boxel-input-group-icon-length: calc(
      var(--boxel-icon-sm) + var(--boxel-sp-xs) * 2
    );

    border-radius: var(--boxel-input-group-border-radius);
    cursor: text;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-height: var(--boxel-input-group-height);
    background-color: var(--background, var(--boxel-light));
    color: var(--foreground, var(--boxel-dark));
    border: 1px solid var(--boxel-input-group-border-color);
  }

  @layer boxelComponentL1 {
    .boxel-input-group > .form-control[data-scopedcss-dc6aa69add-2aef12e129] {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      background-clip: padding-box;
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      padding: var(--boxel-input-group-padding-y)
        var(--boxel-input-group-padding-x);
      width: 1%;
      background-color: inherit;
      color: inherit;
    }
    .boxel-input-group > .form-control[data-scopedcss-dc6aa69add-2aef12e129] {
      position: relative;
      z-index: 1;
      outline-offset: 0;
      margin: 0;
      min-height: inherit;
      box-shadow: none;
      border: none;
    }
    .boxel-input-group > .form-control[data-scopedcss-dc6aa69add-2aef12e129]:focus-visible {
      z-index: 5;
    }
  }

  /* With text accessories alone, the group is outlined as a whole when
     its input has focus, and the input itself is not. */
  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129]:focus-within:not(.boxel-input-group--invalid) {
    outline: 1px solid var(--ring, var(--boxel-highlight));
    border-color: var(--ring, var(--boxel-highlight));
  }
  .boxel-input-group > .form-control[data-scopedcss-dc6aa69add-2aef12e129]:focus-visible,
  .boxel-input-group > .form-control[data-scopedcss-dc6aa69add-2aef12e129] {
    outline: none;
  }

  .boxel-input-group--disabled .form-control[data-scopedcss-dc6aa69add-2aef12e129],
  .boxel-input-group--disabled[data-scopedcss-dc6aa69add-2aef12e129] .text-accessory {
    border-color: var(--boxel-input-group-border-color);
    opacity: 0.5;
  }

  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129] > :last-child {
    border-top-right-radius: var(--boxel-input-group-inner-border-radius);
    border-bottom-right-radius: var(
      --boxel-input-group-inner-border-radius
    );
  }

  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129] > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129] > :first-child {
    border-top-left-radius: var(--boxel-input-group-inner-border-radius);
    border-bottom-left-radius: var(--boxel-input-group-inner-border-radius);
  }

  .boxel-input-group[data-scopedcss-dc6aa69add-2aef12e129] > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .boxel-input-group--invalid[data-scopedcss-dc6aa69add-2aef12e129]:not(.boxel-input-group--disabled) {
    box-shadow: 0 0 0 1px var(--destructive, var(--boxel-error-100));
  }

  .boxel-input-group--invalid:not(.boxel-input-group--disabled)
    .validation-icon-container[data-scopedcss-dc6aa69add-2aef12e129],
  .boxel-input-group--invalid:not(.boxel-input-group--disabled)
    .form-control[data-scopedcss-dc6aa69add-2aef12e129],
  .boxel-input-group--invalid[data-scopedcss-dc6aa69add-2aef12e129]:not(.boxel-input-group--disabled)
    .text-accessory {
    border-color: var(--destructive, var(--boxel-error-100));
  }

  .boxel-input-group--disabled ~ .error-message[data-scopedcss-dc6aa69add-2aef12e129] {
    display: none;
  }

  .error-message[data-scopedcss-dc6aa69add-2aef12e129] {
    margin-top: var(--boxel-sp-xxxs);
    margin-left: calc(var(--boxel-sp-sm) + 1px);
    color: var(--destructive-ink);
    font-size: var(--boxel-font-size-sm);
    font-weight: 500;
    letter-spacing: var(--boxel-lsp);
  }

  .validation-icon-container[data-scopedcss-dc6aa69add-2aef12e129] {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    width: var(--boxel-input-group-icon-length);
  }

  .validation-hint[data-scopedcss-14ddbe1008-65cd31573c] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-3xs);
    margin: var(--boxel-sp-2xs) 0 0;
    color: var(--muted-foreground);
    font: 500 var(--boxel-font-xs);
  }
  .validation-hint-icon[data-scopedcss-14ddbe1008-65cd31573c] {
    --icon-color: var(--boxel-highlight);
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .registration-page[data-scopedcss-5e89e66290-448d109df6] {
    display: contents;
  }
  .registration-page[hidden][data-scopedcss-5e89e66290-448d109df6] {
    display: none;
  }
  .title[data-scopedcss-5e89e66290-448d109df6] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp-sm);
  }
  .button-wrapper[data-scopedcss-5e89e66290-448d109df6] {
    width: 100%;
    margin-top: var(--boxel-sp-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--boxel-sp-sm);
    color: var(--muted-foreground);
  }
  .username-prefix[data-scopedcss-5e89e66290-448d109df6] {
    padding-right: 0;
  }
  .error-message[data-scopedcss-5e89e66290-448d109df6] {
    color: var(--destructive-ink);
    margin-top: var(--boxel-sp-lg);
  }

  .step[data-scopedcss-5e89e66290-8475ef37c2] {
    display: contents;
  }
  .title[data-scopedcss-5e89e66290-8475ef37c2] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp-sm);
  }
  .button-wrapper[data-scopedcss-5e89e66290-8475ef37c2] {
    width: 100%;
    margin-top: var(--boxel-sp-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--boxel-sp-sm);
    color: var(--muted-foreground);
  }

  .title[data-scopedcss-5e89e66290-af2b40bb68] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp-sm);
  }
  .email-validation-instruction[data-scopedcss-5e89e66290-af2b40bb68] {
    padding: 0;
    list-style-position: inside;
    margin-top: 0;
    margin-bottom: var(--boxel-sp);
    color: var(--foreground);
  }
  .email-validation-instruction li[data-scopedcss-5e89e66290-af2b40bb68] {
    margin-bottom: var(--boxel-sp-sm);
  }
  .resend-email[data-scopedcss-5e89e66290-af2b40bb68] {
    margin-top: var(--boxel-sp);
  }

  .centered-loading[data-scopedcss-5e89e66290-f8792235cf] {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp-sm);
    text-align: center;
  }
  .loading-title[data-scopedcss-5e89e66290-f8792235cf] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
  }
  .loading-message[data-scopedcss-5e89e66290-f8792235cf] {
    margin: 0;
    color: var(--foreground);
    font: 500 var(--boxel-font-sm);
  }
  .loading-spinner[data-scopedcss-5e89e66290-f8792235cf] {
    --boxel-loading-indicator-size: var(--boxel-icon-md);
    --loading-indicator-color: var(--boxel-highlight);
    margin-top: var(--boxel-sp-xs);
  }

  .busy-message[data-scopedcss-62ee1370ce-163bb4118d] {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp);
    text-align: center;
  }
  .busy-title[data-scopedcss-62ee1370ce-163bb4118d] {
    font: 500 var(--boxel-font-sm);
    color: var(--foreground, var(--boxel-light));
  }
  .busy-spinner[data-scopedcss-62ee1370ce-163bb4118d] {
    --boxel-loading-indicator-size: var(--boxel-icon-md);
    --loading-indicator-color: var(--boxel-highlight);
  }

  .centered[data-scopedcss-b4b02971c7-499a0bcbfe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp);
    text-align: center;
  }
  .title[data-scopedcss-b4b02971c7-499a0bcbfe] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0;
  }
  .message[data-scopedcss-b4b02971c7-499a0bcbfe] {
    margin: 0;
    color: var(--foreground);
    font: 500 var(--boxel-font-sm);
    line-height: 1.4;
  }
  .sign-in-button[data-scopedcss-b4b02971c7-499a0bcbfe] {
    width: 100%;
  }

  .recent-files[data-scopedcss-40dbc4ec0f-d5779ead4f] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: calc(100% - var(--search-sheet-closed-height));
  }

  .recent-file[data-scopedcss-40dbc4ec0f-5b6ac84875] {
    background-color: var(--boxel-light);
    padding: var(--boxel-sp-xxs);
    font-weight: 600;
    margin-bottom: 4px;
    border-radius: var(--code-mode-container-border-radius);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    overflow-wrap: anywhere;
    overflow: hidden;
    --boxel-realm-icon-size: 18px;
  }

  .file-name[data-scopedcss-40dbc4ec0f-5b6ac84875] {
    flex: 1;
    min-width: 0;
    font: 600 var(--boxel-font-xs);
  }

  .file-extension[data-scopedcss-40dbc4ec0f-5b6ac84875] {
    color: var(--boxel-450);
    font-weight: 400;
    flex-shrink: 0;
    text-transform: uppercase;
    font: 500 var(--boxel-font-xs);
  }

  .indicator[data-scopedcss-e8245a702f-ccdeca777b] {
    position: absolute;
    display: flex;
    align-items: center;
    height: 2.5rem;
    bottom: 0;
    right: 0;
    padding: 0 var(--boxel-sp-xxs) 0 var(--boxel-sp-sm);
    border-top-left-radius: var(--boxel-border-radius);
    font: var(--boxel-font-sm);
    font-weight: 500;
    transform: translateX(140px);
    transition: all var(--boxel-transition);
    transition-delay: 5s;
    min-width: 140px;
    z-index: 1;
  }

  .indicator-icon[data-scopedcss-e8245a702f-ccdeca777b] {
    margin-right: var(--boxel-sp-xxs);
  }

  .indicator-saving[data-scopedcss-e8245a702f-ccdeca777b] {
    --icon-color: var(--boxel-highlight);
    background-color: var(--boxel-200);
  }

  .indicator-read-only[data-scopedcss-e8245a702f-ccdeca777b] {
    --icon-color: var(--boxel-800);
    --icon-background-color: #ffd73c;
    background-color: #ffd73c;
  }

  .indicator-error[data-scopedcss-e8245a702f-ccdeca777b] {
    --icon-color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    color: #fff;
  }

  .indicator.visible[data-scopedcss-e8245a702f-ccdeca777b] {
    transform: translateX(0px);
    transition-delay: 0s;
  }
  .save-spinner[data-scopedcss-e8245a702f-ccdeca777b] {
    display: inline-block;
    position: relative;
  }
  .save-spinner-inner[data-scopedcss-e8245a702f-ccdeca777b] {
    display: inline-block;
    position: absolute;
    top: -7px;
  }
  .indicator-msg[data-scopedcss-e8245a702f-ccdeca777b] {
    margin-right: var(--boxel-sp-sm);
  }
  .saved-msg[data-scopedcss-e8245a702f-ccdeca777b] {
    margin-right: var(--boxel-sp-xxs);
  }

  .base-overlay[data-scopedcss-79c9a9c5cc-f5f2508cd7] {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* Buttons — rectangular hit-targets above pill containers (z-index 5).
     Height matches --pf-pill-h so button icons align with pill icon. */
  .pf-btn[data-scopedcss-69b7bde411-f756bd70ea] {
    --boxel-button-color: transparent;
    --boxel-button-text-color: inherit;
    --boxel-button-padding: 0;

    width: 100%;
    height: var(--pf-pill-h);
    min-width: var(--pf-pill-h);
    border-color: transparent;
    border-radius: var(--boxel-border-radius-sm);
    position: relative;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
    opacity: var(--pf-btn-opacity);
    transition:
      opacity var(--pf-transition-btn),
      color var(--pf-transition-btn);
  }
  .pf-btn[data-scopedcss-69b7bde411-f756bd70ea]:hover {
    --boxel-button-color: transparent;
    opacity: 1;
  }
  /* The pill carries the icon for its current button, so that button hides
     its own icon. While previewing, the hovered button hides its icon and
     the active button shows its icon in green ("currently selected"). */
  .pf-btn.active[data-scopedcss-69b7bde411-f756bd70ea] {
    color: var(--pf-active-color);
    opacity: 1;
  }
  .pf-icon[data-scopedcss-69b7bde411-f756bd70ea] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pill-format-chooser[data-scopedcss-69b7bde411-7abf75a175] {
    /* JS-mirrored layout tokens — keep in sync with the corresponding constants. */
    --pf-gap-px: 5px; /* GAP_PX */
    --pf-pad-left: var(--boxel-sp-xs); /* PAD_LEFT */
    --pf-divider-col-w: 10px; /* DIVIDER_COL_W */
    --pf-pill-h: 28px; /* PILL_H */
    --pf-pill-svg-w: 240px; /* PILL_SVG_W */
    --pf-icon-w: 16px; /* ICON_W */

    --pf-height: var(
      --container-button-size,
      var(--boxel-form-control-height)
    );
    --pf-bg: var(--boxel-dark);
    --pf-color: var(--boxel-light);
    --pf-active-color: var(--boxel-highlight);

    --pf-btn-opacity: 0.55;
    --pf-divider-color: var(--boxel-500);
    --pf-preview-color: var(--boxel-200);

    --pf-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --pf-transition-btn: 180ms ease;
    --pf-transition-icon: 120ms ease;

    display: grid;
    align-items: center;
    gap: var(--pf-gap-px);
    padding: var(--boxel-sp-3xs) var(--pf-pad-left);
    position: relative;
    user-select: none;
    height: var(--pf-height);
    box-sizing: border-box;
    /* min-width: 0 lets the chooser shrink below its grid min-content so
       the parent constraint reaches it. overflow: visible lets compact
       tooltips extend freely — compact mode kicks in before overflow occurs. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background-color: var(--pf-bg);
    color: var(--pf-color);
    border-radius: var(--boxel-border-radius-2xl);
    transition: grid-template-columns var(--pf-transition);
  }
  .pill-format-chooser[data-scopedcss-69b7bde411-7abf75a175]:not(.has-preview) {
    --pf-preview-color: var(--pf-active-color);
  }
  .pf-divider[data-scopedcss-69b7bde411-7abf75a175] {
    width: 1px;
    height: 18px;
    background: var(--pf-divider-color);
    justify-self: center;
    position: relative;
    z-index: 2;
  }

  /* Pill containers — outlined SVG bg + HTML content, sized
     --pf-pill-h, vertically centered in --pf-height. */
  .pill-container[data-scopedcss-69b7bde411-7abf75a175] {
    position: absolute;
    top: calc((var(--pf-height) - var(--pf-pill-h)) / 2);
    left: 0;
    width: var(--pf-pill-svg-w);
    height: var(--pf-pill-h);
    z-index: 6;
    pointer-events: none;
    transition: transform var(--pf-transition);
    will-change: transform;
  }
  .pill-bg[data-scopedcss-69b7bde411-7abf75a175] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
  }
  /* d morphs smoothly; stroke snaps instantly on commit (gray→green). */
  .pill-path[data-scopedcss-69b7bde411-7abf75a175] {
    transition: d var(--pf-transition);
    will-change: d;
  }
  .pill-content[data-scopedcss-69b7bde411-7abf75a175] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--boxel-sp-3xs);
    font-weight: 600;
    font-size: var(--boxel-font-size-xs);
    line-height: 1;
    font-family: inherit;
    text-transform: capitalize;
    white-space: nowrap;
    color: var(--pf-preview-color);
  }
  .pill-content .pf-icon[data-scopedcss-69b7bde411-7abf75a175] {
    flex: 0 0 auto;
  }

  /* Compact mode — parent too narrow for the full pill; collapse to icon-only. */
  .pill-format-chooser.compact .pill-content .pf-label[data-scopedcss-69b7bde411-7abf75a175] {
    display: none;
  }

  .pf-tooltip-label[data-scopedcss-69b7bde411-7abf75a175] {
    text-transform: capitalize;
  }

  .field-picker-modal[data-scopedcss-248e485347-ca08fcaaac] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-248e485347-ca08fcaaac] .field-picker {
    height: 60%;
  }
  .instances[data-scopedcss-248e485347-ca08fcaaac] {
    display: grid;
    gap: var(--boxel-sp);
    margin-block: 0;
    padding-inline-start: 0;
  }
  .instance-container[data-scopedcss-248e485347-ca08fcaaac] {
    appearance: none;
    border: none;
    padding: var(--boxel-sp);
  }
  .instance-container.selected[data-scopedcss-248e485347-ca08fcaaac]:not(:hover):not(:focus) {
    box-shadow: 0 0 0 1px var(--boxel-dark);
  }
  .instance-container[data-scopedcss-248e485347-ca08fcaaac]:hover,
  .instance-container[data-scopedcss-248e485347-ca08fcaaac]:focus {
    box-shadow: 0 0 0 2px var(--boxel-highlight-hover);
  }
  .field-option[data-scopedcss-248e485347-ca08fcaaac] {
    display: flex;
    gap: var(--boxel-sp-xs);
  }
  .field-option-index[data-scopedcss-248e485347-ca08fcaaac] {
    width: var(--boxel-sp);
    text-align: center;
  }

  .selected-item[data-scopedcss-cd6290cbfa-03995a706e] {
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .label[data-scopedcss-cd6290cbfa-03995a706e] {
    font-weight: 600;
    margin-right: var(--boxel-sp-xxs);
  }

  .before-options[data-scopedcss-cd6290cbfa-5ac53ac1a9] {
    width: 100%;
    background-color: var(--boxel-light);
    padding: var(--boxel-sp-xs) var(--boxel-sp);
    font: 500 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    text-align: left;
  }

  .after-options[data-scopedcss-cd6290cbfa-77b8f74ae1] {
    --boxel-loading-indicator-size: var(--boxel-icon-xs);
    display: flex;
    flex-direction: column;
    border-top: var(--boxel-border);
    background-color: var(--boxel-light);
  }
  .title[data-scopedcss-cd6290cbfa-77b8f74ae1] {
    padding: var(--boxel-sp-xs) var(--boxel-sp);
    font: 500 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    text-align: left;
  }
  .after-options-menu[data-scopedcss-cd6290cbfa-77b8f74ae1] {
    --boxel-menu-item-content-padding: var(--boxel-sp-xs);
  }
  [data-scopedcss-cd6290cbfa-77b8f74ae1] .boxel-menu__item {
    border-radius: var(--boxel-border-radius-sm);
  }
  [data-scopedcss-cd6290cbfa-77b8f74ae1] .boxel-menu__item .menu-item {
    width: 100%;
  }
  [data-scopedcss-cd6290cbfa-77b8f74ae1] .boxel-menu__item .ai-icon {
    order: 1;
    margin-left: auto;
  }
  [data-scopedcss-cd6290cbfa-77b8f74ae1] .boxel-menu__item .check-icon {
    display: none;
  }

  .instance-chooser[data-scopedcss-cd6290cbfa-3b15d2f5f1] {
    height: var(
      --boxel-instance-chooser-height,
      var(--boxel-form-control-height)
    );
  }

  .instance-chooser[data-scopedcss-cd6290cbfa-3b15d2f5f1] .boxel-trigger {
    padding: var(--boxel-sp-sm);
  }

  .instance-chooser[data-scopedcss-cd6290cbfa-3b15d2f5f1] .boxel-trigger-content {
    font: var(--boxel-font-xs);
    overflow: hidden;
  }
  .instance-chooser[data-scopedcss-cd6290cbfa-3b15d2f5f1] .boxel-loading-indicator {
    --boxel-loading-indicator-size: var(--boxel-icon-xs);
  }

  .instance-chooser[data-scopedcss-cd6290cbfa-3b15d2f5f1]
    +  
      .ember-basic-dropdown-content-wormhole-origin
        .instances-dropdown-content
     {
    --boxel-select-max-height: fit-content;
    --boxel-select-options-list-max-height: 12.25rem;
    border: 1px solid var(--boxel-450);
    border-radius: var(--boxel-border-radius);
  }
  .card[data-scopedcss-cd6290cbfa-3b15d2f5f1],
  .field[data-scopedcss-cd6290cbfa-3b15d2f5f1] {
    height: 40px;
    width: 375px;
    max-width: 100%;
    container-name: fitted-card;
    container-type: size;
    background-color: var(--boxel-light);
  }
  .field[data-scopedcss-cd6290cbfa-3b15d2f5f1] {
    padding: var(--boxel-sp-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .file-item[data-scopedcss-cd6290cbfa-3b15d2f5f1] {
    display: flex;
    align-items: center;
    padding: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
    min-width: 0;
    background-color: var(--boxel-light);
  }

  .fitted-format-gallery[data-scopedcss-853741fa55-4399b1805a] {
    color: var(--color, var(--boxel-dark));
  }
  .format-section + .format-section[data-scopedcss-853741fa55-4399b1805a] {
    margin-top: var(--boxel-sp-xl);
  }
  .format-section > h3 + ul[data-scopedcss-853741fa55-4399b1805a] {
    margin-top: var(--boxel-sp-lg);
  }
  .format-name[data-scopedcss-853741fa55-4399b1805a] {
    margin: 0;
    padding: var(--boxel-sp-xs);
    background-color: var(--background-color, rgba(0 0 0 / 10%));
    border-radius: var(--boxel-border-radius-sm);
    font: 600 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
  }
  .specs[data-scopedcss-853741fa55-4399b1805a] {
    margin-block: 0;
    padding-inline: 0;
    list-style-type: none;
  }
  .specs > li + li[data-scopedcss-853741fa55-4399b1805a] {
    margin-top: var(--boxel-sp-lg);
  }
  .spec-title[data-scopedcss-853741fa55-4399b1805a] {
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
    opacity: 70%;
  }
  .spec-title + .item-sizer[data-scopedcss-853741fa55-4399b1805a] {
    margin-top: var(--boxel-sp-xs);
  }
  .item[data-scopedcss-853741fa55-4399b1805a] {
    color: initial;
  }
  .item > .field[data-scopedcss-853741fa55-4399b1805a] {
    height: 100%;
  }

  /* Dark mode */
  .dark-mode[data-scopedcss-853741fa55-4399b1805a] {
    --background-color: rgba(255 255 255 / 30%);
    --color: var(--boxel-light);
  }

  .markdown-preview[data-scopedcss-f557a4878c-242b9ee0c1] {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .view-toggle[data-scopedcss-f557a4878c-242b9ee0c1] {
    display: flex;
    gap: var(--boxel-sp-4xs);
    padding: var(--boxel-sp-xs);
    background-color: var(--boxel-100);
    border-bottom: 1px solid var(--boxel-200);
  }

  .toggle-btn[data-scopedcss-f557a4878c-242b9ee0c1] {
    --boxel-button-color: transparent;
    --boxel-button-text-color: var(--boxel-dark);
    --boxel-button-font: 600 var(--boxel-font-xs);
    min-height: unset;
    min-width: unset;
    padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
    border-color: var(--boxel-200);
    border-radius: var(--boxel-border-radius);
  }

  .toggle-btn.active[data-scopedcss-f557a4878c-242b9ee0c1] {
    --boxel-button-color: var(--boxel-dark);
    --boxel-button-text-color: var(--boxel-light);
  }

  .capture-container[data-scopedcss-f557a4878c-242b9ee0c1] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .markdown-source[data-scopedcss-f557a4878c-242b9ee0c1] {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: var(--boxel-sp);
    font-family: var(--boxel-monospace-font-family);
    font-size: var(--boxel-font-size-sm);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    background: transparent;
  }

  .markdown-rendered[data-scopedcss-f557a4878c-242b9ee0c1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--boxel-sp);
  }

  .preview-container[data-scopedcss-4b8f34c05d-8941c6139e] {
    height: auto;
  }
  .full-height-preview[data-scopedcss-4b8f34c05d-8941c6139e] {
    flex-grow: 1;
    display: grid;
    grid-auto-rows: max-content 1fr;
    min-width: 0;
  }
  .preview-header[data-scopedcss-4b8f34c05d-8941c6139e] {
    box-shadow: 0 1px 0 0 rgba(0 0 0 / 15%);
    z-index: 1;
  }
  .preview-header[data-scopedcss-4b8f34c05d-8941c6139e]:not(.is-editing) {
    background-color: var(--boxel-100);
  }
  .field-preview-container[data-scopedcss-4b8f34c05d-8941c6139e] {
    height: auto;
    padding: var(--boxel-sp);
  }
  .preview[data-scopedcss-4b8f34c05d-8941c6139e] {
    box-shadow: none;
    border-radius: 0;
  }
  .atom-preview-container[data-scopedcss-4b8f34c05d-8941c6139e] {
    color: #c7c7c7;
    font: 500 var(--boxel-font-sm);
    line-height: 2.15;
    letter-spacing: 0.13px;
  }
  .atom-preview[data-scopedcss-4b8f34c05d-8941c6139e] .atom-default-template {
    color: var(--boxel-dark);
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp-4xs);
    background-color: var(--boxel-light);
    margin: 0 var(--boxel-sp-xxxs);
    font: 600 var(--boxel-font-xs);
    line-height: 1.27;
    letter-spacing: 0.17px;
  }

  .playground-panel[data-scopedcss-8de0ab519d-305bc40062] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAgMAAABFxqmRAAAACVBMVEU5OTksZFUdmXisJCSwAAAAKElEQVR4AWMYiWAUjIJRwLgEuzgbLvEV2MWZcKhnCEBij4JRMApGAQCuDwL0gjsq5AAAAABJRU5ErkJggg==');
    background-position: left top;
    background-repeat: repeat;
    background-size: 22.5px;
    height: 100%;
    width: 100%;
    background-color: var(--boxel-dark);
    font: var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    overflow: auto;
  }
  .playground-panel-content[data-scopedcss-8de0ab519d-305bc40062] {
    --playground-padding: var(--boxel-sp-sm);
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
    min-height: 100%;
    margin-inline: auto;
    padding: var(--playground-padding);
  }
  .preview-area[data-scopedcss-8de0ab519d-305bc40062] {
    flex-grow: 1;
    z-index: 0;
    display: flex;
    flex-direction: column;
  }
  .instance-chooser-container[data-scopedcss-8de0ab519d-305bc40062] {
    position: sticky;
    bottom: var(--playground-padding);
    border: 1px solid var(--boxel-450);
    margin: 0 auto;
    width: 460px;
    max-width: 100%;
    justify-content: space-between;

    /* It’s meant to have two rounded borders, this removes a gap */
    border-radius: calc(var(--boxel-border-radius) + 1px);
  }
  .instance-chooser-container[data-scopedcss-8de0ab519d-305bc40062] .instance-chooser {
    border-radius: 0;
    border-top-left-radius: var(--boxel-border-radius);
    border-top-right-radius: var(--boxel-border-radius);
  }
  .format-chooser-container[data-scopedcss-8de0ab519d-305bc40062] {
    border-bottom-left-radius: var(--boxel-border-radius);
    border-bottom-right-radius: var(--boxel-border-radius);
  }
  /* Centers the pill chooser inside the existing dark format-
     chooser bar — keeps the rounded box / instance chooser
     layout above unchanged, only the picker swaps. */
  .pill-format-chooser-wrap[data-scopedcss-8de0ab519d-305bc40062] {
    background-color: var(--boxel-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  .error-container[data-scopedcss-8de0ab519d-305bc40062] {
    flex-grow: 1;
    display: grid;
    grid-template-rows: max-content 1fr;
    position: unset;

    --card-error-header-height: calc(
      40px + var(--boxel-form-control-height) + var(--boxel-sp)
    );
  }
  .error-container[data-scopedcss-8de0ab519d-305bc40062] .instance-chooser {
    border-radius: var(--boxel-border-radius);
    box-shadow: var(--boxel-deep-box-shadow);
  }
  .card-error-detail[data-scopedcss-8de0ab519d-305bc40062] .instance-chooser {
    border-radius: var(--boxel-border-radius);
  }
  .loading[data-scopedcss-8de0ab519d-305bc40062] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 100%;
    width: 100%;
  }
  .filedef-info-message[data-scopedcss-8de0ab519d-305bc40062] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    color: var(--boxel-450);
    font-weight: 500;
    padding: var(--boxel-sp-xl);
    margin-block: 0;
  }
  .filedef-info-message > span[data-scopedcss-8de0ab519d-305bc40062] {
    max-width: 400px;
  }

  .playground-panel-content[data-scopedcss-8de0ab519d-305bc40062]:has(.social-preview-container) {
    padding: 0;
  }

  .playground-panel[data-scopedcss-8de0ab519d-305bc40062] .social-preview-container {
    border: 0;
    border-radius: unset;
  }

  .file-incompatible-message[data-scopedcss-226eee8968-f589ca7b1f] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    background-color: var(--boxel-200);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    font-weight: 500;
    padding: var(--boxel-sp-xl);
    margin-block: 0;
  }
  .file-incompatible-message > span[data-scopedcss-226eee8968-f589ca7b1f] {
    max-width: 400px;
  }

  .create-file-modal[data-scopedcss-caa5c5b96c-67eaa70aba] {
    --horizontal-gap: var(--boxel-sp-xs);
    --stack-card-footer-height: auto;
  }
  .create-file-modal[data-scopedcss-caa5c5b96c-67eaa70aba] >  .boxel-modal__inner {
    display: flex;
  }
  .create-file-modal[data-scopedcss-caa5c5b96c-67eaa70aba] .dialog-box__content {
    display: flex;
    flex-direction: column;
  }

  [data-scopedcss-caa5c5b96c-67eaa70aba] .create-file {
    height: 32rem;
  }
  .field + .field[data-scopedcss-caa5c5b96c-67eaa70aba] {
    margin-top: var(--boxel-sp-sm);
  }
  .field[data-scopedcss-caa5c5b96c-67eaa70aba] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
  }
  .field[data-scopedcss-caa5c5b96c-67eaa70aba] .label-container {
    width: 8rem;
  }
  .field[data-scopedcss-caa5c5b96c-67eaa70aba] .content {
    flex-grow: 1;
    max-width: 100%;
    min-width: 13rem;
  }
  .field .realm-dropdown[data-scopedcss-caa5c5b96c-67eaa70aba] {
    flex: initial;
  }
  .field-contents[data-scopedcss-caa5c5b96c-67eaa70aba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--horizontal-gap);
  }
  .footer-buttons[data-scopedcss-caa5c5b96c-67eaa70aba] {
    display: flex;
    margin-left: auto;
    gap: var(--horizontal-gap);
  }
  .gts-extension[data-scopedcss-caa5c5b96c-67eaa70aba] {
    --gts-label-width: var(--boxel-sp-xxl);
    position: relative;
  }
  .gts-extension input[data-scopedcss-caa5c5b96c-67eaa70aba] {
    padding-right: var(--gts-label-width);
  }
  .gts-extension[data-scopedcss-caa5c5b96c-67eaa70aba]:after {
    content: '.gts';
    width: var(--gts-label-width);
    position: absolute;
    display: block;
    right: 0;
    top: var(--boxel-sp-sm);
    color: var(--boxel-450);
    font: 500 var(--boxel-font-sm);
    text-transform: uppercase;
    letter-spacing: var(--boxel-lsp-lg);
  }
  .create-file-error-detail[data-scopedcss-caa5c5b96c-67eaa70aba] {
    margin-top: var(--boxel-sp);
  }
  .skill-file-path[data-scopedcss-caa5c5b96c-67eaa70aba] {
    margin: var(--boxel-sp-xs) 0 0;
    color: var(--boxel-450);
    font: var(--boxel-font-sm);
  }
  .skill-file-path code[data-scopedcss-caa5c5b96c-67eaa70aba] {
    color: var(--boxel-600);
  }

  .selected-type[data-scopedcss-caa5c5b96c-1d9e11a259] {
    --pill-gap: var(--boxel-sp-xxs);
    --pill-padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
    min-height: 2rem;
  }

  .edit-field-modal[data-scopedcss-3a9a21cde8-cb61a31044] {
    --horizontal-gap: var(--boxel-sp-xs);
  }
  .edit-field-modal[data-scopedcss-3a9a21cde8-cb61a31044] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-3a9a21cde8-cb61a31044] .edit-field {
    height: 32rem;
  }
  .field + .field[data-scopedcss-3a9a21cde8-cb61a31044] {
    margin-top: var(--boxel-sp-sm);
  }
  .field[data-scopedcss-3a9a21cde8-cb61a31044] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
  }
  .field[data-scopedcss-3a9a21cde8-cb61a31044] .label-container {
    width: 8rem;
  }
  .field[data-scopedcss-3a9a21cde8-cb61a31044] .content {
    flex-grow: 1;
    max-width: 100%;
    min-width: 13rem;
  }
  .card-chooser-area[data-scopedcss-3a9a21cde8-cb61a31044] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--horizontal-gap);
  }
  .footer-buttons[data-scopedcss-3a9a21cde8-cb61a31044] {
    display: flex;
    margin-left: auto;
    gap: var(--horizontal-gap);
    align-self: center;
  }
  fieldset.field[data-scopedcss-3a9a21cde8-cb61a31044] {
    border: none;
    padding: 0;
    margin-inline: 0;
  }

  .header[data-scopedcss-3e1d234499-12ac950d4a] {
    font: 600 var(--boxel-font);
    letter-spacing: var(--boxel-lsp-xs);
    text-align: center;
  }
  .content[data-scopedcss-3e1d234499-12ac950d4a] {
    margin: 0;
    width: 100%;
    font: 500 var(--boxel-font);
    letter-spacing: var(--boxel-lsp-xs);
    text-align: center;
  }
  .content + .content[data-scopedcss-3e1d234499-12ac950d4a] {
    margin-top: var(--boxel-sp-xs);
  }
  .header + .content[data-scopedcss-3e1d234499-12ac950d4a] {
    margin-top: var(--boxel-sp);
  }
  .disclaimer[data-scopedcss-3e1d234499-12ac950d4a] {
    color: var(--boxel-danger);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }
  .delete[data-scopedcss-3e1d234499-12ac950d4a] {
    padding: var(--boxel-sp-lg) var(--boxel-sp-lg) var(--boxel-sp);
    background-color: white;
    border-radius: var(--boxel-border-radius-xl);
    box-shadow: var(--boxel-deep-box-shadow);
  }
  .buttons[data-scopedcss-3e1d234499-12ac950d4a] {
    margin-top: var(--boxel-sp-lg);
    display: flex;
    justify-content: center;
    width: 100%;
  }
  button[data-scopedcss-3e1d234499-12ac950d4a]:first-child {
    margin-right: var(--boxel-sp-xs);
  }

  .context-menu {
    width: 13.5rem;
  }

  .context-menu-trigger[data-scopedcss-c237633157-4d8e9045be] {
    margin-left: 2px;
  }

  .context-menu-list[data-scopedcss-c237633157-4d8e9045be] {
    --boxel-menu-item-content-padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .warning-box[data-scopedcss-c237633157-4d8e9045be] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--boxel-sp-xxxs);
    padding: var(--boxel-sp-sm);
    background-color: var(--boxel-warning-100);
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
  }

  .warning[data-scopedcss-c237633157-4d8e9045be] {
    margin: 0;
  }

  .warning-icon[data-scopedcss-c237633157-4d8e9045be] {
    flex-shrink: 0;
  }

  .schema-editor-container > * + *[data-scopedcss-20305f24ef-202913a5dd] {
    margin-top: var(--boxel-sp-xs);
  }

  .schema-editor-container[data-scopedcss-20305f24ef-202913a5dd]:first-child {
    margin-top: 0;
  }

  .schema[data-scopedcss-20305f24ef-202913a5dd] {
    display: grid;
    gap: var(--boxel-sp);
    padding: var(--boxel-sp);
  }

  .card-field[data-scopedcss-20305f24ef-202913a5dd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--boxel-sp-5xs);
    padding: var(--boxel-sp-xxs);
    border: 2px solid transparent;
    border-radius: var(--code-mode-container-border-radius);
    background-color: var(--boxel-light);
    overflow: hidden;
    cursor: pointer;
    width: 100%;
  }
  .card-field + .card-field[data-scopedcss-20305f24ef-202913a5dd] {
    margin-top: var(--boxel-sp-xxs);
  }

  .card-field--with-context-menu-button[data-scopedcss-20305f24ef-202913a5dd] {
    padding-right: 0;
  }

  .left[data-scopedcss-20305f24ef-202913a5dd] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
  .right[data-scopedcss-20305f24ef-202913a5dd] {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  .right > *[data-scopedcss-20305f24ef-202913a5dd] {
    flex-shrink: 0;
  }
  .right[data-scopedcss-20305f24ef-202913a5dd] >  .trigger {
    max-width: 100%;
  }

  .computed-icon[data-scopedcss-20305f24ef-202913a5dd] {
    display: inline-flex;
    font: 600 var(--boxel-font);
    line-height: 20px;
    padding: var(--boxel-sp-5xs) var(--boxel-sp-xxs);
    background-color: var(--boxel-200);
    border-top-left-radius: var(--boxel-border-radius-sm);
    border-bottom-left-radius: var(--boxel-border-radius-sm);
    margin-bottom: calc(var(--boxel-sp-5xs) * -2);
    transform: translate(
      calc(var(--boxel-sp-xxxs) * -1),
      calc(var(--boxel-sp-5xs) * -1)
    );
    height: 100%;
  }

  .query-icon[data-scopedcss-20305f24ef-202913a5dd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 var(--boxel-font);
    line-height: 20px;
    padding: 0 var(--boxel-sp-xxs);
    background-color: var(--boxel-200);
    margin-right: var(--boxel-sp-5xs);
    border-radius: var(--boxel-border-radius-sm);
    height: 20px;
  }

  .linked-icon[data-scopedcss-20305f24ef-202913a5dd] {
    align-self: center;
    margin-right: var(--boxel-sp-5xs);
  }

  .field-pill[data-scopedcss-20305f24ef-202913a5dd] {
    --pill-gap: var(--boxel-sp-xxxs);
    --pill-icon-size: var(--code-mode-realm-icon-size);
    height: 1.625rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .field-pill > *[data-scopedcss-20305f24ef-202913a5dd] {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .realm-icon[data-scopedcss-20305f24ef-202913a5dd] {
    --boxel-realm-icon-size: var(--code-mode-realm-icon-size);
    align-self: center;
  }

  .field-name[data-scopedcss-20305f24ef-202913a5dd] {
    font: var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    background-color: transparent;
    padding: 0;
    text-align: left;
  }
  .field-name[data-scopedcss-20305f24ef-202913a5dd]:hover {
    color: var(--boxel-highlight);
  }

  .overridden-field[data-scopedcss-20305f24ef-202913a5dd] {
    text-decoration: line-through;
  }

  .overridden-field-link[data-scopedcss-20305f24ef-202913a5dd] {
    --boxel-button-min-height: 1.5rem;
    --boxel-button-padding: var(--boxel-sp-4xs);
    --boxel-button-font: 600 var(--boxel-font-xs);
    justify-content: flex-start;
    gap: var(--boxel-sp-4xs);
    align-self: flex-start;
  }

  .jump-icon[data-scopedcss-20305f24ef-202913a5dd] {
    flex-shrink: 0;
  }

  .field-types[data-scopedcss-20305f24ef-202913a5dd] {
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .header[data-scopedcss-20305f24ef-202913a5dd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-4xs);
  }

  .total-fields[data-scopedcss-20305f24ef-202913a5dd] {
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xl);
    text-transform: uppercase;
  }

  .add-field-button[data-scopedcss-20305f24ef-202913a5dd] {
    --boxel-button-padding: 0 var(--boxel-sp-4xs);
    gap: var(--boxel-sp-xxs);
  }

  .card-field--overriding[data-scopedcss-20305f24ef-202913a5dd] {
    transition: border 1s;
  }

  .show-overriding-field-border[data-scopedcss-20305f24ef-202913a5dd] {
    border: 2px solid var(--boxel-highlight);
  }

  @keyframes pulse-data-scopedcss-20305f24ef-202913a5dd {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  .overriding-field .show-overriding-field-border[data-scopedcss-20305f24ef-202913a5dd] {
    animation: pulse-data-scopedcss-20305f24ef-202913a5dd 1s;
  }

  .base-container-header[data-scopedcss-f9cbf6f302-c18b42b9c2] {
    /* 25px exactly. */
    --boxel-header-min-height: 1.5625rem;
    --boxel-header-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
    --boxel-header-background-color: var(--boxel-300);
    --boxel-header-text-color: var(--boxel-dark);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xl);
    text-transform: uppercase;
    height: var(
      --base-container-header-height,
      var(--boxel-header-min-height)
    );
  }
  .base-container-header.active[data-scopedcss-f9cbf6f302-c18b42b9c2] {
    --boxel-header-background-color: var(--boxel-highlight);
    --boxel-header-text-color: var(--boxel-dark);
  }

  .base-container[data-scopedcss-f9cbf6f302-81aaeccad3] {
    border-radius: var(--code-mode-container-border-radius);
    overflow: hidden;
    overflow-wrap: break-word;
  }
  .base-container.active[data-scopedcss-f9cbf6f302-81aaeccad3] {
    border: 1px solid var(--boxel-400);
    box-shadow: var(--code-mode-active-box-shadow);
  }

  .content[data-scopedcss-f9cbf6f302-d3ad60780d] {
    display: flex;
    flex-direction: column;
    padding: var(--boxel-sp-xs);
    gap: var(--boxel-sp-xs);
  }
  .realm-info[data-scopedcss-f9cbf6f302-d3ad60780d] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }
  .realm-info-icon[data-scopedcss-f9cbf6f302-d3ad60780d] {
    --boxel-realm-icon-size: var(--code-mode-realm-icon-size);
  }
  .realm-name[data-scopedcss-f9cbf6f302-d3ad60780d] {
    --boxel-label-font-weight: 400;
  }
  .definition-info[data-scopedcss-f9cbf6f302-d3ad60780d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
  }
  .definition-name[data-scopedcss-f9cbf6f302-d3ad60780d] {
    font: 600 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .action-buttons[data-scopedcss-f9cbf6f302-47f3126497] {
    display: grid;
    grid-auto-columns: max-content;
    gap: var(--boxel-sp-5xs);
  }
  .action-button[data-scopedcss-f9cbf6f302-47f3126497] {
    --boxel-button-min-height: 1.5rem;
    --boxel-button-padding: 0 var(--boxel-sp-5xs);
    --boxel-button-font: 600 var(--boxel-font-xs);
    justify-content: flex-start;
    gap: var(--boxel-sp-xxxs);
    align-self: flex-start;
    text-transform: capitalize;
  }
  .info-footer[data-scopedcss-f9cbf6f302-47f3126497] {
    color: var(--boxel-450);
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
  }

  .clickable-button[data-scopedcss-04a1b70188-840b2db215] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: var(--boxel-border-radius);
    text-align: inherit;
  }

  .clickable-button[data-scopedcss-04a1b70188-840b2db215]:hover {
    outline: 2px solid var(--boxel-highlight);
  }

  .divider-group[data-scopedcss-24dd6e3f11-8d3c4d9fdf] {
    position: relative;
    padding: var(--boxel-sp) 0;
  }
  .divider[data-scopedcss-24dd6e3f11-8d3c4d9fdf] {
    width: 100%;
    margin: 0;
    border: 1px solid var(--divider-border-color, #707070);
  }
  .divider-label[data-scopedcss-24dd6e3f11-8d3c4d9fdf] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    padding: 0 var(--boxel-sp-xxxs);
    background-color: var(--boxel-200);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--divider-content-lsp, var(--boxel-lsp-xs));
    text-wrap: nowrap;
    /* InheritIcon's fill is var(--icon-color, #000). Without this override
       the icon inherits --icon-color from the operator-mode container,
       which resolves to near-white and vanishes on the light divider
       background. Pinning it here makes the icon deterministic. */
    --icon-color: var(--boxel-dark);
  }

  .loading[data-scopedcss-32667a21d6-2266823aa6] {
    display: flex;
    justify-content: center;
    margin: 30vh auto;
  }

  .file-incompatible-message[data-scopedcss-7c3298f3e9-f589ca7b1f] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    background-color: var(--boxel-200);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    font-weight: 500;
    padding: var(--boxel-sp-xl);
    margin-block: 0;
  }
  .file-incompatible-message > span[data-scopedcss-7c3298f3e9-f589ca7b1f] {
    max-width: 400px;
  }

  .syntax-error[data-scopedcss-7c3298f3e9-2d757f67a9],
  .total-fields[data-scopedcss-7c3298f3e9-2d757f67a9] {
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
  }

  .total-fields[data-scopedcss-7c3298f3e9-2d757f67a9] {
    margin-right: var(--boxel-sp-xxxs);
  }

  .loading-icon[data-scopedcss-7c3298f3e9-2d757f67a9] {
    display: inline-block;
    margin-right: var(--boxel-sp-xxxs);
    vertical-align: middle;
  }

  .container[data-scopedcss-d932aec143-3a58ace332] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    width: 100%;
  }
  .spec-preview[data-scopedcss-d932aec143-3a58ace332] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
    width: 100%;
    padding: var(--boxel-sp-sm);
  }
  .spec-intent-message[data-scopedcss-d932aec143-3a58ace332],
  .cannot-write[data-scopedcss-d932aec143-3a58ace332] {
    background-color: var(--boxel-200);
    color: var(--boxel-450);
    font-weight: 500;
    height: 100%;
    width: 100%;
    align-content: center;
    text-align: center;
  }
  .spec-preview-overlay[data-scopedcss-d932aec143-3a58ace332] {
    pointer-events: none;
    border-radius: var(--boxel-border-radius);
    box-shadow: 0 0 0 1px var(--boxel-dark);
  }
  .spec-selector-container[data-scopedcss-d932aec143-3a58ace332] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
  }
  .spec-selector[data-scopedcss-d932aec143-3a58ace332] {
    min-width: 50%;
    align-self: flex-start;
  }
  .spec-selector-item[data-scopedcss-d932aec143-3a58ace332] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }
  .view-instance-btn-text[data-scopedcss-d932aec143-3a58ace332] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .loading[data-scopedcss-d932aec143-2266823aa6] {
    display: flex;
    justify-content: center;
    margin: 30vh auto;
  }

  .spec-indicator[data-scopedcss-6669cc9124-0a9f2b8d85] {
    display: flex;
  }

  .create-spec-button[data-scopedcss-6669cc9124-0a9f2b8d85] {
    --boxel-button-min-height: auto;
    --boxel-button-min-width: auto;
    padding: 4px;
    border: none;
    border-radius: var(--boxel-border-radius-xs);
  }

  .create-spec-button[data-scopedcss-6669cc9124-0a9f2b8d85] .boxel-loading-indicator {
    --loading-indicator-size: 12px;
    margin-right: 0;
  }

  .boxel-button:not(.active) .spec-checkmark[data-scopedcss-6669cc9124-0a9f2b8d85] {
    color: var(--boxel-400);
  }

  .spec-checkmark[data-scopedcss-6669cc9124-0a9f2b8d85] {
    stroke: currentColor;
    width: var(--boxel-sp);
  }

  .toggle-button[data-scopedcss-da17484e78-62189da6f5] {
    --boxel-button-font: 600 var(--boxel-font-xs);
    --boxel-button-letter-spacing: var(--boxel-lsp-xs);
    --boxel-button-min-width: 6rem;
    --boxel-button-padding: 0;

    flex: 1;
    justify-content: space-between;
    white-space: nowrap;
  }

  .toggle-button.active[data-scopedcss-da17484e78-62189da6f5] {
    --boxel-button-text-color: var(--boxel-highlight);
  }

  .content[data-scopedcss-da17484e78-62189da6f5] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    margin: -2px 0;
  }

  .icon[data-scopedcss-da17484e78-62189da6f5] {
    transform: scale(0.75);
    margin: 2px -6px 0 4px;
    flex-shrink: 0;
  }

  .metadata-panel[data-scopedcss-e375753db1-e7d1bd3f66] {
    padding: var(--boxel-sp-lg);
    max-width: 100%;
  }

  .metadata-panel__loading[data-scopedcss-e375753db1-e7d1bd3f66],
  .metadata-panel__error[data-scopedcss-e375753db1-e7d1bd3f66] {
    color: var(--boxel-450);
    font: var(--boxel-font-sm);
    text-align: center;
    padding: var(--boxel-sp-lg);
  }

  .metadata-panel__error[data-scopedcss-e375753db1-e7d1bd3f66] {
    color: var(--boxel-error-100);
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] {
    font-family: var(--boxel-monospace-font-family, monospace);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-size: var(--boxel-font-sm);
    line-height: 1.5;
    background-color: var(--boxel-dark);
    color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-xl);
    padding: var(--boxel-sp-lg);
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] .json-key {
    color: #9cdcfe;
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] .json-string {
    color: #ce9178;
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] .json-number {
    color: #b5cea8;
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] .json-boolean {
    color: #569cd6;
  }

  .metadata-panel__content[data-scopedcss-e375753db1-e7d1bd3f66] .json-null {
    color: #569cd6;
  }

  .card-renderer-header[data-scopedcss-4f06285ab0-67dc1090c9] {
    min-height: max-content;
  }
  .card-renderer-header[data-scopedcss-4f06285ab0-67dc1090c9]:not(.is-editing) {
    background-color: var(--boxel-100);
  }
  .preview-buttons[data-scopedcss-4f06285ab0-67dc1090c9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--boxel-sp-xs) 0;
    background-color: #75707e;
  }
  .preview-text[data-scopedcss-4f06285ab0-67dc1090c9] {
    color: var(--boxel-light);
    font: 600 var(--boxel-font-sm);
    letter-spacing: 0.13px;
  }
  .button-icon[data-scopedcss-4f06285ab0-67dc1090c9] {
    width: 16px;
    height: 16px;
    margin-right: var(--boxel-sp-xxs);
    --icon-color: var(--boxel-teal);
  }
  .preview-buttons[data-scopedcss-4f06285ab0-67dc1090c9] .boxel-button {
    color: var(--boxel-light);
    font: 500 var(--boxel-font-xs);
    letter-spacing: 0.17px;
    border: none;
    min-height: 19px;
    min-width: fit-content;
    padding: 0 var(--boxel-sp-xs);
  }
  .card-renderer-body[data-scopedcss-4f06285ab0-67dc1090c9] {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: calc(
      var(--operator-mode-spacing) * 2 + var(--container-button-size)
    );
    z-index: 0;
  }
  .card-renderer-content[data-scopedcss-4f06285ab0-67dc1090c9] {
    height: auto;
  }
  .card-renderer-content[data-scopedcss-4f06285ab0-67dc1090c9] >  .boxel-card-container.boundaries {
    overflow: hidden;
  }
  /* Full-width centering shell for the floating chooser. Its
     width tracks the card preview area so the chooser inside can
     measure available width honestly (a `width: max-content`
     shell would hug the chooser and create a stuck-compact loop
     when room becomes available again). The dark capsule +
     radius lives on the chooser itself in this layout. */
  .card-renderer-format-chooser-container[data-scopedcss-4f06285ab0-67dc1090c9] {
    position: absolute;
    bottom: var(--operator-mode-spacing);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 var(--operator-mode-spacing);
    padding-right: calc(
      var(--operator-mode-spacing) * 2 + var(--container-button-size)
    );
  }
  .card-renderer-format-chooser[data-scopedcss-4f06285ab0-67dc1090c9] {
    --boxel-format-chooser-border-color: var(--boxel-400);
    margin: 0;
    max-width: 100%;
    box-shadow: none;
    border-radius: var(--boxel-border-radius-2xl);
  }
  [data-scopedcss-4f06285ab0-67dc1090c9] .fitted-format-gallery {
    padding: var(--boxel-sp-sm);
  }
  .preview[data-scopedcss-4f06285ab0-67dc1090c9] {
    box-shadow: none;
    border-radius: 0;
  }

  .syntax-error-container[data-scopedcss-6ccb6be515-f96d495f5c] {
    background: var(--boxel-100);
    padding: var(--boxel-sp);
    border-radius: var(--boxel-radius);
    height: 100%;
  }

  .module-inspector-header[data-scopedcss-d8d58968e8-391373b7a8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs);
    background-color: transparent;
  }

  .module-inspector-content[data-scopedcss-d8d58968e8-391373b7a8] {
    overflow: auto;
    height: 100%;
    background-color: var(--boxel-light);
  }

  .module-inspector-content.error[data-scopedcss-d8d58968e8-391373b7a8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--boxel-dark);
  }

  .module-inspector-content.error[data-scopedcss-d8d58968e8-391373b7a8] .error-header {
    width: 100%;
  }

  .toggle-button[data-scopedcss-d8d58968e8-391373b7a8] {
    padding-right: var(--boxel-sp-xxxs);
  }

  .file-incompatible-message[data-scopedcss-d8d58968e8-391373b7a8] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    background-color: var(--boxel-200);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    font-weight: 500;
    padding: var(--boxel-sp-xl);
    margin-block: 0;
  }

  .file-incompatible-message > span[data-scopedcss-d8d58968e8-391373b7a8] {
    max-width: 400px;
  }

  .empty-file-message[data-scopedcss-d8d58968e8-391373b7a8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--boxel-200);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    font-weight: 500;
    text-align: center;
    padding: var(--boxel-sp-xl);
  }

  .file-loading[data-scopedcss-d8d58968e8-391373b7a8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--boxel-200);
  }

  .non-preview-panel-content[data-scopedcss-d8d58968e8-391373b7a8] {
    padding: var(--boxel-sp-xs);
    background-color: var(--code-mode-panel-background-color);
    min-height: 100%;
  }

  .preview-error-container[data-scopedcss-d8d58968e8-391373b7a8] {
    background: var(--boxel-100);
    padding: var(--boxel-sp);
    border-radius: var(--boxel-radius);
    height: 100%;
  }

  .preview-error-box[data-scopedcss-d8d58968e8-391373b7a8] {
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp);
    background: var(--boxel-200);
  }

  .preview-error-text[data-scopedcss-d8d58968e8-391373b7a8] {
    color: red;
    font-weight: 600;
  }

  hr.preview-error[data-scopedcss-d8d58968e8-391373b7a8] {
    width: calc(100% + var(--boxel-sp) * 2);
    margin-left: calc(var(--boxel-sp) * -1);
    margin-top: calc(var(--boxel-sp-sm) + 1px);
  }

  pre.preview-error[data-scopedcss-d8d58968e8-391373b7a8] {
    white-space: pre-wrap;
    text-align: left;
  }

  .level[data-scopedcss-ceb6d66638-294a0627c7] {
    --icon-length: 14px;
    --icon-margin: 4px;

    padding-left: 0em;
  }

  .level .level[data-scopedcss-ceb6d66638-294a0627c7] {
    padding-left: 1em;
  }

  .file-row[data-scopedcss-ceb6d66638-294a0627c7] {
    display: flex;
    align-items: center;
    border-radius: var(--boxel-border-radius-xs);
  }

  .file-row[data-scopedcss-ceb6d66638-294a0627c7]:hover,
  .file-row[data-scopedcss-ceb6d66638-294a0627c7]:focus-within {
    background-color: var(--boxel-200);
  }

  .file-row.selected[data-scopedcss-ceb6d66638-294a0627c7] {
    color: var(--boxel-dark);
    background-color: var(--boxel-highlight);
  }

  .file-row .file[data-scopedcss-ceb6d66638-294a0627c7] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: var(--boxel-sp-xxxs);
    padding-left: calc(var(--icon-length) + var(--icon-margin));
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    border-radius: var(--boxel-border-radius-xs);
  }

  .file-menu-trigger[data-scopedcss-ceb6d66638-294a0627c7] {
    flex-shrink: 0;
    visibility: hidden;
    margin-right: var(--boxel-sp-xxxs);
  }

  .file-row:hover .file-menu-trigger[data-scopedcss-ceb6d66638-294a0627c7],
  .file-row:focus-within .file-menu-trigger[data-scopedcss-ceb6d66638-294a0627c7] {
    visibility: visible;
  }

  .file-tree-context-menu[data-scopedcss-ceb6d66638-294a0627c7] {
    z-index: var(--boxel-layer-floating-button);
  }

  .directory[data-scopedcss-ceb6d66638-294a0627c7] {
    border-radius: var(--boxel-border-radius-xs);
    background: transparent;
    border: 0;
    padding: var(--boxel-sp-xxxs);
    width: 100%;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
  }

  .directory[data-scopedcss-ceb6d66638-294a0627c7]:hover {
    background-color: var(--boxel-200);
  }

  .directory[data-scopedcss-ceb6d66638-294a0627c7] .icon {
    width: var(--icon-length);
    height: var(--icon-length);
    margin-bottom: -2px;
    padding: 0 2px;
  }

  .directory[data-scopedcss-ceb6d66638-294a0627c7] .icon.closed {
    transform: rotate(-90deg);
  }

  .mask[data-scopedcss-c602e763fd-f69b824217] {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    height: 100%;
    width: 100%;
  }
  nav[data-scopedcss-c602e763fd-f69b824217] {
    position: relative;
  }

  :root {
    --card-url-bar-width: 100%;
    --card-url-bar-height: var(--boxel-form-control-height);
  }
  .card-url-bar[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    position: relative;
    display: flex;
    align-items: center;

    background-color: var(--boxel-dark);
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);

    width: var(--card-url-bar-width);
    height: var(--card-url-bar-height);
  }
  .focused[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    outline: 2px solid var(--boxel-highlight);
  }
  .error[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    outline: 2px solid var(--boxel-error-200);
  }
  .realm-info[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxs);

    width: max-content;
    color: var(--boxel-light);
    border-right: 2px solid var(--boxel-purple-300);
    padding-right: var(--boxel-sp-xs);
    margin-right: var(--boxel-sp-xs);

    white-space: nowrap;
  }
  .url-realm-icon[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    --boxel-realm-icon-background-color: currentColor;
    --boxel-realm-icon-border-color: currentColor;
  }
  .input[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    width: 100%;

    --icon-color: var(--boxel-highlight);
  }
  .error .input[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    --icon-color: var(--boxel-error-200);
  }
  .url-input[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    padding: 0;
    min-height: 0;
    text-overflow: ellipsis;

    color: var(--boxel-light);
  }
  .error-message[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    position: absolute;
    display: flex;
    overflow: hidden;
    align-items: center;
    top: var(--submode-switcher-height);
    left: 0;
    background-color: var(--boxel-light);
    width: 100%;
    height: var(--submode-switcher-height);
    border-radius: var(--boxel-border-radius);
    box-shadow: var(--boxel-deep-box-shadow);
    font: var(--boxel-font-sm);
    font-weight: 500;
    z-index: 1;
  }
  .warning[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--boxel-yellow);
    width: 40px;
    height: 100%;
  }
  .message[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    margin-left: var(--boxel-sp);
  }

  .dismiss[data-scopedcss-6a60d7bdfd-8f91d8cc2e] {
    position: absolute;
    right: 0;
    margin-right: var(--boxel-sp-xxs);
    font-weight: 600;
    color: var(--boxel-highlight);
    border: none;
    background-color: transparent;
  }

  .binary-info[data-scopedcss-3548011e66-009e165232] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
    height: 100%;
  }
  .file-name[data-scopedcss-3548011e66-009e165232] {
    margin-top: var(--boxel-sp);
    font: var(--boxel-font-md);
    font-weight: 600;
    width: 100%;
  }
  .info[data-scopedcss-3548011e66-009e165232] {
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    font-weight: 500;
    width: 100%;
  }
  .size[data-scopedcss-3548011e66-009e165232] {
    margin-top: var(--boxel-sp-xxs);
    text-transform: uppercase;
  }
  .file-icon[data-scopedcss-3548011e66-009e165232] {
    width: 100%;
  }

  .monaco-wrapper[data-scopedcss-3d87b5d80b-eba1a35d53] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .lint-size-warning[data-scopedcss-3d87b5d80b-eba1a35d53] {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    border-bottom: 1px solid rgba(255, 186, 0, 0.3);
    box-shadow: inset 3px 0 0 var(--boxel-warning-200);
    background: rgba(255, 186, 0, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .lint-size-warning strong[data-scopedcss-3d87b5d80b-eba1a35d53] {
    font-weight: 600;
    color: var(--boxel-light);
  }

  .lint-size-warning-icon[data-scopedcss-3d87b5d80b-eba1a35d53] {
    flex: none;
    margin-top: 1px;
    fill: var(--boxel-warning-200);
  }

  .formatting-status[data-scopedcss-3d87b5d80b-eba1a35d53],
  .formatting-error[data-scopedcss-3d87b5d80b-eba1a35d53] {
    position: absolute;
    top: var(--boxel-sp-xs);
    left: var(--boxel-sp-xs);
    z-index: 1;
    padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius-sm);
    font: 600 var(--boxel-font-sm);
  }

  .formatting-status[data-scopedcss-3d87b5d80b-eba1a35d53] {
    background: rgba(49, 132, 255, 0.9);
    color: white;
  }

  .formatting-error[data-scopedcss-3d87b5d80b-eba1a35d53] {
    top: calc(var(--boxel-sp-xs) + var(--boxel-sp-sm));
    background: rgba(220, 53, 69, 0.9);
    color: white;
    max-width: 60ch;
  }

  .monaco-container[data-scopedcss-3d87b5d80b-eba1a35d53] {
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 100%;
    padding-top: var(--boxel-sp-xxs);
    background-color: var(--monaco-background);
    font-family: var(--boxel-monospace-font-family);
    font-size: var(--boxel-caption-font-size);
    font-weight: 500;
  }
  .monaco-container[data-scopedcss-3d87b5d80b-eba1a35d53]:not(.readonly) {
    filter: contrast(1.05) brightness(1.05);
  }
  .monaco-container.readonly[data-scopedcss-3d87b5d80b-eba1a35d53] {
    --monaco-background: var(--monaco-readonly-background);
    filter: contrast(1.1) saturate(1.1);
  }
  .monaco-container[data-scopedcss-3d87b5d80b-eba1a35d53] .monaco-editor {
    --vscode-editor-background: var(--monaco-background);
    --vscode-editor-selectionBackground: var(--monaco-selection-background);
    --vscode-editor-inactiveSelectionBackground: var(
      --monaco-inactive-selection-background
    );

    --vscode-editorStickyScroll-background: var(--monaco-background);
    --vscode-editorGutter-background: var(--monaco-background);
    --vscode-editorStickyScroll-shadow: rgba(0 0 0 / 40%);
    --vscode-scrollbar-shadow: rgba(0 0 0 / 20%);
  }
  .monaco-container[data-scopedcss-3d87b5d80b-eba1a35d53] .monaco-editor .sticky-widget {
    box-shadow: 0 1px 15px -2px var(--vscode-editorStickyScroll-shadow);
  }
  .monaco-container.readonly[data-scopedcss-3d87b5d80b-eba1a35d53]
    .monaco-editor .view-overlays .current-line-exact {
    border-color: #454545;
  }
  .loading[data-scopedcss-3d87b5d80b-eba1a35d53] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .inner-container__content[data-scopedcss-855254ef08-f4c6fba395] {
    position: relative;
    padding: var(--boxel-sp-xs) var(--boxel-sp-xs) var(--boxel-sp-sm);
    overflow-y: auto;
    height: 100%;
    background-color: var(--boxel-200);
  }
  .inner-container__header + .inner-container__content[data-scopedcss-855254ef08-f4c6fba395] {
    padding-top: 0;
  }
  .inner-container__content[data-scopedcss-855254ef08-f4c6fba395] >  * + * {
    padding-top: var(--boxel-sp-sm);
  }
  .mask[data-scopedcss-855254ef08-f4c6fba395] {
    scrollbar-color: white white;
  }
  .mask[data-scopedcss-855254ef08-f4c6fba395]::-webkit-scrollbar {
    height: 10px;
    width: 12px;
  }
  .mask[data-scopedcss-855254ef08-f4c6fba395]::-webkit-scrollbar-thumb {
    background: white;
  }
  .mask[data-scopedcss-855254ef08-f4c6fba395]::-webkit-scrollbar-track {
    background: white;
  }

  .inner-container__header[data-scopedcss-855254ef08-0fd23f12e0] {
    padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
    font: 600 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .inner-container[data-scopedcss-855254ef08-12713534f6] {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--boxel-200);
    overflow: hidden;
  }

  .section-header[data-scopedcss-855254ef08-0758aa4e33] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--boxel-sp-5xs);
    font: 600 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .panel-section[data-scopedcss-855254ef08-2dedaf04b1] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }

  .left-panel[data-scopedcss-0a5e45b71e-4fa46ae546] {
    background-color: transparent;
  }
  .left-panel-header[data-scopedcss-0a5e45b71e-4fa46ae546] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs);
    border-bottom: var(--boxel-border);
  }
  /* RestoreScrollPosition and scroll-into-view own this panel's scroll
     position. Browser scroll anchoring would shift it when the panel's
     content is swapped, e.g. one realm's tree replacing another's, and
     the shifted position would then be persisted as the selected file's. */
  .content[data-scopedcss-0a5e45b71e-4fa46ae546] {
    overflow-anchor: none;
  }
  .file-browser .content[data-scopedcss-0a5e45b71e-4fa46ae546] {
    background-color: var(--boxel-light);
  }
  [data-scopedcss-0a5e45b71e-4fa46ae546] .realm-dropdown-trigger {
    background-color: #e9e9ec;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--boxel-400);
    padding: var(--boxel-sp-xs);
    padding-bottom: var(--boxel-sp);
    height: fit-content;
  }

  .realm-download[data-scopedcss-0a5e45b71e-4fa46ae546] {
    border-bottom: var(--boxel-border);
    background-color: var(--boxel-light-100);
    padding: var(--boxel-sp-xxs);
  }

  .realm-download-button[data-scopedcss-0a5e45b71e-4fa46ae546] {
    --boxel-button-min-height: 1.5rem;
    --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-5xs)
      var(--boxel-sp-5xs) var(--boxel-sp-xxxs);
    --boxel-button-font: 600 var(--boxel-font-xs);

    justify-content: flex-start;
    gap: var(--boxel-sp-xxxs);
    align-self: flex-start;

    border: 0;
    background: transparent;
    border-radius: var(--boxel-radius);
    cursor: pointer;
    font: inherit;
    width: 100%;
  }

  .realm-download-button[data-scopedcss-0a5e45b71e-4fa46ae546] svg {
    margin-bottom: var(--boxel-sp-6xs);
  }

  .realm-download-button[data-scopedcss-0a5e45b71e-4fa46ae546]:hover {
    background-color: var(--boxel-light-200);
  }

  .content[data-scopedcss-b251231310-e6cf0aba53] {
    width: 100%;
    margin: 0;
    font: 500 var(--boxel-font);
    letter-spacing: var(--boxel-lsp-xs);
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
  .content + .content[data-scopedcss-b251231310-e6cf0aba53] {
    margin-top: var(--boxel-sp-xs);
  }
  .disclaimer[data-scopedcss-b251231310-e6cf0aba53] {
    color: var(--boxel-danger);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }
  .delete[data-scopedcss-b251231310-e6cf0aba53] {
    padding: var(--boxel-sp-lg) var(--boxel-sp-lg) var(--boxel-sp);
    background-color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-xl);
    box-shadow: var(--boxel-deep-box-shadow);
  }
  .buttons[data-scopedcss-b251231310-e6cf0aba53] {
    margin-top: var(--boxel-sp-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  button[data-scopedcss-b251231310-e6cf0aba53]:first-child {
    margin-right: var(--boxel-sp-xs);
  }
  .error[data-scopedcss-b251231310-e6cf0aba53] {
    flex-grow: 1;
    color: var(--boxel-danger);
    font: 500 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
    margin-top: var(--boxel-sp);
    margin-bottom: 0;
  }

  @layer {
    .boxel-selector[data-scopedcss-b95f37aede-44556c0235] {
      --boxel-selector-border-radius: var(--boxel-border-radius-sm);
      --boxel-selector-color: var(--boxel-light);
      --boxel-selector-current-color: var(--boxel-100);
      --boxel-selector-selected-color: var(--boxel-highlight);
      --boxel-selector-disabled-color: var(--boxel-highlight);
      --boxel-selector-font: var(--boxel-font-xs);
      --boxel-selector-item-gap: var(--boxel-sp-5xs) var(--boxel-sp-4xs);
      --boxel-selector-item-content-padding: var(--boxel-sp-xs);
      --boxel-selector-item-type-color: var(--boxel-450);
      --boxel-selector-selected-background-color: var(--boxel-highlight);
      --boxel-selector-selected-font-color: var(--boxel-dark);
      --boxel-selector-selected-hover-font-color: var(--boxel-dark);
      --boxel-selector-selected-hover-background-color: var(
        --boxel-highlight-hover
      );
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: var(--boxel-selector-color);
      border-radius: var(--boxel-selector-border-radius);
    }

    .boxel-selector__item[data-scopedcss-b95f37aede-44556c0235] {
      font: var(--boxel-selector-font);
      letter-spacing: var(--boxel-lsp-sm);
      border-radius: inherit;
    }

    .boxel-selector__item[data-scopedcss-b95f37aede-44556c0235]:hover {
      background-color: var(--boxel-selector-current-color);
      cursor: pointer;
    }

    .boxel-selector__item > .boxel-selector__item__content[data-scopedcss-b95f37aede-44556c0235] {
      width: 100%;
      padding: var(--boxel-selector-item-content-padding);
    }

    .boxel-selector__item--disabled .boxel-selector__item__content[data-scopedcss-b95f37aede-44556c0235] {
      pointer-events: none;
    }

    .boxel-selector__item > .boxel-selector__item__content[data-scopedcss-b95f37aede-44556c0235]:hover {
      color: inherit;
    }

    .boxel-selector__item__content[data-scopedcss-b95f37aede-44556c0235]:focus-visible {
      outline: var(--boxel-outline);
    }

    .boxel-selector__item--selected[data-scopedcss-b95f37aede-44556c0235] {
      --boxel-selector-item-type-color: currentColor;
      background-color: var(--boxel-selector-selected-background-color);
      color: var(--boxel-selector-selected-font-color);
    }

    .boxel-selector__item--selected[data-scopedcss-b95f37aede-44556c0235]:hover {
      background-color: var(
        --boxel-selector-selected-hover-background-color
      );
    }

    .boxel-selector__item--dangerous[data-scopedcss-b95f37aede-44556c0235] {
      color: var(--boxel-danger);
      fill: var(--boxel-danger);
    }

    .boxel-selector__item--disabled[data-scopedcss-b95f37aede-44556c0235],
    .boxel-selector__item--disabled.boxel-selector__item[data-scopedcss-b95f37aede-44556c0235]:hover {
      background-color: initial;
      opacity: 0.4;
    }

    .selector-item[data-scopedcss-b95f37aede-44556c0235] {
      --icon-color: var(--boxel-dark);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--boxel-selector-item-gap);
    }

    .ellipsis[data-scopedcss-b95f37aede-44556c0235] {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .exported-item[data-scopedcss-b95f37aede-44556c0235] {
      flex-grow: 1;
    }

    .exported-item strong[data-scopedcss-b95f37aede-44556c0235] {
      font-weight: 600;
    }

    .exported-arrow[data-scopedcss-b95f37aede-44556c0235] {
      margin-right: var(--boxel-sp-4xs);
    }

    .non-exported[data-scopedcss-b95f37aede-44556c0235] {
      padding-left: calc(var(--boxel-selector-item-gap) + 20px);
    }

    .type[data-scopedcss-b95f37aede-44556c0235] {
      color: var(--boxel-selector-item-type-color);
      text-transform: uppercase;
    }
  }

  .number-items[data-scopedcss-e6116df04d-1d84ad472b] {
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xl);
    text-transform: uppercase;
  }
  .selected[data-scopedcss-e6116df04d-1d84ad472b] {
    outline: 2px solid var(--boxel-highlight);
  }
  .in-this-file-menu[data-scopedcss-e6116df04d-1d84ad472b] {
    padding: var(--boxel-sp-xs);
  }
  .loading[data-scopedcss-e6116df04d-1d84ad472b] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .delete-module-button[data-scopedcss-e6116df04d-1d84ad472b]:focus:focus-visible:not(:disabled) {
    outline: 2px solid var(--boxel-danger);
    outline-offset: 0;
  }

  .ai-assistant-button[data-scopedcss-9d12886f31-269f23f394] {
    width: var(--container-button-size);
    height: var(--container-button-size);
    border-radius: var(--boxel-border-radius);
    background-color: var(--boxel-dark);
    border: var(--boxel-border-flexible);
    background-image: image-set(url('data:image/webp;base64,UklGRgYCAABXRUJQVlA4WAoAAAAQAAAAGQAAGQAAQUxQSMUAAAABgFXbVt1qS0ACEnBQHBQHxUFxUCRcB40TcNA4AAeJg/2xeVwJETEBGHuSrJUkPTbDStjJ8ndI3mmSkvw2ItVaYVxyl3Sgy+UWXhfVA0F4veTx/DQOKwBUIX+f54PzbsT0wXp3GLq+VQ2mpq51j2XfB7UeyWLbpqPWUr7v/3h/S6E2vxYal4uZmcLd5kaucb8ZMY1zH/I5YJHC4ZmDB4B4Cz0QqHfE3N3SgCa3w2oUWkuNWO+SkpzYzHIckneC1Cphx6/4CQBWUDggGgEAANAIAJ0BKhoAGgA+bTCTRyQjIaEoCqiADYlsAJ0y43mfjXDn75NhnMfImEA54jcQPZr58v2MfJAAbPO7yGJmutiLvayjgnMJdH1F2DmS5YAA/sNd5nCfj0nyEoYDCcd/a+s8rM6SzWFYyWRtmknvHddHhrszX/vEF+DSzHS12Ipf4rsqCDi4/Y8hXXNZIh9h1RGCFdzS01aOcoZrbEMhfDAVbYP4DMUiZ2Z33RnvHaDXvQEFvTfUf7h9cMs7+frGUnfFJhxEMu7Gpnx9pu0g4H6//JvvL/lO6yxZ+Ss7ZI09hg86DATL93vF6Qr45v+G511//3aKOEPl+ed21HH7yY5JH/bvJ/ztHqofit+OQBz8BEv/48NeW8AAAA==') 1x, url('data:image/webp;base64,UklGRoYDAABXRUJQVlA4WAoAAAAQAAAAMwAAMwAAQUxQSHIBAAABgJZtb9YqEioBCThYnRwcUAetg+EAHAwHw0HrAByAg+zzbRJ2/kcEA7dt48i9d2/JkjdQTYm/leAtUE0/wSxj1rLIWLSsgC4AViUtA7xH99DoCAjnEMFqXogKmlr1A9Fg07kd0RJ5xO7kNTNgo5c2dB/ZSevIiPRpjEijU4/5cB+3crBy2O8MCeBbwAP6mgn1K2MV+lJhrLVvP4jxdl+5pqPF9lhbuN9iZJE6bClWmghqsquVYlXNyyGy6KCltEJvLharosVDypYcKeTSJjn30JJafvg+dXqp846M5Hz33hZf+rvYceljBDabr95gcs0sMPuo2yVCBxJ6psyrFcpSW8qsVC9aZb3GOiOzRRFU+zKylYLa/1KaF4HZa/5d2zKnzxDdhNpC/ibXVkKj8swgWjs6iVUWyO7q8YmLMFBMutgyiQNS4VpEXdXjevzxlVh5uDNickcabejE+MzbOTnGWbmM0bQLaH5ObvYTOeC/yU8JVlA4IO4BAABQDQCdASo0ADQAPm0skkakIj+hMBIMA/ANiWwAuRfov4fAeaLWeyFGPhU7ernd/RzvIm8wgb58DypeQ+Xe6C73cPt4lM/nKeQIJaIh+0w5W06DfzKUkLwzzvI0Z1mZEQoj3f1onuOrUcKFF6G4HDt8nUWAAP7+9l3+RfZSNX2uw5INGJe5fm2NPbC9v4//Jv/Sx9j/wThZvDxAX6+Mski7H3YP9gB/k3PNtNddfbp/APAt2n27hXnf+Gf++NLmHyMMah7BB2pXZMN3Qjb1YTbt+t8um///sRDqdL/FwJsZtZqDVGGWWjryAzaiV4GXO9DN/CilzOvJ3+P+GViVOGsi8//fRQcxJxrwpy5j/k6GG/eHsYtaVAnhtMDGZXYGDJWdsDvL18YntWV/dv6PEtspt6inaWA38/NApOoAl5ehJRg2GZd/+UJn3EYhCqpJfPHRwUM1L2q/+Qi+Z3/GTAbNpdPy4fuPR+LFKfCJU59oVibJbYQ22VV/USYkoQuNLeNXhc9iUfBRZDLbZeSm4B0wopJ+X8Qr9/X0D9AjiTrBjN7wZcif+pif//6C1tTlo1jibaNsEftdPVofm//N2DLM8S1F3FdVFm/X+8oRGst0f0IATfAP/3iMwGZtTjWKkBM96hm4kqe9JzvZeAAAAA==') 2x, url('data:image/webp;base64,UklGRhAFAABXRUJQVlA4WAoAAAAQAAAATQAATQAAQUxQSCECAAABkFVbe5hYn4RfQiTEAXEwSKgD4oA6GBxQB9QBcVActA4SB98Dhf/P37n3OSImANaFypSoLHD+1yy9Fm/sxX+a9BNfSRWCKvkaVYAq+yqaArw0xZVQOwOzhuIpqzKQVdnTqopAVK2OMrUNAJqG2Y1U1fQ2qap4eVB9fjur+HCSqd6wu6mYXQzUj3ujjoODgfome2LAoduFhhM+Tga89JEHLcOnYMGHdLhUWo74crRgvRjJZaXphm9lsyDXi2jkdH3SOn2FZEPyeT3JzvO5sOsNypvV/vJ8svML6leX/i3oQjtQizCM7TAtwjS2g7QI49gO0SLMYzvAK6BjeLm7ofPN15bQPW2ORrgcnbQpwGmYWr9tFDiWcevSpjPcn6dmU+YccdCY5/Ip7QYcPqTd0+5fcNrlx+VxiUeJl8dC03r/8fdzr+y5XsWTXFf2vwcv4U6nVxdypd819UsrXf/2+qX3JfQIC/3XaBcrj1ijVaw8Zo02kYet0SLW47AGXag88qJb2LmUVxfeNDd2LaXgXVIuVkzfJVqXnARKyZvN+pWsNlsW2OZmwfGbkZZtgL3MFgyfAi1nQddsMX2aLDJ6DwZV9oT6NqD/oOO4NxoM8Jh1696qy/A5q3h+O1M9w6k01fQ2qZp4QVbVt6oa4HfTMAKR2g2OsyoDWZU9iWoGZpV4QtEUYNHMcD1qCFCbfSVVCKrkS1QpqcQX+uGf9upVvJX/AwBWUDggyAIAAJATAJ0BKk4ATgA+bS6VRy8iv6Erk5qD8A2JaAZwZID9K4EAeuSV/qvPrZE9J+OXss1v+x74+bztPnv4T1/gP1m92P+l3wD0APLT9jz908JoDe17MOXQ+VU3kY/ujlBWyvItHBx5//oew2eiG3ORvlhMj6q0nGYXrinhrcY+On0D9eJ7QYxleXJdgGYk9wyyj+KiP7cj5O9t7dJVA4svtLpryDkiAAD+/gbUH9X3zTDTdpEcekMcumgoBHlKQ4bY2cb0OTdd4aXOPGw9AxiuyNPDJPDxDHHDNsB3k8YSGJCzYwl+v+QMhVCHJZE8c/8gxH9KSolDsm8PwljgRau5WAK6AEQzK74q6dDOsb9H7H/gnLybt3eC/In/eFYn+zX7q7tigvmmR6ex3octo0hX7xM4VFjvv9lTu7/9TZ//mv7//zxU1RrpJuuCcOMNtSht3PebW0jfZxwSiwX2FXZGSZ/+2WTRC+4i2/+mfxvRz7jv7YrSmcynqS7B6yN4XGiZwhI0V8NNE49j316x+xjgFCMTsaU/uHT8OF/YX+dbPBFNgIKP/uz9sm7i1fX6PG7svkim2e5lQvcGodeuqUYT0JuZIv+uszUi+2rFluWHpeoG+LAEGSX4XbJ+RP/hatLx2B7EQDfBr1x9J3rpEWEPox/WzmtB7raXYq4HqNdh3dyPG30V6tP74fVeJn0ISTePh1CUMHRvnnuPzjgox/Bs8qZZe+VBrA9GqHBZiEaGYaHNeFNZ/u+D/tfM6HDFiBtQ4mrnw5bqOd2hp5w1RfZN74fM4A/ZtXhtzDxXYLRH/Oq9Y8dY2Oc7QwiVTY7+Wwr9PhMX+KfUtbUeIjbSKC2u+1pG9g9HSVibAmuRc3sEd6UG/UY6J+uZP0mHSxo/NIG9v+f+P+LesIoL7IK/+kChRD7HBOxKkzv04LM/SQOQSXQ1/9ChAAAAAAA='));
    background-size: 26px 26px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .ai-assistant-button[data-scopedcss-9d12886f31-269f23f394]:hover {
    cursor: pointer;
  }

  .ai-assistant-button.is-active[data-scopedcss-9d12886f31-269f23f394] {
    background-image:
      image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAABbZFH9AAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMA4MBAUCCA8DBgcBCev9CwD4LDAAAAsElEQVQY02NgYGBg/v9f6f9/AwYIYAHzHKA8tv//z/z/nwDlMf7/v+r//wdQ3vz//0P///8J4XDU///IIP//ewOYN/3//88M/v//VwLZJon///9XYGACks+cGYDk/48bGLjlQQwwTwKophHG+7QByOPWh/A+QtzEDFTLoHQqAGot6xolBl0k3l2EShZ5iCl/wabcx2oDku0meUDyAsxlqK5G9xGqb9FCAjWUUEMQEboAKGieOuGXHKoAAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAM1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADbQS4qAAAAEHRSTlMAoN/g0HDwgBA4b7DAYJAgKn6VhgAAAUtJREFUSMe1llm2gyAMQIEwK8r+V/uqVQm+MJSj+aIp1wTIxFguJp5i0JLVZQiaKGhqQDMFzQ1IXDuDupaizrhrY3RovVah9PVobVqrTu8kY7LPP2RoYWzpMmU1OlJ2QG2LTPInwqaA9FsWKMvTnm8QGKTgtmXncAe7S9ryeMN5cIV12t/e1Av893bfX5GZWnh3hLWZ5pz4fNMREXJw82QMi4QE8uWSUBDHnvM+iOfn5T0Qv98rb0JaVSOShKQjs0xWIF0MZqULEBhbSQAD/yG5uEb1YG45vfxEhDHBWdYl1oVt/6+Q36Eh91As1i9ClK7clxivn33cTQhj/pWAHUyNsSTMijCd7lthgbu2XFhgLyy7rAp6ShiotZYxZLEMz5TlsQaQ2xJ5Xyy2mrGmVmmfoZZoQDdqeH4kGBo+kH9ozIE3Bqqh0e29yfIPpX9SFptxfzoAAAAASUVORK5CYII=') 2x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOBAMAAAB8hD0uAAAALVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACttl6nAAAADnRSTlMAQPAQcMDgmyAwgFnQsL9vPHMAAAHnSURBVEjHY2BAANZ3ECAIpQMYsANi1fGgqTuAQx0fmroHFKqzQ1P3GIc6Oah8B5R+iEPdOqg8A5R+gkNdHET6KcM5GAMrYIYa85bhHpRlgFUdC9w6PyjLAas6NqjsS4Z5UFYCVnUwUxQYmPB5hFkPKlvAwA5lPcLmQF6o5LsNDNww5gU81j4DsvNwWww34xVSiAPNRgf7YFLKSDH97jWuwAN5gwHuEYwgZL4Hl2kAcjngvLeoXnZ6h+w8JAe+U0E2zQ0uDI0DM4RACsxEZqk4hOg7AbAYI5LI04UglaHn3iGD51DNdSiib0IZ3qGCA2h57x1a2oXFaANUHYceXnWacL9Nwqfu0QS4Ok49POo0kQJrEm51SMahG4ii7gRKHPXgUvccLW3UYVf3TABNHWMeVnULMNIkFxZ1jyqw5IV2PXR1zxZjzatWeajq1DfgKHO4i5DUxXoy4AZTroLVCQoKNjDgBxxANUSrAxl6Fq+9d0j2B/HhAgRYw5m4eLOiKB0Qm66ITqdEp3ti8xFKvqRGPie63MBdDhFVrj0NBZWTIgTKSUcDkspd/OW4Nln1ArH1DK56S5vsepDYepXoeprYeh9LO+I1Re0SYts5xLabMNphbyls1xHbTiS23Unt9i4Pldvt+NQBAB9oZBBHrizFAAAAAElFTkSuQmCC')),
      image-set(url('data:image/webp;base64,UklGRgYBAABXRUJQVlA4IPoAAABwCACdASooACgAPmUkj0WkIiEarVaoQAZEtABOnKCpXvr+vcbFxFBQd4AW1ZWWdE1i3M9+l2J+Qzh0dUC4tT2KUgciCScW5szZROIAAPtiWKAV1BELEbopzymhuZEtnLBa5ah9tiN8TbfUssW/VBEhajhC5/QlbdLMBuf5lSaQ9VEcoQW5+5CbRt7tEqdAx0cibcLKg2d6YJF9wD6eoo0IDmV9ZiN8nvKkyL4mOvsN2izhHIA9r1wsKaPo8N14aMa0Xxv4to+ykD1J3XgZp5xL/V/bi37CpeIebyg1X0HvbpEQm9+HqGhU0mgIx6l1HldKsvcLRlDgAAAA') 1x, url('data:image/webp;base64,UklGRrIBAABXRUJQVlA4IKYBAACwEACdASpQAFAAPm0qkUWkJKGXrAYkSAbEsgBOmbQ/plP2Tuzh55ReMd/RR7kjLJFy8rH2ocfSfuSO59Eu9Vb0R/dtXmQppAq5YgaDfLGD3AoAlW7AhNa06c4lWSZWoZ3e2nIZUoS5NSh577tSsJFwx7STxcZvyiDdYaDNDxkspI/I/h6ol/amoZsrnlyAAP5wfD+Y300E999h15qC2b/76G3/bSb/3sS/cyF6jdbS6xi244QXmnct11OAov4yRfRUjLBzq7bCpSOsBF8oVSh1i1uDOVijOMZ8mQLGF8nlUpDuNbdxoFUEVbV2voB55pzPDumU9uh3n9D2509KGOsrS0iIJbLdLTOQ4BldO3ZaGN114JnSMv7qgirrVwnBk34scic8ZrA71JI9+O4F2vI0nq8eK73thoxAwHUNIF0s3mo5reFU6u3+JAOn71zpozNzetTGHYy7JvfzMpCX7shslNRLySUoDPWkEXhE3jvnyXL/XA5yh39htk4WXl2sXGKFzd0Zeqh+izW8jVUSACVReLNVnIRYpLcDahzIwJjXKOFYnEYAAA==') 2x, url('data:image/webp;base64,UklGRtwCAABXRUJQVlA4INACAAAwGACdASp4AHgAPm0ylEcpMyuqKBYLqmANiUVXneLkOABeYofoNv1aAiqq/uI9uwF6WV7VpZep7CG7gMP5+P2d9GZgAaRYyJo4rVSK7kr18y9KOvHNQI5LNlwxjdafz3P2lPeui7sKgaNsR9VNFoIJQfIj9u1tb//4Z8J+Rvxxr3kZ7VcYA384d9usv3s/voEUGBK5VVMGTt6y2Q1O/ibuUI1ucpCvBp7krhnNMbs1HVp4mcTrBUojJdjq6Iakqcrzef//zPXYxzaAAP5L+R3fyKX6dNf0RhI/+8Z//sML/95Cx84mJS8k3RHMB/LMlYblp0rYuCIC++6Yy4cqP6GS6cWib8FwBu3CukkAqtSGzkZiObAbH3Xw8E4c7NNpLhBLU20aHVf7x/jIFQ2fgbr5d0je8QVj9H/t3u73Jeuwu2+ysZsN2j1U7sV2slsTsgDxPP3rBES3GjLORSkviGVpUaNmEKr6X+kTunA7my+LLa/cqua1jRB/BSHfSSf5G2sfgCoN0zkoUB/N6vfdgtPjIqpOVhgrYi785ReitZFxg/ppiGSPG0cCWMogJByAtbry1slA6PkHuEZT0XPLbA/CcMfQQ/0/V6yLnsUDiibUJ+V3oPqk9di6Bc3ESuqfEuDenXsWDRkHxmBPxKjiU0S03QxCZf+8MMjj+HTmouYa25bSbBGQn/pH8auUeHsnG4JxnwzoZc/Ep9LjLvm/AGciUgTwlNPwhZ33zSJ8HjqTg5RIvk1lDtUSqUg5C2AzNy3+bYOcdDAZxV65TACBdjKpuGy/yn3gftvH8WlTFTDaROAGqGvixcUjLNkveTLtMszM1xorSU11BwyDtYHRwsqcoo58TfeRjr7bA5XamnbksrBjrLU36/y9rr+KfHiKu+MZ6H6+EQiNDBTlGuMeP3N/jmIlOvwGknyLSTdbs8elc9eIiCpuWOWVtX9dcYgAgAA='));
    background-size:
      26px 26px,
      40px 40px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.35);
  }

  .intro[data-scopedcss-8ba06c3381-22b9bd59b0] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xl);
    height: 100%;
    padding: var(--boxel-sp-xl) var(--boxel-sp-xxxs) 0;
    color: var(--boxel-light);
    letter-spacing: var(--boxel-lsp);
    overflow: auto;
  }
  .title-group[data-scopedcss-8ba06c3381-22b9bd59b0] {
    display: flex;
    gap: var(--boxel-sp-xs);
    align-items: center;
  }
  .title-text[data-scopedcss-8ba06c3381-22b9bd59b0] {
    margin: 0;
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1.25;
  }
  .message[data-scopedcss-8ba06c3381-22b9bd59b0] {
    margin: 0;
    padding: var(--boxel-sp-4xs);
    font: 600 var(--boxel-font);
    line-height: 1.5;
  }
  .error-section > * + *[data-scopedcss-8ba06c3381-22b9bd59b0] {
    margin-top: var(--boxel-sp-sm);
  }
  .disclaimer[data-scopedcss-8ba06c3381-22b9bd59b0] {
    margin: 0;
    color: var(--boxel-450);
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .panel-popover[data-scopedcss-2e6635f2ad-a9fc4c3902] {
    position: absolute;
    top: 1.5rem;
    right: 1.875rem;
    left: 1.875rem;
    margin-top: var(--boxel-sp-sm);
    min-height: 12.5rem;
    max-height: 75vh;
    background-color: var(--ai-assistant-menu-background);
    border: 1px solid var(--ai-assistant-menu-border);
    border-radius: var(--boxel-border-radius);
    color: var(--ai-assistant-menu-foreground);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    z-index: var(--host-ai-panel-popover-z-index);
    display: flex;
    flex-direction: column;
    timeline-scope: --past-sessions-scroll-timeline;
  }

  .header[data-scopedcss-2e6635f2ad-a9fc4c3902] {
    --box-shadow-offset-x: 0;
    --box-shadow-offset-y: 7px;
    --box-shadow-blur-radius: 15px;
    --box-shadow-spread-radius: -7px;
    --box-shadow-color-start: rgba(0, 0, 0, 0);
    --box-shadow-color-end: rgba(0, 0, 0, 0.75);

    --box-shadow-start: var(--box-shadow-offset-x) var(--box-shadow-offset-y)
      var(--box-shadow-blur-radius) var(--box-shadow-spread-radius)
      var(--box-shadow-color-start);

    --box-shadow-end: var(--box-shadow-offset-x) var(--box-shadow-offset-y)
      var(--box-shadow-blur-radius) var(--box-shadow-spread-radius)
      var(--box-shadow-color-end);

    position: relative;
    padding: var(--boxel-sp-xs);
    color: var(--boxel-200);
    font: 700 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-sm);

    box-shadow: var(--box-shadow-start);

    animation: scroll-past-sessions-data-scopedcss-2e6635f2ad-a9fc4c3902 linear forwards;
    animation-timeline: --past-sessions-scroll-timeline;
  }
  .header[data-scopedcss-2e6635f2ad-a9fc4c3902] button {
    transform: rotate(180deg);
    position: absolute;
    right: var(--boxel-sp-xs);
    top: var(--boxel-sp-xs);
  }

  .body[data-scopedcss-2e6635f2ad-a9fc4c3902] {
    overflow-y: auto;
    flex-grow: 1;
    scroll-timeline: --past-sessions-scroll-timeline block;
  }

  @keyframes scroll-past-sessions-data-scopedcss-2e6635f2ad-a9fc4c3902 {
    0% {
      box-shadow: var(--box-shadow-start);
    }
    1% {
      box-shadow: var(--box-shadow-end);
    }
    100% {
      box-shadow: var(--box-shadow-end);
    }
  }

  :root {
    --color-streaming: #01c6bf;
    --color-new-messages: #00ad4a;
  }

  .session[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--boxel-sp) var(--boxel-sp-sm);
    margin-right: var(--boxel-sp-xs);
    margin-left: var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius-xs);
  }

  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--ai-assistant-menu-divider);
  }

  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]:first-child::before {
    display: none;
  }

  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]:hover,
  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]:has(.menu-button[aria-expanded='true']) {
    background-color: var(--ai-assistant-menu-hover-background);
    border-radius: var(--boxel-border-radius-sm);
    cursor: pointer;
  }
  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]:hover::before,
  .session[data-scopedcss-daa6e1c1db-8fabcaf48a]:has(.menu-button[aria-expanded='true'])::before,
  .session:hover + .session[data-scopedcss-daa6e1c1db-8fabcaf48a]::before,
  .session:has(.menu-button[aria-expanded='true']) + .session[data-scopedcss-daa6e1c1db-8fabcaf48a]::before {
    background: transparent;
  }
  .session[data-is-current-room][data-scopedcss-daa6e1c1db-8fabcaf48a] {
    background-color: var(--ai-assistant-menu-hover-background);
    border-radius: var(--boxel-border-radius-sm);
  }
  .session[data-is-current-room][data-scopedcss-daa6e1c1db-8fabcaf48a]::before,
  .session[data-is-current-room] + .session[data-scopedcss-daa6e1c1db-8fabcaf48a]::before {
    background: transparent;
  }
  .name[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    font-weight: 600;
  }
  .date[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    margin-top: var(--boxel-sp-6xs);
    color: var(--boxel-400);
    font-size: var(--boxel-font-size-xs);
  }
  .view-session-button[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    color: var(--boxel-light);
    background-color: transparent;
    border-radius: var(--boxel-border-radius-xs);
    border: none;
    width: 100%;
    margin-right: 1px;
    text-align: left;
  }
  .view-session-button[data-scopedcss-daa6e1c1db-8fabcaf48a]:focus:focus-visible {
    outline-offset: 1px;
  }

  .menu-button[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    --host-outline-offset: 2px;
    visibility: hidden;
  }
  .session:hover .menu-button[data-scopedcss-daa6e1c1db-8fabcaf48a],
  .session:focus-within .menu-button[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    visibility: visible;
  }
  .menu-button[aria-expanded='true'][data-scopedcss-daa6e1c1db-8fabcaf48a] {
    visibility: visible;
  }

  .past-session-menu-dropdown {
    --boxel-dropdown-background-color: var(--ai-assistant-menu-background);
    --boxel-dropdown-border-color: var(--ai-assistant-menu-border);
    --boxel-dropdown-text-color: var(--ai-assistant-menu-foreground);
    --boxel-dropdown-hover-color: var(--ai-assistant-menu-hover-background);
    --boxel-dropdown-box-shadow: var(--boxel-deep-box-shadow);
    --boxel-menu-item-border-radius: var(--boxel-border-radius-xs);
    overflow: hidden;
  }

  .menu[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    --boxel-menu-item-content-padding: var(--boxel-sp-2xs)
      var(--boxel-sp-sm);
    padding: var(--boxel-sp-xs);
  }

  .menu[data-scopedcss-daa6e1c1db-8fabcaf48a] svg {
    --icon-stroke-width: 1.5px;
    --icon-color: currentColor;

    margin-right: var(--boxel-sp-xs);
  }

  .menu[data-scopedcss-daa6e1c1db-8fabcaf48a] .boxel-menu__item:nth-child(2) svg {
    --icon-stroke-width: 0.5px;
  }

  .icon-recency-indicator[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    display: inline-block;
    margin-right: 4px;
  }
  .icon-streaming[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    --icon-color: var(--color-streaming);
  }
  .icon-new-messages[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    --icon-color: var(--color-new-messages);
    --icon-fill-color: var(--color-new-messages);
  }
  .has-unseen-message[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    color: var(--color-new-messages);
  }
  .is-streaming[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    color: var(--color-streaming);
  }
  .pulsing[data-scopedcss-daa6e1c1db-8fabcaf48a] {
    animation: pulse-data-scopedcss-daa6e1c1db-8fabcaf48a 2s infinite;
  }
  @keyframes pulse-data-scopedcss-daa6e1c1db-8fabcaf48a {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.2);
      opacity: 0.7;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .past-sessions[data-scopedcss-894c4d34ef-493dbc9799] {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: var(--boxel-sp-xs);
  }
  .empty-collection[data-scopedcss-894c4d34ef-493dbc9799] {
    padding: var(--boxel-sp-sm);
    text-align: center;
    color: var(--boxel-450);
  }
  .loading-indicator-container[data-scopedcss-894c4d34ef-493dbc9799] {
    padding: var(--boxel-sp-sm);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading-indicator[data-scopedcss-894c4d34ef-493dbc9799] {
    margin: 0 auto;
  }

  .rename-session[data-scopedcss-a15cac7205-16ceddfd22] {
    --boxel-input-outline: none;
    min-height: unset;
  }
  .rename-field[data-scopedcss-a15cac7205-16ceddfd22] {
    padding: 0 var(--boxel-sp-xs);
  }
  .rename-field[data-scopedcss-a15cac7205-16ceddfd22] .label {
    font: 600 var(--boxel-font-sm);
  }
  .footer[data-scopedcss-a15cac7205-16ceddfd22] {
    display: flex;
    justify-content: flex-end;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs);
  }

  @layer PretComponent {
    .pretui-contextring[data-scopedcss-9f65988566-a9b7d8620b] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
    }
    .pretui-contextring-ring[data-scopedcss-9f65988566-a9b7d8620b] {
      --_contextring-ink: var(--muted-foreground);
      width: 0.875rem;
      height: 0.875rem;
      border-radius: 50%;
      background: conic-gradient(
        var(--_contextring-ink) var(--pretui-ring-share),
        var(--border-strong) 0
      );
      -webkit-mask: radial-gradient(
        circle,
        transparent 0.25rem,
        black 0.28125rem
      );
      mask: radial-gradient(circle, transparent 0.25rem, black 0.28125rem);
    }
    /* past the warning share the ring (the mark) takes the attention
       ink, and the digits step up to the full foreground */
    .pretui-contextring[data-warn][data-scopedcss-9f65988566-a9b7d8620b] {
      color: var(--foreground);
    }
    .pretui-contextring[data-warn] .pretui-contextring-ring[data-scopedcss-9f65988566-a9b7d8620b] {
      --_contextring-ink: var(--attention-ink);
    }
  }

  @layer PretComponent {
    /* absolute against the caller's positioned scroll frame — stated in the
       docs because it is the one thing the caller must provide */
    .pretui-jump[data-scopedcss-95bc1f5629-d8090e7f9c] {
      position: absolute;
      inset-inline: 0;
      bottom: var(--pretui-jump-offset, var(--boxel-sp-sm));
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: var(--pretui-z-sticky, 10);
    }
    .pretui-jump[data-direction='up'][data-scopedcss-95bc1f5629-d8090e7f9c] {
      bottom: auto;
      top: var(--pretui-jump-offset, var(--boxel-sp-sm));
    }
    .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-3xs);
      min-height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--card);
      box-shadow: var(
        --pretui-shadow-overlay,
        0 0 0 1px var(--border),
        var(--shadow-lg)
      );
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      color: var(--foreground);
      cursor: pointer;
      pointer-events: auto;
      opacity: 0;
      transform: translateY(0.5rem) scale(0.96);
      transition:
        opacity 180ms ease-out,
        transform 220ms
          var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    /* shown while offered, and while it holds the keyboard focus a jump
       left on it, so a focused control never vanishes under the reader */
    .pretui-jump[data-visible] .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c],
    .pretui-jump:focus-within .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c] {
      opacity: 1;
      transform: none;
    }
    /* hidden means hidden: no pointer events, no tab stop, no hit area */
    .pretui-jump:not([data-visible]):not(:focus-within) .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c] {
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity 180ms ease-out,
        transform 220ms ease-out,
        visibility 0s linear 220ms;
    }
    /* --hover is translucent, so it lays over the card face rather than
       replacing it: the chip floats over the transcript */
    .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c]:hover {
      background-image: linear-gradient(var(--hover), var(--hover));
    }
    .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-jump-btn > svg[data-scopedcss-95bc1f5629-d8090e7f9c] {
      flex: none;
      color: var(--subtle-foreground);
    }
    .pretui-jump[data-direction='up'] .pretui-jump-btn > svg[data-scopedcss-95bc1f5629-d8090e7f9c] {
      transform: rotate(180deg);
    }
    /* news is never colour alone — the count is in the label; the
       arrow (the mark) takes the live state, the chip stays the card */
    .pretui-jump[data-news] .pretui-jump-btn > svg[data-scopedcss-95bc1f5629-d8090e7f9c] {
      color: var(--primary-ink);
    }
    @media (any-pointer: coarse) {
      .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c] {
        min-height: 2.75rem;
        padding: 0 var(--boxel-sp);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-jump-btn[data-scopedcss-95bc1f5629-d8090e7f9c] {
        transition: none;
        transform: none;
      }
    }
  }

  @layer PretComponent {
    /* the root is the query container for both presentations — unnamed,
       so the rules below resolve against THIS box and not the viewport */
    .pretui-steplist-wrap[data-scopedcss-1562467eec-0409fdce5e] {
      container-type: inline-size;
      display: grid;
      gap: var(--pretui-step-summary-gap, var(--boxel-sp-xs));
      min-width: 0;
    }
    .pretui-steplist-summary[data-scopedcss-1562467eec-0409fdce5e] {
      justify-self: end;
      margin: 0;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--pretui-step-summary-color, var(--subtle-foreground));
    }
    .pretui-steplist[data-scopedcss-1562467eec-0409fdce5e] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      margin: 0;
      padding: 0;
      list-style: none;
      min-width: 0;
    }
    .pretui-step[data-scopedcss-1562467eec-0409fdce5e] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-width: 0;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
    }
    .pretui-step[data-scopedcss-1562467eec-0409fdce5e]:not(:last-child) {
      flex: 1;
    }
    /* per-state treatment: each state only re-points the tone props, and
       each of those reads a per-state consumer knob first — set
       --pretui-step-error-marker-bg (etc.) on any ancestor to re-tone one
       state without touching the rest */
    /* the assistant visual system's rule: a state colours the mark (the
       marker, its ring, its bar) and never the label, done is ink with
       its check, and the primary hue is kept for the one action */
    .pretui-step[data-state='upcoming'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(
        --pretui-step-upcoming-tone,
        var(--muted-foreground)
      );
      --pretui-step-marker-bg: var(
        --pretui-step-upcoming-marker-bg,
        var(--inset)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-upcoming-marker-fg,
        var(--subtle-foreground)
      );
      --pretui-step-ring: var(--pretui-step-upcoming-ring, var(--border));
      --pretui-step-bar-fill: var(
        --pretui-step-upcoming-bar,
        var(--border)
      );
    }
    .pretui-step[data-state='current'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(
        --pretui-step-current-tone,
        var(--foreground)
      );
      --pretui-step-marker-bg: var(
        --pretui-step-current-marker-bg,
        var(--foreground)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-current-marker-fg,
        var(--card)
      );
      --pretui-step-ring: var(
        --pretui-step-current-ring,
        var(--foreground)
      );
      --pretui-step-bar-fill: var(
        --pretui-step-current-bar,
        var(--foreground)
      );
    }
    .pretui-step[data-state='complete'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(
        --pretui-step-complete-tone,
        var(--muted-foreground)
      );
      --pretui-step-marker-bg: var(
        --pretui-step-complete-marker-bg,
        var(--inset)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-complete-marker-fg,
        var(--foreground)
      );
      --pretui-step-ring: var(--pretui-step-complete-ring, var(--border));
      --pretui-step-bar-fill: var(
        --pretui-step-complete-bar,
        var(--muted-foreground)
      );
    }
    .pretui-step[data-state='error'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(--pretui-step-error-tone, var(--foreground));
      --pretui-step-marker-bg: var(
        --pretui-step-error-marker-bg,
        var(--inset)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-error-marker-fg,
        var(--destructive-ink)
      );
      --pretui-step-ring: var(--pretui-step-error-ring, var(--destructive));
      --pretui-step-bar-fill: var(
        --pretui-step-error-bar,
        var(--destructive)
      );
    }
    /* running now: the live hue on the mark's play triangle and ring, so
       it never reads like 'current' (ink filled solid, with a number) at
       a glance */
    .pretui-step[data-state='in-progress'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(
        --pretui-step-in-progress-tone,
        var(--foreground)
      );
      --pretui-step-marker-bg: var(
        --pretui-step-in-progress-marker-bg,
        var(--inset)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-in-progress-marker-fg,
        var(--primary-ink)
      );
      --pretui-step-ring: var(
        --pretui-step-in-progress-ring,
        var(--primary)
      );
      --pretui-step-bar-fill: var(
        --pretui-step-in-progress-bar,
        var(--primary)
      );
    }
    /* cannot proceed: the attention hue, not failed — nothing has failed */
    .pretui-step[data-state='blocked'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-tone: var(
        --pretui-step-blocked-tone,
        var(--foreground)
      );
      --pretui-step-marker-bg: var(
        --pretui-step-blocked-marker-bg,
        var(--inset)
      );
      --pretui-step-marker-fg: var(
        --pretui-step-blocked-marker-fg,
        var(--attention-ink)
      );
      --pretui-step-ring: var(--pretui-step-blocked-ring, var(--attention));
      --pretui-step-bar-fill: var(
        --pretui-step-blocked-bar,
        var(--attention)
      );
    }
    .pretui-step-marker[data-scopedcss-1562467eec-0409fdce5e] {
      display: inline-grid;
      place-items: center;
      width: 1.125rem;
      height: 1.125rem;
      border-radius: 50%;
      flex: none;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      background-color: var(--pretui-step-marker-bg);
      color: var(--pretui-step-marker-fg);
      box-shadow: 0 0 0 1px var(--pretui-step-ring);
    }
    .pretui-step-label[data-scopedcss-1562467eec-0409fdce5e] {
      position: relative; /* containing block for the sr-only state text */
      display: grid;
      min-width: 0;
      color: var(--pretui-step-tone);
    }
    .pretui-step-name[data-scopedcss-1562467eec-0409fdce5e] {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* The detail slot is rendered on every step as soon as ONE step
       declares a detail, and reserves a line's height, so a message
       arriving mid-run does not shove the whole rail down. */
    .pretui-step-detail[data-scopedcss-1562467eec-0409fdce5e] {
      min-height: var(--boxel-caption-line-height);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      white-space: normal;
      overflow-wrap: break-word;
      color: var(--pretui-step-detail-color, var(--subtle-foreground));
    }
    /* a blocked or failed step's reason steps up to ink-2; the mark
       carries the state's hue */
    .pretui-step[data-state='blocked'] .pretui-step-detail[data-scopedcss-1562467eec-0409fdce5e],
    .pretui-step[data-state='error'] .pretui-step-detail[data-scopedcss-1562467eec-0409fdce5e] {
      color: var(--muted-foreground);
    }
    .pretui-step-connector[data-scopedcss-1562467eec-0409fdce5e] {
      flex: 1;
      min-width: 0.75rem;
      height: 1px;
      background-color: var(--border);
    }
    .pretui-step[data-state='complete'] .pretui-step-connector[data-scopedcss-1562467eec-0409fdce5e] {
      background-color: var(--subtle-foreground);
    }
    /* ── track variant ── equal-width bars, caption beneath each. The
       caption keeps the marker glyph, so 'complete' is carried by shape
       (✓) and by the visually hidden state text, not by the bar fill
       alone. */
    .pretui-steplist[data-variant='track'][data-scopedcss-1562467eec-0409fdce5e] {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      align-items: start;
      gap: var(--pretui-step-track-gap, var(--boxel-sp-4xs));
    }
    .pretui-steplist[data-variant='track'] .pretui-step[data-scopedcss-1562467eec-0409fdce5e] {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        'bar bar'
        'marker label';
      align-items: center;
      gap: var(--boxel-sp-xs) var(--boxel-sp-4xs);
    }
    .pretui-steplist[data-variant='track'] .pretui-step-bar[data-scopedcss-1562467eec-0409fdce5e] {
      grid-area: bar;
      height: var(--pretui-step-bar-height, 0.1875rem);
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--pretui-step-bar-fill);
    }
    .pretui-steplist[data-variant='track'] .pretui-step-marker[data-scopedcss-1562467eec-0409fdce5e] {
      grid-area: marker;
      width: auto;
      height: auto;
      min-width: 0.5625rem;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none;
    }
    /* the track's marker has no fill, so the current step's number,
       which the steps rail writes in --card on its solid disc, takes
       the step's tone instead; a caller's marker-fg knob still wins */
    .pretui-steplist[data-variant='track'] .pretui-step[data-state='current'][data-scopedcss-1562467eec-0409fdce5e] {
      --pretui-step-marker-fg: var(
        --pretui-step-current-marker-fg,
        var(--pretui-step-tone)
      );
    }
    .pretui-steplist[data-variant='track'] .pretui-step-label[data-scopedcss-1562467eec-0409fdce5e] {
      grid-area: label;
    }
    .pretui-steplist[data-variant='track'] .pretui-step-name[data-scopedcss-1562467eec-0409fdce5e] {
      white-space: normal;
      overflow: visible;
      overflow-wrap: break-word;
    }
    /* ── narrow container: the steps rail stacks. Its labels are nowrap
       and its connectors want horizontal slack, so below this width the
       row becomes a column rather than clipping. */
    @container (max-width: 26rem) {
      .pretui-steplist[data-variant='steps'][data-scopedcss-1562467eec-0409fdce5e] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--boxel-sp-xs);
      }
      .pretui-steplist[data-variant='steps'] .pretui-step[data-scopedcss-1562467eec-0409fdce5e] {
        flex: none;
      }
      .pretui-steplist[data-variant='steps'] .pretui-step-connector[data-scopedcss-1562467eec-0409fdce5e] {
        display: none;
      }
      .pretui-steplist[data-variant='steps'] .pretui-step-name[data-scopedcss-1562467eec-0409fdce5e] {
        white-space: normal;
        overflow: visible;
      }
    }
    /* ── narrow container: five captions no longer sit side by side, so
       the track folds into a legend list — one stage per row, each
       keeping its own bar as a leading dash. */
    @container (max-width: 24rem) {
      .pretui-steplist[data-variant='track'][data-scopedcss-1562467eec-0409fdce5e] {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: var(--boxel-sp-xs);
      }
      .pretui-steplist[data-variant='track'] .pretui-step[data-scopedcss-1562467eec-0409fdce5e] {
        grid-template-columns: 2rem auto minmax(0, 1fr);
        grid-template-areas: 'bar marker label';
        gap: var(--boxel-sp-xs);
      }
    }
    .pretui-vh[data-scopedcss-1562467eec-0409fdce5e] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }

  @layer PretComponent {
    .pretui-prep[data-scopedcss-4f3dbd7a76-18e4b97ede] {
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-sm);
      padding: var(--boxel-sp-sm) var(--boxel-sp);
      border-radius: var(--boxel-border-radius-lg);
      background-color: var(--card);
      box-shadow: var(
        --pretui-shadow-card,
        0 0 0 1px var(--border),
        var(--shadow-xs)
      );
    }
    .pretui-prep-head[data-scopedcss-4f3dbd7a76-18e4b97ede] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      flex-wrap: wrap;
    }
    .pretui-prep-title[data-scopedcss-4f3dbd7a76-18e4b97ede] {
      margin: 0;
      flex: 1;
      min-width: 0;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: var(--foreground);
    }
    .pretui-prep-note[data-scopedcss-4f3dbd7a76-18e4b97ede] {
      margin: 0;
      max-width: 68ch;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
    }
  }

  @layer PretComponent {
    .pretui-highlight[data-scopedcss-c97233a4a6-20d818bb18] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: var(--pretui-highlight-w, 0px);
      height: var(--pretui-highlight-h, 0px);
      transform: translate(
        var(--pretui-highlight-x, 0px),
        var(--pretui-highlight-y, 0px)
      );
      opacity: var(--pretui-highlight-on, 0);
      border-radius: var(
        --pretui-highlight-radius,
        var(--boxel-border-radius)
      );
      pointer-events: none;
      z-index: 0;
      transition-property: transform, width, height, opacity;
      /* --init is present only for the first measurement (see the
         modifier); the chain then falls through to the caller's duration */
      transition-duration: var(
        --pretui-highlight-init,
        var(--pretui-highlight-duration, 180ms)
      );
      transition-timing-function: var(
        --pretui-highlight-ease,
        cubic-bezier(0.23, 1, 0.32, 1)
      );
    }
    /* the pill is a --card face on its --inset rail (the default
       theme's card is the lighter of the two in light and dark mode);
       a strong edge and a small shadow keep it raised under any theme,
       even when the rail blends into the surface behind it */
    .pretui-highlight[data-variant='pill'][data-scopedcss-c97233a4a6-20d818bb18] {
      background-color: var(--card);
      box-shadow:
        0 0 0 1px var(--border-strong),
        var(--shadow-sm);
    }
    .pretui-highlight[data-variant='soft'][data-scopedcss-c97233a4a6-20d818bb18] {
      background-color: color-mix(
        in oklch,
        var(--primary) 14%,
        var(--card)
      );
    }
    /* a line is drawn in the -ink, which holds 3:1 on the surface; the
       --primary fill does not */
    .pretui-highlight[data-variant='outline'][data-scopedcss-c97233a4a6-20d818bb18] {
      box-shadow: 0 0 0 1px var(--primary-ink);
    }
    .pretui-highlight[data-variant='underline'][data-scopedcss-c97233a4a6-20d818bb18] {
      height: var(--pretui-highlight-thickness, 2px);
      border-radius: var(--pretui-highlight-radius, 1px);
      background-color: var(--primary-ink);
      /* ride the bottom edge of the active item's box */
      transform: translate(
        var(--pretui-highlight-x, 0px),
        calc(
          var(--pretui-highlight-y, 0px) + var(--pretui-highlight-h, 0px) -
            var(--pretui-highlight-thickness, 2px)
        )
      );
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-highlight[data-scopedcss-c97233a4a6-20d818bb18] {
        transition-property: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-seg[data-scopedcss-3001dfcd51-bd63cddaf2] {
      /* the rail's gap, padding and radius offset move together, so the
         pill's corner stays concentric with the rail's */
      --pretui-seg-inset: var(--boxel-sp-6xs);
      /* the active label's weight; the hidden copy below must match it */
      --pretui-seg-active-weight: 600;
      /* Button's corner, shared by the segments and the pill; the rail
         adds the inset so the pill's corner stays concentric */
      --pretui-seg-radius: calc(var(--radius) - 0.125rem);
      --pretui-highlight-radius: var(--pretui-seg-radius);

      position: relative;
      display: inline-flex;
      gap: var(--pretui-seg-inset);
      padding: var(--pretui-seg-inset);
      background-color: var(--inset);
      color: var(--foreground);
      border-radius: calc(
        var(--pretui-seg-radius) + var(--pretui-seg-inset)
      );
      box-shadow: 0 0 0 1px var(--border);
    }
    .pretui-seg[data-scopedcss-3001dfcd51-bd63cddaf2]:has(.pretui-seg-input:disabled) {
      opacity: 0.5;
    }
    .pretui-seg-item[data-scopedcss-3001dfcd51-bd63cddaf2] {
      /* above the pill, which is a sibling, not the label's background;
         raised is the kit's in-component stacking tier */
      position: relative;
      z-index: var(--pretui-z-raised, 1);
      display: inline-flex;
      align-items: center;
      height: 1.5rem;
      padding: 0 var(--boxel-sp-sm);
      border-radius: var(--pretui-seg-radius);
      font-size: var(--boxel-ui-label-font-size);
      font-weight: var(--boxel-ui-label-font-weight);
      line-height: var(--boxel-ui-label-line-height);
      letter-spacing: var(--boxel-ui-label-letter-spacing);
      color: var(--muted-foreground);
      cursor: pointer;
      white-space: nowrap;
      /* the ink shift keeps the pill's timing, so the two read as one move */
      transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .pretui-seg-item[data-scopedcss-3001dfcd51-bd63cddaf2]:has(.pretui-seg-input:disabled) {
      cursor: default;
    }
    /* the radio carries the semantics and the keyboard; the label carries
       the look. Kept 1px rather than display:none so it stays focusable
       and the focus ring below has something to follow. */
    .pretui-seg-input[data-scopedcss-3001dfcd51-bd63cddaf2] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }
    /* the radio is visually hidden, so its label shows the focus */
    .pretui-seg-item[data-scopedcss-3001dfcd51-bd63cddaf2]:has(.pretui-seg-input:focus-visible) {
      outline: 2px solid var(--ring);
    }
    /* the label sits on the pill's --card face */
    .pretui-seg-item[data-state='active'][data-scopedcss-3001dfcd51-bd63cddaf2] {
      color: var(--pretui-seg-active-ink, var(--card-foreground));
      font-weight: var(--pretui-seg-active-weight);
    }
    /* a hidden bold copy under the label holds every segment at its bold
       width, so selecting one never shifts its neighbors or the pill */
    .pretui-seg-text[data-scopedcss-3001dfcd51-bd63cddaf2] {
      display: inline-grid;
    }
    .pretui-seg-text[data-scopedcss-3001dfcd51-bd63cddaf2]::after {
      content: attr(data-text);
      height: 0;
      overflow: hidden;
      visibility: hidden;
      font-weight: var(--pretui-seg-active-weight);
    }
    /* coarse pointers get a real hit target without moving the fine one */
    @media (any-pointer: coarse) {
      .pretui-seg-item[data-scopedcss-3001dfcd51-bd63cddaf2] {
        min-height: 2.125rem;
        padding: 0 var(--boxel-sp);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-seg-item[data-scopedcss-3001dfcd51-bd63cddaf2] {
        transition: none;
      }
    }
  }

  /* the composer's well and the white face it had */
  /* the kit's control at the kit's size: it scales from its own font
     size, so the composer's reading size must not reach it */
  .llm-mode-toggle[data-scopedcss-aa50e84ab7-6edb94c1ac] {
    display: flex;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    --inset: var(--ai-composer-well, var(--boxel-200));
    --card: var(--boxel-light);
    --card-foreground: var(--boxel-dark);
    --muted-foreground: var(--boxel-500);
    --border: transparent;
    --border-strong: transparent;
    --pretui-highlight-pill: var(--boxel-light);
    --pretui-seg-active-ink: var(--boxel-dark);
  }

  .llm-select[data-scopedcss-d018e6990c-950b429847] {
    background-color: transparent;
    box-shadow: none;
  }

  .selected-llm-wrapper[data-scopedcss-d018e6990c-950b429847] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    overflow: hidden;
    min-width: 0;
  }

  .selected-llm[data-scopedcss-d018e6990c-950b429847] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--boxel-dark);
    font-family: var(--boxel-font-family);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 600;
  }

  /* Cost tier chip ($…$$$$ / Free). Deliberately muted and distinct from
     the green per-token prices shown on the model cards. */
  .llm-cost[data-scopedcss-d018e6990c-950b429847] {
    flex-shrink: 0;
    color: var(--boxel-450);
    font-family: var(--boxel-font-family);
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .llm-list[data-scopedcss-d018e6990c-950b429847] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--step-4, 4px);
  }

  .llm-option[data-scopedcss-d018e6990c-950b429847] {
    background-color: var(--boxel-light);
    border-radius: var(--round-row, 8px);
    border: 1px solid var(--boxel-400);
  }

  .llm-option[data-scopedcss-d018e6990c-950b429847]:hover {
    border: 1px solid var(--boxel-dark);
  }

  .llm-option.selected[data-scopedcss-d018e6990c-950b429847] {
    background-color: var(--boxel-highlight);
  }

  .selected-icon[data-scopedcss-d018e6990c-950b429847] {
    width: var(--boxel-font-size);
    height: auto;
    stroke-width: 3px;
  }

  .llm-button[data-scopedcss-d018e6990c-950b429847] {
    width: 100%;
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    background: none;
    border: none;
    color: var(--boxel-dark);
    font-family: var(--boxel-font-family);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 400;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }

  .llm-name[data-scopedcss-d018e6990c-950b429847] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
  }

  .llm-meta[data-scopedcss-d018e6990c-950b429847] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }

  .llm-option.selected .llm-button[data-scopedcss-d018e6990c-950b429847] {
    font-weight: 600;
  }

  @layer PretComponent {
    .pretui-collapsed[data-scopedcss-3ef7c9945f-a3a563943b] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      max-width: 100%;
      min-height: 1.5rem;
      padding: 0
        calc(
          0.3125rem * var(--pretui-capsule-base, 1.35) +
            var(--boxel-border-radius-sm) *
            var(--pretui-radius-encroach, 0.35)
        );
      border-radius: var(--boxel-border-radius-sm);
      border: 0;
      background-color: var(--inset);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
      cursor: pointer;
      font-variant-numeric: tabular-nums;
      text-align: start;
    }
    .pretui-collapsed[data-scopedcss-3ef7c9945f-a3a563943b]:hover {
      background-color: var(--hover);
      color: var(--foreground);
    }
    .pretui-collapsed[data-scopedcss-3ef7c9945f-a3a563943b]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    /* done is ink with a check, not green */
    .pretui-collapsed-check[data-scopedcss-3ef7c9945f-a3a563943b] {
      flex: none;
      color: var(--foreground);
    }
    .pretui-collapsed-summary[data-scopedcss-3ef7c9945f-a3a563943b] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* points right while folded, down while the work shows */
    .pretui-collapsed-chevron[data-scopedcss-3ef7c9945f-a3a563943b] {
      flex: none;
      width: 0.3125rem;
      height: 0.3125rem;
      margin-inline-start: 0.0625rem;
      border-inline-end: 1.5px solid currentColor;
      border-block-end: 1.5px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 160ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    .pretui-collapsed-chevron[data-open][data-scopedcss-3ef7c9945f-a3a563943b] {
      transform: rotate(45deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-collapsed-chevron[data-scopedcss-3ef7c9945f-a3a563943b] {
        transition: none;
      }
    }
    /* the row form: ToolRow's grid (inset, disc, gap), its height, and
       the receipt's quiet caption voice (sans, tabular), with no capsule
       around it */
    /* the row form keeps a hover pad but hangs it outside the text
       edge, so its check lines up with every other mark in the thread */
    .pretui-collapsed[data-variant='row'][data-scopedcss-3ef7c9945f-a3a563943b] {
      display: flex;
      box-sizing: content-box;
      width: 100%;
      min-height: 1.625rem;
      gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
      margin-inline: calc(
        -1 * var(--pretui-toolrow-inset, var(--boxel-sp-xs))
      );
      padding: 0 var(--pretui-toolrow-inset, var(--boxel-sp-xs));
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: none;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
    }
    .pretui-collapsed[data-variant='row'][data-scopedcss-3ef7c9945f-a3a563943b]:hover {
      background-color: var(--inset);
      color: var(--muted-foreground);
    }
    .pretui-collapsed[data-variant='row'] .pretui-collapsed-check[data-scopedcss-3ef7c9945f-a3a563943b] {
      width: var(--pretui-toolrow-disc, 1rem);
      text-align: center;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
  }

  @layer PretComponent {
    .pretui-odometer[data-scopedcss-b7de03d580-78cf019d21] {
      display: inline-flex;
      align-items: baseline;
      font-variant-numeric: tabular-nums;
      line-height: var(--pretui-odo-cell, 1em);
    }
    .pretui-odometer[data-empty='true'][data-scopedcss-b7de03d580-78cf019d21] {
      color: var(--muted-foreground);
    }
    .pretui-odo-track[data-scopedcss-b7de03d580-78cf019d21] {
      display: inline-flex;
      align-items: baseline;
    }
    .pretui-odo-char[data-scopedcss-b7de03d580-78cf019d21] {
      white-space: pre;
    }
    .pretui-odo-digit[data-scopedcss-b7de03d580-78cf019d21] {
      position: relative;
      display: inline-block;
      /* clip-path, not overflow: hidden — an overflow-clipped inline-block
         synthesises its baseline from the bottom margin edge, which drops
         the digits below the surrounding text. Clipping keeps the strut's
         real baseline. The small vertical bleed is intentional: display
         fonts can paint cap/bowl antialiasing just outside their fractional
         line box (Space Grotesk's 5 is the visible case). A zero inset
         sheared that ink off at every Odometer size. Horizontal clipping
         remains exact, so adjacent digit columns cannot overlap. */
      clip-path: inset(-0.08em 0);
    }
    .pretui-odo-strut[data-scopedcss-b7de03d580-78cf019d21] {
      visibility: hidden;
    }
    .pretui-odo-ring[data-scopedcss-b7de03d580-78cf019d21] {
      position: absolute;
      inset-inline: 0;
      top: 0;
      transform: translateY(
        calc(var(--pretui-odo-rest, 0) * var(--pretui-odo-cell, 1em) * -1)
      );
      animation: pretui-odo-roll-data-scopedcss-b7de03d580-78cf019d21 var(--pretui-odo-duration, 0.5s)
        var(--pretui-odo-ease, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
      animation-delay: calc(
        var(--pretui-odo-i, 0) * var(--pretui-odo-stagger, 0.03s)
      );
    }
    @keyframes pretui-odo-roll-data-scopedcss-b7de03d580-78cf019d21 {
      from {
        transform: translateY(
          calc(var(--pretui-odo-start, 0) * var(--pretui-odo-cell, 1em) * -1)
        );
      }
    }
    .pretui-odo-cell[data-scopedcss-b7de03d580-78cf019d21] {
      display: block;
      height: var(--pretui-odo-cell, 1em);
      line-height: var(--pretui-odo-cell, 1em);
      text-align: center;
    }
    .pretui-odo-sr[data-scopedcss-b7de03d580-78cf019d21] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-odo-ring[data-scopedcss-b7de03d580-78cf019d21] {
        animation: none;
      }
    }
  }

  @layer PretComponent, PretComposite;
  @layer PretComposite {
    .pretui-toolgroup[data-scopedcss-dfb8a0395f-fbb8109715] {
      display: flex;
      flex-direction: column;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 2rem;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-align: start;
      cursor: pointer;
      min-width: 0;
    }
    .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715] {
      transition: opacity 200ms linear;
    }
    .pretui-toolgroup[data-recede] > .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715] {
      opacity: var(--pretui-recede-opacity, 1);
    }
    .pretui-toolgroup[data-recede]
      > .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715]:is(:hover, :focus-visible) {
      opacity: 1;
    }
    .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715]:hover {
      background-color: var(--inset);
    }
    .pretui-toolgroup-header[data-scopedcss-dfb8a0395f-fbb8109715]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-toolgroup-header[data-sticky][data-scopedcss-dfb8a0395f-fbb8109715] {
      background-color: var(--card);
      box-shadow: 0 1px 0 var(--border);
      border-radius: 0;
    }
    /* the group's mark is a stack of calls in the quiet ink, as each
       row's is its tool's icon; a failure or a question tints it */
    .pretui-toolgroup-disc[data-scopedcss-dfb8a0395f-fbb8109715] {
      width: var(--boxel-sp);
      height: var(--boxel-sp);
      display: grid;
      place-items: center;
      flex: none;
      color: var(--subtle-foreground);
    }
    .pretui-toolgroup-icon[data-scopedcss-dfb8a0395f-fbb8109715] {
      display: block;
      stroke-width: 1.75;
    }
    .pretui-toolgroup-disc[data-tone='failed'][data-scopedcss-dfb8a0395f-fbb8109715] {
      color: var(--destructive-ink);
    }
    .pretui-toolgroup-disc[data-tone='attention'][data-scopedcss-dfb8a0395f-fbb8109715] {
      color: var(--attention-ink);
    }
    .pretui-toolgroup-receipt[data-scopedcss-dfb8a0395f-fbb8109715] {
      display: flex;
      align-items: baseline;
      gap: var(--boxel-sp-xs);
      min-width: 0;
      flex: 1;
      color: var(--muted-foreground);
    }
    .pretui-toolgroup-phrases[data-scopedcss-dfb8a0395f-fbb8109715] {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
    }
    /* what the run is doing now shimmers; what it did is still */
    .pretui-toolgroup-phrase[data-active][data-scopedcss-dfb8a0395f-fbb8109715] {
      font-weight: 600;
      background: linear-gradient(
        90deg,
        var(--foreground) 0%,
        var(--muted-foreground) 50%,
        var(--foreground) 100%
      );
      background-size: 200% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: pretui-toolgroup-shimmer-data-scopedcss-dfb8a0395f-fbb8109715 1.6s linear infinite;
    }
    @keyframes pretui-toolgroup-shimmer-data-scopedcss-dfb8a0395f-fbb8109715 {
      to {
        background-position: -200% 0;
      }
    }
    /* the dot between the summary's parts, as a boxel-icons mark */
    .pretui-toolgroup-sep[data-scopedcss-dfb8a0395f-fbb8109715] {
      flex: none;
      align-self: center;
      color: var(--subtle-foreground);
    }
    .pretui-toolgroup-used[data-scopedcss-dfb8a0395f-fbb8109715] {
      flex: none;
      color: var(--foreground);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .pretui-toolgroup-names[data-scopedcss-dfb8a0395f-fbb8109715] {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* a state colours the word ("2 failed"), never the row */
    .pretui-toolgroup-failed[data-scopedcss-dfb8a0395f-fbb8109715] {
      flex: none;
      font-variant-numeric: tabular-nums;
      color: var(--destructive-ink);
    }
    .pretui-toolgroup-status[data-scopedcss-dfb8a0395f-fbb8109715] {
      flex: none;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--subtle-foreground);
    }
    .pretui-toolgroup-status[data-tone='attention'][data-scopedcss-dfb8a0395f-fbb8109715] {
      color: var(--attention-ink);
      font-weight: 600;
    }
    .pretui-toolgroup-chevron[data-scopedcss-dfb8a0395f-fbb8109715] {
      flex: none;
      width: 0.375rem;
      height: 0.375rem;
      border-inline-end: 1.5px solid var(--subtle-foreground);
      border-block-end: 1.5px solid var(--subtle-foreground);
      transform: rotate(-45deg);
      transition: transform 160ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    .pretui-toolgroup-chevron[data-open][data-scopedcss-dfb8a0395f-fbb8109715] {
      transform: rotate(45deg);
    }
    /* the group's rows hang on ToolRow's grid: the rail runs under the
       group's disc centre (the inset plus half the disc), and the
       padding after it plus each row's own inset puts every child's
       disc on the group's text edge. A group nested in a group repeats
       the same step. */
    .pretui-toolgroup-rows[data-scopedcss-dfb8a0395f-fbb8109715] {
      display: flex;
      flex-direction: column;
      /* past @maxRows the rows scroll inside the group; the header
         above them stays put */
      max-height: var(--pretui-tool-group-max, none);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      gap: 1px;
      padding: var(--boxel-sp-6xs) 0 var(--boxel-sp-4xs) var(--boxel-sp-xs);
      margin-inline-start: var(--boxel-sp);
      box-shadow: inset 1px 0 0 var(--border);
    }
    /* rows inside a group are one step quieter than rows on their own */
    .pretui-toolgroup-rows[data-scopedcss-dfb8a0395f-fbb8109715] >  .pretui-toolrow .pretui-toolrow-header {
      min-height: 1.75rem;
      padding-block: 0.3125rem;
    }
    .pretui-toolgroup-merged[data-scopedcss-dfb8a0395f-fbb8109715] {
      margin: 0;
      padding: 0 0 0 var(--boxel-sp);
      /* each line is a call's subtitle (a path, a command) or its name:
         a pasteable string, so the mono voice */
      font-family: var(--font-mono);
      font-size: var(--boxel-font-size-xs);
      line-height: var(--boxel-line-height-xs);
      color: var(--muted-foreground);
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-6xs);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-toolgroup-chevron[data-scopedcss-dfb8a0395f-fbb8109715] {
        transition: none;
      }
      .pretui-toolgroup-phrase[data-active][data-scopedcss-dfb8a0395f-fbb8109715] {
        animation: none;
        color: var(--foreground);
        background: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-question[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: grid;
      gap: var(--boxel-sp-xs);
    }
    /* the question is the agent speaking: reading size, its weight the
       one step up */
    .pretui-question-text[data-scopedcss-0f76691535-fcb26ec8f5] {
      font-size: var(--boxel-body-font-size);
      line-height: var(--boxel-body-line-height);
      font-weight: 600;
      color: var(--foreground);
    }
    .pretui-question-opts[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: flex;
      flex-wrap: wrap;
      gap: var(--boxel-sp-xs);
    }
    /* a quick answer: outlined and quiet, so no one option shouts */
    .pretui-qpill[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: inline-flex;
      align-items: center;
      height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-sm);
      border: 0;
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      cursor: pointer;
      color: var(--foreground);
    }
    .pretui-qpill[data-scopedcss-0f76691535-fcb26ec8f5]:hover {
      background-color: var(--hover);
      box-shadow: inset 0 0 0 1px var(--border-strong);
    }
    .pretui-qpill[data-scopedcss-0f76691535-fcb26ec8f5]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* the real things to pick between: tiles for cards, chips for
       colours; a choice is one button, its label the answer */
    .pretui-question-choices[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
      gap: var(--boxel-sp-xs);
    }
    .pretui-question-choices[data-layout='swatches'][data-scopedcss-0f76691535-fcb26ec8f5] {
      grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    }
    .pretui-qchoice[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: grid;
      align-content: start;
      gap: var(--boxel-sp-6xs);
      min-width: 0;
      padding: var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      text-align: start;
      color: var(--foreground);
      cursor: pointer;
    }
    .pretui-qchoice[data-scopedcss-0f76691535-fcb26ec8f5]:hover {
      background-color: var(--hover);
      box-shadow: inset 0 0 0 1px var(--border-strong);
    }
    .pretui-qchoice[data-scopedcss-0f76691535-fcb26ec8f5]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    /* picked, waiting for Confirm: outlined in ink-1 */
    .pretui-qchoice[aria-pressed='true'][data-scopedcss-0f76691535-fcb26ec8f5] {
      box-shadow: inset 0 0 0 2px var(--foreground);
    }
    .pretui-qchoice-content[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: block;
      height: var(--pretui-qchoice-content-h, 6rem);
      margin-bottom: var(--boxel-sp-4xs);
      overflow: hidden;
      border-radius: var(--boxel-border-radius-xs);
      pointer-events: none;
    }
    /* Confirm is the one answer: the moment's primary */
    .pretui-qconfirm[data-scopedcss-0f76691535-fcb26ec8f5] {
      justify-self: start;
      height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--primary);
      color: var(--primary-foreground);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      cursor: pointer;
    }
    .pretui-qconfirm[data-scopedcss-0f76691535-fcb26ec8f5]:disabled {
      opacity: 0.5;
      cursor: default;
    }
    .pretui-qconfirm[data-scopedcss-0f76691535-fcb26ec8f5]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-qchoice-image[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      margin-bottom: var(--boxel-sp-4xs);
      border-radius: var(--boxel-border-radius-xs);
      background-color: var(--inset);
      object-fit: cover;
    }
    .pretui-qchoice-swatch[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: block;
      height: 1.375rem;
      margin-bottom: var(--boxel-sp-4xs);
      border-radius: var(--boxel-border-radius-xs);
      background-color: var(--swatch, var(--muted));
      box-shadow: inset 0 0 0 1px var(--border);
    }
    .pretui-qchoice-label[data-scopedcss-0f76691535-fcb26ec8f5] {
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-qchoice-sub[data-scopedcss-0f76691535-fcb26ec8f5] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
    }
    /* sent, waiting on the agent: the options step down to ink-3 and
       take no more presses */
    .pretui-question[data-pending] .pretui-qpill[data-scopedcss-0f76691535-fcb26ec8f5],
    .pretui-question[data-pending] .pretui-qchoice[data-scopedcss-0f76691535-fcb26ec8f5] {
      color: var(--subtle-foreground);
      pointer-events: none;
    }
    .pretui-question-readonly[data-scopedcss-0f76691535-fcb26ec8f5] {
      margin: 0;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--muted-foreground);
    }
    .pretui-qinput[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: flex;
      align-items: center;
      height: 1.75rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--foreground);
      background-color: var(--field);
      box-shadow: inset 0 0 0 1px var(--input);
      width: 100%;
    }
    .pretui-qinput[data-scopedcss-0f76691535-fcb26ec8f5]::placeholder {
      color: var(--subtle-foreground);
    }
    .pretui-qinput[data-scopedcss-0f76691535-fcb26ec8f5]:focus {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* answered: done is ink with a check, the answer in ink-1 */
    .pretui-answered[data-scopedcss-0f76691535-fcb26ec8f5] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
    }
    .pretui-answered-check[data-scopedcss-0f76691535-fcb26ec8f5] {
      color: var(--foreground);
    }
    .pretui-answered b[data-scopedcss-0f76691535-fcb26ec8f5] {
      color: var(--foreground);
      font-weight: 600;
    }
  }

  @layer PretComponent {
    .pretui-cardpills[data-scopedcss-8689b76cf2-bd3692f023] {
      /* the peek's distance from its pill, which the bridge over it
         must span */
      --_cardpills-peek-gap: var(--boxel-sp-2xs);
      display: grid;
      gap: var(--boxel-sp-xs);
      justify-items: start;
    }
    .pretui-cardpills-list[data-scopedcss-8689b76cf2-bd3692f023] {
      display: flex;
      flex-wrap: wrap;
      gap: var(--boxel-sp-4xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pretui-cardpills[data-layout='grid'][data-scopedcss-8689b76cf2-bd3692f023] {
      justify-items: stretch;
    }
    .pretui-cardpills[data-layout='grid'] .pretui-cardpills-list[data-scopedcss-8689b76cf2-bd3692f023] {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
      gap: var(--boxel-sp-xs);
    }
    /* a pill: an outlined token on the inset, the card's mark and its
       title in ink-1. It is 1.5rem tall, the least a pointer target
       takes */
    .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023] {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      max-width: 100%;
      height: 1.5rem;
      padding: 0 var(--boxel-sp-2xs) 0 var(--boxel-sp-5xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: var(--foreground);
      vertical-align: middle;
      cursor: pointer;
      transition:
        background-color 120ms ease-out,
        box-shadow 120ms ease-out;
    }
    .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023]:hover {
      background-color: var(--hover);
      box-shadow: inset 0 0 0 1px var(--border-strong);
    }
    .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023]:active {
      transform: translateY(0.5px);
    }
    .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* open on the stack: the outline and the "open" word take the live
       state, never the fill */
    .pretui-cardpill[data-state='open'][data-scopedcss-8689b76cf2-bd3692f023] {
      box-shadow: inset 0 0 0 1px var(--primary-ink);
    }
    /* picked: done is ink with a check, the outline in ink-1 */
    .pretui-cardpill[data-state='picked'][data-scopedcss-8689b76cf2-bd3692f023] {
      box-shadow: inset 0 0 0 1px var(--foreground);
    }
    .pretui-cardpill[data-state='picked'] .pretui-cardpill-mark[data-scopedcss-8689b76cf2-bd3692f023] {
      background-color: var(--foreground);
      color: var(--background);
    }
    .pretui-cardpill-mark[data-scopedcss-8689b76cf2-bd3692f023] {
      flex: none;
      display: grid;
      place-items: center;
      width: 0.875rem;
      height: 0.875rem;
      overflow: hidden;
      border-radius: 50%;
      background-color: var(--card);
      font-size: var(--boxel-caption-font-size);
      line-height: 1;
      font-weight: 600;
      color: var(--muted-foreground);
    }
    .pretui-cardpill-image[data-scopedcss-8689b76cf2-bd3692f023] {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pretui-cardpill-text[data-scopedcss-8689b76cf2-bd3692f023] {
      display: grid;
      min-width: 0;
      text-align: start;
    }
    .pretui-cardpill-title[data-scopedcss-8689b76cf2-bd3692f023],
    .pretui-cardpill-sub[data-scopedcss-8689b76cf2-bd3692f023] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-cardpill-sub[data-scopedcss-8689b76cf2-bd3692f023] {
      display: none;
    }
    .pretui-cardpill-open[data-scopedcss-8689b76cf2-bd3692f023] {
      margin-inline-start: var(--boxel-sp-6xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--primary-ink);
    }
    /* the grid: a tile per card, the mark larger, the type under it */
    .pretui-cardpills[data-layout='grid'] .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023] {
      width: 100%;
      height: auto;
      gap: var(--boxel-sp-xs);
      padding: var(--boxel-sp-2xs) var(--boxel-sp-xs) var(--boxel-sp-2xs)
        var(--boxel-sp-2xs);
      border-radius: var(--boxel-border-radius-sm);
    }
    .pretui-cardpills[data-layout='grid'] .pretui-cardpill-mark[data-scopedcss-8689b76cf2-bd3692f023] {
      width: 1.625rem;
      height: 1.625rem;
    }
    .pretui-cardpills[data-layout='grid'] .pretui-cardpill-sub[data-scopedcss-8689b76cf2-bd3692f023] {
      display: block;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-cardpills[data-layout='grid'] .pretui-cardpill-open[data-scopedcss-8689b76cf2-bd3692f023] {
      position: absolute;
      inset-block-start: var(--boxel-sp-4xs);
      inset-inline-end: var(--boxel-sp-2xs);
    }
    .pretui-cardpills-all[data-scopedcss-8689b76cf2-bd3692f023] {
      min-height: 1.5rem;
      padding: 0 var(--boxel-sp-4xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 400;
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-cardpills-all[data-scopedcss-8689b76cf2-bd3692f023]:hover {
      color: var(--foreground);
    }
    .pretui-cardpills-all[data-scopedcss-8689b76cf2-bd3692f023]:focus-visible,
    .pretui-cardpills-act[data-scopedcss-8689b76cf2-bd3692f023]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    /* the peek: a hover card under the pill with the fitted card. It
       fades in after a beat (a CSS delay, no clock), so a pointer
       passing over pills does not flash them */
    .pretui-cardpill-item[data-scopedcss-8689b76cf2-bd3692f023] {
      position: relative;
    }
    .pretui-cardpill-peek[data-scopedcss-8689b76cf2-bd3692f023] {
      position: absolute;
      inset-block-start: calc(100% + var(--_cardpills-peek-gap));
      inset-inline-start: 0;
      z-index: var(--pretui-z-popover, 30);
      display: grid;
      gap: var(--boxel-sp-xs);
      width: 15rem;
      padding: var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius-lg);
      background-color: var(--popover);
      color: var(--popover-foreground);
      box-shadow:
        0 0 0 1px var(--border),
        var(--shadow-md);
      animation: pretui-peek-in-data-scopedcss-8689b76cf2-bd3692f023 160ms ease-out 280ms both;
    }
    /* a bridge over the gap, so moving from the pill into the peek
       never leaves the item */
    .pretui-cardpill-peek[data-scopedcss-8689b76cf2-bd3692f023]::before {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-start: calc(-1 * var(--_cardpills-peek-gap));
      height: var(--_cardpills-peek-gap);
    }
    @keyframes pretui-peek-in-data-scopedcss-8689b76cf2-bd3692f023 {
      from {
        opacity: 0;
        transform: translateY(-0.125rem);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    .pretui-cardpill-peek-card[data-scopedcss-8689b76cf2-bd3692f023] {
      display: grid;
      min-height: 4rem;
      overflow: hidden;
      border-radius: var(--boxel-border-radius-sm);
    }
    .pretui-cardpill-peek-actions[data-scopedcss-8689b76cf2-bd3692f023] {
      display: flex;
      gap: var(--boxel-sp-4xs);
      justify-content: flex-end;
    }
    /* the card shown in place, embedded, under the set */
    .pretui-cardpills-expanded[data-scopedcss-8689b76cf2-bd3692f023] {
      display: grid;
      gap: var(--boxel-sp-xs);
      justify-self: stretch;
    }
    .pretui-cardpills-expanded-head[data-scopedcss-8689b76cf2-bd3692f023] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: var(--foreground);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-cardpill-peek[data-scopedcss-8689b76cf2-bd3692f023] {
        animation: none;
      }
    }
    /* what to do with the picked cards, under the set */
    .pretui-cardpills-bar[data-scopedcss-8689b76cf2-bd3692f023] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      justify-self: stretch;
      padding: var(--boxel-sp-6xs) var(--boxel-sp-6xs) var(--boxel-sp-6xs)
        var(--boxel-sp-sm);
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--inset);
      color: var(--foreground);
      box-shadow: inset 0 0 0 1px var(--border);
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
    }
    .pretui-cardpills-count[data-scopedcss-8689b76cf2-bd3692f023] {
      margin-inline-end: auto;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .pretui-cardpills-act[data-scopedcss-8689b76cf2-bd3692f023] {
      height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      font-weight: 600;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    /* the bar's verb is the moment's one action */
    .pretui-cardpills-act[data-kind='primary'][data-scopedcss-8689b76cf2-bd3692f023] {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    .pretui-cardpills-act[data-scopedcss-8689b76cf2-bd3692f023]:not([data-kind='primary']):hover {
      color: var(--foreground);
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-cardpill[data-scopedcss-8689b76cf2-bd3692f023] {
        transition: none;
      }
    }
  }

  @layer PretComponent {
    .pretui-reactions[data-scopedcss-30c0fc6f12-630ce9e7b1] {
      display: flex;
      flex-wrap: wrap;
      gap: var(--boxel-sp-4xs);
    }
    .pretui-reaction[data-scopedcss-30c0fc6f12-630ce9e7b1] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-4xs);
      /* the least a pointer target takes */
      height: 1.5rem;
      padding: 0 var(--boxel-sp-xs) 0 var(--boxel-sp-2xs);
      border: 0;
      border-radius: var(--boxel-border-radius-pill);
      background-color: var(--muted);
      box-shadow: inset 0 0 0 1px var(--border);
      font-family: inherit;
      font-size: var(--boxel-font-size-xs);
      font-weight: 500;
      line-height: 1;
      color: var(--muted-foreground);
    }
    .pretui-reaction-key[data-scopedcss-30c0fc6f12-630ce9e7b1] {
      font-size: var(--boxel-font-size-xs);
    }
    .pretui-reaction[data-mine][data-scopedcss-30c0fc6f12-630ce9e7b1],
    .pretui-reaction[aria-pressed='true'][data-scopedcss-30c0fc6f12-630ce9e7b1] {
      background-color: color-mix(in oklch, var(--primary) 14%, var(--card));
      box-shadow: inset 0 0 0 1px
        color-mix(in oklch, var(--primary) 45%, transparent);
      color: var(--foreground);
    }
    button.pretui-reaction[data-scopedcss-30c0fc6f12-630ce9e7b1] {
      cursor: pointer;
    }
    button.pretui-reaction[data-scopedcss-30c0fc6f12-630ce9e7b1]:hover {
      color: var(--foreground);
    }
    button.pretui-reaction[data-scopedcss-30c0fc6f12-630ce9e7b1]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
  }

  @layer PretComponent {
    .pretui-resultcard[data-scopedcss-a820187b84-3d3b3df045] {
      background-color: var(--card);
      color: var(--card-foreground);
      border-radius: var(--boxel-border-radius-sm);
      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
      padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
      display: flex;
      flex-direction: column;
      gap: var(--boxel-sp-4xs);
    }
    .pretui-resultcard-head[data-scopedcss-a820187b84-3d3b3df045] {
      display: flex;
      align-items: baseline;
      gap: var(--boxel-sp-xs);
    }
    .pretui-resultcard-title[data-scopedcss-a820187b84-3d3b3df045] {
      font-weight: 600;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--foreground);
    }
    /* a label, not a kicker: sans caption, no tracking, no caps */
    .pretui-eyebrow[data-scopedcss-a820187b84-3d3b3df045] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--subtle-foreground);
    }
    /* 1.5rem square, the least a pointer target takes */
    .pretui-resultcard-menu[data-scopedcss-a820187b84-3d3b3df045] {
      display: inline-grid;
      place-items: center;
      flex: none;
      align-self: center;
      width: 1.5rem;
      height: 1.5rem;
      margin-inline-start: auto;
      padding: 0;
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      color: var(--subtle-foreground);
      cursor: pointer;
    }
    .pretui-resultcard-menu[data-scopedcss-a820187b84-3d3b3df045]:hover {
      background-color: var(--hover);
      color: var(--foreground);
    }
    .pretui-resultcard-menu[data-scopedcss-a820187b84-3d3b3df045]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-resultcard-line[data-scopedcss-a820187b84-3d3b3df045] {
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--muted-foreground);
    }
  }

  @layer PretComponent {
    .pretui-systemline[data-scopedcss-5dfe3a62f9-5222c879cb] {
      display: grid;
      grid-template-columns:
        var(--pretui-toolrow-disc, 1rem) minmax(0, 1fr)
        auto auto;
      column-gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
      align-items: baseline;
      margin: 0;
      /* on the transcript's text edge; inside a row, the row's inset */
      padding-inline: var(--pretui-toolrow-inset, 0);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
    }
    .pretui-systemline-glyph[data-scopedcss-5dfe3a62f9-5222c879cb] {
      text-align: center;
    }
    .pretui-systemline-text[data-scopedcss-5dfe3a62f9-5222c879cb] {
      min-width: 0;
      overflow-wrap: break-word;
    }
    /* a checkpoint is a rule across the thread with its name on it. A
       flex row, not a grid, so the two rules take the slack on either
       side of whatever sits between them: the name alone, or the name
       with an action, a dismiss button or both, all on one line */
    .pretui-systemline[data-variant='checkpoint'][data-scopedcss-5dfe3a62f9-5222c879cb] {
      display: flex;
      align-items: center;
      column-gap: var(--boxel-sp-xs);
    }
    .pretui-systemline[data-variant='checkpoint'][data-scopedcss-5dfe3a62f9-5222c879cb]::before,
    .pretui-systemline[data-variant='checkpoint'][data-scopedcss-5dfe3a62f9-5222c879cb]::after {
      content: '';
      flex: 1 1 var(--boxel-sp-sm);
      min-width: var(--boxel-sp-sm);
      height: 1px;
      background-color: var(--border);
    }
    .pretui-systemline[data-variant='checkpoint'] .pretui-systemline-glyph[data-scopedcss-5dfe3a62f9-5222c879cb] {
      display: none;
    }
    /* a 24px target (WCAG 2.5.8) inside a caption line: the negative
       block margin gives back what the height adds, so the line keeps
       its caption height */
    .pretui-systemline-act[data-scopedcss-5dfe3a62f9-5222c879cb] {
      --_systemline-target: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: var(--_systemline-target);
      min-height: var(--_systemline-target);
      margin-block: calc((1lh - var(--_systemline-target)) / 2);
      padding: 0 var(--boxel-sp-4xs);
      border: 0;
      border-radius: var(--boxel-border-radius-xs);
      background-color: transparent;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      font-weight: 600;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-systemline-act[data-scopedcss-5dfe3a62f9-5222c879cb]:hover {
      color: var(--primary-ink);
    }
    .pretui-systemline-act[data-scopedcss-5dfe3a62f9-5222c879cb]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-systemline-by[data-scopedcss-5dfe3a62f9-5222c879cb] {
      color: var(--muted-foreground);
    }
  }

  @layer PretComponent {
    .pretui-changetable-from[data-scopedcss-cf20816734-c06790c61e] {
      color: var(--subtle-foreground);
    }
    .pretui-changetable-arrow[data-scopedcss-cf20816734-c06790c61e] {
      margin-inline: var(--boxel-sp-4xs);
      vertical-align: -0.1em;
      color: var(--subtle-foreground);
    }
  }
  @layer PretComponent {
    .pretui-changetable[data-scopedcss-cf20816734-c06790c61e] {
      display: grid;
      justify-items: start;
      gap: var(--boxel-sp-4xs);
      padding-inline-start: calc(
        var(--pretui-toolrow-disc, var(--boxel-sp)) +
          var(--pretui-toolrow-gap, var(--boxel-sp-xs))
      );
    }
    table[data-scopedcss-cf20816734-c06790c61e] {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-variant-numeric: tabular-nums;
    }
    .pretui-changetable-caption[data-scopedcss-cf20816734-c06790c61e] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    /* table headers are the one place tracked caps stay: sans, caption
       size, 0.04em */
    thead th[data-scopedcss-cf20816734-c06790c61e] {
      padding: 0 var(--boxel-sp-xs) var(--boxel-sp-4xs) 0;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-align: start;
      text-transform: uppercase;
      color: var(--subtle-foreground);
      box-shadow: inset 0 -1px 0 var(--border);
    }
    tbody th[data-scopedcss-cf20816734-c06790c61e],
    tbody td[data-scopedcss-cf20816734-c06790c61e] {
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs) var(--boxel-sp-4xs) 0;
      text-align: start;
      vertical-align: baseline;
      box-shadow: inset 0 -1px 0 var(--border);
    }
    .pretui-changetable-pick[data-scopedcss-cf20816734-c06790c61e] {
      width: 1.25rem;
      padding-inline-end: var(--boxel-sp-xs);
    }
    .pretui-changetable-pick input[data-scopedcss-cf20816734-c06790c61e] {
      accent-color: var(--primary);
    }
    tbody th[data-scopedcss-cf20816734-c06790c61e] {
      font-weight: 600;
      color: var(--foreground);
      white-space: nowrap;
    }
    tbody td[data-scopedcss-cf20816734-c06790c61e] {
      color: var(--pretui-toolrow-settled-ink, var(--foreground));
    }
    tbody tr:last-child th[data-scopedcss-cf20816734-c06790c61e],
    tbody tr:last-child td[data-scopedcss-cf20816734-c06790c61e] {
      box-shadow: none;
    }
    tbody tr[data-scopedcss-cf20816734-c06790c61e]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    tr[data-skipped] th[data-scopedcss-cf20816734-c06790c61e],
    tr[data-skipped] td[data-scopedcss-cf20816734-c06790c61e] {
      color: var(--muted-foreground);
    }
    tr[data-skipped] td[data-scopedcss-cf20816734-c06790c61e] {
      text-decoration: line-through;
    }
    .pretui-changetable-skipped[data-scopedcss-cf20816734-c06790c61e] {
      display: block;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      text-decoration: none;
      color: var(--attention-ink);
    }
    /* 1.5rem tall, the smallest target a pointer is asked to hit */
    .pretui-changetable-more[data-scopedcss-cf20816734-c06790c61e] {
      min-height: 1.5rem;
      padding: 0;
      border: 0;
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
      cursor: pointer;
    }
    .pretui-changetable-more[data-scopedcss-cf20816734-c06790c61e]:hover {
      color: var(--primary-ink);
    }
    .pretui-changetable-more[data-scopedcss-cf20816734-c06790c61e]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
  }

  @layer PretComponent {
    /* the gate sits on the row's text edge, under its lines: a question
       and its answers, with no box of its own (the row is the box) */
    .pretui-toolgate[data-scopedcss-faeae2562f-074dae956c] {
      display: grid;
      gap: var(--boxel-sp-xs);
      padding-block: var(--boxel-sp-4xs) var(--boxel-sp-6xs);
      padding-inline-start: calc(
        var(--pretui-toolrow-disc, var(--boxel-sp)) +
          var(--pretui-toolrow-gap, var(--boxel-sp-xs))
      );
    }
    .pretui-toolgate-prompt[data-scopedcss-faeae2562f-074dae956c] {
      margin: 0;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: var(--foreground);
    }
    /* a conflict needs the reader: the prompt stays ink-1 and a dot
       before it takes the attention state (the mark, never the text) */
    .pretui-toolgate[data-tone='conflict'] .pretui-toolgate-prompt[data-scopedcss-faeae2562f-074dae956c]::before {
      content: '';
      display: inline-block;
      width: 0.375rem;
      height: 0.375rem;
      margin-inline-end: var(--boxel-sp-2xs);
      border-radius: 50%;
      vertical-align: 0.1em;
      background-color: var(--attention);
    }
    .pretui-toolgate[data-routed] .pretui-toolgate-prompt[data-scopedcss-faeae2562f-074dae956c] {
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-toolgate[data-resolution] .pretui-toolgate-prompt[data-scopedcss-faeae2562f-074dae956c] {
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-toolgate-destructive[data-scopedcss-faeae2562f-074dae956c] {
      display: block;
      font-weight: 600;
      color: var(--destructive-ink);
    }
    .pretui-toolgate-auto[data-scopedcss-faeae2562f-074dae956c] {
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-toolgate-auto-mark[data-scopedcss-faeae2562f-074dae956c] {
      display: inline-grid;
      margin-inline-end: var(--boxel-sp-4xs);
      vertical-align: -0.1em;
    }
    .pretui-toolgate-scope[data-scopedcss-faeae2562f-074dae956c] {
      margin: 0;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
    }
    .pretui-toolgate-decline[data-scopedcss-faeae2562f-074dae956c] {
      display: flex;
      flex-wrap: wrap;
      gap: var(--boxel-sp-xs);
      align-items: center;
    }
    .pretui-toolgate-reason[data-scopedcss-faeae2562f-074dae956c] {
      flex: 1 1 10rem;
      min-width: 0;
      height: 1.75rem;
      padding: 0 var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: var(--field);
      box-shadow: inset 0 0 0 1px var(--input);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      color: var(--foreground);
    }
    .pretui-toolgate-reason[data-scopedcss-faeae2562f-074dae956c]::placeholder {
      color: var(--subtle-foreground);
    }
    .pretui-toolgate-reason[data-scopedcss-faeae2562f-074dae956c]:focus {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
    .pretui-toolgate-detail[data-scopedcss-faeae2562f-074dae956c] {
      display: block;
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-toolgate-actions[data-scopedcss-faeae2562f-074dae956c] {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--boxel-sp-xs);
    }
    /* answers: the one answer is --primary; the rest are outlined
       (secondary) or quiet text */
    .pretui-toolgate-action[data-scopedcss-faeae2562f-074dae956c] {
      min-height: 1.75rem;
      padding: 0 var(--boxel-sp-sm);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--border-strong);
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      color: var(--foreground);
      cursor: pointer;
      white-space: nowrap;
    }
    .pretui-toolgate-action[data-kind='primary'][data-scopedcss-faeae2562f-074dae956c] {
      box-shadow: none;
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    /* the answer that runs an act that cannot be undone looks like one */
    .pretui-toolgate[data-destructive]
      .pretui-toolgate-action[data-kind='primary'][data-scopedcss-faeae2562f-074dae956c] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);
    }
    .pretui-toolgate-action[data-kind='quiet'][data-scopedcss-faeae2562f-074dae956c] {
      box-shadow: none;
      font-weight: 400;
      color: var(--muted-foreground);
    }
    .pretui-toolgate-action[data-scopedcss-faeae2562f-074dae956c]:hover:not([aria-disabled='true']) {
      background-color: var(--hover);
    }
    .pretui-toolgate-action[data-kind='quiet'][data-scopedcss-faeae2562f-074dae956c]:hover:not(
        [aria-disabled='true']
      ) {
      background-color: transparent;
      color: var(--foreground);
    }
    .pretui-toolgate-action[data-kind='primary'][data-scopedcss-faeae2562f-074dae956c]:hover:not(
        [aria-disabled='true']
      ) {
      background-color: color-mix(
        in srgb,
        var(--primary) 88%,
        var(--foreground)
      );
    }
    .pretui-toolgate[data-destructive]
      .pretui-toolgate-action[data-kind='primary'][data-scopedcss-faeae2562f-074dae956c]:hover:not(
        [aria-disabled='true']
      ) {
      background-color: color-mix(
        in srgb,
        var(--destructive) 88%,
        var(--foreground)
      );
    }
    .pretui-toolgate-action[data-scopedcss-faeae2562f-074dae956c]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-toolgate-action[aria-disabled='true'][data-scopedcss-faeae2562f-074dae956c] {
      cursor: default;
      opacity: 0.6;
    }
    .pretui-toolgate-action[data-busy][data-scopedcss-faeae2562f-074dae956c] {
      opacity: 1;
    }
  }

  @layer PretComponent {
    .pretui-toolmeta[data-scopedcss-0ba88e2988-8a1bf269dc] {
      padding-inline-start: calc(
        var(--pretui-toolrow-disc, var(--boxel-sp)) +
          var(--pretui-toolrow-gap, var(--boxel-sp-xs))
      );
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity 160ms
        var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
    }
    @media (hover: hover) {
      .pretui-toolmeta[data-reveal='hover'][data-scopedcss-0ba88e2988-8a1bf269dc] {
        opacity: 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-toolmeta[data-scopedcss-0ba88e2988-8a1bf269dc] {
        transition: none;
      }
    }
  }
  /* revealed by the row that holds it: a rule about another
     component's element, so the whole selector is global, and every
     part of it is a Pret UI name */
  @layer PretComponent {
    .pretui-toolrow:hover .pretui-toolmeta[data-reveal='hover'],
      .pretui-toolrow:focus-within .pretui-toolmeta[data-reveal='hover']
     {
      opacity: 1;
    }
  }

  @layer PretComponent {
    .pretui-meter[data-scopedcss-cc6231be3e-768122ff6a] {
      display: inline-flex;
      align-items: flex-end;
      gap: var(--boxel-sp-xs);
    }
    .pretui-meter-bars[data-scopedcss-cc6231be3e-768122ff6a] {
      display: inline-flex;
      align-items: flex-end;
      gap: var(--boxel-sp-6xs);
      height: 0.875rem;
    }
    .pretui-meter-bar[data-scopedcss-cc6231be3e-768122ff6a] {
      width: 0.25rem;
      border-radius: var(--boxel-border-radius-2xs);
      background-color: var(--border-strong);
    }
    .pretui-meter-bar[data-on][data-scopedcss-cc6231be3e-768122ff6a] {
      background-color: var(--pretui-meter-hue, var(--primary));
    }
    .pretui-meter-label[data-scopedcss-cc6231be3e-768122ff6a] {
      font-size: var(--boxel-font-size-xs);
      font-weight: 500;
      color: var(--muted-foreground);
      line-height: 1;
    }
  }

  @layer PretComponent {
    .pretui-reco[data-scopedcss-64d54c0ab8-e63e25e933] {
      width: 100%;
      overflow: hidden;
      border-radius: var(--boxel-border-radius-lg);
      background-color: var(--card);
      box-shadow: var(
        --pretui-shadow-card,
        0 0 0 1px var(--border),
        var(--shadow-xs)
      );
      container-type: inline-size;
    }
    .pretui-reco[data-surface='plain'][data-scopedcss-64d54c0ab8-e63e25e933] {
      border-radius: 0;
      background-color: transparent;
      box-shadow: none;
    }
    .pretui-reco[data-surface='plain'] .pretui-reco-head[data-scopedcss-64d54c0ab8-e63e25e933] {
      padding: 0 0 var(--boxel-sp-xs);
    }
    .pretui-reco[data-surface='plain'] .pretui-reco-foot[data-scopedcss-64d54c0ab8-e63e25e933] {
      padding: var(--boxel-sp-xs) 0 var(--boxel-sp-6xs);
      background-color: transparent;
    }
    .pretui-reco-head[data-scopedcss-64d54c0ab8-e63e25e933] {
      padding: var(--boxel-sp-sm);
    }
    /* the card's title: reading size in 600, no tracking */
    .pretui-reco-question[data-scopedcss-64d54c0ab8-e63e25e933] {
      margin: 0;
      font-size: var(--boxel-body-font-size);
      line-height: var(--boxel-body-line-height);
      font-weight: 600;
      color: var(--foreground);
    }
    /* the recommendation is answer prose: reading type, full ink, the
       reading measure */
    .pretui-reco-body[data-scopedcss-64d54c0ab8-e63e25e933] {
      margin-top: var(--boxel-sp-4xs);
      min-height: 2.5rem;
      max-inline-size: 68ch;
      font-size: var(--boxel-body-font-size);
      line-height: var(--boxel-body-line-height);
      color: var(--foreground);
    }
    .pretui-reco-drawer[data-scopedcss-64d54c0ab8-e63e25e933] {
      background-color: var(--inset);
      box-shadow: 0 -1px 0 var(--border);
      padding: var(--boxel-sp-xs);
    }
    .pretui-reco-drawer-cap[data-scopedcss-64d54c0ab8-e63e25e933] {
      margin: 0 0 var(--boxel-sp-4xs);
      padding: 0 var(--boxel-sp-xs);
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      font-weight: 400;
      color: var(--subtle-foreground);
    }
    .pretui-reco-drawer ul[data-scopedcss-64d54c0ab8-e63e25e933] {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pretui-reco-alt[data-scopedcss-64d54c0ab8-e63e25e933] {
      display: flex;
      width: 100%;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: 2rem;
      padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
      border: 0;
      border-radius: var(--boxel-border-radius-sm);
      background-color: transparent;
      font-family: inherit;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      text-align: left;
      color: var(--foreground);
      cursor: pointer;
    }
    .pretui-reco-alt[data-scopedcss-64d54c0ab8-e63e25e933]:hover {
      background-color: var(--hover);
    }
    .pretui-reco-alt[data-scopedcss-64d54c0ab8-e63e25e933]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
    .pretui-reco-alt-short[data-scopedcss-64d54c0ab8-e63e25e933] {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pretui-reco-foot[data-scopedcss-64d54c0ab8-e63e25e933] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--boxel-sp-xs);
      flex-wrap: wrap;
      padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
      background-color: var(--inset);
      box-shadow: 0 -1px 0 var(--border);
    }
    .pretui-reco-foot-actions[data-scopedcss-64d54c0ab8-e63e25e933] {
      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      margin-left: auto;
    }
    .pretui-sr[data-scopedcss-64d54c0ab8-e63e25e933] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    @media (any-pointer: coarse) {
      .pretui-reco-alt[data-scopedcss-64d54c0ab8-e63e25e933] {
        min-height: 2.75rem;
      }
    }
  }

  .option-card-render[data-scopedcss-a866d611b1-e91862a478] {
    width: 100%;
    height: 100%;
  }
  .option-card-loading[data-scopedcss-a866d611b1-e91862a478] {
    display: grid;
    place-items: center;
    height: 100%;
    font: var(--boxel-font-xs);
    color: var(--boxel-450);
  }

  .option-card-frame[data-scopedcss-a866d611b1-070a3df817] {
    display: block;
    height: 100%;
    background-color: var(--boxel-light);
    color: var(--boxel-dark);
  }
  /* the choice's box is the one rounded shape and clips to it: the card
     meets its edges square, or the frame's white shows in each corner */
  .option-card-frame[data-scopedcss-a866d611b1-070a3df817] .boxel-card-container,
  .option-card-frame[data-scopedcss-a866d611b1-070a3df817] .field-component-card {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .found[data-scopedcss-20e133db21-a1d4a450a7] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid
      color-mix(in oklch, var(--foreground) 8%, transparent);
    margin-top: var(--step-4, 4px);
  }
  .found-head[data-scopedcss-20e133db21-a1d4a450a7] {
    display: flex;
    justify-content: space-between;
    padding: var(--step-8, 8px) 0 var(--step-4, 4px);
    font-size: var(--type-caption, 11px);
    line-height: var(--leading-caption, 16px);
    color: var(--ink-3);
  }
  .found-row[data-scopedcss-20e133db21-a1d4a450a7] {
    display: grid;
    grid-template-columns: 1.625rem minmax(0, 1fr) auto;
    column-gap: var(--step-8, 8px);
    align-items: start;
    padding: var(--step-8, 8px) var(--step-8, 8px);
    margin-inline: calc(-1 * var(--step-8, 8px));
    border-radius: var(--round-chip, 4px);
  }
  .found-row.is-best[data-scopedcss-20e133db21-a1d4a450a7] {
    background-color: color-mix(in oklch, var(--primary) 7%, transparent);
  }
  .found-icon[data-scopedcss-20e133db21-a1d4a450a7] {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--round-chip, 4px);
    background-color: color-mix(
      in oklch,
      var(--foreground) 9%,
      transparent
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
  }
  .found-icon svg[data-scopedcss-20e133db21-a1d4a450a7] {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .found-body[data-scopedcss-20e133db21-a1d4a450a7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .found-title-line[data-scopedcss-20e133db21-a1d4a450a7] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .found-title[data-scopedcss-20e133db21-a1d4a450a7] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .found-kind[data-scopedcss-20e133db21-a1d4a450a7] {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    line-height: 1rem;
    padding: 0 6px;
    border-radius: 4px;
    background-color: color-mix(
      in oklch,
      var(--foreground) 12%,
      transparent
    );
    color: var(--ink-2, var(--foreground));
  }
  .found-description[data-scopedcss-20e133db21-a1d4a450a7] {
    font-size: var(--type-caption, 11px);
    line-height: 1.125rem;
    color: var(--ink-2, var(--muted-foreground));
  }
  .found-path[data-scopedcss-20e133db21-a1d4a450a7] {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .found-fit[data-scopedcss-20e133db21-a1d4a450a7] {
    display: flex;
    gap: 2px;
    padding-top: 6px;
  }
  .tick[data-scopedcss-20e133db21-a1d4a450a7] {
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: color-mix(
      in oklch,
      var(--foreground) 14%,
      transparent
    );
  }
  .tick.is-on[data-scopedcss-20e133db21-a1d4a450a7] {
    background-color: var(--ink-2, var(--foreground));
  }
  .is-best .tick.is-on[data-scopedcss-20e133db21-a1d4a450a7] {
    background-color: var(--primary);
  }
  .found-more[data-scopedcss-20e133db21-a1d4a450a7] {
    align-self: flex-start;
    font-size: var(--type-caption, 11px);
    color: var(--ink-2, var(--foreground));
  }

  /* the row and what hangs off it (reactions, a system line): one
     group, the kit's tight 4px */
  .room-message-tool > * + *[data-scopedcss-58f1aa8cb0-b9e6562097] {
    margin-top: var(--step-4, 4px);
  }
  /* a written image, small under its line; square, inside the row's
     one rounded box */
  .tool-line-thumb[data-scopedcss-58f1aa8cb0-b9e6562097] {
    display: block;
    max-width: 100%;
    height: 4.5rem;
    margin-top: 4px;
    object-fit: cover;
    background-color: var(--inset);
  }
  .tool-line-struck[data-scopedcss-58f1aa8cb0-b9e6562097] {
    color: var(--muted-foreground, var(--boxel-450));
    text-decoration-color: color-mix(
      in srgb,
      var(--muted-foreground, #a8a2ba) 70%,
      transparent
    );
  }
  .tool-line-link[data-scopedcss-58f1aa8cb0-b9e6562097] {
    color: inherit;
    text-decoration: none;
  }
  .tool-line-link[data-scopedcss-58f1aa8cb0-b9e6562097]:hover {
    text-decoration: underline;
  }
  /* sits on the text edge of the lines above it */
  .tool-lines-more[data-scopedcss-58f1aa8cb0-b9e6562097] {
    align-self: flex-start;
    margin-inline-start: calc(
      var(--pretui-toolrow-disc, 16px) + var(--pretui-toolrow-gap, 8px)
    );
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    color: var(--muted-foreground, var(--boxel-450));
    cursor: pointer;
  }
  .tool-lines-more[data-scopedcss-58f1aa8cb0-b9e6562097]:hover {
    color: var(--foreground);
    text-decoration: underline;
  }
  /* the result's particulars and its menu: one line in the rows, in
     the row's caption voice, as the study draws a call's meta */
  .tool-result-meta[data-scopedcss-58f1aa8cb0-b9e6562097] {
    display: flex;
    align-items: center;
    gap: var(--step-4, 4px);
    min-width: 0;
  }
  .room-message-tool:hover .tool-result-meta[data-scopedcss-58f1aa8cb0-b9e6562097],
  .tool-result-options[data-scopedcss-58f1aa8cb0-b9e6562097] {
    border-radius: 0;
    color: var(--boxel-450);
  }
  /* one line until the reader asks for the rest */
  .tool-failure-message[data-scopedcss-58f1aa8cb0-b9e6562097]:not([data-open]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  /* the answer hangs from the row's bottom edge, the way a chat hangs a
     reaction from its message: on the row's text edge, overlapping the
     edge by half its height, on the panel's own ground so the edge
     stops at it */
  .room-message-tool > .tool-call-reactions[data-scopedcss-58f1aa8cb0-b9e6562097] {
    position: relative;
    z-index: 1;
    margin-top: -6px;
    padding-inline-start: var(--step-32, 32px);
  }
  .tool-call-reactions[data-scopedcss-58f1aa8cb0-b9e6562097] .pretui-reaction {
    background-color: var(--card, var(--boxel-ai-purple));
  }
  /* what a check found: lines in the body, the rows' own 4px apart */
  .check-outcome[data-scopedcss-58f1aa8cb0-b9e6562097] {
    display: flex;
    flex-direction: column;
    gap: var(--step-4, 4px);
  }
  /* a finished row recedes as one: its card pills take the row's
     settled ink instead of standing out bright over a gray row */
  [data-scopedcss-58f1aa8cb0-b9e6562097] .pretui-toolrow[data-recede] .pretui-cardpill {
    color: var(--pretui-toolrow-settled-ink, var(--ink-2));
    font-weight: 500;
  }
  /* a run's steps stop growing the row past about ten lines: the
     list scrolls in its box, and column-reverse keeps the newest step
     in view as lines arrive */
  .tool-steps-scroll[data-scopedcss-58f1aa8cb0-b9e6562097] {
    display: flex;
    flex-direction: column-reverse;
    max-height: 12rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--foreground) 24%, transparent)
      transparent;
  }

  .room[data-scopedcss-810fdc6e2b-472da907a2] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    /* clip, not hidden: a hidden box can still be scrolled by a
       scrollIntoView or a focus inside it, which slid the whole room,
       header and composer, up the panel */
    overflow: clip;
    position: relative;

    /* the message box is a surface: the surface radius */
    --chat-input-area-border-radius: var(--round-surface, 12px);
  }
  .room-actions[data-scopedcss-810fdc6e2b-472da907a2] {
    position: relative;
    min-width: 0;
    padding: 0 var(--ai-assistant-panel-padding)
      var(--ai-assistant-panel-padding);
    box-shadow: var(--boxel-box-shadow);
  }

  .room-actions[data-scopedcss-810fdc6e2b-472da907a2]::before {
    content: '';
    position: absolute;

    width: 100%;
    height: calc(
      var(--ai-assistant-panel-bottom-gradient-height) +
        var(--chat-input-area-border-radius)
    );
    left: 0;
    bottom: calc(100% - var(--chat-input-area-border-radius));

    background: linear-gradient(
      to top,
      var(--boxel-ai-purple),
      var(--boxel-ai-purple) 20%,
      transparent 100%
    );

    z-index: 0;
  }

  /* the cap's slot: a one-row grid whose row closes from the cap's
     height to nothing, so the box below and the transcript above move
     together over the beat. Clipped top and bottom only, so the cap's
     edge ring still shows at its sides */
  .cap-slot[data-scopedcss-810fdc6e2b-472da907a2] {
    display: grid;
    grid-template-rows: 1fr;
    /* the box rises over the cap's tuck; the tuck closes with the slot,
       so the box never sits over the transcript */
    margin-bottom: calc(-1 * var(--step-12, 12px));
    transition:
      grid-template-rows var(--pretui-dur-move, 260ms)
        cubic-bezier(0.3, 0.1, 0.3, 1),
      margin-bottom var(--pretui-dur-move, 260ms)
        cubic-bezier(0.3, 0.1, 0.3, 1);
  }
  .cap-slot[data-closed][data-scopedcss-810fdc6e2b-472da907a2] {
    grid-template-rows: 0fr;
    margin-bottom: 0;
  }
  /* it opens the same way, from openCapSlot */
  .cap-slot-inner[data-scopedcss-810fdc6e2b-472da907a2] {
    min-height: 0;
    overflow-x: visible;
    overflow-y: clip;
    padding-top: 1px;
    margin-top: -1px;
  }
  .cap-slot-inner[data-scopedcss-810fdc6e2b-472da907a2] >  * {
    transition: opacity var(--pretui-dur-snap, 140ms) ease-out;
  }
  .cap-slot[data-closed] .cap-slot-inner[data-scopedcss-810fdc6e2b-472da907a2] >  * {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .cap-slot[data-scopedcss-810fdc6e2b-472da907a2],
    .cap-slot-inner[data-scopedcss-810fdc6e2b-472da907a2] >  * {
      transition: none;
    }
  }
  .chat-input-area[data-scopedcss-810fdc6e2b-472da907a2] {
    --boxel-pill-menu-header-padding: 0;
    --boxel-pill-menu-content-padding: var(--boxel-sp) 0;
    --boxel-pill-menu-footer-padding: 0;
    --boxel-pill-menu-button-padding: 2px 6px;

    --chat-input-area-bottom-padding: var(--step-12, 12px);
    /* the panel's teal ring cannot be seen on this light surface */
    --ring: var(--boxel-dark);

    /* a tinted light, not white: raised on the dark panel, it is the
       one thing that reads as "yours to write in" without glaring */
    background-color: var(--ai-composer-surface, var(--boxel-light));
    color: var(--boxel-dark);
    border-radius: var(--chat-input-area-border-radius);
    box-shadow:
      0 0.625rem 1.875rem rgb(0 0 0 / 45%),
      0 0 0 1px rgb(255 255 255 / 8%);

    position: relative;
    z-index: 2;

    timeline-scope: --chat-input-scroll-timeline;
  }
  .chat-input-area[data-drop-zone-active='true'][data-scopedcss-810fdc6e2b-472da907a2] {
    box-shadow: inset 0 0 0 2px var(--boxel-dark);
    background-color: #e8f0ff;
  }
  .chat-input-drop-hint[data-scopedcss-810fdc6e2b-472da907a2] {
    position: absolute;
    top: var(--boxel-sp-xs);
    right: var(--boxel-sp-xs);
    bottom: var(--boxel-sp-xs);
    left: var(--boxel-sp-xs);
    z-index: 3;
    pointer-events: none;
    color: var(--boxel-light-100);
    font-family: var(--boxel-font-family);
    font-size: var(--type-ui, 12.5px);
    line-height: var(--leading-ui, 18px);
    font-weight: 600;
    background-color: var(--boxel-darker-hover);
    border-radius: var(--round-row, 8px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chat-input-area__bottom-actions[data-scopedcss-810fdc6e2b-472da907a2] {
    display: flex;
    align-items: center;
    padding: var(--chat-input-area-bottom-padding);
    gap: var(--boxel-sp-2xs);
    background-color: transparent;
    border-bottom-left-radius: var(--chat-input-area-border-radius);
    border-bottom-right-radius: var(--chat-input-area-border-radius);
  }

  .chat-input-area__bottom-actions > .llm-select[data-scopedcss-810fdc6e2b-472da907a2] {
    flex-shrink: 1;
  }

  .chat-input-area__bottom-actions[data-scopedcss-810fdc6e2b-472da907a2]:not(:has(.menu-content)) {
    height: 40px;
  }

  .chat-input-area__bottom-actions[data-scopedcss-810fdc6e2b-472da907a2]:has(.menu-content) {
    padding: 0;
  }

  .pill-row[data-scopedcss-810fdc6e2b-472da907a2] {
    margin: var(--boxel-sp-xxxs);
  }

  .pill-row + .pill-row[data-scopedcss-810fdc6e2b-472da907a2] {
    margin-top: 0;
  }

  .llm-mode-toggle[data-scopedcss-810fdc6e2b-472da907a2] {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* "new messages" floats 8px above the composer, centered, over the
     transcript's bottom fade: a zero-height row, so it takes no line
     and the transcript never moves for it */
  .unread-jump-row[data-scopedcss-810fdc6e2b-472da907a2] {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    height: 0;
  }
  .unread-jump[data-scopedcss-810fdc6e2b-472da907a2] {
    position: static;
    transform: translateY(calc(-100% - var(--step-8, 8px)));
  }
  .session-prep[data-scopedcss-810fdc6e2b-472da907a2] {
    margin: var(--boxel-sp) 0;
  }
  .session-preparation-container[data-scopedcss-810fdc6e2b-472da907a2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 4px;
  }

  /* the bottom row answers its own width, so the context ring can step
     aside before it squeezes the model's name out */
  .chat-input-area__bottom-actions[data-scopedcss-810fdc6e2b-472da907a2]:not(:has(.menu-content)) {
    container: composer / inline-size;
  }
  /* how full the model's context window is, beside the model it
     belongs to */
  /* a figure the reader reads on the box's light face: the ring's ink
     (ink-2) is the box's secondary ink, which holds 4.5:1 there */
  .context-fullness[data-scopedcss-810fdc6e2b-472da907a2] {
    flex: none;
    --ink-2: var(--boxel-500);
  }
  @container composer (width < 20rem) {
    .context-fullness[data-scopedcss-810fdc6e2b-472da907a2] {
      display: none;
    }
  }

  .loading-indicator[data-scopedcss-810fdc6e2b-472da907a2] {
    margin-bottom: var(--boxel-sp-xxs);
  }

  .llm-select[data-scopedcss-810fdc6e2b-472da907a2] {
    /* The LLM menu opens noticeably taller than the skill menu; a longer
       duration keeps the expanding edge moving at about the same speed. */
    --pill-menu-expand-duration: 0.25s;
    --pill-menu-collapse-duration: 0.19s;
  }

  .llm-select[data-scopedcss-810fdc6e2b-472da907a2] .menu-content {
    margin-right: calc(-2 * var(--boxel-sp-sm));
    width: 100%;
  }

  .llm-select-footer-action[data-scopedcss-810fdc6e2b-472da907a2] {
    --boxel-button-font: 600 var(--type-ui, 12.5px) /
      var(--leading-ui, 18px) var(--boxel-font-family);
    --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
    --boxel-button-disabled-background: none;
    --boxel-button-disabled-opacity: 1;

    justify-content: flex-start;
    text-wrap: balance;
  }

  .fallback-banner[data-scopedcss-e85b5a6ce7-ec255f1053] {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    background-color: var(--boxel-warning-200);
    color: var(--boxel-dark);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
  }
  .icon[data-scopedcss-e85b5a6ce7-ec255f1053] {
    width: 20px;
    height: 20px;
  }
  .banner-message[data-scopedcss-e85b5a6ce7-ec255f1053] {
    margin: 0;
  }
  .dismiss[data-scopedcss-e85b5a6ce7-ec255f1053] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
  }
  .dismiss[data-scopedcss-e85b5a6ce7-ec255f1053]:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
  .dismiss[data-scopedcss-e85b5a6ce7-ec255f1053]:focus-visible {
    outline: 2px solid var(--boxel-dark);
    outline-offset: 1px;
  }
  .dismiss-icon[data-scopedcss-e85b5a6ce7-ec255f1053] {
    display: block;
  }

  .new-session-settings-menu[data-scopedcss-205ecf6407-627f6da08a] {
    position: relative;
    background-color: var(--ai-assistant-menu-background);
    border-radius: var(--boxel-border-radius);
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid var(--ai-assistant-menu-border);
    padding: 6.5px 11px 11px 11px;
    min-width: 13.75rem;
    color: var(--ai-assistant-menu-foreground);
  }
  .new-session-settings-header[data-scopedcss-205ecf6407-627f6da08a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6.5px;
  }
  .new-session-settings-title[data-scopedcss-205ecf6407-627f6da08a] {
    font: 700 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-sm);
  }
  .new-session-settings-close-button[data-scopedcss-205ecf6407-627f6da08a] {
    position: absolute;
    top: var(--boxel-sp-4xs);
    right: var(--boxel-sp-4xs);
  }
  .new-session-settings-options[data-scopedcss-205ecf6407-627f6da08a] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--boxel-sp-sm);
  }
  .new-session-settings-option[data-scopedcss-205ecf6407-627f6da08a] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 7px 4px;
    border-radius: 5px;
    transition: background-color var(--boxel-transition);
  }
  .new-session-settings-option[data-scopedcss-205ecf6407-627f6da08a]:hover {
    background-color: var(--ai-assistant-menu-hover-background);
  }
  .new-session-settings-option.checked[data-scopedcss-205ecf6407-627f6da08a] {
    background-color: var(--boxel-650);
  }
  .new-session-settings-option input[type='checkbox'][data-scopedcss-205ecf6407-627f6da08a] {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: solid 1px var(--boxel-400);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background-color: transparent;
    transition: background-color var(--boxel-transition);
    margin: 0;
  }
  .new-session-settings-option input[type='checkbox'][data-scopedcss-205ecf6407-627f6da08a]:checked {
    background-color: var(--boxel-highlight);
    border-color: var(--boxel-highlight);
  }
  .new-session-settings-option input[type='checkbox'][data-scopedcss-205ecf6407-627f6da08a]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #333;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .new-session-settings-label[data-scopedcss-205ecf6407-627f6da08a] {
    font-weight: 500;
    letter-spacing: var(--boxel-lsp-sm);
    text-wrap: nowrap;
  }
  .new-session-settings-footer[data-scopedcss-205ecf6407-627f6da08a] {
    display: flex;
    justify-content: center;
  }
  .new-session-settings-create-button[data-scopedcss-205ecf6407-627f6da08a] {
    width: 100%;
  }

  .new-session-button-container[data-scopedcss-04c6980fc4-fa62d1a995] {
    position: relative;
  }
  .new-session-menu-wrapper[data-scopedcss-04c6980fc4-fa62d1a995] {
    position: absolute;
    top: calc(1.75rem + var(--boxel-sp-4xs));
    right: 0;
    z-index: 1000;
  }
  .button[data-scopedcss-04c6980fc4-fa62d1a995] {
    --host-outline-offset: 2px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: inherit;
  }
  .button[data-scopedcss-04c6980fc4-fa62d1a995]:hover:not(:disabled),
  .button[aria-expanded='true'][data-scopedcss-04c6980fc4-fa62d1a995] {
    color: var(--boxel-light);
    background-color: color-mix(
      in oklch,
      var(--boxel-light) 10%,
      transparent
    );
  }
  .button[data-scopedcss-04c6980fc4-fa62d1a995] svg {
    stroke-width: 2;
  }

  :root {
    --ai-assistant-menu-background: var(--boxel-650);
    --ai-assistant-menu-foreground: var(--boxel-light);
    --ai-assistant-menu-border: var(--boxel-light-25);
    --ai-assistant-menu-divider: var(--boxel-575);
    --ai-assistant-menu-hover-background: var(--boxel-700);
  }

  .ai-assistant-panel[data-scopedcss-9b63bb4e74-a4465176c6] {
    /* Theme bridge: Pret UI components (StickToBottom, MarkdownStream,
       ToolRow, Thinking, DiffBlock…) read the kit's semantic tokens.
       The panel is dark, so map them onto Boxel values that read on
       --boxel-ai-purple; without this they fall back to light-theme
       literals. Everything Pret UI inside the panel inherits these. */
    /* the assistant's roles: an ink ladder, four states, four type
       sizes, a 4 px space scale and three radii. Components read these
       roles; this block is the Boxel dark theme's values for them. */
    /* on the panel, its cards and its insets: ink-1 ≥ 11:1, ink-2 ≥ 7:1,
       ink-3 ≥ 4.5:1 at 11 px */
    --foreground: #f7f8fa;
    --ink-2: #c9c4d6;
    --ink-3: #a8a2ba;
    --ai-assistant-ink: var(--foreground);
    --pretui-toolrow-settled-ink: var(--ink-2);
    --muted-foreground: var(--ink-2);
    --subtle-foreground: var(--ink-3);
    --state-live: var(--boxel-highlight);
    --state-attention: #f0b44c;
    --state-failed: #f07272;
    /* type: reading, UI, caption, heading, display, data */
    --type-read: 14px;
    --leading-read: 22px;
    --type-ui: 12.5px;
    --leading-ui: 18px;
    --type-caption: 11px;
    --leading-caption: 16px;
    --type-head: 17px;
    --leading-head: 24px;
    --type-display: 22px;
    --leading-display: 28px;
    --type-data: 12px;
    --leading-data: 18px;
    /* the names Pret UI's components read, until they read the theme
       contract */
    --text-ui-xs: var(--type-caption);
    --text-ui-sm: var(--type-caption);
    --text-ui-md: var(--type-ui);
    --text-ui: var(--type-ui);
    /* space, radius, measure */
    --step-4: 4px;
    --step-8: 8px;
    --step-12: 12px;
    --step-16: 16px;
    --step-24: 24px;
    --step-32: 32px;
    --step-48: 48px;
    --round-chip: 4px;
    --round-row: 8px;
    --round-surface: 12px;
    --measure-read: 68ch;
    --card: color-mix(
      in oklch,
      var(--boxel-light) 6%,
      var(--boxel-ai-purple)
    );
    --inset: color-mix(
      in oklch,
      var(--boxel-light) 9%,
      var(--boxel-ai-purple)
    );
    --muted: var(--inset);
    --hover: color-mix(
      in oklch,
      var(--boxel-light) 12%,
      var(--boxel-ai-purple)
    );
    --border: color-mix(in oklch, var(--boxel-light) 10%, transparent);
    --border-strong: color-mix(
      in oklch,
      var(--boxel-light) 20%,
      transparent
    );
    --pretui-shadow-hairline: 0 0 0 1px var(--border);
    /* the card is darker than the inset here, so a segmented pill gets
       its own lighter face, and labels on a card face read light */
    --card-foreground: var(--foreground);
    --pretui-highlight-pill: color-mix(
      in oklch,
      var(--boxel-light) 18%,
      var(--boxel-ai-purple)
    );
    --pretui-seg-active-ink: var(--foreground);
    /* the reader's bubble takes the kit's default: it steps back on
       --inset with ink-1 text, not white */
    /* the assistant's own icon for Pret UI's AgentMark: still when
       settled, animated while it works */
    --pretui-agent-icon: image-set(url('data:image/webp;base64,UklGRgYCAABXRUJQVlA4WAoAAAAQAAAAGQAAGQAAQUxQSMUAAAABgFXbVt1qS0ACEnBQHBQHxUFxUCRcB40TcNA4AAeJg/2xeVwJETEBGHuSrJUkPTbDStjJ8ndI3mmSkvw2ItVaYVxyl3Sgy+UWXhfVA0F4veTx/DQOKwBUIX+f54PzbsT0wXp3GLq+VQ2mpq51j2XfB7UeyWLbpqPWUr7v/3h/S6E2vxYal4uZmcLd5kaucb8ZMY1zH/I5YJHC4ZmDB4B4Cz0QqHfE3N3SgCa3w2oUWkuNWO+SkpzYzHIckneC1Cphx6/4CQBWUDggGgEAANAIAJ0BKhoAGgA+bTCTRyQjIaEoCqiADYlsAJ0y43mfjXDn75NhnMfImEA54jcQPZr58v2MfJAAbPO7yGJmutiLvayjgnMJdH1F2DmS5YAA/sNd5nCfj0nyEoYDCcd/a+s8rM6SzWFYyWRtmknvHddHhrszX/vEF+DSzHS12Ipf4rsqCDi4/Y8hXXNZIh9h1RGCFdzS01aOcoZrbEMhfDAVbYP4DMUiZ2Z33RnvHaDXvQEFvTfUf7h9cMs7+frGUnfFJhxEMu7Gpnx9pu0g4H6//JvvL/lO6yxZ+Ss7ZI09hg86DATL93vF6Qr45v+G511//3aKOEPl+ed21HH7yY5JH/bvJ/ztHqofit+OQBz8BEv/48NeW8AAAA==') 1x, url('data:image/webp;base64,UklGRoYDAABXRUJQVlA4WAoAAAAQAAAAMwAAMwAAQUxQSHIBAAABgJZtb9YqEioBCThYnRwcUAetg+EAHAwHw0HrAByAg+zzbRJ2/kcEA7dt48i9d2/JkjdQTYm/leAtUE0/wSxj1rLIWLSsgC4AViUtA7xH99DoCAjnEMFqXogKmlr1A9Fg07kd0RJ5xO7kNTNgo5c2dB/ZSevIiPRpjEijU4/5cB+3crBy2O8MCeBbwAP6mgn1K2MV+lJhrLVvP4jxdl+5pqPF9lhbuN9iZJE6bClWmghqsquVYlXNyyGy6KCltEJvLharosVDypYcKeTSJjn30JJafvg+dXqp846M5Hz33hZf+rvYceljBDabr95gcs0sMPuo2yVCBxJ6psyrFcpSW8qsVC9aZb3GOiOzRRFU+zKylYLa/1KaF4HZa/5d2zKnzxDdhNpC/ibXVkKj8swgWjs6iVUWyO7q8YmLMFBMutgyiQNS4VpEXdXjevzxlVh5uDNickcabejE+MzbOTnGWbmM0bQLaH5ObvYTOeC/yU8JVlA4IO4BAABQDQCdASo0ADQAPm0skkakIj+hMBIMA/ANiWwAuRfov4fAeaLWeyFGPhU7ernd/RzvIm8wgb58DypeQ+Xe6C73cPt4lM/nKeQIJaIh+0w5W06DfzKUkLwzzvI0Z1mZEQoj3f1onuOrUcKFF6G4HDt8nUWAAP7+9l3+RfZSNX2uw5INGJe5fm2NPbC9v4//Jv/Sx9j/wThZvDxAX6+Mski7H3YP9gB/k3PNtNddfbp/APAt2n27hXnf+Gf++NLmHyMMah7BB2pXZMN3Qjb1YTbt+t8um///sRDqdL/FwJsZtZqDVGGWWjryAzaiV4GXO9DN/CilzOvJ3+P+GViVOGsi8//fRQcxJxrwpy5j/k6GG/eHsYtaVAnhtMDGZXYGDJWdsDvL18YntWV/dv6PEtspt6inaWA38/NApOoAl5ehJRg2GZd/+UJn3EYhCqpJfPHRwUM1L2q/+Qi+Z3/GTAbNpdPy4fuPR+LFKfCJU59oVibJbYQ22VV/USYkoQuNLeNXhc9iUfBRZDLbZeSm4B0wopJ+X8Qr9/X0D9AjiTrBjN7wZcif+pif//6C1tTlo1jibaNsEftdPVofm//N2DLM8S1F3FdVFm/X+8oRGst0f0IATfAP/3iMwGZtTjWKkBM96hm4kqe9JzvZeAAAAA==') 2x, url('data:image/webp;base64,UklGRhAFAABXRUJQVlA4WAoAAAAQAAAATQAATQAAQUxQSCECAAABkFVbe5hYn4RfQiTEAXEwSKgD4oA6GBxQB9QBcVActA4SB98Dhf/P37n3OSImANaFypSoLHD+1yy9Fm/sxX+a9BNfSRWCKvkaVYAq+yqaArw0xZVQOwOzhuIpqzKQVdnTqopAVK2OMrUNAJqG2Y1U1fQ2qap4eVB9fjur+HCSqd6wu6mYXQzUj3ujjoODgfome2LAoduFhhM+Tga89JEHLcOnYMGHdLhUWo74crRgvRjJZaXphm9lsyDXi2jkdH3SOn2FZEPyeT3JzvO5sOsNypvV/vJ8svML6leX/i3oQjtQizCM7TAtwjS2g7QI49gO0SLMYzvAK6BjeLm7ofPN15bQPW2ORrgcnbQpwGmYWr9tFDiWcevSpjPcn6dmU+YccdCY5/Ip7QYcPqTd0+5fcNrlx+VxiUeJl8dC03r/8fdzr+y5XsWTXFf2vwcv4U6nVxdypd819UsrXf/2+qX3JfQIC/3XaBcrj1ijVaw8Zo02kYet0SLW47AGXag88qJb2LmUVxfeNDd2LaXgXVIuVkzfJVqXnARKyZvN+pWsNlsW2OZmwfGbkZZtgL3MFgyfAi1nQddsMX2aLDJ6DwZV9oT6NqD/oOO4NxoM8Jh1696qy/A5q3h+O1M9w6k01fQ2qZp4QVbVt6oa4HfTMAKR2g2OsyoDWZU9iWoGZpV4QtEUYNHMcD1qCFCbfSVVCKrkS1QpqcQX+uGf9upVvJX/AwBWUDggyAIAAJATAJ0BKk4ATgA+bS6VRy8iv6Erk5qD8A2JaAZwZID9K4EAeuSV/qvPrZE9J+OXss1v+x74+bztPnv4T1/gP1m92P+l3wD0APLT9jz908JoDe17MOXQ+VU3kY/ujlBWyvItHBx5//oew2eiG3ORvlhMj6q0nGYXrinhrcY+On0D9eJ7QYxleXJdgGYk9wyyj+KiP7cj5O9t7dJVA4svtLpryDkiAAD+/gbUH9X3zTDTdpEcekMcumgoBHlKQ4bY2cb0OTdd4aXOPGw9AxiuyNPDJPDxDHHDNsB3k8YSGJCzYwl+v+QMhVCHJZE8c/8gxH9KSolDsm8PwljgRau5WAK6AEQzK74q6dDOsb9H7H/gnLybt3eC/In/eFYn+zX7q7tigvmmR6ex3octo0hX7xM4VFjvv9lTu7/9TZ//mv7//zxU1RrpJuuCcOMNtSht3PebW0jfZxwSiwX2FXZGSZ/+2WTRC+4i2/+mfxvRz7jv7YrSmcynqS7B6yN4XGiZwhI0V8NNE49j316x+xjgFCMTsaU/uHT8OF/YX+dbPBFNgIKP/uz9sm7i1fX6PG7svkim2e5lQvcGodeuqUYT0JuZIv+uszUi+2rFluWHpeoG+LAEGSX4XbJ+RP/hatLx2B7EQDfBr1x9J3rpEWEPox/WzmtB7raXYq4HqNdh3dyPG30V6tP74fVeJn0ISTePh1CUMHRvnnuPzjgox/Bs8qZZe+VBrA9GqHBZiEaGYaHNeFNZ/u+D/tfM6HDFiBtQ4mrnw5bqOd2hp5w1RfZN74fM4A/ZtXhtzDxXYLRH/Oq9Y8dY2Oc7QwiVTY7+Wwr9PhMX+KfUtbUeIjbSKC2u+1pG9g9HSVibAmuRc3sEd6UG/UY6J+uZP0mHSxo/NIG9v+f+P+LesIoL7IK/+kChRD7HBOxKkzv04LM/SQOQSXQ1/9ChAAAAAAA=') 3x);
    --pretui-agent-icon-working: url('/assets/ai-assist-icon-animated-C8cXGt-5.webp');
    --pretui-agent-glyph: '';
    /* the diff's code well: deeper than the panel, as the board draws it */
    --pretui-code-well: color-mix(
      in oklch,
      black 28%,
      color-mix(in oklch, var(--boxel-light) 6%, var(--boxel-ai-purple))
    );
    --ring: var(--boxel-highlight);
    --primary: var(--boxel-highlight);
    --pretui-primary-ink: var(--boxel-highlight);
    --pretui-link: var(--boxel-highlight);
    --success: var(--boxel-highlight);
    --success-ink: var(--boxel-highlight);
    --destructive: var(--boxel-danger);
    --pretui-destructive-ink: color-mix(
      in oklch,
      var(--boxel-danger) 55%,
      var(--boxel-light)
    );
    /* amber is the panel's one "needs you" color: the row's gate, its
       ring and the composer cap's waiting dot all speak it; teal is
       spent only on the moment's one primary action */
    --pretui-attention: var(--state-attention);
    --pretui-attention-ink: var(--state-attention);
    /* the message box: a tinted light, raised on the dark panel, so it
       is the one thing that reads as "yours to write in"; its status is
       a dark cap on its top edge */
    --ai-composer-surface: color-mix(
      in oklch,
      var(--boxel-ai-purple) 5%,
      var(--boxel-light)
    );
    --ai-composer-well: color-mix(
      in oklch,
      var(--boxel-ai-purple) 12%,
      var(--boxel-light)
    );
    --ai-composer-cap-surface: color-mix(
      in oklch,
      var(--boxel-light) 9%,
      var(--boxel-ai-purple)
    );
    --ai-composer-cap-edge: color-mix(
      in oklch,
      var(--boxel-light) 16%,
      var(--boxel-ai-purple)
    );
    --ai-composer-attention: var(--pretui-attention);
    --font-mono: var(--boxel-monospace-font-family);
    --pretui-code-string: #a8e6a1;
    --pretui-code-number: #f7b07a;
    --pretui-code-keyword: #d7a6ff;
    --pretui-code-name: #8fc7ff;
    --pretui-code-comment: var(--boxel-450);

    --ai-assistant-panel-header-height: 4.5rem;
    --ai-assistant-panel-top-gradient-start-proportion: 0.6;
    /* the spine: the transcript's marks and text edge sit 16 in */
    --ai-assistant-panel-padding: var(--step-16, 16px);

    --ai-assistant-panel-bottom-gradient-height: var(--step-16, 16px);

    --top-gradient-hidden: linear-gradient(
      to bottom,
      transparent,
      transparent
        calc(var(--ai-assistant-panel-top-gradient-start-proportion) * 100%),
      transparent 100%
    );

    --top-gradient-showing: linear-gradient(
      to bottom,
      var(--boxel-ai-purple),
      var(--boxel-ai-purple)
        calc(var(--ai-assistant-panel-top-gradient-start-proportion) * 100%),
      transparent 100%
    );

    background-color: var(--boxel-ai-purple);
    border-radius: 0;
    color: var(--boxel-light);
    height: 100%;
    position: relative;

    timeline-scope: --ai-assistant-chat-scroll-timeline;
  }
  [data-scopedcss-9b63bb4e74-a4465176c6] .arrow {
    display: none;
  }
  [data-scopedcss-9b63bb4e74-a4465176c6] .separator-horizontal {
    min-width: calc(
      var(--boxel-panel-resize-handle-width) +
        calc(var(--boxel-sp-xxxs) * 2)
    );
    position: absolute;
    left: 0;
    height: 100%;
  }
  [data-scopedcss-9b63bb4e74-a4465176c6] .separator-horizontal:not(:hover) > button {
    display: none;
  }
  [data-scopedcss-9b63bb4e74-a4465176c6] .room-actions {
    z-index: 1;
  }
  .panel-header-container[data-scopedcss-9b63bb4e74-a4465176c6] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: var(--ai-assistant-panel-header-height);

    background-image: var(--top-gradient-hidden);

    animation: ai-assistant-chat-gradient-scroll-timeline-data-scopedcss-9b63bb4e74-a4465176c6 linear forwards;
    animation-timeline: --ai-assistant-chat-scroll-timeline;
  }

  .panel-header[data-scopedcss-9b63bb4e74-a4465176c6] {
    padding: var(--ai-assistant-panel-padding);

    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) repeat(3, 1.75rem);
    align-items: center;
    gap: var(--boxel-sp-4xs);
    /* the header's actions are quiet: teal is spent on the moment's one
       primary action, down in the composer */
    color: #c9c4d6;
  }

  .panel-title-text[data-scopedcss-9b63bb4e74-a4465176c6] {
    position: relative;
    margin: 0;
    padding-right: var(--boxel-sp-xl);
    padding-left: 2px;
    color: var(--boxel-light);
    font: 600 var(--boxel-font-sm);
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    /* the below font-smoothing options are only recommended for light-colored
      text on dark background (otherwise not good for accessibility) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .panel-title-text[data-scopedcss-9b63bb4e74-a4465176c6]:after {
    content: '';
    background: linear-gradient(
      to right,
      transparent,
      transparent 80%,
      var(--boxel-ai-purple) 98%
    );
    display: block;
    top: 0;
    inset-block-end: 0;
    position: absolute;
    height: calc(
      var(--ai-assistant-panel-header-height) *
        var(--ai-assistant-panel-top-gradient-start-proportion) -
        var(--ai-assistant-panel-padding)
    );
    width: 100%;
  }

  .button[data-scopedcss-9b63bb4e74-a4465176c6] {
    --host-outline-offset: 2px;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: inherit;
  }
  .button[data-scopedcss-9b63bb4e74-a4465176c6]:hover,
  .button[aria-expanded='true'][data-scopedcss-9b63bb4e74-a4465176c6] {
    color: var(--boxel-light);
    background-color: color-mix(
      in oklch,
      var(--boxel-light) 10%,
      transparent
    );
  }
  .button[data-scopedcss-9b63bb4e74-a4465176c6] svg {
    stroke-width: 2;
  }
  .button[data-scopedcss-9b63bb4e74-a4465176c6] .loading-icon {
    width: 16px;
    height: 16px;
  }

  /* another session has news: a teal dot on Past Sessions, not a
     blinking icon */
  .has-other-active-sessions[data-scopedcss-9b63bb4e74-a4465176c6]::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: var(--boxel-highlight);
    box-shadow: 0 0 0 2px var(--boxel-ai-purple);
  }

  .loading-new-session[data-scopedcss-9b63bb4e74-a4465176c6] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .room[data-scopedcss-9b63bb4e74-a4465176c6] {
    padding-top: var(
      --chat-top-clearance,
      calc(var(--ai-assistant-panel-header-height) * 0.5)
    );
  }

  .session-error[data-scopedcss-9b63bb4e74-a4465176c6] {
    padding: var(--ai-assistant-panel-padding);
  }

  .session-error[data-scopedcss-9b63bb4e74-a4465176c6] .intro {
    margin-top: calc(var(--ai-assistant-panel-header-height) * 0.5);
  }

  .ai-assistant-panel-resize-handle[data-scopedcss-9b63bb4e74-a4465176c6] {
    z-index: calc(var(--host-ai-panel-z-index) + 1);
  }

  @keyframes ai-assistant-chat-gradient-scroll-timeline-data-scopedcss-9b63bb4e74-a4465176c6 {
    0% {
      background-image: var(--top-gradient-hidden);
    }

    1% {
      background-image: var(--top-gradient-showing);
    }

    100% {
      background-image: var(--top-gradient-showing);
    }
  }

  .ai-assistant-toast[data-scopedcss-47e02330d8-aee264b0cc] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
    background-color: var(--boxel-ai-purple);
    border-radius: var(--boxel-border-radius);
    padding: 0;

    overflow: hidden;

    position: absolute;
    bottom: calc(
      var(--boxel-sp) + var(--container-button-size) + var(--boxel-sp)
    );
    right: var(--boxel-sp);

    opacity: 0;
    height: 0;
    max-width: 250px;
    transition:
      transform 0.5s ease-in-out,
      opacity 0.5s ease-in-out;
    transform: translateY(100%);
  }
  .visible[data-scopedcss-47e02330d8-aee264b0cc] {
    padding: var(--boxel-sp);
    opacity: 1;
    height: fit-content;
    transform: translateY(0);
  }
  .toast-header[data-scopedcss-47e02330d8-aee264b0cc] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    position: relative;
  }
  .time[data-scopedcss-47e02330d8-aee264b0cc] {
    display: block;
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-sm);
    color: var(--boxel-450);
    white-space: nowrap;
    flex: 1;
  }
  .toast-close-button[data-scopedcss-47e02330d8-aee264b0cc] {
    --icon-color: var(--boxel-450);
    border: none;
    background: none;
    padding: 1px;
    border-radius: var(--boxel-border-radius-xs);
    transition: background-color 0.2s ease;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
  }
  .toast-close-button[data-scopedcss-47e02330d8-aee264b0cc]:hover {
    --icon-color: var(--boxel-light);
    background-color: rgba(255, 255, 255, 0.1);
  }
  .toast-content[data-scopedcss-47e02330d8-aee264b0cc] {
    color: var(--boxel-light);
    font-size: var(--boxel-font-sm);
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: var(--boxel-lsp-xs);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .view-in-chat-button[data-scopedcss-47e02330d8-aee264b0cc] {
    --boxel-button-font: 600 var(--boxel-font-xs);
    --boxel-button-min-height: 1.5rem;
    --boxel-button-padding: 0 var(--boxel-sp-xs);
    min-width: initial;
    width: fit-content;
    max-height: 1.5rem;
    margin-left: auto;
  }
  .view-in-chat-button[data-scopedcss-47e02330d8-aee264b0cc]:hover {
    filter: brightness(1.1);
  }

  .value[data-scopedcss-778f614660-2b875dc8d1] {
    color: var(--boxel-dark);
    font: 600 var(--boxel-font-sm);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-4xs);

    --icon-color: var(--boxel-teal);
    --boxel-loading-indicator-size: var(--boxel-icon-xs);
  }
  .value.out-of-credit[data-scopedcss-778f614660-2b875dc8d1] {
    --icon-color: #ff0000;
    color: #ff0000;
  }

  .profile-popover[data-scopedcss-93735025b7-21731e75dd] {
    width: 320px;
    position: absolute;
    top: calc(
      var(--container-button-size) + calc(2 * var(--operator-mode-spacing))
    );
    right: var(--operator-mode-spacing);
    z-index: calc(var(--boxel-layer-floating-button) + 1);
    background: var(--boxel-100);
    padding: var(--boxel-sp);
    flex-direction: column;
    border-radius: var(--boxel-border-radius);
    box-shadow: var(--boxel-deep-box-shadow);
    display: flex;
  }
  [data-scopedcss-93735025b7-21731e75dd] .profile-popover-body {
    padding: var(--boxel-sp-xl) 0;
  }

  .header[data-scopedcss-93735025b7-21731e75dd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header button[data-scopedcss-93735025b7-21731e75dd] {
    --boxel-button-font: 600 var(--boxel-font-xs);
  }

  .credit-info[data-scopedcss-93735025b7-21731e75dd] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--boxel-sp-lg);
    margin-bottom: var(--boxel-sp);
    padding-top: var(--boxel-sp-lg);
    border-top: 1px solid var(--boxel-dark);
  }
  .info-group[data-scopedcss-93735025b7-21731e75dd] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xxs);
  }
  .label[data-scopedcss-93735025b7-21731e75dd] {
    color: var(--boxel-dark);
    font: var(--boxel-font-xs);
  }
  .info-group .value[data-scopedcss-93735025b7-21731e75dd] {
    color: var(--boxel-dark);
    font: 700 var(--boxel-font-sm);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-4xs);

    --icon-color: var(--boxel-teal);
    --boxel-loading-indicator-size: var(--boxel-icon-xs);
  }
  .info-group .value.out-of-credit[data-scopedcss-93735025b7-21731e75dd] {
    --icon-color: #ff0000;
    color: #ff0000;
  }
  .info-group.additional-credit[data-scopedcss-93735025b7-21731e75dd] {
    align-items: flex-end;
  }

  .info-group button[data-scopedcss-93735025b7-21731e75dd] {
    margin-top: var(--boxel-sp-xs);
  }
  .buy-more-credits[data-scopedcss-93735025b7-21731e75dd] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: var(--boxel-sp-xs);
  }
  .buy-more-credits.out-of-credit[data-scopedcss-93735025b7-21731e75dd] {
    justify-content: center;
    margin-top: var(--boxel-sp-sm);
    --boxel-button-min-width: 100%;
  }
  [data-scopedcss-93735025b7-21731e75dd] .buy-more-credits.out-of-credit .size-base {
    --boxel-button-min-height: 39px;
  }
  .daily-grant-note[data-scopedcss-93735025b7-21731e75dd] {
    flex-basis: 100%;
    color: var(--boxel-500);
    font: var(--boxel-font-xs);
    padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
    border: 1px solid var(--boxel-300);
    background: var(--boxel-50);
    border-radius: calc(var(--boxel-border-radius) / 2);
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-4xs);
  }

  .profile-popover-body[data-scopedcss-93735025b7-0ca6d2eaf2] {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow: hidden;
    --profile-avatar-icon-size: 70px;
    --profile-avatar-icon-border: 0;
  }

  .profile-popover-body > *[data-scopedcss-93735025b7-0ca6d2eaf2] {
    margin: auto;
  }

  .display-name[data-scopedcss-93735025b7-0ca6d2eaf2] {
    margin-top: var(--boxel-sp-xxxs);
    font-size: var(--boxel-font-size);
    font-weight: 600;
    max-width: 100%;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-handle[data-scopedcss-93735025b7-0ca6d2eaf2] {
    margin-top: var(--boxel-sp-xxxxs);
    color: var(--boxel-500);
    max-width: 100%;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .password-modal[data-scopedcss-5771c7c0e5-cfca3ff320] .boxel-modal__inner {
    height: 21rem;
    margin-top: calc((100vh - 21rem) / 2);
  }
  .buttons[data-scopedcss-5771c7c0e5-cfca3ff320] {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
  }
  .buttons[data-scopedcss-5771c7c0e5-cfca3ff320] > :not(:first-child) {
    margin-left: var(--boxel-sp-xs);
  }

  .email-wrapper[data-scopedcss-5771c7c0e5-86c1457a51] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--boxel-sp-xxs);
  }
  .email-value[data-scopedcss-5771c7c0e5-86c1457a51] {
    font: var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-sm);
  }
  .verification-icon[data-scopedcss-5771c7c0e5-86c1457a51] {
    width: 18px;
    height: 18px;
    display: flex;
  }
  .verification[data-scopedcss-5771c7c0e5-86c1457a51] {
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
    font-weight: 600;
    text-wrap: nowrap;
    line-height: 18px;
  }
  .not-verified[data-scopedcss-5771c7c0e5-86c1457a51] {
    display: flex;
    align-items: center;
  }
  .indicator[data-scopedcss-5771c7c0e5-86c1457a51] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }
  .checked[data-scopedcss-5771c7c0e5-86c1457a51] {
    --icon-color: var(--boxel-green);
  }
  .cross-out[data-scopedcss-5771c7c0e5-86c1457a51] {
    --icon-color: var(--boxel-red);
  }

  .buttons[data-scopedcss-5771c7c0e5-23429917ab] {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
  }
  .buttons[data-scopedcss-5771c7c0e5-23429917ab] > :not(:first-child) {
    margin-left: var(--boxel-sp-xs);
  }
  .error-message[data-scopedcss-5771c7c0e5-23429917ab] {
    color: var(--boxel-error-100);
    margin-top: var(--boxel-sp-lg);
  }
  .profile-field[data-scopedcss-5771c7c0e5-23429917ab] .invalid {
    box-shadow: none;
  }
  .warning-box[data-scopedcss-5771c7c0e5-23429917ab] {
    margin-top: var(--boxel-sp-xl);
    border-radius: var(--boxel-border-radius);
    border: 2px solid var(--boxel-warning-100);
    overflow: hidden;
  }
  .warning-title[data-scopedcss-5771c7c0e5-23429917ab] {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: var(--boxel-sp-xxs);
    background-color: var(--boxel-warning-100);
  }
  .warning-title span[data-scopedcss-5771c7c0e5-23429917ab] {
    margin-left: var(--boxel-sp-xs);
  }
  .warning[data-scopedcss-5771c7c0e5-23429917ab] {
    padding: var(--boxel-sp);
    margin: 0;
  }
  .email.initial[data-scopedcss-5771c7c0e5-23429917ab] {
    display: flex;
    justify-content: space-between;
  }
  .email-versions[data-scopedcss-5771c7c0e5-23429917ab] {
    border: 1px solid var(--boxel-form-control-border-color);
    border-radius: var(--boxel-form-control-border-radius);
  }
  .email-version[data-scopedcss-5771c7c0e5-23429917ab] {
    position: relative;
    padding: var(--boxel-sp-xxs) var(--boxel-sp) var(--boxel-sp-sm);
  }
  .email-version[data-scopedcss-5771c7c0e5-23429917ab]:before {
    content: ' ';
    height: calc(100% - 20px);
    width: 3px;
    display: block;
    position: absolute;
    top: 10px;
    left: -4px;
  }
  .email-version.current[data-scopedcss-5771c7c0e5-23429917ab]:before {
    background-color: var(--boxel-red);
  }
  .email-version.pending[data-scopedcss-5771c7c0e5-23429917ab]:before {
    background-color: var(--boxel-green);
  }
  .email-version + .email-version[data-scopedcss-5771c7c0e5-23429917ab] {
    border-top: 1px solid var(--boxel-form-control-border-color);
  }
  .email-version.current[data-scopedcss-5771c7c0e5-23429917ab] {
    border-top-left-radius: var(--boxel-form-control-border-radius);
    border-top-right-radius: var(--boxel-form-control-border-radius);
    background-color: var(--boxel-100);
  }
  .email-version .header[data-scopedcss-5771c7c0e5-23429917ab] {
    text-transform: uppercase;
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp);
    font-weight: 500;
    margin-bottom: var(--boxel-sp-xs);
  }
  .current .header[data-scopedcss-5771c7c0e5-23429917ab] {
    color: var(--boxel-red);
  }
  .pending .header[data-scopedcss-5771c7c0e5-23429917ab] {
    color: var(--boxel-green);
  }
  .pending-email[data-scopedcss-5771c7c0e5-23429917ab] {
    display: flex;
    justify-content: space-between;
  }

  @container dialog-box (width <= 48rem) {
    .profile-field[data-scopedcss-5771c7c0e5-23429917ab] {
      grid-template-columns: 1fr;
      gap: var(--boxel-sp-xs);
    }
  }

  .profile-field[data-scopedcss-eff3fa3c93-42be3a943d] .invalid {
    box-shadow: none;
  }
  .profile-subscription[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    justify-content: space-between;
  }
  .monthly-credit[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
  }
  .credit-info[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--boxel-sp-xs);
    padding-left: var(--boxel-sp-sm);
    border-left: 5px solid #c6c6c6;
    min-height: 40px;
  }
  .credit-info__label[data-scopedcss-eff3fa3c93-42be3a943d] {
    font: var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xs);
    text-wrap: nowrap;
    line-height: 18px;
  }
  .additional-credit[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
  }
  .buy-more-credits[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
    border-top: 1px solid var(--boxel-300);
    padding-top: var(--boxel-sp-sm);
  }
  .buy-more-credits__title[data-scopedcss-eff3fa3c93-42be3a943d] {
    font: 600 var(--boxel-font-sm);
  }
  .payment-links[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
    padding-left: var(--boxel-sp-xs);
  }
  .payment-link[data-scopedcss-eff3fa3c93-42be3a943d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--boxel-sp-2xs);
  }
  .payment-link[data-scopedcss-eff3fa3c93-42be3a943d]:not(:last-child) {
    border-bottom: 1px solid var(--boxel-200);
  }
  .payment-link > span[data-scopedcss-eff3fa3c93-42be3a943d] {
    color: var(--boxel-dark);
    font: 600 var(--boxel-font-sm);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-3xs);

    --icon-color: var(--boxel-highlight);
    --boxel-loading-indicator-size: var(--boxel-icon-xs);
  }
  [data-scopedcss-eff3fa3c93-42be3a943d] .buy-more-credits .boxel-loading-indicator {
    width: 100%;
    text-align: center;
  }

  @container dialog-box (width <= 48rem) {
    .profile-field[data-scopedcss-eff3fa3c93-42be3a943d] {
      grid-template-columns: 1fr;
      gap: var(--boxel-sp-xs);
    }
    .payment-links[data-scopedcss-eff3fa3c93-42be3a943d] {
      padding-left: 0;
    }
    .payment-link[data-scopedcss-eff3fa3c93-42be3a943d] {
      padding-inline: 0;
    }
    .membership-tier-field[data-scopedcss-eff3fa3c93-42be3a943d] {
      position: relative;
    }
    .membership-tier-button[data-scopedcss-eff3fa3c93-42be3a943d] {
      position: absolute;
      right: 0;
      top: var(--boxel-sp-2xs);
    }
    .membership-tier-content[data-scopedcss-eff3fa3c93-42be3a943d],
    .additional-credit[data-scopedcss-eff3fa3c93-42be3a943d] {
      background-color: var(--boxel-100);
      padding: var(--boxel-sp-xs);
      border-radius: var(--boxel-border-radius);
    }
  }

  .buttons[data-scopedcss-edd2d567bf-feda612bfc] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .right-buttons[data-scopedcss-edd2d567bf-feda612bfc] {
    margin-left: auto;
  }
  .right-buttons[data-scopedcss-edd2d567bf-feda612bfc] > :not(:first-child) {
    margin-left: var(--boxel-sp-xs);
  }
  .profile-settings-modal[data-scopedcss-edd2d567bf-feda612bfc] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-edd2d567bf-feda612bfc] .profile-settings {
    height: 80vh;
  }
  .error-message[data-scopedcss-edd2d567bf-feda612bfc] {
    color: var(--boxel-error-100);
    margin-top: var(--boxel-sp-lg);
  }
  .profile-field[data-scopedcss-edd2d567bf-feda612bfc] .invalid {
    box-shadow: none;
  }

  .settings-form[data-scopedcss-edd2d567bf-feda612bfc],
  .profile-settings-subscription[data-scopedcss-edd2d567bf-feda612bfc] {
    --settings-modal-gap: var(--boxel-sp-xl);
    display: grid;
    gap: var(--settings-modal-gap);
  }

  @container dialog-box (width <= 48rem) {
    .settings-form[data-scopedcss-edd2d567bf-feda612bfc],
    .profile-settings-subscription[data-scopedcss-edd2d567bf-feda612bfc] {
      --settings-modal-gap: var(--boxel-sp);
    }
    /* The password fields stack their labels, as profile fields do. */
    .password-settings-fields[data-scopedcss-edd2d567bf-feda612bfc] {
      --credential-layout: narrow;
      --credential-fields-height: calc(
        (
            var(--boxel-sp-sm) + var(--boxel-body-font-size) * 1.1 +
              var(--boxel-sp-xs) + var(--boxel-outline-width) * 2 +
              var(--boxel-form-control-height)
          ) *
          3 + var(--settings-modal-gap) * 2
      );
    }
    .profile-settings-change-pw-button[data-scopedcss-edd2d567bf-feda612bfc] {
      margin-right: auto;
      padding-inline: var(--boxel-sp-xs);
      font-size: 0.8125rem;
    }
    .buttons[data-scopedcss-edd2d567bf-feda612bfc] {
      gap: var(--boxel-sp-xs);
    }
    .right-buttons[data-scopedcss-edd2d567bf-feda612bfc] > :not(:first-child) {
      margin-left: 0;
    }
    .right-buttons[data-scopedcss-edd2d567bf-feda612bfc] {
      display: flex;
      gap: var(--boxel-sp-xs);
    }
  }

  /* FieldContainer's 8rem label column is 40% of a phone-width modal,
     shredding the values beside it. Inherited from the form. */
  @container dialog-box (width <= 28rem) {
    .settings-form[data-scopedcss-edd2d567bf-feda612bfc] {
      --boxel-field-label-size: 5.5rem;
    }
  }

  /* the region is the viewport: the sheet, its backdrop and the
     region's own layers stand in it, above the operator mode; only an
     open Quick Look takes the pointer */
  .quick-look-region[data-scopedcss-b624224e97-127e484f54] {
    position: fixed;
    inset: 0;
    z-index: var(--boxel-layer-modal-default);
    pointer-events: none;
    /* a centered sheet over the workspace, the way a card is looked at
       in operator mode: light, on the stack's surface */
    --pretui-quick-look-inset: max(6vh, 32px)
      max(calc((100vw - 1080px) / 2), 32px);
    --card: var(--boxel-light);
    --card-foreground: var(--boxel-dark);
    --foreground: var(--boxel-dark);
    --background: var(--boxel-light);
    --border: var(--boxel-200);
    --ink-2: var(--boxel-500);
    --ink-3: var(--boxel-450);
    --muted-foreground: var(--boxel-500);
    --primary: var(--boxel-highlight);
    --primary-foreground: var(--boxel-dark);
    --ring: var(--boxel-dark);
    --pretui-scrim: rgb(0 0 0 / 55%);
  }
  .quick-look-region[data-scopedcss-b624224e97-127e484f54] >  .pretui-quick-look {
    pointer-events: auto;
  }

  @layer PretComponent {
    .pretui-quick-look[data-scopedcss-5a57224702-23ad52b7af] {
      position: absolute;
      inset: 0;
      z-index: var(--pretui-quick-look-z, 20);
    }
    .pretui-quick-look-backdrop[data-scopedcss-5a57224702-23ad52b7af] {
      position: absolute;
      inset: 0;
      background-color: var(
        --pretui-scrim,
        color-mix(in oklch, var(--background) 55%, transparent)
      );
    }
    .pretui-quick-look-sheet[data-scopedcss-5a57224702-23ad52b7af] {
      position: absolute;
      inset: var(
        --pretui-quick-look-inset,
        var(--boxel-sp-3xl) var(--boxel-sp-sm) var(--boxel-sp-sm)
      );
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border-radius: var(--boxel-border-radius-lg);
      background-color: var(--card);
      color: var(--card-foreground);
      box-shadow:
        var(--pretui-shadow-hairline, 0 0 0 1px var(--border)),
        var(--pretui-shadow-overlay, var(--shadow-lg));
    }
    .pretui-quick-look-sheet[data-scopedcss-5a57224702-23ad52b7af]:focus {
      outline: none;
    }
    .pretui-quick-look-sheet[data-scopedcss-5a57224702-23ad52b7af]:focus-visible {
      box-shadow:
        0 0 0 2px var(--ring),
        var(--pretui-shadow-overlay, var(--shadow-lg));
    }
    .pretui-quick-look-bar[data-scopedcss-5a57224702-23ad52b7af] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      min-height: var(--boxel-sp-3xl);
      padding: var(--boxel-sp-xs) var(--boxel-sp-xs) var(--boxel-sp-xs)
        var(--boxel-sp);
      border-bottom: 1px solid var(--border);
    }
    .pretui-quick-look-heading[data-scopedcss-5a57224702-23ad52b7af] {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    .pretui-quick-look-kind[data-scopedcss-5a57224702-23ad52b7af] {
      font-size: var(--boxel-caption-font-size);
      line-height: var(--boxel-caption-line-height);
      color: var(--subtle-foreground);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .pretui-quick-look-title[data-scopedcss-5a57224702-23ad52b7af] {
      margin: 0;
      font-size: var(--boxel-ui-label-font-size);
      line-height: var(--boxel-ui-label-line-height);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .pretui-quick-look-actions[data-scopedcss-5a57224702-23ad52b7af] {
      display: flex;
      align-items: center;
      gap: var(--boxel-sp-xs);
      flex-shrink: 0;
    }
    .pretui-quick-look-actions[data-scopedcss-5a57224702-23ad52b7af]:empty {
      display: none;
    }
    .pretui-quick-look-close[data-scopedcss-5a57224702-23ad52b7af] {
      flex-shrink: 0;
      color: var(--muted-foreground);
    }
    .pretui-quick-look-body[data-scopedcss-5a57224702-23ad52b7af] {
      flex: 1;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }
  }

  /* the card keeps its own type and theme, on the sheet's face */
  .quick-look-embed[data-scopedcss-c1b7f0a6f4-3922f798d5] {
    min-height: 100%;
  }

  .boxel-pricing-container[data-scopedcss-9415e624ae-c414c36d37] {
    color: var(--boxel-700);
    background-color: var(--boxel-light);
    max-width: var(--boxel-xxl-container);
    margin: 0 auto;
  }

  .main-title[data-scopedcss-9415e624ae-c414c36d37] {
    font: var(--boxel-font-xl);
    font-weight: 700;
    text-align: center;
    color: var(--boxel-dark);
    margin-bottom: var(--boxel-sp-lg);
    margin-top: 0;
  }

  .early-preview-banner[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-lime);
    border: 1.5px solid var(--boxel-dark);
    border-radius: var(--boxel-border-radius-sm);
    padding: var(--boxel-sp-sm) var(--boxel-sp);
    font: var(--boxel-font);
    font-weight: 500;
    text-align: center;
    max-width: var(--boxel-lg-container);
    margin: 0 auto var(--boxel-sp) auto;
  }

  .intro-text[data-scopedcss-9415e624ae-c414c36d37] {
    text-align: center;
    max-width: var(--boxel-xl-container);
    margin: 0 auto var(--boxel-sp-xxl) auto;
    line-height: 1.5;
    color: var(--boxel-700);
  }

  .subscription-header[data-scopedcss-9415e624ae-c414c36d37] {
    text-align: center;
    margin-bottom: var(--boxel-sp-lg);
  }

  .subscription-title[data-scopedcss-9415e624ae-c414c36d37] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--boxel-sp-sm);
    margin-bottom: var(--boxel-sp-xs);
  }

  .subscription-title h2[data-scopedcss-9415e624ae-c414c36d37] {
    font: var(--boxel-font-lg);
    font-weight: 600;
    color: var(--boxel-dark);
    margin: 0;
  }

  .subscription-header p[data-scopedcss-9415e624ae-c414c36d37] {
    font: var(--boxel-font);
    color: var(--boxel-500);
    margin: 0;
  }

  .pricing-table[data-scopedcss-9415e624ae-c414c36d37] {
    border-top: var(--boxel-border);
    padding-top: var(--boxel-sp-lg);
  }
  .feature-labels-column[data-scopedcss-9415e624ae-c414c36d37] {
    display: none;
  }

  .plan-column[data-scopedcss-9415e624ae-c414c36d37] {
    border: var(--boxel-border);
    border-radius: var(--boxel-border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--boxel-sp-lg);
    background-color: var(--boxel-light);
    position: relative;
  }
  .plan-column.plan-starter[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-100);
  }

  .current-plan-badge[data-scopedcss-9415e624ae-c414c36d37] {
    position: absolute;
    top: var(--boxel-sp);
    right: var(--boxel-sp);
    background-color: var(--boxel-450);
    color: var(--boxel-light);
    padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
    border-radius: 50px;
    font: var(--boxel-font-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 8px;
  }

  .plan-header[data-scopedcss-9415e624ae-c414c36d37] {
    padding: var(--boxel-sp-lg);
    text-align: center;
  }
  .plan-column.plan-starter .plan-header[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-100);
  }
  .plan-header[data-scopedcss-9415e624ae-c414c36d37]:not(.plan-starter *) {
    background-color: var(--boxel-light);
  }

  .plan-name[data-scopedcss-9415e624ae-c414c36d37] {
    font: var(--boxel-font-md);
    font-weight: 600;
    margin: 0 0 var(--boxel-sp-xs) 0;
  }
  .plan-price[data-scopedcss-9415e624ae-c414c36d37] {
    font: var(--boxel-font-xl);
    font-weight: 700;
    color: var(--boxel-dark);
    line-height: 1;
  }
  .plan-period[data-scopedcss-9415e624ae-c414c36d37] {
    margin-bottom: var(--boxel-sp);
  }

  .btn[data-scopedcss-9415e624ae-c414c36d37] {
    display: inline-block;
    padding: var(--boxel-sp-sm) var(--boxel-sp-lg);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--boxel-transition);
    font: var(--boxel-font-sm);
  }
  .btn[data-scopedcss-9415e624ae-c414c36d37]:hover {
    transform: scale(1.05);
  }
  .btn-teal[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-teal);
    color: var(--boxel-dark);
  }
  .btn-dark[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-dark);
    color: var(--boxel-light);
  }
  .btn-get-started[data-scopedcss-9415e624ae-c414c36d37] {
    font-weight: 600;
  }

  .feature-cell[data-scopedcss-9415e624ae-c414c36d37] {
    padding: var(--boxel-sp) var(--boxel-sp);
    font-weight: 500;
    text-align: center;
    border-top: var(--boxel-border);
  }
  .feature-cell[data-scopedcss-9415e624ae-c414c36d37]:not(:last-child) {
    border-bottom: var(--boxel-border);
  }

  .feature-cell[data-scopedcss-9415e624ae-c414c36d37]::before {
    content: attr(data-label);
    display: block;
    font-weight: 500;
    color: var(--boxel-700);
    margin-bottom: var(--boxel-sp-xs);
    text-align: center;
    font: var(--boxel-font-sm);
  }
  .feature-cell .credit-value[data-scopedcss-9415e624ae-c414c36d37] {
    margin-top: var(--boxel-sp-xs);
  }

  .credit-value[data-scopedcss-9415e624ae-c414c36d37] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--boxel-sp-xs);
    font: var(--boxel-font-lg);
    font-weight: 600;
    --icon-color: var(--boxel-teal);
  }
  .feature-note[data-scopedcss-9415e624ae-c414c36d37] {
    color: var(--boxel-500);
    font: var(--boxel-font-sm);
    margin-top: var(--boxel-sp-xxs);
  }

  .footer-notes[data-scopedcss-9415e624ae-c414c36d37] {
    text-align: center;
    margin-top: var(--boxel-sp);
    color: var(--boxel-450);
    line-height: 1.5;
    font: var(--boxel-font-xs);
    margin-top: 1.5rem;
  }
  .footer-notes p[data-scopedcss-9415e624ae-c414c36d37] {
    margin: var(--boxel-sp-xs) 0;
  }
  .footer-notes .highlight[data-scopedcss-9415e624ae-c414c36d37] {
    background-color: var(--boxel-lime);
    padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius-xs);
    color: var(--boxel-700);
    font-weight: 500;
  }

  @media (min-width: 992px) {
    .pricing-table[data-scopedcss-9415e624ae-c414c36d37] {
      display: flex;
      border: var(--boxel-border);
      border-radius: var(--boxel-border-radius-lg);
      padding-top: 0;
      overflow: hidden;
    }

    .feature-labels-column[data-scopedcss-9415e624ae-c414c36d37] {
      display: block;
      flex: 1 1 25%;
      background-color: var(--boxel-light);
      font-weight: 600;
      color: var(--boxel-700);
    }

    .plan-column[data-scopedcss-9415e624ae-c414c36d37] {
      flex: 1 1 25%;
      border: none;
      border-radius: 0;
      margin-bottom: 0;
    }
    .plan-column[data-scopedcss-9415e624ae-c414c36d37]:not(:first-of-type) {
      border-left: var(--boxel-border);
    }

    .plan-header[data-scopedcss-9415e624ae-c414c36d37] {
      background-color: var(--boxel-100);
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .feature-cell[data-scopedcss-9415e624ae-c414c36d37]::before {
      display: none;
    }
    .feature-cell[data-scopedcss-9415e624ae-c414c36d37] {
      min-height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .label-cell[data-scopedcss-9415e624ae-c414c36d37] {
      min-height: 100px;
      padding: var(--boxel-sp);
      font-weight: 600;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .label-cell[data-scopedcss-9415e624ae-c414c36d37]:not(.is-header) {
      border-top: var(--boxel-border);
    }
    .label-cell.is-header[data-scopedcss-9415e624ae-c414c36d37] {
      min-height: 220px;
    }

    .credit-value[data-scopedcss-9415e624ae-c414c36d37] {
      font: var(--boxel-font-lg);
      font-weight: 600;
    }
  }

  .choose-subscription-plan-modal[data-scopedcss-9415e624ae-c414c36d37] {
    --boxel-modal-max-width: 80rem;
    --boxel-modal-offset-top: var(--boxel-sp-xxl);
    height: 90%;
  }

  @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-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-4c5bd031e9] {
      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);
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--_avatar-hue) 28%, var(--border));
      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-4c5bd031e9] {
        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
       circle would clip an outline on the square img. */
    .pretui-avatar[data-has-image][data-scopedcss-5178d38d8c-4c5bd031e9] {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
    }
    .pretui-avatar img[data-scopedcss-5178d38d8c-4c5bd031e9] {
      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-39abb89535] {
      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-39abb89535] {
      align-items: flex-start;
    }
    .pretui-item[data-size='xs'][data-scopedcss-8d0ffb3c65-39abb89535] {
      font-size: 10.5px;
    }
    .pretui-item[data-size='s'][data-scopedcss-8d0ffb3c65-39abb89535] {
      font-size: var(--text-ui-sm, 11.5px);
    }
    .pretui-item[data-size='l'][data-scopedcss-8d0ffb3c65-39abb89535] {
      font-size: 14px;
    }
    .pretui-item[data-size='xl'][data-scopedcss-8d0ffb3c65-39abb89535] {
      font-size: 16px;
    }
    .pretui-item-lead[data-scopedcss-8d0ffb3c65-39abb89535] {
      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-39abb89535] {
      flex: 1 1 auto;
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .pretui-item-title[data-scopedcss-8d0ffb3c65-39abb89535] {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535] {
      color: inherit;
      text-decoration: none;
    }
    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535]:hover {
      text-decoration: underline;
    }
    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: 3px;
    }
    .pretui-item-desc[data-scopedcss-8d0ffb3c65-39abb89535] {
      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-39abb89535] {
      min-width: 0;
      margin-block-start: 2px;
    }
    .pretui-item-trail[data-scopedcss-8d0ffb3c65-39abb89535] {
      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-39abb89535] {
      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-39abb89535] {
        flex-wrap: wrap;
      }
      .pretui-item-trail[data-scopedcss-8d0ffb3c65-39abb89535] {
        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-74a3a9dccc {
      0%,
      100% {
        opacity: 0.15;
      }
      50% {
        opacity: 1;
      }
    }
    @keyframes pretui-shimmer-text-data-scopedcss-cae5827e83-74a3a9dccc {
      from {
        background-position: 200% 0;
      }
      to {
        background-position: -200% 0;
      }
    }
    .pretui-loading[data-scopedcss-cae5827e83-74a3a9dccc] {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .pretui-pixelgrid[data-scopedcss-cae5827e83-74a3a9dccc] {
      display: grid;
      grid-template-columns: repeat(3, 4px);
      gap: 1.5px;
    }
    .pretui-pixel[data-scopedcss-cae5827e83-74a3a9dccc] {
      width: 4px;
      height: 4px;
      background: var(--foreground);
      border-radius: 1px;
      opacity: 0.15;
    }
    .pretui-pixel[data-round][data-scopedcss-cae5827e83-74a3a9dccc] {
      border-radius: 50%;
    }
    .pretui-shimmer-label[data-scopedcss-cae5827e83-74a3a9dccc] {
      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-74a3a9dccc 1.4s linear infinite;
      white-space: nowrap;
    }
    .pretui-elapsed[data-scopedcss-cae5827e83-74a3a9dccc] {
      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-74a3a9dccc] {
        animation: none !important;
        opacity: 0.6;
      }
      .pretui-shimmer-label[data-scopedcss-cae5827e83-74a3a9dccc] {
        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-9c42952c7e-0ea9fd0f4b] {
    margin: 0;
  }
  /* The dialog inherits the chooser's light-on-dark scrollbar color;
     restate it from the dialog's own tokens, light or dark. */
  .realm-list-frame[data-scopedcss-9c42952c7e-0ea9fd0f4b] {
    scrollbar-color: color-mix(
        in oklch,
        var(--muted-foreground) 50%,
        transparent
      )
      transparent;
  }
  .realm-list-frame[data-scopedcss-9c42952c7e-0ea9fd0f4b] .pretui-scroller-viewport {
    max-height: min(50dvh, 26rem);
  }
  /* Realm icons are rounded squares on the workspace tiles; match them. */
  .realm-icon[data-scopedcss-9c42952c7e-0ea9fd0f4b] .pretui-avatar {
    border-radius: var(--boxel-border-radius-xs);
  }
  .loading[data-scopedcss-9c42952c7e-0ea9fd0f4b] {
    display: flex;
    justify-content: center;
    padding: var(--boxel-sp-lg) 0;
  }

  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] {
    display: inline-flex;
  }
  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn {
    color: var(--boxel-light);
    background: transparent;
  }
  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn:hover,
  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn:focus-visible {
    color: var(--boxel-highlight);
  }

  .workspace[data-scopedcss-9bc2278b27-395940a797] {
    min-width: var(--workspace-chooser-tile-width);
    width: var(--workspace-chooser-tile-width);
    height: 10.375rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--boxel-border-radius-xl);
    border: none;
    overflow: hidden;
    padding: 0;
    position: relative;
  }
  .workspace[data-scopedcss-9bc2278b27-395940a797]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--boxel-border-radius-xl);
    border: 1px solid
      var(--item-container-border-color, rgba(255 255 255 / 15%));
    pointer-events: none;
    z-index: 2;
  }
  .workspace[data-scopedcss-9bc2278b27-395940a797]:hover::after {
    border-color: var(
      --item-container-border-hover-color,
      rgba(255 255 255 / 40%)
    );
  }
  .workspace[data-scopedcss-9bc2278b27-395940a797]:focus-visible {
    outline-offset: -1px;
  }
  .workspace.is-selected[data-scopedcss-9bc2278b27-395940a797]::after {
    border-color: var(--boxel-teal);
    box-shadow: 0 0 0 1px var(--boxel-teal);
  }

  .create-workspace-modal[data-scopedcss-9e9bbebfae-53ef893848] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-9e9bbebfae-53ef893848] .create-workspace {
    height: 28rem;
  }
  .boxel-field + .boxel-field[data-scopedcss-9e9bbebfae-53ef893848] {
    margin-top: var(--boxel-sp);
  }
  .field[data-scopedcss-9e9bbebfae-53ef893848] {
    --boxel-field-label-size: 8rem;
    padding-right: 0;
  }
  .footer-buttons[data-scopedcss-9e9bbebfae-53ef893848] {
    display: flex;
    margin-left: auto;
    gap: var(--boxel-sp-xxs);
  }
  .error-message[data-scopedcss-9e9bbebfae-53ef893848] {
    color: var(--boxel-error-100);
    margin-top: var(--boxel-sp-lg);
  }
  .spinner-container[data-scopedcss-9e9bbebfae-53ef893848] {
    align-items: center;
    display: flex;
    height: 12rem;
    justify-content: center;
  }
  .spinner-inner-container[data-scopedcss-9e9bbebfae-53ef893848] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    text-align: center;
  }
  .spinner[data-scopedcss-9e9bbebfae-53ef893848] {
    --boxel-loading-indicator-size: 2.5rem;
  }

  .container[data-scopedcss-9e9bbebfae-188353be9f] {
    border-style: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon[data-scopedcss-9e9bbebfae-188353be9f] {
    --icon-color: var(--boxel-highlight);
  }
  .icon[data-scopedcss-9e9bbebfae-188353be9f] path {
    stroke: none;
  }
  .content[data-scopedcss-9e9bbebfae-188353be9f] {
    color: var(--boxel-light);
    text-align: center;
  }
  .content .icon[data-scopedcss-9e9bbebfae-188353be9f] {
    color: var(--boxel-highlight);
  }

  .item-container[data-scopedcss-bbb7d6572b-e38ead584f] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--dashboard-tile-height);
    padding: 0;
    border: none;
    border-radius: var(--dashboard-tile-radius);
    overflow: hidden;
  }
  /* The keyboard cursor's ring is drawn by the tile around it, so focus
     draws no outline of its own. */
  .item-container[data-scopedcss-bbb7d6572b-e38ead584f]:focus-visible {
    outline: none;
  }

  .add-workspace[data-scopedcss-ceab61f459-fb123c5358] {
    justify-content: center;
    align-items: center;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--boxel-light-10);
    color: var(--boxel-light);
    transition: box-shadow var(--boxel-transition);
  }
  .add-workspace[data-scopedcss-ceab61f459-fb123c5358]:hover {
    box-shadow: inset 0 0 0 1px var(--boxel-light-25);
  }
  .add-workspace.is-selected[data-scopedcss-ceab61f459-fb123c5358],
  .add-workspace[data-scopedcss-ceab61f459-fb123c5358]:focus-visible {
    box-shadow: var(--dashboard-ring);
  }
  .content[data-scopedcss-ceab61f459-fb123c5358] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    font: 600 var(--boxel-font-sm);
  }
  .icon[data-scopedcss-ceab61f459-fb123c5358] {
    flex-shrink: 0;
    color: var(--boxel-highlight);
  }

  .archived-row[data-scopedcss-443a7d4fc7-504b90622e] {
    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-10);
    color: var(--boxel-light);
  }
  .thumb[data-scopedcss-443a7d4fc7-504b90622e] {
    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-504b90622e] {
    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-504b90622e]::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-504b90622e] {
    --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-504b90622e] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--boxel-sp-4xs);
    min-width: 0;
  }
  .name[data-scopedcss-443a7d4fc7-504b90622e] {
    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-504b90622e] {
    color: var(--boxel-danger);
    font: 600 var(--boxel-font-xs);
    overflow-wrap: break-word;
  }
  .restore-btn[data-scopedcss-443a7d4fc7-504b90622e] {
    flex: none;
  }

  .hosted-pill[data-scopedcss-a623db939f-628cc91d72] {
    flex: none;
    padding: var(--boxel-sp-6xs) var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius-lg);
    background-color: var(--hosted-pill-background, var(--boxel-dark-40));
    color: var(--boxel-lime);
    font-family: var(--boxel-monospace-font-family);
    font-size: var(--boxel-font-size-2xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .hosted-pill[data-scopedcss-a623db939f-628cc91d72]::before {
    content: '● ' / '';
  }

  .flyout-header[data-scopedcss-4c68e07853-c985cd1639] {
    padding: var(--boxel-sp-4xs) var(--boxel-sp-xs) var(--boxel-sp-xs);
  }
  .flyout-title[data-scopedcss-4c68e07853-c985cd1639] {
    font-size: var(--boxel-font-size);
    font-weight: 700;
  }
  .favorite[data-scopedcss-4c68e07853-c985cd1639] {
    --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. */
  .favorite-content[data-scopedcss-4c68e07853-c985cd1639] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    width: calc(
      var(--section-rail-flyout-content-width) - 2 * var(--boxel-sp-xs) -
        2px
    );
  }
  .favorite-thumb[data-scopedcss-4c68e07853-c985cd1639] {
    position: relative;
    flex-shrink: 0;
    width: 3rem;
    height: 2rem;
    border-radius: var(--boxel-border-radius-sm);
    background-color: var(--muted);
    background-image: var(--favorite-wallpaper);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--boxel-light-10);
  }
  .favorite-icon[data-scopedcss-4c68e07853-c985cd1639] {
    --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;
    left: var(--boxel-sp-5xs);
    bottom: var(--boxel-sp-5xs);
  }
  .favorite-name[data-scopedcss-4c68e07853-c985cd1639] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--boxel-font-size-sm);
    font-weight: 600;
  }
  .flyout-empty[data-scopedcss-4c68e07853-c985cd1639] {
    margin: 0;
    padding: var(--boxel-sp-xs);
    font-size: var(--boxel-font-size-sm);
    color: var(--muted-foreground);
  }

  .workspace[data-scopedcss-d928082a3b-9844753785] {
    min-width: var(--workspace-chooser-tile-width);
    width: var(--workspace-chooser-tile-width);
    height: 10.375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--boxel-border-radius-xl);
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    padding: 0;

    position: relative;

    --icon-color: var(--boxel-light);
  }
  .loading-small-icon[data-scopedcss-d928082a3b-9844753785] {
    position: absolute;
    width: var(--boxel-icon-sm);
    height: var(--boxel-icon-sm);
    top: var(--boxel-sp-xs);
    left: var(--boxel-sp-xs);
    background: var(--boxel-dark);
    border-radius: var(--boxel-border-radius-sm);
  }

  .workspace-chooser-delete-modal-container[data-scopedcss-451a1a555a-58a40e6cb4] {
    --stack-card-footer-height: auto;
  }
  .workspace-chooser-delete-modal-container[data-scopedcss-451a1a555a-58a40e6cb4] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-451a1a555a-58a40e6cb4] .workspace-chooser-delete-modal {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  [data-scopedcss-451a1a555a-58a40e6cb4] .workspace-chooser-delete-modal > .dialog-box__content {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
  }
  [data-scopedcss-451a1a555a-58a40e6cb4] .workspace-chooser-delete-modal > .dialog-box__content > * + * {
    margin-top: 0;
  }
  .delete-modal__warning-icon[data-scopedcss-451a1a555a-58a40e6cb4] {
    flex-shrink: 0;
  }
  .delete-modal__workspace-card[data-scopedcss-451a1a555a-58a40e6cb4] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    background: var(--boxel-light-100);
    border-radius: var(--boxel-border-radius-lg);
    padding: var(--boxel-sp-sm);
  }
  .delete-modal__realm-icon[data-scopedcss-451a1a555a-58a40e6cb4] {
    flex-shrink: 0;
    --boxel-realm-icon-size: 1.875rem;
  }
  .delete-modal__workspace-info[data-scopedcss-451a1a555a-58a40e6cb4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-4xs);
  }
  .delete-modal__workspace-name[data-scopedcss-451a1a555a-58a40e6cb4] {
    font-size: var(--boxel-font-size-sm);
    line-height: var(--boxel-line-height-sm);
    font-weight: 600;
    color: var(--boxel-dark);
  }
  .delete-modal__workspace-name[data-scopedcss-451a1a555a-58a40e6cb4],
  .delete-modal__workspace-url[data-scopedcss-451a1a555a-58a40e6cb4] {
    overflow-wrap: break-word;
  }
  .delete-modal__workspace-url[data-scopedcss-451a1a555a-58a40e6cb4],
  .delete-modal__workspace-meta[data-scopedcss-451a1a555a-58a40e6cb4] {
    font-size: var(--boxel-font-size-xs);
    line-height: var(--boxel-line-height-xs);
    color: var(--boxel-450);
  }
  .delete-modal__warning[data-scopedcss-451a1a555a-58a40e6cb4] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp-sm);
    border-radius: var(--boxel-border-radius-lg);
    font-size: var(--boxel-font-size-sm);
    line-height: var(--boxel-line-height-sm);
  }
  .delete-modal__warning.warning[data-scopedcss-451a1a555a-58a40e6cb4] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--boxel-sp-sm);
    background-color: var(--boxel-warning-200);
    color: var(--boxel-dark);
  }
  .delete-modal__warning.error[data-scopedcss-451a1a555a-58a40e6cb4] {
    border: 1px solid var(--boxel-error-200);
    background-color: rgb(from var(--boxel-error-200) r g b / 8%);
    color: var(--boxel-error-200);
  }
  .delete-modal__warning-body[data-scopedcss-451a1a555a-58a40e6cb4] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }
  .delete-modal__irreversible[data-scopedcss-451a1a555a-58a40e6cb4] {
    margin: 0;
    font-weight: 600;
  }
  .delete-modal__realms[data-scopedcss-451a1a555a-58a40e6cb4] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    margin-top: var(--boxel-sp-4xs);
  }
  .delete-modal__realms-title[data-scopedcss-451a1a555a-58a40e6cb4] {
    margin: 0;
    font-size: var(--boxel-font-size-sm);
    line-height: var(--boxel-line-height-sm);
    font-weight: 600;
    color: var(--boxel-dark);
  }
  .delete-modal__realms-list[data-scopedcss-451a1a555a-58a40e6cb4] {
    margin: 0;
    padding-left: var(--boxel-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }
  .delete-modal__realms-list li[data-scopedcss-451a1a555a-58a40e6cb4] {
    font-size: var(--boxel-font-size-sm);
    line-height: var(--boxel-line-height-sm);
    color: var(--boxel-dark);
    list-style: disc;
  }
  .delete-modal__footer[data-scopedcss-451a1a555a-58a40e6cb4] {
    display: flex;
    justify-content: flex-end;
    gap: var(--boxel-sp-sm);
    width: 100%;
  }

  .workspace-chooser-archive-modal-container[data-scopedcss-451a1a555a-144c78c595] >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-451a1a555a-144c78c595] .workspace-chooser-archive-modal {
    border-radius: var(--boxel-border-radius-2xl);
    max-width: var(--boxel-md-container);
    height: auto;
    display: flex;
    flex-direction: column;
  }
  [data-scopedcss-451a1a555a-144c78c595] .workspace-chooser-archive-modal > .dialog-box__header {
    display: none;
  }
  [data-scopedcss-451a1a555a-144c78c595] .workspace-chooser-archive-modal > .dialog-box__content {
    padding: var(--boxel-sp-lg) var(--boxel-sp-xl);
    overflow: visible;
    height: auto;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
  }
  [data-scopedcss-451a1a555a-144c78c595] .workspace-chooser-archive-modal > .dialog-box__content > * + * {
    margin-top: 0;
  }
  [data-scopedcss-451a1a555a-144c78c595] .workspace-chooser-archive-modal > .dialog-box__footer {
    height: auto;
    flex: none;
    padding: 0 var(--boxel-sp-xl) var(--boxel-sp-xl);
    border-top: none;
  }
  .archive-modal__header[data-scopedcss-451a1a555a-144c78c595] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
  }
  .archive-modal__icon[data-scopedcss-451a1a555a-144c78c595] {
    color: var(--boxel-dark);
    flex-shrink: 0;
  }
  .archive-modal__title[data-scopedcss-451a1a555a-144c78c595] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--boxel-dark);
    margin: 0;
  }
  .archive-modal__workspace-card[data-scopedcss-451a1a555a-144c78c595] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    background: var(--boxel-light-100);
    border-radius: var(--boxel-border-radius-lg);
    padding: var(--boxel-sp);
    min-height: 5.125rem;
  }
  .archive-modal__realm-icon-wrapper[data-scopedcss-451a1a555a-144c78c595] {
    position: relative;
    flex-shrink: 0;
    border-radius: calc(
      var(--boxel-border-radius-xs) + var(--boxel-border-radius-sm)
    );
    display: flex;
  }
  .archive-modal__realm-icon-wrapper[data-scopedcss-451a1a555a-144c78c595]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--boxel-light-50);
    z-index: 1;
    pointer-events: none;
  }
  .archive-modal__realm-icon[data-scopedcss-451a1a555a-144c78c595] {
    --boxel-realm-icon-size: 2.625rem;
    --boxel-realm-icon-border-radius: calc(
      var(--boxel-border-radius-xs) + 0.375rem
    );
    --boxel-realm-icon-background-color: var(--boxel-light);
  }
  .archive-modal__workspace-info[data-scopedcss-451a1a555a-144c78c595] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-4xs);
  }
  .archive-modal__workspace-name[data-scopedcss-451a1a555a-144c78c595] {
    font-size: var(--boxel-font-size-sm);
    font-weight: 700;
    color: var(--boxel-dark);
    overflow-wrap: break-word;
  }
  .archive-modal__workspace-url[data-scopedcss-451a1a555a-144c78c595] {
    font-size: var(--boxel-font-size-xs);
    line-height: var(--boxel-line-height-xs);
    color: var(--boxel-450);
    overflow-wrap: break-word;
  }
  .archive-modal__info-box[data-scopedcss-451a1a555a-144c78c595] {
    background: var(--boxel-light-100);
    border-radius: var(--boxel-border-radius-lg);
    padding: var(--boxel-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
  }
  .archive-modal__info-text[data-scopedcss-451a1a555a-144c78c595] {
    margin: 0;
    font-size: var(--boxel-font-size-sm);
    font-weight: 400;
    color: var(--boxel-dark);
  }
  .archive-modal__error[data-scopedcss-451a1a555a-144c78c595] {
    color: var(--boxel-danger);
    font-size: var(--boxel-font-size-sm);
    font-weight: 600;
    margin: 0;
  }
  .archive-modal__footer[data-scopedcss-451a1a555a-144c78c595] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--boxel-sp-xs);
    width: 100%;
  }
  .archive-modal__actions[data-scopedcss-451a1a555a-144c78c595] {
    display: flex;
    gap: var(--boxel-sp-sm);
    align-items: center;
  }
  .archive-modal__disclaimer[data-scopedcss-451a1a555a-144c78c595] {
    font-size: var(--boxel-font-size-xs);
    font-weight: 700;
    color: var(--boxel-500);
  }

  .workspace-chooser-duplicate-modal-container[data-scopedcss-451a1a555a-505e331540]
    >  .boxel-modal__inner {
    display: flex;
  }
  [data-scopedcss-451a1a555a-505e331540] .workspace-chooser-duplicate-modal {
    border-radius: var(--boxel-border-radius-2xl);
    max-width: var(--boxel-md-container);
    height: auto;
    display: flex;
    flex-direction: column;
  }
  [data-scopedcss-451a1a555a-505e331540] .workspace-chooser-duplicate-modal > .dialog-box__header {
    display: none;
  }
  [data-scopedcss-451a1a555a-505e331540] .workspace-chooser-duplicate-modal > .dialog-box__content {
    padding: var(--boxel-sp-lg) var(--boxel-sp-xl);
    overflow: visible;
    height: auto;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
  }
  [data-scopedcss-451a1a555a-505e331540] .workspace-chooser-duplicate-modal > .dialog-box__content > * + * {
    margin-top: 0;
  }
  [data-scopedcss-451a1a555a-505e331540] .workspace-chooser-duplicate-modal > .dialog-box__footer {
    height: auto;
    flex: none;
    padding: 0 var(--boxel-sp-xl) var(--boxel-sp-xl);
    border-top: none;
  }
  .duplicate-modal__header[data-scopedcss-451a1a555a-505e331540] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
  }
  .duplicate-modal__icon[data-scopedcss-451a1a555a-505e331540] {
    color: var(--boxel-dark);
    flex-shrink: 0;
  }
  .duplicate-modal__title[data-scopedcss-451a1a555a-505e331540] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--boxel-dark);
    margin: 0;
  }
  .duplicate-modal__workspace-card[data-scopedcss-451a1a555a-505e331540] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    background: var(--boxel-light-100);
    border-radius: var(--boxel-border-radius-lg);
    padding: var(--boxel-sp);
    min-height: 5.125rem;
  }
  .duplicate-modal__realm-icon-wrapper[data-scopedcss-451a1a555a-505e331540] {
    position: relative;
    flex-shrink: 0;
    border-radius: calc(
      var(--boxel-border-radius-xs) + var(--boxel-border-radius-sm)
    );
    display: flex;
  }
  .duplicate-modal__realm-icon-wrapper[data-scopedcss-451a1a555a-505e331540]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--boxel-light-50);
    z-index: 1;
    pointer-events: none;
  }
  .duplicate-modal__realm-icon[data-scopedcss-451a1a555a-505e331540] {
    --boxel-realm-icon-size: 2.625rem;
    --boxel-realm-icon-border-radius: calc(
      var(--boxel-border-radius-xs) + 0.375rem
    );
    --boxel-realm-icon-background-color: var(--boxel-light);
  }
  .duplicate-modal__workspace-info[data-scopedcss-451a1a555a-505e331540] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-4xs);
  }
  .duplicate-modal__workspace-name[data-scopedcss-451a1a555a-505e331540] {
    font-size: var(--boxel-font-size-sm);
    font-weight: 700;
    color: var(--boxel-dark);
    overflow-wrap: break-word;
  }
  .duplicate-modal__info-box[data-scopedcss-451a1a555a-505e331540] {
    background: var(--boxel-light-100);
    border-radius: var(--boxel-border-radius-lg);
    padding: var(--boxel-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-sm);
  }
  .duplicate-modal__info-text[data-scopedcss-451a1a555a-505e331540] {
    margin: 0;
    font-size: var(--boxel-font-size-sm);
    font-weight: 400;
    color: var(--boxel-dark);
  }
  .duplicate-modal__error[data-scopedcss-451a1a555a-505e331540] {
    color: var(--boxel-danger);
    font-size: var(--boxel-font-size-sm);
    font-weight: 600;
    margin: 0;
  }
  .duplicate-modal__footer[data-scopedcss-451a1a555a-505e331540] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--boxel-sp-xs);
    width: 100%;
  }
  .duplicate-modal__actions[data-scopedcss-451a1a555a-505e331540] {
    display: flex;
    gap: var(--boxel-sp-sm);
    align-items: center;
  }
  .duplicate-modal__progress[data-scopedcss-451a1a555a-505e331540] {
    font-size: var(--boxel-font-size-sm);
    font-weight: 600;
    color: var(--boxel-dark);
  }

  .workspace-card[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    flex-direction: column;
    width: var(--workspace-chooser-card-width);
    position: relative;
    cursor: pointer;
    --item-container-border-color: transparent;
    --item-container-border-hover-color: transparent;
  }
  .workspace-card[data-scopedcss-0cbeb4d62f-61839ac69a]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--workspace-chooser-tile-width);
    height: 10.375rem;
    box-sizing: border-box;
    border-radius: var(--boxel-border-radius-xl);
    border: 1px solid rgba(255 255 255 / 25%);
    pointer-events: none;
    z-index: 20;
  }
  .workspace-card.is-enlarged[data-scopedcss-0cbeb4d62f-61839ac69a] .workspace {
    width: var(
      --favorite-tile-width,
      var(--workspace-chooser-enlarged-tile-width)
    );
    min-width: var(
      --favorite-tile-width,
      var(--workspace-chooser-enlarged-tile-width)
    );
  }
  .workspace-card.is-enlarged[data-scopedcss-0cbeb4d62f-61839ac69a]::after {
    width: var(
      --favorite-tile-width,
      var(--workspace-chooser-enlarged-tile-width)
    );
  }
  .workspace-card[data-scopedcss-0cbeb4d62f-61839ac69a]:hover::after {
    border-color: rgba(255 255 255 / 50%);
  }
  /* The keyboard-navigation selection ring. Declared after the :hover
     rule so a selected tile keeps its ring while the pointer is over
     it. */
  .workspace-card.is-selected[data-scopedcss-0cbeb4d62f-61839ac69a]::after {
    border-color: var(--boxel-highlight);
    box-shadow: 0 0 0 1px var(--boxel-highlight);
  }
  .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    width: var(--boxel-button-xs);
    height: var(--boxel-button-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--boxel-light);
    --icon-color: var(--boxel-light);
    opacity: 0;
    border-radius: var(--boxel-border-radius-sm);
    transition:
      opacity 0.15s ease,
      background 0.15s ease;
  }
  /* Reveal the tile's controls when the card is hovered or has keyboard
     focus anywhere within it, so a keyboard user tabbing onto the card
     sees the star the same way a pointer user does on hover — not only
     when the star itself is the focused tab stop. */
  .workspace-card:hover .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a],
  .workspace-card:has(:focus-visible) .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a] {
    opacity: 1;
    background: var(--boxel-dark-40);
    backdrop-filter: blur(6px);
  }
  .workspace-card:hover .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:hover {
    background: var(--boxel-highlight);
    color: var(--boxel-dark);
    --icon-color: var(--boxel-dark);
  }
  .tile-favorite-btn.is-favorited[data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-highlight);
    --icon-color: var(--boxel-highlight);
    opacity: 1;
    background: var(--boxel-dark-40);
    backdrop-filter: blur(6px);
  }
  /* Draw the focus ring on the wrapper, whose overflow hidden would
     otherwise clip the inner button's own outline. */
  .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:has(:focus-visible) {
    outline: var(--boxel-outline);
    outline-offset: -1px;
  }
  /* Tooltip wraps its trigger in a `width: fit-content` div. Stretch that
     wrapper (and the button inside it) to fill the star's box so the whole
     box stays the hover target, rather than only the glyph. */
  .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a] >  .trigger,
  .tile-favorite-btn[data-scopedcss-0cbeb4d62f-61839ac69a] button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    color: var(--boxel-light);
    border-radius: var(--boxel-border-radius-sm);
    width: var(--boxel-button-xs);
    height: var(--boxel-button-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transition:
      opacity 0.15s ease,
      background 0.15s ease;
    --boxel-icon-button-width: var(--boxel-button-xs);
    --boxel-icon-button-height: var(--boxel-button-xs);
  }
  .workspace-card:hover .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a],
  .workspace-card:has(:focus-visible) .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a] {
    opacity: 1;
    background: var(--boxel-dark-40);
    backdrop-filter: blur(6px);
  }
  .workspace-card:hover .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:hover {
    background: var(--boxel-highlight);
    color: var(--boxel-dark);
    --icon-color: var(--boxel-dark);
  }
  /* Keyboard focus also needs the standard focus ring every other control
     gets. The inner trigger button's own outline is clipped by this
     wrapper's overflow hidden, so draw the ring on the wrapper instead:
     an element's own outline is not clipped by its own overflow. */
  .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:has(:focus-visible) {
    outline: var(--boxel-outline);
    outline-offset: -1px;
  }
  .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:has([aria-expanded='true']) {
    opacity: 1;
    background: var(--boxel-highlight);
    color: var(--boxel-highlight-foreground);
  }
  /* Outranks the hover and keyboard-focus reveal rules above. */
  .workspace-card:hover .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:has([aria-expanded='true']),
  .workspace-card:has(:focus-visible)
    .tile-menu-btn[data-scopedcss-0cbeb4d62f-61839ac69a]:has([aria-expanded='true']) {
    background: var(--boxel-highlight);
    color: var(--boxel-highlight-foreground);
  }
  /* Hosted + visibility indicators for the enlarged favorite tile,
     combined into a single pill to the right of the favorite star,
     matching its height. Persistently visible (not hover-gated) since
     it's informational, same as the favorited star. */
  .tile-status-bar[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: 0.5rem;
    left: calc(0.5rem + var(--boxel-button-xs) + var(--boxel-sp-3xs));
    z-index: 3;
    /* The bar overlays the tile's own open-workspace button. Let clicks on
       its inert areas fall through to that button (rather than dying on
       this strip); the tooltip triggers below re-enable pointer events for
       themselves so hovering the icons still surfaces their tooltips. */
    pointer-events: none;
    box-sizing: border-box;
    height: var(--boxel-button-xs);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-3xs);
    padding: 0 var(--boxel-sp-2xs);
    border-radius: var(--boxel-border-radius-sm);
    background: var(--boxel-dark-40);
    backdrop-filter: blur(6px);
    color: var(--boxel-light);
  }
  .tile-status-icon[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    align-items: center;
    color: var(--boxel-highlight);
    /* Re-enable pointer events so this icon's tooltip still opens on hover
       (see `.tile-status-bar { pointer-events: none }`). */
    pointer-events: auto;
  }
  .tile-status-visibility[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-6xs);
    --icon-color: var(--boxel-light);
    /* Re-enable pointer events for this tooltip trigger (see above). */
    pointer-events: auto;
  }
  .tile-status-label[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-2xs);
    text-transform: capitalize;
    letter-spacing: var(--boxel-lsp);
    margin-left: 3px;
  }
  .tile-icon[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* The background image lives on its own layer (rather than directly
     on .tile-icon) so it can be scaled on hover without also zooming
     the icon/name/metadata content stacked on top of it. */
  .tile-icon[data-scopedcss-0cbeb4d62f-61839ac69a]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--boxel-500);
    background-image: var(--workspace-background-image-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.4s ease-out;
    z-index: 0;
  }
  .workspace-card.is-enlarged:hover .tile-icon[data-scopedcss-0cbeb4d62f-61839ac69a]::before {
    transform: scale(1.15);
  }
  .realm-icon-wrapper[data-scopedcss-0cbeb4d62f-61839ac69a] {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border-radius: calc(
      var(--boxel-border-radius-xs) + var(--boxel-border-radius-sm)
    );
    display: flex;
    box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
  }
  .realm-icon-wrapper[data-scopedcss-0cbeb4d62f-61839ac69a]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255 255 255 / 50%);
    z-index: 1;
    pointer-events: none;
  }
  .workspace-realm-icon[data-scopedcss-0cbeb4d62f-61839ac69a] {
    --boxel-realm-icon-size: 2.625rem;
    --boxel-realm-icon-border-radius: calc(
      var(--boxel-border-radius-xs) + 6px
    );
    --boxel-realm-icon-background-color: var(--boxel-light);
  }
  .info[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--boxel-sp-xs);
    gap: var(--boxel-sp-5xs);
    max-width: var(--workspace-chooser-tile-width);
  }
  .reindex-error[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--workspace-chooser-tile-width);
    box-sizing: border-box;
    z-index: 21;
    display: flex;
    align-items: flex-start;
    gap: var(--boxel-sp-5xs);
    padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
    border-radius: var(--boxel-border-radius-xl)
      var(--boxel-border-radius-xl) 0 0;
    background-color: var(--boxel-danger);
    color: var(--boxel-light);
    font: 600 var(--boxel-font-xs);
  }
  .reindex-error__message[data-scopedcss-0cbeb4d62f-61839ac69a] {
    flex: 1;
    overflow-wrap: anywhere;
    /* Cap a long server error at a few lines so the banner never grows to
    cover the whole tile; the full text stays available via the title. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .reindex-error__dismiss[data-scopedcss-0cbeb4d62f-61839ac69a] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2px;
    border: none;
    background: transparent;
    color: inherit;
    --icon-color: currentColor;
    cursor: pointer;
    border-radius: var(--boxel-border-radius-xs);
  }
  .reindex-error__dismiss[data-scopedcss-0cbeb4d62f-61839ac69a]:hover {
    background: rgba(255 255 255 / 25%);
  }
  .info > span[data-scopedcss-0cbeb4d62f-61839ac69a] {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-wrap: nowrap;
    text-align: center;
    letter-spacing: var(--boxel-lsp);
  }
  .info > .name[data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-light);
    font: 400 var(--boxel-font-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .visibility[data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-400);
    font: 400 var(--boxel-font-xs);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--boxel-sp-5xs);
    --icon-color: var(--boxel-400);
  }
  .visibility[data-scopedcss-0cbeb4d62f-61839ac69a] [data-tooltip-trigger] {
    display: inline-flex;
    align-items: center;
  }
  .visibility-label[data-scopedcss-0cbeb4d62f-61839ac69a] {
    margin-left: var(--boxel-sp-6xs);
  }
  .hosted-icon[data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-highlight);
    display: flex;
    align-items: center;
    margin-right: var(--boxel-sp-6xs);
  }
  /* Sits between the tile's background image and its text/icon
     content, darkening the image so the name and metadata stay
     readable regardless of the underlying artwork. */
  .tile-scrim[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    inset: 0;
    background: rgba(0 0 0 / 50%);
    z-index: 1;
    pointer-events: none;
  }
  /* The icon + name + metadata group, vertically centered as a unit
     within the tile. padding-top reserves the zone occupied by the
     favorite star and status bar (see .tile-favorite-btn/.tile-status-bar
     above) so the centered group never sits under them; padding-bottom
     stays 0 so centering is computed against the space below that zone,
     not the full tile height. Nudged up 10px from that centered
     position per design feedback. Stays visible even when the
     host-trigger bar is hovered/open (see .host-trigger below) — only
     the .info block used to need to fade for that, and this group
     replaced it. */
  .tile-content[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    padding: calc(0.5rem + var(--boxel-button-xs) + var(--boxel-sp-3xs))
      var(--boxel-sp) 0;
    transform: translateY(-10px);
    z-index: 2;
  }
  .tile-text[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    min-width: 0;
    flex: 1;
  }
  .tile-name[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font: 400 var(--boxel-font-md);
    color: var(--boxel-light);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  /* Height is fixed rather than derived from content: the counts are
     fetched after the tile renders (favorites only), so a row that grew
     when they landed would shift the tile's centered name. 1lh at the
     stats' own font-size matches a populated row exactly. On a tile too
     narrow for every stat, the ones that don't fit wrap onto a second
     line that's clipped, so a stat is dropped whole, never cut off. */
  .tile-metadata-row[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--boxel-sp-sm);
    height: 1lh;
    overflow: hidden;
    font-size: 0.75rem;
  }
  .tile-stat[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    white-space: nowrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--boxel-light);
    letter-spacing: var(--boxel-lsp);
    --icon-color: var(--boxel-450);
  }
  .tile-stat-label[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-weight: 400;
  }
  .tile-stat-number[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-weight: 600;
  }
  .realm-url[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-xs);
    color: var(--boxel-500);
    max-width: 8.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info--hidden[data-scopedcss-0cbeb4d62f-61839ac69a] {
    visibility: hidden;
  }
  .host-trigger[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: calc(10.375rem - 2.25rem);
    left: 0;
    width: var(--workspace-chooser-tile-width);
    height: 2.25rem;
    background: var(--boxel-dark-40);
    backdrop-filter: blur(6px);
    border: none;
    border-radius: 0 0 var(--boxel-border-radius-xl)
      var(--boxel-border-radius-xl);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    padding: 0 var(--boxel-sp-xs) 0 var(--boxel-sp-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 7;
    overflow: hidden;
  }
  .workspace-card:hover .host-trigger[data-scopedcss-0cbeb4d62f-61839ac69a],
  .workspace-card.is-open .host-trigger[data-scopedcss-0cbeb4d62f-61839ac69a] {
    opacity: 1;
    transition: none;
  }
  .workspace-card.is-enlarged .host-trigger[data-scopedcss-0cbeb4d62f-61839ac69a] {
    width: var(
      --favorite-tile-width,
      var(--workspace-chooser-enlarged-tile-width)
    );
  }
  .trigger-house[data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-highlight);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .trigger-url[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-2xs);
    color: var(--boxel-light);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
  }
  .trigger-chevron[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-xs);
    color: var(--boxel-light);
    flex-shrink: 0;
  }
  .host-dropdown[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: 10.375rem;
    right: 0;
    width: var(--boxel-xxs-container);
    background: var(--boxel-light);
    border-radius: var(--boxel-border-radius);
    box-shadow: 0 4px 16px rgba(0 0 0 / 25%);
    z-index: 10;
    padding: var(--boxel-sp-xs) 0 var(--boxel-sp-2xs);
    display: flex;
    flex-direction: column;
  }
  .dropdown-header[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-2xs);
    font-weight: 600;
    color: var(--boxel-550);
    padding: 0 var(--boxel-sp-sm) 0.5rem;
    border-bottom: 1px solid rgba(0 0 0 / 8%);
    display: block;
  }
  .dropdown-list[data-scopedcss-0cbeb4d62f-61839ac69a] {
    list-style: none;
    margin: 0;
    padding: var(--boxel-sp-4xs) var(--boxel-sp-2xs);
  }
  .dropdown-list li[data-scopedcss-0cbeb4d62f-61839ac69a] {
    margin: 0;
    padding: 0;
  }
  .dropdown-option[data-scopedcss-0cbeb4d62f-61839ac69a] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--boxel-sp-2xs) 0.5rem;
    background: none;
    border: none;
    border-radius: var(--boxel-border-radius-sm);
    cursor: pointer;
    text-align: left;
  }
  .dropdown-option[data-scopedcss-0cbeb4d62f-61839ac69a]:hover {
    background: rgba(0 0 0 / 6%);
  }
  .option-url[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-xs);
    color: var(--boxel-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-menu[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: absolute;
    top: var(--boxel-sp-xs);
    right: var(--boxel-sp-xs);
    z-index: 1;
  }
  .workspace-menu__trigger[data-scopedcss-0cbeb4d62f-61839ac69a] {
    --boxel-icon-button-width: 2.65rem;
    --boxel-icon-button-height: 1.85rem;
    --boxel-icon-button-padding: 0 0.38rem;
    color: var(--boxel-light-100);
    background: rgb(24 25 32 / 86%);
    border: 1px solid rgb(255 255 255 / 62%);
    border-radius: 6px;
    box-shadow: 0 6px 14px rgb(0 0 0 / 22%);
    backdrop-filter: blur(10px);
  }
  .workspace-menu__trigger[data-scopedcss-0cbeb4d62f-61839ac69a] svg {
    width: 1.7rem;
    height: 1.7rem;
  }
  .workspace-menu__trigger[data-scopedcss-0cbeb4d62f-61839ac69a]:hover,
  .workspace-menu__trigger[aria-expanded='true'][data-scopedcss-0cbeb4d62f-61839ac69a] {
    color: var(--boxel-dark);
    background: var(--boxel-highlight);
    border-color: rgb(255 255 255 / 78%);
  }
  .workspace-menu__content {
    min-width: 11rem;
  }
  .workspace-menu__list[data-scopedcss-0cbeb4d62f-61839ac69a] {
    --boxel-menu-item-content-padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
  }
  .workspace-menu-dropdown {
    --boxel-dropdown-border-color: rgba(0 0 0 / 50%);
  }
  .workspace-menu-footer[data-scopedcss-0cbeb4d62f-61839ac69a] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
  }
  .workspace-menu-footer[data-scopedcss-0cbeb4d62f-61839ac69a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--boxel-light-25);
    opacity: 0.75;
  }
  /* The last menu item normally rounds its bottom corners to match the
     panel when hovered, since it's usually flush with the panel's
     bottom edge. This dropdown has the Updated/Created footer below
     it instead, so that rounding now reads as a mismatched cutout —
     square it off here. */
  [data-scopedcss-0cbeb4d62f-61839ac69a] .boxel-menu__item:last-child:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  [data-scopedcss-0cbeb4d62f-61839ac69a] [data-menu-item-id='realm-settings'] svg {
    width: 17px;
    height: 17px;
  }
  .workspace-menu-footer__row[data-scopedcss-0cbeb4d62f-61839ac69a] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-6xs);
  }
  .workspace-menu-footer__label[data-scopedcss-0cbeb4d62f-61839ac69a],
  .workspace-menu-footer__value[data-scopedcss-0cbeb4d62f-61839ac69a] {
    font-size: var(--boxel-font-size-2xs);
    color: var(--boxel-450);
  }

  /* Metrics in design pixels, before the zoom. */
  .pinned-cards[data-scopedcss-8c8c5d348c-522ee91838] {
    --_pinned-cards-gap: 1.125rem;
    --_pinned-cards-radius: 1.125rem;
    position: relative;
    min-height: 0;
    /* The space between cards is wallpaper, which opens the workspace;
       only the cards take clicks. */
    pointer-events: none;
  }
  /* Everything inside is in design pixels; one zoom fits it to the desk. */
  .collage[data-scopedcss-8c8c5d348c-522ee91838] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--_pinned-cards-gap);
    width: var(--page-width);
    height: var(--page-height);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: scale(var(--page-zoom));
    transform-origin: 0 0;
  }
  /* Each count gets an arrangement with a lead card, so the desk reads
     as a collage rather than a grid of equals. */
  .pins-2[data-scopedcss-8c8c5d348c-522ee91838] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .pins-3[data-scopedcss-8c8c5d348c-522ee91838],
  .pins-4[data-scopedcss-8c8c5d348c-522ee91838] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .pins-4[data-scopedcss-8c8c5d348c-522ee91838] {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .pins-3 > .pin[data-scopedcss-8c8c5d348c-522ee91838]:first-child,
  .pins-4 > .pin[data-scopedcss-8c8c5d348c-522ee91838]:first-child {
    grid-row: 1 / span 2;
  }
  .pins-4 > .pin[data-scopedcss-8c8c5d348c-522ee91838]:nth-child(2) {
    grid-column: 2 / span 2;
  }
  .pin[data-scopedcss-8c8c5d348c-522ee91838] {
    min-width: 0;
    min-height: 0;
  }
  .pin-button[data-scopedcss-8c8c5d348c-522ee91838] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--_pinned-cards-radius);
    overflow: hidden;
    /* Clear until the card paints its own face, with a faint edge
       holding its place, so a loading pin doesn't flash over the
       wallpaper. */
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--boxel-light-25);
    pointer-events: auto;
    transition: transform var(--boxel-transition);
  }
  .pin-button[data-scopedcss-8c8c5d348c-522ee91838]:hover {
    transform: translateY(-0.25rem);
  }
  /* Drawn in design pixels: the zoom brings it to about the dashboard
     ring's width. */
  .pin-button[data-scopedcss-8c8c5d348c-522ee91838]:focus-visible {
    outline: 4px solid var(--boxel-highlight);
    outline-offset: 4px;
  }
  /* The frame owns the corner radius, so every card keeps the same one
     whatever its own template paints. Fitted cards size themselves to
     this box through their container queries. */
  .pin-render[data-scopedcss-8c8c5d348c-522ee91838] {
    position: absolute;
    inset: 0;
    container-name: fitted-card;
    container-type: size;
  }
  .pin-card[data-scopedcss-8c8c5d348c-522ee91838] {
    width: 100%;
    height: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .pin-button[data-scopedcss-8c8c5d348c-522ee91838] {
      transition: none;
    }
    .pin-button[data-scopedcss-8c8c5d348c-522ee91838]:hover {
      transform: none;
    }
  }

  .workspace[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-control-size: var(--boxel-button-xs);
    --_workspace-control-radius: var(--boxel-border-radius-sm);
    --_workspace-control-inset: 0.5rem;
    --_workspace-glass: var(--boxel-dark-40);
    --_workspace-glass-blur: blur(0.375rem);
    --_workspace-chin-height: 2.25rem;
    --_workspace-chip-height: 1.25rem;
    --_workspace-icon-size: 2.625rem;
    --_workspace-desk-height: 17rem;
    --_workspace-desk-radius: 1.5rem;
    --_workspace-row-tint-hover: color-mix(
      in oklch,
      var(--boxel-light) 9%,
      transparent
    );

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--boxel-light);
  }
  .workspace.is-loading[data-scopedcss-75f737c827-9e085c5076] {
    align-items: center;
    justify-content: center;
    height: var(--dashboard-tile-height);
    border-radius: var(--dashboard-tile-radius);
    background-color: var(--boxel-dark-50);
  }
  .workspace.is-loading.is-desk[data-scopedcss-75f737c827-9e085c5076] {
    height: var(--_workspace-desk-height);
    border-radius: var(--_workspace-desk-radius);
  }
  /* Transparent rather than none, so forced-colors mode, which drops
     the ring's box-shadow, still draws a focus outline. */
  .workspace.is-loading[data-scopedcss-75f737c827-9e085c5076]:focus {
    outline: 2px solid transparent;
  }
  .workspace.is-loading.is-selected[data-scopedcss-75f737c827-9e085c5076],
  .workspace.is-loading[data-scopedcss-75f737c827-9e085c5076]:focus-visible {
    box-shadow: var(--dashboard-ring);
  }

  /* The wallpaper is its own layer, so a hover can reveal or scale it
     without moving what sits on top. */
  .wallpaper[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .wallpaper[data-scopedcss-75f737c827-9e085c5076]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--boxel-500);
    background-image: var(--workspace-background-image-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity var(--boxel-transition);
  }
  .realm-icon-wrapper[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    border-radius: var(--boxel-border-radius-sm);
    box-shadow: 0 0.125rem 0.375rem var(--boxel-dark-40);
  }
  .realm-icon-wrapper[data-scopedcss-75f737c827-9e085c5076]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--boxel-light-50);
    pointer-events: none;
  }
  .workspace-realm-icon[data-scopedcss-75f737c827-9e085c5076] {
    --boxel-realm-icon-size: var(--_workspace-icon-size);
    --boxel-realm-icon-border-radius: var(--boxel-border-radius-sm);
    --boxel-realm-icon-background-color: var(--boxel-light);
  }

  /* The star and the menu: glass chips over the wallpaper, shown on
     hover, on keyboard focus inside the workspace, and under the
     cursor's ring. A favorited star stays. The button fills its chip. */
  .favorite-btn[data-scopedcss-75f737c827-9e085c5076],
  .menu-btn[data-scopedcss-75f737c827-9e085c5076] {
    --pretui-button-h: var(--_workspace-control-size);
    --pretui-button-radius: var(--_workspace-control-radius);
    position: absolute;
    top: var(--_workspace-control-inset);
    z-index: 3;
    display: flex;
    width: var(--_workspace-control-size);
    height: var(--_workspace-control-size);
    border-radius: var(--_workspace-control-radius);
    opacity: 0;
    transition:
      opacity var(--boxel-transition),
      background-color var(--boxel-transition);
  }
  .favorite-btn[data-scopedcss-75f737c827-9e085c5076] {
    left: var(--_workspace-control-inset);
  }
  .menu-btn[data-scopedcss-75f737c827-9e085c5076] {
    right: var(--_workspace-control-inset);
  }
  .workspace[data-scopedcss-75f737c827-9e085c5076]:hover :is(.favorite-btn, .menu-btn),
  .workspace.is-selected[data-scopedcss-75f737c827-9e085c5076] :is(.favorite-btn, .menu-btn),
  .workspace[data-scopedcss-75f737c827-9e085c5076]:has(:focus-visible:not([data-nav-index]))
    :is(.favorite-btn, .menu-btn),
  .menu-btn[data-scopedcss-75f737c827-9e085c5076]:has([aria-expanded='true']),
  .favorite-btn.is-favorited[data-scopedcss-75f737c827-9e085c5076] {
    opacity: 1;
    background-color: var(--_workspace-glass);
    backdrop-filter: var(--_workspace-glass-blur);
  }
  /* The icons are colored here: Pret UI's neutral button sets its own
     ink on the button, so a value inherited from the chip wouldn't
     reach them. A favorited or hovered star takes the primary color. */
  .control-icon[data-scopedcss-75f737c827-9e085c5076] {
    color: var(--boxel-light);
  }
  .favorite-btn.is-favorited .control-icon[data-scopedcss-75f737c827-9e085c5076],
  .workspace .favorite-btn:hover .control-icon[data-scopedcss-75f737c827-9e085c5076] {
    color: var(--primary);
  }

  /* Who can see the workspace, as a tinted chip so Private, Shared and
     Public read apart at a glance. */
  .visibility-chip[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-chip-color: var(--boxel-light-60);
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--boxel-sp-5xs);
    height: var(--_workspace-chip-height);
    padding: 0 var(--boxel-sp-xs) 0 var(--boxel-sp-4xs);
    border: 1px solid
      color-mix(in oklch, var(--_workspace-chip-color) 30%, transparent);
    border-radius: var(--boxel-border-radius);
    background-color: color-mix(
      in oklch,
      var(--_workspace-chip-color) 12%,
      transparent
    );
    color: var(--_workspace-chip-color);
    font: 600 var(--boxel-font-xs);
    text-transform: capitalize;
    white-space: nowrap;
  }
  .visibility-chip.is-shared[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-chip-color: var(--boxel-cyan);
  }
  .visibility-chip.is-public[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-chip-color: var(--boxel-highlight);
  }

  /* Desk. */
  .workspace.is-desk[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-control-size: 2.125rem;
    --_workspace-control-inset: var(--boxel-sp-sm);
    --_workspace-glass: color-mix(
      in oklch,
      var(--boxel-800) 60%,
      transparent
    );
    --_workspace-glass-blur: blur(0.5rem);
    --_workspace-control-radius: var(--boxel-border-radius);
    gap: var(--boxel-sp-xs);
  }
  .workspace.is-desk[data-scopedcss-75f737c827-9e085c5076] :is(.favorite-btn, .menu-btn) {
    opacity: 1;
    background-color: var(--_workspace-glass);
    backdrop-filter: var(--_workspace-glass-blur);
  }
  .desk-surface[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    height: var(--_workspace-desk-height);
    padding: var(--_workspace-control-inset);
    overflow: hidden;
    border-radius: var(--_workspace-desk-radius);
    background-color: var(--boxel-500);
    background-image: var(--workspace-background-image-url);
    background-position: center;
    background-size: cover;
    box-shadow:
      0 0.625rem 1.5rem var(--boxel-dark-10),
      inset 0 0 0 1px var(--boxel-light-25);
    transition: box-shadow var(--boxel-transition);
  }
  .workspace.is-desk:hover .desk-surface[data-scopedcss-75f737c827-9e085c5076] {
    box-shadow:
      0 0.875rem 2rem var(--boxel-dark-30),
      inset 0 0 0 1px var(--boxel-light-50);
  }
  /* The ring shows under the keyboard cursor and on any keyboard focus,
     as when a modal hands focus back. */
  .workspace.is-desk.is-selected .desk-surface[data-scopedcss-75f737c827-9e085c5076],
  .workspace.is-desk:has(.desk-pill:focus-visible) .desk-surface[data-scopedcss-75f737c827-9e085c5076] {
    box-shadow:
      var(--dashboard-ring),
      0 0.625rem 1.5rem var(--boxel-dark-10);
  }
  /* The bare wallpaper opens the workspace for a pointer; the keyboard
     has the name pill, so this stays out of the tab order. */
  .desk-hit[data-scopedcss-75f737c827-9e085c5076] {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }
  .desk-top[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    min-height: var(--_workspace-control-size);
    /* Room for the star and the menu, which sit over the surface. */
    padding-inline: calc(
      var(--_workspace-control-size) + var(--boxel-sp-4xs)
    );
    pointer-events: none;
  }
  .desk-pill-tooltip[data-scopedcss-75f737c827-9e085c5076] {
    min-width: 0;
  }
  .desk-pill[data-scopedcss-75f737c827-9e085c5076] {
    display: inline-flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    max-width: 100%;
    height: var(--_workspace-control-size);
    padding: var(--boxel-sp-5xs) var(--boxel-sp-sm) var(--boxel-sp-5xs)
      var(--boxel-sp-5xs);
    border: 0;
    border-radius: var(--boxel-border-radius-lg);
    background-color: var(--_workspace-glass);
    backdrop-filter: var(--_workspace-glass-blur);
    color: var(--boxel-light);
    font: 600 var(--boxel-font);
    pointer-events: auto;
  }
  .desk-pill[data-scopedcss-75f737c827-9e085c5076]:hover {
    background-color: color-mix(
      in oklch,
      var(--boxel-800) 78%,
      transparent
    );
  }
  /* The surface draws the ring; the transparent outline stands in for
     it in forced-colors mode, which drops box-shadows. */
  .desk-pill[data-scopedcss-75f737c827-9e085c5076]:focus-visible {
    outline: 2px solid transparent;
  }
  .desk-pill-icon[data-scopedcss-75f737c827-9e085c5076] {
    --boxel-realm-icon-size: 1.625rem;
    --boxel-realm-icon-border-radius: var(--boxel-border-radius-sm);
    --boxel-realm-icon-background-color: var(--boxel-light);
    flex: none;
  }
  .desk-pill-name[data-scopedcss-75f737c827-9e085c5076] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desk-live[data-scopedcss-75f737c827-9e085c5076] {
    --hosted-pill-background: var(--_workspace-glass);
    margin-left: auto;
    backdrop-filter: var(--_workspace-glass-blur);
  }
  /* Behind pins the wallpaper is dimmed, not blurred: it keeps the
     workspace's colors while the cards carry the content. It follows
     the drawn collage, not the link count, so a desk whose pins have
     no rendering yet keeps its wallpaper. A hover brings a little of
     it back. */
  .desk-surface[data-scopedcss-75f737c827-9e085c5076]:has([data-pinned-collage])::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--boxel-dark-50);
    transition: background-color var(--boxel-transition);
  }
  .workspace.is-desk:hover
    .desk-surface[data-scopedcss-75f737c827-9e085c5076]:has([data-pinned-collage])::before {
    background-color: var(--boxel-dark-40);
  }
  .desk-pins[data-scopedcss-75f737c827-9e085c5076] {
    flex: 1;
  }
  .desk-caption[data-scopedcss-75f737c827-9e085c5076] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    padding-inline: var(--boxel-sp-4xs);
    color: var(--muted-foreground);
    font: 400 var(--boxel-font-sm);
  }
  .desk-caption-line[data-scopedcss-75f737c827-9e085c5076] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--boxel-sp-5xs) var(--boxel-sp-sm);
    min-height: var(--_workspace-chip-height);
  }
  .desk-stats[data-scopedcss-75f737c827-9e085c5076] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-sm);
    min-height: 1lh;
  }
  .desk-stat[data-scopedcss-75f737c827-9e085c5076] {
    display: inline-flex;
    gap: var(--boxel-sp-5xs);
  }
  /* Counts arrive late and change on re-index; fixed-width digits keep
     the caption from shifting. */
  .desk-stat-number[data-scopedcss-75f737c827-9e085c5076] {
    color: var(--foreground);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .desk-host-line[data-scopedcss-75f737c827-9e085c5076] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-4xs);
    min-width: 0;
    color: var(--foreground);
    white-space: nowrap;
  }
  .desk-host-dot[data-scopedcss-75f737c827-9e085c5076] {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: var(--boxel-lime);
  }
  /* Positioned, so its screen-reader text is clipped with it instead of
     widening the page. The address truncates; the arrow always shows. */
  .desk-host-link[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    display: inline-flex;
    gap: var(--boxel-sp-5xs);
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    text-underline-offset: 0.1875rem;
  }
  .desk-host-url[data-scopedcss-75f737c827-9e085c5076] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* As tall as a line of the caption, where a Button would be taller. */
  .desk-host-more[data-scopedcss-75f737c827-9e085c5076] {
    --pretui-button-h: 1lh;
    flex: none;
    box-sizing: border-box;
    height: 1lh;
  }

  /* Tile: the wallpaper face, its hosted chin, then the name and who can
     see it. */
  .workspace.is-tile[data-scopedcss-75f737c827-9e085c5076] {
    gap: var(--boxel-sp-xs);
  }
  /* The face's frame, and the cursor's ring when it rests here. Drawn
     over the face, whose wallpaper would cover an inset shadow. */
  .workspace.is-tile[data-scopedcss-75f737c827-9e085c5076]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    box-sizing: border-box;
    width: 100%;
    height: var(--dashboard-tile-height);
    border: 1px solid var(--boxel-light-25);
    border-radius: var(--dashboard-tile-radius);
    pointer-events: none;
  }
  .workspace.is-tile[data-scopedcss-75f737c827-9e085c5076]:hover::after {
    border-color: var(--boxel-light-50);
  }
  .workspace.is-tile.is-selected[data-scopedcss-75f737c827-9e085c5076]::after,
  .workspace.is-tile[data-scopedcss-75f737c827-9e085c5076]:has(.tile-face:focus-visible)::after {
    border-color: var(--boxel-highlight);
    box-shadow: 0 0 0 1px var(--boxel-highlight);
  }
  .host-menu[data-scopedcss-75f737c827-9e085c5076] {
    position: absolute;
    top: calc(var(--dashboard-tile-height) - var(--_workspace-chin-height));
    left: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    height: var(--_workspace-chin-height);
  }
  /* The open menu's panel is stacked with the chin, so the chin rises
     above the tile's frame, which would otherwise draw across it. */
  .workspace.is-open .host-menu[data-scopedcss-75f737c827-9e085c5076] {
    z-index: 5;
  }
  /* Pret UI's Menu has no knob to stretch its trigger's box. */
  .host-menu-wrap[data-scopedcss-75f737c827-9e085c5076],
  .host-menu[data-scopedcss-75f737c827-9e085c5076] .pretui-menu-trigger {
    width: 100%;
    height: 100%;
  }
  .host-trigger[data-scopedcss-75f737c827-9e085c5076] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    width: 100%;
    height: 100%;
    padding: 0 var(--boxel-sp-xs) 0 var(--boxel-sp-sm);
    overflow: hidden;
    border: none;
    border-radius: 0 0 var(--dashboard-tile-radius)
      var(--dashboard-tile-radius);
    background-color: var(--boxel-dark-40);
    backdrop-filter: var(--_workspace-glass-blur);
    color: var(--boxel-light);
  }
  .host-trigger[data-scopedcss-75f737c827-9e085c5076]:hover {
    background-color: var(--boxel-dark-50);
  }
  .host-trigger[data-scopedcss-75f737c827-9e085c5076]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
  /* Lime is Hosted's color in every variant. */
  .host-trigger-globe[data-scopedcss-75f737c827-9e085c5076] {
    flex-shrink: 0;
    color: var(--boxel-lime);
  }
  .host-trigger-url[data-scopedcss-75f737c827-9e085c5076] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 var(--boxel-font-xs);
  }
  .host-trigger-more[data-scopedcss-75f737c827-9e085c5076] {
    flex-shrink: 0;
    font: 600 var(--boxel-font-xs);
  }
  .info[data-scopedcss-75f737c827-9e085c5076] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp-5xs);
    min-width: 0;
  }
  /* One line under every tile, so tiles keep one height and their chips
     line up across the row. */
  .name[data-scopedcss-75f737c827-9e085c5076] {
    display: block;
    width: 100%;
    overflow: hidden;
    font: 400 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Row: a thumbnail, the name, who can see it and when it changed. */
  .workspace.is-row[data-scopedcss-75f737c827-9e085c5076] {
    --_workspace-control-inset: 0.375rem;
    --_workspace-control-step: calc(
      var(--_workspace-control-size) + var(--boxel-sp-4xs)
    );
    --_workspace-controls: 2;
    --_workspace-icon-size: 1.5rem;
    --_workspace-time-max-width: 6rem;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    gap: var(--boxel-sp-sm);
    height: var(--dashboard-row-height);
    /* The end clears the controls: the star and the menu, and on a
       hosted row the globe. */
    padding: var(--boxel-sp-xs)
      calc(
        var(--_workspace-control-inset) + var(--_workspace-controls) *
          var(--_workspace-control-step)
      )
      var(--boxel-sp-xs) 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-10);
    transition: background-color var(--boxel-transition);
  }
  .workspace.is-row[data-scopedcss-75f737c827-9e085c5076]:has(.host-menu) {
    --_workspace-controls: 3;
  }
  .workspace.is-row[data-scopedcss-75f737c827-9e085c5076]:hover {
    background-color: var(--_workspace-row-tint-hover);
  }
  /* Over the list's scrim, so a row the cursor rests on is never hidden
     under it; the Show more toggle, later in the page at the same level,
     stays on top. */
  .workspace.is-row.is-selected[data-scopedcss-75f737c827-9e085c5076],
  .workspace.is-row[data-scopedcss-75f737c827-9e085c5076]:has(.row-open:focus-visible) {
    z-index: 3;
    box-shadow: inset 0 0 0 2px var(--boxel-highlight);
  }
  /* With its site menu open, the workspace sits above its neighbors and
     the selected row, so the menu isn't drawn under them. */
  .workspace.is-open[data-scopedcss-75f737c827-9e085c5076] {
    z-index: 5;
  }
  /* A long list of wallpapers is noise at scan distance: the row shows
     the realm's mark, and its wallpaper only while hovered. */
  .row-thumb[data-scopedcss-75f737c827-9e085c5076] {
    flex: none;
    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);
  }
  .row-thumb[data-scopedcss-75f737c827-9e085c5076]::before {
    opacity: 0;
  }
  .workspace.is-row:hover .row-thumb[data-scopedcss-75f737c827-9e085c5076]::before {
    opacity: 1;
  }
  .row-icon-tooltip[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }
  .is-row .info[data-scopedcss-75f737c827-9e085c5076] {
    flex: 1;
    align-items: flex-start;
    gap: var(--boxel-sp-4xs);
  }
  .is-row .name[data-scopedcss-75f737c827-9e085c5076] {
    font-weight: 600;
    text-align: left;
  }
  /* A button ignores line-clamp, so the name truncates on one line. Its
     hit area covers the row; the controls sit above it. */
  .row-open[data-scopedcss-75f737c827-9e085c5076] {
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--boxel-light);
  }
  .row-open[data-scopedcss-75f737c827-9e085c5076]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }
  /* The row draws the ring; the transparent outline stands in for it in
     forced-colors mode, which drops box-shadows. */
  .row-open[data-scopedcss-75f737c827-9e085c5076]:focus-visible {
    outline: 2px solid transparent;
  }
  /* Under the row's hit area, so a click on it opens the workspace. */
  .updated[data-scopedcss-75f737c827-9e085c5076] {
    position: absolute;
    right: var(--boxel-sp-sm);
    bottom: var(--boxel-sp-xs);
    max-width: var(--_workspace-time-max-width);
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: var(--boxel-font-size-2xs);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The row's controls gather top-right, above the time: the menu at the
     end, the star before it and, on a hosted row, the globe before
     that. */
  .is-row .favorite-btn[data-scopedcss-75f737c827-9e085c5076] {
    left: auto;
    right: calc(
      var(--_workspace-control-inset) + var(--_workspace-control-step)
    );
  }
  .is-row .host-menu[data-scopedcss-75f737c827-9e085c5076] {
    top: var(--_workspace-control-inset);
    left: auto;
    right: calc(
      var(--_workspace-control-inset) + 2 * var(--_workspace-control-step)
    );
    width: var(--_workspace-control-size);
    height: var(--_workspace-control-size);
    opacity: 0;
    transition: opacity var(--boxel-transition);
  }
  .is-row .host-trigger[data-scopedcss-75f737c827-9e085c5076] {
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }
  .workspace.is-row:hover .host-menu[data-scopedcss-75f737c827-9e085c5076],
  .workspace.is-row.is-open .host-menu[data-scopedcss-75f737c827-9e085c5076],
  .workspace.is-row.is-selected .host-menu[data-scopedcss-75f737c827-9e085c5076],
  .is-row .host-menu[data-scopedcss-75f737c827-9e085c5076]:has(:focus-visible) {
    opacity: 1;
  }
  .is-row[data-scopedcss-75f737c827-9e085c5076] :is(.host-trigger-url, .host-trigger-more) {
    display: none;
  }

  /* Above an open site menu's chin, which sits over the face too. The
     menu's panel opens below the face, out of the alert's way. */
  .reindex-error[data-scopedcss-75f737c827-9e085c5076] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--boxel-sp-5xs);
    width: 100%;
    max-height: 100%;
    padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
    border-radius: var(--dashboard-tile-radius) var(--dashboard-tile-radius)
      0 0;
    background-color: var(--boxel-error-100);
    color: var(--boxel-light);
    font: 600 var(--boxel-font-xs);
  }
  /* Within the face, not over the name or caption beneath it. */
  .is-tile .reindex-error[data-scopedcss-75f737c827-9e085c5076] {
    max-height: var(--dashboard-tile-height);
  }
  .is-desk .reindex-error[data-scopedcss-75f737c827-9e085c5076] {
    max-height: var(--_workspace-desk-height);
  }
  /* The whole error shows; a long one scrolls inside the tile, under a
     dismiss button that stays put. Stretched, it takes the alert's
     clamped height. */
  .reindex-error-message[data-scopedcss-75f737c827-9e085c5076] {
    flex: 1;
    align-self: stretch;
    min-width: 0;
    overflow-y: auto;
    overflow-wrap: break-word;
  }
  .reindex-error-message[data-scopedcss-75f737c827-9e085c5076]:focus-visible {
    outline: 2px solid var(--ring);
  }
  .reindex-error-dismiss[data-scopedcss-75f737c827-9e085c5076] {
    flex-shrink: 0;
  }

  .menu-footer[data-scopedcss-75f737c827-9e085c5076] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    border-top: 1px solid var(--border);
  }
  .menu-footer-row[data-scopedcss-75f737c827-9e085c5076] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-6xs);
  }
  .menu-footer-label[data-scopedcss-75f737c827-9e085c5076],
  .menu-footer-value[data-scopedcss-75f737c827-9e085c5076] {
    color: var(--muted-foreground);
    font-size: var(--boxel-font-size-2xs);
  }

  @keyframes dashboard-fade-in-data-scopedcss-fdd799e0b9-68466f3ff0 {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .dashboard[data-scopedcss-fdd799e0b9-68466f3ff0] {
    /* 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: 700;
    --dashboard-section-title-font-size: var(--boxel-font-size-lg);
    --dashboard-section-hint-font-size: var(--boxel-font-size-sm);

    /* 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-68466f3ff0] {
    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-68466f3ff0] {
    --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. */
    opacity: 0;
    animation: dashboard-fade-in-data-scopedcss-fdd799e0b9-68466f3ff0 0.5s ease-in forwards;
  }
  .dashboard-page[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--boxel-sp);
  }
  /* The greeting grows to fill its line, which pushes the filter to the
     right beside it, and leaves the filter at the start once it wraps. */
  .greeting[data-scopedcss-fdd799e0b9-68466f3ff0] {
    flex: 1 1 auto;
    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-68466f3ff0] {
    --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-68466f3ff0] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xl);
  }
  .section-head[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-fdd799e0b9-68466f3ff0] {
    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-fdd799e0b9-68466f3ff0],
  .group-icon[data-scopedcss-fdd799e0b9-68466f3ff0] {
    --icon-color: var(--muted-foreground);
    color: var(--muted-foreground);
    flex-shrink: 0;
  }
  .section-hint[data-scopedcss-fdd799e0b9-68466f3ff0] {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--dashboard-section-hint-font-size);
    color: var(--muted-foreground);
  }

  /* Groups inside a section are quiet labels; the tiles are the
     headline. */
  .group[data-scopedcss-fdd799e0b9-68466f3ff0] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
  }
  .group-head[data-scopedcss-fdd799e0b9-68466f3ff0] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    margin: 0;
    font: inherit;
  }
  .group-title[data-scopedcss-fdd799e0b9-68466f3ff0],
  .group-count[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    color: var(--subtle-foreground);
  }
  .group-count[data-scopedcss-fdd799e0b9-68466f3ff0]::before {
    content: '· ' / '';
  }
  /* Inside the fold, so the space collapses with it. */
  .archived-content[data-scopedcss-fdd799e0b9-68466f3ff0] {
    padding-top: var(--boxel-sp-lg);
  }
  .group-empty[data-scopedcss-fdd799e0b9-68466f3ff0] {
    margin: 0;
    color: var(--muted-foreground);
    font: 400 var(--boxel-font-sm);
  }
  .catalog-list[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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;
  }
  /* As many desks per row as fit at their minimum width, spanning the
     section like the lists below them. */
  .desk-list[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }
  .recent-list[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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;
  }
  .new-workspace-pending[data-scopedcss-fdd799e0b9-68466f3ff0] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--dashboard-tile-height);
    border-radius: var(--dashboard-tile-radius);
    background-color: var(--boxel-dark-50);
  }
  .row-list[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    position: relative;
  }
  .list-scrim[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    --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-68466f3ff0] {
    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-68466f3ff0]:not(:has(.unreachable-notice)) {
    position: absolute;
  }
  .unreachable-notice[data-scopedcss-fdd799e0b9-68466f3ff0] {
    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-68466f3ff0] {
    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-68466f3ff0] {
      --dashboard-gutter: 2.5rem;
    }
  }
  @container dashboard (max-width: 48rem) {
    .dashboard-scroller[data-scopedcss-fdd799e0b9-68466f3ff0] {
      --dashboard-gutter: 1.5rem;
    }
  }
  @container dashboard (max-width: 40rem) {
    .dashboard-scroller[data-scopedcss-fdd799e0b9-68466f3ff0] {
      --dashboard-gutter: 1rem;
    }
  }
  /* Compact, where the section rail stays as icons, the page tightens
     too: less room above and between its parts, 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-68466f3ff0] {
    --dashboard-page-padding-top: calc(
      var(--dashboard-top-bar-clearance) + var(--boxel-sp-xs)
    );
    --dashboard-band-height: var(--dashboard-page-padding-top);
  }
  .is-compact .dashboard-page[data-scopedcss-fdd799e0b9-68466f3ff0] {
    gap: var(--boxel-sp-2xl);
  }
  .is-compact .page-head[data-scopedcss-fdd799e0b9-68466f3ff0] {
    gap: var(--boxel-sp-xs);
  }
  .is-compact .greeting[data-scopedcss-fdd799e0b9-68466f3ff0] {
    --dashboard-greeting-font-size: var(--boxel-font-size-lg);
    --dashboard-greeting-font-weight: 400;
  }
  /* One tile per row, filling the dashboard's width. */
  @media (prefers-reduced-motion: reduce) {
    .dashboard-scroller[data-scopedcss-fdd799e0b9-68466f3ff0] {
      animation-duration: 0.01ms;
    }
  }

  .section-rail[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    --_rail-pad: var(--boxel-sp-4xs);
    --_rail-icon-size: 1.25rem;
    --_rail-open-width: 12.5rem;
    --_rail-closed-width: calc(
      var(--container-button-size) + 2 * var(--_rail-pad) + 2px
    );
    --_rail-radius: var(--boxel-border-radius-lg);
    --_rail-glass: color-mix(in oklch, var(--boxel-800) 72%, transparent);
    --_rail-ring: color-mix(
      in oklch,
      var(--boxel-highlight) 70%,
      transparent
    );
    --_rail-shadow: color-mix(in oklch, var(--boxel-dark) 45%, transparent);
    --_rail-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Read by the flyout too, which must fit between them. */
    --_rail-gap: var(--boxel-sp-4xs);
    --_rail-top: calc(
      var(--operator-mode-top-bar-item-height) + 2 *
        var(--operator-mode-spacing)
    );
    --_rail-bottom: calc(
      var(--operator-mode-bottom-bar-item-height) + 2 *
        var(--operator-mode-spacing)
    );

    /* Centered on the column the wordmark already stands in, below the
       top bar and above the bottom bar. */
    position: absolute;
    top: var(--_rail-top);
    bottom: var(--_rail-bottom);
    left: calc(var(--operator-mode-spacing) - var(--_rail-pad));
    z-index: var(--host-dashboard-rail-z-index);
    display: flex;
    flex-direction: column;
    gap: var(--_rail-gap);
    box-sizing: border-box;
    width: var(--_rail-closed-width);
    padding: var(--_rail-pad);
    border: 1px solid var(--boxel-light-10);
    border-radius: calc(var(--_rail-radius) + var(--_rail-pad));
    background-color: var(--_rail-glass);
    backdrop-filter: blur(1.125rem) saturate(140%);
    box-shadow:
      0 1.5rem 3rem var(--_rail-shadow),
      inset 0 1px 0 var(--boxel-light-10);
    color: var(--foreground);
    transition: width 180ms var(--_rail-ease);
  }
  /* Labels and counts slide out over the page on hover or focus; the
     icons hold still. A touch screen's hover sticks after a tap, so only
     a pointer that can hover opens the rail by it. */
  @media (hover: hover) {
    .section-rail[data-scopedcss-cfc4e604ff-8f8a835f9d]:hover {
      width: var(--_rail-open-width);
    }
  }
  .section-rail[data-scopedcss-cfc4e604ff-8f8a835f9d]:focus-within {
    width: var(--_rail-open-width);
  }
  /* A compact dashboard has no room to spare, so the rail stays as
     icons; a flyout still opens beside it. */
  .section-rail[data-scopedcss-cfc4e604ff-8f8a835f9d]:is(.is-folded, .is-compact) {
    width: var(--_rail-closed-width);
  }

  .rail-item[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    position: relative;
  }
  .rail-button[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    --pretui-button-h: var(--container-button-size);
    --pretui-button-px: calc(
      (var(--container-button-size) - var(--_rail-icon-size)) / 2 - 1px
    );
    --pretui-button-radius: var(--_rail-radius);
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
  }
  /* The section being read. The filled wordmark above already says which
     screen this is, so the rail marks its section with a ring, never a
     second fill; an open entry's fill is the neutral one. */
  .rail-button.is-current[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    box-shadow: inset 0 0 0 1.5px var(--_rail-ring);
  }
  .rail-button-content[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    width: calc(
      var(--_rail-open-width) - 2 * var(--_rail-pad) - 2px -
        var(--container-button-size) + var(--_rail-icon-size)
    );
  }
  .rail-icon[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    flex-shrink: 0;
  }
  .rail-label[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--boxel-font-size-sm);
    font-weight: 600;
  }
  .rail-count[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    flex-shrink: 0;
    font-family: var(--boxel-monospace-font-family);
    font-size: var(--boxel-font-size-xs);
    color: var(--muted-foreground);
  }

  .flyout[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    /* The viewport, not a container: the rail stands outside the
       dashboard. A phone leaves the flyout the width past the rail. */
    --_flyout-width: min(
      20rem,
      100vw - var(--_rail-closed-width) + var(--_rail-pad) -
        var(--boxel-sp-sm) - 2 * var(--operator-mode-spacing)
    );
    /* No taller than the room from its entry down to the rail's bottom,
       since the main panel clips whatever runs past the viewport. */
    --_flyout-max-height: min(
      26rem,
      100dvh - var(--_rail-top) - var(--_rail-bottom) -
        var(--_rail-item-index) *
        (var(--container-button-size) + var(--_rail-gap))
    );
    position: absolute;
    top: calc(-1 * var(--_rail-pad));
    left: 100%;
    padding-left: var(--boxel-sp-sm);
    animation: flyout-in-data-scopedcss-cfc4e604ff-8f8a835f9d 180ms var(--_rail-ease);
  }
  .flyout-panel[data-scopedcss-cfc4e604ff-8f8a835f9d] {
    /* The width a flyout's content lays out in; a row that must fill it
       exactly, as a truncating name does, reads it. */
    --section-rail-flyout-content-width: calc(
      var(--_flyout-width) - 2 * var(--boxel-sp-xs) - 2px
    );
    width: var(--_flyout-width);
    max-height: var(--_flyout-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: var(--boxel-sp-xs);
    border: 1px solid var(--boxel-light-10);
    border-radius: var(--boxel-border-radius-xl);
    background-color: var(--boxel-700);
    box-shadow: 0 1.5rem 3.5rem var(--_rail-shadow);
    color: var(--foreground);
  }
  @keyframes flyout-in-data-scopedcss-cfc4e604ff-8f8a835f9d {
    from {
      opacity: 0;
      transform: translateX(-0.375rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .section-rail[data-scopedcss-cfc4e604ff-8f8a835f9d],
    .flyout[data-scopedcss-cfc4e604ff-8f8a835f9d] {
      transition: none;
      animation: none;
    }
  }

  :root {
    --new-file-button-width: 6.25rem;
    --new-file-button-height: var(--container-button-size);
  }
  .new-file-dropdown-trigger[data-scopedcss-2089bb03d0-131266ee88] {
    --icon-color: currentColor;
    height: var(--new-file-button-height);
    width: var(--new-file-button-width);
    padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
    justify-content: flex-start;
    gap: var(--boxel-sp-2xs);
    flex-shrink: 0;
  }
  .new-file-dropdown-trigger--collapsed[data-scopedcss-2089bb03d0-131266ee88] {
    --new-file-button-width: var(--container-button-size);
    justify-content: center;
    padding-inline: var(--boxel-sp-2xs);
    gap: 0;
  }
  .new-file-dropdown-trigger[data-scopedcss-2089bb03d0-131266ee88]:focus:not(:disabled) {
    outline-offset: 1px;
  }
  .new-file-button-icon[data-scopedcss-2089bb03d0-131266ee88] >  path {
    stroke: none;
  }
  .dropdown-arrow[data-scopedcss-2089bb03d0-131266ee88] {
    margin-left: auto;
  }
  .new-file-dropdown-trigger[aria-expanded='true'] .dropdown-arrow[data-scopedcss-2089bb03d0-131266ee88] {
    transform: rotate(180deg);
  }

  .new-file-menu[data-scopedcss-2089bb03d0-c89ac29bd5] {
    --boxel-menu-item-content-padding: var(--boxel-sp-xs);
    width: 19.375rem; /* 310px */
  }
  [data-scopedcss-2089bb03d0-c89ac29bd5] .boxel-menu__separator {
    border-color: var(--boxel-300);
  }
  [data-scopedcss-2089bb03d0-c89ac29bd5] .menu-item {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: var(--boxel-sp-6xs);
    column-gap: var(--boxel-sp-xs);
    line-height: calc(18 / 11);
  }
  [data-scopedcss-2089bb03d0-c89ac29bd5] .menu-item .subtext {
    grid-column: 2;
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp);
  }
  [data-scopedcss-2089bb03d0-c89ac29bd5] .menu-item .icon {
    width: var(--boxel-icon-sm);
    height: var(--boxel-icon-sm);
  }
  .new-file-menu[data-scopedcss-2089bb03d0-c89ac29bd5] .postscript {
    color: var(--boxel-450);
    font: 500 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp-xl);
    text-transform: uppercase;
  }
  .new-file-menu[data-scopedcss-2089bb03d0-c89ac29bd5] .check-icon {
    display: none;
  }
  @media (max-width: 20rem) {
    .new-file-menu[data-scopedcss-2089bb03d0-c89ac29bd5] {
      min-width: 13.5rem;
      width: fit-content;
    }
  }

  .archived-card[data-scopedcss-916d2a767c-9115c24cc7] {
    display: flex;
    flex-direction: column;
    width: var(--workspace-chooser-card-width);
    position: relative;
  }
  .tile[data-scopedcss-916d2a767c-9115c24cc7] {
    min-width: var(--workspace-chooser-tile-width);
    width: var(--workspace-chooser-tile-width);
    height: 10.375rem;
    border-radius: var(--boxel-border-radius-xl);
    background-color: var(--boxel-500);
    background-image: var(--workspace-background-image-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .tile[data-scopedcss-916d2a767c-9115c24cc7]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--boxel-border-radius-xl);
    border: 1px solid rgba(255 255 255 / 25%);
    pointer-events: none;
    z-index: 3;
  }
  /* Dim the tile so an archived workspace reads as inactive. */
  .tile-overlay[data-scopedcss-916d2a767c-9115c24cc7] {
    position: absolute;
    inset: 0;
    background: rgba(24 25 32 / 55%);
    z-index: 1;
  }
  .archive-badge[data-scopedcss-916d2a767c-9115c24cc7] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--boxel-border-radius-sm);
    background: rgba(0 0 0 / 45%);
    backdrop-filter: blur(6px);
    color: var(--boxel-light);
    --icon-color: var(--boxel-light);
  }
  .realm-icon-wrapper[data-scopedcss-916d2a767c-9115c24cc7] {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border-radius: calc(
      var(--boxel-border-radius-xs) + var(--boxel-border-radius-sm)
    );
    display: flex;
    box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
    opacity: 0.85;
  }
  .realm-icon-wrapper[data-scopedcss-916d2a767c-9115c24cc7]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255 255 255 / 50%);
    z-index: 1;
    pointer-events: none;
  }
  .workspace-realm-icon[data-scopedcss-916d2a767c-9115c24cc7] {
    --boxel-realm-icon-size: 2.625rem;
    --boxel-realm-icon-border-radius: calc(
      var(--boxel-border-radius-xs) + 6px
    );
    --boxel-realm-icon-background-color: var(--boxel-light);
  }
  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7] {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--boxel-sp-5xs);
    padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
    border: 1px solid rgba(255 255 255 / 45%);
    border-radius: var(--boxel-border-radius-xxl);
    background: rgba(0 0 0 / 55%);
    backdrop-filter: blur(6px);
    color: var(--boxel-light);
    --icon-color: var(--boxel-light);
    font: 700 var(--boxel-font-xs);
    letter-spacing: var(--boxel-lsp);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .archived-card:hover .restore-btn[data-scopedcss-916d2a767c-9115c24cc7],
  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7]:focus-visible {
    opacity: 1;
  }
  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7]:hover {
    background: var(--boxel-highlight);
    color: var(--boxel-highlight-foreground);
    border-color: var(--boxel-highlight);
    --icon-color: var(--boxel-highlight-foreground);
  }
  .restore-pending[data-scopedcss-916d2a767c-9115c24cc7] {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  .restore-spinner[data-scopedcss-916d2a767c-9115c24cc7] {
    --boxel-loading-indicator-size: 1.5rem;
  }
  .info[data-scopedcss-916d2a767c-9115c24cc7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--boxel-sp-xs);
    gap: var(--boxel-sp-5xs);
    max-width: var(--workspace-chooser-tile-width);
  }
  .info > span[data-scopedcss-916d2a767c-9115c24cc7] {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-align: center;
    letter-spacing: var(--boxel-lsp);
  }
  .info > .name[data-scopedcss-916d2a767c-9115c24cc7] {
    color: var(--boxel-light);
    font: 400 var(--boxel-font-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .status[data-scopedcss-916d2a767c-9115c24cc7] {
    color: var(--boxel-400);
    font: 400 var(--boxel-font-xs);
    text-transform: capitalize;
  }
  .restore-error[data-scopedcss-916d2a767c-9115c24cc7] {
    color: var(--boxel-danger);
    font: 600 var(--boxel-font-xs);
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }

  @keyframes fadeIn-data-scopedcss-d65ff592b2-eee7f579fd {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .workspace-chooser[data-scopedcss-d65ff592b2-eee7f579fd] {
    --workspace-chooser-gutter: 5rem;
    --workspace-chooser-card-width: fit-content;
    --workspace-chooser-tile-width: var(--boxel-xxs-container);
    /* Favorites until the grid is measured; capped so the tile never
       outgrows a content area narrower than 1.5 tiles. */
    --workspace-chooser-enlarged-tile-width: min(
      var(--boxel-xxs-container) * 1.5,
      100vw - 2 * var(--workspace-chooser-gutter)
    );
  }
  .sort-controls[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .sort-select[data-scopedcss-d65ff592b2-eee7f579fd] {
    flex-shrink: 0;
    /* Keep the icon and label on one line at narrow top-bar widths. */
    --boxel-select-trigger-content-wrap: nowrap;
    --boxel-select-background-color: var(--boxel-800);
    --boxel-select-border-color: var(--boxel-light-25);
    --boxel-select-focus-border-color: var(--boxel-light-50);
    --icon-color: var(--boxel-light);
  }
  /* Below this top-bar width the label would push the trigger over the
     profile button, so show the icon only and keep the label for screen
     readers. */
  @container (width <= 20rem) {
    .sort-select[data-scopedcss-d65ff592b2-eee7f579fd] {
      --boxel-select-trigger-gap: var(--boxel-sp-2xs);
    }
    .sort-select .sort-label[data-scopedcss-d65ff592b2-eee7f579fd] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }
  .boxel-select__dropdown.workspace-chooser-sort-dropdown {
    --boxel-dropdown-background-color: var(--boxel-650);
    --boxel-dropdown-border-color: var(--boxel-light-25);
    --boxel-dropdown-selected-text-color: var(--boxel-light);
    --boxel-dropdown-hover-color: var(--boxel-700);
    --boxel-dropdown-highlight-color: var(--boxel-650);
    --boxel-dropdown-highlight-hover-color: var(--boxel-700);
    --boxel-dropdown-selected-highlighted-color: var(--boxel-700);
    --boxel-dropdown-selected-hover-color: var(--boxel-700);
  }
  .workspace-chooser-sort-dropdown .boxel-select-option-checkmark {
    --icon-color: var(--boxel-highlight);
    color: var(--boxel-highlight);
  }
  .workspace-chooser__content[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--boxel-sp-lg);
    height: 100%;
    /* The bottom always clears the floating AI assistant button, which
       sits over the chooser's bottom-right corner. */
    padding: calc(var(--workspace-chooser-gutter) + 3.75rem)
      var(--workspace-chooser-gutter)
      max(
        var(--workspace-chooser-gutter),
        calc(
          var(--container-button-size) + var(--operator-mode-spacing) +
            var(--boxel-sp)
        )
      );
    overflow: auto;
    /* Fade in only the contents; the dark chooser background above
       paints immediately so the grey operator-mode canvas never flashes
       between the (dark) sign-in screen and the (dark) chooser. */
    opacity: 0;
    animation: fadeIn-data-scopedcss-d65ff592b2-eee7f579fd 0.5s ease-in forwards;
  }
  .sections-wrapper[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--boxel-sp-lg) * 2);
  }
  .workspace-section[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-lg);
  }
  .section-header[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }
  .section-header-icon[data-scopedcss-d65ff592b2-eee7f579fd] {
    --icon-color: var(--boxel-teal);
    color: var(--boxel-teal);
    flex-shrink: 0;
  }
  .section-header--toggle[data-scopedcss-d65ff592b2-eee7f579fd] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: fit-content;
    text-align: left;
  }
  .section-disclosure-icon[data-scopedcss-d65ff592b2-eee7f579fd] {
    --icon-color: var(--boxel-light);
    --icon-fill: var(--boxel-light);
    color: var(--boxel-light);
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .section-header--toggle.is-expanded .section-disclosure-icon[data-scopedcss-d65ff592b2-eee7f579fd] {
    transform: rotate(90deg);
  }
  .section-count[data-scopedcss-d65ff592b2-eee7f579fd] {
    color: var(--boxel-400);
    font: 600 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp);
  }
  .workspace-chooser__title[data-scopedcss-d65ff592b2-eee7f579fd] {
    color: var(--boxel-light);
    font: 400 var(--boxel-font-lg);
    letter-spacing: var(--boxel-lsp);
  }
  .workspace-list[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--boxel-sp-lg) + var(--boxel-sp-lg));
    padding: var(--boxel-sp-xs) 0;
  }
  .section-empty[data-scopedcss-d65ff592b2-eee7f579fd] {
    color: var(--boxel-400);
    font: 400 var(--boxel-font-sm);
  }
  .unreachable-notice[data-scopedcss-d65ff592b2-eee7f579fd] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-2xs);
    max-width: 40rem;
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    border-radius: var(--boxel-border-radius);
    background-color: var(--boxel-light-10);
    color: var(--boxel-light);
    font: 400 var(--boxel-font-sm);
    letter-spacing: var(--boxel-lsp-xs);
  }
  .unreachable-notice-icon[data-scopedcss-d65ff592b2-eee7f579fd] {
    flex-shrink: 0;
  }
  .unreachable-notice-spinner[data-scopedcss-d65ff592b2-eee7f579fd] {
    flex-shrink: 0;
  }
  /* One tile per row, filling the chooser's own width, which is less
     than the viewport's when the AI assistant panel is open. */
  @media (max-width: 30rem) {
    .workspace-chooser[data-scopedcss-d65ff592b2-eee7f579fd] {
      --workspace-chooser-gutter: var(--boxel-sp);
      --workspace-chooser-card-width: 100%;
      --workspace-chooser-tile-width: 100%;
      --workspace-chooser-enlarged-tile-width: 100%;
    }
    .sections-wrapper[data-scopedcss-d65ff592b2-eee7f579fd] {
      width: 100%;
    }
  }

  /* Covers the stacks with whichever of the workspace chooser and the
     dashboard is shown; the child fills it. */
  .workspace-overlay[data-scopedcss-2756618a20-f33eb9b59d] {
    display: grid;
    /* Tracks no bigger than the overlay, so a tall chooser scrolls inside
       it instead of growing past it. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--boxel-800);
    z-index: var(--host-workspace-chooser-z-index);
  }
  .submode-layout[data-scopedcss-2756618a20-f33eb9b59d] {
    --submode-bar-item-border-radius: var(--boxel-border-radius);
    --boxel-icon-button-width: var(--container-button-size);
    --boxel-icon-button-height: var(--container-button-size);
    position: relative;
    display: flex;
    height: 100%;
    z-index: 0;
  }

  .submode-layout > .boxel-panel-group[data-scopedcss-2756618a20-f33eb9b59d] {
    width: 100%;
  }

  .ai-assistant-resizable-panel[data-scopedcss-2756618a20-f33eb9b59d] {
    max-width: 100%;
    min-width: 0;
    overflow: initial;
  }

  .main-panel[data-scopedcss-2756618a20-f33eb9b59d] {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .ai-assistant-open[data-scopedcss-2756618a20-f33eb9b59d] {
    grid-template-columns: 1.5fr 0.5fr;
  }

  .chat-btn[data-scopedcss-2756618a20-f33eb9b59d] {
    position: absolute;
    bottom: var(--operator-mode-spacing);
    right: var(--operator-mode-spacing);
    background-color: var(--boxel-ai-purple);
    box-shadow: var(--submode-bar-item-box-shadow);
    z-index: var(--host-ai-panel-button-z-index);
  }

  .ai-assistant-panel[data-scopedcss-2756618a20-f33eb9b59d] {
    z-index: var(--host-ai-panel-z-index);
  }

  .submode-layout-top-bar[data-scopedcss-2756618a20-f33eb9b59d] {
    position: relative;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    /* Lock outer box to exactly var(--stack-padding-top) — the
       same value .operator-mode-stack uses for its padding-top
       offset. Any content the bar contains (workspace button,
       submode switcher, portaled expanded-card-header pill,
       etc.) renders WITHIN this fixed height; nothing the slot
       contents do can push the bar taller. This is what lets
       interact-expanded card positioning match host-mode pixel
       for pixel — both card-tops sit at y = stack-padding-top
       and the bar is guaranteed to occupy that exact space. */
    height: var(--stack-padding-top);
    box-sizing: border-box;
    padding: var(--operator-mode-spacing);
    z-index: var(--host-top-bar-z-index);

    display: flex;
    align-items: center;
    gap: var(--operator-mode-spacing);
  }

  .submode-layout-top-bar-center[data-scopedcss-2756618a20-f33eb9b59d] {
    /* Narrow default: stay in flow as a flex child. `flex: 1` reserves the
       middle track between the workspace button and the profile controls,
       so the content can neither slide under those controls nor intercept
       clicks meant for them — it just sits on the one line between them. */
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  /* Wider top bars have room to center the content within the whole bar
     rather than only within the asymmetric middle track (the 160px
     workspace button makes the flex track off-centre). Take it out of flow
     and pin it to the bar's centre; the breakpoint is high enough that the
     centered content clears the workspace button on the left. */
  @container (min-width: 60rem) {
    .submode-layout-top-bar-center[data-scopedcss-2756618a20-f33eb9b59d] {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  /* Slot for the expanded stack-item's CardHeader pill. When a
     card is expanded, stack-item portals its CardHeader here via
     the in-element block helper. The slot grows to take available
     space (so the pill can stretch to ~800px) and centers the
     pill horizontally — same horizontal position the stack card
     would occupy below. When no card is expanded, the slot is
     empty (zero rendered children). */
  .expanded-card-header-slot[data-scopedcss-2756618a20-f33eb9b59d] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 50rem; /* same as `stackItemMaxWidth` in stack-item.gts */
    margin: 0 auto;
  }

  .submode-switcher[data-scopedcss-2756618a20-f33eb9b59d] {
    border: none;
    border-radius: var(--submode-bar-item-border-radius);
    box-shadow: var(--submode-bar-item-box-shadow);
    outline: var(--submode-bar-item-outline);
  }
  .submode-switcher[data-scopedcss-2756618a20-f33eb9b59d]
    .submode-switcher-dropdown-trigger:focus:not(:focus-visible),
  .submode-switcher[data-scopedcss-2756618a20-f33eb9b59d]
    .submode-switcher-dropdown-trigger:focus:not(:disabled) {
    outline-offset: unset;
  }

  .new-file-button[data-scopedcss-2756618a20-f33eb9b59d] {
    border: none;
    border-radius: var(--submode-bar-item-border-radius);
    box-shadow: var(--submode-bar-item-box-shadow);
    flex-shrink: 0;
  }

  .profile-icon-button[data-scopedcss-2756618a20-f33eb9b59d] {
    --boxel-icon-button-width: var(--container-button-size);
    --boxel-icon-button-height: var(--container-button-size);
    /* Match the outline treatment used by the search and AI-assistant
       icon buttons (see .ai-assistant-button/search-sheet), instead of
       the Avatar component's default 2px solid white border. */
    --profile-avatar-icon-border: var(--boxel-border-flexible);

    background: none;

    padding: 0;
    margin-left: auto;

    border: none;
    border-radius: 50%;
    box-shadow: var(--submode-bar-item-box-shadow);
    z-index: var(--host-profile-z-index);
  }

  .workspace-button[data-scopedcss-2756618a20-f33eb9b59d] {
    --icon-color: var(--boxel-highlight);
    --icon-text-color: var(--boxel-light);
    --boxel-icon-button-width: 160px;
    --boxel-icon-button-height: 40px;

    border: none;
    border-radius: var(--submode-bar-item-border-radius);
    flex-shrink: 0;
    position: relative;
  }

  .workspace-button[data-scopedcss-2756618a20-f33eb9b59d] svg {
    position: absolute;
    left: 0;
    max-width: unset;
  }

  .workspace-button[data-scopedcss-2756618a20-f33eb9b59d]:focus:not(:focus-visible) {
    outline-offset: unset;
  }
  .workspace-button[data-scopedcss-2756618a20-f33eb9b59d]:focus:not(:disabled) {
    outline-offset: 1px;
  }
  .workspace-button--dark[data-scopedcss-2756618a20-f33eb9b59d] {
    --icon-bg-opacity: 1;
    --icon-color: var(--boxel-dark);
    --icon-bg-color: var(--boxel-highlight);
    --boxel-icon-button-width: 40px;
    outline: var(--submode-bar-item-outline);
    box-shadow: var(--submode-bar-item-box-shadow);
  }
  .workspace-button--dark[data-scopedcss-2756618a20-f33eb9b59d]:focus:not(:focus-visible) {
    outline: var(--submode-bar-item-outline);
    outline-offset: 0px;
  }
  .workspace-button--dark[data-scopedcss-2756618a20-f33eb9b59d]:focus:focus-visible {
    outline-width: 2px;
    outline-offset: 0px;
  }

  [data-scopedcss-2756618a20-f33eb9b59d] .open-search-field {
    box-shadow: var(--submode-bar-item-box-shadow);
    outline: var(--submode-bar-item-outline);
  }

  @media (max-width: 26rem) {
    .expanded-card-header-slot[data-scopedcss-2756618a20-f33eb9b59d]:not(.has-expanded) {
      display: none;
    }
  }

  @media print {
    .submode-layout-top-bar[data-scopedcss-2756618a20-f33eb9b59d] {
      display: none;
    }
  }

  :root {
    --code-submode-background: #74707d;
    --code-mode-panel-background-color: #ebeaed;
    --code-mode-container-border-radius: 10px;
    --code-mode-realm-icon-size: 1.125rem;
    --code-mode-active-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    --monaco-background: var(--boxel-600);
    --monaco-selection-background: var(--boxel-500);
    --monaco-inactive-selection-background: var(--boxel-550);
    --monaco-readonly-background: #606060;
  }

  .code-submode-layout[data-scopedcss-649d402b0f-6203beeefb] {
    --submode-bar-item-outline: 2px solid transparent;
    --submode-bar-item-box-shadow: none;
    background-color: var(--code-submode-background);
  }

  .code-mode[data-scopedcss-649d402b0f-6203beeefb] {
    overflow: auto;
    flex: 1;
    background-color: var(--code-submode-background);
  }

  .columns[data-scopedcss-649d402b0f-6203beeefb] {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: 100%;
    border-top: 1px solid var(--boxel-dark);
  }

  .column[data-scopedcss-649d402b0f-6203beeefb] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
    height: 100%;
  }

  .handle[data-scopedcss-649d402b0f-6203beeefb] {
    --boxel-panel-resize-separator-background-color: var(--boxel-dark);
  }

  .monaco-editor-panel[data-scopedcss-649d402b0f-6203beeefb] {
    background-color: var(--monaco-background);
  }
  .monaco-editor-panel[data-scopedcss-649d402b0f-6203beeefb] .binary-info {
    --icon-color: var(--boxel-light);
    color: var(--boxel-light);
  }

  .choose-file-prompt[data-scopedcss-649d402b0f-6203beeefb] {
    margin: 0;
    padding: var(--boxel-sp);
    font: 600 var(--boxel-font);
    letter-spacing: var(--boxel-lsp-xs);
  }

  .code-submode-layout[data-scopedcss-649d402b0f-6203beeefb]
    
      .submode-layout-top-bar .ember-basic-dropdown-content-wormhole-origin
     {
    position: absolute;
  }

  .module-inspector-container[data-scopedcss-649d402b0f-6203beeefb] {
    --boxel-format-chooser-height: var(--boxel-form-control-height);

    background-color: transparent;
  }

  .loading[data-scopedcss-649d402b0f-6203beeefb] {
    margin: 40vh auto;
  }

  .empty-container[data-scopedcss-649d402b0f-6203beeefb] {
    background-color: var(--boxel-light-100);
    align-items: center;
    justify-content: center;
  }

  .loading-indicator[data-scopedcss-649d402b0f-6203beeefb] {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .open-site-popover[data-scopedcss-ad78201447-37cd701a0e] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: solid 1px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
    z-index: 1000;
    margin-top: 4px;
    padding: var(--boxel-sp-xs);
    min-width: 320px;
    max-width: 450px;
  }

  .published-realms[data-scopedcss-ad78201447-37cd701a0e] {
    max-height: 200px;
    overflow-y: auto;
  }

  .realm-item[data-scopedcss-ad78201447-37cd701a0e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--boxel-light-200);
    padding: 0.5rem 0;
  }

  .realm-item[data-scopedcss-ad78201447-37cd701a0e]:last-child {
    border-bottom: none;
  }

  .realm-url[data-scopedcss-ad78201447-37cd701a0e] {
    flex: 1;
    font: 500 var(--boxel-font-sm);
    color: var(--boxel-dark);
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.75rem;
  }

  .open-site-button[data-scopedcss-ad78201447-37cd701a0e] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    font-size: var(--boxel-font-size-xs);
  }

  .external-link-icon[data-scopedcss-ad78201447-37cd701a0e] {
    flex-shrink: 0;
  }

  .no-published-message[data-scopedcss-ad78201447-37cd701a0e] {
    text-align: center;
    color: var(--boxel-light-600);
    font-style: italic;
    padding: 1rem;
    font-size: var(--boxel-font-size-xs);
  }

  .publishing-realm-popover[data-scopedcss-c776410097-84865ad4a7] {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: solid 1px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
    min-width: 320px;
    max-width: 320px;
    z-index: 1000;
    margin-top: 4px;
    padding: var(--boxel-sp-xs);
  }

  .publishing-realm-header[data-scopedcss-c776410097-84865ad4a7] {
    font: 500 var(--boxel-font-xs);
    color: var(--boxel-dark);
    line-height: 2.91;
    letter-spacing: 0.17px;
  }

  .publishing-realm-content[data-scopedcss-c776410097-84865ad4a7] {
    padding: 0.5rem 0;
  }

  .publishing-realms-list[data-scopedcss-c776410097-84865ad4a7] {
    max-height: 200px;
  }

  .realm-item[data-scopedcss-c776410097-84865ad4a7] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    padding-block: var(--boxel-sp-xxs);
    border-bottom: 1px solid var(--boxel-light-200);
  }

  .realm-item[data-scopedcss-c776410097-84865ad4a7]:last-child {
    border-bottom: none;
  }

  .realm-summary[data-scopedcss-c776410097-84865ad4a7] {
    display: flex;
    align-items: center;
  }

  .publish-progress[data-scopedcss-c776410097-84865ad4a7] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
    /* Align with the realm URL above rather than the icon gutter. */
    margin-left: 1.8125rem;
  }

  .progress-summary[data-scopedcss-c776410097-84865ad4a7] {
    display: flex;
    justify-content: space-between;
    gap: var(--boxel-sp-xxs);
    color: var(--muted-foreground);
    font-size: var(--boxel-font-size-xs);
    line-height: var(--boxel-line-height-xs);
  }

  /* A slim rule under the URL rather than a full-height labelled bar. */
  .progress-bar[data-scopedcss-c776410097-84865ad4a7] {
    --boxel-progress-bar-height: 0.5rem;
  }

  .realm-icon-container[data-scopedcss-c776410097-84865ad4a7] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  .realm-icon[data-scopedcss-c776410097-84865ad4a7] {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: cover;
  }

  .default-realm-icon[data-scopedcss-c776410097-84865ad4a7] {
    width: 100%;
    height: 100%;
    background-color: var(--boxel-light-400);
    border-radius: 3px;
  }

  .realm-url[data-scopedcss-c776410097-84865ad4a7] {
    flex: 1;
    font: 500 var(--boxel-font-sm);
    color: var(--boxel-dark);
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-icon[data-scopedcss-c776410097-84865ad4a7] {
    margin-left: 0.75rem;
    flex-shrink: 0;
  }

  .loading-icon[data-scopedcss-c776410097-84865ad4a7] {
    color: var(--boxel-purple-600);
  }

  .no-domains-message[data-scopedcss-c776410097-84865ad4a7] {
    text-align: center;
    color: var(--boxel-light-600);
    font-style: italic;
    padding: 1rem;
    font-size: var(--boxel-font-size-xs);
  }

  @keyframes spin-data-scopedcss-c776410097-84865ad4a7 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .violation[data-scopedcss-e94225d96c-671e6586ed] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xxxs);
    padding: var(--boxel-sp-xxs) 0;
    font-size: var(--boxel-font-size-sm);
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .resource[data-scopedcss-e94225d96c-671e6586ed] {
    font-weight: var(--boxel-font-weight-bold);
  }

  .realm-list[data-scopedcss-e94225d96c-671e6586ed] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxxs);
  }

  .realm[data-scopedcss-e94225d96c-671e6586ed] {
    background: var(--boxel-50);
    border-radius: var(--boxel-border-radius-xs);
    color: var(--boxel-550);
    padding: 2px var(--boxel-sp-xxs);
    font-size: var(--boxel-font-size-xs);
    max-width: 100%;
  }

  .publish-realm-modal[data-scopedcss-0842886a25-c1f2c0655d] {
    --horizontal-gap: var(--boxel-sp-xs);
    --stack-card-footer-height: auto;
  }

  .publish-realm-modal[data-scopedcss-0842886a25-c1f2c0655d] >  .boxel-modal__inner {
    display: flex;
  }

  .publish-realm-modal[data-scopedcss-0842886a25-c1f2c0655d] .dialog-box__content {
    display: flex;
    flex-direction: column;
  }

  [data-scopedcss-0842886a25-c1f2c0655d] .publish-realm {
    height: 32rem;
  }

  [data-scopedcss-0842886a25-c1f2c0655d] .dialog-box__header {
    gap: var(--boxel-sp-xxxs);
  }

  .modal-subtitle[data-scopedcss-0842886a25-c1f2c0655d] {
    font-size: normal var(--boxel-font-sm);
    color: var(--boxel-dark);
  }

  .publish-warning[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    margin-bottom: var(--boxel-sp);
    padding: var(--boxel-sp-sm);
    border-radius: var(--boxel-border-radius-lg);
    font-size: var(--boxel-font-size-sm);
  }

  .publish-warning.warning[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--boxel-sp-sm);
    background-color: var(--boxel-warning-200);
    color: var(--boxel-dark);
  }

  .publish-warning-body[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .publish-warning-icon[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-shrink: 0;
  }

  .publish-warning.error[data-scopedcss-0842886a25-c1f2c0655d] {
    border: 1px solid var(--boxel-error-200);
    background-color: rgb(from var(--boxel-error-200) r g b / 8%);
    color: var(--boxel-error-200);
  }

  .publish-warning.info[data-scopedcss-0842886a25-c1f2c0655d] {
    border: 1px solid var(--boxel-300);
    background-color: var(--boxel-50);
    color: var(--boxel-500);
    align-items: center;
    gap: var(--boxel-sp-xxs);
  }

  .violation-list[data-scopedcss-0842886a25-c1f2c0655d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }

  .domain-options[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp);
  }

  .domain-option[data-scopedcss-0842886a25-c1f2c0655d] {
    display: grid;
    grid-template-areas:
      'checkbox . title   cancel'
      '.        . details action'
      '.        . error   error';

    grid-template-columns: auto var(--boxel-sp-sm) minmax(0, 1fr) auto;

    align-items: center;
    padding-top: var(--boxel-sp-lg);
    padding-bottom: var(--boxel-sp-xl);
    border: 1px solid transparent;
  }

  .domain-option[data-scopedcss-0842886a25-c1f2c0655d]:not(:last-child) {
    border-bottom: 1px solid var(--boxel-200);
  }

  .cancel[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: cancel;
  }

  .domain-checkbox[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: checkbox;

    flex-shrink: 0;
  }

  .option-title[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: title;

    font: 600 var(--boxel-font);
    color: var(--boxel-dark);
  }

  .domain-details[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: details;

    display: flex;
    align-items: center;
    gap: var(--boxel-sp-sm);
    min-width: 0;
    margin-top: var(--boxel-sp);
  }

  .domain-details.full-width[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-column: 3 / -1;
  }

  .realm-icon[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-shrink: 0;
    --boxel-realm-icon-size: 30px;
  }

  .domain-url-container[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .domain-url[data-scopedcss-0842886a25-c1f2c0655d] {
    flex: 1;
    font-size: var(--boxel-font-size-sm);
    overflow-wrap: anywhere;
  }

  .url-part[data-scopedcss-0842886a25-c1f2c0655d] {
    color: var(--boxel-450);
  }

  .url-part-bold[data-scopedcss-0842886a25-c1f2c0655d] {
    color: var(--boxel-dark);
    font-weight: 500;
  }

  .domain-info[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--boxel-sp-sm);
  }

  .last-published-at[data-scopedcss-0842886a25-c1f2c0655d],
  .not-published-yet[data-scopedcss-0842886a25-c1f2c0655d] {
    font: normal var(--boxel-font-xs);
    position: relative;
    padding-left: calc(var(--boxel-sp-xxxs) + 3px);
  }

  .last-published-at[data-scopedcss-0842886a25-c1f2c0655d] {
    color: #00ac00;
  }

  .not-published-yet[data-scopedcss-0842886a25-c1f2c0655d] {
    color: var(--boxel-450);
  }

  .last-published-at[data-scopedcss-0842886a25-c1f2c0655d]::before,
  .not-published-yet[data-scopedcss-0842886a25-c1f2c0655d]::before {
    content: '•';
    position: absolute;
    left: 0;
  }

  .unpublish-button[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    --boxel-button-min-height: 0;
  }

  .unpublish-icon[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-shrink: 0;
  }

  .unpublish-button[data-scopedcss-0842886a25-c1f2c0655d]:not(:disabled):hover {
    color: var(--boxel-dark);
  }

  .publish-button[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }

  .action[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: action;

    margin: auto 0;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    font-size: var(--boxel-font-size-xs);
    text-decoration: none;
  }

  .action.disabled[data-scopedcss-0842886a25-c1f2c0655d] {
    pointer-events: none;
    opacity: 0.5;
  }

  .domain-option.claiming .action[data-scopedcss-0842886a25-c1f2c0655d] {
    margin-top: calc(var(--boxel-sp-xl) + var(--boxel-sp-xxxs));
  }

  .button-icon[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-shrink: 0;
  }

  .footer-buttons[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    margin-left: auto;
    gap: var(--horizontal-gap);
  }

  .publish-progress-status[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--boxel-sp-xxs);
    /* Take the footer's free width so the bars have a length worth
       reading, while the buttons keep their own. */
    flex: 1;
    max-width: 22rem;
    margin-right: var(--horizontal-gap);
    color: var(--muted-foreground);
    font-size: var(--boxel-font-size-xs);
    line-height: var(--boxel-line-height-xs);
  }

  .progress-row[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-5xs);
  }

  .progress-target[data-scopedcss-0842886a25-c1f2c0655d] {
    font-weight: 600;
  }

  /* A slim rule under the description rather than a full-height labelled
     bar. */
  .progress-bar[data-scopedcss-0842886a25-c1f2c0655d] {
    --boxel-progress-bar-height: 0.5rem;
  }

  .custom-subdomain-setup[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xxxs);
    width: 100%;
  }

  .custom-subdomain-label[data-scopedcss-0842886a25-c1f2c0655d] {
    font-size: var(--boxel-font-size-xs);
    font-weight: 600;
    color: var(--boxel-dark);
  }

  .custom-subdomain-row[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }

  .custom-subdomain-row[data-scopedcss-0842886a25-c1f2c0655d] .container {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .custom-subdomain-row .claim-custom-subdomain-button[data-scopedcss-0842886a25-c1f2c0655d] {
    flex-shrink: 0;
  }

  .custom-domain-suffix[data-scopedcss-0842886a25-c1f2c0655d] {
    color: var(--boxel-450);
  }

  .custom-subdomain-cancel[data-scopedcss-0842886a25-c1f2c0655d] {
    gap: var(--boxel-sp-xxxs);
    margin-left: auto;
  }

  .domain-publish-error[data-scopedcss-0842886a25-c1f2c0655d] {
    grid-area: error;
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
    margin-top: var(--boxel-sp-xs);
  }

  .domain-publish-error .error-text[data-scopedcss-0842886a25-c1f2c0655d] {
    flex: 1;
    color: var(--boxel-error-200);
    font-size: var(--boxel-font-size-xs);
    font-weight: 500;
  }

  .unlisted-link-error[data-scopedcss-0842886a25-c1f2c0655d] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }

  .unlisted-link-error .error-text[data-scopedcss-0842886a25-c1f2c0655d] {
    color: var(--boxel-error-200);
    font-size: var(--boxel-font-size-xs);
    font-weight: 500;
  }

  @container dialog-box (width <= 28rem) {
    .domain-option[data-scopedcss-0842886a25-c1f2c0655d] {
      grid-template-areas:
        'checkbox . title   cancel'
        'details  details details details'
        'action   action  action  action'
        'error    error   error   error';
    }

    .domain-details.full-width[data-scopedcss-0842886a25-c1f2c0655d] {
      grid-column: 1 / -1;
    }

    .action[data-scopedcss-0842886a25-c1f2c0655d] {
      justify-self: start;
      margin: var(--boxel-sp-sm) 0 0;
    }
  }

  .host-submode-layout[data-scopedcss-5a714c4d32-210546815e] {
    --host-submode-background: var(--boxel-700);
    --submode-bar-item-border-radius: var(--boxel-border-radius);
    --submode-bar-item-box-shadow: var(--boxel-deep-box-shadow);
    --submode-bar-item-outline: var(--boxel-border-flexible);
    --operator-mode-left-column: calc(
      21.5rem - var(--new-file-button-width)
    );
    background-color: var(--host-submode-background);
  }

  .host-submode[data-scopedcss-5a714c4d32-210546815e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
  }

  .host-submode-layout
    .open-site-button-container[data-scopedcss-5a714c4d32-210546815e]
    +  .profile-icon-button {
    margin-left: 0;
  }

  .host-mode-top-bar-content[data-scopedcss-5a714c4d32-210546815e] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(
      var(--operator-mode-left-column) + var(--submode-switcher-width) +
        var(--operator-mode-spacing)
    );
  }

  .host-submode-content[data-scopedcss-5a714c4d32-210546815e] {
    flex: 1;
  }

  .publish-realm-button-container[data-scopedcss-5a714c4d32-210546815e] {
    position: relative;
  }

  .publish-realm-button[data-scopedcss-5a714c4d32-210546815e] {
    --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
    border: none;
    border-radius: var(--submode-bar-item-border-radius);
    box-shadow: var(--submode-bar-item-box-shadow);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }

  .publish-realm-button[data-scopedcss-5a714c4d32-210546815e]:focus:not(:disabled) {
    outline-offset: 1px;
  }

  .publish-icon[data-scopedcss-5a714c4d32-210546815e] {
    flex-shrink: 0;
  }

  .open-site-button-container[data-scopedcss-5a714c4d32-210546815e] {
    position: relative;
    margin-left: auto;
  }

  .open-site-button[data-scopedcss-5a714c4d32-210546815e] {
    --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
    --boxel-button-color: transparent;
    --boxel-button-border: 1px solid var(--boxel-700);
    --boxel-button-text-color: var(--boxel-light);
    border-radius: var(--submode-bar-item-border-radius);
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xxxs);
  }

  .open-site-button[data-scopedcss-5a714c4d32-210546815e]:hover:not(:disabled) {
    --boxel-button-border: 1px solid var(--boxel-light);
  }

  .globe-icon[data-scopedcss-5a714c4d32-210546815e] {
    flex-shrink: 0;
    color: var(--boxel-teal);
  }

  .top-bar-button-label[data-scopedcss-5a714c4d32-210546815e] {
    white-space: nowrap;
  }

  /* Too narrow for labeled buttons: show icons only, keeping the label
     as the accessible name. */
  @container (width < 40rem) {
    .publish-realm-button[data-scopedcss-5a714c4d32-210546815e],
    .open-site-button[data-scopedcss-5a714c4d32-210546815e] {
      --boxel-button-padding: 0;
      --boxel-button-min-width: var(--container-button-size);
      justify-content: center;
    }
    .top-bar-button-label[data-scopedcss-5a714c4d32-210546815e] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }

  .publish-realm-button.publishing[data-scopedcss-5a714c4d32-210546815e] {
    animation: pulse-data-scopedcss-5a714c4d32-210546815e 2s infinite;
  }

  @keyframes pulse-data-scopedcss-5a714c4d32-210546815e {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      opacity: 1;
    }
  }

  .add-card-to-neighbor-stack[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    --minimized-width: 8px;
    --minimized-height: 20px;
    --expanded-width: 16px;
    --expanded-height: 66px;
    --boxel-transition: 100ms ease;
    --boxel-button-min-width: var(--expanded-width);
    --boxel-button-min-height: var(--minimized-height);
    height: calc(var(--expanded-height) / 2);
    width: var(--expanded-width);
    background: none;
    border: none;
    padding: 0;
  }
  .add-card-to-neighbor-stack[data-scopedcss-f1d9c53160-93ff8c9f4c]:hover,
  .add-card-to-neighbor-stack[data-scopedcss-f1d9c53160-93ff8c9f4c]:focus:focus-visible,
  .add-card-to-neighbor-stack--active[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    padding: 0;
    height: var(--expanded-height);
    outline-offset: 2px;
  }
  .icon-container[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimized-width);
    height: var(--minimized-height);
    border-radius: inherit;
    background-color: var(--boxel-highlight);
    border: 2px solid rgba(0 0 0 / 50%);
    box-shadow: var(--boxel-deep-box-shadow);
    transition:
      height var(--boxel-transition),
      width var(--boxel-transition);
  }
  .add-card-to-neighbor-stack:hover .icon-container[data-scopedcss-f1d9c53160-93ff8c9f4c],
  .add-card-to-neighbor-stack:focus:focus-visible .icon-container[data-scopedcss-f1d9c53160-93ff8c9f4c],
  .add-card-to-neighbor-stack--active .icon-container[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    width: var(--expanded-width);
    height: var(--expanded-height);
  }
  .add-icon[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    visibility: collapse;
    transition: visibility var(--boxel-transition);
  }
  .add-card-to-neighbor-stack:hover .add-icon[data-scopedcss-f1d9c53160-93ff8c9f4c],
  .add-card-to-neighbor-stack:focus:focus-visible .add-icon[data-scopedcss-f1d9c53160-93ff8c9f4c],
  .add-card-to-neighbor-stack--active .add-icon[data-scopedcss-f1d9c53160-93ff8c9f4c] {
    visibility: visible;
  }

  .icon[data-scopedcss-b1b7579ad7-a685cd56e1] {
    height: 100px;
    width: 100px;
    color: var(--boxel-400);
  }
  .archived-realm-state[data-scopedcss-b1b7579ad7-a685cd56e1] {
    display: flex;
    height: 100%;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    padding: var(--boxel-sp);
  }
  .message[data-scopedcss-b1b7579ad7-a685cd56e1] {
    width: 100%;
    text-align: center;
    text-wrap: pretty;
  }
  .headline[data-scopedcss-b1b7579ad7-a685cd56e1] {
    margin: 0;
    font: 600 var(--boxel-font);
  }
  .detail[data-scopedcss-b1b7579ad7-a685cd56e1] {
    margin: var(--boxel-sp-xxs) 0 0;
    color: var(--boxel-450);
    font: var(--boxel-font-sm);
  }
  .archived-header[data-scopedcss-b1b7579ad7-a685cd56e1] {
    min-height: var(--boxel-form-control-height);
    background-color: var(--boxel-100);
    box-shadow: 0 1px 0 0 rgba(0 0 0 / 15%);
  }

  /* Tint the nested CheckMark glyph; the chip and circle keep their fills. */
  .adorn-checkmark-selected[data-scopedcss-76c40cd607-965b164431] {
    --icon-color: var(--adorn-accent-light);
  }

  .actions-overlay[data-scopedcss-1619eca924-93c669fff3] {
    pointer-events: none;
    /* Allow the type-label tab and selection chip to extend outside the
       overlay's bounding box without being clipped. */
    overflow: visible;
  }
  /* Switch the label background to the darker accent when the
     underlying card is selected. AdornLabel reads
     `--adorn-label-bg` from any cascading ancestor; setting it here
     propagates down through the rendered label. The hover /
     selection outline is supplied by AdornContext via the stroke
     class it yields, applied to the overlay above. */
  .actions-overlay.selected[data-scopedcss-1619eca924-93c669fff3] {
    --adorn-label-bg: var(--adorn-accent);
  }
  /* Position the type-label tab within the overlay. trackLabelOverflow
     writes the inline `top`/`left` each frame; the overlay itself is
     pointer-events:none, so the label re-enables pointer events to
     keep its hover handlers live. The flag shape, colors, and compact
     variant all live in the AdornLabel primitive — this class only
     carries the consumer's placement concerns. */
  .overlay-type-label[data-scopedcss-1619eca924-93c669fff3] {
    position: absolute;
    pointer-events: auto;
    z-index: 1;
  }
  /* The "..." menu trigger and the selection toggle are now shared
     ContextButtons (extra-small size, ghost variant). The menu icon
     inherits the teal label's highlight-foreground color and the
     hover/active background comes from the ghost variant, so the
     rules below only carry the consumer's placement concerns. */
  .overlay-select-button[data-scopedcss-1619eca924-93c669fff3] {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    pointer-events: auto;
    z-index: 1;
  }
  /* Field overlays (containsMany items, linksToMany items) don't get the
     select indicator — see isButtonDisplayed('select'). The label tab is
     still useful so it stays. */
  .actions-overlay.field .overlay-select-button[data-scopedcss-1619eca924-93c669fff3] {
    display: none;
  }
  .actions-overlay.compact .overlay-select-button[data-scopedcss-1619eca924-93c669fff3] {
    bottom: 0.125rem;
    right: 0.125rem;
  }

  :root {
    --stack-card-footer-height: 6rem;
  }

  @keyframes scaleIn-data-scopedcss-e7260d0902-5ced26e3eb {
    from {
      transform: scale(0.1);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes fadeOut-data-scopedcss-e7260d0902-5ced26e3eb {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @keyframes moveForward-data-scopedcss-e7260d0902-5ced26e3eb {
    from {
      transform: translateY(0);
      opacity: 0.8;
    }
    to {
      transform: translateY(25px);
      opacity: 1;
    }
  }
  @keyframes slideUp-data-scopedcss-e7260d0902-5ced26e3eb {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .item[data-scopedcss-e7260d0902-5ced26e3eb] {
    --stack-item-header-height: 3rem;
    justify-self: center;
    position: absolute;
    width: 89%;
    height: inherit;
    z-index: 0;
    pointer-events: none;
    transition:
      margin-top var(--boxel-transition),
      width var(--boxel-transition);
  }
  /* the card takes focus as it opens, as focus is handed back to it, and
     as it is clicked. A ring shows where the keyboard brought focus, so a
     keyboard user can see where it is; a click draws none */
  .item[data-scopedcss-e7260d0902-5ced26e3eb]:focus {
    outline: none;
  }
  .item[data-scopedcss-e7260d0902-5ced26e3eb]:focus-visible {
    outline: 2px solid var(--ring, var(--boxel-highlight));
    outline-offset: -2px;
  }
  .item.opening-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation: scaleIn-data-scopedcss-e7260d0902-5ced26e3eb 0.2s forwards;
  }
  .item.closing-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation: fadeOut-data-scopedcss-e7260d0902-5ced26e3eb 0.2s forwards;
  }
  .item.move-forward-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation: moveForward-data-scopedcss-e7260d0902-5ced26e3eb 0.2s none;
  }
  .item.opening-animation.testing[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation-duration: 0s;
  }
  .item.closing-animation.testing[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation-duration: 0s;
  }
  .item.move-forward-animation.testing[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation-duration: 0s;
  }
  .item.phone-layout.opening-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation-name: slideUp-data-scopedcss-e7260d0902-5ced26e3eb;
  }
  .item.phone-layout.move-forward-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
    animation: none;
  }

  /* reduced motion: a card fades in and out where it stands, on a phone
     as on a wide screen, and the cards under it keep their places rather
     than sliding */
  @keyframes stackItemFadeIn-data-scopedcss-e7260d0902-5ced26e3eb {
    from {
      opacity: 0;
    }
  }

  @keyframes stackItemFadeOut-data-scopedcss-e7260d0902-5ced26e3eb {
    to {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .item[data-scopedcss-e7260d0902-5ced26e3eb] {
      transition: none;
    }

    .item.opening-animation[data-scopedcss-e7260d0902-5ced26e3eb],
    .item.phone-layout.opening-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
      animation-name: stackItemFadeIn-data-scopedcss-e7260d0902-5ced26e3eb;
    }

    .item.closing-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
      animation-name: stackItemFadeOut-data-scopedcss-e7260d0902-5ced26e3eb;
    }

    .item.move-forward-animation[data-scopedcss-e7260d0902-5ced26e3eb] {
      animation: none;
    }
  }

  .item.buried[data-scopedcss-e7260d0902-5ced26e3eb] {
    --stack-item-header-height: 2.5rem;
    --realm-icon-border-radius: 4px;
  }

  .item.expanded[data-scopedcss-e7260d0902-5ced26e3eb],
  .item.phone-layout[data-scopedcss-e7260d0902-5ced26e3eb] {
    top: 0;
    left: 0;
    width: 100%;
  }
  .item.expanded[data-scopedcss-e7260d0902-5ced26e3eb] {
    pointer-events: auto;
  }
  /* A buried phone card is covered by the top card, so it is shown
     only while the card above it slides in or out. */
  .item.phone-layout[data-scopedcss-e7260d0902-5ced26e3eb]:not(
      .expanded,
      .closing-animation,
      :has(+ .item.opening-animation),
      :has(+ .item.closing-animation)
    ) {
    visibility: hidden;
  }
  /* Its header moves to the top bar once it is the top card, so it
     is left out while buried to keep the content from jumping. */
  .item.phone-layout:not(.expanded) .showing-card .stack-item-header[data-scopedcss-e7260d0902-5ced26e3eb] {
    display: none;
  }
  /* Propagate height through the chain so bottom-docked chrome
     lands at the viewport's bottom edge. .stack-item-content
     and .stack-item-preview default to overflow: auto with no
     height — without min-height: 0 the chain breaks and the
     studio's flex: 1 has no defined parent height. Keep
     overflow: auto (matches host-mode pattern) so isolated
     content longer than the viewport can scroll. */
  .item:is(.expanded, .phone-layout) .stack-item-content[data-scopedcss-e7260d0902-5ced26e3eb],
  .item:is(.expanded, .phone-layout) .stack-item-preview[data-scopedcss-e7260d0902-5ced26e3eb] {
    min-height: 0;
  }
  .item:is(.expanded, .phone-layout) .stack-item-card[data-scopedcss-e7260d0902-5ced26e3eb] {
    border-radius: 0;
    box-shadow: none;
  }
  .item:is(.expanded, .phone-layout) .stack-item-card.showing-card[data-scopedcss-e7260d0902-5ced26e3eb] {
    /* With the corners and shadow gone, the tray's background
       dissolves too — the tray becomes a positioning anchor
       only. Body content (.stack-item-content)
       inside renders normally without inheriting transparency
       because background, not opacity, is what's faded. */
    background: transparent;
    /* Header is portaled into the top bar pill (see
       expanded-card-header-slot in submode-layout); the inline
       CardHeader is not rendered for expanded cards (the if/else
       in the template picks the in-element branch). Drop the
       grid header row so the body fills the entire card. */
    grid-template-rows: 1fr;
  }
  /* When the top card is expanded, fade out the underlying
     buried cards so the user isn't visually distracted by the
     stack history behind the expanded surface. Sibling selector
     within .operator-mode-stack > .inner; uses :has() to match
     buried items that have an expanded sibling AFTER them in the
     DOM (top card = last in DOM order). */
  .item[data-scopedcss-e7260d0902-5ced26e3eb]:not(.expanded, .phone-layout):has(~ .item.expanded) {
    opacity: 0;
    transition: opacity 380ms ease;
  }
  /* A faded card takes no clicks either. The deepest buried cards
     rise into the top bar's strip, which passes clicks through to
     the stack, and a click must never act on a card the user can't
     see. */
  .item:not(.expanded):has(~ .item.expanded) > .stack-item-card[data-scopedcss-e7260d0902-5ced26e3eb] {
    pointer-events: none;
  }

  .stack-item-card[data-scopedcss-e7260d0902-5ced26e3eb] {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-rows: var(--stack-item-header-height) auto;
    border-radius: var(--boxel-border-radius-xl);
    box-shadow: var(--boxel-deep-box-shadow);
    pointer-events: auto;
    overflow: hidden;
  }
  .stack-item-header[data-scopedcss-e7260d0902-5ced26e3eb] {
    --boxel-card-header-padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
    border-radius: 0;
    z-index: 1;
    max-width: max-content;
    height: var(--stack-item-header-height);
    min-width: 100%;
  }

  .stack-item-content[data-scopedcss-e7260d0902-5ced26e3eb] {
    overflow: auto;
  }

  .stack-item-preview[data-scopedcss-e7260d0902-5ced26e3eb] {
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
  }

  .buried > .stack-item-card[data-scopedcss-e7260d0902-5ced26e3eb] {
    border-radius: var(--boxel-border-radius-lg);
    background-color: var(--boxel-200);
  }

  .buried .stack-item-header[data-scopedcss-e7260d0902-5ced26e3eb] {
    font: 600 var(--boxel-font-xs);
    gap: var(--boxel-sp-xxxs);
    --boxel-card-header-text-font: var(--boxel-font-size-xs);
    --boxel-card-header-realm-icon-size: var(--boxel-icon-sm);
    --boxel-card-header-card-type-icon-size: var(--boxel-icon-xs);
  }

  .buried .stack-item-content[data-scopedcss-e7260d0902-5ced26e3eb] {
    display: none;
  }

  .loading[data-scopedcss-e7260d0902-5ced26e3eb] {
    grid-area: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - var(--stack-item-header-height));
    padding: var(--boxel-sp);
    color: var(--boxel-dark);

    --icon-color: var(--boxel-dark);
  }
  .loading__message[data-scopedcss-e7260d0902-5ced26e3eb] {
    margin-left: var(--boxel-sp-5xs);
  }
  .loading[data-scopedcss-e7260d0902-5ced26e3eb] .boxel-loading-indicator {
    display: flex;
    justify: center;
    align-items: center;
  }

  /* The portaled CardHeader inside takes pill styling — white
     rounded box, realm icon left-docked, actions right-docked,
     left-justified type/title. Reuses CardHeader's existing
     actions structure; just re-skinned via this class. */
  .expanded-card-header-pill[data-scopedcss-e7260d0902-5ced26e3eb] {
    --boxel-card-header-padding: var(--boxel-sp-4xs)
      var(--operator-mode-spacing);
    --boxel-card-header-gap: var(--operator-mode-spacing);
    height: var(--container-button-size);
    background: var(--boxel-light);
    border-radius: var(--boxel-border-radius-2xl);
    box-shadow: var(--submode-bar-item-box-shadow);
    outline: var(--submode-bar-item-outline);
  }
  /* Title in the expanded pill stays left-justified inside the
     center column (overrides CardHeader's default text-align: center). */
  .expanded-card-header-pill[data-scopedcss-e7260d0902-5ced26e3eb] .card-type-display-name {
    text-align: left;
    text-box-trim: trim-both;
  }
  /* Pencil button in expanded edit mode — solid green with dark
     icon for contrast (matches the active expand button). */
  .expanded-card-header-pill[data-scopedcss-e7260d0902-5ced26e3eb] .icon-save,
  .expanded-card-header-pill[data-scopedcss-e7260d0902-5ced26e3eb] .icon-save:hover {
    background-color: var(--boxel-highlight);
    color: var(--boxel-dark);
  }

  :root {
    --stack-lg-padding-top: calc(
      var(--operator-mode-top-bar-item-height) +
        (2 * (var(--operator-mode-spacing)))
    );
    --stack-md-padding-top: calc(var(--stack-lg-padding-top) / 2);
    --stack-sm-padding-top: var(--operator-mode-spacing);

    --stack-padding-top: var(--stack-lg-padding-top);
    --stack-padding-bottom: var(--boxel-sp-lg);
    --stack-padding-inline: var(--boxel-sp-lg);
  }
  .operator-mode-stack[data-scopedcss-ae8de5247b-428cb46668] {
    position: relative;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    padding-top: var(--stack-padding-top);
    padding-inline: var(--stack-padding-inline);
    padding-bottom: var(--stack-padding-bottom);
    z-index: 0;
    transition:
      padding-top var(--boxel-transition),
      padding-inline var(--boxel-transition);
  }
  .stack-medium-padding-top[data-scopedcss-ae8de5247b-428cb46668]:not(:has(.item.expanded)) {
    --stack-padding-top: var(--stack-md-padding-top);
  }
  .stack-small-padding-top[data-scopedcss-ae8de5247b-428cb46668]:not(:has(.item.expanded)) {
    --stack-padding-top: var(--stack-sm-padding-top);
  }
  .operator-mode-stack[data-scopedcss-ae8de5247b-428cb46668]:has(.item.expanded) {
    --stack-padding-inline: 0;
    --stack-padding-bottom: 0;
  }
  .operator-mode-stack[data-scopedcss-ae8de5247b-428cb46668]
    .field-component-card.fitted-format .missing-template {
    margin-top: calc(-1 * var(--boxel-sp-lg));
    border-radius: 0;
    border-bottom-left-radius: var(--boxel-form-control-border-radius);
    border-bottom-right-radius: var(--boxel-form-control-border-radius);
  }
  .inner[data-scopedcss-ae8de5247b-428cb46668] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-bottom-left-radius: var(--boxel-border-radius);
    border-bottom-right-radius: var(--boxel-border-radius);
  }

  .code-mode-file-options[data-scopedcss-b87edeefb5-485eacf324] {
    list-style-type: disc;
    padding-left: var(--boxel-sp);
    line-height: calc(18 / 11);
  }

  .interact-submode-layout[data-scopedcss-b87edeefb5-2b7c349e4c] {
    --submode-bar-item-outline: var(--boxel-border-flexible);
    --submode-bar-item-box-shadow: var(--boxel-deep-box-shadow);
  }

  /* The top bar floats over the stacks, and the headers of buried
     stack items peek out in the strip it covers. The bar's own box
     lets pointer events through to them; only its controls take
     clicks. */
  .interact-submode-layout[data-scopedcss-b87edeefb5-2b7c349e4c] .submode-layout-top-bar {
    position: absolute;
    pointer-events: none;
  }
  .interact-submode-layout[data-scopedcss-b87edeefb5-2b7c349e4c] .submode-layout-top-bar > * {
    pointer-events: auto;
  }

  .interact-submode[data-scopedcss-b87edeefb5-2b7c349e4c] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-position: center;
    background-size: cover;
    height: 100%;
  }
  .stacks[data-scopedcss-b87edeefb5-2b7c349e4c] {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stack-with-bg-image[data-scopedcss-b87edeefb5-2b7c349e4c]:before {
    content: ' ';
    height: 100%;
    width: 2px;
    background-color: var(--boxel-dark);
    display: block;
    position: absolute;
    top: 0;
    left: -1px;
  }
  .stack-with-bg-image[data-scopedcss-b87edeefb5-2b7c349e4c]:first-child:before {
    display: none;
  }
  .neighbor-stack-trigger[data-scopedcss-b87edeefb5-2b7c349e4c] {
    flex: 0;
    flex-basis: var(--container-button-size);
    position: absolute;
    z-index: var(--boxel-layer-floating-button);
  }
  /* Glass-morphism effect on the background */
  .interact-submode.has-expanded-card[data-scopedcss-b87edeefb5-2b7c349e4c] {
    background-color: var(--boxel-light-hover-35);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
  }
  .interact-submode:not(.has-expanded-card)
    .stacks.is-multi-stack
    .stack[data-scopedcss-b87edeefb5-2b7c349e4c]:first-of-type {
    padding-right: var(--operator-mode-spacing);
  }
  .interact-submode:not(.has-expanded-card)
    .stacks.is-multi-stack
    .stack[data-scopedcss-b87edeefb5-2b7c349e4c]:last-of-type {
    padding-left: var(--operator-mode-spacing);
  }
  /* In a multi-stack layout, collapse the stack that doesn't hold
     the expanded card so the expanded card fills the full width. */
  .interact-submode.has-expanded-card
    .stacks[data-scopedcss-b87edeefb5-2b7c349e4c]
    >  .operator-mode-stack:not(:has(.item.expanded)) {
    display: none;
  }
  .stack-trigger-right[data-scopedcss-b87edeefb5-2b7c349e4c] {
    right: 2px;
  }
  .stack-trigger-left[data-scopedcss-b87edeefb5-2b7c349e4c] {
    left: 2px;
  }

  .choose-file-modal[data-scopedcss-a48016df7d-506afb1331] {
    --horizontal-gap: var(--boxel-sp-xs);
    --stack-card-footer-height: auto;
  }
  .choose-file-modal[data-scopedcss-a48016df7d-506afb1331] .dialog-box__content {
    display: flex;
    flex-direction: column;
  }
  .choose-file-modal[data-drop-zone-active][data-scopedcss-a48016df7d-506afb1331]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--boxel-darker-hover);
    pointer-events: none;
    z-index: 2;
  }
  .choose-file-modal[data-drop-zone-active][data-scopedcss-a48016df7d-506afb1331]::after {
    content: attr(data-drop-zone-label);
    position: absolute;
    inset: 0;
    padding: var(--boxel-sp-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--boxel-light);
    font: 600 var(--boxel-font-lg);
    text-align: center;
    pointer-events: none;
    z-index: 3;
  }
  .choose-file-modal[data-scopedcss-a48016df7d-506afb1331] >  .boxel-modal__inner {
    display: flex;
    position: relative;
    z-index: 1;
  }
  [data-scopedcss-a48016df7d-506afb1331] .choose-file-modal__container {
    height: 32rem;
  }
  .field + .field[data-scopedcss-a48016df7d-506afb1331] {
    margin-top: var(--boxel-sp-sm);
  }
  .field[data-scopedcss-a48016df7d-506afb1331] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
  }
  .field[data-scopedcss-a48016df7d-506afb1331] .label-container {
    width: 8rem;
  }
  .field[data-scopedcss-a48016df7d-506afb1331] .content {
    flex-grow: 1;
    max-width: 100%;
    min-width: 13rem;
  }
  .footer[data-scopedcss-a48016df7d-506afb1331] {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: var(--boxel-sp-xs);
  }
  .footer-left[data-scopedcss-a48016df7d-506afb1331] {
    min-width: 0;
    flex: 1;
  }
  .footer-buttons[data-scopedcss-a48016df7d-506afb1331] {
    display: flex;
    gap: var(--horizontal-gap);
    align-items: center;
    margin-left: auto;
  }
  .realm-chooser[data-scopedcss-a48016df7d-506afb1331] {
    width: 100%;
  }
  .choose-file[data-scopedcss-a48016df7d-506afb1331] {
    overflow: visible;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .choose-file[data-scopedcss-a48016df7d-506afb1331] .label-container {
    flex: 0 0 8rem;
  }
  .choose-file[data-scopedcss-a48016df7d-506afb1331] .content {
    height: 230px;
    overflow: auto;
    align-items: flex-start;
    border: var(--boxel-border);
    border-radius: var(--boxel-border-radius);
    padding: var(--boxel-sp-xxs);
    flex: 1 1 auto;
    min-width: 0;
  }
  .choose-file[data-scopedcss-a48016df7d-506afb1331] .content:has(:focus-visible) {
    outline: 2px solid var(--ring, var(--boxel-highlight-hover));
    outline-offset: 2px;
  }
  .upload-progress[data-scopedcss-a48016df7d-506afb1331] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    flex: 1;
  }
  .upload-spinner[data-scopedcss-a48016df7d-506afb1331] {
    --boxel-loading-indicator-size: 1.25em;
  }
  .upload-file-name[data-scopedcss-a48016df7d-506afb1331] {
    font: var(--boxel-font-xs);
    color: var(--boxel-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .upload-error-row[data-scopedcss-a48016df7d-506afb1331] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    flex: 1;
    min-width: 0;
  }
  .pick-error[data-scopedcss-a48016df7d-506afb1331] {
    margin-bottom: var(--boxel-sp-xs);
    color: var(--boxel-error-200);
    font: var(--boxel-font-xs);
    overflow-wrap: anywhere;
  }
  .upload-error[data-scopedcss-a48016df7d-506afb1331] {
    color: var(--boxel-error-200);
    font: var(--boxel-font-xs);
    overflow-wrap: anywhere;
  }

  /* Ensure keyboard focus indicators are always visible throughout the modal */
  [data-scopedcss-a48016df7d-506afb1331] :focus-visible {
    outline: 2px solid var(--boxel-highlight);
    outline-offset: 2px;
  }

  .markdown-embed-chooser-tab-pills[data-scopedcss-8a73de4d70-6141ddc3a2] {
    display: flex;
    width: 100%;
    gap: var(--boxel-sp-4xs);
    padding: var(--boxel-sp-5xs);
    border-radius: 999px;
    background-color: var(--boxel-200);
  }
  .markdown-embed-chooser-tab-pills__tab[data-scopedcss-8a73de4d70-6141ddc3a2] {
    appearance: none;
    flex: 1 1 0;
    border: none;
    background: transparent;
    padding: var(--boxel-sp-4xs) var(--boxel-sp);
    border-radius: 999px;
    font: 600 var(--boxel-font-sm);
    color: var(--boxel-450);
    cursor: pointer;
    line-height: 1.4;
  }
  .markdown-embed-chooser-tab-pills__tab[data-scopedcss-8a73de4d70-6141ddc3a2]:hover {
    color: var(--boxel-dark);
  }
  .markdown-embed-chooser-tab-pills__tab.is-active[data-scopedcss-8a73de4d70-6141ddc3a2] {
    color: var(--boxel-dark);
    background-color: var(--boxel-light);
    box-shadow: var(--boxel-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.15));
  }
  .markdown-embed-chooser-tab-pills__tab[data-scopedcss-8a73de4d70-6141ddc3a2]:focus-visible {
    outline: 2px solid var(--boxel-highlight);
    outline-offset: 2px;
  }

  .markdown-embed-chooser-tab-panel[data-scopedcss-fa18e530e1-62cee8b72c] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--boxel-light);
  }
  .markdown-embed-chooser-tab-panel__left[data-scopedcss-fa18e530e1-62cee8b72c],
  .markdown-embed-chooser-tab-panel__right[data-scopedcss-fa18e530e1-62cee8b72c] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  /* The chooser column is narrower than the preview column (~2:3), per the
     design. A single full-height divider between the two columns — no boxed
     borders, so the panels read as one continuous surface. The left
     column stacks the tab pills above the mini chooser. */
  .markdown-embed-chooser-tab-panel__left[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--boxel-300);
  }
  /* Pills sit at the top of the search column, directly above the search
     bar; the chooser below fills the remaining height. */
  .markdown-embed-chooser-tab-panel__tabbar[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: var(--boxel-sp-sm) var(--boxel-sp-xs) 0;
  }
  /* The chooser (or current-target tile) fills the column below the pills.
     The mini choosers set their own `height: 100%`, which would resolve
     against the full column height and overflow past the pills — grow to
     the remaining space instead. */
  .markdown-embed-chooser-tab-panel__left[data-scopedcss-fa18e530e1-62cee8b72c] >  .mini-card-chooser,
  .markdown-embed-chooser-tab-panel__left[data-scopedcss-fa18e530e1-62cee8b72c] >  .mini-file-chooser,
  .markdown-embed-chooser-tab-panel__current[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .markdown-embed-chooser-tab-panel__right[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 3 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* The preview column reads as an off-white surface, distinct from the
       white chooser column on the left — same token as the inner viewport. */
    background-color: var(--boxel-100);
  }
  /* Centered placeholder shown until a row is picked and its instance
     resolves; the pane mounts in its place once a target arrives. */
  .markdown-embed-chooser-tab-panel__empty[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--boxel-sp);
    font: var(--boxel-font-sm);
    color: var(--boxel-450);
    text-align: center;
  }
  .markdown-embed-chooser-tab-panel__current[data-scopedcss-fa18e530e1-62cee8b72c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--boxel-sp);
    padding: var(--boxel-sp);
    text-align: center;
  }
  /* The fitted chip (and its loading stand-in) carries its own fixed
     footprint; the column centers it, so keep flex from shrinking it on the
     main axis. `align-items: center` already prevents cross-axis stretch. */
  .markdown-embed-chooser-tab-panel__current-preview[data-scopedcss-fa18e530e1-62cee8b72c],
  .markdown-embed-chooser-tab-panel__current-loading[data-scopedcss-fa18e530e1-62cee8b72c] {
    flex: 0 0 auto;
  }
  /* Same 250×65 footprint as the resolved fitted chip so Replace / Remove
     hold their position while the preload resolves. */
  .markdown-embed-chooser-tab-panel__current-loading[data-scopedcss-fa18e530e1-62cee8b72c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 65px;
    border: 1px solid var(--boxel-300);
    border-radius: var(--boxel-border-radius);
    background-color: var(--boxel-light);
  }
  .markdown-embed-chooser-tab-panel__current-actions[data-scopedcss-fa18e530e1-62cee8b72c] {
    display: flex;
    gap: var(--boxel-sp-xs);
  }

  .markdown-embed-chooser-tabs[data-scopedcss-0dbee9ca57-eb43d4fd92] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .markdown-embed-chooser-tabs__panel[data-scopedcss-0dbee9ca57-eb43d4fd92] {
    flex: 1 1 auto;
    min-height: 0;
  }
  .markdown-embed-chooser-tabs__panel.is-hidden[data-scopedcss-0dbee9ca57-eb43d4fd92] {
    display: none;
  }

  /* Collapse the (empty) modal header band to nothing. With @title='' and
     no <:header> content it holds only the built-in close button, which is
     position:absolute and out of flow — so the band disappears while the
     × keeps floating at the modal's top-right corner. */
  .markdown-embed-chooser-modal[data-scopedcss-67166bb1d5-5680c47783] .dialog-box__header {
    min-height: 0;
    padding: 0;
  }
  /* Full-bleed body: the two columns and the divider between them run to
     the modal edges, so the content gets no padding of its own — each
     column's inner components supply their own insets. */
  .markdown-embed-chooser-modal[data-scopedcss-67166bb1d5-5680c47783] .dialog-box__content {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  [data-scopedcss-67166bb1d5-5680c47783] .markdown-embed-chooser-modal__container {
    height: 36rem;
  }
  /* Re-center the fixed-height modal box vertically. Operator mode ships a
     global `.operator-mode .boxel-modal__inner { display: block }` that
     outranks boxel-ui's base `.boxel-modal__inner { display: flex }`, which
     drops the inner's flex centering and top-aligns our 36rem box. Restore
     flex on our own inner so `@centered` actually centers it. */
  .markdown-embed-chooser-modal[data-scopedcss-67166bb1d5-5680c47783] >  .boxel-modal__inner {
    display: flex;
  }

  .create-listing-modal[data-scopedcss-cffe7d4dea-1090c087f6] {
    --horizontal-gap: var(--boxel-sp-xs);
    --stack-card-footer-height: auto;
  }
  .create-listing-modal[data-scopedcss-cffe7d4dea-1090c087f6] >  .boxel-modal__inner {
    display: flex;
  }
  .create-listing-modal[data-scopedcss-cffe7d4dea-1090c087f6] .dialog-box__content {
    display: flex;
    flex-direction: column;
  }
  .field-contents[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: flex;
    align-items: center;
    gap: var(--horizontal-gap);
  }
  .examples-field[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: flex;
    flex-direction: column;
    gap: var(--boxel-sp-xs);
  }
  .field-hint[data-scopedcss-cffe7d4dea-1090c087f6] {
    font: var(--boxel-font-xs);
    color: var(--boxel-450);
    margin: 0;
  }
  .add-cards-button[data-scopedcss-cffe7d4dea-1090c087f6] {
    --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
    align-self: flex-start;
    gap: var(--boxel-sp-xxxs);
  }
  .no-cards-message[data-scopedcss-cffe7d4dea-1090c087f6] {
    font: var(--boxel-font-sm);
    color: var(--boxel-500);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--boxel-sp-sm);
    background-color: var(--boxel-100);
    border-radius: var(--boxel-border-radius);
    min-height: 3rem;
    width: 100%;
  }
  .selected-cards-list[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--boxel-sp-xs);
    min-width: 0;
    padding: var(--boxel-sp-sm);
    background-color: var(--boxel-100);
    border-radius: var(--boxel-border-radius);
    width: 100%;
    align-items: start;
  }
  .selected-card-atom[data-scopedcss-cffe7d4dea-1090c087f6] {
    position: relative;
    min-width: 0;
    display: inline-flex;
    align-items: center;
  }
  .selected-card-atom[data-scopedcss-cffe7d4dea-1090c087f6]
    .field-component-card.atom-format.display-container-true {
    min-width: 0;
  }
  .selected-card-atom[data-scopedcss-cffe7d4dea-1090c087f6]
    .field-component-card.atom-format.display-container-true {
    padding-right: calc(
      var(--boxel-sp-xs) + var(--boxel-icon-sm) + var(--boxel-sp-6xs)
    );
  }
  .selected-card-atom[data-scopedcss-cffe7d4dea-1090c087f6] .card {
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .selected-card-remove-button[data-scopedcss-cffe7d4dea-1090c087f6] {
    --icon-color: var(--boxel-700);
    --icon-bg: transparent;
    --icon-border: transparent;
    --boxel-icon-button-width: var(--boxel-icon-sm);
    --boxel-icon-button-height: var(--boxel-icon-sm);
    position: absolute;
    top: 50%;
    right: var(--boxel-sp-4xs);
    transform: translateY(-50%);
    border-radius: 999px;
    opacity: 0.72;
  }
  .selected-card-remove-button[data-scopedcss-cffe7d4dea-1090c087f6]:hover,
  .selected-card-remove-button[data-scopedcss-cffe7d4dea-1090c087f6]:focus-visible {
    --icon-bg: var(--boxel-200);
    --icon-border: var(--boxel-200);
    --icon-color: var(--boxel-900);
    opacity: 1;
  }
  .selected-card-loading[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 3rem;
    width: 100%;
  }
  [data-scopedcss-cffe7d4dea-1090c087f6] .create-listing {
    height: 34rem;
  }
  .footer-loading-message[data-scopedcss-cffe7d4dea-1090c087f6] {
    font: var(--boxel-font-sm);
    color: var(--boxel-500);
    margin: 0 auto 0 0;
    flex: 1;
    text-align: left;
    animation: fade-in-data-scopedcss-cffe7d4dea-1090c087f6 0.3s ease-out;
  }
  @keyframes fade-in-data-scopedcss-cffe7d4dea-1090c087f6 {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .description[data-scopedcss-cffe7d4dea-1090c087f6] {
    font: var(--boxel-font-sm);
    color: var(--boxel-500);
    margin: 0 0 var(--boxel-sp-sm);
  }
  .field + .field[data-scopedcss-cffe7d4dea-1090c087f6] {
    margin-top: var(--boxel-sp-sm);
  }
  .field[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
  }
  .field[data-scopedcss-cffe7d4dea-1090c087f6] .label-container {
    width: 8rem;
    flex-shrink: 0;
  }
  .field[data-scopedcss-cffe7d4dea-1090c087f6] .content {
    flex-grow: 1;
    min-width: 0;
  }
  .examples-field-container[data-scopedcss-cffe7d4dea-1090c087f6] >  .content {
    align-self: start;
  }
  .realm-icon[data-scopedcss-cffe7d4dea-1090c087f6] {
    --boxel-realm-icon-size: 1rem;
  }
  .footer-buttons[data-scopedcss-cffe7d4dea-1090c087f6] {
    display: flex;
    align-items: center;
    gap: var(--horizontal-gap);
    width: 100%;
    justify-content: flex-end;
  }

  :root {
    --boxel-sp-xxl: calc(var(--boxel-sp) * 2.5); /* 40px */
    --boxel-sp-lg: calc(var(--boxel-sp) * 1.25); /* 20px */
    --boxel-sp-xs: calc(var(--boxel-sp) * 0.625); /* 10px */
    --operator-mode-bg-color: #686283;
    --boxel-modal-max-width: 100%;
    --container-button-size: 2.5rem;
    --operator-mode-left-column: 21.5rem; /* 344px */
    --operator-mode-spacing: var(--boxel-sp-xs);
    --operator-mode-top-bar-item-height: var(--container-button-size);
    --operator-mode-bottom-bar-item-height: var(--container-button-size);
  }
  button:focus:not(:disabled) {
    outline-color: var(
      --boxel-header-text-color,
      var(--ring, var(--boxel-highlight))
    );
    outline-offset: var(--host-outline-offset, 2px);
  }
  button:focus:not(:focus-visible) {
    outline-color: transparent;
  }
  dialog:focus {
    outline: none;
  }
  .operator-mode .boxel-modal__inner {
    display: block;
  }
  .input-container .invalid + .validation-icon-container {
    display: none;
  }
  /* with the icon hidden, give back the column BoxelInput reserves */
  
    .input-container .boxel-input.invalid:has(+ .validation-icon-container)
   {
    padding-inline-end: var(--boxel-input-padding-inline-end, 0);
  }
  .operator-mode[data-scopedcss-3078caf173-f244654e92] {
    background: var(--operator-mode-bg-color);
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
  }
  .operator-mode > div[data-scopedcss-3078caf173-f244654e92] {
    align-items: flex-start;
  }
  .payment-setup-container[data-scopedcss-3078caf173-f244654e92] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: var(--boxel-sp-lg);
  }
  .loading-spinner-container[data-scopedcss-3078caf173-f244654e92] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .loading-spinner[data-scopedcss-3078caf173-f244654e92] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .loading-spinner-text[data-scopedcss-3078caf173-f244654e92] {
    color: var(--boxel-light);
    font-size: 12px;
    font-weight: 600;
  }
  .loading[data-scopedcss-3078caf173-f244654e92] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: var(--boxel-sp);
    color: var(--boxel-light);
    font: 500 var(--boxel-font);

    --icon-color: var(--boxel-light);
  }
  .loading__message[data-scopedcss-3078caf173-f244654e92] {
    margin-left: var(--boxel-sp-5xs);
  }
  .loading[data-scopedcss-3078caf173-f244654e92] .boxel-loading-indicator {
    display: flex;
    justify: center;
    align-items: center;
  }

  @media (max-width: 30rem) {
    :root {
      --operator-mode-spacing: var(--boxel-sp-3xs);
      --stack-padding-inline: var(--boxel-sp-xs);
    }
    [data-scopedcss-3078caf173-f244654e92] .neighbor-stack-trigger,[data-scopedcss-3078caf173-f244654e92] .operator-mode-stack ~ .operator-mode-stack {
      display: none;
    }
  }

  .secure-window-fallback[data-scopedcss-b6abd13aa6-3b07a86920] {
    --boxel-modal-offset-top: var(--boxel-sp-xxxl);
    height: auto;
  }
  p[data-scopedcss-b6abd13aa6-3b07a86920] {
    margin: 0 0 var(--boxel-sp-sm);
  }
  .footer-buttons[data-scopedcss-b6abd13aa6-3b07a86920] {
    display: flex;
    align-items: center;
    gap: var(--boxel-sp-xs);
    width: 100%;
    justify-content: flex-end;
  }

  .markdown-render-container[data-scopedcss-2d0f601487-7cc62b22b1] {
    white-space: pre;
  }

  /* The pdf slot's flush marker must add no box of its own, or it would
     interpose a formatting context between the page and the component's
     `break-*`/`@page` flow. `display: contents` makes the wrapper carry
     its `data-render-capture` marker while laying out as if it were
     not there. */
  .pdf-flow[data-scopedcss-81e9613936-37157d69a0] {
    display: contents;
  }

  .title[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    font: 600 var(--boxel-font-md);
    color: var(--foreground);
    margin: 0 0 var(--boxel-sp-sm);
    padding: 0;
  }
  .subtitle[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    margin: 0 0 var(--boxel-sp-lg);
    color: var(--foreground);
    font: var(--boxel-font-sm);
    line-height: 1.4;
  }
  .signed-in-user[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .intro-text[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    margin: 0;
  }
  .notice[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    margin: 0;
    color: var(--muted-foreground);
    font: var(--boxel-font-xs);
    line-height: 1.4;
  }
  .notice code[data-scopedcss-d0cd89c9fc-fb1cff37af] {
    font-family: var(--boxel-monospace-font-family, monospace);
  }

  body {
    background: transparent;
  }

  .connect[data-scopedcss-4b7bee7508-095872c91e] {
    position: absolute;
    right: 0;

    background-color: var(--boxel-700);
    border-radius: var(--boxel-border-radius-sm);
    color: var(--boxel-light);
    display: flex;
    gap: var(--boxel-sp-xxs);
    font-weight: 400;
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
  }

  .session-container[data-scopedcss-4b7bee7508-095872c91e] {
    --profile-avatar-icon-size: 28.5px;
    --profile-avatar-icon-border: 1px;

    position: absolute;
    right: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    background: var(--boxel-700);

    border: var(--boxel-border-flexible);
    border-top-left-radius: var(--boxel-border-radius-sm);
    border-bottom-left-radius: var(--boxel-border-radius-sm);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    padding: var(--boxel-sp-xxs);
    padding-left: var(--boxel-sp-sm);

    gap: var(--boxel-sp-sm);
  }

  .connect[data-scopedcss-4b7bee7508-dede08285f] {
    position: absolute;
    right: 0;

    background-color: var(--boxel-700);
    border-radius: var(--boxel-border-radius-sm);
    color: var(--boxel-light);
    display: flex;
    gap: var(--boxel-sp-xxs);
    font-weight: 400;
    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
  }

  .session-loading[data-scopedcss-160f964496-db64a780e6] {
    --foreground: var(--boxel-light);
    background-color: #686283;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }