/* The cockpit: its frame on every page (html.frame: header and tabs as
   keys, the canopy's corners, the status bar), its dress over the
   contents of the site's pages, the game's aside (html.cockpit); style.css
   underneath, the home page's own flight in home.css. DA.md: the site's tokens, one amber accent, the game's
   bevels and brackets; motion in transform and opacity only, off with
   reduced motion. */
html.frame {
  --cp-bar: 2.5rem; /* the status bar at the foot of the canopy */
  --cp-frame: max(.75rem, env(safe-area-inset-left));
  --cp-cut: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); /* a panel: the two corners without brackets cut */
  --cp-ease: cubic-bezier(.16, 1, .3, 1);
}
.frame body { padding-bottom: calc(var(--cp-bar) + env(safe-area-inset-bottom)); }

/* The canopy: its corners, and the status bar at its foot. */
.cp-hud { position: fixed; inset: var(--cp-frame) var(--cp-frame) calc(var(--cp-frame) + var(--cp-bar)); z-index: 30; pointer-events: none; }
.cp-hud i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--accent); }
.cp-hud .tl { left: 0; top: 0; border-width: 1px 0 0 1px; } .cp-hud .tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.cp-hud .bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .cp-hud .br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.cp-status { position: fixed; inset: auto 0 0; z-index: 31; height: calc(var(--cp-bar) + env(safe-area-inset-bottom)); padding: 0 var(--cp-frame) env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--muted);
  background: color-mix(in srgb, var(--bg) 90%, transparent); border-top: 1px solid var(--line); }
.cp-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: var(--s2); animation: cp-blink 2.4s steps(1) infinite; }
@keyframes cp-blink { 50% { opacity: .3; } }
.cp-clock { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .cp-sys, .cp-clock { display: none; } .cp-status { justify-content: center; } }
/* the sky's own readouts in the corner: the status bar says it now, and
   they no longer pass under the text; the line typed as each event comes
   in, within the canopy's lower corner, just above the status bar */
html.frame::before { display: none; }
html.frame:not([data-sky="demo"]) .sky-log { left: calc(var(--cp-frame) + 12px); bottom: calc(var(--cp-frame) + var(--cp-bar) + 10px); }
/* the screens of the console (the tools' board, the home page's) and the
   hangar: the game's night in the dark theme, the page's own colours in
   the light one (contrasts of 4.5:1 at least) */
html.frame { --scr-bg: var(--g-deep); --scr-space: var(--g-space); --scr-edge: var(--g-edge); --scr-fg: var(--g-pale); --scr-text: var(--g-text); --scr-dim: var(--g-dim); --scr-amber: var(--g-amber); --scr-ink: var(--g-ink); --scr-scan: rgba(0, 0, 0, .22); }
:root.frame:not([data-sky="demo"]):is([data-theme="light"], :not([data-theme]):has(#th-light:checked)) { --scr-bg: var(--card); --scr-space: var(--card); --scr-edge: color-mix(in srgb, var(--accent) 30%, var(--line)); --scr-fg: var(--fg); --scr-text: var(--fg); --scr-dim: var(--muted); --scr-amber: var(--accent); --scr-ink: #ffffff; --scr-scan: rgba(0, 0, 0, .03); }
/* the game over the screen, or installed as an app: nothing around it */
html.game-full-on :is(.cp-hud, .cp-status) { display: none; }
@media (display-mode: fullscreen), (display-mode: standalone) { html:has(main.game) :is(.cp-hud, .cp-status) { display: none; } html.frame:has(main.game) body { padding-bottom: 0; } }

/* The header: the console's keys. */
.frame header { padding: calc(var(--cp-frame) + var(--s4)) calc(var(--cp-frame) + var(--s6)) var(--s3); }
.frame .tabs { width: min(64rem, 100%); border-bottom: 0; gap: var(--s2); padding-top: var(--s2); flex-wrap: wrap; }
.frame .tabs a { padding: var(--s2) var(--s4); margin: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); clip-path: var(--bevel-s);
  font-size: var(--label-sm); letter-spacing: var(--g-ls); color: var(--fg); white-space: nowrap; transition: background-color .25s, border-color .25s; }
.frame .tabs a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.frame .tabs a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); font-weight: 600; }
.frame .tab-mark { display: none; } /* the key lit says it */
.frame .tabs a:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
/* phones: the four keys on one line, each still a comfortable target */
@media (max-width: 30rem) {
  .frame .tabs { gap: var(--s1); }
  .frame .tabs a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s3); letter-spacing: .04em; }
}

