/* ══ TOKENS ═══════════════════════════════════════════════════════
   The palette, the type and the component shapes are the customer
   portal's: same accent, same surfaces, same 6px cards, same
   uppercase mono labels. Light is the same system in reverse.       */
:root{
  color-scheme: light dark;
  --accent:     #2563eb;
  --accent-dim: #1d4ed8;
  --accent-hi:  #2563eb;

  /* LIGHT */
  --bg:        #ffffff;
  --surface:   #f7f8fa;
  --surface-2: #f0f2f5;
  --border:    #e2e5ea;
  --text:      #0d0f12;
  --muted:     #64748b;
  --faint:     #8a94a3;
  --chip-bg:   #eff5ff;
  --chip-bd:   #c7dbfe;
  --chip-tx:   #1d4ed8;
  --grid-line: #edeff3;
  --nav-bg:    rgba(255,255,255,.84);
  --shadow:    0 1px 2px rgba(13,15,18,.05), 0 12px 30px rgba(13,15,18,.07);
  --hover:     rgba(13,15,18,.025);

  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --logo-sh:#0d0f18; --logo-sh1:.10; --logo-sh2:.14;
  --logo-warm:#a06c44; --logo-mid:#1c38a8; --logo-cool:#685aa0;
  --logo-b1:#2563eb;   --logo-b2:#685aa0; --logo-core:#1c38a8; --logo-glow:#4c68b0;
  --nav-h:64px;
  --maxw:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#3b82f6; --accent-dim:#1d4ed8; --accent-hi:#60a5fa;
    --bg:#0d0f12; --surface:#13161b; --surface-2:#0f1218; --border:#1e2229;
    --text:#e2e8f0; --muted:#64748b; --faint:#7c8798;
    --chip-bg:#0f1525; --chip-bd:#1a3050; --chip-tx:#60a5fa;
    --grid-line:#161a20; --nav-bg:rgba(13,15,18,.85);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.4);
    --hover:rgba(255,255,255,.02);
    --logo-sh:#000000; --logo-sh1:.24; --logo-sh2:.30;
    --logo-sh:#000000; --logo-sh1:.24; --logo-sh2:.30;
  --logo-warm:#e8a87c; --logo-mid:#eaf1ff; --logo-cool:#a898e8;
    --logo-b1:#3b82f6;   --logo-b2:#a898e8; --logo-core:#e8ecff; --logo-glow:#6888e8;
  }
}
:root[data-theme="dark"]{
  --accent:#3b82f6; --accent-dim:#1d4ed8; --accent-hi:#60a5fa;
  --bg:#0d0f12; --surface:#13161b; --surface-2:#0f1218; --border:#1e2229;
  --text:#e2e8f0; --muted:#64748b; --faint:#7c8798;
  --chip-bg:#0f1525; --chip-bd:#1a3050; --chip-tx:#60a5fa;
  --grid-line:#161a20; --nav-bg:rgba(13,15,18,.85);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.4);
  --hover:rgba(255,255,255,.02);
  --logo-warm:#e8a87c; --logo-mid:#eaf1ff; --logo-cool:#a898e8;
  --logo-b1:#3b82f6;   --logo-b2:#a898e8; --logo-core:#e8ecff; --logo-glow:#6888e8;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease}
a{color:inherit;text-decoration:none}
svg,img{display:block;max-width:100%}
::selection{background:var(--chip-bd);color:var(--text)}

/* ── shared ── */
.inner{max-width:var(--maxw);margin:0 auto;padding:0 5%}
section{padding:clamp(72px,8vw,112px) 0;border-top:1px solid var(--border)}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:.85rem}
h3{font-size:1.02rem}
.sub{font-size:1.02rem;color:var(--muted);max-width:600px;line-height:1.7}
.mono{font-family:var(--mono)}

