/* ---------- type ---------- */
.mono{font-family:var(--f-mono)}
.label{font-family:var(--f-mono);font-size:var(--t-chrome);line-height:var(--t-chrome-lh);letter-spacing:0;color:var(--c-muted)}
.label--sm{font-size:var(--t-chrome)}
.h1{font-size:var(--h1);line-height:var(--h1lh)}
.h2{font-size:var(--h2);line-height:var(--h2lh)}
.h3{font-size:var(--h3);line-height:1.3}
.lede{font-size:var(--t-lede);line-height:var(--t-lede-lh);color:var(--c-muted);max-width:var(--t-measure)}
.prose{max-width:var(--t-measure)}
.prose p+p{margin-top:var(--s-md)}
.prose--muted{color:var(--c-muted)}
.serif{font-family:var(--f-serif);font-size:var(--serif);line-height:var(--seriflh);max-width:var(--t-measure-post)}
.serif p+p{margin-top:var(--s-md)}
.small{font-size:var(--t-small);line-height:var(--t-small-lh)}
.muted{color:var(--c-muted)}
.outline{display:inline-block;height:var(--oh, 1em);width:auto;fill:currentColor;overflow:visible;vertical-align:middle}
.outline-link{color:inherit;text-decoration:none}
.outline-link:hover{color:inherit;text-decoration:none;opacity:0.85}

/* ---------- chip: the one chip form on the site ---------- */
.chip{transition:border-color var(--m-leave) var(--m-ease),color var(--m-leave) var(--m-ease);display:inline-flex;align-items:center;justify-content:center;min-width:0;height:var(--l-chip-h);padding:0 var(--s-sm);border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--t-chrome);letter-spacing:0;color:var(--c-muted);line-height:1;white-space:nowrap;vertical-align:middle}
/* a placeholder chip is a pending fact, not a tag: dashed hairline */
.chip--tbd{min-width:0;padding-inline:var(--s-sm);border-style:dashed}
.chip--tag{min-width:0;border-color:color-mix(in srgb, currentColor 45%, transparent);color:inherit}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-xs)}

/* ---------- fixed chrome ----------
   The only chrome on the site: small tiles held at the top edge for the whole
   page, over translucent ground. Never a bar, never sticky-resized, never
   hidden or recoloured by scroll position. */
.chrome{position:fixed;top:var(--mt-chrome-inset-narrow);left:var(--mt-chrome-inset-narrow);right:var(--mt-chrome-inset-narrow);z-index:var(--z-header);display:flex;flex-wrap:wrap;gap:var(--l-tile-gap);align-items:flex-start;pointer-events:none}
.chrome>*{pointer-events:auto}
.chrome-tile{display:flex;align-items:center;gap:var(--s-sm);min-height:var(--l-chrome-h);padding:var(--s-xs) var(--mt-chrome-pad);background:var(--c-glass);border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--mt-tile-radius)}
.brand{color:var(--c-ink);margin-right:auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-2xs)}
.brand-link{display:inline-flex;align-items:center;gap:12px;color:var(--c-ink);text-decoration:none}
.brand-link:hover{color:var(--c-ink);text-decoration:none}
.brand .mark{height:var(--mark);width:auto;fill:currentColor;overflow:visible}
.brand .outline{--oh:var(--wm)}
.nav ul{display:flex;gap:var(--s-md);list-style:none;margin:0;padding:0;align-items:center}
.brand-line{color:var(--c-muted);font-size:var(--t-chrome);line-height:var(--t-chrome-lh);max-width:34ch}
@media (min-width:1000px){.brand{align-items:flex-start}.brand-line{display:block}}
.nav a{color:var(--c-muted);font-family:var(--f-mono);font-size:var(--t-chrome);text-decoration:none;transition:color var(--m-leave) var(--m-ease)}
.nav a:hover{color:var(--c-ink);text-decoration:none;transition-duration:var(--m-base)}
.nav a[aria-current="page"]{color:var(--c-ink)}
.theme{height:var(--l-chrome-h);padding:0 0 0 var(--s-md);border:0;background:none;color:var(--c-muted);font-family:var(--f-mono);font-size:var(--t-chrome);cursor:pointer;transition:color var(--m-leave) var(--m-ease)}
.theme:hover{color:var(--c-ink);transition-duration:var(--m-base)}
/* the page clears the fixed chrome */
/* the content starts clear of the fixed chrome and never runs under it */
:root{--chrome-clear:192px}
body{padding-top:var(--chrome-clear)}
@media (min-width:1000px){
  .chrome{top:var(--mt-chrome-inset);left:var(--mt-chrome-inset);right:var(--mt-chrome-inset);flex-wrap:nowrap}
  .chrome-tile{padding:var(--s-xs) var(--s-md)}
  .nav ul{gap:var(--s-lg)}
  :root{--chrome-clear:130px}
}
@media (max-width:calc(1000px - 1px)){
  .chrome .nav{order:3;width:100%;flex-wrap:wrap;justify-content:space-between;row-gap:8px}
  .chrome .nav ul{gap:var(--s-md);flex-wrap:wrap;order:2}
  .chrome .nav .pill{order:1;margin-left:0}
  .chrome .theme{order:3;padding-left:0}
}

/* ---------- the primary action ----------
   One control in three places: the chrome, the Home product tile, and the top
   of the Pulsar Hell page beside the price. It is the page's only filled
   control. Before launch it opens the notify panel in place. */
.pill{display:inline-flex;align-items:center;justify-content:center;height:var(--l-chip-h);padding:0 var(--s-md);border-radius:var(--r-pill);background:var(--c-brand);color:var(--c-brand-ink);font-family:var(--f-mono);font-size:var(--t-chrome);line-height:1;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:background var(--m-leave) var(--m-ease)}
.pill:hover{background:var(--c-brand-hover);color:var(--c-brand-ink);text-decoration:none;transition-duration:var(--m-base)}
.nav a.pill,.nav a.pill:hover{margin-left:var(--s-md);color:var(--c-brand-ink)}
.product-line .pill{margin-left:var(--s-sm)}
/* the catalogue's product line: wordmark, formats, price on one row */
.product-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-md);margin-bottom:var(--s-lg)}
.product-line .wm{line-height:0;margin-right:var(--s-xs)}
.product-line .wm .outline{--oh:var(--l-wordmark-head)}
.product-line .buy{display:inline-flex;align-items:center;gap:var(--s-xs);color:var(--c-muted);font-size:var(--t-chrome);margin-left:auto}
.product-line .price{color:var(--c-ink)}
.meta .pill{margin-left:var(--s-sm);vertical-align:middle}

/* the notify panel: the same form as the cart page, opened over the page */
.notify-dialog{width:min(420px,calc(100vw - 40px));padding:0;border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--mt-tile-radius);background:var(--c-well-solid);color:var(--c-ink)}
.notify-dialog::backdrop{background:color-mix(in srgb,var(--c-ground) 72%,transparent)}
.notify-panel{padding:var(--mt-tile-pad)}
.notify-lede{margin:0 0 var(--s-md);font-size:var(--t-chrome);line-height:var(--t-chrome-lh);color:var(--c-ink)}
.notify-panel .newsletter{padding-top:0;border-top:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "n" "r"}
.notify-close{margin-top:var(--s-lg);padding:0;border:0;background:none;color:var(--c-muted);font-family:var(--f-mono);font-size:var(--t-chrome);cursor:pointer;transition:color var(--m-leave) var(--m-ease)}
.notify-close:hover{color:var(--c-ink);transition-duration:var(--m-base)}

/* ---------- the intro lockup ----------
   The mark and the wordmark resolve over the loaded page and clear. It is
   added after load, so nothing about the page's paint waits on it; it plays
   once per session, any input skips it, and reduced motion never sees it. */
