/* Product demo: scenario tabs over a DOM replica of the GOAT workbench (src/ui/*.css).
   Osmo Scaling System: every stage length is N * --s, where --s is 1/16 of the frame's font size
   (var(--size-font), so 1em = 16px at a 1440 viewport and app pixel values map 1:1 there).
   The frame never outgrows its container: below the ideal size --s shrinks to fit (100cqw / 75em).
   Tokens copy the app's design system and are scoped here, so the landing palette never leaks in. */
@property --s{syntax:'<length>';inherits:true;initial-value:1px}

/* The product shell spans the hero under the copy: a centred tab bar over the full-width window (Orca's showcase). */
.hero .product-shell{width:100%}
.hero .demo-tabs{background:#101512e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.product-shell{
  /* The app's :root tokens (src/ui/style.css): near-black panels, bone ink, lichen accents. */
  --d-ground:#0a0b0a;--d-panel:#0e100e;--d-raised:#141614;--d-selected:#1a1e1a;--d-active:#202420;
  --d-text:#edece0;--d-text2:#d3d3cb;--d-muted:#b3b7b0;--d-faint:#8d928c;--d-hint:#4c524c;
  --d-line1:#191c19;--d-line2:#1f231f;--d-line3:#262b26;--d-line4:#2c312c;--d-line5:#363d36;
  --d-live:#d4f77d;--d-mark:#d4f77d;--d-ok:oklch(0.78 0.15 150);--d-bad:oklch(0.72 0.17 25);--d-warn:oklch(0.8 0.14 80);
  --d-info:oklch(0.76 0.12 240);--d-review:oklch(0.74 0.14 295);
  --d-mono:'Geist Mono',ui-monospace,monospace;
  display:flex;flex-direction:column;align-items:center;font-size:var(--size-font,16px)
}
.demo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Scenario tabs: one centred pill group; each tab's hairline fills over its scenario. */
.demo-tabs{display:inline-flex;gap:.125em;max-width:100%;padding:.25em;border:1px solid #edece01a;border-radius:.75em;background:#edece008;overflow-x:auto;scrollbar-width:none}
.demo-tabs::-webkit-scrollbar{display:none}
.demo-tab{position:relative;flex-shrink:0;height:2.615em;padding:0 1.077em;border:0;border-radius:.615em;background:transparent;color:#edece080;font:500 max(12px,.8125em)/1 Geist,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;transition:color .2s,background-color .2s}
.demo-tab[aria-selected=true]{background:#edece012;color:#edece0}
.demo-tab:focus-visible{outline:2px solid #d4f77d;outline-offset:-2px}
/* One pill slides under the selected tab; one lichen line along the bar's foot fills across all four scenes. */
.demo-tabs{position:relative;overflow:hidden}
.demo-tab{z-index:1}
.demo-tab[aria-selected=true]{background:transparent}
.demo-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:.615em;background:#edece017;box-shadow:0 1px 2px #00000047;pointer-events:none}
.demo-pill.is-ready{transition:transform .4s cubic-bezier(.625,.05,0,1),width .4s cubic-bezier(.625,.05,0,1),height .4s cubic-bezier(.625,.05,0,1)}
.demo-seq{position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;background:#edece014;pointer-events:none}
.demo-seq i{position:absolute;left:0;top:0;bottom:0;width:1px;background:#d4f77d;transform:scaleX(0);transform-origin:0 50%}
@media(hover:hover) and (pointer:fine){.demo-tab:hover{color:#edece0c0}}
@media(pointer:coarse){.demo-tab{height:44px}}

/* Frame: 75em x 48.75em of app (1200 x 780 at 16px), inside the container at every width. */
.demo{position:relative;isolation:isolate;width:100%;margin:1em 0 0}
/* Bezel: a 6px dark rim and one deep shadow; the window fills it on desktop. */
.demo-bezel{position:relative;container-type:inline-size;padding:6px;border:1px solid #edece01c;border-radius:18px;background:#070807;box-shadow:0 3.5em 10em -1.75em #000000eb,inset 0 1px 0 #edece00d}
.demo-frame{
  --s:calc(1em / 16);
  position:relative;width:calc(1200 * var(--s));height:calc(780 * var(--s));margin-inline:auto;overflow:hidden;
  font-size:calc(100cqw / 75);border-radius:12px;background:var(--d-panel);
  box-shadow:0 0 0 1px var(--d-line2);contain:layout paint
}
/* Faint top inner highlight above the stage. */
.demo-frame:after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 1px 0 #edece01a;pointer-events:none}
.demo-caption{margin-top:1em;text-align:center;font:500 max(12px,.75em)/1.5 var(--d-mono);color:var(--d-faint);letter-spacing:.02em}
.demo-field{position:absolute;z-index:-1;inset:-3.5em -4.5em 0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}

/* Stage: app pixel values, as N * --s. */
.demo-stage{
  position:absolute;left:0;top:0;width:calc(1200 * var(--s));height:calc(780 * var(--s));display:flex;flex-direction:column;overflow:hidden;
  background:var(--d-panel);color:var(--d-text);font:400 calc(13 * var(--s))/calc(16 * var(--s)) Geist,system-ui,sans-serif;letter-spacing:0;text-transform:none;
  user-select:none;pointer-events:none;-webkit-font-smoothing:antialiased
}
.demo-stage .d-sprite{position:absolute}
.demo-stage svg.i{width:calc(14 * var(--s));height:calc(14 * var(--s));flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.25;stroke-miterlimit:10}
.demo-stage svg.i12{width:calc(12 * var(--s));height:calc(12 * var(--s))}.demo-stage svg.i13{width:calc(13 * var(--s));height:calc(13 * var(--s))}.demo-stage svg.i15{width:calc(15 * var(--s));height:calc(15 * var(--s))}.demo-stage svg.i16{width:calc(16 * var(--s));height:calc(16 * var(--s))}.demo-stage svg.i20{width:calc(20 * var(--s));height:calc(20 * var(--s))}
.d-label{font:500 calc(10.5 * var(--s))/1 var(--d-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-faint)}
.d-iconbtn{display:inline-grid;place-items:center;width:calc(28 * var(--s));height:calc(28 * var(--s));border-radius:calc(6 * var(--s));color:var(--d-faint)}
.d-iconbtn--lg{width:calc(30 * var(--s));height:calc(30 * var(--s))}
.d-iconbtn[data-press="1"]{background:var(--d-raised);color:var(--d-text)}
.d-sq{width:calc(6 * var(--s));height:calc(6 * var(--s));flex-shrink:0;background:var(--d-faint)}
.d-sq.is-info{background:var(--d-info)}.d-sq.is-live{background:var(--d-live)}
.d-caret{display:inline-block;width:calc(1.5 * var(--s));height:calc(14 * var(--s));margin-left:calc(1 * var(--s));background:var(--d-text);opacity:0;vertical-align:middle}
.d-caret[data-on="1"]{opacity:1}
.d-caret[data-blink="1"]{animation:d-blink 1s steps(1) infinite}
@keyframes d-blink{50%{opacity:0}}
/* ActionButton: the lichen Osmo Button 088 pill (src/ui/style.css .osmo-action), arrow field at rest as an ink dot. */
.d-primary{position:relative;display:inline-flex;align-items:center;gap:calc(14 * var(--s));height:calc(32 * var(--s));padding:calc(3 * var(--s)) calc(3 * var(--s)) calc(3 * var(--s)) calc(14 * var(--s));border:1px solid var(--d-live);border-radius:calc(6 * var(--s));background:var(--d-live);color:var(--d-ground);font-size:calc(12.5 * var(--s));font-weight:600;white-space:nowrap;transition:transform .15s}
.d-primary:after{content:"";width:calc(24 * var(--s));height:calc(24 * var(--s));flex-shrink:0;border-radius:50%;background:radial-gradient(circle,var(--d-ground) 0 calc(3.6 * var(--s)),transparent calc(3.9 * var(--s)))}
.d-primary svg{display:none}
.d-primary[data-press="1"]{transform:scale(.96,.93)}
.d-primary.is-disabled,.d-primary[data-disabled="1"]{opacity:.4;background:color-mix(in srgb,var(--d-live) 45%,var(--d-panel))}
.d-secondary{display:inline-flex;align-items:center;gap:calc(7 * var(--s));align-self:start;height:calc(32 * var(--s));padding:0 calc(12 * var(--s));border:calc(1 * var(--s)) solid var(--d-line4);border-radius:calc(8 * var(--s));color:var(--d-text2);font-size:calc(12 * var(--s));font-weight:500;white-space:nowrap}
.d-secondary svg{color:var(--d-faint)}
.d-secondary[data-press="1"]{background:var(--d-raised);border-color:var(--d-line5)}

/* Titlebar */
.d-title{display:flex;align-items:center;gap:calc(14 * var(--s));height:calc(40 * var(--s));padding:0 calc(8 * var(--s)) 0 calc(14 * var(--s));border-bottom:calc(1 * var(--s)) solid var(--d-line2);background:var(--d-ground);flex-shrink:0}
.d-brand{display:inline-flex;align-items:center;gap:calc(7 * var(--s));font-size:calc(14 * var(--s));font-weight:650;letter-spacing:-.04em}
.d-mark{width:calc(18 * var(--s));height:calc(18 * var(--s))}
.d-crumbs{display:flex;align-items:center;gap:calc(10 * var(--s));font:500 calc(12 * var(--s))/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-faint)}
.d-crumbs:before{content:'';width:calc(1 * var(--s));height:calc(14 * var(--s));background:var(--d-line4);margin-right:calc(2 * var(--s))}
.d-crumbs strong{color:var(--d-text2);font-weight:500}
.d-crumb-branch{display:inline-flex;align-items:center;gap:calc(5 * var(--s));font-size:calc(11 * var(--s));letter-spacing:.04em;text-transform:none}
.d-title-end{display:flex;align-items:center;gap:calc(6 * var(--s));margin-left:auto}
.d-badge{display:inline-flex;align-items:center;gap:calc(7 * var(--s));min-height:calc(24 * var(--s));padding:0 calc(9 * var(--s));border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(6 * var(--s));font:500 calc(11 * var(--s)) var(--d-mono);color:var(--d-muted)}

/* Shell columns: app defaults, sidebar 264 and rail 320. */
.d-work{display:flex;flex:1;min-height:0}
.d-split{flex:0 0 calc(1 * var(--s));background:var(--d-line2)}
.d-side{width:calc(248 * var(--s));flex-shrink:0;display:flex;flex-direction:column;background:var(--d-panel)}
.d-sessions{width:calc(340 * var(--s));flex-shrink:0}
.d-editor{width:calc(321 * var(--s));flex-shrink:0;position:relative}
.d-rail{width:calc(288 * var(--s));flex-shrink:0;display:flex;flex-direction:column;background:var(--d-panel)}
.d-pane{display:flex;flex-direction:column;min-height:0;background:var(--d-ground);overflow:hidden}

/* Sidebar */
.d-bar{display:flex;align-items:center;gap:calc(2 * var(--s));min-height:calc(36 * var(--s));padding:0 calc(7 * var(--s)) 0 calc(14 * var(--s));flex-shrink:0}
.d-bar .d-label{margin-right:auto}
.d-tree{flex:1;min-height:0;overflow:hidden}
.d-row{position:relative;display:flex;align-items:center;gap:calc(8 * var(--s));min-height:calc(28 * var(--s));margin:0 calc(6 * var(--s));padding:0 calc(8 * var(--s)) 0 calc(calc(8 * var(--s)) + var(--l,0)*calc(14 * var(--s)));border-radius:calc(6 * var(--s));white-space:nowrap;color:var(--d-text2)}
.d-row.is-session[data-sel="1"]{background:var(--d-selected);color:var(--d-text)}
.d-row[data-sel="1"] .d-name{font-weight:600}
.d-row[data-sel="1"] .d-ic{color:var(--d-text)}
.d-row[data-hover="1"]{background:var(--d-raised);color:var(--d-text)}
.d-row.is-project,.d-row.is-task{color:var(--d-text2)}
.d-row.is-project .d-name,.d-row.is-task .d-name{font-weight:500}
.d-row.is-session{gap:calc(6 * var(--s))}
.d-row.is-session .d-ic{margin-right:calc(2 * var(--s));color:var(--d-muted)}
.d-ic,.d-glyph{position:relative;display:inline-grid;place-items:center;width:calc(14 * var(--s));height:calc(14 * var(--s));flex-shrink:0;color:var(--d-faint)}
.d-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.d-count,.d-age,.d-tag{font:400 calc(11 * var(--s))/1 var(--d-mono);color:var(--d-muted);font-variant-numeric:tabular-nums}
.d-tag{padding-right:calc(4 * var(--s));font-family:Geist,system-ui,sans-serif}
.d-end{display:flex;align-items:center;gap:calc(2 * var(--s));margin-left:auto;flex-shrink:0;padding-left:calc(2 * var(--s))}
.d-age{min-width:3ch;text-align:right}
.d-chev{display:inline-grid;place-items:center;width:calc(20 * var(--s));height:calc(22 * var(--s));margin-right:-4px;color:var(--d-faint)}
.d-row.is-task{display:grid;grid-template-columns:calc(14 * var(--s)) minmax(0,1fr) auto;grid-template-rows:calc(16 * var(--s)) calc(14 * var(--s));align-content:center;column-gap:calc(8 * var(--s));row-gap:calc(2 * var(--s));min-height:calc(40 * var(--s));padding-block:calc(4 * var(--s))}
.d-row.is-task .d-ic{grid-area:1/1}.d-row.is-task .d-name{grid-area:1/2}.d-row.is-task .d-end{grid-area:1/3/3/4;margin-left:0}
.d-branch{grid-area:2/2;font:400 calc(11 * var(--s))/calc(14 * var(--s)) var(--d-mono);color:var(--d-muted);overflow:hidden;text-overflow:ellipsis}

/* Glyphs: sidebar arcs and checks (calc(14 * var(--s))), strip and toolbar spinners (calc(10 * var(--s))). */
.d-glyph svg{stroke-width:2}
.d-glyph.is-done,.d-glyph .g-done{color:var(--d-muted)}
.g-ring{width:calc(14 * var(--s));height:calc(14 * var(--s));fill:none;stroke:var(--d-warn);stroke-width:2}
.d-glyph.is-flip>svg{grid-area:1/1}
.g-arc{width:calc(14 * var(--s));height:calc(14 * var(--s));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--d-live);overflow:visible}
.g-arc .g-track{stroke:var(--d-line4)}
.g-spin{transform-box:fill-box;transform-origin:center;animation:d-spin .9s linear infinite}
@keyframes d-spin{to{transform:rotate(360deg)}}
.w-glyph{position:relative;display:inline-grid;place-items:center;width:calc(12 * var(--s));height:calc(12 * var(--s));flex-shrink:0;color:var(--d-muted)}
.w-glyph>*{grid-area:1/1}
.w-spin{width:calc(10 * var(--s));height:calc(10 * var(--s));border-radius:50%;border:calc(1.5 * var(--s)) solid color-mix(in srgb,var(--d-live) 28%,transparent);border-top-color:var(--d-live);animation:d-spin .9s linear infinite}
.demo-stage:not([data-playing=true]) .g-spin,.demo-stage:not([data-playing=true]) .w-spin,.demo-stage:not([data-playing=true]) .d-caret{animation-play-state:paused}


/* Strips and toolbars */
.d-strip{display:flex;align-items:stretch;height:calc(36 * var(--s));flex-shrink:0;background:var(--d-panel);box-shadow:inset 0 -1px 0 var(--d-line2)}
.d-tabs{display:flex;min-width:0;overflow:hidden}
.d-tab{display:flex;align-items:center;gap:calc(7 * var(--s));flex-shrink:1;min-width:calc(104 * var(--s));padding:0 calc(6 * var(--s)) 0 calc(12 * var(--s));font-size:calc(12 * var(--s));color:var(--d-faint);box-shadow:inset -1px 0 0 var(--d-line2);white-space:nowrap;overflow:hidden}
.d-tab[data-sel="1"]{background:var(--d-ground);color:var(--d-text);box-shadow:inset 0 calc(1 * var(--s)) 0 var(--d-mark),inset -1px 0 0 var(--d-line2)}
.d-tab[data-sel="1"] .d-tab-label{font-weight:500}
/* The selected tab keeps its label; neighbours give way down to the app's 104px floor. */
.d-tab[data-sel="1"]{flex-shrink:0}
.d-tab-label{min-width:0;max-width:calc(220 * var(--s));overflow:hidden;text-overflow:ellipsis}
.d-tab>svg,.d-tab>.w-glyph,.d-x{flex-shrink:0}
.d-tab.is-reveal{min-width:0}
.d-x{display:grid;place-items:center;width:calc(20 * var(--s));height:calc(20 * var(--s));color:var(--d-faint);opacity:0}
.d-tab[data-sel="1"] .d-x{opacity:1}
.d-addwrap{position:relative;display:flex;align-items:center;padding:0 calc(4 * var(--s))}
.d-menu{position:absolute;z-index:6;top:calc(100% - calc(2 * var(--s)));left:calc(4 * var(--s));display:flex;flex-direction:column;min-width:calc(168 * var(--s));padding:calc(4 * var(--s));background:var(--d-panel);border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(10 * var(--s));box-shadow:0 calc(12 * var(--s)) calc(32 * var(--s)) #0009,0 calc(2 * var(--s)) calc(6 * var(--s)) #0006;transform-origin:0 0}
.d-menu-item{display:flex;align-items:center;gap:calc(8 * var(--s));height:calc(28 * var(--s));padding:0 calc(10 * var(--s));border-radius:calc(6 * var(--s));font-size:calc(12 * var(--s));color:var(--d-text2)}
.d-menu-item svg{color:var(--d-faint)}
.d-menu-item[data-hover="1"]{background:var(--d-raised);color:var(--d-text)}
.d-toolbar{display:flex;align-items:center;gap:calc(10 * var(--s));height:calc(28 * var(--s));flex-shrink:0;padding:0 calc(6 * var(--s)) 0 calc(12 * var(--s));background:var(--d-panel);border-bottom:calc(1 * var(--s)) solid var(--d-line2);font:400 calc(11 * var(--s))/1 var(--d-mono);color:var(--d-muted);white-space:nowrap}
.d-status{display:inline-flex;align-items:center;gap:calc(6 * var(--s));color:var(--d-text2)}
.d-meta{overflow:hidden;text-overflow:ellipsis}
.d-tool-end{display:flex;align-items:center;margin-left:auto}
.d-wbtn{display:inline-flex;align-items:center;gap:calc(6 * var(--s));height:calc(22 * var(--s));padding:0 calc(8 * var(--s));font:400 calc(11 * var(--s)) Geist,system-ui,sans-serif;color:var(--d-muted)}
.d-wbtn kbd{font:calc(10 * var(--s)) var(--d-mono);color:var(--d-faint)}
.d-crumbs-path{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--d-faint)}
.d-filepanel .d-toolbar>.d-meta{flex-shrink:0}
.d-crumbs-path i{font-style:normal;margin:0 calc(4 * var(--s));color:var(--d-hint)}
.d-crumbs-path b{font-weight:400;color:var(--d-text2)}

/* Transcript: xterm metrics (Geist Mono 12.5 / 1.35). */
.d-term{position:relative;flex:1;min-height:0}
.d-log{position:absolute;inset:0;padding:calc(12 * var(--s)) calc(14 * var(--s));font:400 calc(12.5 * var(--s))/calc(17 * var(--s)) var(--d-mono);color:var(--d-text2);white-space:pre;overflow:hidden}
.d-ln{min-height:calc(17 * var(--s));white-space:pre}
.d-ln.is-out{color:var(--d-muted)}
.d-ln.is-strong{color:var(--d-text);font-weight:600}
.d-pass{color:var(--d-ok);font-weight:600}
.d-compose{display:flex;align-items:center;gap:calc(8 * var(--s));flex-shrink:0;padding:calc(8 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s)) calc(12 * var(--s));background:var(--d-panel);border-top:calc(1 * var(--s)) solid var(--d-line2);font-size:calc(12 * var(--s))}
.d-select,.d-field,.d-selectbox{display:flex;align-items:center;height:calc(32 * var(--s));padding:0 calc(8 * var(--s)) 0 calc(10 * var(--s));border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(8 * var(--s));background:var(--d-ground)}
.d-select{width:calc(104 * var(--s));justify-content:space-between;flex-shrink:0;color:var(--d-text2)}
.d-select svg,.d-selectbox svg{color:var(--d-faint)}
.d-field{display:block;flex:1;min-width:0;line-height:calc(30 * var(--s));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--d-faint)}

/* Editor: Monaco's GOAT theme, ink steps only; added lines are the one color. */
.d-filepanel,.d-browser{position:absolute;inset:calc(36 * var(--s)) 0 0;display:flex;flex-direction:column;background:var(--d-ground)}
.d-code{position:relative;display:flex;flex:1;min-height:0;overflow:hidden;padding-top:calc(12 * var(--s))}
.d-gutter{display:flex;flex-direction:column;width:calc(42 * var(--s));flex-shrink:0;padding-right:calc(16 * var(--s));text-align:right;font:400 calc(13 * var(--s))/calc(19 * var(--s)) var(--d-mono);color:#7f877b}
.d-gutter span{position:relative;height:calc(19 * var(--s))}
.d-gutter .is-add:after{content:'';position:absolute;right:-10px;top:0;bottom:0;width:calc(2 * var(--s));background:var(--d-ok);opacity:var(--mark,0)}
.d-lines{flex:1;min-width:0;font:400 calc(13 * var(--s))/calc(19 * var(--s)) var(--d-mono);color:var(--d-text2)}
.d-lines div{height:calc(19 * var(--s));white-space:pre}
.d-lines .d-lower{height:auto;white-space:normal}
.d-lines .d-change{position:relative;height:calc(57 * var(--s));white-space:normal}
.d-lines b{font-weight:400}
.d-lines .k{color:#c9e58a}.d-lines .s{color:#b3b7b0}.d-lines .t{color:#e2e2d6}.d-lines .n{color:var(--d-text)}.d-lines .c{color:var(--d-faint);font-style:italic}
.d-todo{position:absolute;left:0;right:0;top:0}
.d-add{background:oklch(0.78 0.15 150/.09);margin-left:-6px;padding-left:calc(6 * var(--s))}
.d-editor-meta{display:flex;justify-content:space-between;height:calc(22 * var(--s));align-items:center;flex-shrink:0;padding:0 calc(12 * var(--s));border-top:calc(1 * var(--s)) solid var(--d-line2);font:400 calc(11 * var(--s)) var(--d-mono);color:var(--d-faint)}

/* Browser pane (BrowserPane.tsx): a calc(28 * var(--s)) bar, then the guest page on a light canvas. */
.d-browser-bar{gap:calc(2 * var(--s));padding-left:calc(4 * var(--s))}
.d-bb{display:inline-grid;place-items:center;width:calc(24 * var(--s));height:calc(22 * var(--s));color:var(--d-muted)}
.d-bb.is-back svg{transform:rotate(90deg)}.d-bb.is-fwd svg{transform:rotate(-90deg)}.d-bb.is-back,.d-bb.is-fwd{opacity:.4}
.d-address{display:flex;align-items:center;flex:1;min-width:0;height:calc(22 * var(--s));margin-left:calc(4 * var(--s));padding:0 calc(8 * var(--s));border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(6 * var(--s));background:var(--d-ground);font:400 calc(12 * var(--s)) var(--d-mono);color:var(--d-text2)}
.d-address[data-focus="1"]{border-color:var(--d-line5)}
.d-view{position:relative;flex:1;min-height:0;background:var(--d-ground);overflow:hidden}

/* The user's own dApp at localhost:3000: an ordinary light page, deliberately not the GOAT skin. */
.d-page{position:absolute;inset:0;padding:calc(18 * var(--s));background:#fafaf7;color:#16181a;font-family:Geist,system-ui,sans-serif}
.pg-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:calc(16 * var(--s));border-bottom:calc(1 * var(--s)) solid #e6e5df}
.pg-brand{display:inline-flex;align-items:center;gap:calc(8 * var(--s));font-weight:600;font-size:calc(13 * var(--s));letter-spacing:-.01em}
.pg-mark{width:calc(14 * var(--s));height:calc(14 * var(--s));border-radius:calc(4 * var(--s));background:#16181a}
.pg-chip{display:inline-flex;align-items:center;gap:calc(6 * var(--s));height:calc(22 * var(--s));padding:0 calc(8 * var(--s));border:calc(1 * var(--s)) solid #dcdad2;border-radius:calc(6 * var(--s));font:500 calc(10.5 * var(--s)) var(--d-mono);color:#4a4d50}
.pg-dot{width:calc(6 * var(--s));height:calc(6 * var(--s));background:oklch(0.62 0.13 240)}
.pg-head{display:flex;flex-direction:column;gap:calc(6 * var(--s));padding:calc(26 * var(--s)) 0 calc(18 * var(--s))}
.pg-eyebrow{font:500 calc(10.5 * var(--s)) var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:#7a7c7e}
.pg-title{font-size:calc(26 * var(--s));font-weight:600;letter-spacing:-.025em}
.pg-sub{font-size:calc(13 * var(--s));color:#5b5e61;line-height:1.5}
.pg-card{border:calc(1 * var(--s)) solid #e3e1da;border-radius:calc(12 * var(--s));background:#fff;overflow:hidden}
.pg-line{display:flex;justify-content:space-between;align-items:center;height:calc(44 * var(--s));padding:0 calc(16 * var(--s));border-bottom:calc(1 * var(--s)) solid #efeee9;font-size:calc(13 * var(--s));color:#4a4d50}
.pg-line b{font:600 calc(13 * var(--s)) var(--d-mono);color:#16181a;font-variant-numeric:tabular-nums}
.pg-line.is-total{border-bottom:0;background:#f6f5f0;color:#16181a;font-weight:500}
.pg-foot{display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--s));padding-top:calc(18 * var(--s))}
.pg-btn{display:inline-flex;align-items:center;height:calc(34 * var(--s));padding:0 calc(14 * var(--s));border-radius:calc(8 * var(--s));background:#16181a;color:#fafaf7;font-size:calc(12.5 * var(--s));font-weight:600}
.pg-note{font-size:calc(11.5 * var(--s));color:#7a7c7e}

/* Rail */
.d-rail-tabs{position:relative;display:flex;align-items:stretch;height:calc(36 * var(--s));padding:0 calc(4 * var(--s));border-bottom:calc(1 * var(--s)) solid var(--d-line2);flex-shrink:0}
.d-rtab{display:grid;place-items:center;width:calc(32 * var(--s));color:var(--d-faint)}
.d-rtab[data-sel="1"]{color:var(--d-text)}
.d-rail-ind{position:absolute;left:calc(4 * var(--s));bottom:-1px;width:calc(32 * var(--s));height:calc(2 * var(--s));background:var(--d-mark)}
.d-rail-panel{align-self:center;margin-left:auto}
.d-rail-body{position:relative;flex:1;min-height:0}
.d-rpanel{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--d-panel)}
.d-rhead{display:flex;align-items:center;gap:calc(8 * var(--s));height:calc(36 * var(--s));padding:0 calc(6 * var(--s)) 0 calc(12 * var(--s));border-bottom:calc(1 * var(--s)) solid var(--d-line2);flex-shrink:0}
.d-rhead .d-label{flex:1;color:var(--d-muted)}
.d-rbranch{flex:1;display:flex;align-items:center;gap:calc(6 * var(--s));font:500 calc(12 * var(--s)) var(--d-mono);color:var(--d-text2)}
.d-rbranch svg{color:var(--d-faint)}
.d-rscroll{flex:1;min-height:0;overflow:hidden}
.d-explorer{padding:calc(4 * var(--s)) calc(6 * var(--s)) calc(12 * var(--s))}
.d-file{display:flex;align-items:center;gap:calc(6 * var(--s));min-height:calc(26 * var(--s));padding:0 calc(8 * var(--s)) 0 calc(calc(6 * var(--s)) + var(--depth,0)*calc(12 * var(--s)));border-radius:calc(6 * var(--s));white-space:nowrap;color:var(--d-text2)}
.d-file>svg.i{color:var(--d-faint)}
.d-file.is-dot{color:var(--d-muted)}
.d-file.is-sel{background:var(--d-selected);color:var(--d-text);font-weight:600}
.d-fchev{display:grid;place-items:center;width:calc(12 * var(--s));height:calc(12 * var(--s));flex-shrink:0;color:var(--d-faint);transform:rotate(-90deg)}
.d-fchev.is-open{transform:none}
.d-rsec{display:flex;flex-direction:column;gap:calc(8 * var(--s));padding:calc(12 * var(--s));border-bottom:calc(1 * var(--s)) solid var(--d-line2);font-size:calc(12 * var(--s));line-height:1.5;color:var(--d-text2)}
.d-rsec h4{margin:0;font-size:calc(12 * var(--s));font-weight:600;color:var(--d-text)}
.d-subtle{margin:0;font-size:calc(12 * var(--s));line-height:1.5;color:var(--d-muted)}
.d-status-out{margin:0;font:calc(12 * var(--s))/1.6 var(--d-mono);color:var(--d-muted);white-space:pre-wrap}
.d-merge-confirm{display:flex;flex-direction:column;gap:calc(8 * var(--s));font-size:calc(12 * var(--s))}
.d-merge-confirm p{margin:0}
.d-actions{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8 * var(--s))}
.d-merge,.d-merge-confirm{position:relative}
.d-rsec.is-diff{padding:calc(12 * var(--s)) 0 0;border-bottom:0}
.d-rsec.is-diff h4{padding:0 calc(12 * var(--s))}
.d-diff{margin:0;padding:calc(6 * var(--s)) 0;background:var(--d-ground);border-top:calc(1 * var(--s)) solid var(--d-line2);font:calc(12 * var(--s))/1.6 var(--d-mono);color:var(--d-text2);white-space:pre;overflow:hidden}
.d-dl{display:block;padding:0 calc(12 * var(--s))}
.d-dl.is-add{color:var(--d-ok);background:oklch(0.78 0.15 150/.1)}
.d-dl.is-del{color:var(--d-bad);background:oklch(0.72 0.17 25/.1)}
.d-dl.is-hunk{color:var(--d-review)}
.d-dl.is-file{font-weight:600}
.d-rsec.is-note{gap:calc(6 * var(--s))}
.d-rsec.is-note .d-subtle{font-size:calc(11 * var(--s))}
.d-chip{display:inline-flex;align-items:center;gap:calc(7 * var(--s));align-self:start;min-height:calc(22 * var(--s));padding:0 calc(8 * var(--s));border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(6 * var(--s));font-size:calc(11 * var(--s));color:var(--d-text2)}
.d-rsec label{display:flex;flex-direction:column;gap:calc(4 * var(--s));font-size:calc(11 * var(--s));color:var(--d-faint)}
.d-selectbox{justify-content:space-between;font-size:calc(12 * var(--s));color:var(--d-text)}
.d-textarea{position:relative;display:block;min-height:calc(52 * var(--s));padding:calc(6 * var(--s)) calc(10 * var(--s));border:calc(1 * var(--s)) solid var(--d-line3);border-radius:calc(8 * var(--s));background:var(--d-ground);font:400 calc(12 * var(--s))/1.5 var(--d-mono);color:var(--d-text);word-break:break-all}
.d-textarea i{position:absolute;left:calc(10 * var(--s));top:calc(6 * var(--s));font-style:normal;color:var(--d-faint)}
.d-textarea[data-focus="1"]{border-color:var(--d-line5)}
.d-rempty{display:flex;flex-direction:column;gap:calc(6 * var(--s));padding:calc(20 * var(--s)) calc(12 * var(--s));color:var(--d-muted)}
.d-rempty svg{color:var(--d-faint);margin-bottom:calc(2 * var(--s))}
.d-rempty h4{margin:0;font-size:calc(13 * var(--s));font-weight:600;color:var(--d-text)}
.d-rempty p{margin:0;font-size:calc(12 * var(--s));max-width:34ch}
.d-rsec.is-result{position:absolute;left:0;right:0;top:auto;border-bottom:0}
.d-meta-list{margin:0;font-size:calc(11 * var(--s))}
.d-meta-list>div{display:grid;grid-template-columns:calc(56 * var(--s)) minmax(0,1fr);gap:calc(8 * var(--s));padding:calc(6 * var(--s)) 0;border-bottom:calc(1 * var(--s)) solid var(--d-line1)}
.d-meta-list>div:first-child{border-top:calc(1 * var(--s)) solid var(--d-line1)}
.d-meta-list dt{color:var(--d-faint)}
.d-meta-list dd{margin:0;font-family:var(--d-mono);color:var(--d-text2);word-break:break-all}
.d-data{margin:0;padding:calc(8 * var(--s)) calc(10 * var(--s));background:var(--d-ground);border:calc(1 * var(--s)) solid var(--d-line2);border-radius:calc(8 * var(--s));font:calc(12 * var(--s))/1.6 var(--d-mono);color:var(--d-text2);white-space:pre;overflow:hidden}
.d-data span{display:block}

/* Statusbar */
.d-statusbar{display:flex;align-items:center;gap:calc(16 * var(--s));height:calc(26 * var(--s));padding:0 calc(12 * var(--s));border-top:calc(1 * var(--s)) solid var(--d-line2);background:var(--d-ground);font:500 calc(11 * var(--s)) var(--d-mono);color:var(--d-faint);flex-shrink:0}
.d-statusbar>span{display:inline-flex;align-items:center;gap:calc(6 * var(--s));white-space:nowrap}
.d-sb-branch{color:var(--d-text2)}
.d-status-push{margin-left:auto;color:var(--d-text2)}
.d-status-div{width:calc(1 * var(--s));height:calc(10 * var(--s));background:var(--d-line4)}

/* Pointer: tip at the element origin. The only floating shadow besides the menu. */
.d-cursor{position:absolute;left:0;top:0;z-index:9;width:0;height:0;opacity:0;visibility:hidden}
.d-arrow{position:absolute;left:-2px;top:-1.5px;overflow:visible;filter:drop-shadow(0 calc(2 * var(--s)) calc(4 * var(--s)) rgb(0 0 0/.5))}
.d-arrow path{fill:var(--d-text);stroke:var(--d-ground);stroke-width:1.3;stroke-linejoin:round}
.d-ripple{position:absolute;left:-16px;top:-16px;width:calc(32 * var(--s));height:calc(32 * var(--s));border-radius:50%;border:calc(1 * var(--s)) solid var(--d-text);background:rgb(237 236 224/.08);opacity:0;visibility:hidden}
.demo-stage[data-static=true] .d-cursor{display:none}
.d-merge-slot{position:relative;height:calc(58 * var(--s))}
.d-merge-slot>*{position:absolute;left:0;right:0;top:0}
/* Surfaces that only one step shows start hidden, before demo.js runs. */
[data-d=menu],[data-d=confirm],[data-d=merge-done],[data-d=merged],[data-d=loading],[data-d=browser],[data-d=panel-review],[data-d=panel-solana],[data-d=sol-result],[data-d=log-checks],[data-d=status-run]{opacity:0;visibility:hidden}

/* Layouts per scenario (data-layout on the stage): 'grid' closes the editor pane and collapses the
   rail to its icon strip; 'wide' closes the editor and opens the rail wide enough for its content. */
.demo-stage[data-layout=grid] .d-editor,.demo-stage[data-layout=grid] .d-editor+.d-split,
.demo-stage[data-layout=wide] .d-editor,.demo-stage[data-layout=wide] .d-editor+.d-split{display:none}
.demo-stage[data-layout=grid] .d-sessions,.demo-stage[data-layout=wide] .d-sessions{flex:1;width:auto;min-width:0}
.demo-stage[data-layout=grid] .d-rail{width:calc(40 * var(--s))}
.demo-stage[data-layout=grid] .d-rail-tabs,.demo-stage[data-layout=grid] .d-rail-body{display:none}
.demo-stage[data-layout=wide] .d-rail{width:calc(400 * var(--s))}
.d-rail-strip{display:none;flex-direction:column;align-items:center;gap:calc(4 * var(--s));width:calc(40 * var(--s));padding:calc(2 * var(--s)) 0}
.d-rail-strip .d-iconbtn{width:calc(32 * var(--s));height:calc(32 * var(--s))}
.demo-stage[data-layout=grid] .d-rail-strip{display:flex}
.d-grid-toggle{align-self:center;margin:0 calc(4 * var(--s)) 0 auto}
.d-grid-toggle[data-on="1"]{background:var(--d-active);color:var(--d-text)}

/* Grid: up to four sessions 2x2, each a slim 28px header over its own transcript. */
.d-grid{position:absolute;inset:0;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:1px;background:var(--d-line2)}
.d-gpane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--d-ground)}
.d-ph{display:flex;align-items:center;gap:calc(7 * var(--s));height:calc(28 * var(--s));flex-shrink:0;padding:0 calc(10 * var(--s)) 0 calc(12 * var(--s));background:var(--d-panel);border-bottom:1px solid var(--d-line2);font-size:calc(12 * var(--s));color:var(--d-text2);white-space:nowrap}
.d-ph>svg.i{color:var(--d-muted)}
.d-ph-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--d-faint)}
.d-gpane.is-sel .d-ph{box-shadow:inset 0 1px 0 var(--d-mark)}
.d-gpane.is-sel .d-ph-title{color:var(--d-text);font-weight:500}
.d-ph .d-x{opacity:1;width:calc(24 * var(--s));height:calc(24 * var(--s));margin-right:calc(-6 * var(--s))}
.d-ph-age{min-width:3ch;text-align:right;font:400 calc(11 * var(--s)) var(--d-mono);color:var(--d-muted)}
.d-glog{flex:1;min-height:0;padding:calc(8 * var(--s)) calc(10 * var(--s));font:400 calc(12.5 * var(--s))/calc(17 * var(--s)) var(--d-mono);color:var(--d-text2);white-space:pre;overflow:hidden}
.d-data{white-space:pre-wrap;overflow-wrap:anywhere}
[data-d=grid]{opacity:0;visibility:hidden}

/* Agent panes run the CLIs' own terminal UIs. Colours here are terminal output (ANSI-like), not
   GOAT chrome: salmon for Claude Code, white and grey for Codex, amber for Hermes, green and red diffs. */
.tui{display:flex;flex-direction:column;height:100%;min-height:0}
.t-body{flex:1;min-height:0;overflow:hidden}
.t-foot{flex-shrink:0}
.t-ln{height:calc(17 * var(--s));white-space:pre;overflow:hidden}
.t-ln b{font-weight:600;color:var(--d-text)}
.t-dim{color:var(--d-faint)}.t-wh{color:var(--d-text)}
.t-ok,.t-add-fg{color:#4eba65}.t-del-fg{color:#e06c6c}
.t-add{background:#1d3a24;color:#cfe9d4}.t-del{background:#47201f;color:#f0c6c4}
.t-sal{color:#d77757}
.t-bar{background:#ffffff17;color:var(--d-text);padding-right:1ch}
.t-cursor{display:inline-block;width:.6em;height:1.05em;vertical-align:text-bottom;background:var(--d-text2)}
.t-claude .t-foot>.t-ln:nth-child(3){border-top:1px solid #3a3a3a}
.t-cbox{width:max-content;max-width:100%;margin-bottom:calc(6 * var(--s));padding:calc(3 * var(--s)) 1ch;border:1px solid #555;border-radius:calc(6 * var(--s))}
.t-status{color:var(--d-faint)}
.t-amb{color:#f5c542}.t-amb2{color:#b8893a}
.t-hermes .t-strong .t-typed{font-weight:600;color:var(--d-text)}
/* The Hermes banner is dimmed so a third-party logo is not the loudest thing in the first scene. */
.t-banner{opacity:.6;margin:0 0 calc(6 * var(--s));font:400 calc(10 * var(--s))/1 var(--d-mono);letter-spacing:0;white-space:pre}
.t-banner span{display:block}
.t-b0{color:#ffd84d}.t-b1{color:#fcd34d}.t-b2{color:#f5c542}.t-b3{color:#e0a43a}.t-b4{color:#c98a35}
.t-hbox,.t-hpanel{position:relative;margin-top:calc(8 * var(--s));padding:calc(7 * var(--s)) 1ch calc(3 * var(--s));border:1px solid #c98a35;border-radius:calc(6 * var(--s))}
.t-hpanel{border-color:#f5c542}
.t-legend{position:absolute;left:1.5ch;top:-.65em;padding:0 .5ch;background:var(--d-ground);font-weight:600;color:#f5c542;line-height:1.2}
.d-log>.tui,.d-glog>.tui{height:100%}
.d-glog{white-space:normal}
.d-log{white-space:normal}

/* Phones: one focused surface per scenario, 360 design units wide so app text lands near 11-12px.
   Scenario 0 keeps the Codex pane of the grid, 1 the editor and its browser tab, 2 and 3 the wide rail.
   Sidebar, secondary panes, tab overflow and the pointer are dropped: the pointer targets hidden elements here. */
@media(max-width:767px){
  .demo-frame{width:calc(360 * var(--s));height:calc(620 * var(--s));font-size:min(1.05 * var(--size-font,16px),100cqw / 22.5);border-radius:12px}
  .demo-stage{width:calc(360 * var(--s));height:calc(620 * var(--s))}
  /* Four tabs wrap to a 2x2 grid: every tab stays on screen, no sideways scroll. */
  /* Phones: the tabs are one swipeable strip; the selected tab scrolls into view (demo.js). */
  .demo-tabs{width:100%;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .demo-tab{padding:0 .9em;scroll-snap-align:start}
  .d-side,.d-split,.d-compose,.d-statusbar,.d-crumbs,.d-title .d-iconbtn,.d-rail-strip,.d-cursor,.d-addwrap,.d-grid-toggle,.d-ph .d-x{display:none}
  .d-sessions,.d-rail{display:none}
  .d-editor{flex:1;width:auto}
  .demo-stage[data-layout=grid] .d-sessions{display:flex}
  .demo-stage[data-layout=wide] .d-rail{display:flex;flex:1;width:auto}
  .d-strip .d-tab:not([data-sel="1"]){display:none}
  /* Rail: drop the sections that only add height so the diff and the JSON response fit. */
  [data-d=panel-review] .d-rscroll>.d-rsec:first-child,[data-d=panel-solana] .is-note .d-subtle,[data-d=panel-solana] .d-rsec:nth-child(2) label:first-child,.d-meta-list>div:nth-child(2){display:none}
  /* Two agents stacked, so side by side still reads on a phone. */
  .d-grid{grid-template:1fr 1fr/1fr}
  .d-gpane:not([data-pane=codex]):not([data-pane=claude]){display:none}
}

/* Paused (offscreen, scrolling, static): spinners and blinks stop compositing too. */
.demo-stage[data-playing='false'] *, .demo-stage[data-playing='false'] *::before, .demo-stage[data-playing='false'] *::after { animation-play-state: paused !important; }