/* ── nav ── */
nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:1.5rem;padding:0 5%;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);transition:background .2s,border-color .2s}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-txt{display:flex;flex-direction:column;justify-content:center}
.brand-txt .name{font-family:var(--mono);font-size:1rem;color:var(--accent);letter-spacing:.04em;
  line-height:1.15;white-space:nowrap}
.brand-txt .sub2{font-size:.66rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;
  margin-top:1px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{font-size:.87rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.04em;
  padding:.68rem 1.4rem;border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dim);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:.5rem 1.05rem}
.icon-btn{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:4px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--accent);color:var(--text)}
/* one icon at a time: it shows the theme the click will switch TO */
#theme .sun{display:none}#theme .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #theme .sun{display:block}
  :root:not([data-theme="light"]) #theme .moon{display:none}}
:root[data-theme="dark"] #theme .sun{display:block}
:root[data-theme="dark"] #theme .moon{display:none}
:root[data-theme="light"] #theme .sun{display:none}
:root[data-theme="light"] #theme .moon{display:block}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:480px){.brand-txt .sub2{display:none}}

/* ── hero ── */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 3.5rem) 5% 4.5rem;position:relative;overflow:hidden;
  border-top:0}
.grid-bg{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 38%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 68% 58% at 50% 38%,#000 35%,transparent 100%)}
.glow{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:620px;height:620px;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent) 0%,transparent 70%)}
.hero-in{position:relative;z-index:1;max-width:820px;width:100%}
.pill{display:inline-flex;align-items:center;gap:8px;padding:.3rem .8rem;border-radius:3px;
  background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-tx);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;margin-bottom:1.5rem;
  animation:up .5s ease both}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-hi)}
h1{font-size:clamp(2.4rem,5.6vw,3.9rem);letter-spacing:-.03em;line-height:1.08;
  animation:up .5s .08s ease both}
h1 span{color:var(--accent-hi)}
.hero-sub{font-size:clamp(1rem,1.8vw,1.14rem);color:var(--muted);max-width:620px;
  margin:1.15rem auto 2.2rem;line-height:1.72;animation:up .5s .16s ease both}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;animation:up .5s .24s ease both}
.hero-note{margin-top:2rem;font-family:var(--mono);font-size:.76rem;color:var(--faint);
  animation:up .5s .32s ease both}
.hero-note b{color:var(--accent-hi);font-weight:500}

/* the app window */
.frame{position:relative;z-index:1;width:100%;max-width:900px;margin:3.2rem auto 0;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;
  box-shadow:var(--shadow);text-align:left;animation:up .6s .4s ease both}
.frame-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--border)}
.dot3{width:9px;height:9px;border-radius:50%;background:var(--border);flex:0 0 9px}
.frame-title{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-left:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-state{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--accent-hi)}
.frame-canvas{background:var(--surface-2);padding:14px 10px}
.readout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.readout div{padding:.85rem 1.1rem;border-right:1px solid var(--border)}
.readout div:last-child{border-right:0}
.readout .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.readout .v{font-family:var(--mono);font-size:1.02rem;color:var(--text);margin-top:.35rem}
.readout .v.hi{color:var(--accent-hi)}
@media(max-width:560px){.readout{grid-template-columns:1fr;}
  .readout div{border-right:0;border-bottom:1px solid var(--border)}
  .readout div:last-child{border-bottom:0}}