.intro{position:fixed;inset:0;z-index:var(--z-intro);display:grid;place-items:center;background:color-mix(in srgb,var(--c-ground) 78%,transparent);opacity:0;pointer-events:none;transition:opacity var(--m-intro-out) var(--m-ease)}
.intro[data-state="in"]{opacity:1;transition-duration:var(--m-intro-in)}
.intro-lockup{display:flex;align-items:center;gap:var(--s-lg);padding-inline:var(--s-pad)}
.intro-lockup .mark{height:clamp(30px,5vw,58px);width:auto;fill:var(--c-mark);overflow:visible;opacity:0;transition:opacity var(--m-intro-in) var(--m-ease)}
.intro-lockup .outline{--oh:clamp(26px,4.4vw,52px);opacity:0.18;transition:opacity var(--m-intro-in) var(--m-ease)}
.intro[data-state="in"] .intro-lockup .mark{opacity:1;transition-delay:180ms}
.intro[data-state="in"] .intro-lockup .outline{opacity:1}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--sec);padding-bottom:var(--s-2xl)}
.site-footer .rule{margin-bottom:var(--s-lg)}
.foot{display:grid;gap:var(--s-xs);font-size:var(--t-value);color:var(--c-muted)}
.foot a{color:var(--c-muted)}
.foot a:hover{color:var(--c-ink)}
@media (min-width:1000px){.foot{grid-template-columns:42% 1fr auto;gap:var(--gap)}.foot>:last-child{text-align:right}}

/* ---------- rules, sections, page head ---------- */
.rule{height:var(--b-hairline);background:var(--c-hairline)}
.section{position:relative}
.section .tile-head{padding-bottom:var(--s-md);border-bottom:var(--b-hairline) solid var(--c-hairline)}
.section .tile-head .num{color:var(--c-muted)}
/* one paragraph spacing inside every section; a figure or a pair takes two */
.section-body>*+*{margin-top:var(--s-md)}
.section-body>figure,.section-body>.beside,.section-body>.scope,.section-body>.gates,.section-body>.grains,.section-body>.crop-pair,.section-body>.refs,.section-body>.tabs{margin-top:var(--s-xl)}
.section-body>:first-child{margin-top:0}
.page-head{padding-top:var(--s-md);padding-bottom:var(--s-md)}
.page-head .label{display:block;margin-bottom:8px}
.page-head .h1{margin-bottom:var(--s-md)}
.page-head .wm{margin-bottom:var(--s-lg);line-height:0}
.page-head .wm .outline{--oh:var(--wm-head)}
.page-head .lede{margin-bottom:8px}
.page-head .gesture{margin-top:var(--s-lg)}
/* the index and the rail */
.index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px var(--s-md)}
@media (min-width:600px){.index ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.index ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.index a{display:flex;gap:var(--s-sm);align-items:baseline;min-height:32px;padding:var(--s-xs) 0;font-family:var(--f-mono);font-size:var(--t-chrome);color:var(--c-ink);text-decoration:none;transition:color var(--m-leave) var(--m-ease)}
.index a .n{color:var(--c-muted)}
.index a:hover{color:var(--c-brand);transition-duration:var(--m-base)}
.rail{display:none}
/* the rail is furniture in the margin: it appears only where the margin outside
   the content frame can hold it whole, and never sits over the frame */
@media (min-width:1660px){
  .js .rail{display:block;position:fixed;right:var(--mt-chrome-inset);top:var(--chrome-clear);width:var(--d-field-tile-narrow);z-index:var(--z-sticky);padding:var(--s-md);border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--mt-tile-radius);background:var(--c-glass)}
  .rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2xs)}
  .rail a{display:block;padding:var(--s-2xs) 0;font-family:var(--f-mono);font-size:var(--t-chrome);line-height:1;color:var(--c-muted);text-decoration:none;transition:color var(--m-leave) var(--m-ease)}
  .rail a:hover,.rail a[aria-current="true"]{color:var(--c-ink);transition-duration:var(--m-base)}
  .rail a[aria-current="true"]{color:var(--c-brand)}
}
/* ---------- metadata rows ----------
   One row everywhere on the site: the icon, a 12 px gap, then the label with
   the value directly under it. Label and value share one left edge; nothing
   touches the icon. */
.metas{list-style:none;margin:0;padding:0;max-width:var(--mw, none)}
.meta{display:grid;grid-template-columns:var(--l-icon) minmax(0,1fr);column-gap:var(--s-sm);row-gap:var(--s-2xs);padding-block:var(--s-sm);border-bottom:var(--b-hairline) solid var(--c-hairline)}
.meta .icon{grid-column:1;grid-row:1 / span 2;align-self:start;width:var(--l-icon);height:var(--l-icon);color:var(--c-brand)}
.meta .k{grid-column:2;font-family:var(--f-mono);font-size:var(--t-chrome);letter-spacing:0;color:var(--c-muted);line-height:var(--t-chrome-lh)}
.meta .v{grid-column:2;font-size:var(--t-chrome);line-height:var(--t-chrome-lh);color:var(--c-ink);overflow-wrap:anywhere}
/* a row without an icon keeps the same structure, one column narrower */
.meta--note{grid-template-columns:minmax(0,1fr)}
.meta--note .k,.meta--note .v{grid-column:1}
/* three facts as one row of three columns; one column on phones */
.metas--3{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s-xl)}
@media (min-width:600px){.metas--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.beside-copy .meta .icon{display:none}
.beside-copy .meta,.beside-copy .meta--note{grid-template-columns:minmax(0,1fr)}
.beside-copy .meta .k,.beside-copy .meta .v{grid-column:1}

/* ---------- spec table ---------- */
.spec{width:100%;border-top:var(--b-hairline) solid var(--c-hairline)}
table{border-collapse:collapse}
th,td{padding:0}
.spec th,.spec td{text-align:left;vertical-align:top;border-bottom:var(--b-hairline) solid var(--c-hairline)}
.spec th{font-family:var(--f-mono);font-size:var(--t-label-sm);font-weight:var(--fw-regular);letter-spacing:var(--t-tracking-label-md);text-transform:uppercase;color:var(--c-muted)}
.spec tr{display:grid;padding:var(--s-xs) 0 var(--s-sm)}
.spec th{padding-bottom:var(--s-2xs);border:0}
.spec td{font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--c-ink);border:0}
.spec tr{border-bottom:var(--b-hairline) solid var(--c-hairline)}
@media (min-width:1000px){
  .spec tr{display:table-row;padding:0;border:0}
  .spec th{width:var(--l-spec-key-w);height:var(--l-spec-row-h);font-size:var(--t-table);letter-spacing:var(--t-tracking-label-sm);padding:0;vertical-align:middle;border-bottom:var(--b-hairline) solid var(--c-hairline)}
  .spec td{height:var(--l-spec-row-h);padding:0;vertical-align:middle;border-bottom:var(--b-hairline) solid var(--c-hairline)}
}

/* ---------- two text columns ---------- */
.cols{display:grid;gap:var(--s-sm);grid-template-columns:minmax(0,1fr)}
.cols .b{color:var(--c-ink)}
@media (min-width:1000px){.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}

