/* ═══ Atlas Studio site kit · components ══════════════════════════════════════════════════════
   The nav pill (with its mobile menu), the hero type, buttons, download rows, the copy chip, the
   commit log, section heads, the side-page title block and the footer. Rules are lifted from the
   approved design (proto/home-combined/home.css) unchanged; new parts (the mobile menu, the footer
   site map, the page title block) are built from the same tokens. See README.md for snippets.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the nav: one dark warm glass capsule, top left ───────────────────────────────────────
   embers.js measures .fh-nav__in and parts the fire around it. The blur is static. */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav__in{width:max-content;max-width:calc(100% - 2 * var(--gut));margin:0 0 0 calc(var(--edge-l) - 10px);
  display:flex;align-items:center;gap:2px 14px;padding:5px 6px 5px 12px;border-radius:999px;pointer-events:auto;
  background:rgb(var(--glass-rgb) / .62);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav__brand{display:inline-flex;align-items:center;gap:9px;min-height:34px;font:640 14.5px/1 var(--f-sans);font-stretch:104%;letter-spacing:.005em;text-decoration:none;color:var(--cream)}
.nav__mark{height:19px;width:auto;flex:none;aspect-ratio:1}
.nav__links{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.nav__gap{margin-left:10px}                  /* products | studio pages: a breath, not a rule */
.nav__link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:999px;
  font:520 14px/1 var(--f-sans);color:var(--ink-2);text-decoration:none;
  transition:background-color 160ms var(--e),color 160ms var(--e),padding 300ms var(--e)}
.nav__link span{font-size:12px;color:var(--ink-3)}
/* the page in play: an orange bead, like a live process (kit.js moves it; aria-current is the fallback) */
.nav__link::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin:-3px 0 0;border-radius:50%;background:var(--fire);
  transform:scale(0);opacity:0;transition:transform 300ms var(--e),opacity 200ms var(--e)}
.nav__link--src::before{content:none}
.nav__link.is-live,.nav__links:not(.is-js) .nav__link[aria-current="page"]{color:var(--ink);padding-left:19px}
.nav__link.is-live::before,.nav__links:not(.is-js) .nav__link[aria-current="page"]::before{transform:scale(1);opacity:1}
@media (hover:hover){.nav__link:hover{background:rgb(var(--ink-rgb) / .07);color:var(--ink)}}

/* the menu button (narrow screens only): a real button, click or tap, never hover */
.nav__menu{display:none;align-items:center;gap:8px;min-height:34px;margin:0;padding:0 13px 0 12px;border:0;border-radius:999px;cursor:pointer;
  background:rgb(var(--ink-rgb) / .07);color:var(--ink);font:520 14px/1 var(--f-sans);
  -webkit-tap-highlight-color:transparent;transition:background-color 160ms var(--e)}
.nav__menu:focus-visible{border-radius:999px}
.nav__menu:active{background:rgb(var(--ink-rgb) / .12)}
.nav__bars{position:relative;width:14px;height:10px;flex:none}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform 260ms var(--e),top 260ms var(--e)}
.nav__bars::before{top:1.5px}.nav__bars::after{top:6.9px}
.nav__menu[aria-expanded="true"] .nav__bars::before{top:4.2px;transform:rotate(45deg)}
.nav__menu[aria-expanded="true"] .nav__bars::after{top:4.2px;transform:rotate(-45deg)}
@media (hover:hover){.nav__menu:hover{background:rgb(var(--ink-rgb) / .12)}}

/* the menu panel: dark ceramic, unfolds from the pill */
.nav__panel{position:absolute;top:calc(100% + 8px);left:calc(var(--edge-l) - 10px);width:min(340px,calc(100vw - 2 * var(--gut) + 20px));
  max-height:calc(100svh - 90px);overflow:auto;overscroll-behavior:contain;pointer-events:auto;
  padding:10px;border-radius:16px;background:var(--cer);
  box-shadow:var(--cer-rim),0 2px 4px rgb(var(--shade-rgb) / .3),0 26px 60px -22px rgb(var(--shade-rgb) / .75);
  transform-origin:24px -8px;transition:opacity 150ms ease-out,transform 300ms var(--e)}
