/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@layer tokens, reset, layout, components, utilities;

@layer tokens {
  .tilde {
    color-scheme: light dark;
    --color-bg: #faf7f0;
    --color-fg: #171411;
    --color-muted: #6f6860;
    --color-border: #ded6cb;
    --color-link: #5b2bbf;
    --color-success: #2f7d32;
    --color-error: #b3261e;
    --color-warning: #8a5a00;
    --syntax-keyword: #5b2bbf;
    --syntax-module: #7a3e00;
    --syntax-function: #214f8f;
    --syntax-string: #7a3d00;
    --syntax-constant: #8a5a00;
    --syntax-attribute: #7a2f6d;
    --syntax-comment: #7b746c;
    --syntax-punctuation: #8f8378;
    --surface-tool: #ded6cb59;
    --surface-tool-pending: #8a5a001a;
    --surface-tool-success: #2f7d321a;
    --surface-tool-error: #b3261e1a;
    --scrollbar-thumb: #b9aea1;
    --scrollbar-thumb-hover: #8f8378;
    --space-cell: 1ch;
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: .75rem;
    --space-lg: 1.25rem;
    --space-page: 24px;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --text-base: 16px;
    --leading-base: 1.55;
    --content-max: 920px;
  }

  @media (prefers-color-scheme: dark) {
    .tilde {
      --color-bg: #11100f;
      --color-fg: #eee7dd;
      --color-muted: #aaa096;
      --color-border: #302c28;
      --color-link: #c7a8ff;
      --color-success: #8bc48a;
      --color-error: #ffb4ab;
      --color-warning: #e0b35a;
      --syntax-keyword: #c7a8ff;
      --syntax-module: #ffc777;
      --syntax-function: #8cc7ff;
      --syntax-string: #ce9178;
      --syntax-constant: #e0b35a;
      --syntax-attribute: #ff9ad5;
      --syntax-comment: #8d8278;
      --syntax-punctuation: #aaa096;
      --surface-tool: #302c2873;
      --surface-tool-pending: #e0b35a21;
      --surface-tool-success: #8bc48a21;
      --surface-tool-error: #ffb4ab21;
      --scrollbar-thumb: #625a52;
      --scrollbar-thumb-hover: #8d8278;
    }
  }
}

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

  html {
    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    margin: 0;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    border-color: currentColor;
  }

  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }

  button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
  }

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }
}

@layer layout {
  html, body {
    height: 100%;
    background: none;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .tilde {
    position: relative;
    background: var(--color-bg);
    color: var(--color-fg);
    font: var(--text-base) / var(--leading-base) var(--font-mono);
    max-width: var(--content-max);
    height: 100dvh;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--space-page);
    display: flex;
    flex-direction: column;
  }

  .tilde:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--color-bg);
  }

  .tilde .transcript {
    flex: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tilde .dock {
    flex: none;
    z-index: 10;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 0 0 max(var(--space-xs), env(safe-area-inset-bottom));
    margin-top: 0;
  }
}

@layer components {
  .tilde {
    & .block {
      margin: 0 0 var(--space-lg);
    }

    & .label, & .muted, & .key {
      color: var(--color-muted);
    }

    & .label {
      margin-bottom: var(--space-xs);
    }

    & .message {
      & .body {
        white-space: normal;
      }
    }

    & .compaction {
      padding: var(--space-sm) var(--space-md);
      background: var(--surface-tool);
      border: 1px solid var(--color-border);
      border-radius: 6px;

      & .header {
        margin-bottom: var(--space-xs);
      }

      & .body {
        white-space: normal;
      }
    }

    & .plain {
      white-space: pre-wrap;
    }
  }
}