/* ---------- cards ---------- */
.cards{display:grid;gap:var(--s-sm);grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0}
.card{display:grid;grid-template-rows:auto auto 1fr;min-height:var(--l-card-h);padding:24px}
.card .h3{margin-bottom:var(--s-xs)}
/* inside a tile a card is one hairline frame, not a second fill */
.tile .card.surface{background:none}
.card .note{font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--c-muted)}
.card .card-foot{align-self:end;padding-top:var(--s-md)}
.card--pack{grid-template-rows:auto auto auto 1fr;min-height:var(--l-pack-h)}
.card--pack .plot{height:80px;margin-bottom:var(--s-lg)}
.card .card-link{color:var(--c-ink);text-decoration:none}
.card .card-link::after{content:"";position:absolute;inset:0}
.card{transition:box-shadow var(--m-leave) var(--m-ease),background-color var(--m-leave) var(--m-ease)}
/* hover is a quiet material change (hairline, lift, title); the green ring is focus only */
.card:has(.card-link:hover){transition-duration:var(--m-base)}
.card:has(.card-link:hover) .card-link{color:var(--c-brand)}
.card .card-link{transition:color var(--m-leave) var(--m-ease)}
@media (min-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.cards:has(> :only-child){grid-template-columns:minmax(0,1fr)}.card--pack:only-child{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--gap);min-height:0}.card--pack:only-child .plot{grid-column:2;grid-row:1 / span 3;height:120px;margin:0;align-self:center}.card--pack:only-child .card-foot{padding-top:var(--s-sm)}}

/* ---------- window figure (SVG render) ----------
   Every render sits in the window's own frame: a hairline in the window's edge
   colour at the window's 6 px radius, hugging the render with no padding, so
   top bar, panels and mixer read as one object (Web v2). The render is never
   cropped, masked, filtered or re-coloured; it scales down proportionally to
   fit its frame and stays crisp, being vector. Nothing scrolls sideways. */
.crop-frame,.instrument-frame{
  width:fit-content;max-width:100%;margin-inline:auto;padding:0;background:none;
  border:var(--b-hairline) solid var(--c-window-edge);border-radius:var(--mt-window-radius);
  overflow:hidden;box-shadow:none;line-height:0}
/* max-width and height:auto only: the width and height attributes still size the
   box before the file lands, so a lazy render never shifts the page */
.crop-frame img,.instrument-frame img{
  display:block;max-width:100%;height:auto}
/* onward links carry a direction; the arrow is joined to the last word by a
   no-break space in the markup (see on_link), so it can never wrap alone */
.on .dir{white-space:nowrap}
/* the field echoed at chrome scale: a row of units above the footer rule */
.field-row{display:inline-block;vertical-align:-1px;height:10px;width:auto;margin-right:var(--s-md);color:var(--c-ink);overflow:visible}
.field-row .u{fill:currentColor}
.field-row .t{fill:var(--c-trace)}
@media (min-width:1000px){
}

/* ---------- figures in the house diagram language ---------- */
.fig{padding:var(--s-md);overflow:hidden}
.fig .plot{height:74px}
.fig figcaption{margin-top:var(--s-md);font-family:var(--f-mono);font-size:var(--t-table);color:var(--c-muted);line-height:20px}
@media (min-width:1000px){.fig{padding:var(--s-lg)}.fig .plot{height:144px}}
.plot svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- region crops from the SVG set ---------- */
.crop{margin:0}
/* renders scale down proportionally to fit their column; the whole render is
   visible at every width. The one exception is the train column on phones,
   which holds 1:1 in a tile that bleeds to the screen's edges. */
.crop figcaption{margin-top:var(--s-md);font-family:var(--f-mono);font-size:var(--t-label);color:var(--c-muted);line-height:20px}
@media (max-width:calc(1000px - 1px)){
  .tabs-list.is-overflowing{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
}
/* one caption position for every figure on the page: left, under the figure */
.crop figcaption,.window figcaption{text-align:left}
/* the one render that does not scale: the train column holds 1:1 on phones, so
   its frame bleeds through the tile's padding to the page's own margin */
@media (max-width:calc(600px - 1px)){
  /* the figure bleeds through the tile's padding; the frame stays centred in it
     and the caption is pushed back to the text's own left edge */
  .crop--train,.page-head .instrument{margin-inline:calc(-1 * var(--s-md))}
  .crop--train .crop-frame,.page-head .instrument-frame{max-width:none}
  .crop--train figcaption,.page-head .instrument figcaption{padding-inline:var(--s-md)}
}
.crop-pair{display:grid;gap:var(--s-lg);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:600px){.crop-pair{column-gap:var(--l-gutter)}}
.beside{display:grid;gap:var(--s-lg);grid-template-columns:minmax(0,1fr);align-items:start}
.beside-fig{min-width:0}
.beside-copy{display:grid;gap:var(--s-md);align-content:start;min-width:0}
.beside-copy .b{color:var(--c-ink)}
.beside-copy .metas{margin-top:var(--s-xs)}
/* a render beside its copy from the md breakpoint: the copy column takes what is left; below that the pair stacks */
.beside{margin-top:var(--s-md)}
.beside+*{margin-top:var(--s-xl)!important}
.beside-copy>:last-child{margin-bottom:0}
/* the render's stage is sized to the copy: taller renders are cut at the column's foot under a fade */
@media (min-width:1000px){
  .beside{align-items:start}
  /* site.js sets --pair-h to the copy column's height; the render scales to fit it (never below pair-min) */
}
/* the doc grid: render beside copy only where both fit at their own widths; the
   columns shrink before anything clips, and below that width the pair stacks.
   The copy starts at the top of its render. */
@media (min-width:1120px){
  .beside{grid-template-columns:minmax(0,var(--l-render-col)) minmax(0,var(--l-text-col));column-gap:var(--s-xl);align-items:start}
  .beside--right .beside-fig{order:2}
  .beside--right{grid-template-columns:minmax(0,var(--l-text-col)) minmax(0,var(--l-render-col))}
}
@media (min-width:600px){.crop-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- subheads, steps ---------- */
.sub{margin-top:var(--s-lg)}
.sub+.prose{margin-top:var(--s-sm)}
/* the not-yet statement: the four unknown facts on one line, a chip each */
.not-yet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-md);margin:0 0 var(--s-md);font-family:var(--f-mono);font-size:var(--t-label-sm);letter-spacing:var(--t-tracking-label);text-transform:uppercase;color:var(--c-muted)}
.not-yet .fact{display:inline-flex;align-items:center;gap:var(--s-sm);white-space:nowrap}
.nowrap{white-space:nowrap}
@media (max-width:calc(1000px - 1px)){.not-yet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.steps{margin:0;padding-left:var(--s-lg);color:var(--c-muted)}
.steps li+li{margin-top:4px}

/* ---------- reference grids ---------- */
.ref .sub{margin-bottom:var(--s-sm)}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--s-xs);margin:0;padding:0;list-style:none}
/* three columns from md: the nine-item grids fill their rows */
@media (min-width:1000px){.ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref-grid li{display:flex;align-items:center;gap:var(--s-sm);padding:var(--s-md);border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--r-sm);min-width:0;transition:background var(--m-leave) var(--m-ease)}
.ref-grid li:hover{background:var(--c-wash);transition-duration:var(--m-base)}
.ref-grid .icon{flex:none;width:var(--l-icon);height:var(--l-icon);color:var(--c-brand)}
.rg-text{display:grid;min-width:0}
.rg-name{color:var(--c-ink);font-size:var(--t-small);font-weight:var(--fw-medium);line-height:var(--t-small-lh)}
.rg-desc{color:var(--c-muted);font-size:var(--t-value);line-height:17px}