.nav__panel[hidden]{display:block!important;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;
  transition:opacity 130ms ease-in,transform 160ms ease-in,visibility 0s linear 160ms}
.nav__grp{margin:0;padding:6px 0 4px;list-style:none}
.nav__grp + .nav__grp{margin-top:4px}
.nav__h{margin:0;padding:8px 12px 6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nav__item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;
  font:560 16px/1 var(--f-sans);color:var(--cream);text-decoration:none;transition:background-color 160ms var(--e)}
.nav__item img,.nav__item svg{width:20px;height:20px;flex:none;border-radius:5px}
.nav__item span{margin-left:auto;font-size:14px;color:var(--ink-3)}
.nav__item[aria-current="page"]{background:rgb(var(--ink-rgb) / .06)}
.nav__item[aria-current="page"]::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--fire)}
.nav__item:active{background:rgb(var(--ink-rgb) / .1)}
@media (hover:hover){.nav__item:hover{background:rgb(var(--ink-rgb) / .07)}}

/* ── the hero type ─────────────────────────────────────────────────────────────────────── */
/* the kicker / meta line: plain facts in mono, slashes between */
.kick{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;line-height:1;letter-spacing:.02em;color:var(--ink-3)}
.kick__v{color:var(--ink);font-weight:500;min-width:6ch}
.kick__v:not([data-decode]){min-width:0}   /* the 6ch only holds room for a label that decodes */
.kick__s{color:rgb(var(--ink-rgb) / .22)}
/* the line: condensed Archivo; .fh-h (embers.css) lights it from the fire */
.h1{margin:20px 0 0;max-width:9.7em;font:640 var(--t-h1)/.93 var(--f-sans);font-stretch:86%;letter-spacing:-.028em;text-wrap:balance;color:var(--ink)}
.h1__open{display:inline-block;font:italic 500 1.1em/1 var(--f-serif);font-optical-sizing:auto;letter-spacing:-.018em;padding-right:.04em}
.h1--page{max-width:12em;font-size:var(--t-h1-page)}
.lede{margin:clamp(18px,2.6vh,28px) 0 0;max-width:31em;font:400 var(--t-lede)/1.5 var(--f-sans);color:var(--ink-2);text-wrap:pretty}
.lede b{font-weight:620;color:var(--ink)}
.lede a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .3);text-underline-offset:3px;transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.lede a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:clamp(22px,3.4vh,34px)}

/* ── buttons ───────────────────────────────────────────────────────────────────────────── */
/* .cue, the main call: cream, fills fire on hover, the arrow drops; [data-magnet] leans to the pointer */
.cue{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 18px 0 20px;border-radius:12px;
  background:var(--cream);color:var(--ground);font:600 16px/1 var(--f-sans);text-decoration:none;
  box-shadow:0 1px 2px rgb(var(--shade-rgb) / .4),inset 0 1px 0 rgb(var(--hi-rgb) / .5);
  transition:background-color 160ms var(--e),translate 260ms var(--e)}
.cue__ar{display:inline-block;transition:transform 220ms var(--e)}
@media (hover:hover){.cue:hover{background:var(--fire)}.cue:hover .cue__ar{transform:translateY(2px)}
  .cue--fwd:hover .cue__ar{transform:translateX(2px)}.cue--back:hover .cue__ar{transform:translateX(-2px)}}
.cue:active{background:var(--fire-deep)}
/* .names: plain text links with an arrow that nudges */
.names{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none}
.names a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;border-radius:10px;
  font:560 16px/1 var(--f-sans);color:var(--cream);text-decoration:none;transition:background-color 160ms var(--e)}
.names li:first-child a{margin-left:-9px}
.names a span{color:var(--ink-3);font-size:14px;transition:transform 200ms var(--e),color 160ms var(--e)}
@media (hover:hover){.names a:hover{background:rgb(var(--ink-rgb) / .06)}.names a:hover span{color:var(--fire-ink);transform:translateX(2px)}}
/* .btn, the small solid button (Download); .gh, a text link with a ↗ (Source) */
.btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--cream);color:var(--ground);
  font:600 14.5px/1 var(--f-sans);text-decoration:none;transition:background-color 160ms var(--e)}
