/* The browser node's page: where its cards sit and the few things only it
   draws. Every colour, radius and type size is a ui.css token. */
@layer ui, app;

@layer app {
  [hidden] { display: none !important; }
  /* The page itself never scrolls, pans or bounces: only a pane's own body
     does, and its end goes no further (a phone dragged the whole shell, the
     header with it, the wrong way). The safe areas are tokens, so a test can
     give a phone a notch that the emulator doesn't have. */
  :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
  html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
  :is(.pane > .body, .tree, .settings-body, .launch-list, .xterm-viewport, .files-body .view *) { overscroll-behavior: contain; }
  /* The shell's sizes are the tiling shell it grew from: 13 px text, 11 px
     chrome, a 26 px bar, a 24 px title bar and tab strip, 6 px gaps. Its
     shape too: each pane a card with 12 px corners, lifted by a shadow off
     the ground rather than drawn round by a border, its title bar part of
     the card. Only a container of two tabs or more has a strip, as manila
     folder tabs, 10 px corners on top, 3 px apart. The tab behind is a
     shade of ink into the ground and 3 px shorter; the shown one is the
     card's own ground, so tab and card read as one folder. */
  /* The ground's colour under everything, so what shows past the page (a
     phone's safe areas, an overscroll) is the shell's. */
  body { font-size: .8125rem; line-height: 1.5; background: var(--night); }
  /* A phone's open pane runs under the status bar, so the page behind it is
     the card's colour too: iOS tints its bar from what is drawn there. */
  :root[data-bar="card"] body { background: var(--card); }
  .shell {
    --pane-radius: 12px; --tab-radius: 10px;
    --pane-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 30%)), 0 4px 16px light-dark(rgb(0 0 0 / 4%), rgb(0 0 0 / 22%));
    --tab-parked: color-mix(in srgb, var(--foreground) 6%, var(--night));
  }
  #shell, .shell { height: 100%; display: flex; flex-direction: column; }
  .mono, code { font-family: var(--font-mono); font-size: .8125rem; font-variant-ligatures: none; }
  .dim { color: var(--muted-foreground); }
  .small { font-size: .75rem; color: var(--muted-foreground); margin: 0; }
  p { margin: 0; }

  /* The bar, at the bottom as in i3, at every width: 26 px, on the cards'
     ground with no rule across it; three columns so the middle one is the
     middle of the screen; the sides share the rest, and the right one never
     shrinks below its facts. The date and time, and two standing facts
     that whisper. */
  .bar {
    order: 2; flex: none; height: 1.625rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: stretch;
    background: var(--night); font-size: .75rem; user-select: none;
  }
  .bar-left { display: flex; align-items: stretch; min-width: 0; }
  .bar-mid { display: flex; align-items: center; gap: .125rem; padding: 0 .375rem; }
  .bar-right { justify-self: end; display: flex; align-items: center; gap: .875rem; padding: 0 .75rem; }
  .bar .ui-button:is([data-size="xs"], [data-size="icon-xs"]) { height: 1.5rem; font-weight: 400; color: var(--muted-foreground); }
  .bar .ui-button[data-size="icon-xs"] { width: 1.75rem; }
  .bar .ui-button:is([data-size="xs"], [data-size="icon-xs"]):hover, .bar .ui-button[data-state="open"], .bar .ui-button[aria-pressed="true"]:not(.ws) { color: var(--foreground); }
  /* An icon at the chrome's size: 14 px in the bar, 13 px in a pane's header. */
  .icon { width: .875rem; height: .875rem; flex: none; }
  .pane .ui-card-header .icon { width: .8125rem; height: .8125rem; }
  .bar .tools { display: inline-flex; align-items: center; gap: 0; }
  .clock { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 .25rem; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .6875rem; color: var(--muted-foreground); white-space: nowrap; }

  /* Before the script: the first workspace's one card (tiles.ts, HOME),
     so nothing moves when it runs. */
  .panes {
    flex: 1; display: grid; gap: 6px; padding: 6px; min-height: 0; background: var(--night);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "note";
  }
  /* Tiled: each pane where app.tsx's sheet puts it (--x, --y, --w, --h as
     fractions), and only the current workspace's shown. i3's gaps, 6 px
     between two panes and on the workspace's edge: each fraction is of the
     room less one gap, and each pane one gap smaller. */
  .panes[data-tiled] { display: block; position: relative; }
  /* --tabs: how many tab strips sit on its top edge, each --strip tall. */
  .panes { --strip: 1.5rem; }
  .panes[data-tiled] > .pane {
    display: none; position: absolute; box-sizing: border-box;
    left: calc(6px + var(--x) * (100% - 6px)); top: calc(6px + var(--y) * (100% - 6px) + var(--tabs, 0) * var(--strip));
    width: calc(var(--w) * (100% - 6px) - 6px); height: calc(var(--h) * (100% - 6px) - 6px - var(--tabs, 0) * var(--strip));
  }
  /* A tile's tabs (SYS-18): its shown pane's title bar, 24 px; the shown tab
     in the pane's own ground, and in the brand while the pane has the
     focus. The tabs share the strip evenly, the shown one never narrower
     than its name and its chrome need: with many, the others compact. */
  .tabstrip .tab {
    position: relative; display: flex; align-items: stretch; min-width: 1.75rem; flex: 1 1 0; height: calc(100% - 3px);
    border-radius: var(--tab-radius) var(--tab-radius) 0 0; background: var(--tab-parked); color: var(--muted-foreground); font-size: .6875rem;
  }
  .tabstrip .tab[aria-current] { min-width: max-content; height: 100%; color: var(--foreground); background: var(--card); }
  .tabstrip .tab[aria-current] .chrome { padding-right: .125rem; }
  /* The focused pane's tab: its name in full ink, and the brand as a hairline along its top. */
  .tabstrip .tab[aria-current][data-focused] { box-shadow: inset 0 2px 0 var(--brand); }
  .tabstrip .tab:not([data-focused]) .tab-go { opacity: .8; }
  .tabstrip .ui-button { height: auto; border-radius: 0; color: inherit; font-size: inherit; font-weight: 400; box-shadow: none; }
  .tabstrip .ui-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
  .tabstrip .tab-go { flex: 1; justify-content: flex-start; padding: 0 .25rem 0 .625rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; border-top-left-radius: var(--tab-radius); }
  .tabstrip .tab-close { width: 1.375rem; opacity: 0; border-top-right-radius: var(--tab-radius); }
  .tabstrip .tab:hover .tab-close, .tabstrip .tab:focus-within .tab-close { opacity: .6; }
  .tabstrip .tab-close:hover, .tabstrip .tab-close:focus-visible { opacity: 1; }
  @media (hover: none) { .tabstrip .tab-close { opacity: .6; } }
  /* A ghost tab (SYS-44): where a new tab would be, after a pane's name or
     a strip's last tab; an outline on the header's hover, and lit by the
     line; a faint one always on a touch screen, which has no hover. */
  .tab-ghost {
    flex: none; align-self: flex-end; width: 2.25rem; height: calc(100% - 3px); margin: 0; padding: 0; cursor: pointer;
    border: 1px dashed transparent; border-bottom: 0; border-radius: var(--tab-radius) var(--tab-radius) 0 0; background: none;
  }
  .pane .ui-card-header > .tab-ghost { order: 1; }
  .ui-card-header:hover .tab-ghost { border-color: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
  .tab-ghost:hover, .tab-ghost:focus-visible { border-color: var(--muted-foreground); background: var(--tab-parked); }
  :root:is([data-alt], [data-aim]) .tab-ghost[data-line] { border: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); border-bottom: 0; }
  @media (hover: none) { .tab-ghost { border-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); } }
  /* The line after a tab: the next pane opens there, as a tab. */
  :root:is([data-alt], [data-aim]) .tabstrip .tab[data-line-after]::after {
    content: ""; position: absolute; right: -3px; top: 2px; bottom: 0; width: 2px; border-radius: 1px; background: var(--brand); pointer-events: none;
  }
  /* Its tab names it, so its title bar is its strip, its chrome in its shown tab. */
  .pane[data-tabbed] > .ui-card-header > .ui-card-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pane[data-tabbed] > .ui-card-header > .link { margin: 0 .25rem 0 .5rem; }
  /* The strip in a pane's title bar: the card's own top, on the ground's
     colour; the shown tab is the card, so tab and body read as one. */
  .pane > .ui-card-header > .tabstrip { display: flex; flex: 1 1 auto; min-width: 0; align-items: flex-end; gap: 3px; margin: -3px 0 0; padding-top: 3px; height: calc(100% + 3px); }
  .pane[data-tabbed] { background: none; box-shadow: none; border-radius: 0; }
  .pane[data-tabbed] > .body { box-shadow: var(--pane-shadow); border-radius: 0 0 var(--pane-radius) var(--pane-radius); }
  .pane[data-tabbed] > .ui-card-header > .tabstrip .tab[aria-current] { background: var(--card); box-shadow: var(--pane-shadow); clip-path: inset(-1rem -1rem 0 -1rem); }
  .pane[data-tabbed] > .ui-card-header > .ui-card-action:not(:has(.lives:not(.sr))) { display: none; }
  /* Between two panes, a border to drag (SYS-19), as wide as the gap. */
  .panes > .gutter { display: none; }
  .panes[data-tiled] > .gutter { position: absolute; z-index: 5; touch-action: none; }
  .panes[data-tiled] > .gutter[data-dir="h"] {
    width: 6px; cursor: col-resize;
    left: calc((var(--x) + var(--at) * var(--w)) * (100% - 6px)); top: calc(6px + var(--y) * (100% - 6px) + var(--tabs, 0) * var(--strip));
    height: calc(var(--h) * (100% - 6px) - 6px - var(--tabs, 0) * var(--strip));
  }
  .panes[data-tiled] > .gutter[data-dir="v"] {
    height: 6px; cursor: row-resize;
    top: calc((var(--y) + var(--at) * var(--h)) * (100% - 6px)); left: calc(6px + var(--x) * (100% - 6px)); width: calc(var(--w) * (100% - 6px) - 6px);
  }
  .panes[data-tiled] > .gutter:hover, .panes[data-tiled] > .gutter[data-dragging] { background: color-mix(in srgb, var(--ring) 35%, transparent); border-radius: 999px; }
  @media (pointer: coarse) {
    .panes[data-tiled] > .gutter[data-dir="h"] { width: 1.25rem; margin-left: -.25rem; }
    .panes[data-tiled] > .gutter[data-dir="v"] { height: 1.25rem; margin-top: -.25rem; }
  }
  /* The workspace's edges (SYS-44): a strip as thin as the gap along each,
     to click; shown on its hover, and while the line is on it. */
  .panes > .edge { display: none; }
  .panes[data-tiled] > .edge { display: block; position: absolute; z-index: 4; cursor: pointer; border-radius: 999px; }
  .panes[data-tiled] > .edge:is([data-edge="left"], [data-edge="right"]) { top: 6px; bottom: 6px; width: 6px; }
  .panes[data-tiled] > .edge:is([data-edge="up"], [data-edge="down"]) { left: 6px; right: 6px; height: 6px; }
  .panes[data-tiled] > .edge[data-edge="left"] { left: 0; }
  .panes[data-tiled] > .edge[data-edge="right"] { right: 0; }
  .panes[data-tiled] > .edge[data-edge="up"] { top: 0; }
  .panes[data-tiled] > .edge[data-edge="down"] { bottom: 0; }
  .panes[data-tiled] > .edge:hover { background: color-mix(in srgb, var(--ring) 35%, transparent); }
  /* The line (SYS-44): where the next pane opens, a faint bar of the brand
     in the gap at a node's edge, placed by app.tsx's sheet. It shows while
     Alt is held, and a moment after a focus key moves it. */
  .panes > .cursor-line { display: none; }
  .panes[data-tiled] > .cursor-line { position: absolute; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .12s; }
  :root:is([data-alt], [data-aim]) .panes[data-tiled] > .cursor-line { opacity: 1; }
  .panes[data-tiled] > .cursor-line::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 1px; background: color-mix(in srgb, var(--brand) 75%, transparent); }
  .panes[data-tiled] > .cursor-line:is([data-side="left"], [data-side="right"]) { width: 6px; top: calc(6px + var(--y) * (100% - 6px)); height: calc(var(--h) * (100% - 6px) - 6px); }
  .panes[data-tiled] > .cursor-line:is([data-side="left"], [data-side="right"])::after { width: 2px; }
  .panes[data-tiled] > .cursor-line:is([data-side="up"], [data-side="down"]) { height: 6px; left: calc(6px + var(--x) * (100% - 6px)); width: calc(var(--w) * (100% - 6px) - 6px); }
  .panes[data-tiled] > .cursor-line:is([data-side="up"], [data-side="down"])::after { height: 2px; }
  .panes[data-tiled] > .cursor-line[data-side="left"] { left: calc(var(--x) * (100% - 6px)); }
  .panes[data-tiled] > .cursor-line[data-side="right"] { left: calc((var(--x) + var(--w)) * (100% - 6px)); }
  .panes[data-tiled] > .cursor-line[data-side="up"] { top: calc(var(--y) * (100% - 6px)); }
  .panes[data-tiled] > .cursor-line[data-side="down"] { top: calc((var(--y) + var(--h)) * (100% - 6px)); }
  /* A new pane (SYS-45): Search, its box at the top and its matches below. */
  .pane > .find { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
  .pane > .find .launch-list { max-height: none; }
  /* A pane's zoom (SYS-21): its content drawn that much larger; the
     terminal sets its own font size instead, so its cells stay crisp. */
  .pane > .ui-card-content, .pane > iframe { zoom: var(--zoom, 1); }
  .chrome .zoomed { height: 1.125rem; padding: 0 .3125rem; background: none; color: inherit; border-color: currentColor; font-size: .625rem; box-shadow: none; }
  .pane { outline: none; }
  /* The focused pane, quietly: its title in full ink with a short hairline
     of the brand under it (3:1 on the card, test/contrast.mjs); the other
     panes' titles a step back. No fill, no ring: the pane stays a card. */
  /* Above a phone's tiles layer, which takes the swipes around it. */
  .panes > .empty { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; padding: 1rem; color: var(--muted-foreground); pointer-events: none; }
  .panes > .empty .ui-button { pointer-events: auto; }
  .panes > .empty .ui-button { width: 3rem; height: 3rem; border-radius: 50%; color: inherit; opacity: .6; }
  .panes > .empty .ui-button:hover, .panes > .empty .ui-button:focus-visible { opacity: 1; }
  .panes > .empty .ui-button svg { width: 1.25rem; height: 1.25rem; }

  /* The workspaces in the bar, as pills 2 px apart, the shown one in the
     brand. Many scroll along rather than push the bar wider. */
  .spaces { display: flex; align-items: stretch; gap: 2px; padding: 3px 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bar .spaces .ws {
    flex: none; height: auto; min-width: 1.75rem; padding: 0 .375rem; border-radius: calc(var(--radius) - 4px);
    color: var(--muted-foreground); font-size: .75rem; font-weight: 500; box-shadow: none;
  }
  .bar .spaces .ws[aria-pressed="true"] { background: var(--brand); color: var(--brand-foreground); }
  /* A workspace with no panes whispers, until it is hovered. */
  .bar .spaces .ws[data-ws-empty] { opacity: .5; font-weight: 400; }
  .bar .spaces .ws[data-ws-empty]:hover, .bar .spaces .ws[data-ws-empty]:focus-visible { opacity: 1; }
  .bar .back { flex: none; }
  /* The menus (overlay.tsx), at the chrome's size: 11 px rows 26 px tall in
     a 13.75 rem panel, a key at each row's end. */
  /* They open and close at once, as the shell's other chrome does: a menu
     fading out was still Radix's top layer, and the Esc of a layer opened
     meanwhile, such as the pane's settings, went to it. */
  .shell-menu { animation: none; }
  .shell-menu { min-width: 13.75rem; padding: .375rem; font-size: .75rem; }
  .shell-menu .ui-menu-item { justify-content: space-between; gap: 1rem; min-height: 1.625rem; padding: 0 .5rem; font-size: .75rem; cursor: pointer; }
  .shell-menu .menu-head { padding: .375rem .5rem .125rem; font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); }
  .shell-menu .menu-row { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 .5rem .25rem; }
  .shell-menu .menu-row .ui-menu-item { justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border: 1px solid var(--border); }
  .pane .ui-button[data-variant="link"] { font: inherit; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
  .chrome { display: inline-flex; align-items: center; gap: 0; }
  .shell-menu .ui-kbd { margin-left: .375rem; font-size: .625rem; }
  /* The pane's own items: in its title bar when it is wide, else only in
     its ⋯ menu, so a small pane's title bar stays one line. */
  .pane { container-type: inline-size; }
  @container (max-width: 24rem) { .chrome > .own { display: none; } }
  @media (hover: none) { .shell-menu .ui-kbd { display: none; } }
  /* A pane is one card, 12 px corners, lifted by its shadow: a title bar
     24 px tall, its name on the left and its chrome on the right, and the
     body below, which scrolls, so the card's corners and shadow stay. */
  .pane { gap: 0; padding: 0; overflow: visible; min-width: 0; border: 0; border-radius: var(--pane-radius); background: var(--card); box-shadow: var(--pane-shadow); }
  .pane > .body { flex: 1 1 0; min-height: 0; overflow: auto; background: var(--card); border-radius: 0 0 var(--pane-radius) var(--pane-radius); }
  .pane .ui-card-header {
    position: relative; z-index: 2; display: flex; align-items: stretch; gap: .25rem; height: 1.5rem; flex: none; padding: 0;
    background: none; color: var(--muted-foreground); border: 0; font-size: .6875rem; user-select: none;
  }
  /* The name: as wide as it is, at most most of the pane, with room after
     it for a mark of the pane's own, such as its connection. */
  .pane .ui-card-title {
    position: relative; flex: 0 1 auto; max-width: 70%; min-width: 3rem; display: flex; align-items: center; gap: .375rem; padding: 0 .75rem; box-sizing: border-box;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .6875rem/1 var(--font-sans); color: var(--muted-foreground); letter-spacing: normal;
  }
  .panes:not([data-tiled]) > .pane > .ui-card-header > .ui-card-title,
  .panes[data-tiled] > .pane[data-focused] > .ui-card-header > .ui-card-title { color: var(--foreground); }
  .panes[data-tiled] > .pane[data-focused]:not([data-tabbed]) > .ui-card-header > .ui-card-title::after {
    content: ""; position: absolute; left: .75rem; bottom: 2px; width: 1rem; height: 2px; border-radius: 1px; background: var(--brand);
  }
  .pane .ui-card-action { margin-left: auto; }

  /* Its link to its machine (view.tsx's Linked), quiet: a turning ring, a
     dot, a hollow ring; the title bar's own colour when focused. */
  /* It sits at the end of the folder's tab, inside it: drawn after the name, and
     the tab made room for it. */
  .pane .link { flex: none; order: 1; align-self: center; position: relative; z-index: 1; box-sizing: border-box; width: .4375rem; height: .4375rem; margin-left: calc(-.75rem - .4375rem - .25rem); margin-right: .75rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
  .pane .ui-card-header:has(> .link) > .ui-card-title { padding-right: 1.5rem; }
  .pane .ui-card-header > .ui-card-action { order: 2; }
  .pane .link[data-link="up"] { border: 0; background: var(--success); opacity: .8; }
  .pane .link[data-link="wait"] { border-right-color: transparent; animation: link-turn 1s linear infinite; }
  @keyframes link-turn { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) { .pane .link[data-link="wait"] { animation: none; border-style: dotted; } }
  /* It shrinks before it spills: a long status (a terminal that can't reach
     its machine) ends in an ellipsis inside the pane, not over the next. */
  .pane .ui-card-action { display: flex; align-items: stretch; align-self: stretch; gap: 0; flex-wrap: nowrap; min-width: 0; }
  .pane .ui-card-action > .lives { align-self: center; padding: 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24rem; min-width: 0; flex: 0 1 auto; }
  .pane .ui-card-header .ui-button { height: 1.5rem; margin-block: -1px; color: inherit; font-weight: 400; font-size: .6875rem; border-radius: 0; box-shadow: none; }
  .pane .ui-card-header .ui-button:hover, .pane .ui-card-header .ui-button[data-state="open"] { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
  .pane .ui-card-header .ui-button[data-size="icon-xs"] { width: 1.5rem; }
  .pane .ui-card-header .ui-kbd { background: none; color: inherit; opacity: .7; border-color: currentColor; }
  .pane .ui-card-content { padding: .75rem 1rem; }
  .stack { display: grid; gap: .5rem; align-content: start; }
  .note { grid-area: note; }
  /* A new account's line, under the note's text until its first machine is in. */
  .first { display: grid; gap: .5rem; max-width: 68ch; }
  .first .install { align-self: start; }
  /* The whole line shows, wrapped: what is run on a machine is read first. */
  .install > code { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; padding: .25rem 0; }
  .install { align-items: flex-start; }
  .lives { font-size: .6875rem; color: inherit; opacity: .85; overflow-wrap: anywhere; }
  .lives b { color: inherit; font-weight: 600; }

  .note-wrap { flex: 1; display: flex; flex-direction: column; }
  .note-body { flex: none; outline: none; max-width: 68ch; border-radius: calc(var(--radius) - 4px); }
  .note-body h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; margin: .25rem 0 .75rem; }
  .note-body p { margin: 0 0 .75rem; }
  .note-body:focus-visible { box-shadow: inset 2px 0 0 var(--ring); }

  /* Devices and machines: a row each, its name, its badges, its key. */
  .devlist { list-style: none; margin: 0; padding: 0; }
  .devlist li { display: flex; gap: .5rem .75rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .devlist li:last-child { border-bottom: 0; }
  .devlist .mono { margin-left: auto; }
  .devlist .actions { display: inline-flex; gap: .375rem; }
  .devlist .via { font-size: .75rem; color: var(--muted-foreground); }

  /* Files: a folder in columns, its stars beside each name. */
  ul.files { list-style: none; margin: .5rem 0 0; padding: 0; columns: 16em; column-gap: 1.5rem; font-size: .8125rem; }
  .files li { display: flex; align-items: center; gap: .25rem; break-inside: avoid; padding: .1rem 0; }
  .files li > .ui-button:first-child { flex: 0 1 auto; min-width: 0; }
  .files .ui-button.go, .crumbs .ui-button.go, .starred li > .ui-button.go {
    height: auto; justify-content: flex-start; font: inherit; color: var(--foreground); text-align: left; white-space: normal; overflow-wrap: anywhere;
    text-underline-offset: 3px;
  }
  .files .ui-button.dir { font-weight: 500; }
  .files .ui-button.other { color: var(--muted-foreground); }
  /* Stars whisper: an outline until pressed, then the brand. */
  .ui-button.star { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); opacity: .45; font-size: .8125rem; line-height: 1; }
  .ui-button.star:hover, .ui-button.star:focus-visible { opacity: 1; background: none; }
  .ui-button.star[aria-pressed="true"] { color: var(--brand-text); opacity: 1; }
  .starred { margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
  .starred h3 { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 .25rem; }
  .starred ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .starred li { display: flex; align-items: baseline; gap: .375rem; padding: .2rem 0; min-width: 0; }
  .starred li > .ui-button.go { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; font-size: .8125rem; }
  .starred li > .ui-button.go .where { font-size: .6875rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
  .starred li[data-state="away"] > .ui-button.go, .starred li[data-state="reaching"] > .ui-button.go { color: var(--muted-foreground); }
  .starred li[data-state="gone"] > .ui-button.go { color: var(--muted-foreground); text-decoration: line-through; opacity: 1; }
  .starred .gone { font-size: .75rem; color: var(--muted-foreground); }
  .crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; margin: .75rem 0 0; font-size: .8125rem; }
  .crumbs .ui-button.go { color: var(--muted-foreground); }
  .crumbs [aria-current] { color: var(--foreground); font-weight: 500; }
  .crumbs .sep { color: var(--muted-foreground); opacity: .6; }
  .file {
    background: var(--code-bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; margin: .5rem 0 0;
    max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.5 var(--font-mono);
  }

  /* The tools: a header, and the rest of the pane theirs. Never in the grid
     before the script. */
  .editor, .desktop, .terminal { display: flex; flex-direction: column; padding: 0; gap: 0; }
  :is(.editor, .desktop, .terminal) > .body { overflow: hidden; }
  .editor iframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; }
  /* Files: the tree down the side, put away to give a file the pane, and
     the folder or the file beside it, which scrolls on its own. */
  .pane > .files-body { zoom: var(--zoom, 1); display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .pane > .files-body:not([data-tree-open]) { grid-template-columns: minmax(0, 1fr); }
  .files-body > .tree { overflow: auto; padding: .5rem .25rem .5rem .5rem; border-right: 1px solid var(--border); font-size: .8125rem; }
  .files-body > .tree .starred ul { flex-direction: column; flex-wrap: nowrap; }
  .tree-rows { list-style: none; margin: 0; padding: 0; }
  /* Depth by selector: the CSP refuses a style attribute. */
  .tree-rows li[data-depth="1"] { padding-left: .75rem; } .tree-rows li[data-depth="2"] { padding-left: 1.5rem; }
  .tree-rows li[data-depth="3"] { padding-left: 2.25rem; } .tree-rows li[data-depth="4"] { padding-left: 3rem; }
  .tree-rows li[data-depth="5"] { padding-left: 3.75rem; } .tree-rows li:is([data-depth="6"], [data-depth="7"], [data-depth="8"], [data-depth="9"]) { padding-left: 4.5rem; }
  .tree-rows .row {
    display: block; width: 100%; text-align: left; padding: .125rem .375rem; border: 0; border-radius: calc(var(--radius) - 4px);
    background: none; color: inherit; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  }
  .tree-rows .row:hover { background: var(--accent); }
  .tree-rows .row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  .tree-rows .row.dir::before, .tree-rows .row.machine::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted-foreground); transition: rotate .1s; }
  .tree-rows .row[aria-expanded="true"]::before { rotate: 90deg; }
  .tree-rows .row:not(.dir, .machine) { padding-left: calc(1em + .375rem); }
  .tree-rows .row.machine { font-weight: 500; }
  .tree-rows li[aria-current] > .row { background: var(--accent); color: var(--accent-foreground); }
  .tree-rows li.wait, .tree-rows li.err { color: var(--muted-foreground); padding-block: .125rem; }
  /* The crumbs stay put above the folder or the file, which scroll on their own. */
  .files-body > .view { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
  .files-body > .view > .crumbs { flex: none; margin: 0; padding: .5rem .75rem; align-items: center; }
  .files-body > .view > .crumbs .file-close { margin-left: auto; }
  /* A grid, not columns: columns in a box of fixed height run sideways. */
  .files-body > .view > .files {
    flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 .75rem .75rem;
    columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); align-content: start; column-gap: 1.5rem;
  }
  .files-body > .view > .files[hidden] { display: none; }
  .files-body > .view > .file { flex: 1; min-height: 0; max-height: none; margin: 0 .75rem .75rem; }
  .files-body > .view > .editor { flex: 1; display: flex; min-height: 0; border-top: 1px solid var(--border); }
  .files-body > .view > .editor[hidden] { display: none; }
  /* A narrow pane: the tree over the file, not beside it. */
  @container (max-width: 32rem) {
    .pane > .files-body[data-tree-open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
    .files-body > .tree { border-right: 0; border-bottom: 1px solid var(--border); }
  }
  /* The terminal draws its own text; its colours and font come from here. */
  .terminal .term { flex: 1; min-height: 0; padding: .25rem .5rem; background: var(--code-bg); color: var(--foreground); font-family: var(--font-mono); }
  /* xterm.css paints its viewport black, and the style xterm writes to match
     its theme is refused by the CSP; the pane's ground shows through instead. */
  .terminal .term .xterm-viewport { background-color: transparent !important; }
  /* xterm draws its own scrollbar (its colours from terminal.js): as thin as the others. */
  .terminal .xterm-scrollable-element > .scrollbar.vertical { width: 8px !important; }
  .terminal .xterm-scrollable-element > .scrollbar.vertical > .slider { width: 4px !important; left: 2px !important; border-radius: 999px; }
  .terminal .xterm-scrollable-element > .shadow { display: none !important; }
  .desktop canvas { flex: 1; width: 100%; min-height: 0; background: #000; outline: none; touch-action: none; }
  .noscript { padding: 1rem; }

  /* The tiles to tap: only on a narrow screen. */
  .pick { display: none; }

  /* Alt+F: only the focused pane's content, over the whole screen: the bar,
     the other panes, their strips and borders, and its own title bar out
     of sight until it is back. The title bar waits as a sliver along the
     top; the pointer there, or the focus in it, brings it over the content,
     its Full screen button the way back with Alt+F and Esc. */
  .shell[data-open] .panes[data-tiled] > :is(.pane:not([data-focused]), .tabstrip, .gutter) { display: none !important; }
  .shell[data-open] > .bar { display: none; }
  @media (min-width: 721px) {
    .shell[data-open] .panes[data-tiled] { padding: 0; }
    .shell[data-open] .panes[data-tiled] > .pane[data-focused] { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
    .shell[data-open] .panes[data-tiled] > .pane[data-focused] > .body { border-radius: 0; }
    .shell[data-open] .panes[data-tiled] > .pane[data-focused] > .ui-card-header {
      position: absolute; top: 0; left: 0; right: 0; z-index: 7; height: 1.75rem; background: var(--card); box-shadow: var(--pane-shadow);
      transform: translateY(calc(-100% + 4px)); opacity: 0; transition: transform .12s ease, opacity .12s ease;
    }
    .shell[data-open] .panes[data-tiled] > .pane[data-focused] > .ui-card-header:is(:hover, :focus-within, :has([data-state="open"])) { transform: none; opacity: 1; }
  }
  @media (min-width: 721px) and (prefers-reduced-motion: reduce) { .shell[data-open] .panes[data-tiled] > .pane[data-focused] > .ui-card-header { transition: none; } }

  /* A narrow screen (SYS-28), the same layout as a wide one. The workspace
     is tiled as a wide screen tiles it, the same panes: each drawn at twice
     its room and shown at half, so a tile reads as the pane it is. Its
     tile, over it, takes the tap; the pane itself is inert. Open (the
     shell's data-open), the focused pane fills the room above the bar,
     edge to edge: a screen, not a card. The shell is held to the visual
     viewport (app.tsx's --vv-h), so the on-screen keyboard pushes the bar
     up rather than covering it. Before the script, the first workspace's
     grid, as it will be tiled. */
  @media (max-width: 720px) {
    body { position: fixed; inset: 0; }
    .shell { position: fixed; left: 0; right: 0; top: var(--vv-top, 0); height: var(--vv-h, 100dvh); }
    .panes { position: relative; padding-top: max(6px, var(--sat)); }
    /* Tiles are placed from the panes' own edge, past any padding: the
       notch is a margin, so they and their tap targets start below it. */
    .shell:not([data-open]) .panes[data-tiled] { padding-top: 0; margin-top: var(--sat); }
    .panes:not([data-tiled]) > .pane { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; }
    .shell:not([data-open]) .panes[data-tiled] > :is(.pane, .tabstrip) {
      transform: scale(.5); transform-origin: 0 0;
      top: calc(6px + var(--y) * (100% - 6px) + var(--tabs, 0) * var(--strip) / 2); width: calc((var(--w) * (100% - 6px) - 6px) * 2);
    }
    .shell:not([data-open]) .panes[data-tiled] > .pane { height: calc((var(--h) * (100% - 6px) - 6px) * 2 - var(--tabs, 0) * var(--strip)); }
    .shell:not([data-open]) .pick { display: block; position: absolute; inset: 0; z-index: 6; touch-action: none; user-select: none; }
    .pick > button {
      display: none; position: absolute; box-sizing: border-box; padding: 0; border: 0; border-radius: calc(var(--pane-radius) / 2); background: none; cursor: pointer;
      left: calc(6px + var(--x) * (100% - 6px)); top: calc(6px + var(--y) * (100% - 6px));
      width: calc(var(--w) * (100% - 6px) - 6px); height: calc(var(--h) * (100% - 6px) - 6px);
    }
    .pick > button:active { background: color-mix(in srgb, var(--ring) 15%, transparent); }
    .pick > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    .panes[data-tiled] > .gutter { display: none !important; }
    .shell[data-open] .panes[data-tiled] { display: flex; flex-direction: column; gap: 0; padding: 0; }
    .shell[data-open] .panes[data-tiled] > .pane { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1 1 0; min-height: 0; }
    .shell[data-open] .panes[data-tiled] > .pane, .shell[data-open] .panes[data-tiled] > .pane > .body { border-radius: 0; box-shadow: none; }
    .shell[data-open] .panes[data-tiled] > .pane > .body { padding-bottom: var(--sab); }
    /* Its title bar is a web app's, under the status bar (in its colour,
       app.tsx's paintBar): Back, the name, and a menu with the rest. Its
       own buttons, Close and Full screen live in that menu. */
    .full-go { display: none !important; }
    .shell[data-open] .pane[data-focused] > .ui-card-header {
      align-items: center; min-height: 2.75rem; padding: var(--sat) .25rem 0; box-sizing: content-box;
      border-bottom: 1px solid var(--border); font-size: .875rem;
    }
    .shell[data-open] .pane[data-focused] > .ui-card-header > .ui-card-action, .shell[data-open] .pane[data-focused] > .ui-card-header > .ui-card-action > .chrome { display: contents; }
    .shell[data-open] .pane[data-focused] > .ui-card-header .chrome > * { order: 3; }
    .shell[data-open] .pane[data-focused] > .ui-card-header .chrome > .back-go { order: -1; }
    .shell[data-open] .pane[data-focused] > .ui-card-header .chrome > :not(.back-go, .ui-dropdown, :has(.more-go), .more-go) { display: none; }
    .shell[data-open] .pane[data-focused] > .ui-card-header .lives:not(.sr) { order: 2; margin-left: auto; font-size: .75rem; }
    .shell[data-open] .pane[data-focused] > .ui-card-header > .ui-card-title { flex: 1 1 auto; max-width: none; padding: 0 .25rem; font-size: .9375rem; font-weight: 500; }
    .shell[data-open] .pane[data-focused] > .ui-card-header > .ui-card-title::after { display: none; }
    .shell[data-open] .pane[data-focused] > .ui-card-header > .link { order: 1; margin: 0 .5rem 0 0; }
    .shell[data-open] .pane[data-focused] > .ui-card-header .icon { width: 1.25rem; height: 1.25rem; }
    .shell[data-open] .panes[data-tiled] > .pane:not([data-focused]) { display: none !important; }
    .shell[data-open] .panes[data-tiled] > .tabstrip { display: none !important; }
    .note-body h1 { font-size: 1.25rem; }
    .devlist .mono { margin-left: 0; }

    /* The bar, over the tiles: the search to open anything on the right,
       under the thumb, the settings on the left, and between them where you
       are, as dots, for a swipe moves between workspaces. The rest (the
       facts, the theme, the date and time) is in the settings. */
    .bar { display: flex; align-items: center; height: auto; min-height: 2.75rem; padding: 0 .25rem var(--sab); }
    .bar :is(.bar-left, .bar-mid, .bar-right, .tools) { display: contents; }
    .bar > * > *, .bar .tools > * { display: none; }
    .bar .settings-go { display: inline-flex; order: 1; }
    .bar .spaces { display: flex; order: 2; flex: 1 1 auto; justify-content: center; align-items: center; gap: 6px; padding: 0; pointer-events: none; overflow: visible; }
    .bar .launch { display: inline-flex; order: 3; }
    .bar .reload { display: inline-flex; order: 2; }
    .bar:has(.reload:not([hidden])) .spaces { display: none; }
    .bar .settings-go .icon, .bar .launch .icon { width: 1.25rem; height: 1.25rem; }
    .bar .spaces .ws {
      min-width: 0 !important; width: 6px; height: 6px !important; min-height: 0 !important; padding: 0; border-radius: 3px; font-size: 0;
      background: var(--muted-foreground); opacity: .35; transition: width .15s ease;
    }
    .bar .spaces .ws[data-ws-empty] { display: none; }
    .bar .spaces .ws[aria-pressed="true"] { width: 16px; background: var(--foreground); opacity: .8; }
    /* Over the tiles, a swipe along the bar is the page's, not a pan. */
    .shell:not([data-open]) .bar { touch-action: none; }
    .shell-menu { max-height: calc(var(--vv-h, 100dvh) - 1rem); }
  }

  /* A thumb's targets, 44 px each way (SYS-28): on a narrow screen, or a
     touch one at any width. */
  @media (max-width: 720px), (pointer: coarse) {
    .bar { height: auto; }
    .bar .ui-kbd { display: none; }
    .bar .spaces .ws { min-width: 2.75rem; border-radius: var(--radius); }
    .bar .ui-button.back .icon { width: 1.25rem; height: 1.25rem; }
    .pane .ui-card-header { height: auto; min-height: 2.75rem; }
    .pane .ui-card-header .ui-button { height: auto; margin-block: 0; }
    .shell-menu .menu-row .ui-menu-item { min-width: 2.75rem; height: 2.75rem; }
    .bar .ui-button, .pane .ui-card-action .ui-button, .shell-menu .ui-menu-item, .launch-list li { min-height: 2.75rem; min-width: 2.75rem; box-sizing: border-box; }
  }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* The tooltips (tips.ts): shadcn's, each a control's name and its key,
     placed by the script; with Alt held, every one at once. */
  .tips { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
  .tips > .tip {
    position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; max-width: 16rem;
    font-size: .6875rem; line-height: 1rem; white-space: nowrap; box-shadow: var(--shadow-md);
  }
  .tips > .tip > span { overflow: hidden; text-overflow: ellipsis; }
  .tip-key { font: 500 .625rem/1 var(--font-sans); opacity: .75; }
  /* With Alt held, each slanted from its control (tips.ts): a slimmer pill, so a row of them packs. */
  .tips[data-all] > .tip { padding: .0625rem .375rem; gap: .375rem; line-height: .875rem; max-width: 14rem; box-shadow: var(--shadow-sm); }

  /* The overlay layer: the launcher and the help screen (overlay.tsx). */
  .ui-dialog.layer { gap: .75rem; }
  .ui-dialog.launch { top: 15vh; translate: -50% 0; max-width: 36rem; padding: .75rem; }
  .launch-q { height: 2.5rem; font-size: .875rem; }
  .launch-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
  .launch-list li { display: flex; align-items: center; gap: .5rem; min-height: 1.75rem; padding: 0 .625rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; font-size: .8125rem; }
  .launch-list li[aria-selected="true"] { background: var(--muted); }
  .launch-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .launch-list .group { font-size: .75rem; color: var(--muted-foreground); }
  .launch-list .none { cursor: default; color: var(--muted-foreground); }
  .ui-dialog.help { max-width: 34rem; }
  .help-keys { display: grid; grid-template-columns: auto 1fr; gap: .4375rem .875rem; margin: 0; font-size: .875rem; }
  .help-keys dt { justify-self: start; }
  .help-keys dd { margin: 0; color: var(--muted-foreground); }
  /* The settings (settings.tsx): a sidebar of sections beside the one
     shown, in one layer over the workspace; on a narrow screen the
     sections run along the top. From: SYS-35 */
  .ui-dialog.settings { max-width: 46rem; width: calc(100% - 2rem); height: min(34rem, calc(100dvh - 4rem)); padding: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
  .settings-tabs { flex-direction: row; gap: 0; height: 100%; min-height: 0; min-width: 0; width: 100%; }
  .settings-nav { flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; gap: .125rem; width: 11rem; flex: none; padding: 1rem .5rem; border-radius: 0; background: var(--muted); }
  .settings-nav .ui-tabs-trigger { flex: none; justify-content: flex-start; height: 2rem; padding: 0 .75rem; }
  .settings-body { min-width: 0; overflow: auto; padding: 1.25rem 1.5rem; }
  .settings-body h2 { margin: 0 0 .5rem; font: 600 1rem/1.3 var(--font-sans); }
  .settings-body h3 { margin: 1.25rem 0 .25rem; font: 600 .875rem/1.3 var(--font-sans); }
  .settings-body .small { margin: .375rem 0; }
  .set-machines, .settings-body .devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
  .set-machines > li { padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); }
  .set-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .set-who { margin: 0 0 .75rem; font-weight: 600; }
  .set-who b { color: var(--brand-text); }
  .set-row.set-can { margin-top: .5rem; gap: .375rem; }
  .set-add { margin-top: .5rem; display: grid; gap: .5rem; }
  .rtt { margin: .5rem 0 0; }
  .rtt svg { display: block; width: 100%; height: 2.75rem; }
  .rtt-axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .rtt-line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  .rtt-line, .rtt-dot { stroke: var(--muted-foreground); fill: var(--muted-foreground); }
  .rtt-line { fill: none; }
  .rtt-line[data-via="direct"], .rtt-dot[data-via="direct"] { stroke: var(--success); }
  .rtt-dot[data-via="direct"] { fill: var(--success); }
  .rtt figcaption { margin-top: .25rem; color: var(--foreground); }
  .settings-body .ui-button.link { height: auto; padding: 0; font-size: inherit; vertical-align: baseline; }
  .set-choice { display: flex; flex-wrap: wrap; gap: .25rem; }
  /* The palettes, each a small card in its own colours (data-palette on it). */
  .palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; margin-top: 1rem; }
  .palette {
    display: grid; gap: .5rem; padding: .625rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left;
    background: var(--background); color: var(--foreground); font: 500 .75rem/1 var(--font-sans);
  }
  .palette[aria-checked="true"] { box-shadow: 0 0 0 2px var(--brand); border-color: transparent; }
  .palette .swatches { display: flex; gap: .25rem; }
  .palette .swatches i { width: 1rem; height: 1rem; border-radius: 50%; }
  .palette .sw-brand { background: var(--brand); }
  .palette .sw-fg { background: var(--foreground); }
  .palette .sw-muted { background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
  @media (max-width: 720px) {
    .ui-dialog.settings { width: calc(100% - 1rem); height: calc(var(--vv-h, 100dvh) - 1rem); }
    .settings-tabs { flex-direction: column; }
    .settings-nav { flex-direction: row; width: auto; min-width: 0; padding: .5rem; padding-right: 3rem; overflow-x: auto; }
    .settings-nav .ui-tabs-trigger { height: 2.75rem; min-width: 2.75rem; justify-content: center; }
    .settings-body { padding: 1rem; }
    .set-choice .ui-button { min-height: 2.75rem; }
  }
  .ui-overlay[data-backdrop="blur"] { background: oklch(0% 0 0 / 25%); backdrop-filter: blur(6px); }

  /* Pane scope: the same look, over its own pane alone, behind a scrim of
     the pane's size; the other panes stay as they are. */
  .pane:has(> .ui-dialog[data-scope="pane"])::before {
    content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; background: oklch(0% 0 0 / 35%);
  }
  .ui-dialog[data-scope="pane"] {
    position: absolute; z-index: 10; left: 50%; top: 1rem; translate: -50% 0;
    width: calc(100% - 1.5rem); max-width: 24rem; max-height: calc(100% - 2rem); padding: 1rem;
  }
  .field { display: grid; gap: .25rem; font-size: .8125rem; color: var(--muted-foreground); }

  /* On a phone the layer sits above the on-screen keyboard: the launcher
     at the top of what is seen, every layer no taller than it (SYS-28). */
  @media (max-width: 720px) {
    .ui-dialog.launch { top: calc(var(--vv-top, 0px) + .5rem); width: calc(100% - 1rem); }
    .launch-list { max-height: calc(var(--vv-h, 100dvh) - 9rem); }
    .launch-list li { min-height: 2.75rem; }
    .ui-dialog.layer { max-height: calc(var(--vv-h, 100dvh) - 1rem); }
  }
}