/* ---------- tabs ---------- */
/* the viewer's tabs use the sub-nav's form: mono labels on a hairline, the selected one in ink with a brand rule */
.tabs-list{display:flex;flex-wrap:wrap;gap:0 var(--s-lg);margin-bottom:var(--s-md);border-bottom:var(--b-hairline) solid var(--c-hairline)}
.tab{position:relative;display:inline-flex;align-items:center;height:var(--l-control-h-sm);padding:0;border:0;background:transparent;color:var(--c-muted);font-family:var(--f-mono);font-size:var(--t-table);letter-spacing:var(--t-tracking-label-sm);text-transform:uppercase;cursor:pointer}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--b-hairline);background:var(--c-brand);transform:scaleX(0);transform-origin:left;transition:transform var(--m-leave) var(--m-ease)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:hover{color:var(--c-ink);transition-duration:var(--m-base)}
.tab[aria-selected="true"]:hover::after{background:var(--c-brand)}
.tab{transition:color var(--m-leave) var(--m-ease),border-color var(--m-leave) var(--m-ease)}
.tab:hover{color:var(--c-ink);border-color:var(--c-hairline-strong);transition-duration:var(--m-base)}
.tab[aria-selected="true"]{color:var(--c-ink)}
.tab-panel[hidden]{display:none}
.no-js .tab-panel[hidden]{display:block}
.no-js .tabs-list{display:none}
.no-js .tab-panel+.tab-panel{margin-top:var(--s-lg)}
/* the full-window frame takes the column at every width, so its box exists before the render loads */

/* ---------- typographic field ---------- */
.field{height:var(--field-h);border-radius:var(--r-sm);overflow:hidden}
.field canvas{display:block;width:100%;height:100%}
.js .field-mask{display:none}
.no-js .field canvas{display:none}
.field-mask{width:100%;height:100%;background:var(--c-ink);-webkit-mask-image:var(--mask-narrow);mask-image:var(--mask-narrow);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:right center;mask-position:right center}
.field-mask--word{-webkit-mask-position:left top;mask-position:left top}
@media (min-width:1000px){.field-mask{-webkit-mask-image:var(--mask-wide);mask-image:var(--mask-wide)}}

/* ---------- newsletter ---------- */
.newsletter{display:grid;gap:var(--s-sm);grid-template-areas:"t" "n" "r";align-items:center;padding:var(--s-lg) 0 0;border-top:var(--b-hairline) solid var(--c-hairline)}
.newsletter .t{grid-area:t;font-size:var(--h3);line-height:1.3}
.newsletter .nl-note{grid-area:n;color:var(--c-muted);font-size:var(--t-chrome);line-height:var(--t-chrome-lh)}
.newsletter .nl-row{grid-area:r;display:flex;gap:var(--s-sm);align-items:center}
.newsletter .inp{height:34px;padding:0 12px;border:var(--b-hairline) solid var(--c-hairline);border-radius:var(--r-sm);background:var(--c-well);color:var(--c-ink);font-size:var(--t-value);width:100%;font-family:inherit;transition:border-color var(--m-leave) var(--m-ease),background-color var(--m-leave) var(--m-ease),box-shadow var(--m-leave) var(--m-ease)}
.newsletter .inp:hover{border-color:var(--c-hairline-strong);transition-duration:var(--m-base)}
.newsletter .inp::placeholder{color:var(--c-muted)}
.newsletter .inp:focus-visible{border-color:var(--c-brand)}
.newsletter .btn{white-space:nowrap;flex:none}
@media (min-width:1000px){.newsletter{grid-template-columns:minmax(0,1fr) minmax(320px,420px);grid-template-areas:"t r" "n r";column-gap:var(--s-xl)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--l-control-h-sm);padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--c-brand);color:var(--c-brand-ink);font-size:var(--t-value);text-decoration:none;cursor:pointer}
.btn{transition:background var(--m-leave) var(--m-ease),color var(--m-leave) var(--m-ease)}
.btn:hover{background:var(--c-brand-hover);color:var(--c-brand-ink);text-decoration:none;transition-duration:var(--m-base)}
.btn--lg{height:var(--l-control-h);font-size:var(--t-small);width:100%}
/* A pending control is not a call to action: hairline and muted, no brand fill. */
.btn--pending{background:transparent;color:var(--c-muted);opacity:0.55;box-shadow:inset 0 0 0 var(--b-hairline) var(--c-hairline-strong);cursor:not-allowed}
.btn--pending:hover{background:transparent;color:var(--c-muted);transform:none;box-shadow:inset 0 0 0 var(--b-hairline) var(--c-hairline-strong)}
@media (min-width:1000px){.btn--lg{width:260px}}
.pending{display:inline-flex;align-items:center;gap:var(--s-sm);flex-wrap:wrap}

/* ---------- product sub-nav ---------- */
.js.scrolled-md .subnav-wrap{top:var(--l-header-h-scrolled)}
/* when the stops overflow the bar scrolls sideways and fades at its right edge */
.tabs-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs-list::-webkit-scrollbar{display:none}
.tab{flex:none}
@media (min-width:1000px){.subnav-wrap{height:var(--l-subnav-h)}.subnav ol{gap:0}.subnav a{width:118px}}
/* phones: the header collapses to its brand row once scrolled; the sub-nav follows */
@media (max-width:calc(1000px - 1px)){
  .site-header[data-scrolled]{height:var(--l-header-h-scrolled-narrow)}
  .site-header[data-scrolled] .nav,.site-header[data-scrolled] .theme{display:none}
  .site-header[data-scrolled] .brand{padding-top:0;align-self:center}
  .js.scrolled-narrow .subnav-wrap{top:var(--l-header-h-scrolled-narrow)}
  .js.scrolled-narrow .edge-strip{top:calc(var(--l-header-h-scrolled-narrow) + var(--l-subnav-h-narrow))}
}
/* the interactives' switches acknowledge the pointer like the sliders do */
.switch{transition:box-shadow var(--m-leave) var(--m-ease)}
.switch:hover{box-shadow:0 0 0 var(--mt-focus-ring-w) var(--c-focus-ring);transition-duration:var(--m-base)}
.doc-section{scroll-margin-top:calc(var(--hh) + var(--l-subnav-h))}

/* ---------- FAQ ---------- */
.faq .a code{overflow-wrap:anywhere}

/* ---------- manuals table ---------- */
.mtable{width:100%}
.mtable th{font-family:var(--f-mono);font-size:var(--t-label-sm);font-weight:var(--fw-regular);letter-spacing:var(--t-tracking-label-md);text-transform:uppercase;color:var(--c-muted);text-align:left;height:28px;border-bottom:var(--b-hairline) solid var(--c-hairline)}
.mtable td{height:52px;border-bottom:var(--b-hairline) solid var(--c-hairline);vertical-align:middle;color:var(--c-muted);font-size:var(--t-small)}
.mtable td:first-child{color:var(--c-ink);font-size:var(--body)}
.mtable .mono{font-family:var(--f-mono)}
.mtable th:nth-child(1),.mtable td:nth-child(1){width:300px}
.mtable th:nth-child(2),.mtable td:nth-child(2){width:180px}
.mtable th:nth-child(3),.mtable td:nth-child(3){width:220px}

/* ---------- objects that are already tiles: one radius, one hairline ---------- */
.scope,.gates,.grains{border-radius:var(--mt-tile-radius)}
.tile .post-title{font-size:var(--t-h2-post);line-height:var(--t-h2-post-lh);margin-bottom:var(--s-md);max-width:20ch}
.tile .prose{max-width:60ch}
.tile .metas{max-width:none}
@media (max-width:calc(1000px - 1px)){.tile .post-title{font-size:var(--h2);line-height:var(--h2lh)}}

/* ---------- the instrument ----------
   The whole window in its own frame, scaled to the frame it is given. On
   phones the train column holds 1:1 and its tile bleeds to the screen edges,
   which is the one place a render is not free to scale. */