@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.flow{stroke-dasharray:5 9;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.draw{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 2.2s ease-out .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── the reduction, played on a loop ──────────────────────────────
   One 13s timeline shared by every part, so the cursor, the marquee,
   the button and the two layers cannot drift out of step. Feature 1
   of the page, demonstrated instead of described.                   */
.layerA{animation:layerA 13s infinite}
.layerB{opacity:0;animation:layerB 13s infinite}
.selbox{opacity:0;animation:selbox 13s infinite}
.rbtn{opacity:0;transform-origin:291px 194px;animation:rbtn 13s infinite}
.cursor{opacity:0;animation:cursor 13s infinite}
.sel{animation:selstroke 13s infinite}

@keyframes layerA{
  0%,44%{opacity:1}          48%{opacity:0}
  85%{opacity:0}             89%,100%{opacity:1}}
@keyframes layerB{
  0%,44%{opacity:0}          48%{opacity:1}
  85%{opacity:1}             89%,100%{opacity:0}}
@keyframes selstroke{
  0%,26%{stroke:var(--border)} 30%,44%{stroke:var(--accent)}
  48%,100%{stroke:var(--border)}}
@keyframes selbox{
  0%,25%{opacity:0}          29%,44%{opacity:1}
  47%,100%{opacity:0}}
@keyframes rbtn{
  0%,31%{opacity:0;transform:scale(.94)}
  35%,39%{opacity:1;transform:scale(1)}
  41%{opacity:1;transform:scale(.93)}      /* the press */
  44%{opacity:1;transform:scale(1)}
  47%,100%{opacity:0;transform:scale(1)}}
@keyframes cursor{
  0%,17%   {opacity:0;transform:translate(524px,196px)}
  20%      {opacity:1;transform:translate(470px,170px)}
  27%,33%  {opacity:1;transform:translate(300px,96px)}   /* over the loop */
  39%,43%  {opacity:1;transform:translate(286px,186px)}  /* on the button */
  47%      {opacity:0;transform:translate(286px,186px)}
  100%     {opacity:0;transform:translate(524px,196px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw{stroke-dashoffset:0}html{scroll-behavior:auto}
  /* no cursor, no marquee, no button — just the diagram as drawn */
  .layerA{opacity:1}.layerB,.selbox,.rbtn,.cursor{opacity:0}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── cards, tables, panels — the portal's shapes ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:2.6rem}
.cards.feat{grid-template-columns:repeat(3,1fr)}
.cards.feat .card{padding:1.5rem}
.cards.feat h3{font-size:1rem;margin-bottom:.55rem}
.cards.feat p{font-size:.86rem}
/* The whole card is the link, so its title carries the accent. Nothing here
   underlines: the border, the lift and the title colour are the hover state. */
.cards.feat a{color:var(--accent-hi)}
@media(max-width:1000px){.cards.feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards.feat{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1.6rem;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-ico{width:38px;height:38px;border-radius:4px;display:grid;place-items:center;
  background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--accent-hi);margin-bottom:1rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.9rem;color:var(--muted);line-height:1.66}
.card .kicker{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.75rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:2.6rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1.3rem 1.5rem}
.stat .l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:.55rem}
.stat .v{font-family:var(--mono);font-size:1.6rem;color:var(--text);line-height:1}
.stat .v em{font-style:normal;color:var(--accent-hi)}
.stat .s{font-size:.78rem;color:var(--muted);margin-top:.4rem;line-height:1.5}

.tblwrap{margin-top:2.6rem;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:660px}
th{text-align:left;font-family:var(--mono);font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;padding:.85rem 1.1rem;border-bottom:1px solid var(--border);white-space:nowrap;
  font-weight:400}
td{padding:.8rem 1.1rem;border-bottom:1px solid var(--border);font-size:.86rem;color:var(--muted);
  vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover)}
td.first{font-family:var(--mono);color:var(--text);white-space:nowrap}
td code,code{font-family:var(--mono);font-size:.8rem;color:var(--text)}
.badge{display:inline-block;font-family:var(--mono);font-size:.68rem;padding:.15rem .45rem;
  border-radius:3px;letter-spacing:.04em;background:var(--chip-bg);border:1px solid var(--chip-bd);
  color:var(--chip-tx)}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.panel-cmd{padding:.75rem 1.1rem;border-bottom:1px solid var(--border);font-family:var(--mono);
  font-size:.76rem;color:var(--muted);word-break:break-word}
.panel-cmd .p{color:var(--accent-hi)}
.panel-out{padding:1.1rem;font-family:var(--mono);font-size:.8rem;line-height:1.8;color:var(--text);
  overflow-x:auto;white-space:pre;margin:0}
.panel-note{padding:.85rem 1.1rem;border-top:1px solid var(--border);font-size:.83rem;
  color:var(--muted);line-height:1.65}
.panel-note b{color:var(--text);font-weight:500}

.rows{list-style:none;margin-top:2.2rem}
.rows li{display:grid;grid-template-columns:132px 1fr;gap:1.1rem;padding:1rem 0;
  border-top:1px solid var(--border);align-items:baseline}
.rows li:last-child{border-bottom:1px solid var(--border)}
.rows .k{font-family:var(--mono);font-size:.78rem;color:var(--accent-hi);letter-spacing:.03em}
.rows .v{font-size:.92rem;color:var(--muted);line-height:1.65}
.rows .v b{color:var(--text);font-weight:500}
@media(max-width:520px){.rows li{grid-template-columns:1fr;gap:.35rem}}

/* four steps, so four columns — auto-fit left an orphan cell and a bare
   grid gap where a fifth would have been. */
.cells{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:2.6rem;background:var(--border);border:1px solid var(--border);border-radius:6px;
  overflow:hidden}
.cell{background:var(--bg);padding:1.7rem;transition:background .2s}
.cell:hover{background:var(--surface)}
@media(max-width:1000px){.cells{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cells{grid-template-columns:1fr}}
.cell .n{font-family:var(--mono);font-size:.72rem;color:var(--accent-hi);letter-spacing:.08em}
.cell h3{margin:.7rem 0 .5rem}
.cell p{font-size:.88rem;color:var(--muted);line-height:1.66}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.split>*{min-width:0}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.center{text-align:center;max-width:640px;margin:0 auto}
.center .sub{margin:0 auto}
.cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:2rem}

footer{border-top:1px solid var(--border);padding:2.2rem 0}
footer .inner{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer .f-brand{font-family:var(--mono);font-size:.86rem;color:var(--accent)}
footer a{font-size:.83rem;color:var(--muted);transition:color .2s}
footer a:hover{color:var(--text)}
footer .copy{font-size:.78rem;color:var(--faint);margin-left:auto}
@media(max-width:640px){footer .copy{margin-left:0;width:100%}}


/* ── features dropdown ─────────────────────────────────────────────
   Hover opens it on a pointer; click/Enter opens it for keyboard and
   touch, where hover never fires. Both drive the same [open] state.  */
.has-menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.87rem;
  color:var(--muted);background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.menu-btn:hover,.has-menu[open] .menu-btn{color:var(--text)}
.menu-btn svg{transition:transform .2s}
.has-menu[open] .menu-btn svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(560px,86vw);padding:10px;border-radius:6px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s,visibility .16s;z-index:120}
/* The panel floats 14px below the button. Crossing that gap, the pointer is
   over neither one, :hover drops and the menu closes before it can be reached.
   This transparent strip belongs to the menu, so hovering the gap keeps both
   the menu and its parent hovered. It inherits pointer-events:none while the
   menu is closed, so it never swallows a click on the page behind it. */
.menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-menu:hover .menu,.has-menu[open] .menu,.menu:hover,.menu:focus-within{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu a{display:block;padding:.5rem .65rem;border-radius:4px;color:var(--text);font-size:.84rem;
  line-height:1.35;transition:background .15s}
.menu a:hover{background:var(--surface-2)}
.menu a .mk{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.menu a[aria-current="page"]{background:var(--chip-bg);color:var(--chip-tx)}
@media(max-width:860px){.has-menu{display:none}}

/* a feature card is a link to its page */
a.card{display:block;color:inherit}
a.card:hover h3{color:var(--accent-hi)}
.card .more{display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;
  color:var(--accent-hi);letter-spacing:.04em;transition:transform .15s}
a.card:hover .more{transform:translateX(3px)}

/* ── feature page ── */
.page-head{padding:calc(var(--nav-h) + 3.2rem) 0 0;border-top:0}
.crumb{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--accent-hi)}
.page-head h1{font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.03em;animation:none}
.page-head .sub{margin-top:1rem;font-size:1.05rem;max-width:660px}
.page-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--border);margin-top:1rem}
.page-nav a{font-size:.87rem;color:var(--muted)}
.page-nav a:hover{color:var(--accent-hi)}
.prose h3{margin:2rem 0 .6rem}
.prose p{color:var(--muted);margin-bottom:.9rem;max-width:70ch}
.prose p b,.prose li b{color:var(--text);font-weight:500}
.prose ul{margin:0 0 1rem 1.1rem;color:var(--muted)}
.prose li{margin-bottom:.4rem;max-width:68ch}
.prose code{color:var(--text)}

.prose .panel-out{background:var(--surface);border:1px solid var(--border);border-radius:6px;
  margin:0 0 1.1rem;white-space:pre;overflow-x:auto}
.prose .cmt{color:var(--muted)}
.prose .tblwrap{margin:1.2rem 0 1.4rem}

/* ── application screenshots and clips ─────────────────────────────
   Every shot is captured twice, in the application's own Light and
   Dark themes, and the pair is swapped by the same rule the theme
   switch above uses: the media query is the system default, the
   [data-theme] rules are the reader's explicit choice.            */
.shot{margin:1.4rem 0 1.6rem}
.shot .frame{border:1px solid var(--border);border-radius:8px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);line-height:0}
.shot img,.shot video{width:100%;height:auto;display:block}
.shot figcaption{margin-top:.7rem;font-size:.82rem;color:var(--muted);max-width:70ch}
.shot figcaption b{color:var(--text);font-weight:500}
.shot .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.3rem}
.shot .themed-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .shot .themed-light{display:none}
  :root:not([data-theme="light"]) .shot .themed-dark{display:block}}