@layer components {
  .tilde .markdown {
    white-space: normal;
    overflow-x: auto;
  }

  .tilde .markdown p, .tilde .markdown ul, .tilde .markdown ol, .tilde .markdown pre {
    margin: 0 0 var(--space-md);
  }

  .tilde .markdown > :last-child {
    margin-bottom: 0;
  }

  .tilde .markdown a {
    color: var(--color-link);
    text-underline-offset: 2px;
  }

  .tilde .markdown hr {
    border: 0;
    height: 3lh;
    margin: var(--space-md) 0;
    color: var(--color-muted);
    opacity: .65;
    background: linear-gradient(currentColor, currentColor) 0 .5lh / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 1.5lh / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 2.5lh / 100% 1px no-repeat;
  }

  .tilde .markdown pre {
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    overflow-x: auto;
  }

  .tilde .markdown table {
    border-collapse: collapse;
    border-spacing: 0;
    font: inherit;
    width: auto;
    max-width: 100%;
    margin: 0 0 1lh;
  }

  .tilde .markdown th, .tilde .markdown td {
    border: 1px solid var(--color-border);
    padding: 0 var(--space-cell);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }

  .tilde .markdown th {
    color: var(--color-muted);
    font-weight: 400;
  }

  .tilde .markdown th[align="center"], .tilde .markdown td[align="center"] {
    text-align: center;
  }

  .tilde .markdown th[align="right"], .tilde .markdown td[align="right"] {
    text-align: right;
  }

  .tilde .markdown code {
    border: 1px solid var(--color-border);
    padding: 0 .2em;
  }

  .tilde .markdown pre code {
    border: 0;
    padding: 0;
  }
}

@layer components {
  .tilde {
    & .text {
      &.title {
        font-weight: 700;
      }

      &.accent {
        color: var(--color-link);
      }

      &.muted, &.shortcut {
        color: var(--color-muted);
      }

      &.primary {
        color: var(--color-fg);
      }

      &.success {
        color: var(--color-success);
      }

      &.error {
        color: var(--color-error);
      }

      &.warning {
        color: var(--color-warning);
      }
    }
  }
}

@layer components {
  .tilde {
    & .run {
      &.muted {
        color: var(--color-muted);
      }

      &.accent {
        color: var(--color-link);
      }

      &.error {
        color: var(--color-error);
      }

      &.success {
        color: var(--color-success);
      }

      &.code code {
        border: 1px solid var(--color-border);
        padding: 0 .2em;
      }
    }

    & .message .body code {
      border: 1px solid var(--color-border);
      padding: 0 .2em;
    }
  }
}

@layer components {
  .tilde {
    & .tool, & .choice, & .widget {
      border: 1px solid var(--color-border);
      background: var(--surface-tool);
      padding: var(--space-md);
    }

    & .tool, & .choice {
      & .header, & .footer {
        display: flex;
        gap: var(--space-md);
        align-items: baseline;
      }

      & .header, & .footer:has(.muted) {
        justify-content: space-between;
      }

      & .footer:not(:has(.muted)) {
        justify-content: flex-end;
      }

      & .footer {
        margin-top: var(--space-md);
      }

      & .call {
        min-width: 0;
        overflow-wrap: anywhere;
      }
    }

    & .tool {
      &.queued, &.running, &.streaming {
        background: var(--surface-tool-pending);
      }

      &.success, &.done {
        background: var(--surface-tool-success);
      }

      &.error {
        background: var(--surface-tool-error);
      }

      &.cancelled {
        opacity: .82;
      }

      & .tags, & .suffix {
        color: var(--color-muted);
        margin-left: var(--space-cell);
      }

      & .metadata {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        margin: var(--space-sm) 0 0;

        & div {
          display: flex;
          gap: var(--space-cell);
        }

        & dt {
          color: var(--color-muted);
        }

        & dd {
          margin: 0;
        }
      }

      & .lines {
        margin-top: var(--space-md);
        display: grid;
        gap: .15rem;
        white-space: pre-wrap;
      }

      & .line {
        overflow-wrap: anywhere;
      }

      & .line.primary + .line.title {
        margin-top: 1.4em;
      }

      & .waiting {
        color: var(--color-muted);
        margin-top: var(--space-md);
      }

      & .streams {
        display: grid;
        gap: var(--space-sm);
        margin-top: var(--space-md);
      }

      & .stream {
        & .label {
          color: var(--color-muted);
          font-size: .9rem;
        }

        & pre {
          margin: 0;
          white-space: pre-wrap;
          overflow-x: auto;
        }

        &.stderr {
          color: var(--color-error);
        }

        &.log {
          color: var(--color-muted);
        }

        &.result {
          color: var(--color-success);
        }
      }
    }
  }
}