.instrument{margin:0}
@media (max-width:calc(1000px - 1px)){
  .tile--instrument{margin-inline:calc(-1 * var(--s-pad-narrow));padding-inline:0;border-inline:0;border-radius:0}
  .tile--instrument .tile-head,.tile--instrument .hero-line,.tile--instrument figcaption{padding-inline:var(--s-pad-narrow)}
  .tile--instrument .instrument-frame{max-width:none}
}
@media (min-width:1440px){
  .tile--span-mid{grid-column:auto}
}
.instrument picture{display:block;line-height:0}
.instrument figcaption{margin-top:var(--s-md);color:var(--c-muted);font-size:var(--t-chrome);line-height:var(--t-chrome-lh)}
.instrument .cap-wide{display:none}
@media (min-width:1000px){.instrument .cap-wide{display:inline}.instrument .cap-narrow{display:none}}
/* the hero line above the window: what it is, what it costs, how to order it */
.hero-line{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-md);margin-bottom:var(--s-lg)}
.hero-line .wm{display:block;line-height:0;margin-bottom:var(--s-sm)}
.hero-line .wm .outline{--oh:var(--l-wordmark-head)}
.hero-line .one{color:var(--c-muted);font-size:var(--t-chrome);line-height:var(--t-chrome-lh);max-width:56ch;margin:0}
.hero-buy{display:flex;align-items:center;gap:var(--s-md)}
.hero-line .spec,.page-head .spec{margin:var(--s-sm) 0 0;font-family:var(--f-mono);font-size:var(--t-chrome);line-height:var(--t-chrome-lh);color:var(--c-muted)}
.hero-line .price,.page-head .price{color:var(--c-ink)}
.head-line{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-md)}
@media (min-width:1024px){.head-line{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s-xl)}}
@media (min-width:1024px){
  .hero-line{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s-xl)}
  .hero-buy{justify-content:flex-end}
}

}

/* ---------- news ---------- */
.post-head{padding-top:var(--head-top)}
.post-head .label{margin-bottom:8px}
.post-head .h1{margin-bottom:var(--s-md)}
.post-body{margin-top:var(--s-2xl)}
.post-body .fig{margin:var(--s-sm) 0 var(--s-xl)}

/* ---------- 404 ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
/* ---------- pulsar train illustration ---------- */
.strip{position:relative;height:clamp(3.5rem, 2rem + 5vw, 6rem);margin-block:var(--s-2xl) var(--s-lg);overflow:hidden}
.strip canvas{width:100%;height:100%}
.scope{margin:0;border:var(--b-hairline) solid var(--c-border);border-radius:var(--r-md);background:var(--c-inset);overflow:hidden}
.scope-screen{position:relative;height:clamp(10rem, 7rem + 10vw, 15rem);padding:var(--s-md);border-bottom:var(--b-hairline) solid var(--c-border)}
.scope-screen canvas{width:100%;height:100%}
.scope-controls{display:grid;gap:var(--s-lg);padding:var(--s-md);grid-template-columns:1fr}
.scope-readout{display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-lg);padding:var(--s-md);border-top:var(--b-hairline) solid var(--c-border);font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--t-tracking-label);text-transform:uppercase;color:var(--c-text)}
.scope-readout b{font-weight:var(--fw-regular);color:var(--c-text-strong)}
.scope figcaption{padding:var(--s-md);border-top:var(--b-hairline) solid var(--c-border);font-size:var(--t-small);color:var(--c-text)}
@media (min-width:600px){.scope-controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slider{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s-2xs) var(--s-sm)}
.slider label{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--t-tracking-label);text-transform:uppercase;color:var(--c-text)}
.slider output{justify-self:end;font-family:var(--f-mono);font-size:var(--t-small);color:var(--c-text-strong)}
.slider input{grid-column:1 / -1;width:100%}
input[type="range"]{-webkit-appearance:none;appearance:none;height:var(--l-control-h-sm);margin:0;background:transparent;cursor:pointer;--fill:50%}
input[type="range"]::-webkit-slider-runnable-track{height:var(--b-strong);border-radius:var(--r-pill);background:linear-gradient(to right,var(--c-accent) 0 var(--fill),var(--c-face) var(--fill) 100%)}
input[type="range"]::-moz-range-track{height:var(--b-strong);border-radius:var(--r-pill);background:var(--c-face)}
input[type="range"]::-moz-range-progress{height:var(--b-strong);border-radius:var(--r-pill);background:var(--c-accent)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--s-md);height:var(--s-md);margin-top:calc((var(--b-strong) - var(--s-md)) / 2);border:0;border-radius:50%;background:var(--c-text-strong)}
input[type="range"]::-moz-range-thumb{width:var(--s-md);height:var(--s-md);border:0;border-radius:50%;background:var(--c-text-strong)}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--b-focus-offset) var(--c-canvas),0 0 0 calc(var(--b-focus-offset) + var(--b-focus)) var(--c-accent)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--b-focus-offset) var(--c-canvas),0 0 0 calc(var(--b-focus-offset) + var(--b-focus)) var(--c-accent)}

/* ---------- masking gates interactive ---------- */
.gates-screen{padding:var(--s-md);border-bottom:var(--b-hairline) solid var(--c-border)}
.gates-ticks{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:var(--s-3xs);height:clamp(3rem, 2rem + 4vw, 4.5rem);border-bottom:var(--b-hairline) solid var(--c-border-strong)}
.tick{position:relative;min-width:0}
.tick::before,.tick::after{content:"";position:absolute;left:50%;top:15%;bottom:0;width:var(--b-strong);margin-left:calc(-0.5 * var(--b-strong));background:var(--c-face);border-radius:var(--r-pill)}
.tick::after{display:none}
.tick[data-state="pass"]::before{background:var(--c-accent);top:0}
.tick[data-state="prob"]::before,.tick[data-state="rest"]::before,.tick[data-state="sieve"]::before,.tick[data-state="prob"]::after,.tick[data-state="rest"]::after,.tick[data-state="sieve"]::after{display:block;top:calc(50% - 0.4rem);bottom:calc(50% - 0.4rem);background:var(--c-orange);transform:rotate(45deg)}
.tick[data-state="prob"]::after,.tick[data-state="rest"]::after,.tick[data-state="sieve"]::after{transform:rotate(-45deg)}
.gates-sieve{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-md);padding:var(--s-md);border-top:var(--b-hairline) solid var(--c-border)}
.gates-sieve-label{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--t-tracking-label);text-transform:uppercase;color:var(--c-text)}
.gates-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:var(--s-3xs)}
.step{height:var(--l-control-h-sm);min-width:0;padding:0;border:var(--b-hairline) solid var(--c-border);border-radius:var(--r-xs);background:var(--c-panel);cursor:pointer;transition:background var(--m-fast) var(--m-ease-out)}
.step[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent)}
.step:hover{border-color:var(--c-border-strong)}
.gates[data-sieve-off] .step[aria-pressed="true"]{background:var(--c-face);border-color:var(--c-face)}
.switch{display:grid;min-width:3.5rem;height:var(--l-control-h-sm);padding:0 var(--s-sm);border:var(--b-hairline) solid var(--c-border-strong);border-radius:var(--r-sm);background:var(--c-accent);color:var(--c-accent-ink);font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--t-tracking-label);text-transform:uppercase;cursor:pointer}
.switch>span{grid-area:1 / 1;align-self:center}
.switch .switch-off{display:none}
.switch[aria-pressed="false"]{background:var(--c-face);color:var(--c-text-strong);border-color:var(--c-face)}
.switch[aria-pressed="false"] .switch-on{display:none}
.switch[aria-pressed="false"] .switch-off{display:block}
@media (max-width:599.98px){.gates-sieve{grid-template-columns:auto auto;grid-template-areas:"label switch" "steps steps"}.gates-sieve-label{grid-area:label}.gates-steps{grid-area:steps}.switch{grid-area:switch;justify-self:end}.gates-steps{grid-template-columns:repeat(8,minmax(0,1fr))}}