/* The page: wider, a waypoint's title over a line that draws itself. */
.cockpit main { width: min(64rem, 100% - 2 * var(--cp-frame)); padding-top: var(--s7); }
.cockpit main.wide { width: min(76rem, 100% - 2 * var(--cp-frame)); }
.cockpit main > h1 { font-size: clamp(1.4rem, 4.2vw, 2.6rem); letter-spacing: .02em; margin: var(--s5) 0 0; padding-bottom: var(--s5); position: relative; }
.cockpit main > h1::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(18rem, 60%); height: 1px; translate: -50% 0; background: var(--accent); transform-origin: center; animation: cp-draw 1.2s var(--cp-ease) .15s both; }
@keyframes cp-draw { from { transform: scaleX(0); } }
/* an introduction under the title: read from the left, at a line length
   that stays easy to follow */
.cockpit main > h1 + p, .cockpit main > .lead { text-align: left; max-width: 72ch; }
/* one size of running text on every page (the manual's and the
   statistics' lists too) */
.cockpit main, .cockpit main.man { font-size: var(--text); }
.cockpit .share-list li { font-size: inherit; }

/* A group: its name on a rule, amber, as a waypoint's. */
.cockpit .group > h2 { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* A panel of the console: two corners cut, its brackets on the others; a
   light that comes on while it is in use. */
.cockpit :is(.tool, .card:not(.hero), .prose section, .man section) {
  position: relative; clip-path: var(--cp-cut); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 0;
  background: var(--brackets), color-mix(in srgb, var(--card) 88%, transparent); transition: border-color .3s;
}
.cockpit :is(.tool, .card:not(.hero), .prose section, .man section) { padding: var(--s6) var(--s7); }
@media (max-width: 34rem) { .cockpit :is(.tool, .card:not(.hero), .prose section, .man section) { padding: var(--s5); } }
/* a panel's title, the same on every page: the tools', the browser's, the
   policy's, the manual's, the statistics', the questions'; its light
   before it (the lists inside a panel of the statistics: a step under) */
.cockpit :is(.prose section, .man section, main.stats > section, .detail, .faq) > h2 { font: 600 1.05rem/1.3 var(--mono); color: var(--fg); text-transform: none; letter-spacing: 0; margin: 0 0 .5rem; display: flex; align-items: center; gap: var(--s3); }
.cockpit :is(.prose section, .man section, main.stats > section, .detail, .faq) > h2::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.cockpit .shares section > h2 { font: 600 .95rem/1.3 var(--mono); color: var(--fg); text-transform: none; letter-spacing: 0; }
.cockpit main.man section > :not(h2) { margin-left: calc(6px + var(--s3)); } /* under the title's words, not its light */
/* the links: in a text, the accent underlined, never bold; the browser's
   contents, keys as the tabs */
.cockpit main.man a { font-weight: 400; }
.cockpit :is(.toc, .res-toc) a { border-radius: 0; clip-path: var(--bevel-s); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cockpit :is(.toc, .res-toc) a:is(:hover, :focus-visible) { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cockpit :is(.toc, .res-toc) a:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
.cockpit .tool > :is(h2, h3) { display: flex; align-items: center; gap: var(--s3); }
.cockpit .tool > :is(h2, h3)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background-color .3s; }
.cockpit .tool:is(:focus-within, :target) { border-color: var(--accent); }
.cockpit .tool:is(:focus-within, :target) > :is(h2, h3)::before { background: var(--accent); }
.cockpit .tool:has(.out:not([hidden]):not(:empty), pre:not([hidden]):not(:empty)) > :is(h2, h3)::before { background: var(--ok); }

/* Its keys: bevelled; the one that runs a tool full of amber. */
.cockpit main button { clip-path: var(--bevel-s); border-radius: 0; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); letter-spacing: var(--g-ls); }
.cockpit main button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--fg); }
.cockpit main button:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
.cockpit :is(.tool form > button[type="submit"], #dns-start, #webrtc-start, #analysis-run) { clip-path: var(--bevel); padding-inline: var(--s6); }
.cockpit :is(.tool form > button[type="submit"], #dns-start, #webrtc-start, #analysis-run):is(:hover, :focus-visible) { color: var(--bg); background: color-mix(in srgb, var(--accent) 82%, var(--fg)); }
.cockpit main button.copy-cmd { clip-path: none; }
/* its fields: bevelled as the keys beside them, the readout's glass, an
   amber caret; 16 px at least (legible, and no zoom on a phone's focus); the
   focus ring inside, where the bevel does not cut it */
.cockpit .tool :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { border-radius: 0; clip-path: var(--bevel-s); font-size: max(1rem, 16px); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); caret-color: var(--accent); }
.cockpit .tool :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-color: var(--accent); }
.cockpit .tool :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.cockpit pre { border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* The panels come on one after the other as the page opens. */
@keyframes cp-boot { from { opacity: 0; transform: translateY(.75rem); } }
.cockpit :is(.tool, .card:not(.hero), .prose section, .man section, .group > h2) { animation: cp-boot .7s var(--cp-ease) both; }
.cockpit :is(.groups, .calc-tools, .conn, .probes, main) > :nth-child(2) { animation-delay: .06s; }
.cockpit :is(.groups, .calc-tools, .conn, .probes, main) > :nth-child(3) { animation-delay: .12s; }
.cockpit :is(.groups, .calc-tools, .conn, .probes, main) > :nth-child(4) { animation-delay: .18s; }
.cockpit :is(.groups, .calc-tools, .conn, .probes, main) > :nth-child(n+5) { animation-delay: .24s; }

/* The telemetry (statistics): its blocks as panels, its counters as
   readouts, its columns rising as the page opens. */
.cockpit main.stats > :is(section, .detail, .shares) { position: relative; clip-path: var(--cp-cut); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); background: var(--brackets), color-mix(in srgb, var(--card) 88%, transparent); padding: var(--s6) var(--s7); animation: cp-boot .7s var(--cp-ease) both; }
@media (max-width: 34rem) { .cockpit main.stats > :is(section, .detail, .shares) { padding: var(--s5); } }
.cockpit .stat-tiles > div { clip-path: var(--bevel); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--card) 88%, transparent); padding: var(--s4) var(--s5); }
.cockpit .stat-tiles dd { color: var(--accent); }
.cockpit .chart .col { transform-box: fill-box; transform-origin: bottom; animation: cp-rise .9s var(--cp-ease) both; }
.cockpit .share-bar .fill { transform-box: fill-box; transform-origin: left; animation: cp-fill .9s var(--cp-ease) .2s both; }
@keyframes cp-rise { from { transform: scaleY(0); } }
@keyframes cp-fill { from { transform: scaleX(0); } }

