/* ──────────────────────────────────────────────────────────────────────────
   The site: the landing and the pages round it (download, support, legal).
   Everything is nested under .site, the body's class, so a rule here is
   never loose in the page.

   Tokens are the app's own (src/styles/_sidebar.scss, _sheet.scss): one field,
   sheets on it, soft wells, hairs instead of rules.
   ────────────────────────────────────────────────────────────────────────── */

/* The two faces are served from here, never from a font service, so a visit
   reaches no one else (app/assets/fonts: Fontsource's variable cuts, OFL). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/bricolage-grotesque-latin-ext-opsz-normal-f02b0791.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/bricolage-grotesque-latin-opsz-normal-b86257e5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/assets/jetbrains-mono-latin-ext-wght-normal-6168ff55.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/assets/jetbrains-mono-latin-wght-normal-7c88d0cc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes site-blink { 50% { opacity: 0; } }
@keyframes site-breathe { to { opacity: 0.72; } }
@keyframes site-turn { to { transform: rotate(360deg); } }
@keyframes site-line { from { opacity: 0; transform: translateY(3px); } }
@keyframes site-unfold {
  from { opacity: 0; transform: rotateX(-24deg) translateY(36px) scale(0.97); }
}

.site {
  /* The page: paper. */
  color-scheme: light;
  --field: #f5f5f2;
  --panel: #ffffff;
  --raised: rgba(0, 0, 0, 0.045);
  --raised-strong: rgba(0, 0, 0, 0.075);
  --tile: rgba(0, 0, 0, 0.09);
  --hair: rgba(0, 0, 0, 0.08);
  --ink: rgba(0, 0, 0, 0.88);
  --ink-soft: rgba(0, 0, 0, 0.58);
  --ink-faint: rgba(0, 0, 0, 0.46);
  --row-hover: #ecedf0;
  --row-active: #ffffff;
  --sheet-ring: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -20px rgba(20, 22, 40, 0.18);
  --violet: #7950f2;
  --violet-ink: #5b33c9;
  --track: rgba(0, 0, 0, 0.06);

  /* The window: the app's own dark inks, whatever the page's. */
  .app-win {
    color-scheme: dark;
    --field: #0f1018;
    --panel: #161721;
    --raised: rgba(255, 255, 255, 0.055);
    --raised-strong: rgba(255, 255, 255, 0.09);
    --tile: rgba(255, 255, 255, 0.12);
    --hair: rgba(255, 255, 255, 0.07);
    --ink: rgba(255, 255, 255, 0.92);
    --ink-soft: rgba(255, 255, 255, 0.58);
    --ink-faint: rgba(255, 255, 255, 0.42);
    --row-hover: #1c1d28;
    --row-active: #252633;
    --row-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 1.5px rgba(0, 0, 0, 0.18);
    --sheet-ring: none;
    --violet-ink: #b79cff;
    --track: rgba(0, 0, 0, 0.28);
    --sheet-fill: rgba(42, 43, 58, 0.84);
  }

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", Menlo, "SF Mono", monospace;
  --display: "Bricolage Grotesque", var(--sans);
  --tone: #6f55d6;
  --tone-rest: #453c78;

  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;

  *, *::before, *::after { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  form.button_to { display: contents; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  [hidden], .hidden { display: none !important; }
  :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 8px; }
  ::selection { background: color-mix(in srgb, var(--violet) 45%, transparent); }

  /* A workspace's colour: the wash on its sheet, and its rail tile at rest and
     selected (one luminance for every hue, as lib/railTone.ts makes them). */
  [data-tone="violet"] { --ws-color: #7950f2; --tone: #6f55d6; --tone-rest: #453c78; }
  [data-tone="teal"] { --ws-color: #12b886; --tone: #1f8f7c; --tone-rest: #2c5a55; }

  .ic { width: 16px; height: 16px; flex-shrink: 0; }
  /* The bird, one colour: the app's mark through a mask. */
  .bird {
    display: inline-block;
    flex-shrink: 0;
    aspect-ratio: 64 / 57;
    background: currentColor;
    mask: url("/assets/origami-small-e3debfa1.svg") center / contain no-repeat;
  }

  /* ── Buttons, the segmented control, the stepper ───────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--raised);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s;

    &:hover { background: var(--raised-strong); }
    small { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
  }

  .btn-primary {
    background: var(--violet);
    color: #fff;
    box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--violet) 80%, transparent);

    &:hover { background: #8763f5; }
  }

  .btn-lg { height: 48px; padding: 0 22px; border-radius: 13px; font-size: 15px; .ic { width: 18px; height: 18px; } }
  .btn-idle { background: transparent; color: var(--ink-soft); cursor: default; &:hover { background: transparent; } }
  .btn-bare { background: transparent; color: var(--ink-soft); &:hover { background: var(--raised); color: var(--ink); } }
  .btn:disabled { opacity: 0.4; cursor: default; }
  input.btn { border: 0; font-family: inherit; cursor: pointer; }

  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 2px;
    border-radius: 9px;
    background: var(--track);

    button, a {
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 0 11px;
      border-radius: 7px;
      font-size: 12px;
      color: var(--ink-soft);
      white-space: nowrap;

      em { margin-left: 4px; font-style: normal; color: var(--violet-ink); }
      &:hover { color: var(--ink); }
      &[data-active="true"] { background: var(--row-active); color: var(--ink); box-shadow: var(--row-ring, none), 0 1px 2px rgba(0, 0, 0, 0.12); }
    }
  }

  .step {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border-radius: 9px;
    background: var(--raised);

    button { width: 28px; color: var(--ink-soft); border-radius: 9px; &:hover { color: var(--ink); } &:disabled { opacity: 0.35; cursor: default; } }
    input {
      width: 40px;
      border: 0;
      background: none;
      color: var(--ink);
      font: inherit;
      font-size: 13px;
      text-align: center;
      appearance: textfield;
      &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { appearance: none; }
      &:focus { outline: none; }
    }
  }

  /* ── The pieces the app is made of — measured off src/styles/_sidebar.scss,
        WorkspaceRail, Sidebar, WorkspacePanel, SectionGroup and TabItem ───── */

  .w-tiles { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding-top: 17px; }

  /* A workspace on the rail: a 40px tile in a 50px row. */
  .w-ws {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    --badge-ring: var(--field);

    /* The selected workspace is a tab joined to the sidebar's sheet: the
       sheet's own surface, 7px proud of its tile, its corners where the two
       meet curving outwards. */
    &[data-active="true"] {
      --tab-inset: calc((var(--rail) - 40px) / 2 - 7px);
      width: calc(100% - var(--tab-inset));
      height: 54px;
      margin: -2px 0 -2px var(--tab-inset);
      border-radius: 18px 0 0 18px;
      background: var(--panel);
      --badge-ring: var(--panel);

      .w-ws-tile { margin-left: calc(-1 * var(--tab-inset)); background: var(--tone); }
      &::before, &::after { content: ""; position: absolute; right: 0; width: 8px; height: 8px; }
      &::before { top: -8px; background: radial-gradient(circle at 0 0, transparent 7.5px, var(--panel) 8px); }
      &::after { bottom: -8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--panel) 8px); }
    }
    &:not([data-active="true"]):hover .w-ws-tile { background: color-mix(in oklab, var(--tone-rest), var(--tone)); }
  }

  .w-ws-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--tone-rest);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: background 0.2s;

    /* The workspace's most pressing tab's mark, ringed in what the tile stands on. */
    .w-badge { right: -3px; bottom: -3px; background: var(--badge-ring); }
    .w-dot { --dot: 7px; }
  }

  /* Status rides the tile's corner, ringed in what is under it. */
  .w-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    padding: 2px;
    border-radius: 50%;
    background: var(--row, var(--panel));
  }

  /* The mark itself: green is nothing to do, violet is something for the user. */
  .w-dot {
    --dot: 5px;
    box-sizing: border-box;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: currentColor;
    color: #34c759;

    &[data-tone="waiting"] { color: #9a72ff; }
    &[data-tone="unseen"] { --dot: 6px; color: #20c997; }
  }

  /* Adding a workspace: a workspace's row and tile in size, a quiet fill. */
  .w-ws-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: var(--raised); color: var(--ink-faint); }
    .ic { width: 16px; height: 16px; }
  }

  .w-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .w-foot-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; }

  /* The rail's own buttons: a bare glyph that takes a tile on hover. */
  .w-foot-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--ink-faint);

    .bird { width: 19px; }
    .ic { width: 16px; height: 16px; }
    :is(button):hover > & { background: var(--raised); color: var(--ink-soft); }
    [data-active="true"] > & { background: rgba(132, 94, 247, 0.18); color: #845ef7; }
  }

  /* The sheet's head: the toggle at its left, then the workspace's name on the
     line the tabs' names start on. */
  .w-side-head { position: relative; display: flex; align-items: center; height: 52px; padding: 0 10px 0 44px; flex-shrink: 0; }
  .w-toggle {
    position: absolute;
    top: 13px;
    left: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--ink);
    .ic { width: 16px; height: 16px; opacity: 0.4; }
    &:is(button):hover { background: var(--raised); }
  }
  .w-back .ic { width: 14px; height: 14px; opacity: 0.6; }
  .w-side-name { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 7px 0 8px; border-radius: 9px; min-width: 0; }
  .w-side-title { font-size: 14px; font-weight: 650; line-height: 18px; letter-spacing: -0.01em; }
  .w-caret { width: 10px; height: 10px; color: var(--ink-faint); transform: rotate(90deg); }
  /* A view's page: its title on the sheet's centre line. */
  .w-side-head:has(.w-back:not([hidden])) { justify-content: center; padding: 0 45px; .w-caret { display: none; } }

  .w-sec { display: flex; flex-direction: column; margin-bottom: 14px; }

  .w-sec-head {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    margin-bottom: 6px;
    padding: 0 16px 0 10px;
    i { flex: 1; min-width: 12px; height: 1px; background: var(--hair); }
  }
  .w-sec-title .ic { width: 11px; height: 11px; }
  .w-sec-title { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 5px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; color: var(--ink-faint); }

  /* A tab: an inset rounded row, a tile, then its name. */
  .w-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    width: calc(100% - 20px);
    margin: 0 10px 4px;
    padding: 6px;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
    --row: var(--panel);

    &:is(button, a):hover { --row: var(--row-hover); background: var(--row); }

    &[data-active="true"] {
      --row: var(--row-active);
      background: var(--row);
      box-shadow: var(--row-ring, 0 0 0 1px rgba(0, 0, 0, 0.06));
      font-weight: 600;
    }
    /* The chosen row of a view's list: its tile is the workspace's rail tile in
       small. Never a tab's, whose tile is the colour it was given — the tab
       that is showing is the lifted row alone. */
    &[data-active="true"]:not(.w-tab) .w-tile { background: var(--tone); color: #fff; box-shadow: 0 3px 9px -3px var(--tone); }

    /* A stopped tab sits back. */
    &[data-status="stopped"]:not([data-active="true"]) :is(.w-tile, .w-name) { opacity: 0.58; }

    /* A tab with no mark of its own is a slimmer row led by the tile in small. */
    &.w-row-slim {
      height: 30px;
      gap: 8px;
      padding-block: 4px;
      .w-tile { width: 12px; height: 12px; border-radius: 4px; background: var(--tile); }
      .w-tile[data-tint] { background: color-mix(in srgb, var(--tint) 62%, transparent); }
      .w-badge { right: -4px; bottom: -4px; }
    }
  }

  /* The tile a tab leads with: its agent's mark, or its type's icon. */
  .w-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--tile);
    color: var(--ink-soft);

    .ic { width: 15px; height: 15px; }
    &[data-tint] { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 80%, #fff); }
    &[data-tint="clay"] { --tint: #d97757; }
    &[data-tint="teal"] { --tint: #3bb8a5; }
    &[data-tint="violet"] { --tint: #8b6cf6; }
    &[data-tint="blue"] { --tint: #5b9bf0; }
  }

  .w-tile-lg { width: 44px; height: 44px; border-radius: 13px; background: var(--raised); .ic { width: 22px; height: 22px; } }
  .w-initials { font-size: 10px; font-weight: 700; }

  /* Two lines in the tile's height, each on a line of its own measure. */
  .w-row-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
  .w-name, .w-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
  .w-row-text .w-name { line-height: 16px; }
  .w-sub { height: 14px; font-size: 11px; font-weight: 400; line-height: 14px; color: var(--ink-faint); }

  .w-path { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: 13px; }
  .w-crumb-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--tone);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }
  .w-crumb { color: var(--ink-soft); }
  /* What a tab's name is led by: its agent's mark, or its type's icon in the
     tab's own colour. */
  .w-crumb-mark {
    display: flex;
    margin-right: -2px;
    color: rgba(255, 255, 255, 0.45);
    .ic { width: 14px; height: 14px; }
    &[data-tint="teal"] { color: color-mix(in srgb, #3bb8a5 80%, #fff); }
    &[data-tint="violet"] { color: color-mix(in srgb, #8b6cf6 80%, #fff); }
  }
  .w-crumb-tile, .w-crumb, .w-crumb-mark, .w-sep { flex-shrink: 0; }
  .w-sep { color: var(--ink-faint); }
  .w-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* A terminal: text on the field, nothing round it. */
  .w-term {
    /* A row of padding under it, none over. */
    padding: 0 20px 20px;
    font: 12.5px/1.6 var(--mono);
    color: #c5c8d6;
    overflow: hidden;
    user-select: text;

    font-variant-ligatures: none;
    .ln { white-space: pre; }

    .t-dim { color: rgba(255, 255, 255, 0.38); }
    .t-b { color: #fff; font-weight: 700; }
    .t-g { color: #7fd69a; }
    .t-r { color: #ff8f88; }
    .t-y { color: #e2c275; }
    .t-c { color: #7cc7f2; }
    .t-v { color: #b79cff; }
    .t-clay { color: #d97757; }
    .t-caret { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.85); animation: site-blink 1.1s steps(1) infinite; }
  }

  /* ── The live window ───────────────────────────────────────────────────── */

  /* Its picture, for a screen too small to hold it. */
  .app-shot {
    display: none;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(24, 20, 60, 0.4));
  }

  .app-win {
    display: grid;
    grid-template-columns: 88px 280px minmax(0, 1fr) 296px;
    height: 660px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--field);
    color: var(--ink);
    font: 13px/1.4 var(--sans);
    text-align: left;
    user-select: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 0 0.5px rgba(0, 0, 0, 0.6),
      0 60px 120px -40px rgba(24, 20, 60, 0.55),
      0 24px 48px -24px rgba(10, 10, 30, 0.45);

    --rail: 88px;

    /* The rail is the column under the traffic lights. */
    .w-rail { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; padding-bottom: 8px; }
    .w-lights {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      align-self: stretch;
      height: 33px;
      padding-top: 19px;
      flex-shrink: 0;
      i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
    }

    /* The sidebar: a sheet running the window's full height, every corner
       rounded, with a wash of the workspace's colour from its far corner. */
    .w-side {
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 12px;
      background:
        radial-gradient(85% 130px at 100% 0%, color-mix(in srgb, var(--ws-color, transparent) 18%, transparent), transparent),
        var(--panel);
      overflow: hidden;
      transition: background 0.2s;
    }
    .w-page { flex: 1; min-height: 0; padding-top: 8px; overflow: hidden; }
    .w-side-foot {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 42px;
      padding: 0 8px;
      flex-shrink: 0;
      span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
      .ic { width: 13px; height: 13px; }
      kbd { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 5px; background: var(--raised); font: 500 10px var(--sans); color: var(--ink-faint); }
    }

    .w-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
    .w-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 12px 0 20px; flex-shrink: 0; }
    /* The titlebar's view buttons: bare glyphs, the open view tinted violet. */
    .w-views { display: flex; align-items: center; gap: 2px; }
    .w-view-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      color: var(--ink-faint);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      transition: background 0.2s, color 0.2s;
      .ic { width: 13px; height: 13px; }
      span { display: inline-flex; align-items: center; gap: 3px; }
      &:hover { background: var(--raised); color: var(--ink-soft); }
      &[data-active="true"] { background: rgba(132, 94, 247, 0.18); color: #845ef7; }
    }

    .w-body { position: relative; flex: 1; min-height: 0; }
    .w-screen { position: absolute; inset: 0; overflow: hidden; }

    /* A tab that is not running shows its own page: its tile and name, the
       line it would run as a prompt, where, and its actions as rows. */
    .w-stopped { display: flex; align-items: center; justify-content: center; padding-bottom: 40px; }
    /* Every line leads with a mark in one column, the tile's width, so what
       they say starts on one edge down the page. */
    .w-stopped-page { --lead: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 340px; max-width: calc(100% - 40px); }
    .w-lead { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--lead); }
    .w-stopped-name { display: flex; align-items: center; gap: 9px; margin-bottom: -4px; font-size: 14px; b { font-weight: 600; } .w-tile { width: var(--lead); height: var(--lead); border-radius: 7px; .ic { width: 12px; height: 12px; } } }
    /* The line it would run, set apart from its name and its facts. */
    .w-stopped-line {
      display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 8px; font: 14px/1.5 var(--mono); color: var(--ink);
      .w-lead { height: 1.5em; color: var(--tone); .ic { width: 15px; height: 15px; } }
    }
    .w-stopped-meta {
      display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ink-faint);
      > span { display: flex; align-items: center; gap: 9px; }
      .w-lead .ic { width: 14px; height: 14px; }
      /* The worktree and the branch are picked: a caret after, a tile under the pointer. */
      .w-pick { height: 24px; margin: -3px -8px; padding: 0 8px; border-radius: 10px; &:hover { background: var(--raised-strong); } }
      .w-pick-caret { width: 12px; height: 12px; margin-left: -3px; }
    }
    /* With no line over them, the facts stand as far under the name as a line would. */
    .w-stopped-name + .w-stopped-meta { margin-top: 12px; }
    .w-stopped-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 4px 0 0 -8px; }
    .w-act {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      height: 30px;
      padding: 0 8px;
      border-radius: 10px;
      color: var(--ink-soft);
      b { font-weight: 400; color: var(--ink); }
      .ic { width: 14px; height: 14px; }
      /* A key is one soft tile wherever it is named. */
      kbd { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 5px; background: var(--raised-strong); font: 500 10.5px/1 var(--sans); letter-spacing: 0.04em; color: var(--ink-soft); }
      &:hover { background: var(--raised-strong); }
    }
    .w-act-primary .ic { color: #845ef7; }

    .w-path-mark { width: 16px; color: var(--ink-soft); }

    /* The app's home page: the mark, the wordmark, what it can do as rows. */
    .w-home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 20px 28px; }
    .w-home-id { display: flex; flex-direction: column; align-items: center; }
    .w-home-emblem { width: 68px; height: auto; filter: drop-shadow(0 10px 22px rgba(121, 80, 242, 0.35)); }
    /* The wordmark: the site's own display face, bold and set tight. */
    .w-home-word { margin-top: 12px; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
    .w-home-version { font-size: 12px; color: var(--ink-faint); }
    .w-home-list { display: flex; flex-direction: column; gap: 1px; width: 100%; max-width: 440px; }
    .w-home-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 46px;
      padding: 0 12px 0 8px;
      border-radius: 12px;
      &:hover { background: var(--row-hover); .w-home-go { opacity: 1; } }
    }
    .w-home-tile { width: 30px; height: 30px; border-radius: 9px; }
    .w-home-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
    .w-home-tag { font-size: 11.5px; line-height: 1.3; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-home-go { margin-left: auto; width: 13px; height: 13px; color: var(--ink-faint); opacity: 0; }

    /* ── Loops: the head's Loop button, the shelf, a new loop's page and a
          loop under way — measured off components/harness ─────────────── */
    /* The loops' glass (_loop-glass.scss): a clear fill that blurs what is
       under it, a hair lit from above, a shadow of a pixel or two. */
    --glass: rgba(255, 255, 255, 0.045);
    --glass-over: rgba(255, 255, 255, 0.075);
    --glass-ring: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.18);
    --tone-ink: color-mix(in srgb, var(--tone) 62%, #fff);

    /* Behind a new loop's page, the launch screen's sky (lib/skyRenderer.ts):
       its three lights, from the window's left edge to where the sidetrack
       starts, under the rail, the titlebar and the page. */
    position: relative;
    isolation: isolate;
    --track-room: 296px;
    &::before {
      content: "";
      position: absolute;
      /* Inside the window's own hair. */
      inset: 1px var(--track-room) 1px 1px;
      z-index: -1;
      background:
        radial-gradient(39% 52% at 73% 28%, rgba(124, 92, 255, 0.3), transparent),
        radial-gradient(31% 42% at 51% 48%, rgba(92, 104, 220, 0.24), transparent),
        radial-gradient(35% 46% at 27% 68%, rgba(58, 150, 160, 0.2), transparent);
      opacity: 0;
      transition: opacity 1.1s ease;
      pointer-events: none;
    }
    &[data-sky="true"]::before { opacity: 1; }

    /* With loops on, the sheet's head has a sky of its own: one soft light of
       the workspace's colour in its top right corner, behind the name and the
       loops, dissolving into the tabs and breathing (WorkspacePanel's .sky). */
    .w-side { position: relative; isolation: isolate; }
    .w-side::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 124px;
      z-index: -1;
      border-radius: 12px 12px 0 0;
      background: radial-gradient(70% 62% at 82% 0%, color-mix(in srgb, var(--tone) 46%, transparent), transparent);
      mask-image: linear-gradient(#000 45%, transparent);
      animation: site-breathe 12s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .w-side:has(.w-page[data-page^="view:"]:not([hidden]))::before { display: none; }
    .w-side:has(.w-page:not([hidden]) > .w-loops)::before { height: 216px; }

    /* The way to a new loop: one glass shape in two halves, at the head's end. */
    .w-loop-btn {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      height: 30px;
      margin-left: auto;
      border-radius: 10px;
      background: var(--glass);
      backdrop-filter: blur(22px) saturate(1.5);
      box-shadow: var(--glass-ring);
      > i { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.12); }
    }
    .w-side-head:has(.w-back:not([hidden])) .w-loop-btn { display: none; }
    .w-loop-main, .w-loop-drop { display: flex; align-items: center; height: 30px; color: var(--ink); transition: background 0.15s; }
    .w-loop-main {
      gap: 6px;
      padding: 0 10px 0 8px;
      border-radius: 10px 0 0 10px;
      font-size: 12.5px;
      font-weight: 600;
      .w-loop-mark { width: 14px; height: 14px; color: var(--tone-ink); }
      &:hover { background: rgba(255, 255, 255, 0.055); }
    }
    .w-loop-drop { justify-content: center; width: 26px; border-radius: 0 10px 10px 0; color: var(--ink-soft); .ic { width: 12px; height: 12px; } }

    /* A loop's line is an agent's row: bare at rest, glass under the pointer,
       the lifted row while it shows. Its tile is glass with a breath of the
       workspace's colour, and its agent's mark in full. */
    .w-loop { --row: color-mix(in srgb, var(--tone) 8%, var(--panel)); }
    .w-row.w-loop:hover:not([data-active="true"]) { background: var(--glass); }
    .w-loop-tile { background: color-mix(in srgb, var(--tone) 10%, rgba(255, 255, 255, 0.07)); color: var(--ink); }
    /* Where the loop works, under its name: its folder, then its branch, which gives way first. */
    .w-where {
      display: flex;
      align-items: center;
      gap: 8px;
      > span { display: flex; align-items: center; gap: 3px; min-width: 0; }
      > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .ic { flex: none; width: 11px; height: 11px; }
      .w-folder { flex: none; max-width: 50%; }
    }

    /* A new loop's page: the box is the page, at the middle, under the loops'
       mark and what the page asks; the workspace's starters under it. */
    .l-fresh {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 0 24px 32px;
      container-type: inline-size;
      > .l-box, > .l-starters { width: 100%; max-width: 640px; }
    }
    .l-lead { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
    /* It turns, once in most of a minute: found rather than seen. */
    .l-mark { width: 60px; height: 60px; margin-bottom: 18px; color: #fff; animation: site-turn 48s linear infinite; }
    .l-greeting {
      font-size: 21px;
      font-weight: 600;
      letter-spacing: -0.022em;
      line-height: 1.2;
      text-align: center;
      text-wrap: balance;
      em { font-style: normal; color: var(--tone-ink); }
    }

    /* The message box: the loops' glass, the text, and the foot. */
    .l-box {
      padding: 8px;
      border-radius: 16px;
      background: var(--glass);
      backdrop-filter: blur(22px) saturate(1.5);
      box-shadow: var(--glass-ring);
    }
    .l-input { height: 33px; padding: 6px 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .l-input[data-rows="3"] { height: 75px; }
    .l-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
    .l-foot-start, .l-foot-end { display: flex; align-items: center; min-width: 0; }
    .l-foot-end { gap: 2px; }
    .l-attach { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; color: var(--ink-faint); .ic { width: 15px; height: 15px; } }
    .l-mode { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; .ic { width: 14px; height: 14px; } }
    :is(.l-attach, .l-mode):hover { background: var(--raised-strong); color: var(--ink); }
    /* How full the context is: a ring filled round to the share used. */
    .l-meter { display: flex; align-items: center; height: 28px; padding: 0 8px; }
    .l-ring { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(var(--tone) 18%, var(--tile) 0); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
    /* What runs it: bare at rest, a tile under the pointer. */
    .l-control {
      display: flex;
      align-items: center;
      gap: 7px;
      height: 30px;
      padding: 0 9px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 600;
      white-space: nowrap;
      .ic { width: 14px; height: 14px; }
      &:hover { background: var(--raised-strong); }
    }
    .l-bolt .ic { width: 13px; height: 13px; color: var(--ink-faint); }
    /* How hard it thinks: each step a little taller than the one before. */
    .l-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 12px;
      i { width: 3px; border-radius: 1.5px; background: var(--tile); }
      i:nth-child(1) { height: 4px; } i:nth-child(2) { height: 6px; } i:nth-child(3) { height: 8px; } i:nth-child(4) { height: 10px; } i:nth-child(5) { height: 12px; }
      .l-on { background: var(--tone); }
    }
    /* Quiet until there is something to send. */
    .l-send { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-left: 4px; border-radius: 10px; background: rgba(132, 104, 240, 0.16); color: rgba(183, 156, 255, 0.55); .ic { width: 15px; height: 15px; } }

    /* The starters: the box's own sheet in small, a row of four, two where
       the pane is narrow. */
    /* Where a new loop will work, under its box at its middle: quieter than
       the box's own controls. */
    .l-where { display: flex; justify-content: center; margin-top: -12px; }
    .l-where-pick {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 26px;
      padding: 0 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-soft);
      transition: background 0.15s;
      .ic { flex: none; width: 13px; height: 13px; }
      .l-where-caret { width: 12px; height: 12px; color: var(--ink-faint); }
      &:hover { background: var(--raised-strong); color: var(--ink); }
    }
    .l-starters .w-sec-head { margin-bottom: 8px; padding: 0; }
    .l-starters .w-sec-title { padding-left: 2px; }
    .l-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    @container (max-width: 640px) { .l-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .l-tile {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      min-height: 84px;
      padding: 12px 13px 11px;
      border-radius: 14px;
      background: var(--glass);
      backdrop-filter: blur(22px) saturate(1.5);
      box-shadow: var(--glass-ring);
      transition: background 0.15s;
      &:hover { background: var(--glass-over); }
    }
    .l-tile-name { font-size: 13px; font-weight: 500; line-height: 1.4; }
    .l-tile-fact {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      font-size: 12px;
      color: var(--ink-faint);
      .ic { width: 14px; height: 14px; color: var(--tone-ink); }
      span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }

    /* A loop under way: what was said rests clear of the box floating at the
       pane's foot, and dissolves at the edge that has more past it. */
    .l-stream {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 20px;
      padding: 20px 24px 124px;
      mask-image: linear-gradient(transparent, #000 56px);
      > * { width: 100%; max-width: 640px; margin: 0 auto; }
    }
    .l-said { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .l-things { display: flex; gap: 5px; }
    /* A thing brought in: a token ringed by a hair, its kind in its colour. */
    .l-thing {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 22px;
      padding: 0 7px 0 5px;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.065);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      font-size: 12.5px;
      .ic { width: 13px; height: 13px; color: #b79cff; }
    }
    .l-well { max-width: 78%; padding: 9px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.065); font-size: 14px; line-height: 1.55; }
    /* What the agent did between two things it said: one line. */
    .l-worked {
      display: flex;
      align-items: center;
      gap: 9px;
      height: 26px;
      margin-left: -8px;
      padding: 0 9px 0 8px;
      border-radius: 8px;
      width: fit-content;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink-soft);
      > i { width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--ink-faint); }
      small { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
      &:hover { background: var(--raised-strong); color: var(--ink); }
    }
    .l-chev { width: 12px; height: 12px; color: var(--ink-faint); }
    .l-chev-open { transform: rotate(90deg); }
    .l-prose {
      font-size: 14px;
      line-height: 1.6;
      p + p { margin-top: 10px; }
      .t-code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.065); font: 12.5px var(--mono); }
    }
    /* What the turn changed: one sheet, the sidetrack's own tree. */
    .l-changes {
      padding-bottom: 6px;
      border-radius: 12px;
      background: var(--panel);
      font-size: 12.5px;
      .t-g, .t-r { font-size: 11.5px; }
    }
    .l-changes-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; b { font-size: 13px; font-weight: 600; } }
    .l-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--raised); color: var(--ink-soft); .ic { width: 13px; height: 13px; } &:hover { background: var(--raised-strong); color: var(--ink); } }
    /* Collapse all: the arrows alone, a square tile only under the pointer,
       hard by Review, whose gap it takes back. */
    .l-chip-bare { justify-content: center; width: 26px; margin-right: -6px; padding: 0; background: transparent; }
    .l-node {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 28px;
      padding: 0 14px 0 12px;
      &[data-depth="1"] { padding-left: 26px; }
      > .ic:not(.l-chev) { width: 13px; height: 13px; margin: 0 2px; color: var(--ink-faint); }
      &:hover { background: var(--raised); }
    }
    .l-node-name { flex: 1; min-width: 0; color: var(--ink-soft); }
    .l-node-count { font-size: 11.5px; color: var(--ink-faint); }
    .l-dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 24px 16px; .l-box { max-width: 640px; margin: 0 auto; } }

    /* The pane's dock: a sliver on the pane's edge; the pointer on it brings
       the rail out, and it goes back when the pointer has left. */
    .w-dock { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .w-dock-tab {
      position: absolute;
      right: 0;
      top: calc(50% - 82px);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 112px;
      border-radius: 9px 0 0 9px;
      background: var(--sheet-fill);
      backdrop-filter: blur(28px) saturate(1.7);
      box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.3);
      color: var(--ink-faint);
      transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s;
      .ic { width: 11px; height: 11px; }
    }
    .w-dock-zone {
      position: absolute;
      right: 0;
      top: calc(50% - 26px);
      padding: 14px 8px 14px 14px;
      transform: translate(calc(100% - 14px), -50%);
      pointer-events: auto;
      transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .w-dock-rail {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 5px;
      border-radius: 13px;
      background: var(--sheet-fill);
      backdrop-filter: blur(28px) saturate(1.7);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 20px 48px -10px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.35);
      opacity: 0;
      transition: opacity 0.18s;
    }
    .w-dock:has(.w-dock-zone:hover) {
      .w-dock-zone { transform: translate(0, -50%); }
      .w-dock-rail { opacity: 1; }
      .w-dock-tab { transform: translateX(110%); opacity: 0; }
    }
    .w-dock-says, .w-dock-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      width: 38px;
      min-height: 34px;
      border-radius: 9px;
      color: var(--ink-soft);
      .ic { width: 14px; height: 14px; }
      b { font-size: 9.5px; font-weight: 500; white-space: nowrap; }
    }
    .w-dock-says { padding: 5px 0; }
    .w-dock-tile:hover { background: var(--raised-strong); color: var(--ink); }
    .w-dock-stop { color: #ff8f88; &:hover { color: #ff8f88; } }
    .w-dock-rule { width: 20px; height: 1px; margin: 4px 0; background: var(--hair); }

    /* The sidetrack: the field's own colour, a hair on the stage's side. With
       nothing in it, it lists the tabs to keep there. */
    .w-track { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; box-shadow: -1px 0 0 var(--hair); }
    .w-track-head { height: 52px; flex-shrink: 0; }
    .w-toggle-right { left: auto; right: 15px; .ic { transform: scaleX(-1); } }
    .w-track-note {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 20px 20px 72px;
      font-size: 12.5px;
      color: var(--ink-soft);
      text-align: center;
    }
    /* Drawn whole in a solid ink and made faint as one thing. */
    .w-track-icon { width: 26px; height: 26px; margin-bottom: 6px; color: #fff; opacity: 0.25; }
    .w-track-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
    .w-picker { width: 200px; max-width: 100%; margin-top: 8px; text-align: left; }
    .w-picker-sec { padding: 6px 7px 2px; height: 22px; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-faint); }
    .w-picker-row {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 26px;
      padding: 0 7px;
      border-radius: 8px;
      font-size: 12px;
      color: var(--ink);
      .w-tile { width: 18px; height: 18px; border-radius: 6px; .ic { width: 12px; height: 12px; } }
      /* A widget's tile: a tab's tile with its sides rounded as well as its
         corners, tinted by the workspace — the sidetrack's own, and no tab. */
      .w-tile-widget {
        border-radius: 0;
        background: color-mix(in srgb, var(--tone) 28%, transparent);
        color: color-mix(in srgb, var(--tone) 80%, #fff);
        clip-path: polygon(100% 50%, 99.88% 65.65%, 99.52% 72.08%, 98.91% 76.94%, 98.06% 80.93%, 96.96% 84.33%, 95.59% 87.27%, 93.96% 89.82%, 92.04% 92.04%, 89.82% 93.96%, 87.27% 95.59%, 84.33% 96.96%, 80.93% 98.06%, 76.94% 98.91%, 72.08% 99.52%, 65.65% 99.88%, 50% 100%, 34.35% 99.88%, 27.92% 99.52%, 23.06% 98.91%, 19.07% 98.06%, 15.67% 96.96%, 12.73% 95.59%, 10.18% 93.96%, 7.96% 92.04%, 6.04% 89.82%, 4.41% 87.27%, 3.04% 84.33%, 1.94% 80.93%, 1.09% 76.94%, 0.48% 72.08%, 0.12% 65.65%, 0% 50%, 0.12% 34.35%, 0.48% 27.92%, 1.09% 23.06%, 1.94% 19.07%, 3.04% 15.67%, 4.41% 12.73%, 6.04% 10.18%, 7.96% 7.96%, 10.18% 6.04%, 12.73% 4.41%, 15.67% 3.04%, 19.07% 1.94%, 23.06% 1.09%, 27.92% 0.48%, 34.35% 0.12%, 50% 0%, 65.65% 0.12%, 72.08% 0.48%, 76.94% 1.09%, 80.93% 1.94%, 84.33% 3.04%, 87.27% 4.41%, 89.82% 6.04%, 92.04% 7.96%, 93.96% 10.18%, 95.59% 12.73%, 96.96% 15.67%, 98.06% 19.07%, 98.91% 23.06%, 99.52% 27.92%, 99.88% 34.35%);
        .ic { width: 11px; height: 11px; }
      }
      &:hover { background: var(--raised-strong); }
    }

    /* ── A view's page on the sidebar: wells for what is set or pressed, rows
          for what there is to go to ─────────────────────────────────────── */
    /* One space between them all: what git leaves under its switch. */
    .w-controls { display: flex; flex-direction: column; gap: 10px; margin: 0 10px; .w-switch { margin: 0; } }
    .w-line { display: flex; gap: 6px; }
    /* A search that is all of a page's controls: its list starts hard under it. */
    .w-controls-head { margin-bottom: 10px; + .w-sec-page { margin-top: 0; } }
    .w-well {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 32px;
      padding: 0 10px;
      border-radius: 10px;
      background: var(--raised);
      color: var(--ink-faint);
      .ic { width: 14px; height: 14px; }
    }
    .w-square {
      display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--raised); color: var(--ink-soft);
      .ic { width: 14px; height: 14px; }
    }
    .w-square-primary { color: var(--violet-ink); }
    /* A square beside a field: quiet until the pointer is on it. */
    .w-square-quiet { color: var(--ink-faint); }
    /* The segmented control: a sunk track and a lifted thumb, the chosen
       segment's glyph in the workspace's colour. */
    .w-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      margin: 0 10px 8px;
      padding: 3px;
      border-radius: 11px;
      background: var(--track);
      span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; }
      span[data-active] { background: var(--row-active); box-shadow: var(--row-ring); color: var(--ink); font-weight: 600; .ic { color: var(--tone); } }
      .ic { width: 11px; height: 11px; }
    }
    .w-switch-3 { grid-template-columns: repeat(3, 1fr); }

    /* A section of a view's page: the tabs' own section title, parted from what
       is before it; one that heads the page has nothing to be parted from. */
    .w-sec-page { margin: 18px 0 6px; padding: 0 14px 0 10px; &:first-child { margin-top: 0; } }
    .w-sec-end { flex-shrink: 0; font-size: 11px; color: var(--ink-faint); }

    .w-count {
      margin-left: auto;
      flex-shrink: 0;
      min-width: 16px;
      padding: 2px 4px;
      border-radius: 5px;
      background: var(--raised);
      font-size: 10px;
      font-weight: 600;
      line-height: 12px;
      text-align: center;
      color: var(--ink-soft);
      &[data-tint] { background: color-mix(in srgb, var(--tint) 24%, transparent); color: color-mix(in srgb, var(--tint) 80%, #fff); }
      &[data-tint="amber"] { --tint: #e2a64a; }
      &[data-tint="violet"] { --tint: #8b6cf6; }
    }
    .w-row-text { flex: 1; }
    .w-sub {
      display: flex;
      align-items: center;
      gap: 4px;
      .ic { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.8; &:not(:first-child) { margin-left: 4px; } }
      /* A small glyph before a fact (a commit's hash and time, a card's key):
         mixed into the row's own colour, so its strokes do not show double. */
      .w-glyph { opacity: 1; color: color-mix(in srgb, #fff 28%, var(--row, var(--panel))); }
      code { font: 10.5px var(--mono); }
      b { margin-right: 3px; font-weight: 500; color: var(--ink-soft); }
      .w-glyph + b { margin-left: -1px; }
    }
    /* A status's own dot before its name. */
    .w-sdot { flex-shrink: 0; width: 7px; height: 7px; margin-right: 1px; border-radius: 50%; background: var(--status); }
    /* Who did a thing, as a row's tile: the board's two marks. */
    .w-actor {
      background: color-mix(in srgb, var(--tone) 22%, transparent);
      color: #b79cff;
      .ic { width: 13px; height: 13px; }
      &[data-who="agent"] { background: rgba(59, 184, 165, 0.2); color: #4fc3b0; }
    }
    .w-day { display: flex; align-items: center; gap: 6px; padding: 10px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-faint); .ic { width: 11px; height: 11px; } }
    .w-did {
      display: grid;
      grid-template-columns: 18px 1fr;
      align-items: center;
      padding: 3px 16px;
      font-size: 12px;
      color: var(--ink-soft);
      i { width: 6px; height: 6px; border-radius: 50%; background: #9a72ff; }
      &[data-who="agent"] i { background: #4fc3b0; }
      small { grid-column: 2; font-size: 10.5px; color: var(--ink-faint); }
    }
    .w-tile[data-tint="amber"] { --tint: #e2a64a; }

    /* ── Full-area views: sheets on the field ──────────────────────────── */
    .w-view {
      display: flex;
      flex-direction: column;
      padding: 4px 16px 0;
      mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
      .ic { flex-shrink: 0; }
      progress { appearance: none; border: 0; overflow: hidden; &::-webkit-progress-bar { background: transparent; } }
    }
    .v-grow { flex: 1; }
    .t-g { color: #7fd69a; }
    .t-r { color: #ff8f88; }
    .v-sheet { border-radius: 12px; background: var(--panel); }

    /* The head of a view's page: the first sheet on the field. */
    .v-head {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      height: 40px;
      padding: 0 8px;
      border-radius: 12px;
      background: var(--panel);
      /* A narrow head keeps its glyphs: Review gives up its name first, then
         the selectors theirs. */
      container-type: inline-size;
    }
    @container (max-width: 720px) { .v-review-label { display: none; } }
    @container (max-width: 520px) { .v-selector-label { display: none; } }
    .v-head-review { flex-shrink: 0; }
    .v-head-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 28px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 12.5px;
      color: var(--ink-faint);
      white-space: nowrap;
      min-width: 0;
      .ic { width: 13px; height: 13px; }
      span { overflow: hidden; text-overflow: ellipsis; }
      b { padding: 1px 5px; border-radius: 5px; background: var(--raised); font-size: 10px; font-weight: 600; }
      &:hover { background: var(--raised); }
    }
    .v-strong { color: var(--ink-soft); font-weight: 500; }
    .v-when { color: var(--ink-faint); font-size: 11.5px; font-weight: 400; }
    .v-head-item > i { width: 1px; height: 12px; background: var(--hair); }
    /* A split button: no fill of its own at rest, a short hair between its halves. */
    .v-split {
      display: flex;
      border-radius: 8px;
      .v-head-item { border-radius: 0; &:hover { background: none; } }
      .v-head-item + .v-head-item { position: relative; padding: 0 7px; &::before { content: ""; position: absolute; left: 0; top: 8px; width: 1px; height: 12px; background: var(--hair); } }
      &:hover { background: var(--raised); }
    }
    .v-caret { width: 10px !important; height: 10px !important; color: var(--ink-faint); }
    .v-head > .v-caret { margin-left: -4px; }
    .v-head-branch { flex-shrink: 1; }

    .v-seg {
      display: flex;
      padding: 2px;
      border-radius: 8px;
      background: var(--track);
      span { padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
      span[data-active] { background: var(--row-active); box-shadow: var(--row-ring); color: var(--ink); font-weight: 600; }
    }
    /* The commit bar: the page's second sheet, hard under the head and made as it is. */
    .v-commit { flex-shrink: 0; display: flex; align-items: center; gap: 14px; height: 40px; margin-top: 6px; padding: 0 5px; border-radius: 12px; background: var(--panel); }
    .v-placeholder { flex: 1; color: var(--ink-faint); }
    .v-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 8px; background: var(--raised); font-size: 12px; font-weight: 500; color: var(--ink-faint); .ic { width: 10px; height: 10px; } }
    .v-bare, .v-tile-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
    .v-tile-btn { min-width: 76px; justify-content: center; background: var(--raised); }
    .v-group {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 46px;
      padding: 0 6px 0 10px;
      b { font-weight: 600; }
      > span:nth-of-type(2) { color: var(--ink-faint); font-size: 12px; }
    }
    .v-group-mark { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ink-faint); color: var(--ink-soft); .ic { width: 8px; height: 8px; } }

    /* A changed file: a sheet of the sidebar's colour, its diff the rest of it. */
    .v-file {
      flex-shrink: 0;
      margin-bottom: 10px;
      border-radius: 12px;
      background: var(--panel);
      overflow: hidden;
      header {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 38px;
        padding: 0 6px 0 12px;
        font-size: 12.5px;
        > .ic { width: 11px; height: 11px; color: var(--ink-faint); }
        > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        b { font: 600 11px var(--sans); }
        .v-bare, .v-tile-btn { margin-left: -4px; }
      }
    }
    .v-file-kind { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #5b9bf0; background: radial-gradient(circle, #5b9bf0 2px, transparent 2.5px); }
    .v-ratio {
      width: 40px;
      height: 3px;
      border-radius: 2px;
      background: #e5746b;
      &::-webkit-progress-value { background: #6fcf97; }
      &::-moz-progress-bar { background: #6fcf97; }
    }
    .v-diff {
      padding: 6px 0;
      background: color-mix(in srgb, var(--field) 55%, var(--panel));
      font: 12px/18.6px var(--mono);
      div { display: grid; grid-template-columns: 36px 36px 1fr; }
      i { padding-right: 8px; font-style: normal; text-align: right; color: var(--ink-faint); }
      code { padding-left: 14px; font: inherit; font-variant-ligatures: none; white-space: pre; overflow: hidden; color: #d5d7e2; }
      [data-k="add"] { background: rgba(46, 160, 98, 0.26); i { color: rgba(255, 255, 255, 0.62); } }
      [data-k="del"] { background: rgba(218, 54, 80, 0.24); i { color: rgba(255, 255, 255, 0.62); } }
      .t-dim { color: rgba(255, 255, 255, 0.42); font-style: italic; }
      .t-v { color: #c4a7ff; }
      .t-c { color: #7cb7ff; }
      .t-t { color: #6fd6c4; }
      .t-y { color: #f2cc60; }
      .t-g { color: #a5d6a7; }
    }

    .v-commit-info {
      flex-shrink: 0;
      margin: 14px 0 12px;
      padding: 18px 20px;
      h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
      p { max-width: 52ch; margin-top: 6px; color: var(--ink-soft); line-height: 1.5; }
      dl { display: grid; grid-template-columns: 48px 1fr; gap: 7px 0; margin: 16px 0 0; font-size: 12px; }
      dt { font-size: 11px; color: var(--ink-faint); }
      dd { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .ic { width: 12px; height: 12px; } }
      dd:first-of-type { font: 11px var(--mono); }
    }

    /* The board: a sheet per status, a soft tile per card. */
    .v-board { flex-direction: row; align-items: stretch; gap: 10px; padding-bottom: 16px; mask-image: none; }
    .v-col { flex: 0 0 280px; min-width: 0; padding: 0 8px 8px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 72%, var(--field)); }
    [data-status] { --status: #8b8fa3; }
    [data-status="progress"], [data-status="review"] { --status: #f0b23e; }
    [data-status="done"] { --status: #34c759; }
    .v-col-title {
      display: flex;
      align-items: center;
      gap: 9px;
      height: 40px;
      padding: 0 8px;
      font-size: 12.5px;
      font-weight: 600;
      i { width: 7px; height: 7px; border-radius: 50%; background: var(--status); }
      span { padding: 2px 7px; border-radius: 9px; background: var(--raised); font-size: 11px; font-weight: 500; color: var(--ink-soft); }
    }
    .v-card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-bottom: 8px;
      padding: 10px 11px;
      border-radius: 10px;
      background: #1d1e2a;
      text-align: left;
      overflow: hidden;
      &:is(button):hover { background: #232432; }
    }
    .v-card-top { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-faint); }
    .v-kind {
      display: inline-flex;
      color: #3bb8a5;
      .ic { width: 12px; height: 12px; }
      &[data-kind="bug"] { color: #e5746b; }
      &[data-kind="story"] { color: #7c8cf8; }
    }
    .v-parent { display: inline-flex; align-items: center; gap: 3px; .ic { width: 9px; height: 9px; transform: scaleX(-1) rotate(90deg); } }
    .v-who {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: rgba(132, 94, 247, 0.22);
      color: #b79cff;
      .ic { width: 10px; height: 10px; }
      &[data-who="agent"] { background: rgba(59, 184, 165, 0.2); color: #4fc3b0; }
    }
    .v-card-top .v-who { margin-left: auto; }
    .v-card-name { margin: 6px 0 7px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ink); }
    .v-card-facts {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--ink-faint);
      span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
      .ic { width: 11px; height: 11px; }
    }
    .v-pri {
      &::before { content: "⌃"; margin-right: 1px; font-size: 10px; }
      &[data-pri="high"] { color: #ff8f6b; }
      &[data-pri="medium"] { color: #e2b34a; &::before { content: "="; } }
      &[data-pri="low"]::before { content: "⌄"; }
    }
    .v-touch { display: inline-flex; align-items: center; gap: 5px; color: #4fc3b0; font-size: 11px; .ic { width: 11px; height: 11px; } }
    .v-card-hair {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: transparent;
      &::-webkit-progress-value { background: #f0b23e; }
      &::-moz-progress-bar { background: #f0b23e; }
    }

    /* A card's page and an artifact: a centred column. */
    .v-doc { align-items: center; > * { width: 100%; max-width: 760px; } }
    .v-card-page {
      padding: 14px 20px 24px;
      border-radius: 14px;
      background: linear-gradient(180deg, color-mix(in srgb, #3bb8a5 9%, var(--panel)), var(--panel) 200px);
      h3 { margin-top: 4px; font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
      /* The head is in from the sheet's edge as a section's title is. */
      > :is(.v-card-line, .v-card-key, h3, .v-pills, .v-tags) { margin-inline: -6px; }
    }
    .v-card-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; > :not(.v-grow) { flex-shrink: 0; } }
    .v-kind-tile { align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(59, 184, 165, 0.2); }
    .v-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 28px;
      padding: 0 10px;
      border-radius: 8px;
      background: var(--raised);
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap;
      min-width: 0;
      .ic { width: 11px; height: 11px; color: var(--ink-soft); }
      i { width: 7px; height: 7px; border-radius: 50%; background: var(--status); }
      &.v-pri { color: var(--ink); &::before { color: #ff8f6b; } }
    }
    .v-pill-parent { flex: 0 1 auto; span { overflow: hidden; text-overflow: ellipsis; } .ic { transform: scaleX(-1) rotate(90deg); } }
    .v-card-line .v-pill { margin-left: 6px; }
    .v-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 28px;
      padding: 0 11px;
      border-radius: 8px;
      /* The card's next step: the workspace's colour as a tint and an ink, never a fill. */
      background: color-mix(in srgb, var(--tone) 16%, transparent);
      color: color-mix(in srgb, var(--tone) 60%, var(--ink));
      font-size: 12.5px;
      font-weight: 600;
      .ic { width: 12px; height: 12px; }
    }
    .v-card-key { margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
    .v-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
    .v-tags {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      span { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--raised); font-size: 12.5px; color: var(--ink-soft); }
      .ic { width: 9px; height: 9px; color: var(--ink-faint); }
    }
    .v-sec {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 28px 0 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--ink-faint);
      .ic { width: 11px; height: 11px; }
      small { margin-left: 6px; font-size: 11px; font-weight: 400; }
      i { flex: 1; height: 1px; margin-left: 6px; background: var(--hair); }
    }
    .v-prose {
      font-size: 13.5px;
      line-height: 22px;
      color: rgba(255, 255, 255, 0.8);
      user-select: text;
      h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
      h4 { margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
      p + p, h3 + p { margin-top: 12px; }
      ul { margin: 8px 0; padding-left: 20px; list-style: disc; li { margin: 3px 0; &::marker { color: var(--ink-soft); } } }
      b { font-weight: 650; color: var(--ink); }
      code { padding: 1px 5px; border-radius: 5px; background: var(--raised); font: 12px var(--mono); }
      pre {
        margin: 14px 0;
        padding: 12px 14px;
        border-radius: 10px;
        background: var(--raised);
        font: 12px/22px var(--mono);
        overflow: hidden;
        .ln { white-space: pre; }
        .t-v { color: #c4a7ff; } .t-c { color: #7cb7ff; } .t-t { color: #6fd6c4; } .t-y { color: #f2cc60; }
      }
      table { border-collapse: collapse; font-size: 13px; }
      th, td { padding: 6px 10px; border: 1px solid var(--hair); text-align: right; &:first-child { text-align: left; } }
      th { font-weight: 600; color: var(--ink); }
    }
    .v-article { padding: 24px 2px 0; }
    .v-task {
      display: flex;
      align-items: center;
      gap: 11px;
      height: 34px;
      font-size: 13px;
      > i { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-faint); .ic { width: 11px; height: 11px; } }
      span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      small { font-size: 11px; color: var(--ink-faint); }
      &[data-done] { > i { background: #6fcf97; box-shadow: none; color: #10261a; } span { color: var(--ink-faint); text-decoration: line-through; } }
    }
    .v-task-add { color: var(--ink-faint); > .ic { width: 12px; height: 12px; margin: 0 2px; } }

    /* The sidetrack, put away: the stage has its room, and its toggle is the
       last of the titlebar's buttons. */
    .w-track-open { display: none; .ic { transform: scaleX(-1); } }
    @media (min-width: 1181px) {
      &[data-track="closed"] {
        --track-room: 0px;
        grid-template-columns: 88px 280px minmax(0, 1fr);
        .w-track { display: none; }
        .w-track-open { display: flex; }
      }
    }
  }

  /* ── Pricing, questions, foot — shared by both options ─────────────────── */

  .p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 12px; }

  .p-plan {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 16px;
    padding: 22px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);

    header { grid-row: 1; h3 { font: 700 16px var(--sans); letter-spacing: -0.01em; } p { font-size: 13px; color: var(--ink-soft); } }
    .p-price { grid-row: 2; display: flex; align-items: baseline; gap: 8px; b { font: 700 40px/1 var(--display); letter-spacing: -0.03em; } span { font-size: 12px; color: var(--ink-faint); } }
    .p-controls { grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; }
    .btn { grid-row: 4; }
    .p-list { grid-row: 5; }
  }

  .p-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    font-size: 13px;
    color: var(--ink-soft);
    li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
    .ic { width: 13px; height: 13px; margin-top: 2.5px; color: var(--violet-ink); }
  }

  .p-note { margin-top: 14px; font-size: 12px; color: var(--ink-faint); }

  .q-list { display: flex; flex-direction: column; }
  .q-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; padding: 16px 0; }
  .q-item dt { font-size: 15px; font-weight: 600; }
  .q-item dd { color: var(--ink-soft); }

  .q-help {
    display: flex;
    align-items: center;
    gap: 16px 18px;
    margin-top: 80px;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);

    div { flex: 1; }
    h3 { margin-bottom: 6px; font: 700 15px/1.3 var(--sans); }
    p { font-size: 13px; color: var(--ink-soft); max-width: 62ch; }
    a:not(.btn) { color: var(--violet-ink); }
  }

  .site-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 72px 0 40px;
    font-size: 12px;
    color: var(--ink-faint);
    ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
    a:hover { color: var(--ink); }
    .foot-plus { color: var(--violet-ink); font-weight: 500; &:hover { color: var(--violet-ink); } }
    /* The site's pages on its left, the legal ones on its right. */
    .foot-hair { width: 1px; height: 12px; background: var(--hair); }
  }

  /* ════════════════════════════════════════════════════════════════════════
     B — one window on paper.
     ════════════════════════════════════════════════════════════════════════ */

  .lp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1128px;
    margin: 0 auto;
    padding: 22px 24px;
    nav { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--ink-soft); a:hover { color: var(--ink); } }
  }
  /* The one offer: its own ink, a step bolder. */
  .lp-nav nav .lp-nav-plus { color: var(--violet-ink); font-weight: 500; &:hover { color: var(--violet-ink); } }
  .lp-brand { display: flex; align-items: center; gap: 9px; font: 700 17px var(--display); letter-spacing: -0.02em; .bird { width: 24px; color: var(--violet-ink); } }

  .lp-hero { padding: 56px 24px 52px; text-align: center; }

  .lp-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 8px 0 4px;
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);
    font-size: 12.5px;
    color: var(--ink-soft);
    b { padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet-ink); font-weight: 600; }
    .ic { width: 11px; height: 11px; color: var(--ink-faint); }
  }

  .lp-hero h1 {
    margin: 26px 0 20px;
    font: 700 clamp(52px, 8.4vw, 112px)/0.95 var(--display);
    letter-spacing: -0.035em;
    em { font-style: normal; color: var(--violet-ink); }
  }
  .lp-lede { max-width: 44ch; margin: 0 auto; font-size: 19px; line-height: 1.5; color: var(--ink-soft); }
  .lp-get { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }

  .lp-stage { max-width: 1248px; margin: 0 auto; padding: 0 24px; perspective: 2000px; }
  /* Held folded through the delay, then let go: a fill that outlasts the
     unfold keeps the window a 3D layer, and Safari draws the seams of the
     glass inside it as hairlines. */
  .lp-fold { transform-origin: 50% 0; animation: site-unfold 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards; }

  .lp-does, .lp-sec { max-width: 1128px; margin: 136px auto 0; padding: 0 24px; scroll-margin-top: 40px; }
  .lp-sec { container-type: inline-size; }
  .lp-does h2 { font: 400 15px var(--sans); color: var(--ink-soft); }
  .lp-sec h2 { max-width: 16ch; font: 700 clamp(34px, 5vw, 60px)/1 var(--display); letter-spacing: -0.04em; }
  .lp-sub { max-width: 62ch; margin: 18px 0 36px; color: var(--ink-soft); }
  .lp-sec h2:not(:has(+ .lp-sub)) { margin-bottom: 24px; }

  .lp-words {
    margin-top: 14px;
    font: 700 clamp(28px, 4.6vw, 58px)/1.14 var(--display);
    letter-spacing: -0.04em;
    button { margin-right: 0.3em; color: color-mix(in srgb, var(--ink) 24%, transparent); text-align: left; transition: color 0.2s; }
    button[data-active="true"] { color: var(--ink); }
  }
  .lp-word-text { min-height: 5em; margin-top: 22px; p { max-width: 58ch; font-size: 18px; line-height: 1.5; color: var(--ink-soft); } }

  .site-foot { max-width: 1128px; margin: 0 auto; padding: 96px 24px 72px; }

  /* ── Pages round the landing: download, support, legal ─────────────────── */

  .page { max-width: 1128px; margin: 0 auto; padding: 64px 24px 0; }
  .page-narrow { max-width: 728px; }
  .page h1, .dl-head h1 { color: var(--ink); font: 700 clamp(36px, 5.4vw, 64px)/1 var(--display); letter-spacing: -0.04em; }
  .page-lede { max-width: 54ch; margin: 18px 0 36px; font-size: 17px; color: var(--ink-soft); a { color: var(--violet-ink); } }

  .dl-head { margin-bottom: 36px; p { margin-top: 14px; font-size: 13px; color: var(--ink-faint); } }
  .dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dl-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);

    h2 { font: 700 18px var(--sans); letter-spacing: -0.01em; }
    p { font-size: 13px; color: var(--ink-soft); }
  }
  /* Said beside a platform's name: quiet amber, never an alarm. */
  .dl-tag {
    padding: 2px 7px;
    border-radius: 7px;
    background: color-mix(in srgb, #e2a64a 16%, transparent);
    color: color-mix(in srgb, #e2a64a 58%, var(--ink));
    font: 600 11.5px var(--sans);
    letter-spacing: 0;
  }
  /* On a phone the tag goes under the name rather than push the button off the card. */
  .dl-card h2:has(.dl-tag) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
  /* A platform with several files: its button opens them as a menu under it.
     While it is open the button's own ::before covers the page, so a press
     anywhere else is a press on the button and closes it. */
  .dl-menu {
    position: relative;
    summary { list-style: none; cursor: pointer; user-select: none; &::-webkit-details-marker { display: none; } }
    summary .ic:last-child { width: 12px; height: 12px; margin-left: -2px; opacity: 0.8; }
    &[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 4; cursor: default; }
  }
  .dl-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    min-width: 200px;
    padding: 5px;
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -18px rgba(20, 22, 40, 0.4);

    a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      height: 32px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 13px;
      &:hover { background: var(--row-hover); }
    }
    b { font-weight: 500; }
    span { color: var(--ink-faint); }
  }
  /* What Origami+ adds, said once in passing: text on the field, no sheet. */
  .dl-plus {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    margin-top: 22px;
    padding: 0 22px;
    font-size: 14px;
    color: var(--ink-soft);
    b { font-size: 12px; letter-spacing: 0.04em; color: var(--violet-ink); }
  }

  .cl-list { display: flex; flex-direction: column; gap: 12px; }
  .cl-item {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px 28px;
    padding: 22px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);
  }
  .cl-when { display: flex; flex-direction: column; b { font-weight: 700; } span { font-size: 12.5px; color: var(--ink-faint); } }

  /* Rendered Markdown and the legal pages: one prose. */
  .changelog-prose, .prose {
    color: var(--ink-soft);
    line-height: 1.65;

    a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 2px; }
    strong { color: var(--ink); font-weight: 600; }
    ul, ol { padding-left: 1.2em; }
    ul { list-style: disc; }
    ol { list-style: decimal; }
    li + li { margin-top: 0.3em; }
    code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--raised); font: 0.9em var(--mono); color: var(--ink); }
    pre { padding: 14px 16px; border-radius: 10px; background: var(--raised); overflow-x: auto; code { padding: 0; background: none; } }
    blockquote { padding-left: 1em; box-shadow: inset 2px 0 0 var(--violet); }
  }
  .changelog-prose {
    > * + * { margin-top: 0.8em; }
    h1, h2, h3, h4 { font: 700 15px/1.4 var(--sans); color: var(--ink); }
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
  }
  .prose {
    max-width: 728px;
    section { margin-top: 40px; }
    h2 { margin-bottom: 10px; font: 700 20px/1.3 var(--display); letter-spacing: -0.02em; color: var(--ink); }
    h3 { margin: 22px 0 8px; font: 700 15px/1.4 var(--sans); color: var(--ink); }
    p + p, p + ul, ul + p { margin-top: 12px; }
  }
  .prose-meta { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }

  /* A form: every field is the one well. */
  .form { display: flex; flex-direction: column; gap: 18px; }
  .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    label { font-size: 13px; color: var(--ink-soft); }
    input, select, textarea {
      width: 100%;
      padding: 11px 13px;
      border: 0;
      border-radius: 10px;
      background: var(--raised);
      color: var(--ink);
      font: 15px/1.4 var(--sans);
      transition: background 0.15s, box-shadow 0.15s;

      &::placeholder { color: var(--ink-faint); }
      &:hover { background: var(--raised-strong); }
      &:focus { outline: none; background: var(--raised-strong); box-shadow: 0 0 0 2px var(--violet); }
    }
    textarea { min-height: 180px; resize: vertical; }
    select {
      appearance: none;
      background-image: url("/assets/icons/down-57fda948.svg");
      background-position: right 12px center;
      background-repeat: no-repeat;
      background-size: 14px;
    }
  }

  .note {
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--violet) 9%, transparent);
    font-size: 14px;
    color: var(--ink-soft);
    b { color: var(--ink); }
  }
  .note-error { background: rgba(224, 49, 49, 0.09); color: #b42318; }


  /* ── Origami+: an account's pages ──────────────────────────────────────── */

  .page-short { min-height: 46vh; }
  .page-small {
    .form, .note { max-width: 420px; }
    .form { gap: 14px; }
    .field input { padding: 9px 12px; font-size: 14px; }
  }
  .acct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
  .acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .acct-tabs { margin-bottom: 16px; }
  .acct-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
  .acct-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

  .sheet {
    padding: 22px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);
    min-width: 0;
  }
  .sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    h2 { font: 700 15px var(--sans); }
    span { font-size: 13px; color: var(--ink-faint); }
  }
  .sheet-offer { display: flex; flex-direction: column; gap: 18px; max-width: 560px; p { color: var(--ink-soft); } strong { color: var(--ink); font-weight: 600; } }

  .acct-team {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 32px;
    margin-top: 12px;
    h2 { font: 700 15px var(--sans); }
    p { max-width: 62ch; font-size: 14px; color: var(--ink-soft); }
    .hint { grid-column: 2; justify-self: end; }
  }
  .acct-team-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

  /* What a licence or an organization is set to: a quiet label over each. */
  .facts { display: flex; flex-direction: column; gap: 22px; }
  .fact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    dt { font-size: 12.5px; color: var(--ink-faint); }
    dd { font-size: 15px; max-width: 100%; }
  }
  .fact-actions { display: flex; gap: 14px; }
  .hint, .fact dd.hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
  .wrap { overflow-wrap: anywhere; }
  .key { font-family: var(--mono); letter-spacing: 0.02em; }
  .status { color: var(--ink-faint); &[data-active="true"] { color: var(--violet-ink); font-weight: 600; } }

  .link { font-size: 13px; font-weight: 600; color: var(--violet-ink); cursor: pointer; &:hover { text-decoration: underline; text-underline-offset: 3px; } }
  input.link { padding: 0; border: 0; background: none; font-family: inherit; }
  .link-quiet { color: var(--ink-soft); }
  .link-danger { color: #c2261d; }
  summary.link { list-style: none; &::-webkit-details-marker { display: none; } }

  /* A plain field outside a labelled form. */
  .input {
    height: 36px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--raised);
    color: var(--ink);
    font: 14px var(--sans);
    transition: background 0.15s, box-shadow 0.15s;
    &::placeholder { color: var(--ink-faint); }
    &:hover { background: var(--raised-strong); }
    &:focus { outline: none; background: var(--raised-strong); box-shadow: 0 0 0 2px var(--violet); }
  }
  .input-number { width: 76px; text-align: center; }
  .input-grow { flex: 1; min-width: 200px; }
  .input-sm { height: 32px; width: 100%; font-size: 13px; }
  .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }

  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
  .toolbar-grow { flex: 1; min-width: 160px; }
  .toolbar-foot { justify-content: space-between; margin: 14px 0 0; }

  /* Several rows in one sheet, parted by hairs. */
  .rows > * + * { box-shadow: 0 -1px 0 var(--hair); }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
  .rows > .row:last-child { padding-bottom: 0; }
  .row-stack { flex-direction: column; align-items: stretch; gap: 0; > .row { padding: 0; } }
  .row-main { min-width: 0; font-size: 14px; }
  .row-sub { font-size: 12.5px; color: var(--ink-faint); }
  .row-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
  .row-edit { display: flex; align-items: center; gap: 8px; }
  .row-name {
    min-width: 0;
    margin: -3px -6px;
    padding: 3px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: 600 14px var(--sans);
    field-sizing: content;
    &:hover { background: var(--raised); }
    &:focus { outline: none; background: var(--raised-strong); }
  }
  .row-more { margin-top: 10px; }
  .rows-well { margin-top: 10px; padding: 0 14px; border-radius: 12px; background: var(--raised); .row { padding: 12px 0; } }
  .empty { padding: 18px 0 4px; font-size: 14px; color: var(--ink-faint); }
  .note .acct-actions { margin-top: 12px; }

  /* ── Narrower ──────────────────────────────────────────────────────────── */

  @container (max-width: 700px) {
    .p-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .p-plan { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 12px; align-content: start; }
    .p-plan > * { grid-column: 1; grid-row: auto; }
    .p-plan .btn { justify-self: start; }
    .p-plan .p-list { grid-column: 2; grid-row: 1 / span 4; }
    .q-item { grid-template-columns: 1fr; }
  }

  @container (max-width: 460px) {
    .p-plan { grid-template-columns: minmax(0, 1fr); }
    .p-plan .p-list { grid-column: 1; grid-row: auto; }
    .p-plan .btn { justify-self: stretch; }
  }

  /* ── Docs: every section's pages beside one page as a sheet ───────────── */

  .docs {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 64px;
    max-width: 1128px;
    margin: 0 auto;
    padding: 28px 24px 0;
  }

  .docs-side { align-self: start; }
  .docs-toc-toggle, .docs-contents { display: none; }
  .docs-toc { display: flex; flex-direction: column; }

  .docs-search {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-bottom: 22px;
    padding: 0 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 4.5%, var(--field));
    color: var(--ink-faint);
    transition: background 0.15s, box-shadow 0.15s;
    &:hover { background: color-mix(in srgb, var(--ink) 7.5%, var(--field)); }
    &:focus-within { background: color-mix(in srgb, var(--ink) 7.5%, var(--field)); box-shadow: 0 0 0 2px var(--violet); }
    .ic { width: 15px; height: 15px; flex: none; }
    input {
      flex: 1;
      min-width: 0;
      border: 0;
      background: none;
      color: var(--ink);
      font: 14px var(--sans);
      outline: none;
      &::placeholder { color: var(--ink-faint); }
      &::-webkit-search-cancel-button { display: none; }
    }
    kbd { padding: 2px 6px; border-radius: 5px; background: var(--raised-strong); font: 500 10.5px var(--sans); color: var(--ink-soft); }
  }

  .docs-sec {
    margin-bottom: 20px;
    h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 6px;
      padding-left: 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-faint);
      &::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
    }
    a {
      display: block;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 14px;
      color: var(--ink-soft);
      &:hover { background: var(--row-hover); color: var(--ink); }
      &[aria-current="page"] { background: var(--panel); box-shadow: var(--sheet-ring); color: var(--ink); font-weight: 500; }
    }
  }
  .docs-none { padding: 4px 10px; font-size: 13px; color: var(--ink-faint); }

  .docs-main { min-width: 0; padding-top: 4px; }
  .docs-main h1 { font: 700 clamp(32px, 4.2vw, 44px)/1.08 var(--display); letter-spacing: -0.03em; }
  .docs-path {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ink-faint);
    a:hover { color: var(--ink); }
  }
  .docs-lede { max-width: 56ch; margin: 12px 0 20px; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }

  .docs-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
  .docs-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--sheet-ring);
    font-size: 13px;
    color: var(--ink-soft);
    i { font-style: normal; color: var(--ink-faint); }
    kbd { min-width: 20px; padding: 2px 6px; border-radius: 5px; background: var(--raised-strong); font: 500 11.5px var(--sans); text-align: center; color: var(--ink); }
  }
  .docs-fact-mcp { background: color-mix(in srgb, #0ca678 11%, var(--panel)); box-shadow: none; color: #087f5b; }
  .docs-fact-plus { background: color-mix(in srgb, var(--violet) 11%, var(--panel)); box-shadow: none; color: var(--violet-ink); }
  .docs-fact-time { margin-left: auto; background: none; box-shadow: none; color: var(--ink-faint); }

  .docs-body {
    padding: 28px 30px;
    color: var(--ink);

    h2 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 30px 0 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-faint);
      &::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
      &:first-child { margin-top: 0; }
    }
    p + p { margin-top: 12px; }
    b, strong { font-weight: 600; }
    code { padding: 1px 5px; border-radius: 5px; background: var(--raised); font: 500 13px var(--mono); }
    a:not(.docs-rows a) { color: var(--violet-ink); &:hover { text-decoration: underline; text-underline-offset: 3px; } }

    ol { display: grid; gap: 12px; counter-reset: step; }
    ol > li {
      counter-increment: step;
      position: relative;
      padding-left: 36px;
      &::before {
        content: counter(step);
        position: absolute;
        left: 0;
        top: 0;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: var(--raised);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-soft);
      }
    }
    ul:not(.docs-rows) { display: grid; gap: 8px; }
    ul:not(.docs-rows) > li {
      position: relative;
      padding-left: 18px;
      color: var(--ink-soft);
      &::before { content: ""; position: absolute; left: 3px; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
    }
  }

  .docs-rows a {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    margin: 0 -12px;
    padding: 9px 12px;
    border-radius: 10px;
    &:hover { background: var(--row-hover); }
    b { font-weight: 500; }
    span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-faint); }
  }

  .docs-index { margin-bottom: 14px; }
  .docs-index .docs-rows a { grid-template-columns: minmax(0, 1fr); gap: 1px; span { white-space: normal; } }

  .docs-pn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    a {
      padding: 14px 18px;
      border-radius: 14px;
      background: var(--panel);
      box-shadow: var(--sheet-ring);
      font-weight: 500;
      transition: background 0.15s;
      &:hover { background: var(--row-hover); }
    }
    small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-faint); }
    .docs-next { text-align: right; }
  }

  @media (max-width: 960px) {
    .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
    .docs-side { position: static; margin-bottom: 22px; }
    .docs-contents {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 0 12px;
      border-radius: 10px;
      background: var(--raised);
      font-size: 14px;
      cursor: pointer;
      .docs-contents-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-faint); }
      .ic { width: 14px; height: 14px; transition: transform 0.15s; }
    }
    .docs-toc { display: none; max-height: none; margin-top: 10px; padding: 14px 16px 2px; border-radius: 14px; background: var(--panel); box-shadow: var(--sheet-ring); }
    .docs-search { margin-bottom: 16px; }
    .docs-search kbd { display: none; }
    .docs-toc-toggle:checked ~ .docs-toc { display: flex; }
    .docs-toc-toggle:checked ~ .docs-contents .ic { transform: rotate(180deg); }
    .docs-body { padding: 20px; }
    .docs-rows a { grid-template-columns: minmax(0, 1fr); gap: 1px; span { white-space: normal; } }
    .docs-fact-time { margin-left: 0; }
  }

  @media (max-width: 1180px) {
    .app-win { grid-template-columns: 88px 280px minmax(0, 1fr); --track-room: 0px; }
    .app-win .w-track { display: none; }
  }

  @media (max-width: 960px) {
    .acct-grid { grid-template-columns: 1fr; }
    .app-win { display: none; }
    .app-shot { display: block; }
    .lp-sec .p-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .lp-sec .p-plan { grid-row: auto; grid-template-rows: none; }
    .lp-sec .p-plan > * { grid-row: auto; }
  }

  @media (max-width: 820px) {
    .lp-nav { padding: 16px 20px; nav { gap: 16px; font-size: 13px; } }
    /* Support is in the footer; on a phone the nav keeps Origami+, Download and Docs. */
    .lp-nav nav a[href="/support"] { display: none; }
    /* Wrapped, the legal links take a line of their own in the hair's place. */
    .site-foot .foot-hair { flex-basis: 100%; height: 0; }
    .lp-hero { padding-top: 32px; }
    .q-help { flex-wrap: wrap; }
    .dl-plus { justify-content: flex-start; }
    .acct-team { grid-template-columns: 1fr; .hint { grid-column: 1; justify-self: start; } }
    .dl-grid, .form-row { grid-template-columns: 1fr; }
    .cl-item { grid-template-columns: 1fr; }
    .page { padding-top: 36px; }
    .q-item { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lp-fold { animation: none; }
    .app-win .l-mark, .app-win .w-side::before { animation: none; }
  }
}