/* ---------- three groups interactive ---------- */
.grains-screen{height:clamp(14rem, 10rem + 14vw, 22rem)}
.grains-controls{display:grid;gap:var(--s-md);padding:var(--s-md)}
.grains-group{display:grid;gap:var(--s-md);align-items:center;grid-template-columns:1fr;padding-top:var(--s-sm);border-top:var(--b-hairline) solid var(--c-border)}
.grains-group:first-child{border-top:0;padding-top:0}
.grains-label{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--t-tracking-label);text-transform:uppercase;color:var(--c-text-strong)}
@media (min-width:600px){.grains-group{grid-template-columns:5rem repeat(3,minmax(0,1fr))}}


/* v3 material on the interactives, applied from the chassis; their own stylesheet is unchanged */
.scope{position:relative;box-shadow:inset 0 0 0 var(--b-hairline) var(--c-hairline);border-color:transparent}
/* slider thumbs acknowledge the pointer: a brand-light ring, then the press */
input[type="range"]::-webkit-slider-thumb{transition:box-shadow var(--m-leave) var(--m-ease)}
input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 0 0 var(--mt-focus-ring-w) var(--c-focus-ring);transition-duration:var(--m-base)}
input[type="range"]:hover::-moz-range-thumb{box-shadow:0 0 0 var(--mt-focus-ring-w) var(--c-focus-ring)}

/* ================================================================ Web v5 phase 2:
   the doc grid and its blocks, transcribed from tools/v5_pages.py */
.d-page{--d-col:calc((100% - 3 * var(--v5-gutter)) / 4)}
.d-head h1{margin-top:20px}
/* a head without a lede keeps the 20 below its title */
.d-head:not(:has(.d-lede)){padding-bottom:20px}
.d-head .d-lede{margin-top:20px;color:var(--v5-muted)}
.d-crumb{margin-bottom:24px}
.d-crumb a{color:inherit;text-decoration:none}
.d-crumb a:hover{color:var(--v5-ink)}
.d-head{padding-top:48px}
.d-head+*{margin-top:56px}
.d-sec+.d-sec,.d-gap{margin-top:80px}
.d-row{display:block}
.d-title{margin-bottom:24px}
.d-body{min-width:0}
.d-measure,.d-p,.d-h3,.d-bnote,.d-bkv,.d-bnotify,.d-bsteps,.d-bpeople{max-width:100%}
@media (min-width:1024px){
  .d-head{padding-top:96px}
  .d-head>*{max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 7 + 6 * var(--v5-gutter))}
  .d-crumb{margin-bottom:32px;max-width:none!important}
  .d-head+*{margin-top:96px}
  .d-sec+.d-sec,.d-gap{margin-top:120px}
  .d-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--v5-gutter);align-items:start}
  .d-title{grid-column:1 / span 3;margin-bottom:0}
  .d-body{grid-column:5 / span 8}
  /* running text is held to six of the body's eight columns */
  .d-p,.d-h3,.d-bnote,.d-bkv,.d-bnotify,.d-bsteps,.d-bpeople,.d-blink,.d-btbd{
    max-width:calc((100% - 7 * var(--v5-gutter)) / 8 * 6 + 5 * var(--v5-gutter))}
}
/* block gaps: the space before a block depends on the block */
.d-body>.d-b{margin-top:20px}
.d-body>.d-b:first-child{margin-top:0}
.d-body>.d-p{margin-top:16px}
.d-body>.d-h3{margin-top:40px}
.d-body>.d-bnote{margin-top:28px}
.d-body>.d-bfig,.d-body>.d-bwidget,.d-body>.d-btabs{margin-top:36px}
.d-body>.d-bgrid{margin-top:20px}
.d-body>.d-bsteps,.d-body>.d-btable,.d-body>.d-bkv,.d-body>.d-bpeople{margin-top:24px}
.d-body>.d-bcta{margin-top:28px}
.d-body>.d-bnotify{margin-top:48px}
.d-body>.d-blink{margin-top:20px}
.d-body>.d-btbd{margin-top:16px}
.d-body>.d-b:first-child{margin-top:0}
.d-p{color:var(--v5-ink)}
.d-p2{color:var(--v5-muted)}
.d-inline{color:var(--v5-accent);text-decoration:none}
.d-inline:hover{text-decoration:underline}
.d-link{display:inline-block}

/* chips and tags: 24 high, a 12 px radius, mono 14 inside a 10 px inset */
.d-chip,.d-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;
  border:1px solid var(--v5-line-strong);font-family:"DM Mono",ui-monospace,monospace;font-size:14px;
  line-height:20px;color:var(--v5-muted);white-space:nowrap;vertical-align:top}
.d-tag--accent{border-color:var(--v5-accent);color:var(--v5-accent)}
.d-tag--ink{color:var(--v5-ink)}
.d-tag--fill{border-color:var(--v5-accent);background:var(--v5-accent);color:var(--v5-accent-ink)}

/* label / value rows */
.d-kv{border-bottom:1px solid var(--v5-line)}
.d-kvrow{border-top:1px solid var(--v5-line);padding:13px 0 14px}
.d-kvrow>.v5-mono{display:block}
.d-kvv{display:block;margin-top:6px;line-height:20px}
.d-val{display:block;font-size:15px;line-height:22px;color:var(--v5-ink)}
.d-kvv .d-chip,.d-kvv .d-tag{position:relative;top:-2px}
.d-kvv .v5-link{line-height:20px}
@media (min-width:1024px){
  .d-kvrow{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start}
  .d-kv--table .d-kvrow{grid-template-columns:220px minmax(0,1fr)}
  .d-kvrow>.v5-mono{padding-right:16px}
  .d-kvv{margin-top:0}
}

/* the note: a 2 px bar, a mono label, the text in small ink */
.d-note{border-left:2px solid var(--v5-line-strong);padding-left:16px}
.d-note-t{margin-top:6px;font-size:15px;line-height:22px;color:var(--v5-ink)}