/* ---- The loaders: the console's instruments while a tool works ---- */
/* the running dots: a reticle turning, the signal's bars rising */
.cockpit .dots { display: inline-flex; align-items: center; gap: 2px; height: 1em; margin-left: var(--s3); vertical-align: -.12em; }
.cockpit .dots::before { content: ""; width: .85em; height: .85em; margin-right: var(--s2); border: 1px dashed var(--accent); border-radius: 50%; animation: cp-turn 1.6s linear infinite; }
.cockpit .dots i { width: 3px; height: 100%; border-radius: 0; background: var(--accent); opacity: 1; transform-origin: bottom; animation: cp-signal .9s ease-in-out infinite alternate; }
.cockpit .dots i:nth-child(2) { animation-delay: -.3s; } .cockpit .dots i:nth-child(3) { animation-delay: -.6s; }
@keyframes cp-turn { to { transform: rotate(360deg); } }
@keyframes cp-signal { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
/* a panel at work: a beam sweeping it, its name on the corner */
.cockpit .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"]) { border-color: var(--accent); }
.cockpit .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;
  border-top: 1px solid var(--accent); box-shadow: 0 -10px 22px -12px var(--accent);
  animation: cp-sweep 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
.cockpit .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before {
  content: "Acquisition"; position: absolute; top: var(--s3); right: var(--s6); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--accent);
  animation: cp-blink 1s steps(1) infinite;
}
.cockpit:lang(en) .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before { content: "Acquiring"; }
.cockpit:lang(de) .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before { content: "Erfassung"; }
.cockpit:lang(es) .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before { content: "Adquisición"; }
.cockpit:lang(it) .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before { content: "Acquisizione"; }
.cockpit:lang(br) .tool:has(.dots:not([hidden] .dots), .running, button[aria-disabled="true"])::before { content: "O tastum"; }
@keyframes cp-sweep { from { transform: translateY(-2%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
/* the key that runs: a light passing along it */
.cockpit main button[aria-disabled="true"] { position: relative; overflow: hidden; border-color: var(--accent); }
.cockpit main button[aria-disabled="true"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: color-mix(in srgb, var(--fg) 35%, transparent); transform: translateX(-120%) skewX(-20deg); animation: cp-glint 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes cp-glint { to { transform: translateX(320%) skewX(-20deg); } }
/* a probe's output streamed in: the console's cursor at its end */
.cockpit .tool:has(button[aria-disabled="true"], .running) pre:not(:empty)::after { content: "▌"; color: var(--accent); animation: cp-blink 1s steps(1) infinite; }
/* a group of the search still on its way: its track scanned */
.cockpit .res.pending { position: relative; }
.cockpit .res.pending > h3 { padding-bottom: var(--s2); }
.cockpit .res.pending::after { content: ""; display: block; height: 2px; margin-top: var(--s2); background: var(--line); }
.cockpit .res.pending > h3::after { content: ""; display: block; height: 2px; width: 30%; margin-top: calc(var(--s2) + .25em); margin-bottom: -2px; background: var(--accent); position: relative; z-index: 1; animation: cp-track 1.4s ease-in-out infinite alternate; }
@keyframes cp-track { from { transform: translateX(0); } to { transform: translateX(233%); } }
/* a check of the browser not yet read: its reticle turning */
.cockpit .check-list li[data-state="pending"]::before { content: ""; left: .25rem; top: .45rem; width: .7rem; height: .7rem; border: 1px dashed var(--accent); border-radius: 50%; animation: cp-turn 1.6s linear infinite; }
/* the analysis's gauge, as the console's */
.cockpit .verdict-progress progress { appearance: none; -webkit-appearance: none; height: 4px; border: 0; border-radius: 0; background: var(--line); }
.cockpit .verdict-progress progress::-webkit-progress-bar { background: var(--line); }
.cockpit .verdict-progress progress::-webkit-progress-value { background: var(--accent); transition: inline-size .3s; }
.cockpit .verdict-progress progress::-moz-progress-bar { background: var(--accent); }
.cockpit .verdict-progress { font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--accent); }

/* The foot of the page, clear of the status bar. */
.frame footer { padding-bottom: var(--s6); }

/* The crosshair, on fine pointers (cockpit.js moves it). */
.cp-aim { display: none; }
@media (pointer: fine) {
  .cp-aim { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; display: block; }
  .cp-aim.on { opacity: 1; }
  .cp-aim::before, .cp-aim::after { content: ""; position: absolute; background: var(--accent); }
  .cp-aim::before { left: -10px; top: 0; width: 21px; height: 1px; }
  .cp-aim::after { left: 0; top: -10px; width: 1px; height: 21px; }
  .cp-aim i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid var(--accent); opacity: 0; transform: scale(1.6); transition: transform .35s var(--cp-ease), opacity .25s; }
  .cp-aim.over i { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit :is(.tool, .card, .prose section, .man section, .group > h2, main > h1::after), .cp-led { animation: none; }
  .cockpit :is(.dots, .dots i, .tool, button, pre, .res.pending > h3, .check-list li)::before, .cockpit :is(.dots i, .tool, button, pre, .res.pending > h3)::after, .cockpit .dots i { animation: none !important; }
  .cockpit .tool::after { display: none; }
  .cockpit :is(main.stats > section, main.stats > .detail, main.stats > .shares, .chart .col, .share-bar .fill) { animation: none; }
  .cp-aim { display: none !important; }
}

/* The soundtrack's player (voyage.js), docked above the status bar, at the
   canopy's right (the whole width on a phone): an amber key, the piece and
   the leg it is at, a line to seek on, the time; a top edge of amber. It
   comes up from the status bar, the edge drawn across as it boots, and goes
   back down when closed. Its key blinks when the browser waits for a click
   to play again, and is dim while held on the game's page. */
.vg { position: fixed; z-index: 32; right: calc(var(--cp-frame) + 12px); bottom: calc(var(--cp-bar) + env(safe-area-inset-bottom) + var(--s3)); width: min(25rem, 100vw - 2 * var(--cp-frame) - 24px);
  display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4) var(--s3) var(--s3);
  background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); clip-path: var(--cp-cut);
  font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--muted); }