@layer components {
  .tilde {
    --scrollbar-size: .85em;
    --scrollbar-track: transparent;
    --scrollbar-thumb-soft: color-mix(in srgb, var(--scrollbar-thumb) 72%, transparent);
    --scrollbar-thumb-strong: color-mix(in srgb, var(--scrollbar-thumb-hover) 88%, transparent);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
  }

  .tilde .transcript, .tilde .workspace .sections, .tilde .buffer .body, .tilde .buffer .error {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  @supports selector(::-webkit-scrollbar) {
    .tilde::-webkit-scrollbar, .tilde ::-webkit-scrollbar {
      width: var(--scrollbar-size);
      height: var(--scrollbar-size);
      background: var(--scrollbar-track);
    }

    .tilde::-webkit-scrollbar-button, .tilde::-webkit-scrollbar-corner, .tilde::-webkit-resizer, .tilde ::-webkit-scrollbar-button, .tilde ::-webkit-scrollbar-corner, .tilde ::-webkit-resizer {
      display: none;
      background: none;
    }

    .tilde::-webkit-scrollbar-track, .tilde::-webkit-scrollbar-track-piece, .tilde ::-webkit-scrollbar-track, .tilde ::-webkit-scrollbar-track-piece {
      background: var(--scrollbar-track);
      border: 0;
      box-shadow: none;
    }

    .tilde::-webkit-scrollbar-thumb, .tilde ::-webkit-scrollbar-thumb {
      min-width: 3lh;
      min-height: 3lh;
      background-color: var(--scrollbar-thumb-soft);
      background-clip: content-box;
      border: .28em solid #0000;
      border-radius: 999px;
      box-shadow: none;
    }

    .tilde::-webkit-scrollbar-thumb:hover, .tilde ::-webkit-scrollbar-thumb:hover {
      background-color: var(--scrollbar-thumb-strong);
      border-width: .22em;
    }

    .tilde::-webkit-scrollbar-thumb:active, .tilde ::-webkit-scrollbar-thumb:active {
      background-color: var(--scrollbar-thumb-hover);
      border-width: .18em;
    }
  }

  @media (forced-colors: active) {
    .tilde, .tilde .transcript, .tilde .workspace .sections, .tilde .buffer .body, .tilde .buffer .error {
      scrollbar-color: auto;
    }
  }
}

@layer components {
  .tilde {
    & .syntax {
      & .lumis {
        margin: 0;
        padding: 0;
        background: none;
        color: var(--color-fg);
        font: inherit;
        white-space: pre-wrap;
      }

      & code {
        font: inherit;
      }

      & .l-line {
        min-height: var(--leading-base);
      }

      & .l-line:before {
        content: attr(data-line);
        display: inline-block;
        width: 5ch;
        margin-right: 1ch;
        padding-right: 1ch;
        border-right: 1px solid color-mix(in srgb, var(--color-border), transparent 35%);
        color: var(--color-muted);
        text-align: right;
        user-select: none;
      }
    }
  }
}

@layer components {
  .tilde {
    & .shortcut {
      display: inline-flex;
      gap: .35em;
      align-items: baseline;
      margin-left: .35em;
      color: var(--color-muted);

      &:first-child {
        margin-left: 0;
      }

      & .key {
        font: inherit;
        color: var(--color-muted);
        border: 1px solid var(--color-border);
        border-radius: 0;
        padding: 0 .25em;
        background: none;
      }

      & .label {
        color: var(--color-link);
      }
    }
  }

  @media (width <= 640px), (pointer: coarse) {
    .tilde {
      & .shortcut {
        margin-left: 0;

        & .key {
          display: none;
        }
      }
    }
  }
}

@layer components {
  .tilde {
    & .link, & .action, & .choice .option {
      font: inherit;
      color: var(--color-link);
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    & .actions {
      display: flex;
      gap: var(--space-md);
      justify-content: flex-end;
      align-items: baseline;
    }

    & .action {
      display: inline-flex;
      align-items: baseline;
    }
  }
}

@layer components {
  .tilde {
    & .suggest {
      border-top: 1px solid var(--color-border);
      padding: var(--space-sm) 0;

      & .title {
        color: var(--color-muted);
        margin-bottom: .35rem;
      }

      & .items {
        display: grid;
        gap: .15rem;
      }

      & .row {
        position: relative;
        display: grid;
        grid-template-columns: 1ch minmax(10ch, 24ch) minmax(0, 1fr);
        align-items: baseline;
        column-gap: 2ch;
        width: 100%;
        min-width: 0;
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        padding: .1rem 0;
        text-align: left;
        cursor: pointer;

        &:hover, &:focus-visible, &.selected {
          color: var(--color-link);
        }

        &:hover .detail, &:focus-visible .detail {
          display: block;
        }
      }

      & .marker {
        color: var(--color-link);
      }

      & .command {
        color: var(--color-link);
        border: 0;
        padding: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      & .description {
        min-width: 0;
        color: var(--color-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & .detail {
        display: none;
        position: absolute;
        left: 3ch;
        right: 0;
        bottom: calc(100% + var(--space-xs));
        z-index: 20;
        max-width: min(72ch, 100%);
        border: 1px solid var(--color-border);
        background: var(--color-bg);
        color: var(--color-fg);
        padding: var(--space-sm);
        white-space: pre-line;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 35%, transparent);
      }
    }
  }
}

@layer components {
  .tilde {
    & .choice {
      & .options {
        display: grid;
        gap: .2rem;
        margin-top: var(--space-md);
      }

      & .option {
        display: grid;
        grid-template-columns: 3ch minmax(16ch, 24ch) minmax(0, 1fr);
        column-gap: var(--space-md);
        align-items: baseline;
        text-align: left;
        text-decoration: none;
        color: var(--color-fg);
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      & .option.selected, & .option:focus-visible, & .option:hover {
        color: var(--color-link);
      }

      & .marker, & .description {
        color: var(--color-muted);
      }

      & .description {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      & .option.selected .marker {
        color: var(--color-link);
      }

      & .actions {
        margin-top: var(--space-md);
      }
    }
  }
}

@layer components {
  .tilde {
    & .dialog {
      width: min(42rem, 100%);
      margin: auto;
      border: 1px solid var(--color-border);
      background: var(--color-bg);
      color: var(--color-fg);
      padding: var(--space-lg);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 35%, transparent);

      & .title {
        margin: 0 0 var(--space-sm);
        color: var(--color-fg);
        font-weight: 700;
      }

      & .body {
        color: var(--color-muted);
        white-space: normal;
      }

      & p {
        margin: 0 0 var(--space-md);
      }

      & .error {
        color: var(--color-error);
      }

      & .actions {
        margin-top: var(--space-md);
      }

      & form {
        margin-top: var(--space-md);
      }

      & label {
        display: block;
        margin-bottom: var(--space-xs);
        color: var(--color-fg);
      }

      & input {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--color-border);
        background: none;
        color: var(--color-fg);
        padding: var(--space-sm) 1ch;
        font: inherit;
        outline: none;
      }

      & input:focus-visible {
        border-color: var(--color-link);
      }
    }

    &.auth {
      justify-content: center;
    }
  }
}

@layer components {
  .tilde {
    & .widgets {
      display: block;
    }

    & .widgets[data-placement="overlay"] {
      position: absolute;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: var(--space-page);
      background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    }

    &.index {
      & .transcript {
        flex: none;
        min-height: auto;
        overflow: visible;
      }

      & .dock {
        margin-top: auto;
      }
    }
  }
}

@layer components {
  .tilde {
    &.workbench {
      max-width: none;
      display: grid;
      grid-template-columns: minmax(22ch, 30ch) minmax(0, 1fr);
      gap: 2ch;
    }

    & .workspace {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border-right: 1px solid color-mix(in srgb, var(--color-border), transparent 35%);
      padding-right: 2ch;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      color: var(--color-muted);
    }

    & .workspace .header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1ch;
      padding-bottom: 1lh;
    }

    & .workspace .title {
      color: var(--color-fg);
      font-weight: 700;
    }

    & .workspace .meta, & .workspace .section_header {
      color: var(--color-muted);
      font-size: .9em;
    }

    & .workspace .sections {
      min-height: 0;
      overflow: auto;
      display: grid;
      align-content: start;
      gap: 1lh;
    }

    & .workspace .section {
      min-width: 0;
      display: grid;
      gap: .5lh;
    }

    & .workspace .section_header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1ch;
      text-transform: lowercase;
    }

    & .workspace .files {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: .1lh;
    }

    & .workspace .file {
      appearance: none;
      border: 0;
      padding: 0 .5ch;
      background: none;
      font: inherit;
      text-align: left;
      display: grid;
      grid-template-columns: 2ch minmax(0, 1fr);
      gap: 1ch;
      align-items: baseline;
      min-width: 0;
      color: var(--color-muted);
      font-size: .95em;
      line-height: 1.45;
      cursor: pointer;
    }

    & .workspace .marks {
      color: var(--color-muted);
      font-weight: 700;
      text-align: right;
      white-space: pre;
    }

    & .workspace .path {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .workspace .file.git-modified .path, & .workspace .file.git-modified .marks, & .workspace .file.git-renamed .path, & .workspace .file.git-renamed .marks {
      color: var(--color-warning);
    }

    & .workspace .file.git-added .path, & .workspace .file.git-added .marks {
      color: var(--color-success);
    }

    & .workspace .file.git-untracked .path, & .workspace .file.git-untracked .marks {
      color: var(--color-muted);
    }

    & .workspace .file.read .path, & .workspace .file.read .marks {
      color: var(--color-link);
    }

    & .workspace .file.modified .path, & .workspace .file.modified .marks {
      color: var(--color-success);
    }

    & .workspace .file.git-conflicted .path, & .workspace .file.git-conflicted .marks, & .workspace .file.git-deleted .path, & .workspace .file.git-deleted .marks {
      color: var(--color-error);
    }

    & .workspace .file.selected {
      background: color-mix(in srgb, var(--color-link) 12%, transparent);
    }

    & .workspace .file.selected .path, & .workspace .file.selected .marks {
      color: var(--color-link);
      font-weight: 700;
      text-decoration: underline;
    }

    & .workspace .file:hover .path, & .workspace .file:focus-visible .path {
      text-decoration: underline;
    }

    & .workspace .file:focus-visible {
      outline: 1px solid var(--color-border);
      outline-offset: .2lh;
    }

    & .workspace .file.muted {
      opacity: .64;
    }

    & .workspace > .footer {
      padding-top: 1lh;
    }

    & .workspace .empty {
      align-self: start;
      display: grid;
      gap: .5lh;
      color: var(--color-muted);
      font-size: .95em;
      line-height: 1.45;
    }

    & .workspace .empty span {
      opacity: .72;
    }

    &.workbench > .main {
      min-width: 0;
      min-height: 0;
    }
  }

  @media (width <= 84ch) {
    .tilde.workbench {
      grid-template-columns: 1fr;
    }

    .tilde.workbench .workspace {
      display: none;
    }

    .tilde.workbench.workspace-open .workspace {
      display: grid;
      border-right: 0;
      padding-right: 0;
    }

    .tilde.workbench.workspace-open > .main {
      display: none;
    }
  }
}

@layer components {
  .tilde {
    & .buffer {
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      color: var(--color-fg);
    }

    & .buffer .body, & .buffer .error {
      flex: 1 1 0;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 35%);
      padding: 0 0 1lh;
    }

    & .buffer .body .lumis {
      white-space: pre;
    }

    & .buffer .error {
      color: var(--color-error);
    }

    & .buffer > .footer {
      flex: none;
      padding-top: 1lh;
    }
  }
}

@layer components {
  .tilde {
    & .input {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: var(--space-md);
      align-items: start;
      padding: 0 0 var(--space-md);

      & textarea {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        resize: none;
        overflow: hidden;
        min-height: 1.55em;
        max-height: 12rem;
        outline: none;
      }
    }
  }
}

@layer components {
  .tilde .footer {
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    color: var(--color-muted);
    font-size: .9rem;
  }

  .tilde .footer .left {
    min-width: 0;
  }

  .tilde .footer .right {
    flex: none;
    white-space: nowrap;
  }

  .tilde .footer .right .actions, .tilde .footer .right .dev, .tilde .footer .right .action, .tilde .footer .right .dev .button {
    display: inline;
  }

  .tilde .footer .right .dev {
    margin-left: var(--space-md);
  }

  .tilde .footer .right .action.mobile {
    display: none;
  }

  @media (width <= 84ch) {
    .tilde .footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: .35lh;
      align-items: start;
    }

    .tilde .footer .left {
      order: 2;
      min-width: 0;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }

    .tilde .footer .right {
      order: 1;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      gap: .5ch 1ch;
      align-items: baseline;
      white-space: normal;
    }

    .tilde .footer .right .actions, .tilde .footer .right .dev {
      display: inline-flex;
      gap: 1ch;
      align-items: baseline;
    }

    .tilde .footer .right .action, .tilde .footer .right .dev .button {
      display: inline-flex;
    }

    .tilde .footer .right .dev {
      margin-left: 0;
    }

    .tilde .footer .right .action.mobile {
      display: inline-flex;
    }
  }
}

@layer components {
  .tilde.playground {
    gap: var(--space-md);
  }

  .tilde .playground-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .tilde .playground-header, .tilde .playground-section-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-sm);
  }

  .tilde .playground-header h1, .tilde .playground-section-header h2 {
    margin: 0;
    color: var(--color-fg);
    font-size: 1.125rem;
    line-height: 1.25;
  }

  .tilde .playground-header p, .tilde .playground-section-header p {
    margin: var(--space-xs) 0 0;
    color: var(--color-muted);
  }

  .tilde .playground-header .eyebrow, .tilde .playground-section-header .eyebrow {
    margin: 0 0 var(--space-xs);
    color: var(--color-link);
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .tilde .playground-section {
    display: grid;
    gap: var(--space-md);
  }

  .tilde .playground-frame {
    min-height: auto;
    overflow: visible;
    border: 1px solid var(--color-border);
    background: var(--surface-tool);
    padding: var(--space-md);
  }

  .tilde .playground-dock {
    margin-top: 0;
  }
}