/* figures */
.d-fig-well{background:var(--v5-ground);box-shadow:inset 0 0 0 1px var(--v5-line);border-radius:6px;padding:12px;display:flex;justify-content:center}
.d-fig-well img{display:block;max-width:100%;height:auto}
.d-fig figcaption{margin-top:12px}
@media (min-width:1024px){.d-fig-well{padding:24px}}
.d-figs2{display:grid;gap:24px}
@media (min-width:1024px){.d-figs2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* reference grid: icon, name, one line; three to a row from 1024 */
.d-refs{border-bottom:1px solid var(--v5-line)}
.d-refrow{border-top:1px solid var(--v5-line);display:grid;gap:0 24px;padding:13px 0 14px}
.d-ref{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px}
.d-ref .icon{width:24px;height:24px;margin-top:2px;color:var(--v5-muted);grid-row:span 2}
.d-ref-n{font-weight:500;font-size:15px;line-height:20px;color:var(--v5-ink)}
.d-ref-d{margin-top:2px;font-size:15px;line-height:22px;color:var(--v5-muted)}
@media (max-width:1023px){
  .d-refrow{display:contents}
  .d-ref{border-top:1px solid var(--v5-line);padding:13px 0 14px}
}
@media (min-width:1024px){.d-refrow{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* numbered steps */
.d-steps{border-bottom:1px solid var(--v5-line)}
.d-step{display:grid;grid-template-columns:48px minmax(0,1fr);border-top:1px solid var(--v5-line);padding:13px 0 14px}
.d-step>.v5-mono{margin-top:2px}
.d-step-t{font-weight:500;font-size:15px;line-height:20px;color:var(--v5-ink)}
.d-step-d{margin-top:4px;font-size:15px;line-height:22px;color:var(--v5-muted)}
.d-step-s{font-size:15px;line-height:22px;color:var(--v5-ink)}
.d-step-x{margin-top:8px}

/* the notify form */
.d-notify h3{margin:0}
.d-notify-row{display:grid;gap:12px;margin-top:20px}
.d-inp{width:100%;height:48px;padding-inline:16px;border-radius:4px;border:1px solid var(--v5-line-strong);
  background:none;color:var(--v5-ink);font-family:inherit;font-size:15px;line-height:20px}
.d-inp::placeholder{color:var(--v5-muted)}
.d-inp:focus{outline:none;border:2px solid var(--v5-accent);padding-inline:15px}
.d-notify-btn{width:100%}
.d-fine{margin-top:12px}
.d-privacy{margin-top:8px}
.d-done{margin-top:20px;font-size:15px;line-height:22px;color:var(--v5-ink)}
.d-privacy a,.v5-notify .d-privacy a{color:var(--v5-accent);text-decoration:none}
.d-privacy a:hover{text-decoration:underline}
@media (min-width:1024px){
  .d-notify-row{display:flex}
  .d-inp{flex:1}
  .d-notify-btn{width:auto;flex:none;padding-inline:24px}
}

/* the notify band between two rules */
.d-band{border-top:1px solid var(--v5-line);border-bottom:1px solid var(--v5-line);padding:31px 0 32px}
@media (min-width:1024px){
  .d-band{padding:30px 0 31px}
  .d-band .d-notify{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--v5-gutter);align-items:center}
  .d-band .d-notify h3{grid-column:1 / span 6}
  .d-band .d-notify-row{grid-column:8 / -1;margin-top:0}
  .d-band .d-fine{display:none}
  .d-band .d-privacy{grid-column:8 / -1;margin-top:8px}
}

/* people */
.d-people{border-bottom:1px solid var(--v5-line)}
.d-person{border-top:1px solid var(--v5-line);padding:19px 0 20px}
.d-role{margin-top:8px;font-size:15px;line-height:22px;color:var(--v5-muted)}

/* News: the wide card, the post's hero art */
.d-hero-art{padding:12px}
.d-news .v5-art,.d-hero-art .v5-art,.d-a-fig .v5-art,.d-404-art .v5-art{height:var(--art-h-narrow)}
@media (min-width:1024px){.d-news .v5-art,.d-hero-art .v5-art,.d-a-fig .v5-art,.d-404-art .v5-art{height:var(--art-h)}}
.d-head+.d-hero-art{margin-top:40px}
@media (min-width:1024px){.d-head+.d-hero-art{margin-top:56px}}

/* the article template: the body on six columns from column 4, figures on eight from column 3 */
.d-a-meta{margin-top:24px!important}
.d-article{margin-top:40px}
.d-a+.d-a{margin-top:20px}
.d-a+.d-a-h2{margin-top:56px}
.d-a+.d-a-h3,.d-a+.d-a-quote{margin-top:40px}
.d-a+.d-a-fig{margin-top:48px}
.d-a+.d-a-foot{margin-top:64px}
.d-a-p{color:var(--v5-ink)}
.d-a-h2{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:26px;line-height:32px;letter-spacing:-0.2px}
.d-a-fig .v5-card{padding:12px}
.d-a-fig figcaption{margin-top:12px}
@media (min-width:1024px){
  .d-a-meta{max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 6 + 5 * var(--v5-gutter))}
  .d-article{margin-top:56px}
  .d-a{margin-left:calc((100% - 11 * var(--v5-gutter)) / 12 * 3 + 3 * var(--v5-gutter));
    max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 6 + 5 * var(--v5-gutter))}
  .d-a-fig{margin-left:calc((100% - 11 * var(--v5-gutter)) / 12 * 2 + 2 * var(--v5-gutter));
    max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 8 + 7 * var(--v5-gutter))}
  .d-a-h2{font-size:30px;line-height:36px;letter-spacing:-0.3px}
}

/* ---- Manuals: one row per product from 1024; a heading and rows on phones */
.d-manuals{display:none}
.d-mnarrow h2{margin-bottom:12px}
@media (min-width:1024px){
  .d-mnarrow{display:none}
  .d-manuals{display:block}
  .d-mhead,.d-mrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--v5-gutter)}
  .d-mhead{padding-bottom:12px}
  .d-mbody{border-bottom:1px solid var(--v5-line)}
  .d-mrow{border-top:1px solid var(--v5-line);height:64px;padding-top:19px;line-height:20px}
  .d-mcell .d-chip,.d-mcell .d-tag{position:relative;top:-2px}
  .d-val-btn{font-weight:500;font-size:15px;color:var(--v5-ink)}
}

/* ---- Cart */
.d-order-h{display:flex;justify-content:space-between;padding-bottom:12px}
.d-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;column-gap:20px;align-items:start;
  border-top:1px solid var(--v5-line);border-bottom:1px solid var(--v5-line);padding:19px 0 20px}
.d-thumb{width:96px;height:64px;background:var(--v5-ground);box-shadow:inset 0 0 0 1px var(--v5-line);border-radius:4px;padding:6px}
.d-thumb .v5-winframe{width:84px}
.d-thumb img{width:100%;height:auto;display:block}
.d-line-id .d-tag{margin-top:8px}
.d-line-id .v5-mono{margin-top:8px}
.d-line-price{font-weight:500;font-size:15px;line-height:20px;text-align:right;grid-column:3;grid-row:1}
@media (max-width:1023px){.d-line-id{grid-column:2 / -1;grid-row:1}}
.d-total{display:flex;justify-content:space-between;align-items:flex-start;padding-top:14px;height:52px}
.d-total .v5-mono{margin-top:2px}
.d-tax{max-width:100%}
.d-checkout{margin-top:32px}
.d-handoff{margin-top:16px;font-size:15px;line-height:22px;color:var(--v5-muted)}
.d-checkout .v5-btn{width:100%}
.d-paylater{margin-top:24px}
.d-paylater .d-kvrow{padding:15px 0 14px}
.d-paylater .d-kvv .d-chip{top:0}
.d-off{margin-top:32px}
.d-cart-notify{margin-top:24px}
@media (min-width:1024px){
  .d-line{grid-template-columns:108px minmax(0,1fr) auto}
  .d-thumb{width:108px;height:72px}
  .d-thumb .v5-winframe{width:96px}
  .d-tax,.d-cart-notify{max-width:calc((100% - 7 * var(--v5-gutter)) / 8 * 6 + 5 * var(--v5-gutter))}
  .d-checkout{display:flex;align-items:flex-start;gap:32px}
  .d-checkout .v5-btn{width:auto;flex:none;padding-inline:32px}
  .d-handoff{margin-top:-2px;max-width:calc((100% - 7 * var(--v5-gutter)) / 8 * 5 + 4 * var(--v5-gutter))}
  .d-paylater .d-kvrow{grid-template-columns:220px minmax(0,1fr);padding:15px 0 12px}
  .d-paylater .d-kvv .d-chip{top:-2px}
}

/* ---- Account */
.d-head+.d-account{margin-top:40px}
.d-account .v5-btn{width:100%}
.d-account .v5-mono{margin-top:12px}
.d-account+.d-sec{margin-top:56px}
.d-btn-inert{cursor:default}
@media (min-width:1024px){.d-account .v5-btn{width:auto}.d-account+.d-sec{margin-top:96px}}

/* ---- Support: the contact block and the manuals list */
.d-head+.d-need{margin-top:32px}
@media (min-width:1024px){.d-head+.d-need{margin-top:40px}}
.d-need-mail{margin-top:12px;line-height:20px}
.d-need-row{margin-top:16px;display:flex;align-items:center;height:24px}
.d-need-row .v5-mono{width:140px;flex:none}
.d-manuals-list{border-bottom:1px solid var(--v5-line)}
.d-manual{display:flex;justify-content:space-between;align-items:center;height:57px;border-top:1px solid var(--v5-line);padding-top:1px}
.d-manual .d-val-btn{font-weight:500;font-size:15px;line-height:20px;color:var(--v5-ink)}