.vg[hidden] { display: none; }
/* the header's key: a note, three bars dancing in amber while it plays */
.vg-key[hidden] { display: none; }
.vg-key { position: relative; cursor: pointer; }
.vg-key .vg-eq { display: none; width: 1.1rem; height: 1.1rem; justify-content: center; align-items: flex-end; padding-bottom: .1rem; }
.vg-key.playing .vg-note { display: none; }
.vg-key.playing .vg-eq { display: inline-flex; height: 1.1rem; }
.vg-key.playing { color: var(--accent); }
.vg-key .vg-eq i { height: .85rem; }
.vg::before { content: ""; position: absolute; left: 0; right: 12px; top: 0; height: 2px; background: var(--accent); transform-origin: left; }
html.vg-on.frame body { padding-bottom: calc(var(--cp-bar) + env(safe-area-inset-bottom) + 5.5rem); }
html.game-full-on .vg { display: none; }
.vg p { margin: 0; }
.vg-play { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; padding: 0; border: 0; background: var(--accent); color: var(--bg); clip-path: var(--bevel); cursor: pointer; transition: background-color .2s; }
.vg-play:hover { background: color-mix(in srgb, var(--accent) 82%, var(--fg)); }
.vg-play:focus-visible, .vg-close:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
.vg-play svg { width: 1rem; height: 1rem; fill: currentColor; }
.vg-i-pause, .vg.playing .vg-i-play { display: none; }
.vg.playing .vg-i-pause { display: block; }
.vg.vg-wait .vg-play { animation: cp-blink 1s steps(1) infinite; }
.vg.vg-held .vg-play { opacity: .55; }
.vg-body { flex: 1; min-width: 0; display: grid; gap: var(--s2); }
.vg-top { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; overflow: hidden; }
.vg-name { color: var(--fg); }
.vg-leg { color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.vg-leg::before { content: "· "; color: var(--muted); }
.vg-eq { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: .7rem; }
.vg-eq i { width: 3px; height: 100%; background: var(--accent); transform-origin: bottom; transform: scaleY(.25); }
.vg.playing .vg-eq i, .vg-key.playing .vg-eq i { animation: vg-eq .9s ease-in-out infinite alternate; }
.playing .vg-eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; } .playing .vg-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
@keyframes vg-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.vg-line { display: flex; align-items: center; gap: var(--s3); }
.vg-time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.vg-seek { --p: 0; flex: 1; min-width: 0; height: 1rem; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vg-seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--line) 0); }
.vg-seek::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--line) 0); }
.vg-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -3.5px; border: 0; border-radius: 0; background: var(--accent); }
.vg-seek::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 0; background: var(--accent); }
.vg-seek:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.vg-close { flex: none; align-self: flex-start; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; padding: 0; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.vg-close:hover { color: var(--fg); border-color: var(--line); }
.vg-close svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vg.vg-in { animation: vg-in .7s var(--cp-ease) both; }
.vg.vg-in::before { animation: vg-scan .8s var(--cp-ease) .3s both; }
.vg.vg-out { animation: vg-out .35s cubic-bezier(.5, 0, .9, .4) both; }
@keyframes vg-in { from { transform: translateY(calc(100% + var(--cp-bar) + 1rem)); opacity: 0; } 50% { opacity: 1; } }
@keyframes vg-out { to { transform: translateY(calc(100% + var(--cp-bar) + 1rem)); opacity: 0; } }
@keyframes vg-scan { from { transform: scaleX(0); } }
@media (max-width: 40rem) { .vg { right: var(--cp-frame); width: calc(100vw - 2 * var(--cp-frame)); } }
@media (prefers-reduced-motion: reduce) { .vg, .vg::before, .vg-eq i, .vg-play { animation: none !important; } }
@media print { .vg { display: none !important; } }