@media (hover:hover){.btn:hover{background:var(--fire)}}
.btn:active{background:var(--fire-deep)}
.gh{display:inline-flex;align-items:center;gap:5px;min-height:40px;font:560 14.5px/1 var(--f-sans);text-decoration:none;color:var(--cream)}
.gh span{color:var(--ink-3);transition:color 160ms var(--e),transform 200ms var(--e)}
@media (hover:hover){.gh:hover span{color:var(--fire-ink);transform:translate(1px,-1px)}}

/* ── the copy chip: the icon turns into a check and a mono "copied" pops above ──────────── */
.clone{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 3px 0 12px;border-radius:10px;background:rgb(var(--ink-rgb) / .06);max-width:100%}
.clone__t{font:400 12px/1 var(--f-mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clone__p{color:var(--fire-ink)}
.copy{position:relative;flex:none;display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background-color 160ms var(--e),color 160ms var(--e)}
.copy svg{grid-area:1/1;width:14px;height:14px;display:block;transition:opacity 120ms linear,transform 200ms cubic-bezier(.2,0,0,1)}
.copy .ok{opacity:0;transform:scale(.6);color:var(--fire-ink)}
.copy.done .cp{opacity:0;transform:scale(.6)}.copy.done .ok{opacity:1;transform:none}
@media (hover:hover){.copy:hover{color:var(--ink);background:rgb(var(--ink-rgb) / .08)}}
.copy__msg{position:absolute;right:0;bottom:calc(100% + 6px);padding:4px 7px;border-radius:5px;background:var(--cream);color:var(--ground);
  font:500 10.5px/1 var(--f-mono);white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity 140ms linear,transform 140ms cubic-bezier(.2,0,0,1);pointer-events:none}
.copy.done .copy__msg{opacity:1;transform:none}

/* ── sections: a wrap, a head and a description ─────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.h2{margin:0;max-width:16em;font:640 var(--t-h2)/1.02 var(--f-sans);font-stretch:88%;letter-spacing:-.02em;color:var(--ink)}
.sec__d{margin:14px 0 0;max-width:40em;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.label{margin:0;font:400 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prose{max-width:40em;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.prose p{margin:0 0 1em}
.prose h2,.prose h3{margin:1.6em 0 .5em;font:640 22px/1.15 var(--f-sans);font-stretch:92%;letter-spacing:-.01em;color:var(--ink)}
.prose strong{font-weight:620;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .3);text-underline-offset:3px;transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.prose a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}

/* ── download rows: one product per row (name + icon | line, spec, note | actions) ──────── */
.rows{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,2fr) auto;row-gap:6px;margin:clamp(26px,4vh,40px) -22px 0;padding:0;list-style:none}
.pg{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;gap:12px 36px;padding:20px 22px;border-radius:18px;
  background:var(--ground);transition:background-color 200ms var(--e)}
@media (hover:hover){.pg:hover{background:var(--ground-2)}}
.pg__n{display:flex;align-items:center;gap:14px;margin:0;font:640 var(--t-h3)/1 var(--f-sans);font-stretch:86%;letter-spacing:-.02em;color:var(--cream)}
.pg__n img,.pg__n svg{width:30px;height:30px;flex:none;border-radius:7px}
.pg__ic--m{color:var(--cream)}
.pg__l{margin:0;font-size:16.5px;line-height:1.45;color:var(--ink)}
.pg__m{margin:6px 0 0;font-size:12px;color:var(--ink-3)}
.pg__note{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.pg__note a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .3);text-underline-offset:3px;transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.pg__note a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}
.pg__a{display:flex;align-items:center;gap:8px 18px}

