/* 196 Global Lab: one look for the sign-in page and the app chooser. */
:root {
  /* Always dark: deep space, glass cards, a blue-to-green accent. */
  --bg: #010205;
  --card: rgba(5, 9, 16, .8);
  --card-solid: #05090f;
  --ink: #e9f3ff;
  --muted: #8ea4bf;
  --line: rgba(90, 150, 210, .12);
  --line-strong: rgba(90, 180, 230, .26);
  --accent: #39d0ff;
  --accent-2: #2fe0a0;
  --accent-ink: #03121c;
  --good: #5ff0b4;
  --good-bg: rgba(47, 224, 160, .14);
  --warn: #ffd48a;
  --warn-bg: rgba(255, 196, 92, .12);
  --bad: #ff9c94;
  --bad-bg: rgba(255, 110, 100, .14);
  --radius: 18px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(1200px 700px at 15% -10%, rgba(35, 87, 201, .10), transparent 60%), radial-gradient(1000px 600px at 95% 10%, rgba(20, 153, 111, .06), transparent 60%), var(--bg); background-attachment: fixed; color: var(--ink); font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
/* The animated background (space.js) sits behind everything; a soft vignette keeps text readable. */
.space { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; }
.space canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The clouds (painted once by cosmos.js) reach 6% past each edge and slide slowly over minutes. Only the transform
   moves, and only by sliding (no scaling), so the browser never repaints or resamples them. */
.space .space-clouds { inset: auto; left: -6%; top: -6%; width: 112%; height: 112%; will-change: transform; animation: cloud-drift 150s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes cloud-drift {
  0% { transform: translate(0, 0); }
  30% { transform: translate(-2.4%, 1.4%); }
  65% { transform: translate(2%, -1.6%); }
  100% { transform: translate(-1.2%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .space .space-clouds { animation: none; } }
.stars-only .space-clouds { display: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .88) 100%); }
.gap-top { margin-top: 14px; }
.gap-top-lg { margin-top: 18px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .14em; font-size: 15px; text-decoration: none; }
.wordmark .tag { padding: 3px 9px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-size: 11px; letter-spacing: .2em; box-shadow: 0 0 18px rgba(57, 208, 255, .35); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-weight: 650; cursor: pointer; text-decoration: none; transition: filter .15s, background .15s; }
.btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 24px rgba(57, 208, 255, .25); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .07); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn:focus-visible, .app-card:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.notice { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; background: var(--bad-bg); color: var(--bad); }
.notice.good { background: var(--good-bg); color: var(--good); }
.notice.info { background: var(--warn-bg); color: var(--warn); }

/* ---- Sign in ---- */
.login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card { width: min(400px, 100%); padding: 36px 32px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.2); }
.login-card h1 { margin: 26px 0 4px; font-size: 24px; letter-spacing: -.01em; }
.login-card .lead { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; }
.field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 6, 12, .6); color: var(--ink); font: inherit; }
.field input:focus { border-color: var(--line-strong); }
.login-card .btn { width: 100%; margin-top: 6px; }
.login-card .notice { margin-bottom: 14px; }
.login-foot { margin: 18px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ---- Choose an app ---- */
.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: rgba(1, 2, 5, .65); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13.5px; }
.who .btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.wrap { width: min(1040px, 100%); margin: 0 auto; padding: 40px 28px 64px; }
.wrap h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; }
.wrap .lead { margin: 0 0 28px; color: var(--muted); }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.app-card { display: grid; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.2); cursor: pointer; overflow: hidden; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.app-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(57, 208, 255, .15), 0 0 40px rgba(57, 208, 255, .12); }
.app-logo { display: grid; place-items: center; height: 150px; padding: 28px 36px; background: linear-gradient(180deg, rgba(57, 208, 255, .06), rgba(47, 224, 160, .03)); border-bottom: 1px solid var(--line); }
.app-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.app-body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.app-body strong { font-size: 17px; }
.app-meta { display: grid; justify-items: start; gap: 10px; color: var(--muted); font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ready { background: var(--good-bg); color: var(--good); }
.pill.setup { background: var(--warn-bg); color: var(--warn); }

/* ---- Open an app: the loader ---- */
.sheet { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(3, 6, 11, .95); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(57, 208, 255, .08); backdrop-filter: blur(16px); }
.sheet::backdrop { background: rgba(2, 4, 9, .55); backdrop-filter: blur(4px); }
.sheet-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(57, 208, 255, .08), rgba(47, 224, 160, .05)); }
.sheet-head img { height: 34px; max-width: 200px; object-fit: contain; }
.sheet-body { display: grid; gap: 16px; padding: 22px 24px 24px; }
.sheet-body h2 { margin: 0; font-size: 20px; }
.choices { display: grid; gap: 10px; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 24px rgba(57, 208, 255, .12); background: rgba(57, 208, 255, .05); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice strong { font-size: 14.5px; }
.choice span { grid-column: 2; color: var(--muted); font-size: 13px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.steps li.doing { color: var(--ink); }
.steps li.doing::before { border-color: var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.steps li.done { color: var(--ink); }
.steps li.done::before { border-color: var(--good); background: var(--good); box-shadow: inset 0 0 0 3px var(--card-solid), 0 0 12px rgba(47, 224, 160, .5); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.doing::before { animation-duration: 2.4s; } .app-card { transition: none; } }

@media (max-width: 600px) {
  .top { padding: 12px 16px; }
  .who span { display: none; }
  .wrap { padding: 28px 16px 48px; }
  .wrap h1 { font-size: 26px; }
  .login-card { padding: 28px 22px 22px; }
}

/* ---- Sign in: just the 196 Global mark and two fields, floating in deep space (cosmos.js) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.void-page { background: #010103; }
body.void-page::after { background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .9) 100%); }
.void { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.void form { display: grid; justify-items: center; gap: 12px; width: min(320px, 100%); }
/* The 196 Global mark: a dark silhouette, nearly the color of space, that drifts in and out of view while a glint of
   starlight sweeps across it. The logo file is used as a mask; the wrapper carries the faint rim light. */
.void-mark { display: block; margin-bottom: 30px; animation: void-drift 13s ease-in-out infinite; }
.void-logo { display: block; width: 156px; height: 156px; -webkit-mask: url(/brand/196-white.png) center / contain no-repeat; mask: url(/brand/196-white.png) center / contain no-repeat;
  /* Dark, never shiny: the fill slowly moulds through the deep blue, violet and green of the clouds behind it. */
  background: linear-gradient(125deg, #1f2b4d 0%, #2a2350 22%, #183a42 44%, #22305a 66%, #2b2050 84%, #1f2b4d 100%) 0 0 / 400% 400%;
  animation: void-arrive 2.6s ease-out 2.4s both, void-mould 26s ease-in-out infinite alternate; }
/* Arriving: a moment of black, then space fades in, then the mark comes out of the dark, then the email and password
   fields. The space fade fills backwards only, so once it ends the exit's opacity transition is free to run. */
.void-intro .space { animation: space-arrive 2.6s ease-in-out .5s backwards; }
@keyframes space-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes void-arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.void form > .void-field, .void form > .void-pass { animation: void-arrive 2s ease-out 4.3s both; }
.void form > .void-pass { animation-delay: 4.7s; }
@keyframes void-drift {
  0%, 100% { opacity: .58; }
  35% { opacity: .92; }
  55% { opacity: .72; }
  75% { opacity: 1; }
}
@keyframes void-mould {
  0% { background-position: 0% 0%; }
  33% { background-position: 100% 30%; }
  66% { background-position: 40% 100%; }
  100% { background-position: 80% 60%; }
}
.void-field { width: 100%; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(10, 14, 28, .82); color: #e6ecff; font: inherit; font-size: 15px; letter-spacing: .02em; text-align: center; backdrop-filter: blur(6px); transition: border-color .25s, box-shadow .25s, background .25s; }
.void-field::placeholder { color: rgba(180, 190, 230, .38); letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }
.void-field:focus { outline: none; background: rgba(16, 22, 42, .92); box-shadow: 0 0 28px rgba(80, 120, 255, .16); }
/* When Safari or a password manager fills a field in, the browser paints it its own bright yellow (or blue in Chrome).
   Cover that with the field's own dark color from the inside, keep the text light, and hold off the browser's color. */
.void-field:-webkit-autofill, .void-field:-webkit-autofill:hover, .void-field:-webkit-autofill:focus { -webkit-text-fill-color: #e6ecff; caret-color: #e6ecff;
  -webkit-box-shadow: 0 0 0 100px #0b0f1d inset; box-shadow: 0 0 0 100px #0b0f1d inset; transition: background-color 600000s 0s, color 600000s 0s; }
.void-field:autofill { -webkit-text-fill-color: #e6ecff; box-shadow: 0 0 0 100px #0b0f1d inset; }
.void-field:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px #111730 inset, 0 0 28px rgba(80, 120, 255, .16); box-shadow: 0 0 0 100px #111730 inset, 0 0 28px rgba(80, 120, 255, .16); }
.void-pass { position: relative; width: 100%; }
.void-pass .void-field { padding-right: 52px; padding-left: 52px; }
.void-go { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .05); color: rgba(220, 230, 255, .75); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.void-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.void-go:hover, .void-go:focus-visible { outline: none; color: #fff; background: rgba(90, 130, 255, .18); box-shadow: 0 0 22px rgba(90, 130, 255, .35); }
.void form.busy .void-go { animation: void-pulse 1s ease-in-out infinite; }
@keyframes void-pulse { 50% { box-shadow: 0 0 26px rgba(60, 200, 190, .55); } }
.void-note { margin: 10px 0 0; color: rgba(255, 150, 160, .85); font-size: 13px; text-align: center; letter-spacing: .02em; }
.void-note.good { color: rgba(140, 230, 200, .85); }
@media (prefers-reduced-motion: reduce) { .void-intro .space, .void-mark, .void-logo, .void form > .void-field, .void form > .void-pass, .void form.busy .void-go { animation: none; } .void-mark { opacity: .85; } }

/* ---- Choose an app: the apps' logos floating in space, dark like the 196 mark ---- */
.void-tools { position: fixed; top: 18px; right: 18px; z-index: 3; display: flex; gap: 10px; }
.void-icon { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .035); color: rgba(200, 212, 245, .55); cursor: pointer; transition: color .25s, background .25s, box-shadow .25s; }
.void-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.void-icon:hover, .void-icon:focus-visible { outline: none; color: #e6ecff; background: rgba(90, 130, 255, .12); box-shadow: 0 0 24px rgba(90, 130, 255, .25); }
.orbit { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 90px 24px; }
.orbit-apps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 80px 110px; }
.orbit-app { display: grid; justify-items: center; gap: 22px; padding: 18px 10px; border: 0; background: none; color: inherit; cursor: pointer; animation: orbit-float 9s ease-in-out infinite; }
.orbit-app:nth-child(2) { animation-delay: -4.5s; animation-duration: 11s; }
.orbit-app:nth-child(3) { animation-delay: -2s; animation-duration: 10s; }
@keyframes orbit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.orbit-logo { display: block; width: 300px; height: 92px; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  background: linear-gradient(125deg, #26324f 0%, #2f2a5c 22%, #1d4248 44%, #2b3a66 66%, #32285c 84%, #26324f 100%) 0 0 / 400% 400%;
  opacity: .82; transition: opacity .4s, filter .4s; animation: void-mould 26s ease-in-out infinite alternate; }
.orbit-app:nth-child(2) .orbit-logo { animation-delay: -9s; }
.orbit-status { color: rgba(170, 182, 225, .32); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; transition: color .4s; }
.orbit-app:hover .orbit-logo, .orbit-app:focus-visible .orbit-logo { opacity: 1; filter: brightness(1.55) drop-shadow(0 0 22px rgba(90, 130, 255, .25)); }
.orbit-app:hover .orbit-status, .orbit-app:focus-visible .orbit-status { color: rgba(190, 205, 245, .6); }
.orbit-app:focus-visible { outline: none; }
@media (max-width: 600px) { .orbit-logo { width: 240px; height: 74px; } .orbit-apps { gap: 56px; } }
@media (prefers-reduced-motion: reduce) { .orbit-app, .orbit-logo { animation: none; } }

/* The open-app panel: dark, no bright surfaces, the app's logo as a dark shape at the top. */
.sheet { border: 0; background: rgba(4, 6, 12, .94); box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 80px rgba(60, 90, 220, .08); }
.sheet::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(5px); }
.sheet-body { padding: 30px 28px 26px; }
.sheet-logo { display: block; width: 220px; height: 64px; margin: 0 auto 6px; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  background: linear-gradient(125deg, #3a4a78 0%, #4a3f86 40%, #2c5f66 70%, #3a4a78 100%) 0 0 / 300% 300%; animation: void-mould 18s ease-in-out infinite alternate; }
.sheet .choice { border-color: rgba(120, 140, 220, .1); background: rgba(255, 255, 255, .015); }
.sheet .choice:has(input:checked) { border-color: rgba(110, 150, 255, .45); background: rgba(80, 110, 255, .07); box-shadow: 0 0 26px rgba(80, 110, 255, .1); }
.sheet .btn.primary { background: rgba(80, 115, 255, .22); color: #e6ecff; box-shadow: 0 0 26px rgba(80, 115, 255, .18); }
.sheet .btn.primary:hover { background: rgba(80, 115, 255, .32); filter: none; }
.sheet .btn.secondary { background: rgba(255, 255, 255, .03); border-color: transparent; }

/* Leaving the sign-in page, in two stages (login.js): first the fields fade and the mark glides to the center at
   its normal size (.leaving); then, centered, it zooms, blurs and dissolves while space rushes in and fades
   (.zooming). Filters carry the fades because the arrival animations own opacity. */
.void-mark { transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
body.leaving .void-field, body.leaving .void-pass, body.leaving .void-note { filter: opacity(0) blur(3px); transition: filter .5s ease-in; }
body.leaving .void-mark { transform: translate(var(--to-x, 0), var(--to-y, 0)); }
body.zooming .void-mark { transform: translate(var(--to-x, 0), var(--to-y, 0)) scale(2.7); filter: blur(16px) opacity(0);
  transition: transform 1.2s cubic-bezier(.55, 0, .75, .3), filter 1.05s ease-in .1s; }
.space { transform-origin: 50% 50%; }
body.zooming .space { transform: scale(1.9); opacity: 0; transition: transform 1.3s cubic-bezier(.5, 0, .75, .2), opacity 1.15s ease-in .1s; }

/* Arriving in the Lab: the chooser eases in from the dark. */
.orbit-apps { animation: void-arrive 1.6s ease-out .15s both; }
.void-tools { animation: void-arrive 1.2s ease-out .6s both; }
/* The clock in the bottom-left corner: thin, pale digits barely lit against the dark, the colon breathing slowly. */
.void-clock { position: fixed; left: 40px; bottom: 32px; z-index: 2; display: flex; align-items: baseline; gap: 12px; color: rgba(190, 205, 245, .42);
  font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 0 24px rgba(90, 130, 255, .22); animation: void-arrive 1.2s ease-out .6s both; }
.clock-time { font-size: 54px; font-weight: 200; letter-spacing: .04em; line-height: 1; }
.clock-colon { display: inline-block; margin: 0 .04em; animation: clock-breathe 2s ease-in-out infinite; }
.clock-ampm { color: rgba(170, 182, 225, .32); font-size: 12.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
@keyframes clock-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 600px) { .void-clock { left: 22px; bottom: 20px; } .clock-time { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .void-clock, .clock-colon { animation: none; } }

/* Just signed in: after the sign-in page fades to black, the stars fade in slowly, then the apps, then the lock and
   sign-out buttons. */
.arriving .space { animation: space-arrive 2.8s ease-in-out .3s backwards; }
.arriving .orbit-apps { animation: void-arrive 1.8s ease-out 2.6s both; }
.arriving .void-tools { animation: void-arrive 1.2s ease-out 3.4s both; }
.arriving .void-clock { animation: void-arrive 1.6s ease-out 3.4s both; }
/* Locking or signing out: the apps and buttons fade and soften away, then the stars fade into black (app.js), and the
   sign-in page fades back in from black. Filters carry the fades because the arrival animations own opacity. */
body.departing .orbit-apps { filter: opacity(0) blur(4px); transition: filter .9s ease-in; }
body.departing .void-tools, body.departing .void-clock { filter: opacity(0); transition: filter .6s ease-in; }
body.departing .space { opacity: 0; transition: opacity 1.4s ease-in-out .5s; }
@media (prefers-reduced-motion: reduce) { .orbit-apps, .void-tools, .arriving .space, .arriving .orbit-apps, .arriving .void-tools, .arriving .void-clock { animation: none; } }

/* Test switches (cosmos.js, ?test=…): turn one effect off at a time to find what stutters, with a frame-rate meter. */
.test-meter { position: fixed; left: 12px; bottom: 12px; z-index: 10; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #9fe8c4; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; }
.test-nologo .void-mark, .test-nologo .orbit-logo, .test-nologo .sheet-logo { animation: none; }
.test-nologo .void-mark { opacity: .85; }
.test-nologo .void-logo { animation: void-arrive 2.6s ease-out 2.4s both; }
.test-noblur .void-field, .test-noblur .sheet, .test-noblur .sheet::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }