/* ═══════════════════════════════════════════════════════════════════════
   atdesk — the sales site.

   DIRECTION: the product's own design system, at page scale.

   The first four attempts imported an outside metaphor (an annunciator
   board, a control desk, a departure board) and then showed the real UI
   three folds down. Two visual languages, stapled together — and the
   control-desk "session strips" were an INVENTED interface the product
   does not have, which on a sales page is showing a feature that does not
   exist.

   So every token below is lifted verbatim from web-src/app.css: the same
   ground, the same copper, the same rail. What a visitor sees on this page
   is literally what arrives on their phone. Coherent by construction, and
   distinctive because no other site is built out of this product.

   The RAIL — a hairline with dots, from the transcript — is used in exactly
   one place, where the content really is a sequence of moments in a
   session. Everywhere else it would be decoration.

   CONTRAST: body text     | --dim    | --bg
   CONTRAST: body on panel | --dim    | --panel
   CONTRAST: headings      | --fg     | --bg
   CONTRAST: accent text   | --accent | --bg
   CONTRAST: ok text       | --ok     | --bg
   CONTRAST: warn text     | --warn   | --bg
   CONTRAST: button label  | #12141a  | --accent
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* verbatim from web-src/app.css */
  --bg:#12141a; --panel:#181b23; --line:#262a35; --fg:#e6e8ee; --dim:#8b93a7;
  --accent:#c8815a; --ok:#4ea172; --warn:#c9a227; --bad:#c85a5a;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* page-scale additions, in the same key */
  --sunk:#0f1116; --rail:#2b3140; --node:#4c5464;
  --pad:clamp(1.1rem,4.5vw,2.5rem); --measure:33rem;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
     font:400 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{margin:0;font-weight:600;letter-spacing:-.028em;text-wrap:balance;line-height:1.06}
h1{font-size:clamp(2.2rem,7.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,4.8vw,2.5rem)}
h3{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.012em}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.bay{max-width:68rem;margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure)}
section{scroll-margin-top:4.5rem;padding-block:clamp(3.2rem,8.5vw,6.5rem)}
.lede{font-size:clamp(1.02rem,2.5vw,1.18rem);line-height:1.55;color:var(--dim);max-width:32rem}
.dim{color:var(--dim)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:-.01em;color:var(--dim)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ⚠ .msg carries white-space:pre-wrap (the product renders transcript text
   verbatim). The app builds these nodes in JS with no whitespace between them;
   hand-written HTML has newlines and indentation, and pre-wrap renders those as
   blank lines — measured at 247px for 55px of content. Every .msg on this page
   is therefore written with NO whitespace between child tags, or built in JS. */

nav{position:sticky;top:0;z-index:10;background:rgba(18,20,26,.92);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1rem;padding-block:.85rem}
.mark{display:flex;align-items:center;gap:.55rem;font:600 1rem/1 var(--sans);letter-spacing:-.02em}
.mark i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block;
        box-shadow:0 0 0 3px rgba(78,161,114,.14)}
.grow{flex:1}

.btn{display:inline-flex;align-items:center;justify-content:center;
     padding:.8rem 1.3rem;border-radius:10px;border:0;cursor:pointer;text-decoration:none;
     background:var(--accent);color:#12141a;font:600 .97rem/1 var(--sans);letter-spacing:-.01em;
     transition:filter .16s var(--ease),transform .16s var(--ease)}
.btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(1px)}
.btn.sm{padding:.5rem .9rem;font-size:.86rem;border-radius:8px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.ctas{display:flex;flex-wrap:wrap;gap:.7rem}

/* ══ HERO — the product itself is the hero image ══ */
/* The hero had 369px of dead space above the headline on a 1000px viewport —
   measured, not guessed. It gets its own tighter block padding. */
.heroband{padding-block:clamp(1.6rem,3.5vw,2.8rem) clamp(3rem,7vw,5rem)}
.hero{display:grid;gap:clamp(2.2rem,6vw,3.6rem);align-items:center}
/* a tapped control, so the demo reads as someone using it */
.tapped{animation:tapflash .45s var(--ease)}
@keyframes tapflash{0%{filter:brightness(1.9)}100%{filter:brightness(1)}}
#hInput{caret-color:transparent}
@media(min-width:62rem){.hero{grid-template-columns:minmax(0,1fr) minmax(0,18rem)}}
.hero-copy{display:flex;flex-direction:column;gap:1.2rem}
.hero h1 span{color:var(--accent)}

.handset{width:100%;max-width:18rem;margin-inline:auto;background:var(--panel);
         border:1px solid var(--line);border-radius:26px;padding:7px;
         box-shadow:0 26px 56px -26px #000}
/* ⚠ MUST out-specify `.realui.app{height:100%}`, which the generated product CSS
   emits (from its own 100dvh) and which lands LATER in this stylesheet at equal
   specificity. Losing that fight makes height:100% resolve against a container
   with no fixed height, so every phone collapsed to its content — 240x279 instead
   of 288x496. The hero survived only because `.handset.tall .realui` is one class
   more specific by accident. Measured, not guessed. */
/* ⚠ `z-index:0` IS LOAD-BEARING AND IT IS NOT ABOUT THIS ELEMENT'S OWN ORDER.
   `position:relative` with `z-index:auto` does NOT create a stacking context, so
   the approval sheet inside (`.sheet{z-index:20}`) was competing in the ROOT
   layer — against `nav{z-index:10}`. `overflow:hidden` clips the sheet to the
   phone SPATIALLY, which is why it still looked contained, but paint order is a
   separate question: wherever a phone scrolled past the sticky bar, the sheet
   drew straight over the top of it. Measured at 390px and 1200px, 33 scroll
   positions, `document.elementFromPoint` inside the nav returning `div.sheet`.
   Any value creates the context; 0 keeps the phone exactly where it was in the
   page's own order. */
.handset .realui.app{height:31rem;border-radius:20px;overflow:hidden;position:relative;z-index:0}
.handset.tall .realui.app{height:33rem}
.shotcap{margin-top:.75rem;text-align:center}

/* ══ the journey — one evening, on a real clock ══
   The page is a sequence of moments, not a list of topics. Each moment carries
   the screen it happens on, so the story and the evidence are never separated.
   The rail is the transcript's own device (hairline + dots) reused as the
   spine, because the page IS a transcript of an evening. */
.when{position:relative;display:flex;align-items:baseline;gap:.8rem;margin-bottom:.9rem}
.when::before{content:'';position:absolute;left:-1.85rem;top:.5em;width:9px;height:9px;
              border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.when.act::before{background:var(--ok)}
.when.idle::before{background:var(--node)}
.when time{font-family:var(--mono);font-size:.82rem;color:var(--accent);
           font-variant-numeric:tabular-nums;flex:none}
.when.idle time{color:var(--dim)}
.moment{position:relative;padding-left:1.85rem;padding-bottom:clamp(2.6rem,6vw,4rem)}
.moment:last-child{padding-bottom:0}
.moment::before{content:'';position:absolute;left:4px;top:1.1em;bottom:0;width:1px;background:var(--rail)}
.moment:last-child::before{display:none}
.moment h2{font-size:clamp(1.45rem,4.2vw,2.1rem)}
.moment > p{font-size:.96rem;color:var(--dim);line-height:1.6;max-width:33rem;margin-top:.7rem}
.evening{margin-top:1.8rem}
/* On a wide screen the moment becomes a scene: what happened on the left, the
   screen it happened on to the right. Without this the right half of every
   moment is empty and the page reads as a stack of orphaned paragraphs. */
/* Every "claim + evidence" section shares one rhythm: prose left, the thing
   itself right. Without it each section is a left column with an empty right
   half, which is what made the page read as a stack of unrelated blocks. */
@media(min-width:64rem){
  .duo{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);
       column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .duo > .measure{grid-column:1}
  .duo > :not(.measure){grid-column:2;margin-top:0}
}
.reassure{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.reassure > div{font-size:.9rem;color:var(--dim);line-height:1.55;padding-left:1rem;position:relative}
.reassure > div::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--ok)}
.reassure b{color:var(--fg);font-weight:600}
/* the price card is the widest thing in its column, so it must not be squeezed */
@media(min-width:64rem){#price .price{max-width:none;margin-top:0}}
/* comparison — the difference stated once, scannably */
.vstable{margin-top:1.9rem;max-width:52rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vshead,.vsrow2{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 7.5rem;gap:.8rem;
                align-items:center;padding:.85rem 1.1rem}
@media(max-width:44rem){.vshead,.vsrow2{grid-template-columns:minmax(0,1fr) 5.4rem 5.4rem;
  gap:.5rem;padding:.75rem .85rem;font-size:.86rem}}
.vshead{background:var(--sunk);font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
        text-transform:uppercase;color:var(--dim)}
.vshead span+span,.vsrow2 span+span{text-align:center}
.vsrow2{border-top:1px solid var(--line);font-size:.94rem}
/* ⚠ NO OPACITY HERE. These are the claims about a NAMED competitor. `opacity:.55`
   on --dim rendered them at 2.66:1 while the atdesk column sat at 5.84:1 — the
   least legible text in its own comparison. Differential legibility between two
   sides of a named comparison is a thumb on the scale, not a WCAG nit. */
.vsrow2 .no{color:var(--dim);font-size:.84rem}
.vsrow2 .yes{color:var(--ok);font-size:.84rem;font-weight:600}

/* the three commands */
/* ⚠ CONTAINER-DRIVEN, NOT VIEWPORT-DRIVEN. This was
   `@media(min-width:56rem){grid-template-columns:repeat(3,1fr)}` — a VIEWPORT
   query deciding a CONTAINER question. Once this block moved into `.duo`'s
   second column it was ~750px wide on a 1440px screen, so the query still said
   "three across" and forced `vsr ask-session` to wrap mid-word. auto-fit asks
   the space it is actually in. */
.cmds{display:grid;gap:1.1rem;margin-top:1.9rem;
      grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cmd{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:1.15rem;
     display:flex;flex-direction:column;gap:.55rem}
.cmd code{font-family:var(--mono);font-size:.92rem;color:var(--accent)}
.cmd p{font-size:.88rem;color:var(--dim);line-height:1.55}

/* setup — deliberately light: one command, shown once */
.setup{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem;max-width:40rem}
.stepx{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:start}

/* ⚠ THE SIDEWAYS-SCROLL SEAM. A grid `1fr` track and a flex item both take
   their AUTOMATIC MINIMUM from min-content, so ONE `white-space:nowrap` child —
   a command line, a code sample — widens the whole column, and that child's own
   `overflow-x:auto` never engages because it is never constrained. The page
   scrolls sideways instead of the block scrolling inside itself. MEASURED at
   583px of content in a 390px viewport, from a single install command.
   `body{overflow-x:hidden}` HIDES this rather than fixing it: the content is
   still out there, clipped and unreachable, which is a WCAG 1.4.10 failure.
   min-width:0 lets the track shrink so the scroll happens where it belongs. */
.stepx > *, .vsrow > *, .brow > *, .cmds > *, .two > *, .pairgrid > *,
.mtext > *, .setup > *, .pairnote > *, .screens > *{min-width:0}
.stepx .num{width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--line);
            display:grid;place-items:center;font-size:.95rem;color:var(--accent);
            font-variant-numeric:tabular-nums}
.stepx h3{font-size:1.08rem;margin-bottom:.3rem}
.stepx p{font-size:.92rem;color:var(--dim);line-height:1.55}
.oneline{margin-top:.75rem;background:var(--sunk);border:1px solid var(--line);border-radius:9px;
         padding:.8rem .9rem;font-family:var(--mono);font-size:.78rem;color:var(--fg);
         overflow-x:auto;white-space:nowrap}
.oneline .c{color:var(--dim);margin-right:.4rem}
.mtext{display:flex;flex-direction:column;gap:.7rem}
.mtext > p{font-size:.96rem;color:var(--dim);line-height:1.6;max-width:33rem}
@media(min-width:64rem){
  .moment{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);
          column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .moment > .when{grid-column:1 / -1}
  .moment > .mtext{grid-column:1}
  .moment > .screens{grid-column:2;grid-row:2;margin-top:.3rem}
}

/* ══ screens ══ */
.screens{display:grid;gap:1.4rem;margin-top:1.6rem;justify-items:center}
@media(min-width:44rem){.screens{grid-template-columns:repeat(auto-fit,minmax(14rem,18rem));justify-content:start}}
.screens.one{justify-items:start}

/* an OS notification — not the app's own UI, so it is styled as the phone draws it */
.pushcard{max-width:20rem;background:rgba(40,44,54,.92);border:1px solid var(--line);
          border-radius:16px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.25rem;
          box-shadow:0 12px 30px -18px #000}
.pushcard .app{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--dim)}
.pushcard .app i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}
.pushcard .app .t{margin-left:auto;font-family:var(--mono)}
.pushcard b{font-size:.9rem;font-weight:600}
.pushcard p{font-size:.85rem;color:var(--dim);line-height:1.45}

/* ══ panels ══ */
.two{display:grid;gap:1.1rem;margin-top:2.2rem}
@media(min-width:52rem){.two{grid-template-columns:1fr 1fr;gap:1.4rem}}
.slab{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.3rem;
      display:flex;flex-direction:column;gap:.85rem}
.slab.on{border-color:rgba(200,129,90,.42)}
.slab h3{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.slab p{font-size:.9rem;color:var(--dim);line-height:1.55}
.kit{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.k{font-family:var(--mono);font-size:.7rem;padding:.3rem .5rem;border:1px solid var(--line);
   color:var(--dim);border-radius:6px}
.k.no{text-decoration:line-through;opacity:.45}
.k.yes{border-color:rgba(200,129,90,.45);color:var(--accent)}

.term{background:var(--sunk);border:1px solid var(--line);border-radius:10px;
      font-family:var(--mono);font-size:.75rem;line-height:1.8;padding:.95rem 1.05rem;
      overflow-x:auto;white-space:pre;color:var(--dim)}
.term .c{color:#5d6577} .term .g{color:var(--ok)} .term .a{color:var(--accent)}
.term b{color:var(--fg);font-weight:500}

/* ══ VS Code surfaces ══ */
.vsc{--vbg:#1f1f1f;--vpanel:#252526;--vline:#454545;--vfg:#cccccc;--vdim:#9d9d9d;--vsel:#4d7ea8;
     font:13px/1.45 var(--sans);color:var(--vfg);display:flex;flex-direction:column;gap:1.1rem;
     margin-top:2.2rem;max-width:33rem}
.vsbar{display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;background:var(--vbg);
       border:1px solid var(--vline);border-radius:5px;padding:.42rem .8rem;font-size:12px}
.vshover{background:var(--vpanel);border:1px solid var(--vline);border-radius:6px;
         padding:.85rem 1rem;display:flex;flex-direction:column;gap:.42rem}
.vshover b{color:#fff;font-weight:600}
.vshover i{color:var(--vdim);font-style:normal}
.vshover code{font-family:var(--mono);font-size:12px;background:#333;padding:1px 5px;border-radius:3px}
.vshover .hint{color:var(--vdim);font-style:italic;margin-top:.2rem}
.vsmenu{background:var(--vbg);border:1px solid var(--vline);border-radius:6px;overflow:hidden}
.vsinput{margin:.55rem;padding:.42rem .55rem;border:1px solid #0078d4;border-radius:2px;
         color:var(--vdim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsrow{display:grid;grid-template-columns:1.3rem 1fr;gap:.1rem .6rem;padding:.42rem .75rem}
.vsrow.on{background:var(--vsel);color:#fff}
.vsrow .ic{grid-row:span 2;padding-top:.15rem;color:var(--vdim);font-size:12px}
.vsrow.on .ic{color:#fff}
.vsrow .s{grid-column:2;font-size:12px;color:var(--vdim)}
.vsrow.on .s{color:#dbeaf7}

/* ══ pairing ══ */
/* ⚠ CONTAINER-DRIVEN. This was `@media(min-width:52rem){auto 1fr}` — a VIEWPORT
   query deciding a CONTAINER question, the same defect as `.cmds` had. Now that
   this block lives inside step 3's ~495px column, the viewport query still said
   "two columns" and squeezed the fingerprint note to ~190px, wrapping
   "no certificate to install" onto three lines. auto-fit asks the space it is
   actually in: two columns where there is room, stacked where there is not. */
/* ⚠ `min(17rem,100%)`, NOT `17rem`. `minmax(17rem,1fr)` cannot go below 272px,
   so on a 320px screen the column was wider than the space it had and the
   section overflowed the page by 24px. It never LOOKED broken, because
   `body{overflow-x:hidden}` clips it — the fingerprint block and the "no
   account · no VPN" line were simply cut off at the right edge on an iPhone SE,
   with nothing to scroll to reach them. Measured at 320px: 344 > 320, before
   and after the copy edit above, so it is not new. `min()` lets the track
   collapse to the container on screens narrower than the ideal. */
.pairgrid{display:grid;gap:1.6rem;margin-top:2.3rem;align-items:start;
          grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.qrbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem;justify-self:center}
.qrbox svg{display:block;width:min(14rem,58vw);height:auto}
.pairnote{display:flex;flex-direction:column;gap:.85rem;max-width:30rem}
.fp{background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:.7rem .85rem;
    display:flex;flex-direction:column;gap:.25rem}
.fp code{font:1.05rem/1.3 var(--mono);letter-spacing:.09em;color:var(--ok)}

/* ══ breach board ══ */
.board{margin-top:2.2rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brow{display:grid;grid-template-columns:9px 1fr;gap:.3rem .75rem;align-items:start;
      padding:.85rem 1.05rem;background:var(--panel);border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
@media(min-width:50rem){.brow{grid-template-columns:9px 16.5rem 1fr;align-items:center;padding:.78rem 1.25rem}}
.pip{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:.42rem}
@media(min-width:50rem){.pip{margin-top:0}}
.pip.part{background:var(--warn)}
.bif{font-family:var(--mono);font-size:.73rem;color:var(--dim)}
.bth{font-size:.89rem;line-height:1.5;color:var(--dim);grid-column:2}
@media(min-width:50rem){.bth{grid-column:3}}
.bth b{color:var(--fg);font-weight:600}

/* ══ price ══ */
.price{border:1px solid rgba(200,129,90,.35);border-radius:14px;background:var(--panel);
       padding:clamp(1.4rem,4vw,2.2rem);max-width:30rem;margin-top:2.1rem;
       display:flex;flex-direction:column;gap:1rem}
.fig{display:flex;align-items:baseline;gap:.5rem}
.fig b{font-size:clamp(3rem,11vw,4rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.fig span{font-family:var(--mono);font-size:.79rem;color:var(--dim)}
.gets{display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none}
.gets li{display:flex;gap:.6rem;font-size:.91rem;color:var(--dim);align-items:baseline}
.gets li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
                 flex:0 0 6px;transform:translateY(-2px)}

.flow{display:grid;gap:1.1rem;margin-top:2.2rem}
@media(min-width:56rem){.flow{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.leg{display:flex;flex-direction:column;gap:.55rem}
.leg .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.leg p{font-size:.87rem;color:var(--dim)}

.acct{border:1px solid var(--line);border-radius:12px;max-width:30rem;margin-top:1.9rem;background:var(--panel)}
.ah{padding:.78rem 1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5rem;
    font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.ah i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.ab{padding:1.05rem 1rem;display:flex;flex-direction:column;gap:.95rem}
.code{font-family:var(--mono);font-size:.97rem;letter-spacing:.09em;color:var(--accent);
      padding:.65rem .75rem;background:var(--sunk);border:1px dashed var(--line);border-radius:8px;
      overflow-x:auto;white-space:nowrap}
.box{display:flex;align-items:center;gap:.55rem;padding:.55rem 0;font-size:.87rem;color:var(--dim);
     border-top:1px solid var(--line)}
.box:first-of-type{border-top:0}
.box i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block;flex:0 0 7px}
.box i.off{background:var(--node)}
.box .t{margin-left:auto;font-family:var(--mono);font-size:.73rem;color:var(--dim)}

/* ══ Q&A ══ */
.qa{margin-top:2.2rem}
.qi{padding:1.2rem 0;border-top:1px solid var(--line);display:grid;gap:.4rem}
@media(min-width:54rem){.qi{grid-template-columns:18rem 1fr;gap:2rem;align-items:start}}
.qi:first-child{border-top:0}
.qi h3{font-size:1.06rem;font-weight:600;letter-spacing:-.02em}
.qi p{font-size:.9rem;color:var(--dim);line-height:1.6;max-width:36rem}
.qi b{color:var(--fg);font-weight:600}

.plain{display:grid;gap:1rem;margin-top:2.2rem}
@media(min-width:52rem){.plain{grid-template-columns:repeat(2,1fr);gap:1.3rem}}
.pc{border:1px solid var(--line);border-radius:12px;padding:1.2rem;display:flex;
    flex-direction:column;gap:.45rem;background:var(--panel)}
.pc.flag{border-color:rgba(201,162,39,.4)}
.pc p{font-size:.87rem;color:var(--dim);line-height:1.55}

footer{border-top:1px solid var(--line);padding-block:2.4rem 3.4rem}
.fin{display:flex;flex-direction:column;gap:.9rem}
.fl{display:flex;flex-wrap:wrap;gap:1.15rem}
.fl a{font-size:.87rem;color:var(--dim);text-decoration:none}
.fl a:hover{color:var(--fg)}
.fine{font-size:.76rem;color:var(--dim);line-height:1.6;max-width:44rem;opacity:.8}

/* ⚠ Neutralise host styles before the product's own rules land. The page styles
   bare h1/h2, which otherwise leaks into the app's sheet headings. Must sit
   ABOVE the generated block so the app still wins everything it declares. */
.realui h1,.realui h2,.realui h3{font-family:inherit;font-weight:600;
  letter-spacing:normal;text-transform:none;line-height:1.4}
.realui button{text-transform:none;letter-spacing:normal}
/* GENERATED by mockups/commerce/embed-ui.mjs from web-src/app.css — DO NOT EDIT.
   Regenerate after any change to the client's appearance. */
.realui{
    --bg:#12141a; --panel:#181b23; --line:#262a35; --fg:#e6e8ee; --dim:#8b93a7;
    --accent:#c8815a; --ok:#4ea172; --warn:#c9a227; --bad:#c85a5a;
    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
.realui *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.realui,.realui.app{margin:0;height:100%;overflow:hidden}
.realui.app{
    /* The status light centres its content with `place-items:center` on <body>,
       and that rule still applies once .app is added. In a flex column it makes
       every child shrink to its content — measured at a 390px viewport: header
       261px, footer 281px, and .wrap blown out to 3282px by the longest line in
       the transcript. Resetting it is what makes the app fill the phone. */
    place-items:stretch; align-items:stretch;
    background:var(--bg); color:var(--fg);
    font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    display:flex; flex-direction:column; height:100%;
    padding:0px 0px 0 0px;
  }
.realui /* The app's parts are flex children of body,.realui exactly as in the MVP. `contents`
     makes the wrapper vanish from layout so none of the ported rules change. */
  #app{display:contents}
.realui /* [hidden] must still beat display:contents,.realui and every other display below. */
  [hidden]{display:none !important}
.realui /* ---- header: the context gauge ---- */
  header{flex:none;background:var(--panel);border-bottom:1px solid var(--line);padding:0 14px 10px}
.realui .row{display:flex;align-items:baseline;gap:8px;padding-top:9px}
.realui /* 26px was the biggest thing on screen for a number you only glance at,.realui and
     the bar beneath it encoded the same fact twice. The gauge is now a rule
     across the top edge — read at a glance,.realui costs no height — and the figure is
     sized to be legible rather than loud. Tabular digits so it doesn't twitch
     as it counts down. */
  .pct{font:600 17px/1 var(--mono);letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.realui .pct small{font-size:12px;font-weight:500;color:var(--dim);letter-spacing:0}
.realui .meta{margin-left:auto;text-align:right;font:11px/1.35 var(--mono);color:var(--dim);
        font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.realui /* Full bleed: a bar inset with rounded ends reads as a widget,.realui a rule across
     the edge reads as the state of the whole screen. */
  .bar{margin:0 -14px;height:3px;background:#20242e;overflow:hidden}
.realui .bar i{display:block;height:100%;width:0;background:var(--ok);
          transition:width .5s cubic-bezier(.22,1,.36,1),background .4s ease}
.realui .warnbar i{background:var(--warn)}
.realui .badbar i{background:var(--bad)}
.realui /* ---- transcript: a timeline rail ---- */
  main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 6px 42px}
.realui /* Every entry hangs off the rail. The dot's colour is the signal — green
     means Claude touched something,.realui grey means it only thought or spoke. The
     connector is drawn per-item so it stops at the last dot instead of
     trailing off the end. */
  .msg{position:relative;margin-bottom:14px;white-space:pre-wrap;
       word-wrap:break-word;overflow-wrap:anywhere}
.realui .msg::before{content:'';position:absolute;left:-27px;top:.5em;width:8px;height:8px;
               border-radius:50%;background:#4c5464;box-shadow:0 0 0 3px var(--bg)}
.realui .msg::after{content:'';position:absolute;left:-23.5px;top:calc(.5em + 11px);
              bottom:-17px;width:1px;background:#2b3140}
.realui .msg:last-child::after{display:none}
.realui .msg.act::before{background:var(--ok)}
.realui /* Written under role:"user" by the harness,.realui not typed by you. */
  .msg.note{font-family:var(--mono);font-size:11.5px;color:#78829a}
.realui .msg.note::before{background:#39414f}
.realui .msg.note::after{background:#232833}
.realui .msg.user{background:#1e2330;border-left:2px solid var(--accent);padding:9px 12px;border-radius:0 8px 8px 0}
.realui /* Sent mid-turn: parked until the turn ends,.realui so say so rather than looking
     like it was delivered. */
  .msg.user.queued{border-left-style:dashed;opacity:.82}
.realui .msg.user::before{background:var(--accent);top:14px}
.realui .msg.user::after{top:25px}
.realui .who{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.realui /* ---- tool call: name,.realui what it acted on,.realui what it did ---- */
  .thead{font-size:14px;line-height:1.35}
.realui .thead b{font-weight:650;color:var(--fg)}
.realui .thead span{color:var(--dim);font-family:var(--mono);font-size:12.5px;margin-left:7px}
.realui .tstat{color:var(--dim);font-size:12px;margin-top:1px}
.realui .tool.open .tbox{display:block}
.realui .tbox{display:none;margin-top:8px;border:1px solid var(--line);border-radius:8px;
        overflow:hidden;background:#0f1116}
.realui .trow{display:flex;gap:10px;padding:8px 10px;font-family:var(--mono);font-size:11.5px}
.realui .trow + .trow{border-top:1px solid var(--line)}
.realui .trow .gut{flex:none;width:26px;color:#78829a;font-size:10px;letter-spacing:.06em;padding-top:1px}
.realui .trow pre{margin:0;flex:1;white-space:pre-wrap;word-break:break-word;color:#cfd6e6;
            max-height:15em;overflow:auto}
.realui .trow.err pre{color:#e59a9a}
.realui .tool{cursor:pointer}
.realui .tool .peek{color:var(--dim);font-family:var(--mono);font-size:11.5px;margin-top:5px;
              max-height:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.realui .tool.open .peek{display:none}
.realui /* diff,.realui as in the panel */
  .dl{display:block;padding:0 6px;border-radius:2px}
.realui .dl.add{background:#1d2f1e;color:#b9d9ae}
.realui .dl.del{background:#331d1f;color:#e0adad}
.realui /* markdown */
  .md h1,.realui .md h2,.realui .md h3{font-size:15px;margin:14px 0 6px;font-weight:600}
.realui .md strong{font-weight:650;color:#fff}
.realui .md em{font-style:italic}
.realui .md code{font-family:var(--mono);font-size:12.5px;background:#20252f;
           padding:1px 5px;border-radius:4px;color:#e3c4ac}
.realui .md pre{background:#0f1116;border:1px solid var(--line);border-radius:8px;
          padding:10px 11px;overflow-x:auto;margin:9px 0}
.realui .md pre code{background:none;padding:0;font-size:12px;color:#cfd6e6}
.realui .md ul,.realui .md ol{margin:7px 0;padding-left:20px}
.realui .md li{margin:3px 0}
.realui .md p{margin:9px 0}
.realui .md p:first-child{margin-top:0}
.realui .md p:last-child{margin-bottom:0}
.realui .md a{color:var(--accent)}
.realui /* Scroll the table,.realui don't crush it. width:100% made every column squeeze to
     fit 393px,.realui so a session id wrapped to three lines mid-word and the row was
     unreadable. max-content lets it size to its contents and scroll sideways —
     the register allows density here,.realui but not illegibility. */
  .mdtable{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:9px 0}
.realui .md table{border-collapse:collapse;width:max-content;min-width:100%;font-size:13px}
.realui .md th,.realui .md td{border:1px solid var(--line);padding:6px 10px;text-align:left;
                white-space:nowrap}
.realui /* Prose cells may wrap; identifiers and numbers must not. */
  .md td:not(:first-child){white-space:normal;min-width:12ch}
.realui .md th{background:#1b1f2a;font-weight:600}
.realui /* working indicator */
  .work{flex:none;display:none;align-items:center;gap:8px;padding:7px 14px;
        background:#1b2029;color:var(--dim);font-size:12.5px;border-top:1px solid var(--line)}
.realui.busy .work{display:flex}
.realui .work i{width:6px;height:6px;border-radius:50%;background:var(--accent);
          animation:blip 1s infinite;display:inline-block}
.realui .work i:nth-child(2){animation-delay:.18s}
.realui .work i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.realui .jump{position:absolute;right:14px;bottom:14px;height:34px;padding:0 13px;font-size:12.5px;
        border-radius:17px;background:var(--accent);color:#12141a;display:none;z-index:5;
        box-shadow:0 3px 12px rgba(0,0,0,.4)}
.realui .jump.on{display:block}
.realui .wrap{flex:1;position:relative;display:flex;min-height:0}
.realui .ts{font:10px/1 var(--mono);color:#78829a;margin-top:5px}
.realui /* Thinking is a duration,.realui not content: the transcript stores an empty string
     with a signature,.realui so there is nothing to expand unless a session carries it. */
  .think{color:var(--dim);font-size:13.5px}
.realui .think.has{cursor:pointer}
.realui .think .body{display:none;margin-top:6px;padding-left:10px;border-left:2px solid #3a4150;
               font-size:13px;white-space:pre-wrap}
.realui .think.open .body{display:block}
.realui /* A result whose call we never saw (replay can start mid-turn) reuses the same
     box,.realui so it doesn't need its own collapse rules — and can't fight the rail,.realui which owns ::after on every .msg. */
  main::-webkit-scrollbar{width:0}
.realui /* ---- composer ---- */
  footer{flex:none;background:var(--panel);border-top:1px solid var(--line);
         padding:9px 10px calc(9px + 0px);display:flex;gap:8px;align-items:flex-end}
.realui textarea{
    flex:1;resize:none;background:#0f1116;color:var(--fg);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;max-height:34%;min-height:42px;
    /* 16px IS LOAD-BEARING, NOT A TASTE CHOICE. **[M]** Glen: "when I tap into
       the chat box it zooms in and I have to pinch out afterwards." iOS Safari
       auto-zooms any focused form control whose font-size is BELOW 16px, and
       this was 15px. The page cannot zoom back out on blur, so every reply cost
       a pinch.

       The other cure — maximum-scale=1,user-scalable=no on the viewport — is
       the wrong one: it disables pinch-zoom for the whole app, and WebKit has
       ignored user-scalable since iOS 10 anyway. Sizing the control correctly
       is the fix that needs nothing from the viewport. */
    font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  }
.realui textarea::placeholder{color:var(--dim)}
.realui textarea:focus{outline:none;border-color:var(--accent)}
.realui button{border:0;border-radius:10px;font:600 15px/1 inherit;padding:0 16px;height:42px;
         background:var(--accent);color:#12141a}
.realui button:disabled{opacity:.4}
.realui /* ---- approval sheet ---- */
  .sheet{position:absolute;inset:0;background:rgba(8,9,12,.78);display:none;
         align-items:flex-end;z-index:20;backdrop-filter:blur(3px)}
.realui .sheet.on{display:flex}
.realui /* Motion conveys state here (the sheet arriving),.realui not decoration. Ease-out,.realui 200ms,.realui and nothing to wait for. */
  .sheet.on .card{animation:sheet-in .2s cubic-bezier(.22,1,.36,1)}
@keyframes sheet-in{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.realui .sheet.on .card{animation:none}
.realui .bar i{transition:none}}
.realui /* The sheet is anchored to the BOTTOM of the screen with no height limit,.realui so
     a list longer than the viewport simply ran off the top with nothing to
     scroll — the rows you couldn't see were unreachable,.realui not just hidden.
     Cap the card and scroll the list inside it,.realui keeping the heading and the
     Close button pinned where the thumb expects them. */
  .card{width:100%;max-height:88%;display:flex;flex-direction:column;position:relative;
        background:var(--panel);
        border-radius:16px 16px 0 0;padding:22px 16px calc(18px + 0px);
        box-shadow:0 -1px 0 rgba(255,255,255,.05), 0 -12px 28px rgba(0,0,0,.45)}
.realui /* The grabber is what makes a panel read as a sheet rather than a page that
     happens to be at the bottom. Standard affordance,.realui so it needs no learning. */
  .card:before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
               width:36px;height:4px;border-radius:2px;background:#39414f}
.realui .card > h2,.realui .card > .sub,.realui .card > .acts{flex:none}
.realui .card .list{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1 1 auto;
              /* don't let the transcript behind the sheet scroll with it */
              overscroll-behavior:contain;
              /* the last row shouldn't sit flush against the Close button */
              padding-bottom:4px;
              /* Edges fade only when there is genuinely more in that direction,
                 so a short list is never made to look clipped. */
              --top:transparent 0,#000 0;--btm:#000 100%,#000 100%;
              -webkit-mask-image:linear-gradient(to bottom,var(--top),var(--btm));
              mask-image:linear-gradient(to bottom,var(--top),var(--btm))}
.realui .card .list.more-above{--top:transparent 0,#000 20px}
.realui .card .list.more-below{--btm:#000 calc(100% - 24px),transparent 100%}
.realui .card h2{margin:0 0 3px;font-size:16px}
.realui .card .sub{color:var(--dim);font-size:12.5px;margin-bottom:11px}
.realui .card pre{font-family:var(--mono);font-size:12px;background:#0f1116;border:1px solid var(--line);
            border-radius:8px;padding:11px;max-height:34%;overflow:auto;margin:0 0 14px;
            white-space:pre-wrap;word-break:break-all}
.realui .acts{display:flex;gap:10px}
.realui /* Three answers side by side cannot show "Yes,.realui allow all edits this session",.realui and `height:50px` put the overflow OUTSIDE the button's own border — the
     same trap `.prow` hit. Stack when there are more than two,.realui and let the box
     grow: you have to be able to read what you are approving. */
  .acts.stack{flex-direction:column}
.realui .acts button{flex:1;min-height:50px;height:auto;font-size:16px;
               padding:10px 12px;line-height:1.25}
.realui /* Every interactive control needs a disabled and a busy state,.realui not just a
     default one. Send had neither: it looked identical whether it would work,.realui was mid-flight,.realui or had nothing to send. */
  button[disabled]{opacity:.45;pointer-events:none}
.realui #send{min-height:44px}
.realui #send.sending{opacity:.6;pointer-events:none}
.realui .decline{background:#2b303c;color:var(--fg)}
.realui .banner{flex:none;background:#3a2a16;color:#f0c98a;font-size:12.5px;padding:7px 14px;display:none}
.realui .banner.on{display:block}
.realui /* The update notice is the one banner you act on,.realui so it looks tappable and
     clears the 44px bar. */
  .banner.tap{background:#2b3550;color:#cfe0ff;font-weight:600;min-height:44px;
              display:flex;align-items:center;justify-content:center}
.realui /* Project + mode,.realui side by side. 44px is the minimum comfortable tap target;
     both of these were 34px and sit at the top of the screen,.realui the furthest
     point from a thumb — the two failures compounded. */
  .ctl{display:flex;gap:8px;margin-top:9px}
.realui .proj{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;
        background:#1b1f2a;border:1px solid var(--line);color:var(--fg);
        border-radius:8px;height:44px;padding:0 11px;font:500 13px/1 inherit;justify-content:flex-start}
.realui .proj > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.realui /* Mode is one short word; the project name is what needs room. */
  .proj.mode{flex:0 0 auto;max-width:42%}
.realui .proj .chev{margin-left:auto;color:var(--dim);font-size:11px;flex:none}
.realui .proj:active{background:#222735}
.realui /* Rows must grow with their content: the global button rule sets a fixed 42px
     height,.realui which silently clipped a two-line conversation title so its meta
     line rendered OUTSIDE the border. min-height keeps single-line rows as they
     were. */
  .prow{display:flex;align-items:center;gap:9px;width:100%;background:#0f1116;
        border:1px solid var(--line);color:var(--fg);border-radius:9px;
        padding:11px 12px;margin-bottom:7px;font:500 14px/1.2 inherit;text-align:left;
        height:auto;min-height:44px}
.realui .prow.sel{border-color:var(--accent);background:#1d1b1a}
.realui .prow:active{background:#171b24}
.realui .prow.sel:active{background:#221e1c}
.realui .prow .dot{width:7px;height:7px;border-radius:50%;background:#39414f;flex:none}
.realui .prow.live .dot{background:var(--ok)}
.realui .prow .sz{margin-left:auto;font:11px/1 var(--mono);color:var(--dim)}
.realui /* ADD A MAC. font-size stays at 16px: anything smaller and iOS zooms the whole
     page on focus,.realui which on a sheet leaves the confirm button off-screen. */
  .pastebox{width:100%;background:#0f1116;border:1px solid var(--line);color:var(--fg);
            border-radius:9px;padding:10px 12px;margin-bottom:7px;
            font:16px/1.35 var(--mono);resize:none;-webkit-appearance:none}
.realui .pastebox:focus{outline:none;border-color:var(--accent)}
.realui .pastemsg:empty{display:none}
.realui .pastemsg{font-size:12.5px;line-height:1.35;color:var(--dim);margin:0 2px 9px}
.realui .pastemsg.bad{color:var(--bad)}
.realui /* THE SCANNER. A fixed aspect box so the sheet does not resize when the camera
     starts — the rows below it would jump under a thumb that is already moving.
     object-fit:cover because the stream's aspect is the camera's,.realui not ours. */
  .scanbox{position:relative;width:100%;aspect-ratio:3/4;max-height:52%;background:#000;
           border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:7px}
.realui .scanbox video{width:100%;height:100%;object-fit:cover;display:block}
.realui /* Aim guide only — the decoder reads the WHOLE frame,.realui so this must not imply
     the code has to sit inside it. It is centred at the size a version-8 symbol
     fills at a comfortable arm's length. */
  .scanaim{position:absolute;inset:14% 10%;border:2px solid rgba(255,255,255,.5);
           border-radius:14px;pointer-events:none}
.realui /* The fingerprint the Mac is printing. Monospace and roomy on purpose — it is
     compared character by character against another screen,.realui and that is the only
     thing standing between a pasted link and pairing to a stranger's Mac. */
  .macfp{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:7px}
.realui .macfp b{display:block;font-weight:400;color:var(--dim);font-size:11px;
           text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.realui .macfp code{font:19px/1.3 var(--mono);letter-spacing:.09em;overflow-wrap:anywhere}
.realui /* One window can hold several Claude Code tabs,.realui so a tab row shows the
     conversation title under the project — the only thing that tells two tabs
     of the same project apart. */
  .grp{display:flex;align-items:center;gap:7px;margin:13px 0 7px;
       color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.realui .grp:after{content:'';flex:1;height:1px;background:var(--line)}
.realui .prow.tab{align-items:flex-start;padding:9px 12px}
.realui /* Not scoped to .tab: any row with a title and a subtitle stacks them. It was
     .tab-only,.realui so the notifications row ran its two lines together. */
  .prow .tw{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.realui .prow .tw .tm{font:11px/1.3 var(--mono);color:var(--dim)}
.realui .prow.tab .tt{font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.realui .prow.tab .tm{font:11px/1 var(--mono);color:var(--dim)}
.realui /* The state line: what this conversation is doing,.realui and its mode. Two lines of
     11px metadata under a title is a lot,.realui so this one gets the emphasis and the
     size/showing-now line stays quiet. */
  .prow.tab .st{margin-top:3px;line-height:1.3}
.realui .prow.tab .st b{font-weight:600;color:var(--dim)}
.realui .prow.tab .st b.go{color:var(--ok)}
.realui .prow .dot{margin-top:4px}
.realui .prow.busyrow{opacity:.5;pointer-events:none}
.realui /* mode picker: each mode carries the panel's own description of it,.realui because
     the names alone don't say what will happen to your machine */
  .mrow{display:block;width:100%;background:#0f1116;border:1px solid var(--line);
        color:var(--fg);border-radius:9px;padding:11px 12px;margin-bottom:7px;
        text-align:left;height:auto;font:inherit}
.realui .mrow.sel{border-color:var(--accent);background:#1a1d27}
.realui .mrow b{display:block;font:600 14px/1.25 inherit}
.realui .mrow.sel b::after{content:' ✓';color:var(--accent)}
.realui .mrow span{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--dim)}
.realui /* Stop lives in the working bar — it only exists while there's a turn to stop. */
  /* Stop interrupts a running turn — the one control you reach for in a hurry,.realui and it was 27px. The bar keeps its slim look; the tap area is enlarged with
     padding rather than by making the pill bigger. */
  .work .stop{margin-left:auto;height:30px;padding:0 15px;font:600 13px/1 inherit;
              background:#3b2429;color:#f0a0a0;border-radius:15px;position:relative}
.realui .work .stop:before{content:'';position:absolute;inset:-7px -6px}
.realui .work .stop:active{background:#4a2b31}
.realui:not(.can-stop) .work .stop{display:none}
.realui /* These two exist so the page can carry NO style="" attributes at all.
     With a nonce on style-src,.realui an inline style attribute is refused — and
     keeping the policy strict is the point: 'unsafe-inline' would re-admit
     exactly the attribute-position injection that S2 shipped as a live XSS. */
  .acts.mt12{margin-top:12px}
.realui .thead b.bad{color:var(--bad)}

/* Utilities generated by the port from inline style= attributes. */
[data-u~="mt6"]{margin-top:.6rem}[data-u~="mt9"]{margin-top:.9rem}[data-u~="mt14"]{margin-top:1.4rem}
[data-u~="mt15"]{margin-top:1.5rem}[data-u~="mt16"]{margin-top:1.6rem}[data-u~="mt26"]{margin-top:2.6rem}
[data-u~="tal"]{text-align:left}[data-u~="nw"]{white-space:nowrap}
[data-u~="w6"]{width:6%}[data-u~="w32"]{width:32%}[data-u~="w34"]{width:34%}
[data-u~="w71"]{width:71%}[data-u~="w88"]{width:88%}
[data-u~="mw34"]{max-width:34rem}[data-u~="mw44"]{max-width:44rem}
[data-u~="fs9"]{font-size:.9rem;line-height:1.6}[data-u~="fs93"]{font-size:.93rem;line-height:1.6}
[data-u~="cdim"]{color:var(--vdim)}[data-u~="asfs"]{align-self:flex-start}
/* The comparison list is one column now, not three. */
.vstable .vshead,.vstable .vsrow2{grid-template-columns:minmax(0,1fr)}