:root[data-theme="dark"] .shot .themed-light{display:none}
:root[data-theme="dark"] .shot .themed-dark{display:block}
:root[data-theme="light"] .shot .themed-light{display:block}
:root[data-theme="light"] .shot .themed-dark{display:none}

.page-head + section{padding-top:clamp(34px,4vw,52px)}
.prose > h3:first-child{margin-top:0}

/* ── target rows link to their page ── */
tr.rowlink{cursor:pointer}
tr.rowlink td.first a{color:var(--text)}
tr.rowlink:hover td.first a{color:var(--accent-hi)}
tr.rowlink:focus-within td{background:var(--hover)}

/* ── target page spec block ── */
/* Five facts in a four-column grid left a dead cell, so the fifth spans the
   row it starts. Deliberate, rather than a gap the reader has to explain. */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;
  margin:0 0 2rem}
.spec > div:last-child{grid-column:1/-1}
@media(max-width:980px){.spec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.spec{grid-template-columns:1fr}}
.spec > div{background:var(--bg);padding:1.1rem 1.2rem}
.spec .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.55rem}
.spec .v{margin:0;font-size:.88rem;color:var(--text)}
.spec .v code{font-size:.82rem;word-break:break-word}
.spec ul.files{list-style:none;margin:0;padding:0}
.spec ul.files li{font-family:var(--mono);font-size:.78rem;color:var(--text);
  margin-bottom:.3rem;word-break:break-word}

/* the targets menu holds short labels, so it needs less room than Features */
.menu-sm{width:min(380px,86vw)}
/* two dropdowns crowd the bar before the mobile breakpoint */
@media(max-width:1150px){.wide-only{display:none}}

/* ── generated-code samples on the target pages ───────────────────
   Each target page carries the same model's real export, so the
   blocks are long by design: cap them and let the box scroll rather
   than pushing "how it is checked" a screen and a half down.     */
.prose .fname{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--faint);margin:1.2rem 0 .4rem}
.prose pre.panel-out.long{max-height:30rem;overflow:auto;line-height:1.6}