/* ── the commit log: the last commit on each master, set large ──────────────────────────── */
.log{padding-top:6px}
.log__h{margin:0 0 20px;font-size:11.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.log__l{display:grid;width:max-content;max-width:100%;grid-template-columns:auto auto auto auto;align-items:baseline;column-gap:clamp(20px,2.6vw,40px);row-gap:16px;margin:0;padding:0;list-style:none}
.log__l li{display:contents}
.log__n{display:flex;align-items:center;gap:12px;font:640 22px/1 var(--f-sans);font-stretch:88%;letter-spacing:-.01em;color:var(--cream)}
.log__n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fire);transform:translateY(-3px)}
.log__sha{font:400 clamp(30px,3.3vw,48px)/1 var(--f-mono);letter-spacing:-.01em;color:var(--fire);text-decoration:none;border-radius:6px;
  background:linear-gradient(rgb(var(--fire-rgb) / .2),rgb(var(--fire-rgb) / .2)) 0 100%/0 30% no-repeat;transition:background-size 300ms var(--e)}
@media (hover:hover){.log__sha:hover{background-size:100% 30%}}
.log time,.log__v{font-size:13px;color:var(--ink-3);white-space:nowrap}

/* ── the hero (home) and the page title block (side pages) ──────────────────────────────── */
.hero{position:relative;height:max(680px,100svh);overflow:hidden}
.hero__wrap{position:relative;z-index:2;max-width:var(--wrap);height:100%;margin:0 auto;
  padding:clamp(116px,20.5vh,196px) var(--gut) 0;pointer-events:none}
.hero__copy{width:max-content;max-width:100%;pointer-events:auto}
/* .ph: a side page's title block inside a lite ember edge (embers.css draws the fire round .fh-copy) */
.ph{position:relative;overflow:hidden}
.ph__wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(118px,17vh,168px) var(--gut) clamp(104px,15vh,150px);pointer-events:none}
.ph__box{width:max-content;max-width:min(100%,46rem);pointer-events:auto}
.ph--full{min-height:max(560px,88svh)}
.ph--full .ph__wrap{min-height:max(560px,88svh);display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:clamp(120px,18vh,180px)}
/* .ph--aside: a piece on the title block's right, in div.ph__aside (after .ph__box). The fire box keeps
   its exact size and place, so the edge doesn't move; the aside takes the rest of the row, starts a
   clear gap right of the fire's side stream, and is centred on the box's middle. It adds NO height
   (it's a zero-height row its piece hangs from), so the piece may overhang the box above and below by
   up to ~90 px. The aside is a size container (`aside`), so a piece can size itself in cqi. Its direct
   child is centred and capped at --aside-w (30rem). Below 1200 px the row would crush the piece, so the
   aside hides, unless it's .ph__aside--stack: then it drops under the block, clear of the flame. */
.ph--aside .ph__wrap{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;column-gap:clamp(72px,6.4vw,128px)}
.ph--aside .ph__box{flex:none}
.ph__aside{flex:1 1 0;min-width:0;height:0;display:flex;align-items:center;justify-content:center;
  container:aside/inline-size;pointer-events:auto}
.ph__aside>*{flex:none;width:100%;max-width:var(--aside-w,30rem)}