@layer components {
  .tilde {
    &.devshell {
      & > .main {
        flex: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }

      & > .main > .tilde {
        width: 100%;
      }

      & .tilde.embedded {
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
      }
    }

    &.grid, &[data-dev-grid] {
      background-image: linear-gradient(to right,
        color-mix(in srgb, var(--color-fg) 16%, transparent) 1px,
        transparent 1px),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--color-fg) 13%, transparent) 1px,
        transparent 1px);
      background-size: 1ch calc(var(--text-base) * var(--leading-base));
      background-position: var(--space-page) var(--space-page);
    }

    & .dev {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      margin-left: 1ch;
      color: var(--color-muted);
      font: inherit;
      vertical-align: baseline;

      & .button {
        appearance: none;
        border: 1px solid var(--color-border);
        border-radius: 0;
        background: none;
        color: inherit;
        font: inherit;
        line-height: inherit;
        padding: 0 .35em;
        cursor: pointer;
      }

      & .button:hover, & .button:focus-visible, & .button[aria-pressed="true"] {
        color: var(--color-link);
        outline: none;
      }

      & .tooltip {
        position: absolute;
        right: 0;
        bottom: calc(100% + var(--space-xs));
        z-index: 60;
        width: min(56ch, calc(100vw - 2 * var(--space-page)));
        max-height: 14rem;
        overflow: auto;
        visibility: hidden;
        margin: 0;
        border: 1px solid var(--color-border);
        padding: var(--space-xs) 1ch;
        background: var(--color-bg);
        color: var(--color-fg);
        font: inherit;
        white-space: pre;
        pointer-events: none;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-bg) 70%, transparent);
      }

      & .tooltip:before {
        content: attr(data-raw);
      }

      &:hover .tooltip, & .tooltip[data-open="true"] {
        visibility: visible;
      }

      & .tooltip[data-open="true"]:before {
        content: "";
      }
    }
  }
}