/* ---- About: the first section follows the head at 56 (40 on phones) */
.d-head+.d-about{margin-top:40px}
@media (min-width:1024px){.d-head+.d-about{margin-top:56px}}

/* ---- Legal: the index cards */
.d-lcards{display:grid;gap:16px}
.d-lcard{padding:18px 20px 20px;text-decoration:none;color:inherit}
.d-lcard-k{display:flex;justify-content:space-between;align-items:center;height:24px}
.d-lcard h3{margin-top:18px;min-height:60px}
.d-lcard-s{margin-top:8px;min-height:44px;font-size:15px;line-height:22px;color:var(--v5-muted)}
.d-lcard-a{margin-top:20px;line-height:20px}
@media (min-width:1024px){.d-lcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* ---- Legal: the document template */
.d-lstatus{margin-top:32px!important}
.d-lstatus+.d-sec{margin-top:56px}
.d-toc ol{margin-top:12px}
.d-toc li{font-family:"DM Mono",ui-monospace,monospace;font-size:14px;line-height:20px;color:var(--v5-muted)}
.d-toc li+li{margin-top:8px}
.d-toc li span{margin-right:1.2ch}
.d-toc li.on{color:var(--v5-ink)}
.d-toc li.on span{color:var(--v5-accent)}
.d-toc{margin-bottom:32px}
.d-lsec+.d-lsec{margin-top:40px}
.d-lsec h3{margin-top:8px}
.d-lsec .d-chip{margin-top:12px}
.d-lend{margin-top:48px;border-top:1px solid var(--v5-line);padding-top:24px}
.d-lend p+p{margin-top:16px}
@media (min-width:1024px){
  .d-lstatus{max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 6 + 5 * var(--v5-gutter))}
  .d-lstatus+.d-sec{margin-top:96px}
  .d-toc{grid-column:1 / span 3;margin-bottom:0;position:sticky;top:calc(var(--v5-bar) + 24px)}
  .d-lsec,.d-lend{max-width:calc((100% - 7 * var(--v5-gutter)) / 8 * 6 + 5 * var(--v5-gutter))}
}

/* ---- Legal: the EULA on one screen */
.d-page:has(.d-eula) .d-head{padding-top:32px}
.d-eula-status{margin-top:32px!important}
.d-eula-kv{display:none}
.d-eula-line{display:flex;gap:8px}
.d-eula{margin-top:24px;border-bottom:1px solid var(--v5-line)}
.d-eula-row{display:grid;grid-template-columns:40px minmax(0,1fr);border-top:1px solid var(--v5-line);padding:9px 0 10px}
.d-eula-row>.v5-mono{margin-top:2px}
.d-eula-t{font-size:var(--v5-body);line-height:var(--v5-body-lh)}
.d-eula-v{grid-column:2;margin-top:6px}
.d-eula-item{display:flex;align-items:center;gap:0;height:24px}
.d-eula-item+.d-eula-item{margin-top:8px}
.d-eula-v--2 .d-eula-item .v5-mono{width:104px;flex:none}
.d-eula-all{margin-top:24px}
@media (min-width:1024px){
  .d-page:has(.d-eula) .d-head{padding-top:48px}
  .d-eula-kv{display:block}
  .d-eula-line{display:none}
  .d-eula-kv .d-kvrow{grid-template-columns:calc((100% - 7 * var(--v5-gutter)) / 8 * 3 + 3 * var(--v5-gutter)) minmax(0,1fr)}
  .d-eula-status,.d-eula,.d-eula-all{max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 8 + 7 * var(--v5-gutter))}
  .d-eula{margin-top:40px}
  .d-eula-row{grid-template-columns:48px calc((100% - 7 * var(--v5-gutter)) / 8 * 3 + 3 * var(--v5-gutter) - 48px) minmax(0,1fr);padding:11px 0 12px}
  .d-eula-v{grid-column:3;margin-top:0}
  .d-eula-item .d-chip{position:relative}
  .d-eula-v--2 .d-eula-item .v5-mono{width:128px}
  .d-eula-row .d-eula-t{margin-top:2px}
}

/* ---- 404 */
.d-404-art{padding:12px;margin-top:72px}
.d-404-art+.d-head{padding-top:56px}
.d-404-links{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 32px}
@media (min-width:1024px){
  .d-404-art{margin-top:144px;max-width:calc((100% - 11 * var(--v5-gutter)) / 12 * 6 + 5 * var(--v5-gutter))}
}


/* ---- Pulsar Hell: the window caption and the widgets */
.d-wcap{margin-top:16px}
.d-ph{margin-top:80px}
@media (min-width:1024px){.d-ph{margin-top:120px}}
.d-grain .scope-screen{height:150px}
@media (min-width:1024px){.d-grain .scope-screen{height:200px}}
.d-wcard{padding:12px}
.d-wwell{display:flex;flex-direction:column}
.d-wsvg{display:block;width:100%;height:136px;color:var(--v5-ink);overflow:visible}
.d-wwell--mask .d-wsvg{height:146px}
@media (min-width:1024px){.d-wsvg,.d-wwell--mask .d-wsvg{height:156px}}
.d-wsvg text{font-family:"DM Mono",ui-monospace,monospace;font-size:14px}
.d-wctl{margin-top:24px;display:grid;gap:16px}
.d-wcol{display:grid;gap:16px}
.d-wcol>.v5-mono{margin-bottom:-4px}
.d-wcol+.d-wcol{margin-top:8px}
@media (min-width:1024px){
  .d-wctl--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .d-wcol+.d-wcol{margin-top:0}
}
.d-sieve{display:flex;align-items:center;margin-top:16px}
.d-sieve>span{width:80px;padding-top:0;font-size:15px;line-height:22px;color:var(--v5-muted)}
.d-seg{display:flex;width:112px;height:36px;border:1px solid var(--v5-line-strong);border-radius:4px;overflow:hidden}
.d-seg button{flex:1;border:0;background:none;padding:0;font:inherit;font-weight:500;font-size:15px;line-height:20px;
  color:var(--v5-muted);cursor:pointer}
.d-seg button[aria-pressed="true"]{background:var(--v5-accent);color:var(--v5-accent-ink);border-radius:3px}
.d-seg button:focus-visible{outline:2px solid var(--v5-ink);outline-offset:-2px}
@media (min-width:1024px){.d-sieve{margin-top:20px}}

/* the Window section's tab switcher */
.d-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (min-width:1024px){.d-tabs{grid-template-columns:repeat(5,120px)}}
.d-tab{height:40px;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px var(--v5-line-strong);background:none;
  font:inherit;font-weight:500;font-size:15px;line-height:20px;color:var(--v5-muted);cursor:pointer;padding:0}
.d-tab[aria-selected="true"]{background:var(--v5-accent);color:var(--v5-accent-ink);box-shadow:none}
.d-tab:focus-visible{outline:2px solid var(--v5-ink);outline-offset:2px}
.d-wtabs .d-fig{margin-top:16px}
.d-cta{width:100%}
@media (min-width:1024px){.d-cta{width:auto}}

/* the pull quote and the notes of the article template */
.d-quote{margin:0;border-left:2px solid var(--v5-accent);padding-left:22px;
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-0.4px}
@media (min-width:1024px){.d-quote{font-size:28px;line-height:36px}}
.d-foot{border-top:1px solid var(--v5-line);padding-top:19px}
.d-foot ol{margin-top:12px}
.d-foot li{display:grid;grid-template-columns:28px minmax(0,1fr)}
.d-foot li+li{margin-top:10px}
.d-foot li p{font-size:15px;line-height:22px;color:var(--v5-muted)}