/* ── footer: a step deeper than the ground, with the whole site map ─────────────────────── */
.foot{padding:0 0 36px;background:var(--foot)}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:44px var(--gut) 0;display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.55fr));gap:28px 40px;align-items:start}
.foot__brand{display:flex;align-items:center;gap:8px;margin:0;font:640 14px/1.3 var(--f-sans);color:var(--cream);text-decoration:none;width:max-content}
.foot__t{margin:12px 0 0;max-width:34em;font-size:13px;line-height:1.55;color:var(--ink-3)}
.foot__col{min-width:0}
.foot__h{margin:4px 0 12px;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot__l{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;font-size:14px}
.foot__l a{display:inline-flex;align-items:center;gap:5px;min-height:30px;color:var(--ink-2);text-decoration:none;transition:color 160ms var(--e)}
.foot__l a span{font-size:12px;color:var(--ink-3)}
.foot__l a[aria-current="page"]{color:var(--ink)}
.foot__l .mono{font-size:12.5px}
@media (hover:hover){.foot__l a:hover{color:var(--fire-ink)}}

/* ── narrow ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .rows{grid-template-columns:minmax(0,1fr)}
  .pg__a{flex-wrap:wrap}
  .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__about{grid-column:1/-1}
}
/* the aside: side by side from 1200 px; under that, the plain title block again (hidden, or stacked) */
@media (max-width:1199px){
  .ph--aside .ph__wrap{display:block}
  .ph--full.ph--aside .ph__wrap{display:flex;flex-direction:column;justify-content:center;align-items:stretch}
  .ph__aside{display:none}
  .ph__aside--stack{display:flex;width:100%;height:auto;margin-top:128px;justify-content:flex-start}   /* 128: past the lite flame's root (96 at most) */
}
/* the nav collapses to the pill and a Menu button once its links would crowd the corner */
@media (max-width:860px){
  .nav__links{display:none}
  .nav__menu{display:inline-flex}
  .nav__in{gap:2px 12px}
}
@media (max-width:520px){
  .nav__in{padding-left:10px;gap:2px 10px}
  .h1{font-size:44px}
  .h1--page{font-size:40px}
  .log__l{grid-template-columns:auto minmax(0,1fr)}
  .log time,.log__v{display:none}
  .acts{gap:12px 20px}
  .ph__wrap{padding-top:108px;padding-bottom:96px}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .foot__col[aria-label="Source code"]{grid-column:1/-1}   /* the full width, so "atlas-studio-software/quartz" never breaks at its hyphen at 320 */
}
@media (max-width:360px){
  .nav__brand{font-size:0;gap:0}
  .h1{font-size:40px}
  .h1--page{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .cue,.cue__ar,.names a,.names a span,.nav__link,.nav__link::before,.pg,.pg__note a,.btn,.gh span,
  .copy,.copy svg,.copy__msg,.log__sha,.foot__l a,.nav__menu,.nav__bars::before,.nav__bars::after,.nav__item,.lede a,.prose a{transition:none}
  .nav__panel,.nav__panel[hidden]{transform:none;transition:opacity 1ms,visibility 0s}
}
@media (forced-colors:active){.nav__panel,.nav__in{border:1px solid CanvasText}}
@media print{.nav,.st{display:none}}

/* First-load cover: Mail's boot screen (.boot / .boot__mark), the mark in --fire breathing on --ground.
   boot.js puts .as-boot on <html> before the first paint, once per visit (sessionStorage), and takes it
   off when the page is ready; .as-boot--out is its 250 ms fade. Pseudo-elements: no markup, nothing to
   focus, nothing read aloud, out of flow. The as-boot-gone animation is a CSS-only failsafe at 2.5 s. */
html.as-boot::before,html.as-boot::after{content:"";position:fixed;inset:0;z-index:2147483647;forced-color-adjust:none;
  animation:as-boot-gone 1ms 2.5s forwards}
html.as-boot::before{background:var(--ground)}
html.as-boot::after{width:36px;height:36px;margin:auto;background:var(--fire);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-88 -63.4 150 150'%3E%3Cpath fill-rule='evenodd' d='M-56 0a56 56 0 1 0 112 0a56 56 0 1 0 -112 0ZM-41 0a41 41 0 1 1 82 0a41 41 0 1 1 -82 0ZM-21.22 79.21A82 82 0 0 1 -82 0L-67 0A67 67 0 0 0 -17.34 64.72Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-88 -63.4 150 150'%3E%3Cpath fill-rule='evenodd' d='M-56 0a56 56 0 1 0 112 0a56 56 0 1 0 -112 0ZM-41 0a41 41 0 1 1 82 0a41 41 0 1 1 -82 0ZM-21.22 79.21A82 82 0 0 1 -82 0L-67 0A67 67 0 0 0 -17.34 64.72Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:as-breathe 1.6s var(--e) infinite alternate,as-boot-gone 1ms 2.5s forwards}
html.as-boot--out::before{background-color:rgb(var(--ground-rgb) / 0);transition:background-color .25s var(--e);pointer-events:none}
html.as-boot--out::after{background-color:rgb(var(--fire-rgb) / 0);transition:background-color .25s var(--e)}
@keyframes as-breathe{from{opacity:.35}to{opacity:1}}
@keyframes as-boot-gone{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){html.as-boot::after{animation:as-boot-gone 1ms 2.5s forwards}}
@media print{html.as-boot::before,html.as-boot::after{display:none}}