:root {
  --bg: #121315;
  --bg-2: #18191C;
  --surface: #1E2024;
  --surface-2: #26292E;
  --line: rgba(236, 238, 242, 0.09);
  --line-strong: rgba(236, 238, 242, 0.18);
  --fg: #ECEEF1;
  --fg-2: #C3C7CE;
  --muted: #8B9099;
  --steel: #A9BDCD;
  --steel-ink: #6E8CA6;
  --invert-bg: #ECEEF1;
  --invert-fg: #121315;
  --ok: #3FD27A;
  --ok-soft: rgba(63, 210, 122, 0.12);
  --instr: #4FD1E8;
  --instr-soft: rgba(79, 209, 232, 0.08);
  --caution: #F2A53A;
  --caution-soft: rgba(242, 165, 58, 0.12);
  --warn: #F0555A;
  --warn-soft: rgba(240, 85, 90, 0.12);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --scrim: rgba(18, 19, 21, 0.82);
  --mark-ink: #A6A6A8;
  --stage-top: #1B1E22;
  --stage-bottom: #121417;
  --stage-glow: 0.26;
  --stage-dot: rgba(236, 238, 242, 0.06);
  --font-display:
    "Montserrat",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-body:
    "Montserrat",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-read: var(--font-body);
  --font-data: var(--font-body);
  --font-cockpit: var(--font-body);
  --font-screen:
    "B612 Mono",
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Consolas,
    monospace;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  --step-5: clamp(2.75rem, 1.2rem + 6vw, 5.75rem);
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1200px;
  --header-h: 64px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) {
    --bg: #F2F2F1;
    --bg-2: #EAEAE8;
    --surface: #FFFFFF;
    --surface-2: #F5F5F4;
    --line: rgba(20, 22, 26, 0.10);
    --line-strong: rgba(20, 22, 26, 0.2);
    --fg: #17181B;
    --fg-2: #3A3D44;
    --muted: #6A6F78;
    --steel: #3F5B72;
    --steel-ink: #3F5B72;
    --invert-bg: #17181B;
    --invert-fg: #F2F2F1;
    --ok: #0A783B;
    --ok-soft: rgba(14, 138, 68, 0.10);
    --instr: #0A7489;
    --instr-soft: rgba(10, 116, 137, 0.07);
    --instr: #0A7489;
    --instr-soft: rgba(10, 116, 137, 0.07);
    --caution: #A9620A;
    --caution-soft: rgba(169, 98, 10, 0.10);
    --warn: #C42B31;
    --warn-soft: rgba(196, 43, 49, 0.09);
    --shadow: 0 20px 50px rgba(20, 22, 26, 0.12);
    --scrim: rgba(242, 242, 241, 0.85);
    --mark-ink: #2B2C2F;
    --stage-top: #E9EAE8;
    --stage-bottom: #DDDFDC;
    --stage-glow: 0.18;
    --stage-dot: rgba(20, 22, 26, 0.07);
    color-scheme: light;
  }
}
:root[data-theme=light] {
  --bg: #F2F2F1;
  --bg-2: #EAEAE8;
  --surface: #FFFFFF;
  --surface-2: #F5F5F4;
  --line: rgba(20, 22, 26, 0.10);
  --line-strong: rgba(20, 22, 26, 0.2);
  --fg: #17181B;
  --fg-2: #3A3D44;
  --muted: #6A6F78;
  --steel: #3F5B72;
  --steel-ink: #3F5B72;
  --invert-bg: #17181B;
  --invert-fg: #F2F2F1;
  --ok: #0A783B;
  --ok-soft: rgba(14, 138, 68, 0.10);
  --caution: #A9620A;
  --caution-soft: rgba(169, 98, 10, 0.10);
  --warn: #C42B31;
  --warn-soft: rgba(196, 43, 49, 0.09);
  --shadow: 0 20px 50px rgba(20, 22, 26, 0.12);
  --scrim: rgba(242, 242, 241, 0.85);
  --mark-ink: #2B2C2F;
  --stage-top: #E9EAE8;
  --stage-bottom: #DDDFDC;
  --stage-glow: 0.18;
  --stage-dot: rgba(20, 22, 26, 0.07);
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--bg);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--steel-ink);
  color: #fff;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
button {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus {
  left: 16px;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.lede {
  font-size: var(--step-1);
  color: var(--fg-2);
  max-width: 60ch;
  line-height: 1.55;
}
.muted {
  color: var(--muted);
}
.display {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.h1 {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.h2 {
  font-size: var(--step-3);
  font-weight: 700;
}
.h3 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 48px;
  padding: 0 1.45em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:has(> .arrow) {
  padding-right: 0.5em;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: .08s;
}
.btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 66%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease-out);
}
.btn:hover::before {
  transform: translateX(110%);
}
.btn-primary,
.btn-ghost,
.pr-btn-lit {
  --pb-bg: var(--invert-bg);
  --pb-fg: var(--invert-fg);
  color: var(--pb-bg);
  border-color: color-mix(in srgb, var(--pb-bg) 30%, transparent);
  background-color: color-mix(in srgb, var(--pb-bg) 4%, transparent);
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .35s var(--ease-out);
}
.btn-primary::before,
.btn-ghost::before,
.pr-btn-lit::before {
  display: none;
}
.btn.btn-primary > .arrow,
.btn.btn-ghost > .arrow,
.btn.pr-btn-lit > .arrow {
  background: color-mix(in srgb, var(--pb-bg) 10%, transparent);
  transition: background-color .35s ease, left .45s var(--ease-out);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible,
.pr-btn-lit:hover,
.pr-btn-lit:focus-visible {
  background-color: var(--pb-bg);
  border-color: var(--pb-bg);
  color: var(--pb-fg);
  transform: none;
}
.btn.btn-primary:hover > .arrow,
.btn.btn-primary:focus-visible > .arrow,
.btn.btn-ghost:hover > .arrow,
.btn.btn-ghost:focus-visible > .arrow,
.btn.pr-btn-lit:hover > .arrow,
.btn.pr-btn-lit:focus-visible > .arrow {
  background: color-mix(in srgb, var(--pb-fg) 12%, transparent);
  left: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-ghost,
  .pr-btn-lit,
  .btn > .arrow {
    transition: none;
  }
}
.btn-sm {
  min-height: 38px;
  padding: 0 1.1em;
  font-size: 0.8125rem;
}
.btn-sm:has(> .arrow) {
  padding-right: 0.4em;
}
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn[disabled]::before {
  display: none;
}
.arrow::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.7em;
  vertical-align: -0.04em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  position: relative;
  left: 0;
  transition: left .35s var(--ease-out);
}
a:hover > .arrow::after {
  left: 3px;
}
.btn > .arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.15em;
  height: 2.15em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 11%, transparent);
  position: relative;
  left: 0;
  transition: background-color .3s ease, left .35s var(--ease-out);
}
.btn > .arrow::after {
  width: 0.85em;
  height: 0.62em;
  vertical-align: 0;
}
.btn:hover > .arrow {
  background: color-mix(in srgb, currentColor 18%, transparent);
  left: 2px;
}
.btn:hover > .arrow::after {
  left: 0;
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn > .arrow,
  .arrow::after {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  white-space: nowrap;
}
.chip-ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.chip-caution {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, transparent);
}
.chip-warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.mark {
  display: inline-block;
  flex: none;
  background-color: var(--mark-ink);
  -webkit-mask: url(../img/mark.svg) center / contain no-repeat;
  mask: url(../img/mark.svg) center / contain no-repeat;
}
.brand-mark {
  width: 36px;
  height: 36px;
}
.brand-word {
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1;
}
.brand-word b,
.brand-word span {
  display: block;
  line-height: 1;
}
.brand-word b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3125rem;
  letter-spacing: 0.02em;
  margin-right: -0.02em;
}
.brand-word span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.46em;
  margin-right: -0.46em;
  color: var(--fg-2);
}
@media (max-width: 380px) {
  .brand-word span {
    letter-spacing: 0.32em;
    margin-right: -0.32em;
  }
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  padding: 12px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: color .3s ease;
}
.nav-trigger:hover,
.nav-trigger.is-current,
.nav-trigger[aria-expanded=true] {
  color: var(--fg);
}
.nav-trigger:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
.nav-chev {
  display: inline-grid;
  width: 9px;
  height: 6px;
  opacity: 0.55;
  transition: opacity .3s ease;
}
.nav-chev svg {
  display: block;
  width: 9px;
  height: 6px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-chev path {
  transform-box: view-box;
  transform-origin: 4.5px 3px;
  transition: transform .45s var(--ease-out);
}
.nav-trigger:hover .nav-chev {
  opacity: 0.9;
}
.nav:not(.has-ink) .nav-trigger.is-current::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
}
.nav-panel {
  position: absolute;
  left: 0;
  top: calc(50% + var(--header-h) / 2 + 9px);
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow), 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--x, 0px), 0);
  will-change: opacity;
  transition: opacity .16s ease .1s, visibility 0s linear .26s;
}
.nav-panel::after {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--ax, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}
.nav-panel::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -24px;
  height: 24px;
}
.nav-item.is-open > .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .2s ease .02s, visibility 0s;
}
.nav-item.is-open .nav-trigger {
  color: var(--fg);
}
.nav-item.is-open .nav-chev {
  opacity: 1;
}
.nav-item.is-open .nav-chev path {
  transform: rotate(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .nav:not(.has-open) .nav-item:not(.is-shut):hover > .nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease .08s, visibility 0s linear .08s;
  }
  .nav:not(.has-open) .nav-item:not(.is-shut):hover .nav-trigger {
    color: var(--fg);
  }
  .nav:not(.has-open) .nav-item:not(.is-shut):hover .nav-chev {
    opacity: 1;
  }
  .nav:not(.has-open) .nav-item:not(.is-shut):hover .nav-chev path {
    transform: rotate(180deg);
  }
}
.nav-panel-in {
  display: grid;
  gap: 6px;
  padding: 10px;
}
.nav-panel-training {
  width: 384px;
}
.nav-panel-library {
  width: 592px;
}
.nav-panel-about {
  width: 360px;
}
.nav-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 8px;
}
.nav-list {
  display: grid;
  gap: 2px;
  align-content: start;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  transition: background-color .25s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.nav-link:focus-visible,
.nav-feature:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}
.nav-ico {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color .35s cubic-bezier(.2, .7, .2, 1);
}
@property --ico-glow { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, 0); }
.nav-ico::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  z-index: -1;
  --ico-glow: rgba(0, 0, 0, 0);
  background:
    radial-gradient(
      closest-side,
      var(--ico-glow),
      rgba(0, 0, 0, 0));
  transition: --ico-glow .45s cubic-bezier(.2, .7, .2, 1);
}
.nav-ico svg {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}
a:hover > .nav-ico,
a:focus-visible > .nav-ico,
.nav-link[aria-current=page] > .nav-ico,
.mnav-group a[aria-current=page] > .nav-ico {
  color: var(--ok);
}
a:hover > .nav-ico::before,
a:focus-visible > .nav-ico::before {
  --ico-glow: color-mix(in srgb, var(--ok) 22%, transparent);
}
.nav-link {
  transition: background-color .4s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .nav-ico,
  .nav-ico::before {
    transition: none;
  }
}
.nav-txt {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.nav-txt b {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
}
.nav-txt small {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.nav-link[aria-current=page] .nav-txt b::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.nav-feature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  color: #ECEEF1;
  background:
    linear-gradient(
      160deg,
      #1B1E22 0%,
      #0F1113 100%);
  border: 1px solid rgba(236, 238, 242, 0.08);
}
@property --nf-y { syntax: "<percentage>"; inherits: false; initial-value: 112%; }
@property --nf-a { syntax: "<number>"; inherits: false; initial-value: 0.15; }
.nav-feature {
  --nf-y: 112%;
  --nf-a: 0.15;
  background:
    radial-gradient(
      75% 55% at 50% var(--nf-y),
      rgba(98, 176, 240, var(--nf-a)),
      rgba(98, 176, 240, 0) 100%),
    linear-gradient(
      160deg,
      #1B1E22 0%,
      #0F1113 100%);
  transition: --nf-y .6s var(--ease-out), --nf-a .4s ease;
}
.nav-feature:hover,
.nav-feature:focus-visible {
  --nf-y: 100%;
  --nf-a: 0.24;
}
.nav-feature-k {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #62B0F0;
}
.nav-feature b {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.nav-feature-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(236, 238, 242, 0.75);
  transition: color .25s ease;
}
.nav-feature:hover .nav-feature-go {
  color: #ECEEF1;
}
html:not(.js) .nav-item {
  position: relative;
}
html:not(.js) .nav-panel {
  top: calc(100% + 10px);
}
html:not(.js) .nav-item:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-chev,
  .nav-chev path,
  .nav-ext path,
  .nav-ico,
  .nav-ico::before,
  .nav-feature {
    transition: none;
  }
}
.nav-ink {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--fg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
  transition:
    transform .45s var(--ease-out),
    width .45s var(--ease-out),
    opacity .25s ease;
}
.nav-ink.is-on {
  opacity: 1;
}
.nav-ink.no-anim {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-ink {
    transition: opacity .2s ease;
  }
}
@view-transition {
  navigation: auto;
}
.site-header {
  view-transition-name: site-header;
}
.site-header {
  overflow-x: clip;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .28s;
  animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
html::before,
html::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
html::before {
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 45px,
      color-mix(in srgb, var(--fg) 12%, transparent) 46px 47px,
      transparent 48px),
    color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html::after {
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -30px 0 0 -26px;
  background-color: var(--mark-ink);
  -webkit-mask: url(../img/mark.svg) center / contain no-repeat;
  mask: url(../img/mark.svg) center / contain no-repeat;
  transform-origin: 49.8% 57.4%;
}
html.is-loading::before,
html.is-loading::after {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
  animation: veil-cap 0s linear 4.2s forwards;
}
html.is-loading::after {
  animation: veil-spin .8s linear infinite, veil-cap 0s linear 4.2s forwards;
}
@keyframes veil-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes veil-cap {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.is-loading::after {
    animation: veil-cap 0s linear 4.2s forwards;
  }
}
@media print {
  html::before,
  html::after {
    display: none;
  }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  color: var(--fg-2);
  transition:
    color .25s ease,
    border-color .25s ease,
    background-color .25s ease,
    transform .35s var(--ease-out);
}
.icon-btn:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.icon-btn:active {
  transform: scale(0.94);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.header-actions .icon-btn {
  position: relative;
}
.header-actions .icon-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}
.menu-btn {
  display: none;
}
.header-login {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .25s ease;
}
.header-login:hover {
  color: var(--fg);
}
.header-up {
  display: none;
}
html[data-me] .header-login,
html[data-me] .header-cta {
  display: none;
}
html[data-me=free] .header-up {
  display: inline-flex;
}
.menu-l {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2, .7, .2, 1);
}
.menu-btn[aria-expanded=true] .menu-l1 {
  transform: translateY(4px) rotate(45deg);
}
.menu-btn[aria-expanded=true] .menu-l2 {
  transform: translateY(-4px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .menu-l {
    transition: none;
  }
}
@media (max-width: 959px) {
  .nav {
    display: none;
  }
  .menu-btn {
    display: inline-grid;
  }
  .header-actions {
    margin-left: auto;
  }
  .header-cta {
    display: none;
  }
  .header-login,
  html[data-me] .header-up {
    display: none;
  }
}
@media (min-width: 960px) {
  .mobile-nav {
    display: none !important;
  }
}
@media (max-width: 359px) {
  .site-header .wrap {
    gap: 12px;
  }
  .site-header .brand {
    gap: 9px;
  }
  .site-header .brand-mark {
    width: 30px;
    height: 30px;
  }
  .site-header .brand-word {
    gap: 8px;
  }
  .site-header .brand-word b {
    font-size: 1.125rem;
  }
  .site-header .brand-word span {
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }
  .header-actions {
    gap: 6px;
  }
}
main:focus {
  outline: none;
}
img.is-broken {
  visibility: hidden;
}
.mobile-nav {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0;
  z-index: 49;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a small {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .12em;
}
.mobile-nav .btn {
  margin-top: 24px;
  width: 100%;
}
.mnav-group {
  display: grid;
  gap: 2px;
  padding-block: 18px 12px;
  border-bottom: 1px solid var(--line);
}
.mnav-label {
  padding: 0 4px 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-nav .mnav-group a {
  justify-content: flex-start;
  gap: 14px;
  padding: 9px 4px;
  border-bottom: 0;
  font-size: 1.0625rem;
  border-radius: 12px;
}
.mobile-nav .mnav-group a .nav-txt b {
  font-size: 1.0625rem;
}
.mobile-nav .mnav-group a small {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
}
.mobile-nav > .btn {
  justify-content: center;
  font-size: 1rem;
  padding: 0 1.45em;
  min-height: 54px;
  border-bottom-color: color-mix(in srgb, var(--pb-bg) 30%, transparent);
}
.mobile-nav > .btn:hover,
.mobile-nav > .btn:focus-visible {
  border-bottom-color: var(--pb-bg);
}
.mobile-nav > .mnav-alt {
  justify-content: center;
  gap: 0.3em;
  margin-top: 6px;
  padding: 14px 4px;
  min-height: 48px;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-2);
}
.mobile-nav > .mnav-alt b {
  font-weight: 600;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.mobile-nav > .mnav-account,
.mobile-nav > .mnav-up {
  display: none;
}
html[data-me] .mobile-nav > .mnav-cta,
html[data-me] .mobile-nav > .mnav-login {
  display: none;
}
html[data-me] .mobile-nav > .mnav-account,
html[data-me=free] .mobile-nav > .mnav-up {
  display: flex;
}
.mobile-nav .mnav-group a[aria-current=page] .nav-txt b::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.mobile-nav {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .24s ease;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.mobile-nav .mnav-label,
.mobile-nav .mnav-group a,
.mobile-nav > .btn,
.mobile-nav > .mnav-alt {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .16s ease,
    transform .2s ease,
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease;
}
.mobile-nav.is-open .mnav-label,
.mobile-nav.is-open .mnav-group a,
.mobile-nav.is-open > .btn,
.mobile-nav.is-open > .mnav-alt {
  opacity: 1;
  transform: none;
  transition:
    opacity .4s ease calc(60ms + var(--i, 0) * 28ms),
    transform .55s cubic-bezier(.2, .7, .2, 1) calc(60ms + var(--i, 0) * 28ms),
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav .mnav-label,
  .mobile-nav .mnav-group a,
  .mobile-nav > .btn,
  .mobile-nav > .mnav-alt {
    transform: none !important;
    transition: none !important;
  }
  .mobile-nav.is-open,
  .mobile-nav.is-open .mnav-label,
  .mobile-nav.is-open .mnav-group a,
  .mobile-nav.is-open > .btn,
  .mobile-nav.is-open > .mnav-alt {
    opacity: 1;
  }
}
.mnav-more {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(92px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      0deg,
      var(--bg) 22%,
      color-mix(in srgb, var(--bg) 78%, transparent) 52%,
      transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.mnav-more.is-on {
  opacity: 1;
}
.mnav-more span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.mnav-more svg {
  width: 12px;
  height: 12px;
  animation: mnav-nudge 1.8s ease-in-out infinite;
}
@keyframes mnav-nudge {
  0%, 100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(2px);
  }
}
@media (min-width: 960px) {
  .mnav-more {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mnav-more {
    transition: none;
  }
  .mnav-more svg {
    animation: none;
  }
}
.section {
  padding-block: clamp(64px, 9vw, 120px);
}
.js .rv {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.js .rv.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease var(--rv-d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    opacity: 1;
    transform: none;
  }
}
@media print {
  .js .rv {
    opacity: 1;
    transform: none;
  }
}
.section + .section {
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 52px);
  max-width: 760px;
}
.section-head.split {
  max-width: none;
  grid-template-columns: 1fr auto;
  align-items: end;
}
@media (max-width: 720px) {
  .section-head.split {
    grid-template-columns: 1fr;
  }
}
.rule-label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rule-label::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}
.page-hero {
  padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.page-hero .h1 {
  max-width: 16ch;
}
.page-hero .lede {
  margin-top: 18px;
}
.page-hero .eyebrow {
  margin-bottom: 18px;
  display: block;
}
.page-hero-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 16px;
  max-width: 36ch;
}
.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--fg-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-mail svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ok);
}
.footer-mail:hover {
  color: var(--fg);
}
.footer-col .footer-h {
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.footer-col a {
  text-decoration: none;
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.footer-col a:hover {
  color: var(--fg);
}
@media (pointer: coarse) {
  .footer-col a {
    display: inline-block;
    padding-block: 4px;
    margin-block: -4px;
  }
}
:root[data-theme=light] .site-footer {
  --muted: #585D66;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .site-footer {
    --muted: #585D66;
  }
}
.footer-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-base p {
  max-width: 70ch;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal-body {
  padding-block: 8px 72px;
}
.legal .prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2em;
}
.legal .prose ul {
  padding-left: 1.2em;
}
.legal .prose li + li {
  margin-top: 0.45em;
}
.footer-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0c0d0f;
  color: #F2F3F5;
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
  filter: saturate(0.75) contrast(1.05);
  animation: hero-settle 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 85% at 50% 40%,
      rgba(10, 11, 13, 0.80) 0%,
      rgba(10, 11, 13, 0.62) 55%,
      rgba(10, 11, 13, 0.88) 100%),
    linear-gradient(
      0deg,
      rgba(10, 11, 13, 0.95) 0%,
      rgba(10, 11, 13, 0) 40%);
}
.hero-tagline {
  max-width: 38ch;
  margin-top: clamp(26px, 3vw, 38px);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: 0.002em;
  color: rgba(242, 243, 245, 0.78);
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 3.6vw, 44px);
}
.hero-plus {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.72;
  max-width: 46ch;
}
.hero .btn {
  min-height: 54px;
  font-size: 1rem;
}
.hero .btn-primary {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
}
.hero .btn-ghost {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
}
.hero .btn:focus-visible {
  outline-color: #F2F3F5;
}
.hero-title,
.hero-tagline,
.hero-cta,
.hero-q {
  animation: hero-rise 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-tagline {
  animation-delay: .08s;
}
.hero-cta {
  animation-delay: .16s;
}
.hero-q {
  animation-delay: .24s;
}
@keyframes hero-rise {
  from {
    opacity: 0.25;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
.hero-home {
  --fade: clamp(150px, 15vw, 250px);
  background: var(--bg);
  border-bottom: 0;
  padding-bottom: calc(var(--fade) - clamp(30px, 4vw, 50px));
}
.hero-home::before {
  content: none;
}
.hero-home + .airlines {
  padding-top: clamp(4px, 1vw, 14px);
}
.hero-home {
  --fade: calc(clamp(36px, 5vw, 60px) + clamp(64px, 9vw, 120px) + 12px);
}
.hero-home .hero-photo {
  background: #0c0d0f;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 calc(100% - var(--fade)),
      rgba(0, 0, 0, 0.55) calc(100% - var(--fade) * 0.45),
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 calc(100% - var(--fade)),
      rgba(0, 0, 0, 0.55) calc(100% - var(--fade) * 0.45),
      transparent 100%);
}
.hero-home .hero-photo img {
  filter: saturate(0.9) contrast(1.08);
}
.hero-home .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(
      48% 44% at 26% 42%,
      rgba(98, 176, 240, 0.09),
      transparent 70%),
    linear-gradient(
      90deg,
      rgba(10, 11, 13, 0.90) 0%,
      rgba(10, 11, 13, 0.74) 40%,
      rgba(10, 11, 13, 0.46) 72%,
      rgba(10, 11, 13, 0.62) 100%),
    linear-gradient(
      0deg,
      rgba(10, 11, 13, 0.95) 0%,
      rgba(10, 11, 13, 0) 42%);
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(44px, 6vw, 88px) clamp(36px, 4vw, 56px);
}
.hero-copy {
  min-width: 0;
  padding-top: clamp(0px, 3vw, 44px);
}
.hero-title {
  margin: 0;
  max-width: 11.5ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.25rem + 3.9vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: #FFFFFF;
  text-wrap: balance;
}
.hero-title span {
  display: block;
  margin-top: 0.18em;
  color: rgba(242, 243, 245, 0.5);
}
.hero-q {
  min-width: 0;
  --surface: rgba(28,31,35,0.72);
  --surface-2: rgba(242,243,245,0.07);
  --line: rgba(236,238,242,0.13);
  --line-strong: rgba(236,238,242,0.24);
  --fg: #ECEEF1;
  --fg-2: #C3C7CE;
  --muted: #8B9099;
  --ok: #3FD27A;
  --ok-soft: rgba(63,210,122,0.13);
  --warn: #F0555A;
  --warn-soft: rgba(240,85,90,0.13);
  --caution: #F2A53A;
  --caution-soft: rgba(242,165,58,0.12);
  --invert-bg: #ECEEF1;
  --invert-fg: #121315;
  color: var(--fg);
}
@property --q-lit { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero-q .qcard {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  padding: clamp(20px, 2.4vw, 30px);
  border-color: rgba(242, 243, 245, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(30, 33, 38, 0.82),
      rgba(18, 20, 23, 0.88));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.9),
    0 0 60px -20px rgba(98, 176, 240, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --mx: 50%;
  --my: 0%;
  --q-lit: 0;
  transition: --q-lit .6s ease, box-shadow .6s ease;
}
.hero-q .qcard.is-lit {
  --q-lit: 1;
  box-shadow:
    0 46px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 70px -18px rgba(98, 176, 240, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-q .qcard::before,
.hero-q .qbeam {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      240px circle at var(--mx) var(--my),
      rgba(242, 243, 245, calc(0.55 * var(--q-lit))),
      transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hero-q .qbeam {
  z-index: 1;
  background: none;
  overflow: hidden;
}
.hero-q .qbeam i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--qb, 150%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    conic-gradient(
      transparent 0deg,
      rgba(98, 176, 240, 0.0) 20deg,
      rgba(98, 176, 240, 0.85) 70deg,
      rgba(98, 176, 240, 0.25) 110deg,
      transparent 150deg,
      transparent 360deg);
  animation: q-beam 9s linear infinite;
  will-change: rotate;
}
@keyframes q-beam {
  to {
    rotate: 360deg;
  }
}
.hero-q.is-offscreen .qbeam i,
.hero-q.is-offscreen .qcard-top .eyebrow::before {
  animation-play-state: paused;
}
.hero-q .qcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(
      420px circle at var(--mx) var(--my),
      rgba(242, 243, 245, calc(0.06 * var(--q-lit))),
      transparent 65%);
}
.hero-q .opts li {
  animation: q-in .7s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-q .opts li:nth-child(1) {
  animation-delay: .42s;
}
.hero-q .opts li:nth-child(2) {
  animation-delay: .5s;
}
.hero-q .opts li:nth-child(3) {
  animation-delay: .58s;
}
.hero-q .opts li:nth-child(4) {
  animation-delay: .66s;
}
@keyframes q-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.hero-q .opt {
  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .25s ease;
}
.hero-q .opt:hover:not([disabled]) {
  transform: translateX(2px);
}
.hero-q .opt.is-correct,
.hero-q .opt.is-wrong {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: q-fill .8s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-q .opt.is-correct {
  background-image:
    linear-gradient(
      90deg,
      rgba(63, 210, 122, 0.20),
      rgba(63, 210, 122, 0.08));
}
.hero-q .opt.is-wrong {
  background-image:
    linear-gradient(
      90deg,
      rgba(240, 85, 90, 0.18),
      rgba(240, 85, 90, 0.07));
}
@keyframes q-fill {
  from {
    background-size: 0% 100%;
  }
}
.hero-q .qcard-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}
.hero-q .qcard-top > .cluster {
  grid-column: 1 / -1;
  grid-row: 2;
}
.hero-q .qdate {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(242, 243, 245, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-q .qdate-short {
  display: none;
}
@media (max-width: 420px) {
  .hero-q .qdate-long {
    display: none;
  }
  .hero-q .qdate-short {
    display: inline;
  }
  .hero-q .qcard-top .eyebrow {
    letter-spacing: 0.14em;
  }
}
.hero-q .qcard-top .eyebrow {
  white-space: nowrap;
}
.hero-q .qcard-top .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #62B0F0;
}
.hero-q .qcard-top .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: live-dot 2.4s ease-in-out infinite;
}
@keyframes live-dot {
  50% {
    opacity: 0.35;
  }
}
.hero-q .qtext {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}
.hero-q .opts {
  margin-top: 18px;
  gap: 8px;
}
@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-home .hero-photo::after {
    background:
      radial-gradient(
        70% 40% at 30% 20%,
        rgba(98, 176, 240, 0.08),
        transparent 70%),
      linear-gradient(
        180deg,
        rgba(10, 11, 13, 0.66) 0%,
        rgba(10, 11, 13, 0.80) 45%,
        rgba(10, 11, 13, 0.92) 100%);
  }
}
@media (max-width: 520px) {
  .hero-split .hero-cta .btn,
  .ab-hero-cta .btn {
    width: 100%;
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-q .qbeam i,
  .hero-q .opts li,
  .hero-q .opt.is-correct,
  .hero-q .opt.is-wrong,
  .hero-q .qcard-top .eyebrow::before {
    animation: none;
  }
  .hero-q .opt:hover:not([disabled]) {
    transform: none;
  }
}
.tools-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 20px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.tools-head .stack {
  gap: 16px;
}
.tools-head > .stack:only-child {
  grid-column: 1 / -1;
}
.tools-title {
  max-width: 16ch;
  font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tools-title span {
  display: block;
  margin-top: 0.12em;
  color: var(--muted);
}
.arts-side {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.arts-side .tools-lede {
  padding-bottom: 0;
}
.tools-lede {
  color: var(--fg-2);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  line-height: 1.7;
  max-width: 40ch;
  padding-bottom: 0.35em;
}
.tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tool {
  --glow:
    63,
    224,
    127;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    border-color .4s ease,
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out);
}
.tool-ecam {
  --glow:
    242,
    165,
    58;
}
.tool-cockpit {
  --glow:
    120,
    160,
    196;
}
.tool-mcdu {
  --glow:
    79,
    209,
    232;
}
.tool-ask {
  --glow:
    63,
    224,
    127;
}
.tool-prep {
  --glow:
    242,
    165,
    58;
}
.tool:hover,
.tool:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 34px 64px -38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--glow), 0.1);
}
.tool:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.tool-feature {
  grid-column: 1 / -1;
}
.ab-tile-main .tool-shot {
  aspect-ratio: 16 / 9 !important;
}
.tool-stage {
  position: relative;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0;
  overflow: hidden;
  background:
    radial-gradient(
      70% 90% at 50% 100%,
      rgba(var(--glow), var(--stage-glow)),
      transparent 70%),
    radial-gradient(
      circle at 1px 1px,
      var(--stage-dot) 1px,
      transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(
      180deg,
      var(--stage-top),
      var(--stage-bottom));
  border-bottom: 1px solid var(--line);
}
.tool-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background:
    radial-gradient(
      70% 90% at 50% 100%,
      rgba(var(--glow), var(--stage-glow)),
      transparent 70%);
}
.tool:hover .tool-stage::before,
.tool:focus-visible .tool-stage::before {
  opacity: 1;
}
.tool-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: #0c0d0f;
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(242, 243, 245, 0.15);
  border-bottom: 0;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -28px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(var(--glow), 0.05);
  transform: translateY(8px);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.tool-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 30%);
}
.tool-shot picture,
.tool-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.tool:hover .tool-shot,
.tool:focus-visible .tool-shot {
  transform: translateY(0);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.06) inset,
    0 36px 70px -28px rgba(0, 0, 0, 0.7),
    0 0 0 6px rgba(var(--glow), 0.08);
}
.tool:hover .tool-shot img,
.tool:focus-visible .tool-shot img {
  transform: scale(1.025);
}
.tool-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: clamp(22px, 2.6vw, 32px);
}
.tool-body {
  container: tool / inline-size;
}
@container tool (max-width: 420px) {
  .tool-body .tool-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}
.tool-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-i {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.tool-i::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}
.tool-body .h3 {
  margin-top: 2px;
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.tool-body p {
  color: var(--fg-2);
  font-size: 0.9688rem;
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: 14px;
}
.tool-foot {
  align-self: stretch;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.tool-proof {
  display: flex;
  gap: clamp(18px, 2.4vw, 28px);
}
.tool-proof:has(> .tool-stat:nth-child(3)) {
  gap: 18px;
}
.tool-stat {
  display: grid;
  gap: 2px;
  line-height: 1.15;
}
.tool-stat b {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tool-stat small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}
.tool-go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: var(--fg);
  white-space: nowrap;
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease;
}
.tool-go .arrow {
  position: relative;
  left: 0;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  transition: background-color .35s ease, left .45s var(--ease-out);
}
.tool-go .arrow::after {
  width: 0.8em;
  height: 0.6em;
  vertical-align: 0;
}
.tool:hover .tool-go,
.tool:focus-visible .tool-go,
.practice:hover .tool-go,
.practice:focus-visible .tool-go,
.ab-tile:hover .tool-go,
.ab-tile:focus-visible .tool-go {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.tool:hover .tool-go .arrow,
.tool:focus-visible .tool-go .arrow,
.practice:hover .tool-go .arrow,
.practice:focus-visible .tool-go .arrow,
.ab-tile:hover .tool-go .arrow,
.ab-tile:focus-visible .tool-go .arrow {
  background: color-mix(in srgb, var(--invert-fg) 12%, transparent);
  left: 2px;
}
a:hover .tool-go .arrow::after,
a:focus-visible .tool-go .arrow::after {
  left: 0;
}
@media (min-width: 900px) {
  .tool-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .tool-feature .tool-stage {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding-bottom: 0;
    display: flex;
    align-items: flex-end;
  }
  .tool-feature .tool-shot {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .tool-feature .tool-body {
    justify-content: center;
    padding: clamp(32px, 3.6vw, 44px);
    gap: 12px;
  }
  .tool-feature .tool-body .h3 {
    font-size: clamp(1.875rem, 1.3rem + 1.2vw, 2.5rem);
    letter-spacing: -0.03em;
  }
  .tool-feature .tool-body p {
    font-size: 1.0625rem;
    max-width: 38ch;
    margin-bottom: 18px;
  }
  .tool-feature .tool-foot {
    margin-top: 0;
  }
  .tool-feature.tool-flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .tool-flip .tool-stage {
    order: 2;
    border-right: 0;
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 860px) {
  .tools-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 680px) {
  .tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool {
    border-radius: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool,
  .tool-shot,
  .tool-shot img,
  .tool-stage::before,
  .tool-go,
  .tool-go .arrow {
    transition: none;
  }
  .tool:hover,
  .tool:focus-visible,
  .tool:hover .tool-shot,
  .tool:focus-visible .tool-shot {
    transform: none;
  }
  .tool:hover .tool-shot img,
  .tool:focus-visible .tool-shot img {
    transform: none;
  }
}
.qotd {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .qotd {
    grid-template-columns: 1fr;
  }
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(20px, 3vw, 32px);
}
.qcard-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.qtext {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.opts {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  list-style: none;
  padding: 0;
}
.opt {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  font-size: 0.9875rem;
  line-height: 1.4;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt:hover:not([disabled]) {
  border-color: var(--fg-2);
  background: var(--surface-2);
}
.opt .key {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.opt .verdict {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opt[disabled] {
  cursor: default;
}
.opt.is-correct {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.opt.is-correct .key {
  border-color: var(--ok);
  color: var(--ok);
}
.opt.is-correct .verdict {
  color: var(--ok);
}
.opt.is-wrong {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.opt.is-wrong .key {
  border-color: var(--warn);
  color: var(--warn);
}
.opt.is-wrong .verdict {
  color: var(--warn);
}
.opt.is-dim {
  opacity: 0.5;
}
.qnote {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 0.875rem;
}
.qfoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.bar {
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--fg);
  border-radius: 4px;
  transition: width .3s ease;
}
.bar.ok > i {
  background: var(--ok);
}
.segbar {
  display: flex;
  gap: 3px;
}
.segbar i {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--line-strong);
}
.segbar i.ok {
  background: var(--ok);
}
.segbar i.bad {
  background: var(--warn);
}
.segbar i.now {
  background: var(--fg);
}
.article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .article-list {
    grid-template-columns: 1fr;
  }
}
.acard {
  --kind:
    63,
    224,
    127;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  transition:
    border-color .4s ease,
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out);
}
.acard:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -34px rgba(0, 0, 0, 0.55);
}
.acard:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.acard-img {
  position: relative;
  margin: 8px 8px 0;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  border-radius: 15px;
  background: #0c0d0f;
}
.acard-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 30%,
      transparent 62%,
      rgba(10, 11, 13, 0.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.acard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.04);
  transition: transform .9s var(--ease-out), filter .6s ease;
}
.acard:hover .acard-img img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04);
}
.acard-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 28px);
}
.acard-body .h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.acard-body p {
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.acard-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--kind));
}
.acard-kind::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.acard-kind.is-exclusive {
  --kind:
    242,
    165,
    58;
}
:root[data-theme=light] .acard {
  --kind:
    11,
    122,
    59;
}
:root[data-theme=light] .acard-kind.is-exclusive {
  --kind:
    150,
    86,
    8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .acard {
    --kind:
      11,
      122,
      59;
  }
  :root:not([data-theme=dark]) .acard-kind.is-exclusive {
    --kind:
      150,
      86,
      8;
  }
}
.acard-time {
  font-size: 0.8125rem;
  color: var(--muted);
}
.acard-go {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 5px 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8438rem;
  color: var(--fg);
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease;
}
.acard-body p {
  margin-bottom: 10px;
}
.acard-go .arrow {
  position: relative;
  left: 0;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  transition: background-color .35s ease, left .45s var(--ease-out);
}
.acard-go .arrow::after {
  width: 0.8em;
  height: 0.6em;
  vertical-align: 0;
}
.acard:hover .acard-go {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.acard:hover .acard-go .arrow {
  background: color-mix(in srgb, var(--invert-fg) 12%, transparent);
  left: 2px;
}
.acard:hover .acard-go .arrow::after {
  left: 0;
}
@media (prefers-reduced-motion: reduce) {
  .acard,
  .acard-img img,
  .acard-go,
  .acard-go .arrow {
    transition: none;
  }
  .acard:hover {
    transform: none;
  }
  .acard:hover .acard-img img {
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(body.is-article) {
    scroll-behavior: smooth;
  }
}
.article-head {
  padding-block: clamp(40px, 6vw, 84px) clamp(30px, 3.6vw, 48px);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: clamp(24px, 3vw, 34px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.article-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.article-kind {
  --kind:
    63,
    224,
    127;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--kind));
}
.article-kind::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.article-kind.is-exclusive {
  --kind:
    242,
    165,
    58;
}
:root[data-theme=light] .article-kind {
  --kind:
    10,
    120,
    59;
}
:root[data-theme=light] .article-kind.is-exclusive {
  --kind:
    169,
    98,
    10;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .article-kind {
    --kind:
      10,
      120,
      59;
  }
  :root:not([data-theme=dark]) .article-kind.is-exclusive {
    --kind:
      169,
      98,
      10;
  }
}
.article-title {
  margin-top: 18px;
  max-width: 19ch;
  font-size: clamp(2.25rem, 1.25rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.article-dek {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.3125rem);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.article-cover {
  position: relative;
  aspect-ratio: 2.35 / 1;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: #0c0d0f;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.article-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      transparent 28%,
      transparent 70%,
      rgba(10, 11, 13, 0.22));
}
.article-cover img,
.article-cover picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .article-cover {
    aspect-ratio: 16 / 10;
  }
}
.article-page {
  --measure: 680px;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.article-col {
  min-width: 0;
}
@media (max-width: 560px) {
  .article-meta .meta-x {
    display: none;
  }
  .prose .kp-list > li {
    grid-template-columns: 1.75em minmax(0, 1fr);
    gap: 0 8px;
  }
  .keypoints {
    border-radius: 18px;
  }
}
.prose {
  font-family: var(--font-read);
  font-size: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
  line-height: 1.75;
  color: var(--fg);
  max-width: var(--measure);
  counter-reset: sec;
  font-variant-numeric: proportional-nums;
}
.prose > * {
  margin: 0;
}
.prose > * + * {
  margin-top: 1.15em;
}
.prose strong {
  font-weight: 600;
}
.prose em {
  font-style: italic;
}
.prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
  transition: text-decoration-color .2s ease;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose code {
  font-family: var(--font-screen);
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.prose [id] {
  scroll-margin-top: 28px;
}
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}
.prose > h2.sec {
  margin-top: 2.5em;
  font-size: clamp(1.5rem, 1.22rem + 0.95vw, 2rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
}
.prose > h2.sec::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.prose > h2.sec + * {
  margin-top: 0.85em;
}
.prose > h2.sec ~ h2.sec {
  margin-top: 2.6em;
  padding-top: 2.4em;
  background:
    linear-gradient(
      90deg,
      rgba(var(--sec-rule), 0) 0%,
      rgba(var(--sec-rule), 0.5) 22%,
      rgba(var(--sec-rule), 0.5) 78%,
      rgba(var(--sec-rule), 0) 100%) top center / 100% 1px no-repeat;
}
.prose {
  --sec-rule:
    63,
    224,
    127;
}
:root[data-theme=light] .prose {
  --sec-rule:
    14,
    138,
    68;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .prose {
    --sec-rule:
      14,
      138,
      68;
  }
}
.prose > h3 {
  margin-top: 2em;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.prose > h3.sec-part .sec-part-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 0.15em;
}
.prose > h4 {
  margin-top: 1.9em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.5;
}
.prose > h3 + *,
.prose > h4 + * {
  margin-top: 0.7em;
}
.prose ul,
.prose ol {
  list-style: none;
  padding: 0;
}
.prose li {
  position: relative;
  padding-left: 1.6em;
}
.prose li + li {
  margin-top: 0.55em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.55em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel);
  opacity: 0.75;
}
.prose li ul > li::before {
  background: transparent;
  border: 1.5px solid var(--steel);
  width: 6px;
  height: 6px;
  opacity: 0.6;
}
.prose li ul > li {
  color: var(--fg-2);
}
.prose ol {
  counter-reset: li;
}
.prose ol > li {
  counter-increment: li;
  padding-left: 2em;
}
.prose ol > li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.prose > .opening {
  display: grid;
  gap: 1.1em;
}
.opening p {
  margin: 0;
}
.opening .greeting {
  color: var(--muted);
  font-weight: 500;
}
.opening .greeting strong {
  color: var(--fg-2);
  font-weight: 600;
}
.opening .lead {
  font-size: clamp(1.1875rem, 1.1rem + 0.42vw, 1.375rem);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.prose > .keypoints {
  margin-top: clamp(36px, 5vw, 52px);
}
.prose > .keypoints + * {
  margin-top: clamp(36px, 5vw, 52px);
}
.prose > h2.sec + .keypoints {
  margin-top: 0.9em;
}
.keypoints {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3.2vw, 36px) clamp(6px, 1vw, 10px);
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -36px rgba(0, 0, 0, 0.3);
}
.keypoints::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--steel) 6%, transparent),
      transparent);
}
.kp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.prose .kp-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg);
}
.kp-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.prose .kp-list {
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.prose .kp-list > li {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 0 clamp(10px, 1.4vw, 14px);
  padding: clamp(15px, 1.8vw, 19px) 0;
  margin: 0;
  color: var(--fg);
}
.prose .kp-list > li::before {
  content: none;
}
.prose .kp-list > li + li {
  border-top: 1px solid var(--line);
}
.kp-n {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
}
.kp-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.kp-lead {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.kp-line {
  color: var(--fg-2);
}
.is-titled .kp-lead {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.is-titled .kp-line {
  display: block;
  margin-top: 4px;
  font-size: 0.9688rem;
  line-height: 1.6;
}
.is-titled .kp-line::first-letter {
  text-transform: uppercase;
}
.is-run-in .kp-lead {
  font-weight: 600;
}
@media (min-width: 760px) {
  .kp-takeaways .kp-list,
  .kp-insights.is-titled .kp-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
  }
  .prose .kp-takeaways .kp-list > li + li,
  .prose .kp-insights.is-titled .kp-list > li + li {
    border-top: 0;
  }
  .prose .kp-takeaways .kp-list > li:nth-child(n+3),
  .prose .kp-insights.is-titled .kp-list > li:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
}
.prose > .callout {
  margin-top: clamp(32px, 4.4vw, 48px);
  padding: 4px 0 4px clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--fg);
}
.prose > .callout + * {
  margin-top: clamp(32px, 4.4vw, 48px);
}
.callout-k {
  display: block;
  margin-bottom: 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.callout blockquote {
  margin: 0;
}
.callout blockquote p {
  margin: 0;
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  line-height: 1.58;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}
.prose > blockquote {
  padding-left: 1.2em;
  border-left: 2px solid var(--line-strong);
  color: var(--fg-2);
}
.prose > blockquote p {
  margin: 0;
}
.prose > .checks {
  display: grid;
  gap: 1.1em;
}
.prose .checks > li {
  padding-left: 2.6em;
}
.prose .checks > li + li {
  margin-top: 0;
}
.prose .checks > li::before {
  left: 0;
  top: 0.18em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  opacity: 1;
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
}
.prose .checks > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.6em;
  height: 1.6em;
  background-color: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.5 12.4 3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.5 12.4 3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.prose > .yt-note {
  margin-top: clamp(32px, 4.4vw, 48px);
}
.prose > .yt-note + * {
  margin-top: clamp(32px, 4.4vw, 48px);
}
.prose > .yt-note + h2.sec {
  margin-top: 2.2em;
}
.yt-note {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 14px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  transition:
    border-color .3s ease,
    background-color .3s ease,
    transform .45s var(--ease-out);
}
.yt-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease;
}
.yt-ic svg {
  width: 22px;
  height: 22px;
}
.yt-txt {
  display: grid;
  gap: 2px;
  margin: 0;
  line-height: 1.45;
  min-width: 0;
}
.yt-line {
  font-size: 0.9688rem;
  font-weight: 600;
  color: var(--fg);
}
.prose .yt-line a {
  text-decoration: none;
}
.yt-line a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.yt-sub {
  font-size: 0.8125rem;
  color: var(--muted);
}
.yt-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  transition: background-color .3s ease, color .3s ease;
}
.yt-go .arrow::after {
  width: 0.85em;
  height: 0.62em;
  vertical-align: 0;
}
.yt-note:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}
.yt-note:hover .yt-ic {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  background: var(--warn-soft);
}
.yt-note:hover .yt-go {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.yt-note:has(a:focus-visible) {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}
.yt-line a:focus-visible {
  outline: none;
}
.prose > .signoff {
  margin-top: clamp(36px, 5vw, 52px);
  display: grid;
  gap: 0.6em;
  color: var(--fg-2);
}
.signoff p {
  margin: 0;
}
.signoff .sig {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.9em;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sig-mark {
  width: 32px;
  height: 32px;
}
.article-end {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  margin-top: clamp(48px, 7vw, 88px);
  max-width: var(--measure);
}
.practice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition:
    border-color .4s ease,
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out);
}
.practice:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -34px rgba(0, 0, 0, 0.55);
}
.practice:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.practice-shot {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.2vw, 24px);
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(
      70% 90% at 50% 100%,
      rgba(98, 176, 240, var(--stage-glow)),
      transparent 70%),
    radial-gradient(
      circle at 1px 1px,
      var(--stage-dot) 1px,
      transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(
      180deg,
      var(--stage-top),
      var(--stage-bottom));
}
.practice-shot picture {
  display: block;
  width: 100%;
}
.practice-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(242, 243, 245, 0.14);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.6);
  transition: transform .9s var(--ease-out);
}
.practice:hover .practice-shot img {
  transform: translateY(-2px) scale(1.015);
}
.practice-body {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: clamp(22px, 3vw, 36px);
}
.practice-k {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.practice-title {
  margin-top: 6px;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
}
.practice-tool {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--steel);
}
.practice-tool .plus-tag,
.tool-go .plus-tag {
  margin-left: 8px;
  vertical-align: 1px;
}
.practice p {
  margin-top: 4px;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.practice .tool-go {
  margin-top: 12px;
}
.keep-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.keep-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.keep-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
}
.keep-all:hover {
  color: var(--fg);
}
.keep-card {
  display: grid;
  grid-template-columns: clamp(112px, 26%, 200px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.keep-img {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0d0f;
}
.keep-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.keep-img picture,
.keep-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.04);
  transition: transform .9s var(--ease-out), filter .6s ease;
}
.keep-card:hover .keep-img img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04);
}
.keep-body {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.keep-body h3 {
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.keep-card:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
}
.keep-time {
  font-size: 0.8125rem;
  color: var(--muted);
}
.prose > .figure {
  margin-block: clamp(28px, 4vw, 40px);
}
.prose > .figure + * {
  margin-top: clamp(28px, 4vw, 40px);
}
.figure picture {
  display: block;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 760px);
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.figure.is-narrow img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.figure figcaption {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.figure.is-narrow figcaption {
  text-align: center;
}
.acard-plus,
.article-plus,
.plus-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(242, 165, 58);
  background: rgba(242, 165, 58, 0.12);
  border: 1px solid rgba(242, 165, 58, 0.28);
  white-space: nowrap;
}
:root[data-theme=light] .acard-plus,
:root[data-theme=light] .article-plus,
:root[data-theme=light] .plus-tag {
  color: rgb(150, 86, 8);
  background: rgba(169, 98, 10, 0.09);
  border-color: rgba(169, 98, 10, 0.26);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .acard-plus,
  :root:not([data-theme=dark]) .article-plus,
  :root:not([data-theme=dark]) .plus-tag {
    color: rgb(150, 86, 8);
    background: rgba(169, 98, 10, 0.09);
    border-color: rgba(169, 98, 10, 0.26);
  }
}
.acard-series {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--steel);
}
.acard-date {
  font-size: 0.8125rem;
  color: var(--muted);
}
.acard-body .acard-date {
  margin-top: -2px;
}
.article-list > .aseries {
  grid-column: 1 / -1;
  display: grid;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.aseries-head {
  display: grid;
  gap: 6px;
}
.aseries-k {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.aseries-title {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.aseries-line {
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.aseries-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.aseries-list .acard-body .h3 {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}
@media (max-width: 1100px) {
  .aseries-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .aseries-list {
    grid-template-columns: 1fr;
  }
  .article-list > .aseries {
    padding: 16px;
    border-radius: 20px;
  }
}
.article-series {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--steel);
}
.article-series a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
}
.series-nav {
  max-width: var(--measure);
  margin-bottom: clamp(28px, 4vw, 40px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.series-nav-k {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.series-nav-n {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.series-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.series-nav-list a {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.series-nav-list li:last-child a {
  border-bottom: 0;
  padding-bottom: 2px;
}
.series-nav-list a:hover {
  color: var(--fg);
}
.series-nav-list a[aria-current=page] {
  color: var(--fg);
  font-weight: 600;
}
.series-nav-p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.45rem;
  white-space: nowrap;
}
.series-nav-list a[aria-current=page] .series-nav-p {
  color: var(--ok);
}
.series-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
.series-next:hover {
  background: var(--surface);
}
.series-next-k {
  grid-column: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.series-next-t {
  grid-column: 1;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.series-next .arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
}
@media (max-width: 640px) {
  .practice {
    grid-template-columns: minmax(0, 1fr);
  }
  .practice-shot {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
.article-aside {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 40px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 64px);
  max-height: calc(100dvh - var(--header-h) - 64px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 2px 4px 8px 4px;
  margin: -2px -4px 0;
}
.article-aside::-webkit-scrollbar {
  display: none;
}
.toc-h {
  margin: 0 0 18px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc-body {
  position: relative;
  padding-left: 18px;
}
.toc-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.toc-fill {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform .5s var(--ease-out);
}
.toc-mark {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--fg);
  opacity: 0;
  transition:
    transform .5s var(--ease-out),
    height .5s var(--ease-out),
    opacity .3s ease;
}
.toc-list,
.toc-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-list a {
  display: grid;
  grid-template-columns: 1.85em minmax(0, 1fr);
  gap: 0 4px;
  padding: 6px 0;
  font-size: 0.8438rem;
  line-height: 1.42;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s ease;
}
.toc-n {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.75;
  opacity: 0.8;
}
.toc-list a:hover {
  color: var(--fg);
}
.toc-list a[aria-current] {
  color: var(--fg);
}
.toc-list a[aria-current] .toc-n {
  opacity: 1;
}
.toc-list a:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
  border-radius: 6px;
}
.toc-sub {
  padding-left: 1.85em;
  margin: -2px 0 4px;
}
.toc-sub a {
  grid-template-columns: minmax(0, 1fr);
  padding: 4px 0;
  font-size: 0.8125rem;
}
.toc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.toc-top {
  color: var(--muted);
  text-decoration: none;
}
.toc-top:hover {
  color: var(--fg);
}
.read-bar {
  position: fixed;
  z-index: 49;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.read-bar.is-on {
  opacity: 1;
}
.read-bar i {
  display: block;
  height: 100%;
  background: var(--fg);
  opacity: 0.7;
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
}
.toc-m {
  display: none;
}
@media (max-width: 1023px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-aside {
    display: none;
  }
  .prose,
  .article-end {
    margin-inline: auto;
  }
  .article-head {
    max-width: calc(var(--measure) + 64px);
  }
  .toc-m {
    display: block;
    position: sticky;
    z-index: 30;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px);
    max-width: var(--measure);
    margin: 0 auto clamp(28px, 5vw, 44px);
  }
  .prose [id] {
    scroll-margin-top: 82px;
  }
  .toc-m > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 7px 8px 7px 9px;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .toc-m > summary::-webkit-details-marker {
    display: none;
  }
  .toc-m > summary:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 3px;
  }
  .toc-ring {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
  }
  .toc-ring svg {
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);
  }
  .toc-ring circle {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 3;
  }
  .toc-ring .toc-ring-v {
    stroke: var(--fg);
    stroke-linecap: butt;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .25s linear;
  }
  .toc-m-txt {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }
  .toc-m-k {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .toc-m-cur {
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .toc-m-chev {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    position: relative;
    transition: background-color .25s ease;
  }
  .toc-m-chev::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--fg);
    transition: transform .35s var(--ease-out);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  }
  .toc-m[open] .toc-m-chev::after {
    transform: rotate(180deg);
  }
  .toc-m-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    max-height: min(64vh, 540px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.55);
    animation: toc-in .28s var(--ease-out);
  }
  .toc-m .toc-list a {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.9375rem;
    color: var(--fg-2);
    grid-template-columns: 2.1em minmax(0, 1fr);
  }
  .toc-m .toc-list a[aria-current] {
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    color: var(--fg);
  }
  .toc-m .toc-sub {
    padding-left: 2.1em;
    margin: 0;
  }
  .toc-m .toc-sub a {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 12px;
    font-size: 0.875rem;
  }
}
@keyframes toc-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toc-fill,
  .toc-mark,
  .toc-ring .toc-ring-v,
  .practice,
  .practice-shot img,
  .keep-img img,
  .yt-note,
  .read-bar {
    transition: none;
  }
  .toc-m-panel {
    animation: none;
  }
  .practice:hover {
    transform: none;
  }
  .practice:hover .practice-shot img,
  .keep-card:hover .keep-img img {
    transform: none;
  }
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
}
@media (max-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.stack {
  display: grid;
  gap: 16px;
}
.stack-lg {
  display: grid;
  gap: 28px;
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(20px, 3vw, 28px);
}
.photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: #0c0d0f;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
picture {
  display: contents;
}
.list-rows {
  display: grid;
}
.list-rows > * {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.list-rows > *:last-child {
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  .list-rows > * {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--fg-2);
}
.notice::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--caution);
}
.appband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 860px) {
  .appband {
    grid-template-columns: 1fr;
  }
}
.appmark {
  aspect-ratio: 1;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  border-radius: 23%;
  border: 1px solid var(--line);
  background: #1F1F1F;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.appmark .mark {
  width: 64%;
  height: 64%;
  background-color: #A6A6A8;
}
.featurelist {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 0;
}
.featurelist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.fl-mark {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.featurelist li:last-child {
  border-bottom: 1px solid var(--line);
}
.featurelist .data {
  color: var(--muted);
  font-size: 0.8125rem;
  padding-top: 2px;
}
.featurelist b {
  display: block;
  font-weight: 600;
}
.featurelist span {
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.app-shell {
  padding-block: 28px 64px;
}
.stage {
  position: relative;
  background: #0B0C0E;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}
.stage canvas.clickable {
  cursor: pointer;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  background: rgba(20, 21, 24, 0.94);
  color: #F2F3F5;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.toast.bad {
  border-color: rgba(240, 85, 90, 0.6);
}
.toast.good {
  border-color: rgba(63, 210, 122, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.quiz-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-auto-rows: auto;
  gap: 14px;
  min-height: 176px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.quiz-tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.quiz-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quiz-no {
  font-size: 1.75rem;
  line-height: 1;
}
.quiz-topics {
  color: var(--fg-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.quiz-tile-foot {
  display: flex;
  align-items: end;
}
.quiz-score {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  font-size: 0.8125rem;
}
.quiz-score .data {
  font-size: 0.9375rem;
}
[aria-pressed=true].btn-ghost {
  background-color: var(--pb-bg);
  color: var(--pb-fg);
  border-color: var(--pb-bg);
}
.quiz-shell {
  max-width: 820px;
  padding-block: 40px 96px;
  display: grid;
  gap: 24px;
}
.quiz-head {
  display: grid;
  gap: 14px;
}
.quiz-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.debrief {
  display: grid;
  gap: 28px;
}
.debrief-score {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.debrief-big {
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--ok);
}
.review {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.review li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}
.review-no {
  color: var(--muted);
  font-size: 0.8125rem;
  padding-top: 3px;
}
.review-q {
  font-weight: 600;
  line-height: 1.45;
}
.review-a {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.review-you {
  font-size: 0.875rem;
}
.ring {
  position: relative;
  width: 148px;
  height: 148px;
  flex: none;
}
.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
  stroke-width: 7;
}
.ring .ring-bg {
  stroke: var(--line-strong);
}
.ring .ring-fg {
  stroke: var(--ok);
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}
.ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.ring-label b {
  font-size: 1.75rem;
  font-weight: 400;
}
.ring-label span {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.tr {
  padding-block: clamp(36px, 6vw, 72px) clamp(56px, 7vw, 96px);
}
.tr-wrap {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}
.tr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 901px) {
  .tr-hero > .tr-panel {
    margin-top: 30px;
  }
}
.tr-hero > * {
  min-width: 0;
}
.tr-main {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.tr-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tr-line > * + *::before {
  content: "·";
  margin-right: 12px;
  color: var(--muted);
}
.tr-live {
  display: inline-flex;
  align-items: center;
  color: var(--ok);
}
.tr-live::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  margin-left: 8px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 80%, transparent);
}
.tr-line > span:empty {
  display: none;
}
.tr-line,
.tr-main > .tr-meta {
  min-height: 1lh;
}
.tr-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
.tr-sub {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: -4px 0 0;
}
.tr-sub b {
  color: var(--fg);
  font-weight: 600;
}
.tr-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 8px;
}
.tr-meta {
  font-size: 0.875rem;
  color: var(--muted);
}
.tr.has-photo .tr-start {
  border-color: rgba(242, 243, 245, 0.55);
  background-color: rgba(242, 243, 245, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.tr.has-photo .tr-start:hover,
.tr.has-photo .tr-start:focus-visible {
  border-color: var(--pb-bg);
  background-color: var(--pb-bg);
}
.tr.has-photo .tr-build {
  border-color: rgba(242, 243, 245, 0.55);
  background-color: rgba(242, 243, 245, 0.1);
  color: var(--fg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.tr.has-photo .tr-build:hover,
.tr.has-photo .tr-build:focus-visible {
  border-color: var(--pb-bg);
  background-color: var(--pb-bg);
  color: var(--pb-fg);
}
.tr-main > .tr-meta {
  margin: 0;
}
.tr-go {
  position: relative;
  z-index: 2;
  padding-block: 2px;
}
.tr-go > .btn {
  position: relative;
  z-index: 1;
}
@media (max-width: 520px) {
  .tr-go {
    justify-self: stretch;
  }
  .tr-go > .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .tr-go > .tr-build {
    justify-content: center;
  }
}
.tr-util {
  justify-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.tr-util-b {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s ease;
  min-height: 0;
}
.tr-util-b:hover,
.tr-util-b[aria-expanded=true],
.tr-util-b:focus-visible {
  color: var(--fg);
}
.tr-util-b:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (pointer: coarse) {
  .tr-util-b {
    position: relative;
  }
  .tr-util-b::after {
    content: "";
    position: absolute;
    inset: -8px -6px;
  }
}
@media (pointer: coarse) {
  :root .lib-find-i,
  :root .ln-sel,
  #ln-sys,
  :root .pg-code,
  #pg-paste {
    font-size: 16px;
  }
}
@media (pointer: coarse) {
  .pg-meta,
  .subscribe-try,
  .acct-link,
  .auth-switch a,
  .up-alt {
    position: relative;
  }
  .pg-meta::after,
  .subscribe-try::after,
  .acct-link::after,
  .auth-switch a::after,
  .up-alt::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }
}
.tr-set-ic {
  display: grid;
  place-items: center;
}
@media (pointer: coarse) {
  .tr-link,
  .kb .linklike,
  #tr-plan .linklike,
  .tr-foot .linklike,
  .qtool,
  .kbb-chip {
    position: relative;
  }
  .tr-link::after,
  .kb .linklike::after,
  #tr-plan .linklike::after,
  .tr-foot .linklike::after {
    content: "";
    position: absolute;
    inset: -9px -6px;
  }
  .qtool::after {
    content: "";
    position: absolute;
    inset: -5px 0;
  }
  .kbb-chip::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .qwhy-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
  }
}
.tr-util .mf-src {
  display: contents;
}
.tr-util .mf-src .mf-open.tr-util-b {
  color: var(--muted);
  font-weight: 600;
  min-height: 0;
}
.tr-util .mf-src .mf-open.tr-util-b:hover,
.tr-util .mf-src .mf-open.tr-util-b:focus-visible {
  color: var(--fg);
}
@media (max-width: 420px) {
  .tr-util {
    gap: 6px 16px;
  }
  .tr-util-b {
    font-size: 0.78rem;
    gap: 6px;
  }
}
.tr-util .mf-src .mf-dot {
  width: 6px;
  height: 6px;
  margin-left: 2px;
}
.tr-drawer {
  justify-self: stretch;
  overflow: hidden;
}
.tr-drawer-in {
  min-height: 0;
}
.tr-set-l {
  display: grid;
  gap: 3px;
}
.tr-set-l small {
  font-size: 0.8125rem;
  color: var(--muted);
}
.tr-set .tr-rf {
  min-width: 58px;
  justify-content: center;
  padding: 6px 14px;
}
.tr-set {
  max-width: 560px;
  display: grid;
  gap: 2px;
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tr.has-photo .tr-set {
  background: rgba(18, 20, 23, 0.62);
}
.tr-set-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
}
.tr-set-row + .tr-set-row {
  border-top: 1px solid var(--line);
}
.tr-set-row[hidden] + .tr-set-row {
  border-top: 0;
}
.tr-link {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-2);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  transition: color .2s ease;
}
.tr-link:hover:not([disabled]) {
  color: var(--fg);
}
.tr-link .data {
  color: var(--muted);
  font-weight: 500;
}
.tr-link[disabled] {
  opacity: .45;
  cursor: default;
}
.tr-link[aria-expanded=true] {
  color: var(--fg);
}
.tr-how {
  display: grid;
  gap: 14px;
  max-width: 560px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tr-how p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 56ch;
}
.tr-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tr-ladder li {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.tr-ladder b {
  font-size: 0.9375rem;
  font-weight: 600;
}
.tr-ladder small {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tr-ladder .is-miss {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.tr-ladder .is-miss b {
  color: var(--warn);
}
@media (max-width: 520px) {
  .tr-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tr-panel {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 26px);
}
.tr-k {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.tr-ring-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.tr-ring {
  width: 108px;
  height: 108px;
}
.tr-ring .ring-label b {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tr-ring .ring-fg {
  transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 40%, transparent));
}
.tr-ring-t {
  display: grid;
  gap: 6px;
}
.tr-ring-t p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.tr-ring-t b {
  color: var(--fg);
  font-weight: 600;
}
.tr-block-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.tr-block-h > span:last-child {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.tr-log {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 5px;
}
.tr-log i {
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 4px;
  background: var(--line);
}
.tr-log i.on {
  background: color-mix(in srgb, var(--ok) 55%, transparent);
}
.tr-log i.today {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--fg) 30%, transparent);
}
.tr-log i.on.today {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--ok) 60%, transparent);
}
.tr.is-first #tr-days-block {
  display: none;
}
.tr-first-p {
  margin: 0 0 14px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.tr-panel .tr-ladder {
  gap: 5px;
}
.tr-panel .tr-ladder b {
  font-size: 0.8125rem;
}
.tr-panel .tr-ladder li {
  padding: 9px 2px;
}
@media (min-width: 901px) and (max-width: 1120px) {
  .tr-panel .tr-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.d-short,
.n-short {
  display: none;
}
@media (max-width: 900px) {
  .tr-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tr-map-sec {
  display: grid;
  gap: 14px;
}
.tr-map-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
}
.tr-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.75rem;
  color: var(--muted);
}
.tr-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tr-key span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--line-strong);
}
.tr-key .k-weak::before {
  background: var(--caution);
}
.tr-key .k-mid::before {
  background: var(--steel);
}
.tr-key .k-strong::before {
  background: var(--ok);
}
.tr-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.tr-tile {
  --acc: var(--steel);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-height: 116px;
  min-width: 0;
  text-align: left;
  padding: 12px 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: border-color .3s ease;
}
.tr-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 85% at 50% 125%,
      color-mix(in srgb, var(--acc) 30%, transparent),
      transparent 65%);
  opacity: .55;
  transition: opacity .45s ease;
}
.tr-tile::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  height: 3px;
  border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      var(--acc) var(--cover, 0%),
      var(--line) var(--cover, 0%));
}
.tr-tile:hover,
.tr-tile[aria-pressed=true] {
  border-color: color-mix(in srgb, var(--acc) 65%, transparent);
}
.tr-tile:hover::before,
.tr-tile[aria-pressed=true]::before {
  opacity: 1;
}
.tr-tile.is-weak {
  --acc: var(--caution);
}
.tr-tile.is-strong {
  --acc: var(--ok);
}
.tr-tile.is-unseen {
  --acc: var(--muted);
  border-color: var(--line);
}
.tr-tile.is-unseen::before {
  opacity: 0;
}
.tr-tile.is-unseen:hover,
.tr-tile.is-unseen[aria-pressed=true] {
  border-color: var(--line-strong);
}
.tr-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.tr-code {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--acc);
  white-space: nowrap;
}
.tr-focus {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #121315;
  background: var(--caution);
  padding: 2px 5px;
  border-radius: 4px;
}
.tr-tile-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.tr-pct {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--acc);
}
.tr-tile.is-unseen .tr-pct {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tr-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tr-detail-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tr-detail-t b {
  font-size: 1rem;
  font-weight: 600;
}
.tr-detail-t span {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.tr-foot {
  font-size: 0.8125rem;
  margin: 0;
}
@media (max-width: 1000px) {
  .tr-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .d-long {
    display: none;
  }
  .d-short {
    display: inline;
  }
  .tr-map {
    gap: 6px;
  }
  .tr-tile {
    min-height: 92px;
    padding: 10px 10px 14px;
    gap: 6px;
  }
  .tr-tile::after {
    left: 10px;
    right: 10px;
    bottom: 7px;
  }
  .tr-tile-name {
    font-size: 0.75rem;
  }
  .n-long {
    display: none;
  }
  .n-short {
    display: inline;
  }
  .tr-pct {
    font-size: 1.1875rem;
  }
  .tr-tile.is-unseen .tr-pct {
    font-size: 0.6875rem;
  }
  .tr-focus {
    font-size: 0.5rem;
    padding: 2px 4px;
    letter-spacing: 0.08em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-tile,
  .tr-tile::before,
  .tr-ring .ring-fg {
    transition: none;
  }
}
.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
}
.linklike.eyebrow {
  text-decoration: none;
  font-family: var(--font-display);
}
.linklike.danger {
  color: var(--warn);
}
.signup-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.segbar i.done {
  background: color-mix(in srgb, var(--fg) 35%, transparent);
}
.scen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.scen {
  --lens: #FFA51F;
  --lens-glow: rgba(255, 165, 31, .45);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  transition:
    border-color .2s ease,
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s ease;
}
.scen.is-warning {
  --lens: #FF3B3B;
  --lens-glow: rgba(255, 59, 59, .5);
}
.scen:hover,
.scen:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45);
}
.scen:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}
.scen-screen {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 14px 16px 20px;
  min-height: 104px;
  align-content: start;
  background:
    radial-gradient(
      120% 90% at 0% 0%,
      #10161C 0%,
      #050608 60%),
    #000;
  border-bottom: 1px solid var(--line);
}
.scen.is-check .scen-screen {
  min-height: 0;
}
.scen-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .035),
      transparent 40%);
}
.scen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.scen-lens {
  display: inline-grid;
  justify-items: center;
  padding: 3px 7px 2px;
  border-radius: 4px;
  font: 700 0.5rem/1.15 var(--font-screen);
  letter-spacing: .08em;
  color: rgba(0, 0, 0, .78);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--lens) 82%, white),
      var(--lens));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 10px -2px var(--lens-glow);
  transition: box-shadow .25s ease, filter .25s ease;
}
.scen:hover .scen-lens {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 18px 1px var(--lens-glow);
  filter: brightness(1.08);
}
.scen-sys {
  font: 600 0.625rem/1 var(--font-screen);
  letter-spacing: .14em;
  color: rgba(200, 214, 226, .62);
}
.scen-titles {
  display: grid;
  gap: 7px;
}
.scen-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-screen);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.scen-title u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.scen-title.is-warn {
  color: #FF3B3B;
}
.scen-title.is-caut {
  color: #FFA51F;
}
.scen-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .7);
  font: 600 0.5625rem/1 var(--font-body);
  transform: translateY(-1px);
}
.scen.is-check .scen-titles {
  position: relative;
}
.scen.is-check .scen-titles::before {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 18px;
  bottom: 18px;
  border-left: 1px dashed rgba(255, 255, 255, .22);
}
.scen-body {
  padding: 14px 16px 14px;
  display: grid;
  gap: 14px;
  align-content: space-between;
}
.scen-body p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}
.scen-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.scen-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.scen-kind::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lens);
  box-shadow: 0 0 6px var(--lens-glow);
}
.scen-best {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  letter-spacing: .06em;
  text-transform: none;
  font-size: 0.6875rem;
}
.scen-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--fg-2);
  transition: color .2s ease;
}
.scen-arrow {
  position: relative;
  width: 14px;
  height: 10px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.scen-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1px;
  top: 4.5px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.scen-arrow::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1.5px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.scen:hover .scen-go {
  color: var(--fg);
}
.scen:hover .scen-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .scen,
  .scen-arrow,
  .scen-lens {
    transition: none;
  }
  .scen:hover {
    transform: none;
  }
}
.run-head {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.run-head .back-link {
  justify-self: start;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -4px;
  padding: 4px 14px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-2);
  font: 600 0.8125rem/1 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.back-link-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}
.back-link-ic svg {
  width: 14px;
  height: 14px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.back-link:hover,
.back-link:focus-visible {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.back-link:hover .back-link-ic,
.back-link:focus-visible .back-link-ic {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.back-link:hover .back-link-ic svg {
  transform: translateX(-2px);
}
.back-link:active .back-link-ic {
  transform: scale(.94);
}
.back-link:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .back-link-ic,
  .back-link-ic svg {
    transition: none;
  }
}
.run-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
}
.run-title {
  font-family: var(--font-cockpit);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  letter-spacing: 0.01em;
  font-weight: 700;
}
.run-title[tabindex="-1"]:focus {
  outline: none;
}
.run-flight {
  font-size: 0.875rem;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg-2);
}
.seg [aria-pressed=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
@media (pointer: coarse) {
  .seg button {
    position: relative;
  }
  .seg button:not(.has-new)::after {
    content: "";
    position: absolute;
    inset: -7px 0;
  }
}
.icon-btn.is-off .wave {
  opacity: 0;
}
.icon-btn.is-off {
  color: var(--muted);
}
.run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px 20px;
  align-items: start;
}
.run-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  max-height: calc(100dvh - var(--header-h) - 32px);
  min-width: 0;
}
.run-side > .run-panel {
  flex: none;
  max-height: 70%;
  overflow-y: auto;
}
.run-side > .run-feed {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: none;
}
@media (max-width: 1000px) {
  .run-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "card" "stage" "feed";
  }
  .run-side {
    display: contents;
  }
  .run-grid .run-main {
    grid-area: stage;
  }
  .run-side > .run-panel {
    grid-area: card;
    max-height: none;
    overflow: visible;
  }
  .run-side > .run-feed {
    grid-area: feed;
    max-height: 60vh;
  }
}
.run-more {
  display: contents;
}
.run-more-flight,
.run-notes-m,
.run-menu-btn,
.run-sheet-b {
  display: none;
}
.run-sheet-b {
  place-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}
.run-sheet-b:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: -2px;
}
.run-sheet-b svg {
  width: 16px;
  height: 16px;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.run-sheet-in[aria-expanded=true] .crew-badge {
  background: var(--instr);
  color: var(--surface);
}
.run-sheet-new:not(:empty) {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--instr);
  color: var(--surface);
  font: 700 0.5625rem/16px var(--font-body);
  text-align: center;
}
@media (max-width: 1000px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  body.ecam-fit .site-footer {
    display: none;
  }
  body.ecam-fit #ecam-run.app-shell {
    padding-block: 8px 12px;
  }
  .run-head {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 8px;
  }
  .run-head .back-link {
    padding: 4px;
    margin-left: -4px;
  }
  .run-head .back-link-ic {
    width: 36px;
    height: 36px;
  }
  .run-head .back-link > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .run-title-row {
    display: contents;
  }
  .run-title {
    min-width: 0;
    font-size: 1.0625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #run-flight {
    display: none;
  }
  #ecam-run.is-pre #run-flight {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
  }
  .run-menu-btn {
    display: inline-grid;
    width: 44px;
    height: 44px;
  }
  .run-menu-btn[aria-expanded=true] {
    background: var(--invert-bg);
    border-color: var(--invert-bg);
    color: var(--invert-fg);
  }
  .run-more {
    display: grid;
    gap: 14px;
    position: absolute;
    z-index: 45;
    top: calc(100% + 6px);
    right: 0;
    width: min(360px, 100%);
    padding: 16px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .22s ease,
      transform .3s cubic-bezier(.2, .7, .2, 1),
      visibility 0s linear .3s;
  }
  .run-head.menu-on .run-more {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity .22s ease,
      transform .3s cubic-bezier(.2, .7, .2, 1),
      visibility 0s;
  }
  .run-more-flight {
    display: block;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2);
  }
  .run-more-flight:empty {
    display: none;
  }
  .run-more .cluster {
    gap: 10px;
  }
  .run-more .cluster .btn {
    flex: 1 1 40%;
    min-height: 44px;
  }
  .run-notes-m {
    display: inline-flex;
  }
  .run-more .icon-btn {
    width: 44px;
    height: 44px;
  }
  .run-more .seg button {
    min-height: 36px;
  }
  #ecam-run:not(.is-pre) .run-main {
    position: relative;
  }
  #ecam-run:not(.is-pre) .run-views-now {
    position: absolute;
    z-index: 2;
    left: 8px;
    right: 8px;
    top: 8px;
    padding: 0 12px;
    font-size: 0.75rem;
    line-height: 1.45;
    pointer-events: none;
    border: 0;
    border-block: 8px solid rgba(16, 17, 20, 0.88);
    background: rgba(16, 17, 20, 0.88) padding-box;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: rgba(242, 243, 245, 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #ecam-run:not(.is-pre) .run-views-now:empty {
    display: none;
  }
  #ecam-run:not(.is-pre) .run-views-now::before {
    display: none;
  }
  .run-card .cr-kb {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .run-more {
    transition: none !important;
  }
}
@media (max-width: 1000px) and (orientation: portrait) {
  body.ecam-fit #ecam-run:not(.is-pre) {
    --run-avail: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 72px);
    --run-res: calc(170px + env(safe-area-inset-bottom, 0px));
  }
  #ecam-run:not(.is-pre) .run-grid {
    display: block;
  }
  #ecam-run:not(.is-pre) .stage canvas {
    width: min(100%, calc((var(--run-avail) - var(--run-res)) * 1260 / var(--ch, 1224)));
    margin-inline: auto;
  }
  #ecam-run:not(.is-pre) .run-side {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    z-index: 40;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 680px);
    margin-inline: auto;
    max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 64px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 44px -20px rgba(0, 0, 0, 0.55);
    animation: run-sheet-in .42s cubic-bezier(.2, .7, .2, 1) both;
  }
  #ecam-run:not(.is-pre) .run-side::before {
    content: "";
    flex: none;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 4px;
    background: var(--line-strong);
  }
  #ecam-run:not(.is-pre) .run-side > .run-panel {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 10px;
    padding: 0 16px 14px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  #ecam-run:not(.is-pre) .run-progress {
    position: sticky;
    top: 0;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    padding-top: 4px;
    background: var(--surface);
  }
  #ecam-run:not(.is-pre) .run-sheet-b {
    display: inline-grid;
  }
  #ecam-run.sheet-min .run-sheet-fold svg {
    transform: rotate(180deg);
  }
  #ecam-run.sheet-min .run-card > :not(.cr-top):not(.cr-prompt):not(.cr-wait):not(.cr-done) {
    display: none;
  }
  #ecam-run.sheet-min .run-card .cr-prompt,
  #ecam-run.sheet-min .run-card .cr-wait {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #ecam-run:not(.is-pre) .run-card {
    gap: 10px;
  }
  #ecam-run:not(.is-pre) .run-card .cr-prompt {
    font-size: 0.9688rem;
  }
  #ecam-run:not(.is-pre) .cr-choice {
    min-height: 44px;
    padding: 9px 12px;
  }
  #ecam-run:not(.is-pre) .cr-next .muted {
    display: none;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed {
    display: none;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 40svh;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  #ecam-run.notes-open:not(.is-pre) .run-side > .run-feed {
    display: grid;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed .nt-card {
    min-height: 0;
    padding: 12px 16px 10px 12px;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed .feed-head {
    padding: 8px 16px;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed .feed-head .eyebrow {
    display: none;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed .feed-head {
    justify-content: flex-end;
  }
  #ecam-run:not(.is-pre) .toast {
    bottom: calc(var(--sheet-h, 200px) + 12px);
  }
  @keyframes run-sheet-in {
    from {
      transform: translateY(32px);
      opacity: 0;
    }
  }
}
@media (min-width: 700px) and (max-width: 1000px) and (orientation: portrait) {
  #ecam-run:not(.is-pre) .run-side {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 20px;
    box-shadow: 0 24px 56px -24px rgba(0, 0, 0, 0.6);
  }
}
@media (max-width: 760px) and (orientation: portrait) {
  #ecam-run:not(.is-pre) .stage.pan {
    height: calc(var(--run-avail) - var(--run-res));
    min-height: 280px;
    overflow: auto;
    overscroll-behavior: contain;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    border-radius: 0;
    border-inline: 0;
  }
  #ecam-run:not(.is-pre) .stage.pan canvas {
    width: auto;
    height: 100%;
    max-width: none;
    margin-inline: auto;
  }
}
@media (max-width: 1000px) and (orientation: landscape), (hover: none) and (pointer: coarse) and (min-width: 1001px) and (max-width: 1366px) {
  body.ecam-fit #ecam-run:not(.is-pre) {
    --run-avail: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 76px - env(safe-area-inset-bottom, 0px));
  }
  #ecam-run:not(.is-pre) .run-grid {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 380px);
    grid-template-areas: none;
    gap: 12px 16px;
  }
  #ecam-run:not(.is-pre) .run-grid .run-main {
    grid-area: auto;
  }
  #ecam-run:not(.is-pre) .run-side {
    display: flex;
    position: static;
    height: var(--run-avail);
    max-height: var(--run-avail);
    gap: 12px;
  }
  #ecam-run:not(.is-pre) .run-side > .run-panel {
    grid-area: auto;
    max-height: 72%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed {
    grid-area: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed .nt-card {
    min-height: 0;
  }
  #ecam-run:not(.is-pre) .stage.pan {
    overflow: hidden;
  }
  #ecam-run:not(.is-pre) .stage canvas,
  #ecam-run:not(.is-pre) .stage.pan canvas {
    width: min(100%, calc(var(--run-avail) * 1260 / var(--ch, 1224)));
    max-width: 100%;
    margin-inline: auto;
  }
}
@media (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  body.ecam-live .site-header {
    display: none;
  }
  body.ecam-live #ecam-run:not(.is-pre) {
    --run-avail: calc(100svh - env(safe-area-inset-top, 0px) - 76px - env(safe-area-inset-bottom, 0px));
  }
  #ecam-run:not(.is-pre) .run-grid {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 38vw, 360px);
  }
  #ecam-run:not(.is-pre) .stage.pan {
    height: var(--run-avail);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #ecam-run:not(.is-pre) .stage canvas,
  #ecam-run:not(.is-pre) .stage.pan canvas {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  #ecam-run:not(.is-pre) .run-card .cr-prompt {
    font-size: 0.9375rem;
  }
  #ecam-run:not(.is-pre) .run-side > .run-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 10px;
    padding: 8px 14px 14px;
  }
  #ecam-run:not(.is-pre) .run-progress {
    position: sticky;
    top: -8px;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin-top: -8px;
    padding-top: 8px;
    background: var(--surface);
  }
  #ecam-run:not(.is-pre) .run-sheet-in {
    display: inline-grid;
    margin: -6px -6px -6px 0;
  }
  #ecam-run:not(.is-pre) .run-side > .run-feed {
    display: none;
  }
  #ecam-run.notes-open:not(.is-pre) .run-side > .run-feed {
    display: grid;
    flex: 1 1 auto;
  }
  #ecam-run.notes-open:not(.is-pre) .run-side > .run-panel {
    flex: 0 1 auto;
    max-height: 45%;
  }
  #ecam-run:not(.is-pre) .cr-choice {
    padding: 8px 12px;
  }
  #ecam-run:not(.is-pre) .cr-next .muted {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ecam-run .run-side {
    animation: none !important;
  }
  .run-sheet-b svg {
    transition: none;
  }
}
@media (max-width: 560px) {
  #ecam-run .deb-acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #ecam-run .deb-acts > .btn {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  #ecam-run .deb-acts > .btn > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #ecam-run .deb-acts > a.btn,
  #ecam-run .deb-acts > .btn:last-child {
    grid-column: 1 / -1;
  }
  #ecam-run .deb-acts > .btn:last-child:not(:has(.arrow)) {
    justify-content: center;
  }
}
.run-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-content: start;
}
.run-views,
.run-views-now {
  min-width: 0;
}
.run-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.run-views-seg {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.run-views-seg::-webkit-scrollbar {
  display: none;
}
.run-views-seg button {
  flex: none;
  white-space: nowrap;
}
.run-views {
  flex-wrap: nowrap;
}
.run-views-seg button {
  position: relative;
}
.run-views-seg button.has-new::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--instr);
  box-shadow: 0 0 0 2px var(--bg);
}
@media (pointer: coarse) {
  .run-views-seg button,
  #run-variant button {
    min-height: 44px;
  }
}
.run-replay {
  width: 34px;
  height: 34px;
}
.run-replay svg {
  width: 16px;
  height: 16px;
}
.run-views-now {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.run-views-now::before {
  content: "On the schematic";
  display: block;
  margin-bottom: 4px;
  font: 700 0.625rem/1.3 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.run-views-now:empty {
  display: none;
}
.is-pre .run-views {
  display: none;
}
.run-views {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.run-views:focus-within {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
.stage canvas.on-key {
  cursor: pointer;
}
.run-hot {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.run-hot button {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: transparent;
  border-radius: 6px;
  pointer-events: none;
}
.run-hot button:focus-visible {
  outline: 2px solid #FFA51F;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 165, 31, 0.22);
}
#run-type {
  text-transform: none;
  letter-spacing: 0.02em;
}
.grp-done {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.scen-go .arrow::after {
  width: 0.8em;
  height: 0.6em;
  vertical-align: 0;
}
.scen:hover .scen-go .arrow::after {
  transform: translateX(3px);
}
.deb-fcom {
  gap: 6px;
}
.deb-fcom ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.deb-fcom .fd-ref {
  white-space: normal;
}
.run-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 16px;
}
.run-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.run-progress .data {
  font-size: 0.75rem;
}
.run-card {
  display: grid;
  gap: 12px;
}
.run-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.run-card .btn {
  justify-self: start;
}
.ewd-line {
  font-family: var(--font-screen);
  font-size: 0.875rem !important;
  background: #000;
  color: #2FD8F5;
  padding: 10px 12px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.hint {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--caution-soft);
  color: var(--fg);
  font-size: 0.875rem;
}
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.mini-stats dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.mini-stats dd {
  margin: 2px 0 0;
}
.run-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 9, 11, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 16px;
}
.crew-badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: var(--font-screen);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  line-height: 1;
  flex: none;
}
.crew-badge.is-pm {
  color: var(--ok);
}
.crew-badge.is-pf {
  color: var(--warn);
}
.crew-badge.is-in {
  color: var(--instr);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.8125rem;
  min-width: 22px;
  padding: 0;
  border-radius: 50%;
}
.crew-how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 420px;
}
.crew-how li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.crew-how li .crew-badge {
  justify-self: start;
  margin-top: 1px;
}
.crew-how b {
  color: var(--fg);
  font-weight: 600;
}
.seat-pick {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  width: min(560px, 100%);
}
.seat-pick .eyebrow {
  color: rgba(242, 243, 245, .7);
}
.seat-h {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  color: #F2F3F5;
  letter-spacing: -0.01em;
}
.seat-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.seat-opt {
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  padding: 16px 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(242, 243, 245, .16);
  background: rgba(20, 21, 24, .82);
  color: #F2F3F5;
  cursor: pointer;
  font: inherit;
  transition:
    border-color .15s ease,
    transform .15s ease,
    background .15s ease;
}
.seat-opt b {
  font-size: 1rem;
  font-weight: 600;
}
.seat-opt small {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(242, 243, 245, .66);
}
.seat-opt .crew-badge.is-pm {
  color: #3FD27A;
}
.seat-opt .crew-badge.is-pf {
  color: #FF5C61;
}
.seat-opt:hover,
.seat-opt:focus-visible {
  border-color: rgba(242, 243, 245, .5);
  background: rgba(28, 30, 34, .92);
  transform: translateY(-2px);
}
.seat-opt[aria-pressed=true] {
  border-color: rgba(63, 210, 122, .55);
  box-shadow: 0 0 0 1px rgba(63, 210, 122, .25) inset;
}
.seat-note {
  color: rgba(242, 243, 245, .55);
  font-size: 0.75rem;
}
@media (max-width: 520px) {
  .seat-opts {
    grid-template-columns: 1fr;
  }
  .seat-opt {
    padding: 12px 14px;
  }
  .seat-pick {
    gap: 10px;
  }
  .seat-h {
    display: none;
  }
}
.cr-turn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cr-seat {
  font-family: var(--font-screen);
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid currentColor;
  color: var(--fg-2);
}
.cr-seat.is-pm {
  color: var(--ok);
}
.cr-seat.is-pf {
  color: var(--warn);
}
.cr-seat.is-pm.is-you {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--surface);
}
.cr-seat.is-pf.is-you {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--surface);
}
.cr-turn.is-you {
  color: var(--fg);
}
.cr-turn:not(.is-you)::after {
  content: "";
  width: 26px;
  height: 6px;
  margin-left: 2px;
  background:
    radial-gradient(
      circle,
      currentColor 2px,
      transparent 2.5px) 0 50% / 9px 6px repeat-x;
  opacity: .7;
  animation: cr-dots 1s steps(3, end) infinite;
}
@keyframes cr-dots {
  from {
    width: 0;
  }
  to {
    width: 27px;
  }
}
.run-card .cr-prompt {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
  text-wrap: pretty;
}
.run-card .cr-wait {
  font-family: var(--font-screen);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.run-card .cr-skip {
  justify-self: start;
  font-size: 0.8125rem;
  color: var(--muted);
}
.cr-choices {
  display: grid;
  gap: 8px;
}
.cr-choice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  transition:
    border-color .12s ease,
    background .12s ease,
    transform .12s ease;
}
.cr-choice:hover,
.cr-choice:focus-visible {
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  transform: translateX(2px);
}
.cr-choice:active {
  transform: translateX(2px) scale(.99);
}
.cr-key {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--font-screen);
}
.cr-say {
  font-family: var(--font-screen);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.run-card .cr-hint {
  font-size: 0.8125rem;
}
.cr-review {
  display: grid;
  gap: 8px;
}
.cr-review ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.cr-review li span {
  color: var(--fg-2);
}
.run-feed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 220px;
  overflow: hidden;
}
.feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.feed-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feed-toggle {
  font-size: 0.8125rem;
}
.fd-mark {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: var(--surface);
  font: 700 0.625rem/1 var(--font-screen);
  letter-spacing: .06em;
}
.fd-body {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
  padding-top: 2px;
}
.fd-note .fd-mark {
  min-width: 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font:
    italic 700 0.75rem/1 Georgia,
    "Times New Roman",
    serif;
  color: var(--instr);
  letter-spacing: 0;
}
.fd-note.fd-fix .fd-mark {
  color: var(--caution);
  font: 700 0.75rem/1 var(--font-body);
}
.fd-note.fd-brief .fd-mark {
  color: var(--muted);
}
.fd-label {
  font: 700 0.625rem/1.3 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--instr);
}
.fd-note.fd-sys .fd-label {
  color: var(--steel);
}
.fd-note.fd-sys .fd-mark {
  color: var(--steel);
  background: color-mix(in srgb, var(--steel) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--steel) 55%, transparent);
}
.fd-note.fd-crew .fd-label {
  color: var(--instr);
}
.fd-note.fd-crew .fd-mark {
  color: var(--instr);
  background: var(--surface);
  border-color: currentColor;
}
.fd-note.fd-fix .fd-label {
  color: var(--caution);
}
.fd-note.fd-brief .fd-label {
  color: var(--muted);
}
.fd-note p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}
.fd-note.fd-brief p {
  color: var(--fg-2);
}
.fd-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: .02em;
}
.fd-ref {
  white-space: nowrap;
}
.fd-ref b {
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fg-2);
  margin-right: 2px;
}
@keyframes fd-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.nt-card {
  min-height: 168px;
  padding: 18px 18px 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.run-side > .run-feed {
  min-height: 260px;
}
.run-side > .run-feed .nt-card {
  min-height: 0;
}
.fd-note {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  animation: fd-in .3s ease both;
}
.nt-empty {
  color: var(--muted);
  font-size: 0.8125rem;
  padding-left: 4px;
}
.nt-pager {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.nt-count {
  font-size: 0.75rem;
  color: var(--muted);
}
.nt-fwd {
  position: relative;
}
.nt-new:not(:empty) {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--instr);
  color: var(--surface);
  font: 700 0.5625rem/16px var(--font-body);
  text-align: center;
}
.nt-off {
  display: none;
  margin: 0;
  padding: 16px 18px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.notes-off .nt-card,
.notes-off .nt-pager {
  display: none;
}
.notes-off .nt-off {
  display: block;
}
.notes-off {
  grid-template-rows: auto auto;
  min-height: 0;
}
.cr-step {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .25s var(--ease-out),
    opacity .2s ease;
}
.cr-step svg {
  width: 14px;
  height: 14px;
}
.cr-step:hover:not(:disabled),
.cr-step:focus-visible {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.cr-step:active:not(:disabled) {
  transform: scale(.94);
}
.cr-step:disabled {
  opacity: .3;
  cursor: default;
}
@media (pointer: coarse) {
  .cr-step {
    position: relative;
  }
  .cr-step::before {
    content: "";
    position: absolute;
    inset: -6px;
  }
  .feed-toggle {
    padding: 12px 0;
    margin: -12px 0;
  }
  #ecam-run .btn-sm {
    min-height: 44px;
  }
}
.cr-step.is-due {
  border-color: var(--ok);
  color: var(--ok);
  animation: cr-due 1.6s ease-in-out infinite;
}
@keyframes cr-due {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent);
  }
}
.cr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}
.cr-nav {
  display: flex;
  gap: 6px;
}
.cr-turn.is-past::after {
  display: none;
}
.cr-when {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .08em;
  margin-top: -4px;
}
.cr-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.cr-verdict::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.cr-verdict.is-right {
  color: var(--ok);
}
.cr-verdict.is-miss {
  color: var(--caution);
}
.run-card .cr-now {
  justify-self: start;
  font-size: 0.8125rem;
}
.run-card .cr-done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-family: var(--font-screen);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  animation: cr-done-in .22s ease-out;
}
.cr-tick {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  background: var(--ok-soft);
}
.cr-tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes cr-done-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fd-note {
    animation: none;
  }
  .cr-turn::after {
    animation: none;
  }
  .cr-step.is-due {
    animation: none;
  }
  .run-card .cr-done {
    animation: none;
  }
}
.tip {
  position: absolute;
  z-index: 2;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 21, 24, 0.94);
  color: #F2F3F5;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-cockpit);
  font-size: 0.75rem;
  letter-spacing: .03em;
  pointer-events: none;
  white-space: nowrap;
}
.positions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-on {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.875rem;
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ok);
}
.quiz-shell > *,
.qotd > *,
.run-grid > *,
.run-side > *,
.bank-dash > *,
.grid-2 > *,
.appband > * {
  min-width: 0;
}
.qcard-top .chip {
  white-space: normal;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .opt {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .opt .verdict {
    grid-column: 2;
  }
  .opt .verdict:empty {
    display: none;
  }
}
@media (max-width: 760px) {
  .stage.pan {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .stage.pan canvas {
    width: 820px;
    max-width: none;
  }
  .stage.pan.pan-wide canvas {
    width: 1040px;
  }
}
@media (max-width: 760px) {
  .toast {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
.brand-photo {
  aspect-ratio: 1;
  max-width: 560px;
}
.brand-photo img {
  filter: grayscale(1) contrast(1.02);
}
.du {
  background: #000;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 6px #15171A;
}
.du canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.knob-pop {
  position: absolute;
  z-index: 3;
  min-width: 240px;
  max-width: calc(100% - 16px);
  padding: 12px;
  border-radius: 14px;
  background: rgba(18, 19, 22, 0.97);
  color: #F2F3F5;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 10px;
}
.pop-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pop-head b {
  font-family: var(--font-cockpit);
  letter-spacing: .03em;
  font-size: 0.9375rem;
}
.pop-head .data {
  color: #FCE891;
  font-size: 0.9375rem;
  margin-left: auto;
}
.pop-x {
  background: none;
  border: 0;
  color: rgba(242, 243, 245, 0.7);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.pop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.knob-pop .btn-ghost,
.knob-pop .btn-primary {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
}
.knob-pop .btn.is-on {
  background: #F2F3F5;
  color: #121315;
  border-color: #F2F3F5;
}
.stack > *,
.stack-lg > * {
  min-width: 0;
}
.text-ok {
  color: var(--ok);
}
.text-caution {
  color: var(--caution);
}
.text-warn {
  color: var(--warn);
}
.pg-small {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.rule-label::after {
  order: 1;
}
.rule-label > :not(:first-child) {
  order: 2;
}
a.tr-tile {
  text-decoration: none;
}
.pg-meta {
  text-decoration: none;
  transition: color .2s ease;
}
.pg-meta:hover {
  color: var(--fg);
}
.pg-empty {
  margin: -4px 0 0;
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
}
.pg-plus-line {
  margin: clamp(24px, 4vw, 40px) 0 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.pg-plus-line a {
  color: var(--fg);
  text-underline-offset: 3px;
}
.pg-stats {
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 6px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pg-stats > div {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-right: 14px;
  min-width: 0;
}
.pg-stats > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.pg-stats dt,
.pg-facts dt {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-stats dd,
.pg-facts dd {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pg-stats dd.pg-sub,
.pg-facts dd.pg-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
}
@media (max-width: 560px) {
  .pg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
  .pg-stats > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}
.pg-mem {
  display: grid;
  gap: 16px;
}
.pg-mem-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}
.pg-mem-bar i {
  min-width: 4px;
  background: var(--c);
}
.pg-mem .m-known {
  --c: var(--ok);
}
.pg-mem .m-mid {
  --c: color-mix(in srgb, var(--ok) 45%, var(--steel));
}
.pg-mem .m-learn {
  --c: var(--caution);
}
.pg-mem .m-new {
  --c: var(--line);
}
.pg-mem-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
@media (max-width: 560px) {
  .pg-mem-key {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}
.pg-mem-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--fg-2);
  min-width: 0;
}
.pg-mem-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pg-mem-row span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
  flex: none;
}
.pg-mem-row.m-new span::before {
  background: var(--line-strong);
}
.pg-mem-row b {
  color: var(--fg);
  font-weight: 600;
}
.pg-sec {
  display: grid;
  gap: 14px;
}
.pg-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 28px);
}
.pg-heat-col {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.pg-facts {
  margin: 0;
  display: grid;
  gap: 20px;
  align-content: center;
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 36px);
}
.pg-facts > div {
  display: grid;
  gap: 4px;
}
.pg-facts dd {
  font-size: 1.5rem;
}
@media (max-width: 900px) {
  .pg-activity {
    grid-template-columns: minmax(0, 1fr);
  }
  .pg-facts {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .pg-facts dd {
    font-size: 1.25rem;
  }
}
.pg-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(340px, 30vw, 450px);
}
.pg-hero .tr-main {
  max-width: 640px;
}
.pg-overview {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.7fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.pg-overview > .pg-sec {
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}
.pg-overview .tr-map-h {
  min-height: 22px;
  align-items: center;
}
.pg-strength {
  align-content: space-between;
  gap: 28px;
}
.pg-strength .tr-block-h > span:last-child {
  white-space: nowrap;
}
.pg-strength .pg-mem-key {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.pg-strength .pg-mem-row {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.pg-strength .pg-mem-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.pg-weeks .pg-activity {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: space-between;
  gap: 22px;
}
.pg-weeks .pg-facts {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pg-weeks .pg-facts > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.pg-weeks .pg-facts dd:not(.pg-sub) {
  font-size: 1.375rem;
}
@media (max-width: 960px) {
  .pg-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .pg-hero {
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .pg-weeks .pg-facts > div + div {
    padding-left: 12px;
  }
  .pg-weeks .pg-facts dd:not(.pg-sub) {
    font-size: 1.125rem;
  }
}
.pg-ec-meter {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.pg-ec-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ok);
  border-radius: inherit;
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}
.pg-ec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pg-ec-card {
  display: grid;
  align-content: space-between;
  gap: 16px;
  min-height: 104px;
  min-width: 0;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, background-color .3s ease;
}
.pg-ec-card:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}
.pg-ec-card.is-full {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.pg-ec-card.is-full:hover {
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}
.pg-ec-name {
  font-size: 0.8125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pg-ec-card.is-todo .pg-ec-name {
  opacity: .6;
  transition: opacity .3s ease;
}
.pg-ec-card.is-todo:hover .pg-ec-name {
  opacity: 1;
}
.pg-ec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}
.pg-ec-pips {
  display: flex;
  gap: 3px;
}
.pg-mc-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
}
.pg-mc-meter {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.pg-mc-meter i {
  display: block;
  height: 100%;
  background: var(--ok);
}
.pg-ec-pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.pg-ec-pips i.on {
  background: var(--ok);
}
.pg-ec-score {
  margin-right: auto;
}
.pg-ec-card.is-full .pg-ec-score {
  color: var(--ok);
}
.pg-ec-card .arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .35s var(--ease-out);
  color: var(--fg-2);
}
.pg-ec-card:hover .arrow,
.pg-ec-card:focus-visible .arrow {
  opacity: 1;
  transform: none;
}
@media (max-width: 1000px) {
  .pg-ec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .pg-ec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .pg-ec-card {
    min-height: 92px;
    padding: 12px 12px 10px;
  }
}
.pg-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, 2.6vw, 32px);
}
.pg-data-t {
  display: grid;
  gap: 12px;
  align-content: start;
}
.pg-data-t p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 52ch;
}
.pg-data-t p.pg-small {
  font-size: 0.8125rem;
}
.pg-data-do {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.pg-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
@media (max-width: 760px) {
  .pg-data {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-ec-meter i,
  .pg-ec-card,
  .pg-ec-card .arrow {
    transition: none;
  }
}
.heat-scroll {
  overflow-x: auto;
  padding: 3px 3px 6px;
  margin: -3px -3px -2px;
}
.heat {
  --gap: 4px;
  display: grid;
  gap: 6px;
  min-width: 330px;
}
.heat-months,
.heat-grid {
  display: grid;
  grid-template-columns: repeat(26, minmax(8px, 1fr));
  column-gap: var(--gap);
}
.heat-months {
  font-size: 0.6875rem;
  color: var(--muted);
  height: 1.1em;
}
.heat-months span {
  white-space: nowrap;
}
.heat-grid {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: var(--gap);
}
.heat i,
.heat-legend i {
  display: block;
  border-radius: 4px;
  background: var(--line);
}
.heat i {
  aspect-ratio: 1;
  width: 100%;
  max-width: 100%;
}
.heat-legend i {
  width: 11px;
  height: 11px;
}
.heat i.heat-future {
  background: transparent;
}
.heat:empty::before {
  content: "";
  display: block;
  padding-top: calc(26.92% + 15px);
}
.heat i.is-today {
  outline: 1px solid var(--fg-2);
  outline-offset: 1px;
}
.heat .l1,
.heat-legend .l1 {
  background: color-mix(in srgb, var(--ok) 28%, transparent);
}
.heat .l2,
.heat-legend .l2 {
  background: color-mix(in srgb, var(--ok) 50%, transparent);
}
.heat .l3,
.heat-legend .l3 {
  background: color-mix(in srgb, var(--ok) 75%, transparent);
}
.heat .l4,
.heat-legend .l4 {
  background: var(--ok);
}
.heat-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  justify-content: flex-end;
}
.heat-legend span {
  margin-inline: 4px;
}
@media (min-width: 900px) {
  .heat {
    --gap: 5px;
  }
}
.ecam-name {
  font-family: var(--font-cockpit);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.ecam-name.is-caut {
  color: var(--caution);
}
.ecam-name.is-warn {
  color: var(--warn);
}
.pg-code {
  width: 100%;
  font-family: var(--font-screen);
  font-size: 0.75rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg-2);
  resize: none;
  word-break: break-all;
}
.pg-import {
  display: grid;
  gap: 8px;
}
.pg-import label {
  font-weight: 600;
}
.pg-import-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pg-import-row input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--font-data);
  font-size: 0.8125rem;
}
.pg-import-row input:focus {
  outline: 2px solid var(--fg-2);
  outline-offset: 1px;
}
.icon-btn[aria-current=page] {
  color: var(--fg);
  border-color: var(--fg-2);
}
.chip-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    color .15s ease;
}
.chip-btn:hover {
  border-color: var(--fg-2);
  color: var(--fg);
}
.chip-btn[aria-pressed=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.tour-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tour-head .data {
  white-space: nowrap;
}
.tour-bar {
  margin: 2px 0 4px;
}
.tour-after {
  border-left: 2px solid var(--ok);
  padding-left: 12px;
  color: var(--fg);
}
.qstrip {
  display: flex;
  gap: 2px;
}
.qstrip i {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--line);
}
.qstrip i.b1 {
  background: color-mix(in srgb, var(--ok) 25%, transparent);
}
.qstrip i.b2 {
  background: color-mix(in srgb, var(--ok) 42%, transparent);
}
.qstrip i.b3 {
  background: color-mix(in srgb, var(--ok) 62%, transparent);
}
.qstrip i.b4 {
  background: color-mix(in srgb, var(--ok) 82%, transparent);
}
.qstrip i.b5 {
  background: var(--ok);
}
.qstrip i.miss {
  background: var(--warn);
  opacity: .75;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.proc {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.proc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.proc-head .data {
  font-size: 0.75rem;
}
.proc-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  background: #000;
  border-radius: 10px;
  max-height: min(34vh, 300px);
  overflow-y: auto;
  font-family: var(--font-screen);
  font-size: 0.75rem;
  line-height: 1.5;
}
.proc-title {
  font-family: "B612", var(--font-screen);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 0 2px;
}
.proc-title.is-caut {
  color: #FFA51F;
}
.proc-title.is-warn {
  color: #FF2D2D;
}
.proc-line {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 2px 4px;
  border-radius: 5px;
  color: #2FD8F5;
  overflow-wrap: anywhere;
}
.proc-line.k-read {
  color: #E8EAED;
}
.proc-line.k-clr {
  color: #E8EAED;
  opacity: .85;
}
.proc-tick {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 234, 237, .35);
  transform: translateY(1px);
}
.proc-line.is-done {
  color: rgba(232, 234, 237, .55);
}
.proc-line.is-done .proc-tick {
  border: 0;
  background: #3FD27A;
  -webkit-mask: none;
  position: relative;
}
.proc-line.is-done .proc-tick::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid #000;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.proc-line.is-now {
  background: rgba(255, 255, 255, .08);
}
.proc-line.is-now .proc-tick {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.proc-more {
  color: rgba(232, 234, 237, .55);
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 6px 4px 2px;
}
@media (max-width: 980px) {
  .proc-list {
    max-height: none;
  }
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.chapter-tile {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.chapter-head {
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.chapter-head:hover .h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.chapter-head .data {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.part {
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--fg-2);
  text-decoration: none;
}
.part:hover {
  border-color: var(--fg-2);
  color: var(--fg);
}
.part.is-done {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
  color: var(--ok);
}
.part.is-full {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}
.airlines {
  padding-block: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.airlines-head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.airlines-head .eyebrow {
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 640px) {
  .airlines-head .eyebrow {
    letter-spacing: 0.2em;
  }
}
.marquee {
  --band: clamp(22px, 1.6vw + 14px, 30px);
  display: flex;
  overflow: hidden;
  font-size: var(--band);
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 9%,
      #000 91%,
      transparent);
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 9%,
      #000 91%,
      transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: al-scroll 75s linear infinite;
  will-change: transform;
}
.marquee-track li {
  display: flex;
  align-items: center;
  padding-inline: clamp(22px, 2.6vw, 42px);
  height: 2.2em;
}
.marquee-track .al {
  position: relative;
  display: block;
  height: calc(var(--h) * 1em);
  width: calc(var(--h) * var(--r) * 1em);
}
.marquee-track .al img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .35s ease;
}
.marquee-track li:hover .al img {
  opacity: 1;
}
.marquee-track .al img.al-light {
  display: none;
}
:root[data-theme=light] .marquee-track .al img.al-light {
  display: block;
}
:root[data-theme=light] .marquee-track .al img.al-dark {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .marquee-track .al img.al-light {
    display: block;
  }
  :root:not([data-theme=dark]) .marquee-track .al img.al-dark {
    display: none;
  }
}
.marquee-track li:hover .al i {
  opacity: 0;
}
.marquee-track i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--fg-2);
  opacity: 0.72;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity .3s ease, background-color .3s ease;
}
@keyframes al-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    flex-wrap: wrap;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: 16px;
  }
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 100%;
    row-gap: 10px;
  }
  .marquee-copy {
    display: none;
  }
}
.ab-hero .ab-hero-photo {
  left: 36%;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 34%);
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 34%);
}
.ab-hero .ab-hero-photo img {
  object-position: 38% 50%;
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
}
.ab-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(10, 11, 13, 0.55) 0%,
      rgba(10, 11, 13, 0.1) 60%,
      rgba(10, 11, 13, 0) 100%),
    linear-gradient(
      0deg,
      rgba(10, 11, 13, 0.85) 0%,
      rgba(10, 11, 13, 0) 40%);
}
.ab-hero-inner {
  min-height: clamp(560px, 80vh, 800px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(96px, 14vw, 160px) clamp(52px, 7vw, 96px);
}
.ab-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #62B0F0;
}
.ab-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.ab-hero-title {
  margin-top: 22px;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.ab-hero-title span {
  display: block;
  color: rgba(242, 243, 245, 0.5);
}
.ab-hero-lede {
  margin-top: 26px;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(242, 243, 245, 0.8);
}
.ab-hero-cta {
  margin-top: 38px;
  gap: 12px;
}
.ab-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.ab-story-head {
  display: grid;
  gap: 16px;
}
.ab-story-head .h2 {
  max-width: 14ch;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ab-story-copy {
  display: grid;
  gap: 22px;
  padding-top: 6px;
}
.ab-story-copy p {
  color: var(--fg);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: -0.005em;
  max-width: 52ch;
}
.ab-values {
  list-style: none;
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.ab-values li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 32px clamp(20px, 3vw, 36px) 8px 0;
  min-width: 0;
}
.ab-values li + li {
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--line);
}
.ab-value-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}
.ab-value-ico svg {
  width: 22px;
  height: 22px;
}
.ab-values b {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.ab-values p {
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 34ch;
}
.ab-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ab-tile-yt {
  --glow:
    240,
    85,
    90;
}
.ab-tile-news {
  --glow:
    120,
    160,
    196;
}
.ab-stage {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
  min-height: 112px;
}
.ab-tile-ico {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--fg);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 28px -16px rgba(0, 0, 0, 0.45);
  transition: color .35s ease, border-color .35s ease;
}
.ab-tile-ico svg {
  width: 26px;
  height: 26px;
}
.ab-stage-k {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-tile:hover .ab-tile-ico,
.ab-tile:focus-visible .ab-tile-ico {
  color: rgb(var(--glow));
  border-color: rgba(var(--glow), 0.4);
}
:root[data-theme=light] .ab-tile-yt {
  --glow:
    196,
    43,
    49;
}
:root[data-theme=light] .ab-tile-news {
  --glow:
    63,
    91,
    114;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .ab-tile-yt {
    --glow:
      196,
      43,
      49;
  }
  :root:not([data-theme=dark]) .ab-tile-news {
    --glow:
      63,
      91,
      114;
  }
}
@media (max-width: 680px) {
  .ab-bento {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tile-ico {
    transition: none;
  }
}
.ab-accuracy-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.ab-accuracy-intro {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px);
  display: grid;
  gap: 16px;
}
.ab-accuracy-intro > p {
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 44ch;
}
.ab-accuracy-photo {
  margin-top: 14px;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: 22px;
}
.ab-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  counter-reset: none;
}
.ab-principles li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 8px;
  padding-block: 30px;
  border-top: 1px solid var(--line);
}
.ab-principles li:first-child {
  border-top-color: var(--line-strong);
}
.ab-principles li:last-child {
  border-bottom: 1px solid var(--line);
}
.ab-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ok);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
:root[data-theme=light] .ab-n {
  color: #1C5FA8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .ab-n {
    color: #1C5FA8;
  }
}
.ab-principles b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.ab-principles p {
  margin-top: 10px;
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 56ch;
}
.ab-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  color: #F2F3F5;
  background: #0A0C0B;
  border: 1px solid rgba(98, 176, 240, 0.22);
  box-shadow: 0 0 70px rgba(98, 176, 240, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.ab-cta::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 140%;
  z-index: -1;
  background:
    radial-gradient(
      closest-side,
      rgba(98, 176, 240, 0.14),
      transparent);
  pointer-events: none;
}
.ab-cta-mark {
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -90px;
  width: 340px;
  height: 340px;
  opacity: 0.07;
  background-color: #A6A6A8;
  pointer-events: none;
}
.ab-cta-copy {
  display: grid;
  gap: 14px;
}
.ab-cta .eyebrow {
  color: #62B0F0;
}
.ab-cta .h2 {
  max-width: 16ch;
  color: #fff;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ab-cta p {
  color: rgba(242, 243, 245, 0.72);
  max-width: 46ch;
  line-height: 1.6;
}
.ab-cta .btn-primary {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
}
.ab-cta .btn-ghost {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
}
.ab-note {
  margin-top: 28px;
  max-width: 760px;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted);
}
.ab-note b {
  color: var(--fg-2);
}
.ab-note a {
  color: var(--fg-2);
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .ab-story-grid,
  .ab-accuracy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-accuracy-intro {
    position: static;
  }
  .ab-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 900px) {
  .ab-hero {
    --ph: clamp(280px, 78vw, 480px);
  }
  .ab-hero .ab-hero-photo {
    left: 0;
    bottom: auto;
    height: var(--ph);
    -webkit-mask-image:
      linear-gradient(
        180deg,
        #000 60%,
        transparent 100%);
    mask-image:
      linear-gradient(
        180deg,
        #000 60%,
        transparent 100%);
  }
  .ab-hero-inner {
    min-height: 0;
    padding-top: calc(var(--ph) - 56px);
  }
  .ab-hero .ab-hero-photo img {
    object-position: 46% 50%;
  }
  .ab-hero::before {
    background:
      linear-gradient(
        0deg,
        rgba(10, 11, 13, 0.9) 0%,
        rgba(10, 11, 13, 0) 50%);
  }
}
@media (max-width: 720px) {
  .ab-values {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-values li,
  .ab-values li + li {
    padding: 26px 0;
    border-left: 0;
  }
  .ab-values li + li {
    border-top: 1px solid var(--line);
  }
  .ab-hero-inner {
    min-height: clamp(520px, 86vh, 720px);
  }
}
.ct-hero .ab-hero-photo img {
  object-position: 74% 50%;
}
.ct-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.ct-write-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.ct-write-copy .h2 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ct-write-copy p {
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 48ch;
}
.ct-write-act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ct-copy {
  gap: 9px;
}
.ct-copy svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ct-copy.is-copied {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.ct-org {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.ct-org::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ok),
      transparent);
  opacity: .6;
}
.ct-org .ab-value-ico {
  margin: 0;
  align-self: start;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
.ct-org .ab-value-ico svg {
  width: 26px;
  height: 26px;
}
.ct-org-copy {
  display: grid;
  gap: 10px;
}
.ct-org .h3 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ct-org p {
  color: var(--fg-2);
  max-width: 60ch;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .ct-hero .ab-hero-photo img {
    object-position: 70% 50%;
  }
  .ct-write,
  .ct-org {
    grid-template-columns: minmax(0, 1fr);
  }
  .ct-org .btn {
    justify-self: start;
  }
}
.pilots {
  --wm-on: var(--ok);
}
.pilots-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.pilots-head .h2 {
  max-width: 25ch;
  text-wrap: balance;
}
.worldmap {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
}
.worldmap > svg,
.worldmap > .wm-static {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.wm-land {
  fill: color-mix(in srgb, var(--fg) 10%, var(--bg));
  stroke: var(--bg);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.wm-shape {
  fill: color-mix(in srgb, var(--wm-on) 46%, var(--bg));
  stroke: var(--bg);
  stroke-width: 0.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .35s ease;
}
.wm-pin {
  fill: var(--wm-on);
  stroke: var(--bg);
  stroke-width: 1.1;
  transition: r .3s var(--ease-out);
}
.wm-pulse {
  fill: var(--wm-on);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-pulse 3.2s ease-out infinite;
  animation-delay: calc(var(--i) * -0.29s);
  pointer-events: none;
}
.worldmap.is-offscreen .wm-pulse {
  animation-play-state: paused;
}
.wm-hit {
  fill: transparent;
  cursor: pointer;
}
@keyframes wm-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.6);
  }
  70%, 100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
.worldmap.has-active .wm-c:not(.is-active) .wm-shape {
  fill: color-mix(in srgb, var(--wm-on) 22%, var(--bg));
}
.worldmap.has-active .wm-c:not(.is-active) .wm-pin {
  opacity: 0.45;
}
.wm-c.is-active .wm-shape {
  fill: var(--wm-on);
}
.wm-c.is-active .wm-pin {
  r: 3.6;
}
.wm-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--invert-bg);
  color: var(--invert-fg);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .wm-pulse {
    animation: none;
  }
}
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 34px);
  margin-bottom: clamp(30px, 4vw, 50px);
  border-top: 1px solid rgba(242, 243, 245, 0.16);
  text-align: left;
}
.figures {
  --d: 0s;
}
.fig-v {
  font-variant-numeric: tabular-nums;
}
.figure {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.fig-n {
  display: flex;
  align-items: flex-start;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.fig-v {
  display: inline-flex;
  padding-block: 0.06em;
  margin-block: -0.06em;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 35%,
      rgba(0, 0, 0, 0.6));
  mask-image:
    linear-gradient(
      180deg,
      #000 35%,
      rgba(0, 0, 0, 0.6));
}
.fig-lab {
  display: grid;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(242, 243, 245, 0.82);
}
.fig-lab::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: #62B0F0;
  margin-bottom: 8px;
  transform-origin: 0 50%;
}
.fig-ext {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.45em;
  vertical-align: 0.04em;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.figure .fig-lab {
  transition: color .25s ease;
}
a.figure:hover .fig-lab,
a.figure:focus-visible .fig-lab {
  color: #FFFFFF;
}
a.figure:focus-visible {
  outline: 2px solid #F2F3F5;
  outline-offset: 6px;
  border-radius: 6px;
}
@media (max-width: 760px) {
  .figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }
  .fig-n {
    font-size: clamp(2.2rem, 1.2rem + 4.4vw, 2.75rem);
  }
  .fig-lab {
    font-size: 0.8125rem;
  }
}
.js .figures:not(.is-armed):not(.is-static) .fig-v {
  opacity: 0;
  animation: fig-show 0s 2.5s forwards;
}
@keyframes fig-show {
  to {
    opacity: 1;
  }
}
.figures.is-armed .fig-lab::before {
  transform: scaleX(0);
}
.figures.is-armed .fig-lab > * {
  opacity: 0;
  transform: translateY(8px);
}
.figures.is-armed .fig-lab {
  color: rgba(242, 243, 245, 0);
}
.figures.is-run .fig-lab {
  color: rgba(242, 243, 245, 0.82);
  transition: color .7s ease calc(var(--d) + 0.25s);
}
.figures.is-run .fig-lab > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease calc(var(--d) + 0.3s), transform .8s var(--ease-out) calc(var(--d) + 0.3s);
}
.figures.is-run .fig-lab::before {
  transform: scaleX(1);
  transition: transform .9s var(--ease-out) calc(var(--d) + 0.15s);
}
.amarquee {
  display: flex;
  overflow: hidden;
  padding-block: 12px 44px;
  margin-block: -12px -44px;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
}
.amarquee-track {
  display: flex;
  flex: none;
  animation: al-scroll 70s linear infinite;
}
.amarquee:hover .amarquee-track,
.amarquee:focus-within .amarquee-track {
  animation-play-state: paused;
}
.amarquee-track {
  align-items: stretch;
}
.amarquee-track .acard {
  flex: none;
  width: clamp(290px, 29vw, 400px);
  margin-right: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .amarquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: max(16px, env(safe-area-inset-left, 0px));
  }
  .amarquee-track {
    animation: none;
  }
  .amarquee-copy {
    display: none;
  }
}
.nav-ext {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.4em;
  vertical-align: 0.1em;
  opacity: 0.6;
  transition: opacity .25s ease;
}
.nav-ext svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-ext path {
  transition: transform .35s var(--ease-out);
}
a:hover .nav-ext {
  opacity: 1;
}
a:hover .nav-ext path {
  transform: translate(1px, -1px);
}
.brand-mark {
  transform-origin: 49.8% 57.4%;
  will-change: transform;
}
.subscribe {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%,
      var(--surface) 55%);
  border: 1px solid var(--line);
}
.subscribe-mark {
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -70px;
  width: 300px;
  height: 300px;
  opacity: 0.08;
  pointer-events: none;
}
.subscribe-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.subscribe-copy .h2 {
  max-width: 18ch;
  text-wrap: balance;
}
.subscribe-copy .lede {
  max-width: 40ch;
}
.subscribe-try {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ok);
  text-decoration: none;
}
.subscribe-try:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.subscribe-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.subscribe-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.subscribe-field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  outline: 0;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font: 500 1rem var(--font-body);
  color: var(--fg);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.subscribe-field input:focus {
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent);
}
.subscribe-field input::placeholder {
  color: var(--muted);
}
.subscribe-field .btn {
  flex: none;
  min-height: 56px;
}
.subscribe-note {
  font-size: 0.8125rem;
  color: var(--muted);
  padding-left: 24px;
  min-height: 1.4em;
}
.subscribe-note.is-error {
  color: var(--warn);
}
.subscribe-note.is-done {
  color: var(--ok);
}
.subscribe-field.is-error input {
  border-color: var(--warn);
}
.subscribe-in {
  display: grid;
  gap: 16px;
  justify-items: start;
  min-width: 0;
}
.subscribe-in-line {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
  overflow-wrap: anywhere;
}
html[data-me] .subscribe-form {
  display: none;
}
@media (max-width: 820px) {
  .subscribe {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .subscribe-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .subscribe-field input {
    flex: none;
  }
  .subscribe-note {
    padding-left: 0;
    text-align: center;
  }
}
.faq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F2F3F5;
  background: #0B0C0E;
  padding-block: clamp(84px, 11vw, 148px) clamp(64px, 8vw, 112px);
}
.faq-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.faq-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  filter: saturate(0.95) contrast(1.05) brightness(0.92);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.96) 0%,
      rgba(11, 12, 14, 0.9) 42%,
      rgba(11, 12, 14, 0.5) 66%,
      rgba(11, 12, 14, 0.2) 100%),
    linear-gradient(
      0deg,
      rgba(11, 12, 14, 0.85) 0%,
      rgba(11, 12, 14, 0) 38%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.55) 0%,
      rgba(11, 12, 14, 0) 30%);
}
.faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(98, 176, 240, 0.5),
      transparent 70%);
}
.faq-lit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #62B0F0;
}
.faq-lit::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.faq-hero .h1 {
  margin-top: 20px;
  max-width: 13ch;
  color: #FFFFFF;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}
.faq-hero .lede {
  margin-top: 20px;
  max-width: 46ch;
  color: rgba(242, 243, 245, 0.8);
}
.faq-hero .faq-search svg {
  z-index: 1;
  color: rgba(242, 243, 245, 0.6);
}
.faq-hero .faq-search input {
  color: #FFFFFF;
  background: rgba(14, 15, 17, 0.6);
  border-color: rgba(242, 243, 245, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.faq-hero .faq-search input::placeholder {
  color: rgba(242, 243, 245, 0.5);
}
.faq-hero .faq-search input:focus {
  border-color: rgba(242, 243, 245, 0.6);
  box-shadow: 0 0 0 4px rgba(242, 243, 245, 0.1);
}
.faq-hero .faq-search:focus-within svg {
  color: #FFFFFF;
}
.faq-hero .faq-found {
  color: rgba(242, 243, 245, 0.6);
}
@media (max-width: 720px) {
  .faq-hero-photo img {
    object-position: 64% 50%;
  }
  .faq-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.8) 0%,
        rgba(11, 12, 14, 0.86) 55%,
        rgba(11, 12, 14, 0.95) 100%);
  }
}
.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin-top: 32px;
}
.faq-search svg {
  position: absolute;
  left: 20px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  transition: color .25s ease;
}
.faq-search input {
  width: 100%;
  height: 56px;
  padding: 0 116px 0 52px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font: 500 1rem var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .3s ease;
}
.faq-search input::placeholder {
  color: var(--muted);
}
.faq-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.faq-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent);
}
.faq-search:focus-within svg {
  color: var(--fg);
}
.faq-found {
  position: absolute;
  right: 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.art-search {
  margin-top: 28px;
}
.page-hero.has-photo .art-search svg {
  z-index: 1;
  color: rgba(242, 243, 245, 0.62);
}
.page-hero.has-photo .art-search input {
  color: #FFFFFF;
  background: rgba(14, 15, 17, 0.58);
  border-color: rgba(242, 243, 245, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.page-hero.has-photo .art-search input::placeholder {
  color: rgba(242, 243, 245, 0.55);
}
.page-hero.has-photo .art-search input:focus {
  border-color: rgba(242, 243, 245, 0.6);
  box-shadow: 0 0 0 4px rgba(242, 243, 245, 0.1);
}
.page-hero.has-photo .art-search:focus-within svg {
  color: #FFFFFF;
}
.page-hero.has-photo .art-search .faq-found {
  color: rgba(242, 243, 245, 0.7);
}
.art-search input {
  padding-right: 132px;
}
.art-key {
  position: absolute;
  right: 20px;
  font: 600 0.75rem/1 var(--font-body);
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(242, 243, 245, 0.28);
  color: rgba(242, 243, 245, 0.7);
  pointer-events: none;
  transition: opacity .2s ease;
}
.art-search.has-q .art-key,
.art-search:focus-within .art-key {
  opacity: 0;
}
@media (pointer: coarse) {
  .art-key {
    display: none;
  }
  .art-search input {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .art-search input {
    padding-right: 104px;
  }
  .art-search .faq-found {
    right: 20px;
  }
}
.article-list [data-hide] {
  display: none !important;
}
.acard mark,
.art-empty mark {
  color: inherit;
  background: var(--ok-soft);
  box-shadow: inset 0 -1.5px 0 var(--ok);
  border-radius: 3px;
  padding: 0 1px;
}
.acard-hit {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--line);
}
.acard-hit[hidden] {
  display: none;
}
.acard-hit::before {
  content: "In the article";
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.art-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 56px 20px 64px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 24px;
}
.art-empty[hidden] {
  display: none;
}
.art-empty-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--muted);
}
.art-empty-ic svg {
  width: 24px;
  height: 24px;
}
.art-empty-t {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.art-empty-l {
  margin: 0;
  color: var(--muted);
}
.art-empty .find-try {
  justify-content: center;
  color: var(--muted);
  font-size: 0.875rem;
}
.art-empty .btn {
  margin-top: 6px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-index {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px);
  display: grid;
  gap: 2px;
  min-width: 0;
}
.faq-index .eyebrow {
  margin-bottom: 12px;
}
.faq-index a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--fg-2);
  transition:
    color .25s ease,
    background-color .25s ease,
    opacity .25s ease;
}
.faq-index a span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.faq-index a:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.faq-index a[aria-current=true] {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.faq-index a[aria-current=true] span {
  color: var(--ok);
}
.faq-index a.is-empty {
  opacity: 0.35;
  pointer-events: none;
}
.faq-groups {
  display: grid;
  gap: clamp(48px, 6vw, 72px);
  min-width: 0;
}
.faq-group {
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px);
}
.faq-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.faq-n {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.faq {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
  border-radius: 6px;
}
.faq-plus {
  flex: none;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color .3s ease,
    border-color .3s ease,
    transform .5s var(--ease-out);
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.6px;
  margin: -0.8px 0 0 -6px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform .5s var(--ease-out), background-color .3s ease;
}
.faq-plus::after {
  transform: rotate(90deg);
}
.faq summary:hover .faq-plus {
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.faq[open] .faq-plus {
  background: var(--fg);
  border-color: var(--fg);
  transform: rotate(180deg);
}
.faq[open] .faq-plus::before,
.faq[open] .faq-plus::after {
  background: var(--bg);
}
.faq[open] .faq-plus::after {
  transform: rotate(0deg);
}
.faq-a p {
  margin: 0;
  padding: 0 56px 26px 0;
  max-width: 68ch;
  color: var(--fg-2);
  line-height: 1.7;
}
.faq-a a {
  color: var(--fg);
  text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease;
}
.faq-a a:hover {
  text-decoration-color: currentColor;
}
.faq mark {
  color: inherit;
  background: var(--ok-soft);
  box-shadow: inset 0 -1.5px 0 var(--ok);
  border-radius: 3px;
  padding: 0 1px;
}
.faq.is-flash {
  animation: faq-flash 1.8s ease;
}
@keyframes faq-flash {
  0%, 30% {
    background: var(--ok-soft);
  }
  100% {
    background: transparent;
  }
}
.faq-empty {
  display: grid;
  gap: 8px;
  padding: 32px 0;
  color: var(--fg-2);
}
.faq-empty a {
  color: var(--fg);
}
.faq-more {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%,
      var(--surface) 55%);
}
.faq-more-mark {
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -70px;
  width: 300px;
  height: 300px;
  opacity: 0.08;
  pointer-events: none;
}
.faq-more .h2 {
  max-width: 18ch;
  text-wrap: balance;
}
@media (max-width: 860px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-index {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .faq-index::-webkit-scrollbar {
    display: none;
  }
  .faq-index .eyebrow {
    display: none;
  }
  .faq-index a {
    flex: none;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
  }
  .faq-more {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .faq-search input {
    padding-right: 96px;
  }
  .faq summary {
    font-size: 1rem;
    gap: 16px;
  }
  .faq-a p {
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-plus,
  .faq-plus::before,
  .faq-plus::after {
    transition: none;
  }
  .faq.is-flash {
    animation: none;
  }
}
@property --pr-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pr {
  --ecam: #62B0F0;
  --ecam-deep: #3D6D95;
  --deck: #0A0C0B;
  --deck-ink: #F2F3F5;
  --spring: cubic-bezier(.34, 1.18, .4, 1);
  --pr-glow: color-mix(in srgb, var(--ok) 12%, transparent);
  padding-bottom: clamp(88px, 11vw, 136px);
  overflow-x: clip;
}
.pr-lit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ok);
}
.pr-lit::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
:root[data-theme=light] .pr-section .pr-lit {
  color: #1C5FA8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .pr-section .pr-lit {
    color: #1C5FA8;
  }
}
.pr-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #F2F3F5;
  background: var(--bg);
  padding-block: clamp(72px, 10vw, 132px) clamp(190px, 21vw, 250px);
}
.pr-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0B0C0E;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 52%,
      rgba(0, 0, 0, 0.55) 74%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 52%,
      rgba(0, 0, 0, 0.55) 74%,
      transparent 100%);
}
.pr-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(0.85) contrast(1.06) brightness(0.98);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.pr-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      64% 56% at 50% 36%,
      rgba(11, 12, 14, 0.76) 0%,
      rgba(11, 12, 14, 0.5) 58%,
      rgba(11, 12, 14, 0.28) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.7) 0%,
      rgba(11, 12, 14, 0) 26%,
      rgba(11, 12, 14, 0) 55%,
      rgba(11, 12, 14, 0.55) 100%);
}
.pr-head .pr-lit {
  color: #62B0F0;
}
.pr-head .pr-title {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.pr-head .pr-lede {
  color: rgba(242, 243, 245, 0.8);
}
.pr-head .pr-trust li {
  color: rgba(242, 243, 245, 0.82);
}
.pr-head .pr-trust svg {
  color: #62B0F0;
}
.pr-head .pr-bill {
  background: rgba(14, 15, 17, 0.55);
  border-color: rgba(242, 243, 245, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -18px rgba(0, 0, 0, 0.8);
}
.pr-head .pr-bill button {
  color: rgba(242, 243, 245, 0.6);
}
.pr-head .pr-bill button:hover {
  color: rgba(242, 243, 245, 0.85);
}
.pr-head .pr-bill button[aria-pressed=true] {
  color: #FFFFFF;
}
.pr-head .pr-bill button:focus-visible {
  outline-color: #F2F3F5;
}
.pr-head .pr-pill {
  background: rgba(242, 243, 245, 0.12);
  box-shadow: inset 0 0 0 1px rgba(242, 243, 245, 0.18), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.pr-head .pr-save {
  color: #62B0F0;
  background: rgba(98, 176, 240, 0.14);
}
.pr-title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.pr-lede {
  margin: 22px auto 0;
  max-width: 44ch;
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: balance;
}
.pr-trust {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.pr-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--fg-2);
}
.pr-trust svg {
  width: 16px;
  height: 16px;
  color: var(--ok);
  flex: none;
}
.pr-bill {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pr-bill button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: 600 0.9rem var(--font-display);
  color: var(--muted);
  transition: color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pr-bill button:hover {
  color: var(--fg-2);
}
.pr-bill button[aria-pressed=true] {
  color: var(--fg);
}
.pr-bill button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.pr-pill {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform .55s var(--spring), width .55s var(--spring);
}
html:not(.js) .pr-bill button[aria-pressed=true] {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.pr-save {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ok);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  font-variant-numeric: tabular-nums;
}
.prem .pr-top {
  flex-wrap: wrap;
  row-gap: 12px;
}
.prem .pr-bill {
  padding: 4px;
  background: rgba(242, 243, 245, 0.05);
  border-color: rgba(242, 243, 245, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.prem .pr-bill button {
  min-height: 32px;
  padding: 0 13px;
  gap: 7px;
  font-size: 0.8125rem;
  color: rgba(242, 243, 245, 0.55);
}
.prem .pr-bill button:hover {
  color: rgba(242, 243, 245, 0.85);
}
.prem .pr-bill button[aria-pressed=true] {
  color: #FFFFFF;
}
.prem .pr-bill button:focus-visible {
  outline-color: #F2F3F5;
}
.prem .pr-pill {
  top: 4px;
  bottom: 4px;
  background: rgba(242, 243, 245, 0.12);
  box-shadow: inset 0 0 0 1px rgba(242, 243, 245, 0.16);
}
.prem .pr-save {
  font-size: 0.625rem;
  padding: 2px 6px;
  color: #62B0F0;
  background: rgba(98, 176, 240, 0.14);
}
.pr-grid {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(150px, 17vw, 200px));
}
.pr-spot {
  position: absolute;
  z-index: 0;
  width: 680px;
  height: 680px;
  left: -9999px;
  top: -9999px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background:
    radial-gradient(
      circle,
      var(--pr-glow),
      transparent 62%);
}
.pr-grid:hover .pr-spot {
  opacity: 1;
}
.pr-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
  perspective: 1600px;
}
.pr-card {
  position: relative;
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  border-radius: 26px;
  scroll-margin-top: calc(var(--header-h) + 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, var(--shadow);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease-out), border-color .4s ease;
}
.pr-card:hover {
  border-color: var(--line-strong);
}
.pr-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
  background:
    radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, 0.08),
      transparent 62%);
}
.pr-card:hover .pr-glare {
  opacity: 1;
}
.pr-inner {
  position: relative;
  z-index: 3;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding: clamp(28px, 3.6vw, 44px);
  transform: translateZ(30px);
}
.pr-card.prem {
  color: var(--deck-ink);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--deck), var(--deck)) padding-box,
    conic-gradient(
      from var(--pr-beam),
      transparent 0deg,
      var(--ecam) 55deg,
      var(--ecam-deep) 115deg,
      transparent 200deg,
      transparent 360deg) border-box;
  box-shadow: 0 0 50px rgba(98, 176, 240, 0.10), 0 40px 80px -24px rgba(0, 0, 0, 0.65);
  animation: pr-beam 5s linear infinite;
}
.pr-card.prem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 90px rgba(98, 176, 240, 0.16);
  opacity: 0;
  animation: pr-breathe 4.6s ease-in-out infinite;
}
.pr-card.prem.pr-still,
.js.pr-played .pr-card.prem.pr-still,
.pr-card.prem.pr-still::after {
  animation-play-state: paused;
}
.pr-card.prem .pr-inner::before {
  content: "";
  position: absolute;
  inset: -30px -10px auto;
  height: 260px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(98, 176, 240, 0.13),
      transparent 70%);
}
@keyframes pr-beam {
  to {
    --pr-beam: 360deg;
  }
}
@keyframes pr-breathe {
  50% {
    opacity: 1;
  }
}
.pr-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateZ(40px);
  z-index: 4;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  color: #06121D;
  background:
    linear-gradient(
      180deg,
      #89C4F4,
      #62B0F0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 24px -6px rgba(98, 176, 240, 0.55);
}
.pr-row-head {
  display: grid;
  gap: 12px;
  align-content: start;
}
.pr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 30px;
}
.pr-name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.pr-plus {
  margin-left: 0.04em;
  color: var(--ecam);
}
.pr-chip {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.pr-line {
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 38ch;
}
.prem .pr-line {
  color: rgba(242, 243, 245, 0.7);
}
.pr-row-price {
  padding-top: 30px;
}
.pr-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-display);
  line-height: 1;
}
.pr-amt {
  font-weight: 800;
  font-size: clamp(3.25rem, 2.6rem + 2.2vw, 4.25rem);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.pr-amt .cur,
.pr-amt .cents {
  font-size: 0.45em;
  letter-spacing: -0.01em;
  vertical-align: 0.95em;
}
.pr-amt .cur {
  margin-right: 4px;
  opacity: 0.6;
  font-weight: 700;
}
.pr-price .term {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
}
.prem .pr-price .term {
  color: rgba(242, 243, 245, 0.62);
}
.pr-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  min-height: 24px;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.prem .pr-note {
  color: rgba(242, 243, 245, 0.55);
}
.pr-note b {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--ecam);
  background: rgba(98, 176, 240, 0.12);
  box-shadow: inset 0 0 0 1px rgba(98, 176, 240, 0.25);
}
.pr-row-cta {
  padding-top: 28px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.pr-btn {
  width: 100%;
  min-height: 56px;
  font-size: 0.9688rem;
}
.btn.pr-btn-lit {
  --pb-bg: var(--ecam);
  --pb-fg: #06121D;
}
.pr-btn-lit:focus-visible {
  outline-color: var(--ecam);
}
.prem .btn-ghost {
  --pb-bg: var(--deck-ink);
  --pb-fg: #0A0C0B;
}
.pr-sub {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.prem .pr-sub {
  color: rgba(242, 243, 245, 0.5);
}
.pr-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 36px 0 18px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-lead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.prem .pr-lead {
  color: var(--ecam);
}
.prem .pr-lead::after {
  background:
    linear-gradient(
      90deg,
      rgba(98, 176, 240, 0.35),
      rgba(98, 176, 240, 0.05));
}
.pr-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  align-content: start;
}
.pr-feats li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.pr-feats li small {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(242, 243, 245, 0.48);
}
.pr-feats li em {
  font-style: normal;
  font-weight: 700;
  color: var(--ecam);
}
.pr-card:not(.prem) .pr-feats li em {
  color: inherit;
}
.pr-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: -1px;
  background: var(--ok-soft);
  color: var(--ok);
}
.pr-tick svg {
  width: 12px;
  height: 12px;
}
.prem .pr-tick {
  background: rgba(98, 176, 240, 0.13);
  color: var(--ecam);
  box-shadow: inset 0 0 0 1px rgba(98, 176, 240, 0.18), 0 0 12px rgba(98, 176, 240, 0.14);
}
.pr-feats li.off {
  color: var(--muted);
}
.pr-feats li.off .pr-tick {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--muted);
}
.pr-groups {
  display: grid;
  gap: 26px;
  align-content: start;
}
.pr-groups .pr-feats {
  margin-top: -14px;
}
.pr-grp {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 72%, transparent);
}
.prem .pr-grp {
  color: rgba(242, 243, 245, 0.74);
}
.pr-unlock {
  padding-top: 32px;
  align-self: end;
}
.pr-unlock a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 18px 20px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition:
    border-color .35s ease,
    background-color .35s ease,
    transform .35s var(--ease-out);
}
.pr-unlock a:hover {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: var(--ok-soft);
  transform: translateY(-1px);
}
.pr-unlock b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
}
.pr-unlock a > span:first-child > span {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.pr-unlock-go {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ok-soft);
  color: var(--ok);
  transition: transform .35s var(--ease-out);
}
.pr-unlock-go::after {
  content: "";
  width: 15px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pr-unlock a:hover .pr-unlock-go {
  transform: translateX(3px);
}
.pr-renew {
  max-width: 620px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: balance;
}
.js .pr-rise {
  opacity: 0;
  transform: translateY(32px);
}
.js.pr-played .pr-rise {
  animation: pr-rise 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
.js.pr-played .pr-rise.d1 {
  animation-delay: .08s;
}
.js.pr-played .pr-rise.d2 {
  animation-delay: .18s;
}
.js.pr-played .pr-rise.d3 {
  animation-delay: .28s;
}
.js .pr-card-rise {
  opacity: 0;
  transform: translateY(64px);
}
.js.pr-played .pr-card-rise {
  animation: pr-cardrise 1.15s var(--spring) .4s forwards;
}
.js.pr-played .pr-card-rise.prem {
  animation: pr-cardrise 1.15s var(--spring) .54s forwards, pr-beam 5s linear .9s infinite;
}
@keyframes pr-rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pr-cardrise {
  to {
    opacity: 1;
    transform: none;
  }
}
.pr-section {
  margin-top: clamp(88px, 11vw, 136px);
}
.pr-sec-head {
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.pr-sec-head .h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pr-org {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.pr-org::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ok),
      transparent);
  opacity: .6;
}
.pr-org-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  align-self: start;
}
.pr-org-ico svg {
  width: 26px;
  height: 26px;
}
.pr-org-copy {
  display: grid;
  gap: 10px;
}
.pr-org .h3 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pr-org p {
  color: var(--fg-2);
  max-width: 56ch;
  line-height: 1.6;
}
.pr-tr {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: center;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 20px clamp(18px, 3vw, 28px);
  border-radius: 22px;
  color: var(--fg);
  text-decoration: none;
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--instr) 9%, var(--surface)),
      var(--surface) 60%);
  border: 1px solid color-mix(in srgb, var(--instr) 34%, var(--line));
  box-shadow: var(--shadow);
}
.pr-tr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--instr),
      transparent);
  opacity: .7;
}
.pr-tr:focus-visible {
  outline: 2px solid var(--instr);
  outline-offset: 3px;
}
.pr-tr-ico {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--instr);
  background: var(--instr-soft);
  border: 1px solid color-mix(in srgb, var(--instr) 30%, transparent);
}
.pr-tr-ico svg {
  width: 26px;
  height: 26px;
}
.pr-tr-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pr-tr-copy .eyebrow {
  color: var(--instr);
}
.pr-tr-copy b {
  font-size: clamp(1.05rem, 0.95rem + .5vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pr-tr-copy > span:last-child {
  color: var(--fg-2);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 62ch;
}
.btn.pr-tr-go {
  --pb-bg: var(--instr);
  --pb-fg: #041217;
}
.pr-tr:hover .pr-tr-go,
.pr-tr:focus-visible .pr-tr-go {
  background-color: var(--pb-bg);
  border-color: var(--pb-bg);
  color: var(--pb-fg);
}
.pr-tr:hover .pr-tr-go > .arrow,
.pr-tr:focus-visible .pr-tr-go > .arrow {
  background: color-mix(in srgb, var(--pb-fg) 12%, transparent);
  left: 2px;
}
@media (max-width: 680px) {
  .pr-tr {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pr-tr-go {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
.pr-tr-link {
  display: inline-block;
  max-width: 100%;
  text-wrap: balance;
  margin-top: 22px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #F2F3F5;
  text-decoration: none;
  background: rgba(14, 15, 17, 0.5);
  border: 1px solid rgba(79, 209, 232, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.pr-tr-link span:first-child {
  color: #4FD1E8;
}
.pr-tr-link .arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
.pr-tr-link:hover {
  border-color: #4FD1E8;
  background: rgba(14, 15, 17, 0.7);
}
.pr-tr-link:focus-visible {
  outline: 2px solid #4FD1E8;
  outline-offset: 3px;
}
.prem .pr-bill button {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .prem .pr-bill {
    display: flex;
    width: 100%;
  }
  .prem .pr-bill button {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 6px;
    gap: 5px;
    font-size: 0.75rem;
  }
  .pr-save-tr {
    display: none;
  }
}
.pr-save-tr {
  color: #4FD1E8 !important;
  background: rgba(79, 209, 232, 0.14) !important;
}
.prem.is-pass .pr-badge {
  background: #4FD1E8;
  color: #0C1416;
}
.prem.is-pass .pr-note b {
  color: #4FD1E8;
  background: rgba(79, 209, 232, 0.12);
  box-shadow: inset 0 0 0 1px rgba(79, 209, 232, 0.28);
}
.pr-offer {
  max-width: 40rem;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #F2F3F5;
  text-wrap: balance;
  background: rgba(14, 15, 17, 0.55);
  border: 1px solid rgba(98, 176, 240, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pr-offer[hidden] {
  display: none;
}
.pr-offer b {
  color: #62B0F0;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pr-offer a {
  color: #F2F3F5;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 2px;
  white-space: nowrap;
}
.pr-offer a:focus-visible {
  outline: 2px solid #62B0F0;
  outline-offset: 2px;
  border-radius: 4px;
}
.pr-code {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: -4px;
}
.pr-code[hidden],
.pr-code-f[hidden] {
  display: none;
}
.pr-code-t {
  min-height: 44px;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: rgba(242, 243, 245, 0.72);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pr-code-t:hover {
  color: #F2F3F5;
}
.pr-code-t:focus-visible {
  outline: 2px solid #62B0F0;
  outline-offset: 2px;
  border-radius: 6px;
}
.pr-code-f {
  display: flex;
  gap: 8px;
  width: 100%;
}
.pr-code-f input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(242, 243, 245, 0.22);
  background: rgba(14, 15, 17, 0.6);
  color: #F2F3F5;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pr-code-f input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: rgba(242, 243, 245, 0.45);
}
.pr-code-f input:focus {
  outline: 2px solid #62B0F0;
  outline-offset: 1px;
  border-color: transparent;
}
.pr-code-go {
  flex: none;
  min-width: 84px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(98, 176, 240, 0.45);
  background: rgba(98, 176, 240, 0.12);
  color: #F2F3F5;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.pr-code-go:hover {
  background: rgba(98, 176, 240, 0.2);
}
.pr-code-go:focus-visible {
  outline: 2px solid #62B0F0;
  outline-offset: 2px;
}
.pr-code-msg {
  max-width: 34ch;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(242, 243, 245, 0.7);
  text-wrap: pretty;
}
.pr-code-msg:empty {
  display: none;
}
.pr-code-msg.is-good {
  color: #62B0F0;
}
.pr-code-msg.is-bad {
  color: #FFB4A8;
}
.pr-qs {
  max-width: 800px;
  margin: 40px auto 0;
  border-top: 1px solid var(--line-strong);
}
.pr-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--deck);
  color: var(--deck-ink);
  border: 1px solid rgba(98, 176, 240, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  line-height: 1.55;
  animation: pr-toast .45s var(--ease-out);
}
.pr-toast a {
  color: var(--ecam);
  font-weight: 600;
}
@keyframes pr-toast {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}
@media (max-width: 820px) {
  .pr-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 34px;
    max-width: 560px;
  }
  .pr-card,
  .pr-inner {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .pr-card.prem {
    order: -1;
  }
  .pr-unlock-space {
    display: none;
  }
  .pr-org {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-org .btn {
    justify-self: start;
  }
}
@media (max-width: 420px) {
  .pr-bill button {
    padding: 0 16px;
  }
  .pr-trust {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .pr-rise,
  .js .pr-card-rise {
    opacity: 1 !important;
    transform: none !important;
  }
}
.tq-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F2F3F5;
  background: var(--bg);
  padding-block: clamp(64px, 9vw, 120px) clamp(150px, 16vw, 210px);
}
.tq-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0B0C0E;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 55%,
      rgba(0, 0, 0, 0.55) 76%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 55%,
      rgba(0, 0, 0, 0.55) 76%,
      transparent 100%);
}
.tq-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.9) contrast(1.06);
  animation: hero-settle 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
.tq-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(10, 11, 13, 0.9) 0%,
      rgba(10, 11, 13, 0.72) 45%,
      rgba(10, 11, 13, 0.5) 100%),
    radial-gradient(
      50% 50% at 25% 40%,
      rgba(98, 176, 240, 0.08),
      transparent 70%);
}
.tq-head-in {
  display: grid;
  justify-items: start;
  gap: 0;
}
.tq-ed {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #62B0F0;
}
.tq-ed i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.tq-title {
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}
.tq-title span {
  display: block;
  margin-top: 0.14em;
  color: rgba(242, 243, 245, 0.5);
}
.tq-lede {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(242, 243, 245, 0.78);
}
.tq-facts {
  list-style: none;
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding: 0;
  display: flex;
  gap: clamp(26px, 4vw, 48px);
}
.tq-facts li {
  display: grid;
  gap: 2px;
}
.tq-facts b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tq-facts span {
  font-size: 0.8125rem;
  color: rgba(242, 243, 245, 0.62);
}
.tq-issue {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 22px 30px 20px;
  border-radius: 22px;
  border: 1px solid rgba(98, 176, 240, 0.38);
  background:
    linear-gradient(
      160deg,
      rgba(98, 176, 240, 0.12),
      rgba(11, 12, 14, 0.55) 70%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: hero-rise 0.9s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.tq-issue-k,
.tq-issue-m {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tq-issue-k {
  color: #62B0F0;
}
.tq-issue-m {
  color: rgba(242, 243, 245, 0.66);
}
.tq-issue-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 4vw, 7.25rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tq-issue-n small {
  font-size: 0.42em;
  font-weight: 600;
  vertical-align: 0.95em;
  margin-right: 0.04em;
  color: #62B0F0;
  letter-spacing: 0;
}
@media (min-width: 860px) {
  .tq-head-in {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 5vw, 80px);
  }
  .tq-head-in > * {
    grid-column: 1;
  }
  .tq-head-in > .tq-issue {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    min-width: 220px;
  }
}
@media (max-width: 859.98px) {
  .tq-issue {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-items: start;
    column-gap: 16px;
    row-gap: 2px;
    padding: 14px 20px;
    margin-top: 18px;
    border-radius: 18px;
  }
  .tq-issue-n {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 3.75rem;
    align-self: center;
  }
  .tq-issue-k {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .tq-issue-m {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}
.tq-ed,
.tq-title,
.tq-lede,
.tq-go,
.tq-facts {
  animation: hero-rise 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
.tq-title {
  animation-delay: .06s;
}
.tq-lede {
  animation-delay: .12s;
}
.tq-go {
  animation-delay: .15s;
}
.tq-facts {
  animation-delay: .18s;
}
.tq-go {
  margin-top: clamp(22px, 2.6vw, 30px);
}
.tq-go .btn-primary {
  --pb-bg: #F2F3F5;
  --pb-fg: #121315;
  min-height: 52px;
  border-color: rgba(242, 243, 245, 0.55);
  background-color: rgba(242, 243, 245, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.tq-go .btn-primary:hover,
.tq-go .btn-primary:focus-visible {
  border-color: var(--pb-bg);
  background-color: var(--pb-bg);
}
.tq-go .btn-primary:focus-visible {
  outline-color: #F2F3F5;
}
@media (min-width: 860px) {
  .tq-head-in > .tq-issue {
    grid-row: 1 / span 5;
  }
}
.tq-stage {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: calc(-1 * clamp(110px, 12vw, 160px)) auto clamp(56px, 8vw, 104px);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.tq-bar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  padding: 16px clamp(18px, 3vw, 32px) 0;
}
.tq-bar i {
  height: 4px;
  border-radius: 4px;
  background: var(--line-strong);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.tq-bar i.is-now {
  background: var(--fg-2);
}
.tq-bar i.is-ok {
  background: var(--ok);
  box-shadow: 0 0 10px -2px var(--ok);
}
.tq-bar i.is-bad {
  background: var(--warn);
}
.tq-body {
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px);
}
.tq-body .qcard-inner .qtext {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.tq-in {
  animation: tq-in .55s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes tq-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.tq-intro {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
}
.tq-intro-t {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.tq-intro-t .eyebrow {
  color: var(--ok);
}
.tq-intro-t .h2 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tq-intro-t p {
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 52ch;
}
.tq-sys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.tq-sys li {
  display: grid;
  grid-template-columns: 3.1em minmax(0, 1fr) 8px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.tq-sys li::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.tq-sys li.is-ok::after {
  background: var(--ok);
  box-shadow: 0 0 8px -1px var(--ok);
}
.tq-sys li.is-bad::after {
  background: var(--warn);
}
.tq-sys-c {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.tq-sys-n {
  font-weight: 600;
  min-width: 0;
}
.tq-sys-n small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.tq-intro-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.tq-intro-m {
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (max-width: 520px) {
  .tq-sys {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .tq-intro-go {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .tq-intro-go > .btn {
    justify-content: space-between;
  }
  .tq-intro-m {
    text-align: center;
  }
}
.focus .tq-bar {
  padding: 0;
  gap: 3px;
}
.focus .tq-bar i {
  height: 3px;
}
@media (max-width: 380px) {
  .tq-title-m {
    display: none;
  }
}
.tq-join {
  margin-top: clamp(32px, 4vw, 48px);
}
.tq-join .subscribe {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(24px, 3.4vw, 40px);
}
.tq-join .subscribe-copy .h2 {
  max-width: none;
}
.tq-join .subscribe-try {
  display: none;
}
@media (max-width: 640px) {
  .focus .qfoot:has(> .chip:first-child) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .tq-offer .cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .tq-offer .cluster > .btn {
    justify-content: space-between;
    white-space: normal;
    text-align: left;
  }
  .tq-sys li {
    min-height: 0;
    padding: 9px 14px;
    font-size: 0.875rem;
  }
}
.tq-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}
.tq-ring {
  position: relative;
  width: clamp(128px, 18vw, 168px);
  aspect-ratio: 1;
  max-width: 100%;
}
.tq-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tq-ring circle {
  fill: none;
  stroke-width: 7;
}
.tq-ring-bg {
  stroke: var(--line-strong);
}
.tq-ring-fg {
  stroke: var(--ok);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 45%, transparent));
}
.tq-ring-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.tq-ring-n b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tq-ring-n span {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 4px;
}
.tq-score-t {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
}
.tq-score-t .h2 {
  letter-spacing: -0.03em;
}
.tq-score-t p {
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 44ch;
}
.tq-share {
  margin-top: 4px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
}
.tq-share:hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}
@media (pointer: coarse) {
  .tq-share {
    position: relative;
  }
  .tq-share::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
  }
}
.tq-offer {
  margin-top: clamp(26px, 3.4vw, 38px);
  display: grid;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ok) 9%, var(--surface)),
      var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 26%, var(--line));
}
.tq-offer .eyebrow {
  color: var(--ok);
}
.tq-offer-t {
  color: var(--fg-2);
  font-size: 1.0313rem;
  line-height: 1.65;
  max-width: 58ch;
}
.tq-offer-t b {
  color: var(--fg);
  font-weight: 600;
}
.tq-offer .cluster {
  margin-top: 6px;
  gap: 12px;
}
.tq-review-h {
  margin-top: clamp(28px, 3.6vw, 40px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tq-review {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.tq-review li {
  border-bottom: 1px solid var(--line);
}
.tq-review summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
.tq-review summary::-webkit-details-marker {
  display: none;
}
.tq-rv-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.tq-review .is-ok .tq-rv-mark {
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent);
}
.tq-review .is-ok .tq-rv-mark::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.2 4.7-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.2 4.7-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tq-review .is-bad .tq-rv-mark {
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
}
.tq-review .is-bad .tq-rv-mark::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--warn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tq-rv-t {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 0.9688rem;
  line-height: 1.45;
}
.tq-rv-t small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tq-rv-a {
  display: grid;
  gap: 6px;
  padding: 0 2px 18px 40px;
  font-size: 0.9375rem;
}
.tq-rv-yours {
  color: var(--warn);
}
.tq-rv-right {
  color: var(--ok);
  font-weight: 600;
}
.tq-review details[open] .faq-plus {
  transform: rotate(45deg);
}
.tq + .subscribe-band,
.tq .subscribe-band {
  margin-top: 0;
}
main > article + .subscribe-band {
  padding-top: clamp(8px, 2vw, 24px);
}
.tq-stage {
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px);
}
@media (max-width: 640px) {
  .tq-score {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .tq-rv-a {
    padding-left: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tq-in {
    animation: none;
  }
  .tq-ring-fg {
    transition: none;
  }
}
body.is-focus .site-header,
body.is-focus .site-footer,
body.is-focus .mobile-nav {
  display: none;
}
.focus {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.focus-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.focus-bar-in {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px));
}
.focus-x {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.focus-x::before,
.focus-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--fg-2);
  transform: translate(-50%, -50%) rotate(45deg);
}
.focus-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.focus-x::before,
.focus-x::after {
  transition: background-color .2s ease;
}
.focus-x:hover,
.focus-x:focus-visible {
  border-color: var(--invert-bg);
  background: var(--invert-bg);
}
.focus-x:hover::before,
.focus-x:hover::after,
.focus-x:focus-visible::before,
.focus-x:focus-visible::after {
  background: var(--invert-fg);
}
.focus-x:active {
  transform: scale(.94);
}
@media (pointer: coarse) {
  .focus-x {
    width: 44px;
    height: 44px;
  }
}
.focus-mid {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.focus-title {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.focus-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--fg);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.focus-n {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-2);
  min-width: 3.4em;
  text-align: right;
}
.focus-stage {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 22px;
}
.focus-stage > * {
  min-width: 0;
}
.focus #session-stage,
.focus #tq-play {
  border: 0;
  background: transparent;
  padding: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.focus #session-stage.is-out,
.focus #tq-play.is-out {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.focus .qcard-top {
  flex-wrap: nowrap;
}
.focus .qcard-top .eyebrow {
  min-width: 0;
  line-height: 1.5;
  text-wrap: balance;
}
.focus .qcard-top .chip {
  white-space: nowrap;
}
.qcard-top > .cluster {
  flex-wrap: nowrap;
  align-items: center;
  flex: none;
}
.focus .qcard-top {
  align-items: center;
}
@media (max-width: 599.98px) {
  .focus-title {
    white-space: normal;
    text-wrap: balance;
    line-height: 1.35;
  }
  .focus .qcard-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .focus .qcard-top .eyebrow:has(> .qe) {
    display: contents;
  }
  .focus .qe {
    display: contents;
  }
  .focus .qe-code {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
  }
  .focus .qcard-top > .cluster {
    grid-column: 2;
    grid-row: 1;
  }
  .focus .qe > .qe-sep,
  .focus .qe-pre > .qe-sep {
    display: none;
  }
  .focus .qe-pre {
    display: block;
    margin-bottom: 2px;
  }
  .focus .qe-name {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
    line-height: 1.35;
    color: var(--fg);
    text-wrap: balance;
  }
  .focus .qe-sub {
    font-weight: 500;
    color: var(--muted);
  }
  .focus .qe-name.is-split .qe-sub {
    display: block;
  }
  .focus .qe-name.is-split .qe-sep {
    display: none;
  }
}
@media (max-width: 599.98px) {
  .focus [data-fit="1"] {
    --fq: 1.125rem;
    --fq-lh: 1.38;
    --fo: 0.96875rem;
    --fo-lh: 1.38;
    --fo-py: 11px;
    --fo-px: 14px;
    --fo-gap: 8px;
    --fo-key: 30px;
    --fq-sp: 16px;
    --fq-top: 12px;
  }
  .focus [data-fit="2"] {
    --fq: 1.0625rem;
    --fq-lh: 1.36;
    --fo: 0.9375rem;
    --fo-lh: 1.35;
    --fo-py: 10px;
    --fo-px: 13px;
    --fo-gap: 7px;
    --fo-key: 28px;
    --fq-sp: 14px;
    --fq-top: 10px;
  }
  .focus [data-fit="3"] {
    --fq: 1rem;
    --fq-lh: 1.33;
    --fo: 0.90625rem;
    --fo-lh: 1.32;
    --fo-py: 9px;
    --fo-px: 12px;
    --fo-gap: 6px;
    --fo-key: 26px;
    --fq-sp: 12px;
    --fq-top: 10px;
  }
  .focus [data-fit="4"] {
    --fq: 0.9375rem;
    --fq-lh: 1.3;
    --fo: 0.875rem;
    --fo-lh: 1.3;
    --fo-py: 8px;
    --fo-px: 11px;
    --fo-gap: 6px;
    --fo-key: 26px;
    --fq-sp: 12px;
    --fq-top: 8px;
  }
  .focus [data-fit="5"] {
    --fq: 0.875rem;
    --fq-lh: 1.28;
    --fo: 0.875rem;
    --fo-lh: 1.26;
    --fo-py: 7px;
    --fo-px: 10px;
    --fo-gap: 5px;
    --fo-key: 24px;
    --fq-sp: 10px;
    --fq-top: 8px;
  }
  .focus [data-fit="6"] {
    --fq: 0.875rem;
    --fq-lh: 1.24;
    --fo: 0.875rem;
    --fo-lh: 1.22;
    --fo-py: 6px;
    --fo-px: 9px;
    --fo-gap: 4px;
    --fo-key: 22px;
    --fq-sp: 8px;
    --fq-top: 6px;
  }
  .focus-stage:has(> [data-fit]) {
    padding-top: 14px;
  }
  .focus-stage:has(> [data-fit="5"], > [data-fit="6"]) {
    padding-top: 10px;
  }
  .focus:has([data-fit="5"], [data-fit="6"]) .focus-bar-in {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
  }
  .focus [data-fit="5"] .qe-name,
  .focus [data-fit="6"] .qe-name {
    font-size: 0.875rem;
  }
  .focus [data-fit] .qcard-top {
    margin-bottom: var(--fq-top);
  }
  .focus [data-fit] .qtext {
    font-size: var(--fq);
    line-height: var(--fq-lh);
  }
  .focus [data-fit] .opts {
    margin-top: var(--fq-sp);
    gap: var(--fo-gap);
  }
  .focus [data-fit] .opt {
    grid-template-columns: var(--fo-key) minmax(0, 1fr);
    column-gap: 11px;
    padding: var(--fo-py) var(--fo-px);
    font-size: var(--fo);
    line-height: var(--fo-lh);
  }
  .focus [data-fit] .opt .key {
    width: var(--fo-key);
    height: var(--fo-key);
  }
}
.focus-keys {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.focus-keys kbd {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}
@media (hover: none), (pointer: coarse) {
  .focus-keys {
    display: none;
  }
}
.focus .qfoot {
  align-items: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.focus .qfoot:empty {
  display: none;
}
.sched {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 16px;
  animation: sched-in .4s cubic-bezier(.2, .7, .2, 1);
}
@keyframes sched-in {
  from {
    opacity: 0;
  }
}
.sched-l {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sched-boxes {
  display: flex;
  gap: 4px;
  flex: none;
}
.sched-boxes i {
  width: 16px;
  height: 6px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color .35s ease;
}
.sched-boxes i.on {
  background: var(--ok);
}
.sched-boxes.is-miss i.on {
  background: var(--warn);
}
.sched-t {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.sched-t b {
  font-size: 0.9375rem;
  font-weight: 600;
}
.sched-t small {
  font-size: 0.8125rem;
  color: var(--muted);
}
.sched-guess {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sched-guess::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  transition: background-color .2s ease;
}
.sched-guess:hover {
  border-color: var(--fg-2);
}
.sched-guess[aria-pressed=true] {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 50%, transparent);
}
.sched-guess[aria-pressed=true]::before {
  background: var(--caution);
}
@media (max-width: 640px) {
  .focus-bar-in {
    gap: 14px;
  }
  .focus-stage {
    padding-bottom: 24px;
  }
  .focus .qfoot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 18px -20px 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;
  }
  .focus .qfoot {
    grid-template-columns: minmax(0, 1fr);
  }
  .focus .qfoot > .btn.btn-primary {
    width: auto;
    justify-self: stretch;
    justify-content: space-between;
  }
  .sched {
    flex: none;
  }
}
.focus .debrief {
  display: block;
  animation: sched-in .5s ease;
}
.db-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}
.db-score {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 22px;
}
.db-btns {
  gap: 12px;
  margin-top: 6px;
}
.db-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.db-rows {
  display: grid;
  gap: 8px;
}
.db-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.db-row b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.db-row small {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}
.db-val {
  font-size: 1.125rem;
  font-weight: 700;
  text-align: right;
}
.db-val.is-ok {
  color: var(--ok);
}
.db-val.is-bad {
  color: var(--warn);
}
.db-move {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.db-move i {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}
.db-move em {
  font-style: normal;
  color: var(--ok);
}
.db-miss {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.db-miss-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--caution) 28%, transparent);
  background: color-mix(in srgb, var(--caution) 5%, transparent);
  transition: border-color .2s ease;
}
.db-miss-row:hover {
  border-color: color-mix(in srgb, var(--caution) 60%, transparent);
}
.db-code {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--caution);
}
.db-miss-row b {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 0;
}
.db-miss-row > span:last-child {
  font-size: 0.75rem;
  color: var(--fg-2);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .db-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus #session-stage,
  .focus-track i {
    transition: none;
  }
  .sched,
  .focus .debrief {
    animation: none;
  }
}
.qwhy {
  margin-top: 18px;
  display: grid;
  gap: 6px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--steel);
  animation: sched-in .45s ease;
}
.qwhy-k {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.qwhy p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9688rem;
  line-height: 1.6;
  max-width: 64ch;
}
.qwhy-ref {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .qwhy {
    animation: none;
  }
}
.subscribe .h2 .free {
  color: var(--ok);
}
.cr-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.cr-next .muted {
  font-size: 0.75rem;
}
.cr-turn.is-held::after {
  display: none;
}
@media (max-width: 1000px) {
  .is-pre .run-panel,
  .is-pre .run-feed {
    display: none;
  }
  .is-pre .stage.pan {
    overflow-x: hidden;
  }
  .is-pre .run-start {
    position: static;
    min-height: 0;
  }
  .is-pre .stage.pan canvas {
    display: none;
  }
  .is-pre .stage {
    background: #0B0C0E;
  }
  .is-pre .run-start {
    padding: 28px 16px;
  }
}
.is-pre #run-seat {
  display: none;
}
@media (max-width: 1000px) {
  .is-pre #start-flight {
    display: none;
  }
  .is-pre .seat-pick .seat-note {
    position: static;
    max-width: none;
  }
}
body.is-deck {
  overflow: hidden;
  overscroll-behavior: none;
}
body.is-deck .site-footer {
  display: none;
}
.deck-page {
  position: relative;
}
.deck {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  overflow: hidden;
  --stage-top: #1A1C20;
  --stage-bottom: #0E0F12;
  --stage-dot: rgba(236, 238, 242, 0.028);
  --deck-label: #8E949D;
  background:
    radial-gradient(
      120% 90% at 50% 38%,
      var(--stage-top),
      var(--stage-bottom));
  isolation: isolate;
}
.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
  pointer-events: none;
}
.deck-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
.deck-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}
.deck-node {
  position: absolute;
}
.deck-node canvas {
  display: block;
}
.deck-shell {
  position: absolute;
  display: block;
  pointer-events: none;
}
.deck-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
.deck-stage.is-panning .deck-overlay,
.deck-stage.is-handling .deck-overlay {
  cursor: grabbing;
}
.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--fg);
  font: 600 0.8125rem/1 var(--font-body);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.deck-chip:hover {
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.deck-chip svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.deck-icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.deck-icon.is-off .wave {
  opacity: 0;
}
.deck-icon.is-off {
  color: var(--muted);
}
.deck-top {
  --tb-h: 44px;
  --tb-b: calc(var(--tb-h) - 6px);
  position: absolute;
  z-index: 8;
  left: 16px;
  right: 16px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
@media (pointer: coarse) {
  .deck-top {
    --tb-h: 48px;
    --tb-b: calc(var(--tb-h) - 4px);
  }
}
.deck-top > * {
  pointer-events: auto;
}
.deck-top > .deck-chip {
  height: var(--tb-h);
  border-radius: 14px;
}
.deck-top > .deck-up {
  width: var(--tb-h);
}
.deck-crumbs {
  gap: 2px;
  padding: 0 6px;
  max-width: min(560px, 48vw);
  overflow: hidden;
  cursor: default;
}
.deck-crumbs .crumb {
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 0.8125rem/1 var(--font-body);
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  animation: crumb-in .2s ease both;
}
.deck-crumbs .crumb:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.deck-crumbs .crumb.is-here {
  color: var(--fg);
}
.deck-crumbs .crumb-sep {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-top: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin: 0 4px 0 2px;
  flex: none;
  opacity: .7;
}
.deck-crumbs .crumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 6 auto;
}
.deck-crumbs .crumb.is-here {
  flex: 0 1 auto;
}
@keyframes crumb-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
.deck-find-btn {
  min-width: 220px;
  color: var(--muted);
}
.deck-find-btn span {
  flex: 1;
  text-align: left;
  font-weight: 500;
}
.deck-find-btn kbd,
.deck-find-field kbd {
  font: 600 0.6875rem/1 var(--font-body);
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.deck-actions {
  position: relative;
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--tb-h);
  padding: 0 calc((var(--tb-h) - var(--tb-b)) / 2);
  border-radius: 14px;
}
.deck-actions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.deck-actions .deck-chip {
  height: var(--tb-b);
  padding: 0 12px;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.deck-actions .deck-icon {
  width: var(--tb-b);
  padding: 0;
}
.deck-actions .deck-chip:hover,
.deck-actions .deck-chip[aria-expanded=true] {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.deck-actions .deck-find-btn {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  margin-right: 2px;
}
.deck-actions .deck-chip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}
.deck-flight-btn .fb-i {
  width: 16px;
  height: 16px;
  color: var(--fg-2);
}
.fb-rate {
  font: 600 0.6875rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  padding: 4px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg-2);
}
.deck-flight-btn[data-rate=paused] .fb-rate {
  background: color-mix(in srgb, var(--caution) 22%, transparent);
  color: var(--fg);
}
.deck-actions .fb-chev {
  width: 14px;
  height: 14px;
  margin: 0 -4px 0 -2px;
  color: var(--muted);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.deck-actions [aria-expanded=true] .fb-chev {
  transform: rotate(180deg);
}
.deck-tours-btn .tb-i {
  width: 18px;
  height: 18px;
  color: var(--fg-2);
}
.deck-more-wrap {
  position: relative;
}
.deck-menu {
  position: absolute;
  right: 0;
  top: calc(var(--tb-h, 40px) + 8px);
  width: 260px;
  max-height: calc(100svh - var(--header-h, 64px) - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  align-content: start;
  animation: menu-in .2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.deck-menu .eyebrow {
  margin: 0;
}
.deck-menu-item {
  display: block;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 6px;
  border-radius: 8px;
  font: 500 0.875rem/1.3 var(--font-body);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.deck-menu-item:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
@media (pointer: coarse) {
  .deck-more .deck-menu-item {
    min-height: 44px;
  }
}
.deck-more {
  width: 300px;
}
.deck-tog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deck-tog::after {
  content: "";
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 9px 50%,
      var(--bg) 6px,
      transparent 6.5px) var(--line-strong);
}
.deck-tog[aria-pressed=true]::after {
  background:
    radial-gradient(
      circle at 21px 50%,
      var(--bg) 6px,
      transparent 6.5px) #FFA51F;
}
.deck-flight {
  width: 340px;
  gap: 14px;
}
.deck-flight > div {
  display: grid;
  gap: 8px;
}
.deck-flight > div + div {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .deck-menu {
    animation: none;
  }
  .deck-actions .fb-chev {
    transition: none;
  }
}
.deck-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--tb-b);
}
.deck-zoom::before,
.deck-zoom::after {
  content: "";
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--line-strong);
}
.deck-actions .deck-zoom .deck-icon svg {
  width: 18px;
  height: 18px;
}
.deck-actions .deck-zoom [aria-disabled=true] {
  color: var(--muted);
  opacity: .5;
  cursor: default;
}
.deck-actions .deck-zoom [aria-disabled=true]:hover {
  background: none;
}
.deck-fit {
  font-weight: 600;
}
.deck-fit .fit-i {
  width: 16px;
  height: 16px;
  color: var(--fg-2);
}
.deck-crumbs[hidden] {
  display: none;
}
.deck-welcome {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 16px;
  width: min(360px, calc(100% - 32px));
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  animation: deck-in .5s .3s cubic-bezier(.2, .8, .2, 1) both;
}
.deck-welcome .eyebrow {
  margin: 0;
}
.deck-welcome p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.deck-welcome .deck-welcome-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.deck-welcome-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}
.deck-welcome-row .linklike {
  font-size: 0.8125rem;
  color: var(--muted);
}
@keyframes deck-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.deck-insp {
  position: absolute;
  z-index: 6;
  top: 64px;
  right: 16px;
  bottom: 16px;
  width: 360px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: insp-in .26s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes insp-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
.deck-insp-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.deck-insp-x:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
}
.ins-body {
  padding: 20px 20px 24px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.ins-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.ins-body .eyebrow {
  color: var(--muted);
}
.ins-title {
  font: 700 1.375rem/1.15 var(--font-body);
  letter-spacing: -0.01em;
  margin: 0;
  padding-right: 30px;
}
.ins-body .ins-kind {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: -6px;
}
.ins-seg {
  justify-self: start;
  flex-wrap: wrap;
}
.ins-sec {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ins-now {
  border-top-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.ins-refs {
  font-size: 0.75rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}
.ins-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.ins-lights .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ins-lights .dot.is-out {
  background: var(--ok);
}
.ins-lights .dot.is-on {
  background: var(--caution);
}
.ins-gap {
  margin-top: 6px !important;
}
.ins-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.ins-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: 500 0.875rem/1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.ins-list li:first-child button {
  border-top: 0;
}
.ins-list button:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.ins-lit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lit {
  font: 700 0.6875rem/1 var(--font-screen);
  letter-spacing: .06em;
  padding: 5px 7px;
  border-radius: 5px;
  background: #0B0C0E;
}
.lit-amber {
  color: #FFA51F;
}
.lit-red {
  color: #FF3B3B;
}
.lit-white {
  color: #F2F3F5;
}
.lit-green {
  color: #3FD27A;
}
.lit-blue {
  color: #3DB2FF;
}
.deck-hud {
  position: absolute;
  z-index: 7;
  width: 300px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(242, 243, 245, .16);
  background: rgba(14, 16, 19, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #F2F3F5;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
  display: grid;
  gap: 10px;
}
.deck-hud.is-docked {
  left: 12px !important;
  right: 12px;
  bottom: 12px;
  top: auto !important;
  width: auto;
}
.hud-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hud-head b {
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 243, 245, .7);
}
.hud-val {
  font: 700 1.5rem/1 var(--font-screen);
  color: #F2F3F5;
  margin-left: auto;
}
.hud-val.is-word {
  font: 600 0.9375rem/1.2 var(--font-body);
}
.hud-x {
  border: 0;
  background: none;
  color: rgba(242, 243, 245, .6);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 4px;
  min-width: 32px;
  min-height: 32px;
  margin: -8px -6px -8px 0;
}
.hud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hud-btn {
  flex: 1 1 auto;
  min-width: 48px;
  min-height: 40px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(242, 243, 245, .18);
  background: rgba(255, 255, 255, .04);
  color: #F2F3F5;
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
}
.hud-btn small {
  font-size: 0.625rem;
  color: rgba(242, 243, 245, .55);
  font-weight: 500;
}
.hud-btn:hover {
  border-color: rgba(242, 243, 245, .5);
  background: rgba(255, 255, 255, .08);
}
.hud-btn.is-on {
  background: #F2F3F5;
  color: #121315;
  border-color: #F2F3F5;
}
.hud-how {
  margin: 0;
  font: 500 0.75rem/1.4 var(--font-body);
  color: rgba(242, 243, 245, .6);
}
.ins-body .ins-how {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: -4px;
}
.deck-tip .tip-val {
  font: 700 1rem/1.1 var(--font-screen);
  color: #F2F3F5;
  letter-spacing: .02em;
}
.ins-grab {
  display: none;
}
.deck-welcome-short {
  display: none;
}
.deck-welcome .w-touch {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .deck-welcome .w-touch {
    display: inline;
  }
  .deck-welcome .w-mouse {
    display: none;
  }
}
@media (pointer: coarse) {
  .deck-welcome-row .linklike {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    margin: 0 -12px;
  }
  .hud-x {
    min-width: 44px;
    min-height: 44px;
    margin: -12px -10px -12px 0;
  }
  .deck-insp-x {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
  .parts-arrow {
    width: 44px !important;
    height: 44px !important;
  }
  .parts-dot {
    min-width: 32px !important;
    height: 44px !important;
  }
}
.deck-insp .ins-body > .tour-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -20px -24px;
  padding: 12px 20px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.deck-insp.is-peek .ins-body > .tour-row {
  position: static;
}
.deck-drill .dd-body > .dd-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -20px;
  padding: 10px 20px;
  background: var(--bg);
}
.deck-tours .tour-list {
  display: grid;
  gap: 10px;
}
.fl-do li.is-did b {
  color: var(--ok);
}
.deck-tip {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  display: grid;
  gap: 3px;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(14, 16, 19, .94);
  color: #F2F3F5;
  border: 1px solid rgba(242, 243, 245, .14);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
}
.deck-tip b {
  font: 600 0.8125rem/1.2 var(--font-body);
}
.deck-tip span {
  font: 500 0.75rem/1.3 var(--font-body);
  color: rgba(242, 243, 245, .65);
}
.deck-toast {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 76px;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(14, 16, 19, .94);
  color: #F2F3F5;
  font: 500 0.875rem/1.4 var(--font-body);
  transition: opacity .2s ease, transform .2s ease;
  text-align: center;
}
.deck-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.deck-find {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--scrim) 50%, transparent);
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 14vh 16px 16px;
}
.deck-find[hidden] {
  display: none;
}
.deck-find-box {
  width: min(640px, 100%);
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: deck-in .18s ease both;
}
.deck-find-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--line);
}
.deck-find-field svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex: none;
}
.deck-find-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fg);
  font: 500 1rem/1 var(--font-body);
  min-width: 0;
}
.deck-find-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
}
.deck-find-list li[role=option] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.deck-find-list li[role=option] b {
  font: 600 0.9375rem/1.2 var(--font-body);
}
.deck-find-list li[role=option] span {
  grid-column: 1;
  font: 500 0.75rem/1.3 var(--font-body);
  color: var(--muted);
}
.deck-find-list li[role=option] em {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font: 600 0.6875rem/1 var(--font-body);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.deck-find-list li[aria-selected=true] {
  background: var(--surface-2);
}
.find-none {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 0.875rem;
}
.find-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.find-try > span {
  margin-right: 2px;
  font-weight: 500;
}
.find-chip {
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg);
  font: 600 0.8125rem/1 var(--font-body);
  letter-spacing: .02em;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}
.find-chip:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.find-chip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .find-chip {
    height: 40px;
    padding: 0 14px;
  }
}
.deck-actions button {
  touch-action: manipulation;
}
@media (max-width: 999px) {
  .deck-insp {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 62%;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation-name: sheet-in;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #deck-insp {
    max-height: 180px;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    will-change: transform;
  }
  #deck-insp.is-peek {
    overflow: hidden;
    touch-action: none;
  }
  .ins-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 52px;
    padding: 4px 8px 0;
    touch-action: none;
    cursor: grab;
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 96%, transparent) 78%,
        transparent);
  }
  .deck.is-sheet-drag .ins-head {
    cursor: grabbing;
  }
  .ins-grab {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: inherit;
    touch-action: none;
  }
  .ins-grab::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--line-strong);
    transition: background .2s ease;
  }
  .ins-head:hover .ins-grab::before,
  .deck.is-sheet-drag .ins-grab::before {
    background: color-mix(in srgb, var(--fg) 34%, transparent);
  }
  .ins-more {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--fg-2);
    font: 600 0.8125rem/1 var(--font-body);
    cursor: pointer;
  }
  .ins-more svg {
    width: 16px;
    height: 16px;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
  }
  .ins-more.is-less svg {
    transform: rotate(180deg);
  }
  #deck-insp.is-short .ins-more {
    visibility: hidden;
  }
  .ins-more:hover {
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    color: var(--fg);
  }
  .ins-head .deck-insp-x {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    color: var(--fg-2);
    font-size: 1.375rem;
  }
  .ins-more:focus-visible,
  .ins-head .deck-insp-x:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -2px;
  }
  #deck-insp .ins-body {
    padding-top: 0;
  }
  #deck-insp .ins-title {
    padding-right: 0;
  }
  .deck-insp.is-peek .ins-body > .eyebrow:first-child {
    display: none;
  }
  .deck-insp.is-peek::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--bg) 96%, transparent));
  }
  .deck.has-insp .deck-mini {
    opacity: 0;
    pointer-events: none;
  }
  .deck .deck-parts,
  .deck .deck-dock {
    transition: opacity .18s ease;
  }
  .deck.is-sheet-moving .deck-parts,
  .deck.is-sheet-moving .deck-dock {
    opacity: 0;
    pointer-events: none;
  }
  @keyframes sheet-in {
    from {
      transform: translateY(30%);
      opacity: 0;
    }
  }
}
@media (min-width: 1000px) {
  .ins-head {
    display: contents;
  }
  .ins-more {
    display: none;
  }
}
@media (max-width: 1100px) {
  .deck-actions .deck-find-btn {
    min-width: 0;
    width: var(--tb-b);
    padding: 0;
    justify-content: center;
    background: none;
    margin-right: 0;
  }
  .deck-find-btn span,
  .deck-find-btn kbd {
    display: none;
  }
}
@media (max-width: 900px) {
  .deck-actions .deck-fit {
    width: var(--tb-b);
    padding: 0;
    justify-content: center;
  }
  .deck-fit .fit-t {
    display: none;
  }
  .deck-fit .fit-i {
    width: 20px;
    height: 20px;
    color: currentColor;
  }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .ins-more svg,
  .ins-grab::before,
  .deck .deck-parts,
  .deck .deck-dock {
    transition: none;
  }
}
@media (max-width: 720px) {
  .deck-top {
    left: 12px;
    right: 12px;
    top: 10px;
    gap: 6px;
  }
  .deck-actions .deck-flight-btn,
  .deck-actions .deck-tours-btn {
    min-width: var(--tb-b);
    padding: 0 8px;
    justify-content: center;
    gap: 4px;
  }
  .deck-actions .fb-phase,
  .deck-actions .tb-t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .deck-actions .fb-chev {
    display: none;
  }
  .deck-flight-btn[data-rate="1"] .fb-rate {
    display: none;
  }
  .deck-flight-btn .fb-i {
    width: 18px;
    height: 18px;
  }
  .deck-actions,
  .deck-actions .deck-more-wrap {
    position: static;
  }
  .deck-actions::before {
    display: none;
  }
  .deck-actions {
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
    padding: 0 2px;
  }
  .deck-actions .deck-menu {
    left: 0;
    right: 0;
    width: auto;
    max-height: min(70vh, calc(100svh - var(--header-h, 64px) - 120px));
  }
  .deck-crumbs {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
  .deck-top > .deck-up:not([hidden]) {
    width: 42px;
    border-radius: 14px 0 0 14px;
    margin-right: -6px;
  }
  .deck-top > .deck-up:not([hidden]) + .deck-crumbs {
    border-radius: 0 14px 14px 0;
    border-left-color: var(--line);
    padding: 0 2px;
  }
  .deck-crumbs .crumb.is-here {
    padding: 8px 4px;
  }
  .deck-actions {
    gap: 0;
  }
  @media (max-width: 360px) {
    .deck-top {
      --tb-h: 44px;
      gap: 4px;
    }
    .deck-crumbs {
      padding: 0 2px;
    }
    .deck-top > .deck-up:not([hidden]) {
      margin-right: -4px;
    }
  }
  .deck-crumbs .crumb:not(.is-here) {
    display: none;
  }
  .deck-crumbs .crumb-sep {
    display: none;
  }
  .deck-zoom #deck-zoom-in,
  .deck-zoom #deck-zoom-out {
    display: none;
  }
  .deck-zoom::before,
  .deck-zoom::after {
    display: none;
  }
  .deck-actions .deck-fit {
    width: var(--tb-b);
    padding: 0;
    justify-content: center;
  }
  .deck-fit .fit-t {
    display: none;
  }
  .deck-fit .fit-i {
    width: 20px;
    height: 20px;
    color: currentColor;
  }
  .deck-welcome {
    left: 12px;
    right: 12px;
    width: auto;
    top: 60px;
    bottom: auto;
    padding: 12px 14px;
    gap: 4px;
    border-radius: 14px;
  }
  .deck-welcome .eyebrow,
  .deck-welcome p:not(.deck-welcome-title) {
    display: none;
  }
  .deck-welcome .deck-welcome-title {
    font-size: 0.9375rem;
  }
  .deck-welcome .deck-welcome-short {
    display: inline;
    font-weight: 500;
    color: var(--fg-2);
    font-size: 0.8125rem;
  }
  .deck-welcome-row {
    margin-top: 2px;
  }
}
.deck-parts {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: calc(var(--sheet, 0px) + 12px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  animation: deck-in .2s ease both;
}
.deck-parts[hidden] {
  display: none;
}
.deck-parts button {
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font: 600 0.8125rem/1 var(--font-body);
}
.parts-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem !important;
}
.parts-arrow:disabled {
  opacity: .3;
  cursor: default;
}
.parts-dot {
  min-width: 12px;
  height: 36px;
  padding: 0 4px;
  position: relative;
}
.parts-dot:not(.is-here)::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  margin: 0 auto;
}
.parts-dot.is-here {
  padding: 0 10px;
  border-radius: 999px;
  background: var(--invert-bg) !important;
  color: var(--invert-fg) !important;
  white-space: nowrap;
}
@media (min-width: 721px) {
  .deck-up {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck-crumbs .crumb,
  .deck-insp,
  .deck-welcome,
  .deck-find-box {
    animation: none;
  }
}
.deck-pointers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.deck-pointer {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(242, 243, 245, .18);
  background: rgba(14, 16, 19, .9);
  color: #F2F3F5;
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
  animation: deck-in .22s ease both;
}
.deck-pointer i {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  position: relative;
}
.deck-pointer i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border: 4px solid transparent;
  border-left-color: inherit;
  border-left: 5px solid currentColor;
  color: inherit;
}
.deck-dock {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 68px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(242, 243, 245, .14);
  background: rgba(14, 16, 19, .9);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
  animation: deck-in .22s ease both;
}
.deck.has-insp .deck-dock {
  right: 392px;
}
.deck-dock.is-top,
.deck.has-insp .deck-dock.is-top {
  top: 64px;
  bottom: auto;
}
.deck-dock.is-mini .dock-du canvas {
  width: 72px;
  height: 72px;
}
.dock-du {
  display: grid;
  gap: 4px;
  justify-items: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: rgba(242, 243, 245, .7);
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .1em;
}
.dock-du canvas {
  width: 168px;
  height: 168px;
  border-radius: 6px;
}
@media (max-width: 999px) {
  .deck.has-insp .deck-dock {
    right: 16px;
    bottom: calc(var(--sheet, 0px) + 64px);
  }
  .dock-du canvas {
    width: 128px;
    height: 128px;
  }
}
.ins-act {
  justify-self: start;
}
.ins-defs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ins-defs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.ins-defs li .lit {
  align-self: start;
  margin-top: 1px;
}
.ins-defs .def-k {
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: .06em;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  align-self: start;
  margin-top: 1px;
  white-space: nowrap;
}
.ins-defs li.is-now .def-k {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.ins-defs li.is-now {
  color: var(--fg);
}
.ins-what p {
  color: var(--fg);
  font-size: 0.9375rem;
}
.ins-caution {
  border-top-color: color-mix(in srgb, var(--caution) 50%, transparent);
}
.ins-link {
  justify-self: start;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.deck-tours {
  width: 340px;
  max-height: min(72vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tour-group {
  margin: 12px 0 2px;
}
.tour-title {
  margin: 2px 0 10px;
  font: 600 0.9375rem/1.35 var(--font-body);
  color: var(--fg);
}
.tour-item {
  display: grid;
  gap: 3px;
  padding: 10px 8px;
}
.tour-item b {
  font-weight: 600;
  font-size: 0.875rem;
}
.tour-item span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-item small {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.tour-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-right: 30px;
}
.tour-count {
  font: 600 0.75rem/1 var(--font-body);
  color: var(--muted);
  white-space: nowrap;
}
.tour-bar {
  margin: -2px 0 2px;
}
.tour-bar i.ok {
  background: var(--ok);
}
.ins-body .tour-do {
  color: var(--fg);
  font-size: 0.9375rem;
}
.tour-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tour-row .linklike {
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (max-width: 720px) {
  .deck-tours-btn {
    padding: 0 12px;
  }
}
.deck-viewer {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: rgba(6, 7, 9, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 16px;
}
.deck-viewer[hidden] {
  display: none;
}
.viewer-box {
  display: flex;
  gap: 16px;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
  animation: deck-in .22s ease both;
}
.viewer-stage {
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #000;
  padding: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.viewer-cv {
  display: block;
  cursor: crosshair;
  border-radius: 4px;
}
.viewer-side {
  width: 360px;
  max-height: min(90vh, 940px);
  overflow-y: auto;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 20px;
  display: grid;
  gap: 12px;
  align-content: start;
  position: relative;
}
.viewer-side p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.viewer-head {
  display: grid;
  gap: 4px;
}
.viewer-rail {
  display: grid;
  gap: 12px;
}
.viewer-zone {
  margin: 0;
  font: 700 1rem/1.25 var(--font-body);
}
@media (max-width: 999px) {
  .viewer-box {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
  }
  .viewer-side {
    width: min(560px, 100%);
    max-height: none;
  }
}
.deck {
  transition: background .7s ease;
}
.deck[data-light=dusk] {
  --stage-top: #16181C;
  --stage-bottom: #0C0D10;
  --stage-dot: rgba(255,255,255,.035);
}
.deck[data-light=night] {
  --stage-top: #08090B;
  --stage-bottom: #040506;
  --stage-dot: rgba(255,255,255,.025);
}
.deck[data-light=dusk],
.deck[data-light=night],
body.is-deck:has(.deck[data-light=dusk]) .site-header,
body.is-deck:has(.deck[data-light=night]) .site-header {
  --bg: #121315;
  --bg-2: #18191C;
  --surface: #1E2024;
  --surface-2: #26292E;
  --line: rgba(236, 238, 242, 0.09);
  --line-strong: rgba(236, 238, 242, 0.18);
  --fg: #ECEEF1;
  --fg-2: #C3C7CE;
  --muted: #8B9099;
  --steel: #A9BDCD;
  --invert-bg: #ECEEF1;
  --invert-fg: #121315;
  --mark-ink: #A6A6A8;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
body.is-deck:has(.deck[data-light=dusk]) .site-header,
body.is-deck:has(.deck[data-light=night]) .site-header {
  color: var(--fg);
}
body.is-deck:has(.deck[data-light=night]) .site-header {
  --bg: #08090B;
  border-bottom-color: rgba(236, 238, 242, 0.06);
}
body.is-deck:has(.deck[data-light=dusk]),
body.is-deck:has(.deck[data-light=night]) {
  background: #0C0D10;
}
.deck[data-light=dusk],
.deck[data-light=night] {
  --deck-label: #9AA1AB;
}
.deck-light {
  display: grid;
  gap: 10px;
}
.deck-light .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.deck-light-note {
  margin: 0;
  font: 400 0.8125rem/1.45 var(--font-body);
  color: var(--muted);
}
.deck-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 500 0.875rem/1.3 var(--font-body);
  color: var(--fg);
}
.deck-switch small {
  display: block;
  font: 500 0.6875rem/1.3 var(--font-body);
  letter-spacing: .06em;
  color: var(--muted);
}
.deck-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.deck-switch-track {
  flex: none;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .2s ease;
}
.deck-switch-track::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}
.deck-switch input:checked + .deck-switch-track {
  background: #FFA51F;
}
.deck-switch input:checked + .deck-switch-track::after {
  transform: translateX(16px);
}
.deck-switch input:focus-visible + .deck-switch-track {
  outline: 2px solid var(--accent, #FFA51F);
  outline-offset: 2px;
}
.deck-toast.has-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.deck-toast-act {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .28);
  background: none;
  color: inherit;
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
}
.deck-toast-act:hover {
  background: rgba(255, 255, 255, .1);
}
.deck-mini {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 16px;
  width: 176px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.deck-mini.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.deck-mini canvas {
  display: block;
  width: 100%;
  cursor: pointer;
  touch-action: none;
}
.deck[data-light=night] .deck-mini,
.deck[data-light=dusk] .deck-mini {
  background: rgba(14, 16, 19, .82);
  border-color: rgba(255, 255, 255, .12);
}
@media (max-width: 760px) {
  .deck-mini {
    display: none;
  }
}
.deck-mirror {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.deck-mirror section {
  display: contents;
}
.deck-mirror button {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: none;
  pointer-events: none;
}
.deck-mirror button.is-at {
  clip-path: none;
  overflow: visible;
  color: transparent;
  border-radius: 8px;
}
.deck-mirror button.is-at:focus-visible {
  outline: 2px solid #FFA51F;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 165, 31, .18);
}
.deck-poster {
  position: absolute;
  left: 0;
  top: 56px;
  width: 100%;
  height: calc(100% - 64px);
  object-fit: contain;
  transform: scale(0.9615);
  pointer-events: none;
  user-select: none;
  transition: opacity .35s ease;
}
.deck.is-live .deck-poster {
  opacity: 0;
}
.deck.is-live-now .deck-poster {
  display: none;
}
.deck-bar {
  display: none;
}
.deck-wdock {
  flex: 0 1 auto;
  min-width: 0;
  gap: 14px;
  padding: 0 14px;
  cursor: default;
}
.deck-wdock[hidden] {
  display: none;
}
.deck-wdock p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 0.8125rem/1 var(--font-body);
  color: var(--fg-2);
}
.deck-wdock b {
  font-weight: 600;
  color: var(--fg);
}
.deck-wdock .linklike {
  flex: none;
  min-height: 32px;
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--fg);
}
.deck-wdock #deck-wdock-ok {
  color: var(--muted);
}
.deck.has-wdock .deck-actions .deck-find-btn {
  min-width: 0;
  width: var(--tb-b);
  padding: 0;
  justify-content: center;
  background: none;
}
.deck.has-wdock .deck-find-btn span,
.deck.has-wdock .deck-find-btn kbd {
  display: none;
}
.deck.has-wdock .deck-crumbs {
  flex: none;
  max-width: none;
}
@media (max-width: 1100px) {
  .deck-wdock p span {
    display: none;
  }
}
@media (max-width: 720px) {
  .deck-bar {
    display: block;
    position: absolute;
    z-index: 4;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    border-radius: 20px;
    border: 1px solid rgba(236, 238, 242, .14);
    background: rgba(16, 18, 21, .72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
    pointer-events: none;
  }
  .deck.has-insp .deck-bar,
  .deck.has-drill .deck-bar {
    display: none;
  }
  .deck-parts {
    left: 26px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 52px);
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #F2F3F5;
    overflow: hidden;
  }
  .deck-parts button {
    color: #F2F3F5;
  }
  .deck-parts .parts-arrow {
    width: 40px;
    height: 44px;
    flex: none;
  }
  .deck-parts .parts-dot {
    flex: none;
  }
  .deck-parts .parts-dot.is-here {
    height: 36px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #F2F3F5 !important;
    color: #121315 !important;
  }
  .deck-parts .parts-dot:not(.is-here)::before {
    background: rgba(236, 238, 242, .32);
  }
  .deck-parts.is-areas {
    left: 22px;
    width: calc(100% - 44px);
    max-width: none;
    gap: 2px;
    padding: 0 44px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0,
        #000 12px,
        #000 calc(100% - 56px),
        transparent 100%);
    mask-image:
      linear-gradient(
        90deg,
        transparent 0,
        #000 12px,
        #000 calc(100% - 56px),
        transparent 100%);
    animation: none;
  }
  .deck-parts.is-areas::-webkit-scrollbar {
    display: none;
  }
  .deck-parts .area-chip {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: center;
    color: rgba(242, 243, 245, .76);
    transition: background-color .2s ease, color .2s ease;
  }
  .deck-parts .area-chip.is-here {
    background: #F2F3F5;
    color: #121315;
  }
  .deck-parts .area-chip:focus-visible {
    outline: 2px solid #F2F3F5;
    outline-offset: -2px;
  }
  .deck.has-insp .deck-parts.is-areas,
  .deck.has-drill .deck-parts.is-areas {
    display: none;
  }
  .deck.has-insp .deck-parts,
  .deck.has-drill .deck-parts {
    left: 12px;
    bottom: calc(var(--sheet, 0px) + 12px);
    height: auto;
    padding: 4px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    color: var(--fg);
  }
  .deck.has-insp .deck-parts button,
  .deck.has-drill .deck-parts button {
    color: var(--fg);
  }
  .deck:not(.has-insp):not(.has-drill) .deck-toast {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: calc(100% - 32px);
  }
  .deck-crumbs .crumb.is-here {
    text-overflow: ellipsis;
  }
}
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  body.is-deck .site-header {
    display: none;
  }
  body.is-deck .deck {
    height: 100vh;
    height: 100svh;
  }
  .deck-top {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }
  .deck-top {
    --tb-h: 42px;
  }
  .deck-chip {
    height: 36px;
  }
  .deck-icon {
    width: 36px;
  }
  .deck-bar {
    display: none;
  }
  .deck-welcome,
  .deck-wdock,
  .deck-mini {
    display: none !important;
  }
  .deck-toast {
    bottom: 60px;
    width: max-content;
  }
  .deck-parts {
    bottom: 56px;
  }
  .deck-menu,
  .deck-actions .deck-menu,
  .deck-tours {
    max-height: calc(100svh - var(--tb-h, 42px) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}
.pg-deck-miss {
  margin-top: 18px;
}
.pg-deck-h {
  margin: 0 0 8px;
}
.pg-deck-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 720px) {
  .pg-deck-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pg-deck-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  min-height: 44px;
}
.pg-deck-list a:hover {
  border-color: var(--line-strong);
}
.pg-deck-list b {
  font: 600 0.9375rem/1.3 var(--font-body);
}
.pg-deck-list span:nth-child(2) {
  grid-column: 1;
  color: var(--muted);
}
.pg-deck-list span:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  white-space: nowrap;
}
.dd-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dd-tabs button {
  min-height: 32px;
  transition: background-color .15s ease, color .15s ease;
}
.dd-tabs [aria-selected=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.dd-tabs button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  .dd-tabs button {
    min-height: 40px;
  }
}
.deck-tours.dd-show > :not(.dd-tabs):not(.dd-list) {
  display: none;
}
.deck-tours:not(.dd-show) > .dd-list {
  display: none;
}
.dd-list {
  display: grid;
  gap: 6px;
}
.dd-item {
  display: grid;
  gap: 3px;
  padding: 10px 8px;
}
.dd-item b {
  font-weight: 600;
  font-size: 0.875rem;
}
.dd-item span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.dd-item small {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.dd-menu-note {
  margin: 4px 6px 0;
  font: 500 0.75rem/1.4 var(--font-body);
  color: var(--muted);
}
.dd-menu-note a {
  color: inherit;
}
.deck.has-drill .deck-dock {
  right: 392px;
}
@media (max-width: 999px) {
  .deck.has-drill .deck-dock {
    right: 16px;
    bottom: calc(var(--dsheet, 0px) + 64px);
  }
  .deck.has-drill .deck-toast {
    bottom: calc(var(--dsheet, 0px) + 14px);
  }
}
.dd-body {
  gap: 10px;
}
.ins-body .dd-lead {
  color: var(--fg);
  font-size: 0.9375rem;
}
.ins-body .dd-small {
  font-size: 0.8125rem;
}
.ins-body .dd-best {
  font: 600 0.8125rem/1.4 var(--font-body);
  color: var(--muted);
}
.ins-body .dd-q {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: -4px;
}
.dd-name {
  font-size: 1.625rem;
}
.ins-body .dd-where {
  color: var(--fg-2);
  margin-top: -4px;
}
.ins-body .dd-msg {
  font-weight: 600;
  color: var(--fg);
  padding-left: 10px;
  border-left: 3px solid var(--line-strong);
}
.ins-body .dd-msg.is-ok {
  border-left-color: var(--ok);
}
.ins-body .dd-msg.is-try {
  border-left-color: var(--caution);
}
.ins-body .dd-msg.is-bad {
  border-left-color: var(--warn);
}
.dd-ask {
  font-size: 1.1875rem;
}
.dd-row {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.dd-row .linklike {
  font-size: 0.8125rem;
  color: var(--muted);
  min-height: 24px;
}
.dd-opt {
  display: grid;
  gap: 6px;
}
.dd-seg {
  flex-wrap: wrap;
  justify-self: start;
}
.dd-seg button {
  min-height: 28px;
}
.dd-opts {
  display: grid;
  gap: 8px;
}
.dd-opt-b.opt {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg);
  min-height: 44px;
}
.dd-opt-b .key {
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
}
.ins-body .dd-litq {
  color: var(--fg);
  line-height: 1.9;
}
.dd-litq .lit {
  display: inline-block;
  line-height: 1;
  vertical-align: 1px;
}
.dd-clock {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 8px;
}
.dd-clock b {
  font-size: 2.25rem;
  line-height: 1;
}
.dd-clock span {
  color: var(--muted);
  font-size: 0.875rem;
}
.dd-clock .dd-clock-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.dd-clock .dd-clock-bar i {
  display: block;
  height: 100%;
  background: var(--caution);
  transition: width .1s linear;
}
.ins-body .dd-tapped {
  color: var(--fg);
}
.dd-tapped b {
  font-size: 1.25rem;
}
.ins-body .dd-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--fg);
  font-weight: 600;
}
.dd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.dd-dot.is-hit {
  background: #3FD27A;
}
.dd-dot.is-miss {
  background: #FFA51F;
}
.dd-dot.is-false {
  background: #FF5A5F;
}
.dd-rvs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.dd-rv {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.dd-rv-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--fg);
  font: 500 0.875rem/1.35 var(--font-body);
  text-align: left;
  cursor: pointer;
  min-height: 24px;
}
.dd-rv-h b {
  font-weight: 700;
}
.dd-rv-tag {
  margin-left: auto;
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dd-rv.is-hit .dd-rv-tag {
  color: var(--ok);
}
.dd-rv.is-miss .dd-rv-tag {
  color: var(--caution);
}
.dd-rv.is-false .dd-rv-tag {
  color: var(--warn);
}
.ins-body .dd-normal {
  color: var(--fg-2);
}
.ins-body .dd-normal b {
  color: var(--fg);
}
.dd-principle p:not(.eyebrow):not(.ins-refs) {
  font-size: 0.8125rem;
}
@media (max-width: 999px) {
  .dd-name {
    font-size: 1.375rem;
  }
  .deck-drill .ins-body {
    padding: 12px 16px 18px;
  }
}
.deck-flight > .deck-state-wrap[hidden] {
  display: none;
}
.deck-state-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  font-weight: 600;
}
.deck-state-btn #deck-state-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-state-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.deck-state-btn[aria-expanded=true] svg {
  transform: rotate(180deg);
}
.deck-state-k {
  font: 600 0.625rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.deck-state {
  display: grid;
  gap: 2px;
}
.deck-state[hidden] {
  display: none;
}
.deck-state > .eyebrow {
  display: none;
}
.st-item {
  display: grid;
  gap: 3px;
  padding: 10px 8px;
  min-height: 44px;
}
.st-item b {
  font-weight: 600;
  font-size: 0.875rem;
}
.st-item span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.st-item[aria-current=true] {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--ok);
}
.st-note {
  margin: 0 6px;
  font: 500 0.75rem/1.4 var(--font-body);
  color: var(--caution);
}
.deck-tours.fw-show > :not(.dd-tabs):not(.fw-list) {
  display: none;
}
.deck-tours:not(.fw-show) > .fw-list {
  display: none;
}
.deck-tours.fw-show > .fw-list {
  display: grid;
  gap: 6px;
}
.fw-item {
  display: grid;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 8px;
}
.fw-item + .fw-item {
  border-top: 1px solid var(--line);
}
.fw-item b {
  font-weight: 600;
  font-size: 0.875rem;
}
.fw-item span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.fw-item small {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.fw-item-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.fw-go {
  height: 32px;
  font-size: 0.75rem;
  padding: 0 12px;
}
.fw-step {
  display: grid;
  gap: 6px;
}
.ins-body .fw-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font: 600 1rem/1.3 var(--font-screen, ui-monospace, monospace);
  color: var(--fg);
}
.fw-line b {
  font-weight: 700;
}
.fw-dots {
  flex: 1 1 24px;
  border-bottom: 2px dotted color-mix(in srgb, var(--fg) 35%, transparent);
  transform: translateY(-4px);
  min-width: 16px;
}
.fw-act {
  color: #2FB8E8;
  font-weight: 700;
  white-space: nowrap;
}
.fw-step.is-memory .dd-lead {
  color: var(--fg-2);
}
.ins-body .fw-wait {
  font: 600 0.875rem/1.4 var(--font-body);
  color: var(--fg-2);
}
.fw-why p:not(.eyebrow):not(.ins-refs) {
  font-size: 0.8125rem;
}
.fw-quote summary {
  cursor: pointer;
  font: 600 0.75rem/1.4 var(--font-body);
  color: var(--muted);
  min-height: 24px;
  display: flex;
  align-items: center;
}
.fw-quote blockquote {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.fw-missed button {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--fg);
  font: 500 0.875rem/1.35 var(--font-body);
  text-align: left;
  cursor: pointer;
  min-height: 24px;
}
.cw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 28px 14px 0;
}
.cw-chip {
  display: grid;
  gap: 3px;
  min-height: 56px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.cw-chip b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 0.875rem/1.2 var(--font-body);
  letter-spacing: .04em;
  color: var(--fg);
}
.cw-chip span {
  font: 500 0.8125rem/1.2 var(--font-body);
  color: var(--fg-2);
  letter-spacing: .02em;
}
.cw-chip.is-you {
  border: 2px solid var(--fg);
  padding: 8px 11px;
}
.cw-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  margin-left: auto;
  color: var(--ok);
}
.cw-wave i {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: .8;
}
.cw-wave i:nth-child(2),
.cw-wave i:nth-child(4) {
  height: 10px;
}
.cw-wave i:nth-child(3) {
  height: 14px;
}
.cw-wave.is-talking i {
  animation: cw-talk .9s ease-in-out infinite;
}
.cw-wave.is-talking i:nth-child(2) {
  animation-delay: -.2s;
}
.cw-wave.is-talking i:nth-child(3) {
  animation-delay: -.45s;
}
.cw-wave.is-talking i:nth-child(4) {
  animation-delay: -.65s;
}
@keyframes cw-talk {
  0%, 100% {
    transform: scaleY(.45);
  }
  50% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cw-wave.is-talking i {
    animation: none;
  }
}
.ins-body .fw-line .cw-tag {
  flex: none;
  align-self: center;
  padding: 3px 7px;
  border-radius: 6px;
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: .06em;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.ins-body .fw-line .cw-tag.is-you {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.ins-body .cw-done {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  margin: 0;
  font: 500 0.875rem/1.4 var(--font-body);
  color: var(--fg-2);
}
.cw-done .cw-tick {
  color: var(--ok);
  font-weight: 700;
  margin-right: 4px;
}
.cw-done b {
  font-weight: 600;
  color: var(--fg);
}
.ins-body .cw-note {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 2px 0 0;
  font: 500 0.8125rem/1.45 var(--font-body);
  color: var(--muted);
}
.cw-note .cw-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caution);
  transform: translateY(-2px);
}
.cw-note .ins-refs {
  display: block;
  margin-top: 2px;
}
.ins-body .cw-whose {
  margin: 0;
}
.cw-sum .dd-row {
  margin-top: 8px;
}
.cw-fail {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cw-fail .cw-row {
  margin-bottom: 2px;
}
.ins-body .cw-fly {
  margin: 0;
}
.ins-body .cw-prompt {
  margin: 0;
  font: 600 0.9375rem/1.45 var(--font-body);
  color: var(--fg);
}
.cw-call span {
  white-space: normal;
  text-align: left;
}
.cw-why summary {
  cursor: pointer;
  font: 600 0.75rem/1.4 var(--font-body);
  color: var(--muted);
  min-height: 24px;
  display: flex;
  align-items: center;
}
.cw-why p {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.cw-set {
  display: grid;
  gap: 8px;
  padding: 6px 8px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.cw-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cw-set-k {
  font: 600 0.75rem/1.2 var(--font-body);
  color: var(--fg-2);
}
.cw-seg button {
  min-height: 32px;
}
.cw-bubble {
  position: absolute;
  z-index: 6;
  max-width: 440px;
  padding: 14px 18px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--fg);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.cw-bubble[hidden],
.cw-sub[hidden],
.cw-sub .cw-hint[hidden],
.cw-bubble .cw-hint[hidden] {
  display: none;
}
.cw-sub {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.ins-body .cw-sub p {
  margin: 0;
}
.ins-body .cw-sub .cw-who {
  margin-bottom: 4px;
}
.ins-body .cw-sub .cw-say {
  font-size: 1.0625rem;
}
.ins-body .cw-sub .cw-hint {
  margin-top: 4px;
  font-size: 0.8125rem;
}
.cw-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: inherit;
  border: inherit;
  border-width: 0 1px 1px 0;
}
.cw-bubble[data-side=right]::after {
  right: -8px;
  transform: rotate(-45deg);
}
.cw-bubble[data-side=left]::after {
  left: -8px;
  transform: rotate(135deg);
}
.cw-bubble .cw-who,
.cw-sub .cw-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font: 600 0.75rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.cw-bubble .cw-who .cw-wave,
.cw-sub .cw-who .cw-wave {
  margin-left: 0;
  order: -1;
}
.cw-bubble.is-you .cw-wave,
.cw-sub.is-you .cw-wave {
  visibility: hidden;
  width: 0;
}
.cw-bubble .cw-say,
.cw-sub .cw-say {
  margin: 0;
  font: 600 1.375rem/1.3 var(--font-body);
  color: var(--fg);
}
.cw-bubble .cw-hint,
.cw-sub .cw-hint {
  margin: 8px 0 0;
  font: 500 0.875rem/1.4 var(--font-body);
  color: var(--fg-2);
}
.cw-bubble .cw-hint b,
.cw-sub .cw-hint b {
  color: var(--fg);
  font-weight: 700;
}
@media (max-width: 999px) {
  .cw-bubble {
    max-width: none;
    padding: 10px 14px;
  }
  .cw-bubble::after {
    display: none;
  }
  .cw-bubble .cw-say {
    font-size: 1.0625rem;
  }
  .cw-row {
    margin: 0 32px 10px 0;
  }
  .cw-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-height: 40px;
    padding: 6px 10px;
  }
  .cw-chip.is-you {
    padding: 5px 9px;
  }
  .cw-chip b {
    font-size: 0.8125rem;
  }
  .cw-chip span {
    font-size: 0.75rem;
  }
  .cw-chip .cw-wave {
    margin-left: 4px;
  }
}
.deck-tours.fl-show > :not(.dd-tabs):not(.fl-list) {
  display: none;
}
.deck-tours:not(.fl-show) > .fl-list {
  display: none;
}
.fl-list {
  display: grid;
  gap: 4px;
}
.fl-list .fl-sys {
  margin: 10px 6px 0;
}
.fl-lead {
  margin-bottom: 2px;
}
.fl-item {
  display: grid;
  gap: 2px;
  padding: 8px;
}
.fl-item b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 0.8125rem/1.3 var(--font-screen);
  letter-spacing: .02em;
}
.fl-item small {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  padding-left: 16px;
}
.fl-item.is-off {
  opacity: .55;
  cursor: default;
}
.fl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.fl-dot.is-warn {
  background: #FF3B3B;
}
.fl-dot.is-caut {
  background: #FFA51F;
}
.ins-title.fl-title {
  font-family: var(--font-screen);
  font-size: 1.1875rem;
  letter-spacing: .02em;
}
.fl-title.is-warn {
  color: #FF3B3B;
}
.fl-title.is-caut,
.fl-amber {
  color: #FFA51F;
}
:root[data-theme=light] .fl-title.is-caut,
:root[data-theme=light] .fl-amber {
  color: #B8650A;
}
:root[data-theme=light] .fl-title.is-warn {
  color: #D42020;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .fl-title.is-caut,
  :root:not([data-theme=dark]) .fl-amber {
    color: #B8650A;
  }
  :root:not([data-theme=dark]) .fl-title.is-warn {
    color: #D42020;
  }
}
.ins-body .fl-flight {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: -6px;
}
.fl-alert {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0B0C0E;
  border: 1px solid #22262C;
}
.ins-body .fl-at {
  margin: 0;
  font: 700 0.8125rem/1.3 var(--font-screen);
  letter-spacing: .03em;
}
.ins-body .fl-at.is-warn {
  color: #FF3B3B;
}
.ins-body .fl-at.is-caut {
  color: #FFA51F;
}
.fl-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.fl-line {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.fl-line.is-ind {
  padding-left: 14px;
}
.fl-mk {
  font: 700 0.8125rem/1.35 var(--font-body);
  color: #6B7480;
  text-align: center;
}
.fl-tx {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.fl-tx code {
  font: 600 0.75rem/1.35 var(--font-screen);
  letter-spacing: .02em;
  color: #F2F3F5;
  white-space: normal;
  overflow-wrap: anywhere;
  background: none;
  padding: 0;
}
.fl-tx small {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #8B939E;
}
.fl-line.is-now code,
.fl-line.is-todo code {
  color: #2FD8F5;
}
.fl-line.is-now .fl-mk {
  color: #2FD8F5;
}
.fl-line.is-now {
  background: rgba(47, 216, 245, .08);
  border-radius: 6px;
  margin: 0 -6px;
  padding: 2px 6px;
}
.fl-line.is-done code {
  color: #3FD27A;
  text-decoration: line-through;
  text-decoration-color: rgba(63, 210, 122, .5);
}
.fl-line.is-done .fl-mk {
  color: #3FD27A;
}
.fl-line.is-cond code {
  color: #F2F3F5;
}
.ins-body .fl-more {
  font-size: 0.75rem;
  color: #8B939E;
}
.fl-step {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
}
.fl-step.is-now {
  border-color: color-mix(in srgb, #2FD8F5 45%, var(--line-strong));
}
.fl-step.is-attn {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--caution) 50%, var(--line-strong));
}
.fl-step.is-done {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line-strong));
}
.ins-body .fl-step-h {
  color: var(--fg);
  font-weight: 600;
}
.fl-step-h code,
.fl-say code {
  font: 600 0.8125rem/1.35 var(--font-screen);
  letter-spacing: .02em;
  color: var(--fg);
  background: none;
  padding: 0;
}
.fl-lt {
  font: 700 0.6875rem/1 var(--font-screen);
  letter-spacing: .06em;
  padding: 4px 6px;
  border-radius: 5px;
  background: #0B0C0E;
}
.fl-lt.is-warn {
  color: #FF3B3B;
}
.fl-lt.is-caut {
  color: #FFA51F;
}
.fl-do,
.fl-say {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.fl-do b {
  color: var(--fg);
}
.fl-do .btn,
.fl-step .fl-show {
  margin-left: 2px;
}
.fl-say li {
  display: grid;
  gap: 2px;
}
.fl-say small {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.ins-body .fl-small {
  font-size: 0.8125rem;
  color: var(--muted);
}
.fl-note {
  display: grid;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
.fl-note.is-sit {
  border-left-color: var(--caution);
}
.fl-note.is-crew {
  border-left-color: color-mix(in srgb, var(--fg) 25%, transparent);
}
.ins-body .fl-note p:not(.ins-refs) {
  font-size: 0.8125rem;
}
.fl-row {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.fl-amber {
  font-family: var(--font-screen);
}
.fl-stats {
  margin: 0;
}
.fl-foot {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.fl-do {
  list-style: none;
  padding: 0;
}
.fl-do li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fl-do li > span {
  min-width: 0;
}
.fl-do .fl-show {
  flex: none;
}
@media (max-width: 999px) {
  .deck-insp .fl-step {
    padding: 10px;
    gap: 6px;
  }
  .deck-insp.is-peek .fl-head,
  .deck-insp.is-peek .fl-flight {
    display: none;
  }
}
.scen-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.scen-jump a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  font: 600 0.9375rem/1.2 var(--font-body);
  transition:
    border-color .2s ease,
    transform .25s cubic-bezier(.2, .8, .2, 1),
    background-color .2s ease;
}
.scen-jump a:hover,
.scen-jump a:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.scen-jump-k {
  font: 600 0.6875rem/1 var(--font-screen);
  letter-spacing: .08em;
  color: var(--muted);
}
.scen-jump-n {
  margin-left: auto;
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font: 600 0.75rem/1 var(--font-body);
  color: var(--fg-2);
  text-align: center;
}
.sj-row {
  gap: 14px;
}
.scen-jump a.sj {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  gap: 6px;
  padding: 20px 20px 18px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 70%, var(--bg)) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  font: inherit;
  --sj: var(--caution);
}
.scen-jump a.sj[data-grp=dual] {
  --sj: var(--warn);
}
.scen-jump a.sj[data-grp=check] {
  --sj: var(--instr, #2BB3CC);
}
.scen-jump a.sj::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--sj);
  opacity: .85;
}
.scen-jump a.sj::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -40px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--sj) 16%, transparent),
      transparent);
  opacity: .6;
  transition: opacity .3s ease;
}
.scen-jump a.sj:hover,
.scen-jump a.sj:focus-visible {
  border-color: color-mix(in srgb, var(--sj) 55%, var(--line-strong));
  transform: translateY(-3px);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.45);
}
.scen-jump a.sj:hover::after {
  opacity: 1;
}
.sj-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sj-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--sj);
  background: color-mix(in srgb, var(--sj) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sj) 30%, transparent);
}
.sj-ic .sj-hot {
  fill: color-mix(in srgb, currentColor 18%, transparent);
}
.sj-ic .sj-hot2 {
  fill: color-mix(in srgb, currentColor 35%, var(--surface));
}
.sj-k {
  font: 600 0.75rem/1 var(--font-screen);
  letter-spacing: .1em;
  color: var(--muted);
}
.sj-t {
  font: 600 clamp(1.125rem, 1rem + 0.4vw, 1.3125rem)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.sj-d {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.sj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sj-n {
  font-size: 0.8125rem;
  color: var(--muted);
}
.sj-n b {
  font: 700 0.9375rem/1 var(--font-body);
  color: var(--fg);
  margin-right: 2px;
}
.sj-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  transition:
    transform .3s cubic-bezier(.2, .8, .2, 1),
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.scen-jump a.sj:hover .sj-go,
.scen-jump a.sj:focus-visible .sj-go {
  transform: translateY(3px);
  background: var(--sj);
  border-color: var(--sj);
  color: #111214;
}
.scen-group.is-arrived .scen-head-k {
  animation: sj-arrive 1.1s ease;
}
@keyframes sj-arrive {
  30% {
    border-color: var(--fg);
    color: var(--fg);
    transform: scale(1.08);
  }
}
@media (max-width: 640px) {
  .scen-jump a.sj {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px;
  }
  .sj-top {
    grid-row: 1 / 3;
    margin: 0;
  }
  .sj-top .sj-k {
    display: none;
  }
  .sj-t {
    grid-column: 2;
  }
  .sj-d {
    grid-column: 2;
    font-size: 0.8125rem;
  }
  .sj-foot {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    gap: 6px;
  }
  .sj-nw {
    display: none;
  }
  .sj-n b {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scen-group.is-arrived .scen-head-k {
    animation: none;
  }
}
.scen-group {
  display: grid;
  gap: 22px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.scen-group + .scen-group {
  padding-top: 12px;
}
.scen-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.scen-head-k {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  font: 600 0.875rem/1 var(--font-screen);
  letter-spacing: .04em;
  color: var(--fg-2);
}
.scen-head-t {
  display: grid;
  gap: 6px;
  max-width: 70ch;
}
.scen-head h2 {
  font: 600 clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem)/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
.scen-head p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .scen-jump {
    grid-template-columns: 1fr;
  }
  .scen-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .scen-head-k {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
}
.tr.has-photo {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.tr.has-photo .tr-hero {
  position: relative;
}
.tr-photo {
  position: absolute;
  z-index: -1;
  top: calc(-1 * clamp(36px, 6vw, 72px));
  bottom: calc(-1 * clamp(56px, 6vw, 96px));
  left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  background: #0B0C0E;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, 0.5) 87%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, 0.5) 87%,
      transparent 100%);
}
.tr-photo picture,
.tr-photo img {
  display: block;
  width: 100%;
  height: var(--tr-ph, 100%);
}
.tr-photo picture {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 78%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 78%,
      transparent 100%);
}
.tr-photo img {
  object-fit: cover;
  object-position: 62% 40%;
  filter: saturate(0.72) contrast(1.02) brightness(0.8);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.tr-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.92) 0%,
      rgba(11, 12, 14, 0.8) 42%,
      rgba(11, 12, 14, 0.52) 72%,
      rgba(11, 12, 14, 0.58) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.55) 0%,
      rgba(11, 12, 14, 0.1) 30%,
      rgba(11, 12, 14, 0.1) 60%,
      rgba(11, 12, 14, 0.5) 100%);
}
.tr.has-photo .tr-main {
  --fg: #F2F3F5;
  --fg-2: #D6D9DE;
  --muted: rgba(242, 243, 245, 0.68);
  --line: rgba(242, 243, 245, 0.16);
  --line-strong: rgba(242, 243, 245, 0.3);
  --ok: #62B0F0;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --invert-bg: #F2F3F5;
  --invert-fg: #111214;
  color: var(--fg);
  color-scheme: dark;
}
.tr.has-photo .tr-title {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.tr.has-photo .tr-hero > :not(.tr-main) {
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
}
@media (max-width: 900px) {
  .tr-photo img {
    object-position: 70% 40%;
  }
  .tr-photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.82) 0%,
        rgba(11, 12, 14, 0.74) 55%,
        rgba(11, 12, 14, 0.66) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-photo img {
    animation: none;
  }
}
.page-hero.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  padding-block: clamp(72px, 10vw, 132px) clamp(104px, 11vw, 150px);
}
.ph-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0B0C0E;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 64%,
      rgba(0, 0, 0, 0.5) 84%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 64%,
      rgba(0, 0, 0, 0.5) 84%,
      transparent 100%);
}
.ph-photo picture,
.ph-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.ph-photo img {
  object-fit: cover;
  object-position: 58% 46%;
  filter: saturate(0.92) contrast(1.04);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.ph-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.86) 0%,
      rgba(11, 12, 14, 0.66) 38%,
      rgba(11, 12, 14, 0.22) 72%,
      rgba(11, 12, 14, 0.32) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.5) 0%,
      rgba(11, 12, 14, 0) 28%,
      rgba(11, 12, 14, 0) 62%,
      rgba(11, 12, 14, 0.45) 100%);
}
.page-hero.has-photo > .wrap {
  --fg: #F2F3F5;
  --fg-2: #D6D9DE;
  --muted: rgba(242, 243, 245, 0.7);
  --line: rgba(242, 243, 245, 0.16);
  --line-strong: rgba(242, 243, 245, 0.3);
  --ok: #62B0F0;
  --warn: #FF5C61;
  --instr: #4FD1E8;
  --surface: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  color-scheme: dark;
}
.page-hero.has-photo .h1 {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.page-hero.has-photo .lede {
  color: rgba(242, 243, 245, 0.84);
}
.page-hero.has-photo .crew-how .crew-badge {
  background: rgba(11, 12, 14, 0.45);
}
@media (max-width: 760px) {
  .ph-photo img {
    object-position: 64% 46%;
  }
  .ph-photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.7) 0%,
        rgba(11, 12, 14, 0.66) 60%,
        rgba(11, 12, 14, 0.55) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-photo img {
    animation: none;
  }
}
.tr.is-sky .tr-photo img {
  object-position: 70% 52%;
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
}
.tr.is-sky .tr-photo::after {
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.9) 0%,
      rgba(11, 12, 14, 0.74) 40%,
      rgba(11, 12, 14, 0.32) 70%,
      rgba(11, 12, 14, 0.42) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.5) 0%,
      rgba(11, 12, 14, 0) 30%,
      rgba(11, 12, 14, 0) 60%,
      rgba(11, 12, 14, 0.5) 100%);
}
@media (max-width: 900px) {
  .tr.is-sky .tr-photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.78) 0%,
        rgba(11, 12, 14, 0.7) 60%,
        rgba(11, 12, 14, 0.6) 100%);
  }
}
.page-hero.is-panel .ph-photo img {
  object-position: 50% 62%;
  filter: saturate(0.95) contrast(1.05);
}
.page-hero.is-panel .ph-photo::after {
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.9) 0%,
      rgba(11, 12, 14, 0.84) 45%,
      rgba(11, 12, 14, 0.5) 66%,
      rgba(11, 12, 14, 0.12) 84%,
      rgba(11, 12, 14, 0.2) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.45) 0%,
      rgba(11, 12, 14, 0) 30%,
      rgba(11, 12, 14, 0) 62%,
      rgba(11, 12, 14, 0.45) 100%);
}
.page-hero.is-panel .ph-photo img {
  filter: saturate(0.95) contrast(1.05) blur(0.4px);
}
.tq-photo {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.55) 82%,
      transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.55) 82%,
      transparent 100%);
}
.tq-photo img {
  object-position: 60% 40%;
  filter: saturate(0.92) contrast(1.06) brightness(0.82);
}
.tq-photo::after {
  background:
    linear-gradient(
      90deg,
      rgba(10, 11, 13, 0.93) 0%,
      rgba(10, 11, 13, 0.84) 42%,
      rgba(10, 11, 13, 0.55) 72%,
      rgba(10, 11, 13, 0.5) 100%),
    linear-gradient(
      180deg,
      rgba(10, 11, 13, 0.35) 0%,
      rgba(10, 11, 13, 0) 30%,
      rgba(10, 11, 13, 0) 60%,
      rgba(10, 11, 13, 0.45) 100%);
}
.theme-sw {
  --n: 3;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  isolation: isolate;
}
.theme-sw-pill {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--line);
  transition: transform .38s cubic-bezier(.3, 1.25, .4, 1);
}
.theme-sw[data-theme-mode=dark] .theme-sw-pill {
  transform: translateX(100%);
}
.theme-sw[data-theme-mode=system] .theme-sw-pill {
  transform: translateX(200%);
}
.theme-sw button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .2s ease;
}
.theme-sw button svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .45s cubic-bezier(.3, 1.3, .4, 1);
}
.theme-sw button:hover {
  color: var(--fg-2);
}
.theme-sw button[aria-checked=true] {
  color: var(--fg);
}
.theme-sw button[aria-checked=true][data-theme-mode=light] svg {
  transform: rotate(90deg);
}
.theme-sw button[aria-checked=true][data-theme-mode=dark] svg {
  transform: rotate(-20deg);
}
.theme-sw button[aria-checked=true][data-theme-mode=system] svg {
  transform: rotate(180deg);
}
.theme-sw button:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  .site-footer .theme-sw button {
    position: relative;
  }
  .site-footer .theme-sw button::before {
    content: "";
    position: absolute;
    inset: -7px 0;
  }
}
.theme-sw-fill {
  display: grid;
  width: 100%;
}
.deck-menu-gap {
  margin-top: 6px !important;
}
html.is-theming::view-transition-old(root),
html.is-theming::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.is-theming::view-transition-new(root) {
  animation: theme-reveal .65s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes theme-reveal {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 100%));
  }
  to {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 100%));
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-sw-pill,
  .theme-sw button svg {
    transition: none;
  }
}
.ins-body .mc-lead {
  margin-top: -4px;
}
.mc-type {
  align-items: center;
  gap: 12px;
}
.mc-keys {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}
.mc-keys kbd {
  font: 600 0.6875rem/1 var(--font-body);
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  background: none;
}
.mc-keys span {
  margin-right: 4px;
}
.ins-body .mc-sp {
  margin: 0;
  justify-self: start;
  min-width: 168px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #0A0E1A;
  color: #FFFFFF;
  font: 400 1.0625rem/1.2 var(--font-screen, "B612 Mono", ui-monospace, monospace);
  letter-spacing: .08em;
}
.ins-body .mc-sp.is-empty {
  color: #8A93A6;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
}
.mc-lessons a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-top: 1px solid var(--line);
  color: var(--fg);
  font: 500 0.875rem/1.3 var(--font-body);
  text-decoration: none;
}
.mc-lessons li:first-child a {
  border-top: 0;
}
.mc-lessons a:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.mc-lessons a:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: -2px;
}
.deck.is-mcdu-typing .deck-crumbs {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 60%, transparent);
}
.db-k {
  margin-top: 4px;
}
.db-wrap {
  display: grid;
  gap: 12px;
}
.db-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.db-rows > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.db-rows > li::before {
  display: none;
}
.db-row button {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  grid-template-areas: "n name t k" ". note note note";
  gap: 2px 8px;
  align-items: baseline;
  text-align: left;
  padding: 9px 10px 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.db-row button:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.db-row button:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 1px;
}
.db-row.is-late button,
.db-row.is-bad button {
  border-left-color: var(--caution);
  background: var(--caution-soft);
}
.db-row.is-help button {
  border-left-color: var(--line-strong);
}
.db-row.is-now button {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent);
}
.db-n {
  grid-area: n;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8125rem;
}
.db-name {
  grid-area: name;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.db-t {
  grid-area: t;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.db-tick {
  grid-area: k;
  color: var(--ok);
  font-weight: 700;
}
.db-note {
  grid-area: note;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.db-row.is-late .db-note,
.db-row.is-bad .db-note {
  color: var(--caution);
  font-weight: 600;
}
.db-slow p {
  margin: 0;
  color: var(--fg);
}
.db-link {
  justify-self: start;
  font: 600 0.8125rem/1.4 var(--font-body);
  color: var(--fg);
  text-underline-offset: 3px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.db-acts {
  flex-wrap: wrap;
}
.db-acts .btn {
  gap: 6px;
}
.db-play {
  display: inline-flex;
}
.ins-body .db-fine {
  margin: -4px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.db-url {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  font: 500 0.75rem/1.3 var(--font-screen);
}
.fl-db {
  display: grid;
  gap: 10px;
}
.db-tl {
  position: absolute;
  z-index: 6;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5);
  animation: deck-in .22s ease both;
}
.db-tl[hidden] {
  display: none;
}
.db-tl-k {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.db-track {
  position: relative;
  flex: 1;
  height: 100%;
  min-width: 120px;
  border-radius: 8px;
}
.db-track:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: -2px;
}
.db-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.db-track .db-tick {
  position: absolute;
  top: 34px;
  width: 1px;
  height: 6px;
  background: var(--line-strong);
}
.db-track .db-tick i {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font: 500 0.625rem/1 var(--font-body);
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.db-dot {
  position: absolute;
  top: 27px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--c);
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent);
}
.db-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.db-dot b {
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 0.625rem/1 var(--font-body);
  letter-spacing: .06em;
  color: var(--c);
  white-space: nowrap;
  pointer-events: none;
}
.db-dot.is-now {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent);
}
.db-head {
  position: absolute;
  top: 17px;
  bottom: 18px;
  width: 2px;
  margin-left: -1px;
  background: var(--fg);
  border-radius: 2px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--fg) 50%, transparent);
  pointer-events: none;
}
.db-head::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 10px;
  height: 6px;
  border-radius: 2px;
  background: var(--fg);
}
.db-now {
  flex: none;
  min-height: 36px;
  font-size: 0.8125rem;
}
.db-tl .db-x {
  position: static;
  flex: none;
}
@media (max-width: 999px) {
  .db-tl {
    bottom: calc(var(--dsheet, 0px) + 12px);
    height: 60px;
    gap: 10px;
    padding-left: 12px;
  }
  .db-tl-k {
    display: none;
  }
}
@media (max-width: 520px) {
  .db-now {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .db-tl {
    animation: none;
  }
}
.fl-chip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  min-height: 44px;
  max-width: calc(100% - 32px);
  padding: 5px 14px 5px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #5FD3F3 45%, transparent);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
}
.fl-chip[hidden] {
  display: none;
}
.fl-chip .fl-sw {
  gap: 10px;
  min-height: 34px;
}
.fl-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fl-t b {
  font: 600 0.8125rem/1.2 var(--font-body);
  color: var(--fg);
}
.fl-t small {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 0.625rem/1.2 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fl-chip {
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 4px;
}
.fl-off {
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  font: 600 0.75rem/1.3 var(--font-body);
  color: var(--fg-2);
}
.fl-off[hidden] {
  display: none;
}
@media (max-width: 640px) {
  .fl-off {
    flex-basis: 100%;
    padding: 4px 0 2px;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }
}
.fl-t small i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #5FD3F3;
  box-shadow: 0 0 6px #5FD3F3;
  flex: none;
}
.deck.has-insp .fl-chip,
.deck.has-drill .fl-chip {
  z-index: 6;
}
.deck:has(#deck-tours:not([hidden])) .fl-chip,
.deck:has(#deck-more:not([hidden])) .fl-chip,
.deck:has(#deck-flight:not([hidden])) .fl-chip {
  visibility: hidden;
}
.fl-sw input:checked + .deck-switch-track {
  background: #5FD3F3;
}
.fl-sd {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.fl-sd polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-sd-glow polyline {
  stroke: #5FD3F3;
  stroke-width: 1.6;
  opacity: .6;
}
.fl-sd-run polyline {
  stroke: #E9FAFF;
  stroke-width: 0.7;
  stroke-dasharray: 1.6 4.4;
}
.ms-switch input:checked + .deck-switch-track {
  background: #A9BDCD;
}
.deck.has-mastery .deck-mini,
.deck.has-mastery .deck-welcome {
  display: none;
}
.ms-card {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 16px;
  width: 320px;
  max-height: calc(100% - 96px);
  overflow: auto;
  padding: 16px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  animation: deck-in .22s ease both;
}
.ms-card[hidden] {
  display: none;
}
.ms-card p {
  margin: 0;
}
.ms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ms-head .eyebrow {
  color: var(--muted);
  margin: 0;
}
.ms-head .ms-x {
  position: static;
}
.ms-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.ms-bars li {
  display: grid;
  grid-template-columns: 112px 1fr 40px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.ms-bars li::before {
  display: none;
}
.ms-l {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font: 600 0.75rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.ms-l:hover {
  color: var(--fg);
}
.ms-l:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
  border-radius: 4px;
}
.ms-bars b {
  text-align: right;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.ms-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  overflow: hidden;
}
.ms-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      135deg,
      #D6E6F4 0 4px,
      #A9BDCD 4px 7px);
}
.ms-bar.is-new {
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--fg) 16%, transparent) 0 5px,
      transparent 5px 9px);
}
.ms-bars li:has(.is-new) b {
  color: var(--muted);
}
.ms-weak {
  font: 500 0.8125rem/1.5 var(--font-body);
  color: var(--fg);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ms-weak span {
  color: var(--muted);
  font-weight: 600;
}
.ms-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ms-last {
  font: 500 0.8125rem/1.3 var(--font-body);
  color: var(--fg-2);
}
.ms-key {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  font: 500 0.6875rem/1 var(--font-body);
  color: var(--muted);
}
.ms-key i {
  width: 18px;
  height: 11px;
  border-radius: 3px;
  margin-left: 4px;
}
.ms-key i:first-child {
  margin-left: 0;
}
.ms-key .k-strong {
  border: 2px solid #D6E6F4;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(169, 189, 205, .35) 0 1px,
      transparent 1px 4px);
}
.ms-key .k-mid {
  border: 1.5px solid rgba(169, 189, 205, .85);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(169, 189, 205, .22) 0 1px,
      transparent 1px 5px);
}
.ms-key .k-new {
  border: 1.5px dashed rgba(169, 189, 205, .7);
}
.ms-fine {
  font: 500 0.6875rem/1.4 var(--font-body);
  color: var(--muted);
}
:root[data-theme=light] .ms-key .k-strong {
  border-color: #6F8496;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .ms-key .k-strong {
    border-color: #6F8496;
  }
}
@media (max-width: 999px) {
  .ms-card {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(var(--sheet, 0px) + 16px);
    max-height: 46vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-card {
    animation: none;
  }
}
.db-print {
  display: none;
}
@media print {
  body.is-deck > *:not(.db-print) {
    display: none !important;
  }
  .db-print {
    display: block !important;
    color: #111;
    background: #fff;
    font: 400 11pt/1.45 var(--font-body);
    padding: 0;
  }
  .db-print h1 {
    font: 700 18pt/1.2 var(--font-body);
    margin: 4pt 0 6pt;
  }
  .db-print .db-pr-k {
    font: 600 8pt/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #555;
    margin: 0;
  }
  .db-print .db-pr-meta {
    color: #333;
    margin: 0 0 8pt;
  }
  .db-print .db-pr-not {
    border: 1.5pt solid #111;
    padding: 6pt 8pt;
    font-weight: 600;
    margin: 0 0 10pt;
  }
  .db-print table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10pt;
  }
  .db-print th,
  .db-print td {
    text-align: left;
    border-bottom: 0.5pt solid #999;
    padding: 4pt 6pt 4pt 0;
    vertical-align: top;
  }
  .db-print .db-pr-foot {
    color: #555;
    font-size: 8.5pt;
    margin-top: 14pt;
  }
}
.dr-sec {
  display: grid;
  gap: 14px;
}
.dr-sec .tr-map-h {
  align-items: center;
}
.dr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px) {
  .dr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dr-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.dr-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dr-badge {
  font: 700 0.6875rem/1 var(--font-screen);
  letter-spacing: 0.14em;
  padding: 5px 8px 4px;
  border: 2px solid currentColor;
  color: var(--warn);
}
.dr-badge.is-lim {
  color: var(--caution);
}
@supports (grid-template-rows: subgrid) {
  .dr-grid {
    grid-template-rows: repeat(6, auto);
  }
  .dr-card {
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 14px;
  }
  .dr-card > .dr-pips,
  .dr-card > .dr-best {
    align-self: center;
  }
  .dr-grid:not(:has(.dr-list:not([hidden]), .dr-groups:not([hidden]))) .dr-card {
    padding-bottom: calc(clamp(20px, 2.6vw, 28px) - 14px);
  }
}
.dr-count {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.dr-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dr-p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 48ch;
}
.dr-p b {
  color: var(--fg);
}
.dr-pips {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 6px;
}
.dr-pips li {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}
.dr-pips li.is-learning {
  background: color-mix(in srgb, var(--caution) 70%, transparent);
}
.dr-pips li.is-heart {
  background: var(--ok);
}
.dr-best {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.dr-best b {
  font-size: 1.25rem;
  color: var(--fg);
  margin: 0 2px;
}
.dr-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}
.dr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dr-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  transition: padding .2s var(--ease-out), color .2s ease;
}
.dr-pick:hover {
  padding-left: 8px;
}
.dr-pick-t {
  font: 600 0.8125rem/1.35 var(--font-screen);
  letter-spacing: 0.03em;
  min-width: 0;
}
.dr-pick-s {
  flex: none;
  font-size: 0.75rem;
  color: var(--muted);
}
.dr-pick-s.is-heart {
  color: var(--ok);
}
.dr-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dr-group {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.dr-group small {
  font-size: 0.6875rem;
  color: var(--muted);
}
.dr-group:hover {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.dr-group:hover small {
  color: inherit;
  opacity: .7;
}
.dr-stage {
  display: grid;
  gap: 18px;
  transition: opacity .2s ease, transform .2s ease;
}
.dr-stage.is-out {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.dr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dr-clock {
  font-size: 0.9375rem;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.dr-k {
  display: block;
  font: 700 0.625rem/1.3 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.dr-sit {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--caution);
  border-radius: 14px;
  background: var(--surface);
}
.dr-sit p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--fg);
  text-wrap: pretty;
}
.dr-ask {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.dr-said {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 0.9375rem/1.4 var(--font-screen);
  letter-spacing: .03em;
  color: var(--fg-2);
}
.dr-said .dr-k {
  display: inline;
  margin: 0;
}
.dr-choices {
  display: grid;
  gap: 8px;
}
.dr-choices.is-num {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dr-choice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    transform .15s ease,
    opacity .2s ease;
}
.dr-choice:hover:not(:disabled),
.dr-choice:focus-visible {
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  transform: translateX(2px);
}
.dr-choice:active:not(:disabled) {
  transform: scale(.99);
}
.dr-choice:disabled {
  cursor: default;
}
.dr-choice.is-wrong {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  opacity: .75;
  animation: dr-shake .32s ease;
}
.dr-choice.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, var(--surface-2));
}
@keyframes dr-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.is-num .dr-choice {
  padding: 18px 16px;
}
.dr-num {
  font: 700 1.25rem/1.2 var(--font-screen);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.dr-q {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.dr-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font: 500 0.9375rem/1.4 var(--font-screen);
  letter-spacing: .03em;
}
.dr-li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dr-lead {
  flex: 1 1 16px;
  min-width: 16px;
  border-bottom: 2px dotted currentColor;
  opacity: .35;
  transform: translateY(-4px);
}
.dr-la {
  flex: none;
  font-weight: 700;
  max-width: 60%;
  text-align: right;
}
.dr-why {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg);
  background: color-mix(in srgb, var(--caution) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--caution) 40%, transparent);
}
.dr-qrh {
  border: 2px solid var(--fg);
  border-radius: 4px;
  background: var(--surface);
}
.dr-qrh-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-strong);
}
.dr-qrh-t {
  font: 700 0.8125rem/1.3 var(--font-screen);
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 0;
}
.dr-qrh-k {
  flex: none;
  font: 700 0.625rem/1 var(--font-screen);
  letter-spacing: .14em;
  padding: 4px 6px 3px;
  background: var(--fg);
  color: var(--bg);
}
.dr-qrh-b {
  list-style: none;
  margin: 0;
  padding: 4px 16px 10px;
}
.dr-qrh-b li {
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.dr-qrh-b li:last-child {
  border-bottom: 0;
}
.dr-qrh-b .is-in {
  padding-left: 18px;
}
.dr-qrh-b .dr-if {
  font: 600 0.8125rem/1.4 var(--font-screen);
  letter-spacing: .03em;
  color: var(--fg-2);
  border-bottom: 0;
  padding-bottom: 0;
}
.dr-qrh-b .dr-done {
  animation: fd-in .3s ease both;
}
.dr-blank {
  display: block;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font: 700 0.8125rem/1.5em var(--font-screen);
  animation: dr-wait 1.6s ease-in-out infinite;
}
@keyframes dr-wait {
  50% {
    border-color: var(--fg-2);
  }
}
.dr-result {
  display: grid;
  gap: 4px;
}
.dr-result b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.dr-result.is-clean b {
  color: var(--ok);
}
.dr-result.is-slips b {
  color: var(--caution);
}
.dr-result span {
  font: 600 0.9375rem/1.4 var(--font-data);
  color: var(--fg-2);
}
.dr-result small {
  font-size: 0.875rem;
  color: var(--muted);
}
.dr-after {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.dr-refs {
  margin: 0;
  font: 600 0.6875rem/1.5 var(--font-data);
  letter-spacing: .06em;
  color: var(--muted);
}
.dr-fact {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-left: 3px solid var(--ok);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}
.dr-fact p {
  margin: 0;
  line-height: 1.55;
}
.dr-sum-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: -0.02em;
}
.dr-sum {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dr-sum li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.dr-sum-t {
  font: 600 0.8125rem/1.35 var(--font-screen);
  letter-spacing: .03em;
  min-width: 0;
}
.dr-sum-s {
  flex: none;
  font-size: 0.8125rem;
}
.dr-sum-s.is-clean {
  color: var(--ok);
}
.dr-sum-s.is-slips {
  color: var(--caution);
}
.dr-miss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dr-miss li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.dr-miss li b {
  font-family: var(--font-screen);
}
.dr-miss li small {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .dr-choice.is-wrong,
  .dr-blank,
  .dr-qrh-b .dr-done {
    animation: none;
  }
  .dr-stage {
    transition: none;
  }
}
:root {
  --mc-screen: #050607;
  --mc-bezel: #1A1C1F;
  --mc-white: #F2F3F5;
  --mc-cyan: #3FD5F0;
  --mc-green: #62B0F0;
  --mc-amber: #F2A53A;
}
.mc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 96px);
}
.mc-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.mc-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0B0C0E;
  pointer-events: none;
}
.mc-photo picture,
.mc-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.mc-photo img {
  object-fit: cover;
  object-position: 70% 55%;
  filter: saturate(0.88) contrast(1.04) brightness(0.84);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.mc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.93) 0%,
      rgba(11, 12, 14, 0.8) 38%,
      rgba(11, 12, 14, 0.38) 70%,
      rgba(11, 12, 14, 0.28) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.35) 0%,
      rgba(11, 12, 14, 0) 35%,
      rgba(11, 12, 14, 0) 70%,
      rgba(11, 12, 14, 0.55) 100%);
}
.mc-hero.has-photo .mc-hero-t {
  --fg: #F2F3F5;
  --fg-2: #D6D9DE;
  --muted: rgba(242, 243, 245, 0.7);
  --line: rgba(242, 243, 245, 0.18);
  --line-strong: rgba(242, 243, 245, 0.3);
  --ok: #62B0F0;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --invert-bg: #F2F3F5;
  --invert-fg: #111214;
  color: var(--fg);
  color-scheme: dark;
  max-width: 640px;
}
.mc-hero.has-photo .h1 {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
@media (max-width: 860px) {
  .mc-photo img {
    object-position: 78% 60%;
  }
  .mc-photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.8) 0%,
        rgba(11, 12, 14, 0.74) 55%,
        rgba(11, 12, 14, 0.68) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-photo img {
    animation: none;
  }
}
.mc-hero-t {
  display: grid;
  gap: 18px;
  justify-items: start;
  min-width: 0;
}
.mc-hero-t .lede {
  max-width: 56ch;
}
.mc-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 48px);
  margin: 6px 0 4px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.mc-figs div {
  display: grid;
  gap: 4px;
}
.mc-figs dt {
  font: 600 0.6875rem/1.3 var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mc-figs dd {
  margin: 0;
  font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.mc-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 6px;
}
.mc-cont {
  font-size: 0.9375rem;
}
.mc-how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.mc-how-t {
  display: grid;
  gap: 8px;
  max-width: 70ch;
}
.mc-how-t p {
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.mc-how-m {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.mc-mode-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 36ch;
  min-height: 2.6em;
}
.mc-done {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.mc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 16px;
}
.mc-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color .35s ease,
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out);
}
.mc-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.6);
}
.mc-card:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.mc-mini {
  margin: 10px 10px 0;
  min-height: 108px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 4px;
  padding: 11px 14px 10px;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 40%),
    var(--mc-screen);
  box-shadow:
    0 0 0 1px #2A2D31,
    0 0 0 5px var(--mc-bezel),
    inset 0 1px 12px rgba(0, 0, 0, 0.6);
  font-family: var(--font-screen);
  letter-spacing: 0.04em;
  overflow: hidden;
  margin-top: 15px;
  margin-inline: 15px;
}
.mc-mini > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-mini-t {
  color: var(--mc-white);
  font-size: 0.8125rem;
  text-align: center;
}
.mc-mini-p {
  color: var(--mc-cyan);
  font-size: 0.6875rem;
  text-align: center;
  opacity: 0.9;
}
.mc-mini-l {
  display: grid;
  align-content: start;
  gap: 5px;
  padding-top: 6px;
  white-space: normal !important;
}
.mc-card:not(.is-big) .mc-mini-l,
.mc-card.is-big .mc-mini-p {
  display: none;
}
.mc-mini-l > span {
  display: flex;
  gap: 10px;
  color: var(--mc-cyan);
  font-size: 0.75rem;
}
.mc-mini-l i {
  font-style: normal;
  color: var(--mc-green);
  opacity: 0.8;
}
.mc-mini-s {
  grid-row: 4;
  color: var(--mc-white);
  font-size: 0.75rem;
  padding-top: 6px;
  border-top: 1px dashed rgba(242, 243, 245, 0.12);
}
.mc-mini-s::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--mc-white);
  opacity: 0;
}
.mc-card:hover .mc-mini-s::after {
  animation: mc-caret 1s steps(1) infinite;
}
.mc-card:hover .mc-mini {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mc-green) 40%, #2A2D31),
    0 0 0 5px var(--mc-bezel),
    inset 0 1px 12px rgba(0, 0, 0, 0.6),
    0 0 26px -6px color-mix(in srgb, var(--mc-green) 30%, transparent);
}
.mc-card-b {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px 0;
  min-width: 0;
}
.mc-card-b h3 {
  font: 650 1.0625rem/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.mc-card-b p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.mc-card-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px 16px;
}
.mc-card-f .data {
  font-size: 0.75rem;
  color: var(--muted);
}
.mc-best {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-2) !important;
}
.mc-best.is-clean {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  color: var(--ok) !important;
}
.mc-card-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.8125rem/1 var(--font-display);
  color: var(--fg);
}
.mc-card-go .arrow::after {
  width: 0.8em;
  height: 0.6em;
  vertical-align: 0;
}
.mc-card:hover .mc-card-go .arrow::after {
  transform: translateX(3px);
}
@media (min-width: 760px) {
  .mc-card.is-big {
    grid-column: span 2;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr auto;
  }
  .mc-card.is-big .mc-mini {
    grid-row: 1 / span 2;
    margin: 15px;
    min-height: 0;
    padding: 16px 18px 14px;
  }
  .mc-card.is-big .mc-mini-t {
    font-size: 0.9375rem;
  }
  .mc-card.is-big .mc-mini-p {
    font-size: 0.75rem;
  }
  .mc-card.is-big .mc-mini-s {
    font-size: 0.875rem;
  }
  .mc-card.is-big .mc-card-b {
    align-content: center;
    padding: 22px 22px 0 6px;
  }
  .mc-card.is-big .mc-card-b h3 {
    font-size: 1.375rem;
  }
  .mc-card.is-big .mc-card-b p {
    font-size: 0.9375rem;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .mc-card.is-big .mc-card-f {
    padding: 14px 22px 20px 6px;
  }
}
@media (max-width: 560px) {
  .mc-cards {
    gap: 12px;
  }
  .mc-card:not(.is-big) {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .mc-card:not(.is-big) .mc-mini {
    grid-row: 1 / span 2;
    margin: 12px 0 12px 12px;
    min-height: 0;
    padding: 9px 8px;
    grid-template-rows: auto 1fr auto;
  }
  .mc-card:not(.is-big) .mc-mini-t {
    font-size: 0.6875rem;
  }
  .mc-card:not(.is-big) .mc-mini-p {
    display: none;
  }
  .mc-card:not(.is-big) .mc-mini-s {
    grid-row: 3;
    font-size: 0.625rem;
  }
  .mc-card:not(.is-big) .mc-card-b {
    padding: 14px 14px 0;
    gap: 4px;
  }
  .mc-card:not(.is-big) .mc-card-b h3 {
    font-size: 0.9688rem;
  }
  .mc-card:not(.is-big) .mc-card-b p {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .mc-card:not(.is-big) .mc-card-f {
    padding: 8px 14px 12px;
  }
}
@keyframes mc-caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.85;
  }
}
.mc-run-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
.mc-ctl {
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .mc-ctl {
    justify-content: flex-start;
  }
}
.mc-dev .mc-hot {
  position: absolute;
}
.mc-btns .btn {
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}
.mc-take li b {
  display: block;
  color: var(--fg);
  font-weight: 600;
}
.mc-grid {
  display: grid;
  grid-template-columns: auto minmax(340px, 1fr);
  gap: 20px;
  align-items: start;
}
.mc-dev {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      70% 60% at 50% 40%,
      rgba(98, 176, 240, var(--stage-glow)),
      transparent 70%),
    radial-gradient(
      circle at 1px 1px,
      var(--stage-dot) 1px,
      transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(
      180deg,
      var(--stage-top),
      var(--stage-bottom));
}
.mc-dev canvas {
  display: block;
  max-width: 100%;
  touch-action: manipulation;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.mc-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.mc-side {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.mc-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.mc-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ok);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mc-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.mc-run .run-panel {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.mc-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.mc-k {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid currentColor;
  font: 700 0.6875rem/1 var(--font-screen);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.mc-k.is-do {
  color: var(--ok);
}
.mc-k.is-turn {
  color: var(--instr);
}
.mc-k.is-done {
  color: var(--ok);
}
.mc-sec {
  font-size: 0.8125rem;
  color: var(--muted);
}
.mc-task {
  font: 600 clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)/1.4 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
}
.mc-task.mc-how {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.mc-chip {
  justify-self: start;
  font: 600 0.75rem/1.3 var(--font-screen);
  letter-spacing: 0.06em;
  color: var(--mc-cyan);
  background: var(--mc-screen);
  padding: 5px 10px;
  border-radius: 6px;
}
.mc-say {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.mc-say b {
  color: var(--fg);
  font-weight: 600;
}
.mc-cap {
  display: inline-grid;
  place-items: center;
  min-width: 2.1em;
  height: 1.75em;
  padding: 0 0.5em;
  margin: 0 0.1em;
  border-radius: 6px;
  vertical-align: 0.06em;
  background:
    linear-gradient(
      180deg,
      #45494F,
      #2C2F33);
  color: var(--mc-white);
  border: 1px solid #5A5F66;
  box-shadow: 0 2px 0 #141517, 0 3px 8px -2px rgba(0, 0, 0, 0.5);
  font: 700 0.75em/1 var(--font-screen);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mc-scr-chip {
  display: inline-block;
  padding: 0.1em 0.45em;
  margin: 0 0.1em;
  border-radius: 5px;
  background: var(--mc-screen);
  color: var(--mc-white);
  border: 1px solid #2A2D31;
  font: 600 0.85em/1.5 var(--font-screen);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mc-scr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--mc-screen);
  box-shadow: 0 0 0 1px #2A2D31, inset 0 1px 10px rgba(0, 0, 0, 0.6);
  font-family: var(--font-screen);
}
.mc-scr-k {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 243, 245, 0.42);
}
.mc-scr-v {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--mc-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-scr-v::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.18em;
  background: var(--mc-white);
  animation: mc-caret 1.05s steps(1) infinite;
}
.mc-scr.is-empty .mc-scr-v {
  color: rgba(242, 243, 245, 0.3);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mc-scr.is-empty .mc-scr-v::after {
  display: none;
}
.mc-route {
  display: grid;
  gap: 8px;
}
.mc-pgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-pg {
  font: 600 0.6875rem/1 var(--font-screen);
  letter-spacing: 0.06em;
  color: var(--mc-white);
  background: var(--mc-screen);
  padding: 6px 8px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #2A2D31;
}
.mc-pg.is-more {
  color: rgba(242, 243, 245, 0.5);
}
.mc-brief-f {
  font-size: 0.8125rem;
  color: var(--muted);
}
.mc-mode-now {
  font-size: 0.8125rem;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mc-msg {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid;
}
.mc-msg.is-bad {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.mc-msg.is-good {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.mc-msg.is-hint {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 40%, transparent);
  background: color-mix(in srgb, var(--caution) 8%, transparent);
}
.mc-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.mc-skip {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (pointer: coarse) {
  .mc-skip {
    padding: 12px 0;
    margin-block: -12px;
  }
  #mc-mode-home button,
  #mc-mode-run button {
    position: relative;
  }
  #mc-mode-home button::before,
  #mc-mode-run button::before {
    content: "";
    position: absolute;
    inset: -7px 0;
  }
}
.mc-fcom {
  min-height: 0;
}
.mc-fcom-k {
  font-size: 0.75rem;
}
.mc-facts {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 16px;
}
.mc-did .fd-mark {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  font: 700 0.6875rem/1 var(--font-body);
}
.mc-did .fd-label {
  color: var(--ok);
}
.mc-did p {
  color: var(--fg-2);
}
.mc-note {
  font-size: 0.8125rem;
  color: var(--muted);
}
.mc-q {
  display: block;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--fg-2);
  font-style: italic;
}
.deb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.deb-row > div:last-child {
  display: grid;
  gap: 6px;
}
.deb-ring {
  width: 112px;
}
.deb-ring .tq-ring-n b {
  font-size: 2.25rem;
}
.deb-task {
  font: 600 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.4 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
}
.mc-take {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mc-take ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-take li {
  position: relative;
  padding-left: 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.mc-take li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.mc-keys {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
}
.mc-keys kbd {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}
@media (max-width: 1000px) {
  .mc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .mc-side {
    display: contents;
  }
  .mc-dev {
    position: relative;
    top: 0;
    order: 1;
    padding: 12px;
    border-radius: 18px;
  }
  .mc-side > .run-panel {
    order: 2;
  }
  .mc-side > .mc-fcom {
    order: 3;
  }
  .mc-side > .mc-keys {
    order: 4;
  }
}
@media (max-width: 860px) {
  .mc-hero-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .mc-how {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: none) {
  .mc-keys {
    display: none;
  }
}
.mc-more {
  display: none;
}
@media (max-width: 1000px) {
  .mc-run.app-shell {
    padding-top: 8px;
  }
  .mc-head {
    position: relative;
    z-index: 42;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: 0 0 8px;
  }
  .mc-head .back-link {
    flex: none;
    margin-left: -7px;
    padding: 7px;
  }
  .mc-exit-t {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .mc-head .run-title-row {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .mc-run-title {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-more {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--fg);
    font: 600 0.8125rem/1 var(--font-body);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .mc-more svg {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .mc-more[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
  }
  .mc-more[aria-expanded=true] svg {
    transform: rotate(180deg);
  }
  .mc-more:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 2px;
  }
  .mc-head .mc-ctl {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(300px, calc(100vw - 32px));
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition:
      opacity .2s ease,
      transform .3s cubic-bezier(.2, .7, .2, 1),
      visibility 0s linear .3s;
  }
  .mc-head.is-open .mc-ctl {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity .2s ease,
      transform .3s cubic-bezier(.2, .7, .2, 1),
      visibility 0s;
  }
  .mc-ctl .chip {
    justify-self: start;
  }
  .mc-ctl .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .mc-ctl .seg button {
    min-height: 40px;
    font-size: 0.875rem;
  }
  .mc-ctl .btn {
    min-height: 44px;
    justify-content: center;
  }
  .mc-dev {
    padding: 6px;
    border-radius: 16px;
    scroll-margin-top: calc(var(--header-h) + 8px);
  }
  .mc-run.is-fit .mc-dev {
    align-items: start;
  }
  .mc-run .run-flight {
    display: none;
  }
  .mc-run {
    --mc-card: 128px;
    padding-bottom: calc(var(--mc-card) + 40px + env(safe-area-inset-bottom, 0px));
  }
  body.mc-on {
    --header-h: 0px;
  }
  body.mc-on .site-header,
  body.mc-on .site-footer,
  body.mc-on .mobile-nav {
    display: none;
  }
  body.mc-on .mc-run.app-shell {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }
}
@media (max-width: 1000px) and (max-height: 499px) and (orientation: landscape) {
  .mc-run {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .mc-run > .wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .mc-run .mc-grid {
    display: contents;
  }
  .mc-run .mc-head {
    grid-column: 2;
    grid-row: 1;
  }
  .mc-run .mc-dev {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(8px + env(safe-area-inset-top, 0px));
    padding: 6px;
    border-radius: 16px;
  }
  .mc-run .mc-side {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    gap: 12px;
  }
  .mc-run .mc-side > * {
    order: 0;
  }
}
@media (min-width: 1001px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  .mc-run.app-shell {
    padding-top: 12px;
  }
  .mc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .mc-head .back-link {
    flex: none;
    padding: 7px;
    margin-left: -7px;
  }
  .mc-exit-t {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .mc-head .run-title-row {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .mc-run-title {
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-head .mc-ctl {
    flex: none;
    flex-wrap: nowrap;
  }
  .mc-run .run-flight {
    display: none;
  }
}
.mc-dock {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-height: calc(var(--mc-card, 128px) + env(safe-area-inset-bottom, 0px));
  max-height: var(--mc-dock-max, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 44px -26px rgba(0, 0, 0, 0.6);
  animation: mc-dock-in .35s cubic-bezier(.2, .7, .2, 1) both;
  transition: border-color .25s ease;
}
.mc-dock.is-bad {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line-strong));
}
.mc-dock.is-good {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong));
}
@media (min-width: 600px) {
  .mc-dock {
    width: min(640px, calc(100% - 32px));
    margin-inline: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: var(--mc-card, 128px);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 20px;
    box-shadow: 0 24px 56px -24px rgba(0, 0, 0, 0.6);
  }
}
.mc-dock-p {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line);
}
.mc-dock-p i {
  display: block;
  height: 100%;
  background: var(--ok);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.mc-dock-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
}
.mc-dock-s {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-dock .mc-k {
  flex: none;
}
.mc-dock-h .btn {
  flex: none;
  min-height: 40px;
  padding-inline: 14px;
}
.mc-dock-h .btn-primary {
  padding-inline: 16px 10px;
}
.mc-dock-o {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}
.mc-dock-o svg {
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.mc-dock.is-open .mc-dock-o svg {
  transform: rotate(180deg);
}
.mc-dock-o:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}
.mc-dock-o {
  min-width: 44px;
  min-height: 44px;
}
.mc-dock-t {
  min-width: 0;
  font: 600 0.9375rem/1.4 var(--font-display);
  color: var(--fg);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mc-dock.has-msg .mc-dock-t {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.mc-dock-m {
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid currentColor;
  font-size: 0.8125rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mc-dock-m.is-bad {
  color: var(--warn);
}
.mc-dock-m.is-good {
  color: var(--ok);
}
.mc-dock-m.is-hint {
  color: var(--caution);
}
.mc-dock.is-open .mc-dock-t,
.mc-dock.is-open .mc-dock-m {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.mc-dock-x {
  display: none;
  gap: 10px;
  min-width: 0;
  padding-top: 4px;
}
.mc-dock.is-open .mc-dock-x {
  display: grid;
  animation: mc-dock-more .3s ease both;
}
.mc-dock-x .mc-say {
  font-size: 0.875rem;
}
.mc-dock-x .mc-btns .btn {
  min-height: 40px;
}
@keyframes mc-dock-more {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mc-dock-in {
  from {
    transform: translateY(calc(100% + 16px));
  }
  to {
    transform: none;
  }
}
.mc-dock.is-slim {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.mc-dock.is-slim .mc-dock-h {
  display: contents;
}
.mc-dock.is-slim .mc-k {
  order: 1;
}
.mc-dock.is-slim .mc-dock-t {
  order: 2;
  flex: 1;
}
.mc-dock.is-slim .mc-dock-m {
  order: 3;
  flex: 0 1 34%;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.mc-dock.is-slim .mc-dock-h .btn {
  order: 4;
}
.mc-dock.is-slim .mc-dock-s,
.mc-dock.is-slim .mc-dock-o,
.mc-dock.is-slim .mc-dock-x {
  display: none;
}
@media (min-width: 600px) {
  .mc-dock.is-slim {
    width: auto;
    margin: 0;
    bottom: 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
}
.mc-dock.is-top {
  top: var(--header-h);
  bottom: auto;
  min-height: 0;
  margin: 0;
  width: auto;
  padding-bottom: 12px;
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  animation-name: mc-dock-top;
}
@keyframes mc-dock-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
@media (min-width: 1001px) {
  .mc-dock {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-dock,
  .mc-dock.is-open .mc-dock-x {
    animation: none;
  }
  .mc-dock-p i,
  .mc-dock-o svg,
  .mc-more svg,
  .mc-head .mc-ctl {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-card,
  .mc-track i {
    transition: none;
  }
  .mc-card:hover {
    transform: none;
  }
  .mc-scr-v::after,
  .mc-card:hover .mc-mini-s::after {
    animation: none;
    opacity: 0.85;
  }
}
.ask-wrap {
  max-width: 820px;
}
.ask-top {
  padding-block: clamp(48px, 8vw, 104px) 18px;
  background:
    radial-gradient(
      60% 120% at 50% 0%,
      color-mix(in srgb, var(--ok) 7%, transparent),
      transparent 70%);
}
.ask-top .ask-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-items: center;
  text-align: center;
}
.ask-h {
  font: 700 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1.04 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--fg);
}
.ask-lede {
  max-width: 54ch;
  color: var(--fg-2);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.ask-form {
  width: 100%;
  margin-top: 10px;
}
.ask-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.55);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ask-field:focus-within {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line-strong));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent), 0 18px 40px -28px rgba(0, 0, 0, 0.55);
}
.ask-ic {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}
.ask-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 500 1.0625rem/1.4 var(--font-body);
  padding: 10px 0;
}
.ask-field input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.ask-kbd {
  flex: none;
  font: 600 0.75rem/1 var(--font-data);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 4px 7px;
}
.ask-field:focus-within .ask-kbd {
  display: none;
}
@media (hover: none) {
  .ask-kbd {
    display: none;
  }
}
.ask-go {
  flex: none;
}
.ask-go[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.ask-try {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 760px;
}
.ask-try-k {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.ask-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  border-radius: 999px;
  padding: 7px 13px;
  font: 500 0.8125rem/1.3 var(--font-body);
  cursor: pointer;
  text-align: left;
  transition:
    border-color .2s ease,
    color .2s ease,
    background-color .2s ease;
}
.ask-chip:hover {
  border-color: var(--line-strong);
  color: var(--fg);
  background: var(--surface);
}
.ask-chip.is-recent {
  border-style: dashed;
}
.ask-out {
  padding-block: 18px 8px;
}
.ask-out .ask-wrap {
  display: grid;
  gap: 16px;
}
.ask-out .ask-wrap:empty {
  display: none;
}
.ask-ans {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  animation: fd-in .3s ease both;
}
.ask-ans-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ask-ans-h h2 {
  font: 600 0.9375rem/1.4 var(--font-body);
  color: var(--muted);
  text-wrap: pretty;
}
.ask-clock {
  font-size: 0.75rem;
  color: var(--muted);
}
.ask-lead {
  font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.4 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}
.ask-lead.is-none {
  font-size: 1.125rem;
  color: var(--fg-2);
}
.ask-quote {
  margin: 0;
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-left: 3px solid var(--ok);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--ok) 6%, transparent);
}
.ask-quote blockquote {
  margin: 0;
  font: 500 0.9688rem/1.6 var(--font-body);
  color: var(--fg);
  quotes: "“" "”";
  text-wrap: pretty;
}
.ask-quote blockquote::before {
  content: open-quote;
}
.ask-quote blockquote::after {
  content: close-quote;
}
.ask-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
}
.ask-ref {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
}
.ask-ref .data {
  color: var(--fg-2);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ask-man {
  font: 700 0.625rem/1 var(--font-data);
  letter-spacing: 0.14em;
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 5px;
  padding: 3px 5px;
  align-self: center;
}
.ask-man.is-fctm {
  color: var(--instr);
  border-color: color-mix(in srgb, var(--instr) 45%, transparent);
}
.ask-quote:has(.is-fctm) {
  border-left-color: var(--instr);
  background: color-mix(in srgb, var(--instr) 6%, transparent);
}
.ask-ref-t {
  overflow-wrap: anywhere;
}
.ask-more {
  font-size: 0.75rem;
  color: var(--fg-2);
}
.ask-ctx {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.ask-ctx p {
  font-size: 0.8438rem;
  line-height: 1.65;
  color: var(--fg-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ask-ctx mark {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: var(--fg);
  border-radius: 3px;
  padding: 0 2px;
}
.ask-ctx .ask-ctx-k {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ask-pts {
  display: grid;
  gap: 10px;
  padding-top: 6px;
}
.ask-pts ol {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pt;
}
.ask-pts li {
  display: grid;
  gap: 8px;
  padding-left: 30px;
  position: relative;
  counter-increment: pt;
}
.ask-pts li::before {
  content: counter(pt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.6875rem/1 var(--font-data);
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
}
.ask-pt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}
.ask-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--fg-2);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ask-tick {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  position: relative;
}
.ask-tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ask-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.ask-note.is-warn {
  color: var(--caution);
}
.ask-tail {
  display: grid;
  gap: 14px;
}
.ask-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ask-read summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.ask-read[open] summary {
  margin-bottom: 10px;
}
.ask-src {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ask-src li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.ask-src p {
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.ask-src .ask-src-p {
  font-size: 0.6875rem;
  color: var(--muted);
}
.ask-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--muted);
}
.ask-copy {
  font-size: 0.75rem;
  color: var(--fg-2);
  overflow-wrap: anywhere;
  text-align: left;
}
.ask-acts {
  display: flex;
  gap: 8px;
}
.ask-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.ask-reading-l {
  color: var(--muted);
}
.ask-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  animation: ask-pulse 1.2s ease-in-out infinite;
}
.ask-skel {
  display: grid;
  gap: 10px;
}
.ask-skel i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background:
    linear-gradient(
      90deg,
      var(--line) 0%,
      var(--line-strong) 50%,
      var(--line) 100%);
  background-size: 200% 100%;
  animation: ask-shim 1.4s linear infinite;
}
.ask-skel i:nth-child(1) {
  width: 92%;
  height: 20px;
}
.ask-skel i:nth-child(2) {
  width: 76%;
}
.ask-skel i:nth-child(3) {
  width: 54%;
}
@keyframes ask-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ask-shim {
  to {
    background-position: -200% 0;
  }
}
.ask-fold {
  all: unset;
  cursor: pointer;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.ask-fold:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.ask-ans.is-folded .ask-fold {
  color: var(--fg-2);
}
.ask-deck-w {
  color: var(--muted);
}
.ask-ans.is-folded {
  gap: 6px;
  cursor: pointer;
  padding-block: 14px;
}
.ask-ans.is-folded > :not(.ask-ans-h):not(.ask-lead) {
  display: none;
}
.ask-ans.is-folded .ask-lead {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.ask-how {
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px);
}
.ask-how .ask-wrap {
  display: grid;
  gap: 14px;
}
.ask-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ask-steps li {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.ask-steps b {
  display: block;
  color: var(--fg);
  font-family: var(--font-display);
  margin-bottom: 4px;
}
.ask-fine {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 80ch;
}
@media (max-width: 700px) {
  .ask-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .ask-field {
    padding-left: 14px;
  }
  .ask-kbd {
    display: none;
  }
  .ask-go > span:first-child {
    display: none;
  }
  .ask-field {
    padding: 6px;
    padding-left: 14px;
    gap: 8px;
  }
  .ask-form .ask-go {
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    gap: 0;
  }
  .ask-form .ask-go > .arrow {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .ask-try {
    justify-content: flex-start;
  }
  .ask-top .ask-wrap {
    text-align: left;
    justify-items: start;
  }
}
.ask.is-asked .ask-top {
  padding-block: 24px 8px;
  background: none;
}
.ask.is-asked .ask-top .eyebrow,
.ask.is-asked .ask-lede {
  display: none;
}
.ask.is-asked .ask-h {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  justify-self: start;
}
.ask.is-asked .ask-top .ask-wrap {
  text-align: left;
  justify-items: stretch;
  gap: 10px;
}
.ask.is-asked .ask-form {
  margin-top: 0;
}
.ask-top.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 128px) clamp(44px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
.ask-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0B0C0E;
  pointer-events: none;
}
.ask-photo picture,
.ask-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.ask-photo img {
  object-fit: cover;
  object-position: 60% 45%;
  filter: saturate(0.85) contrast(1.06) brightness(0.8);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.ask-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      70% 90% at 50% 50%,
      rgba(11, 12, 14, 0.62) 0%,
      rgba(11, 12, 14, 0.78) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.5) 0%,
      rgba(11, 12, 14, 0.15) 40%,
      rgba(11, 12, 14, 0.4) 100%);
}
.ask:not(.is-asked) .ask-top.has-photo .ask-wrap {
  --fg: #F2F3F5;
  --fg-2: #D6D9DE;
  --muted: rgba(242, 243, 245, 0.7);
  --line: rgba(242, 243, 245, 0.22);
  --line-strong: rgba(242, 243, 245, 0.34);
  --ok: #62B0F0;
  --surface: rgba(16, 17, 19, 0.72);
  --surface-2: rgba(255, 255, 255, 0.1);
  --invert-bg: #F2F3F5;
  --invert-fg: #111214;
  color: var(--fg);
  color-scheme: dark;
}
.ask:not(.is-asked) .ask-top.has-photo .ask-h {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.ask:not(.is-asked) .ask-top.has-photo .ask-field {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ask:not(.is-asked) .ask-top.has-photo .ask-chip {
  background: rgba(16, 17, 19, 0.45);
}
.ask.is-asked .ask-top.has-photo {
  padding-block: 24px 8px;
  border-bottom: 0;
}
.ask.is-asked .ask-photo {
  display: none;
}
@media (max-width: 860px) {
  .ask-photo img {
    object-position: 68% 45%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-photo img {
    animation: none;
  }
}
.ask.is-asked .ask-try {
  justify-content: flex-start;
}
@media (prefers-reduced-motion: reduce) {
  .ask-pulse,
  .ask-skel i {
    animation: none;
  }
}
.pp-hero {
  padding-block: clamp(52px, 8vw, 104px) clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      70% 90% at 85% 10%,
      color-mix(in srgb, var(--caution) 8%, transparent),
      transparent 70%),
    radial-gradient(
      60% 80% at 10% 100%,
      color-mix(in srgb, var(--ok) 6%, transparent),
      transparent 70%);
}
.pp-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: center;
}
.pp-hero-t {
  display: grid;
  gap: 18px;
}
.pp-hero-in .pp-tracks {
  grid-column: 1 / -1;
}
.pp-hv {
  position: relative;
  height: 520px;
}
.pp-hv-c {
  position: absolute;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: pp-hv-in .7s var(--ease-out) both;
}
.pp-hv-k {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-hv-int {
  top: 0;
  right: 0;
  width: 74%;
  transform: rotate(1.6deg);
  animation-delay: .05s;
}
.pp-hv-q {
  margin: 0;
  font: 600 0.9375rem/1.45 var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}
.pp-hv-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pp-hv-clock {
  font-size: 0.875rem;
  color: var(--caution);
}
.pp-hv-tag {
  font-size: 0.6875rem;
  color: var(--fg-2);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pp-hv-res {
  top: 196px;
  left: 0;
  width: 48%;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  transform: rotate(-2deg);
  z-index: 1;
  animation-delay: .15s;
}
.pp-hv-ring {
  position: relative;
  width: 86px;
  height: 86px;
}
.pp-hv-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pp-hv-ring circle {
  fill: none;
  stroke-width: 9;
}
.pp-hv-arc {
  stroke: var(--ok);
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 42.5;
}
.pp-hv-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 1.125rem/1 var(--font-display);
  color: var(--fg);
}
.pp-hv-rt {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.pp-hv-rt b {
  font: 700 1.125rem/1.1 var(--font-display);
  color: var(--fg);
}
.pp-hv-by {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pp-hv-by li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  color: var(--fg-2);
}
.pp-hv-by i {
  height: 5px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      var(--ok) var(--w),
      var(--surface-2) var(--w));
}
.pp-hv-crm {
  bottom: 0;
  right: 0;
  width: 58%;
  transform: rotate(1deg);
  z-index: 2;
  animation-delay: .25s;
}
.pp-hv-crm p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg);
}
.pp-hv-crm ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pp-hv-crm li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--fg-2);
}
.pp-hv-crm li.is-on {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
  background: var(--ok-soft);
  color: var(--fg);
}
.pp-hv-crm .pp-opt-k {
  width: 20px;
  height: 20px;
  font-size: 0.6875rem;
  flex: none;
}
@keyframes pp-hv-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.pp-hero-t .lede {
  max-width: 62ch;
}
.pp-hero.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: none;
}
.pp-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0B0C0E;
  pointer-events: none;
}
.pp-photo picture,
.pp-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.pp-photo img {
  object-fit: cover;
  object-position: 72% 40%;
  filter: saturate(0.8) contrast(1.04) brightness(0.86);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.pp-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 14, 0.9) 0%,
      rgba(11, 12, 14, 0.72) 40%,
      rgba(11, 12, 14, 0.3) 72%,
      rgba(11, 12, 14, 0.36) 100%),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0.3) 0%,
      rgba(11, 12, 14, 0) 35%,
      rgba(11, 12, 14, 0.2) 70%,
      rgba(11, 12, 14, 0.75) 100%);
}
.pp-hero.has-photo .pp-hero-in {
  --fg: #F2F3F5;
  --fg-2: #D6D9DE;
  --muted: rgba(242, 243, 245, 0.7);
  --line: rgba(242, 243, 245, 0.18);
  --line-strong: rgba(242, 243, 245, 0.3);
  --surface: rgba(17, 18, 21, 0.82);
  --surface-2: rgba(255, 255, 255, 0.12);
  --ok-soft: rgba(98, 176, 240, 0.16);
  --invert-bg: #F2F3F5;
  --invert-fg: #111214;
  --ok: #62B0F0;
  --caution: #F2A53A;
  color: var(--fg);
  color-scheme: dark;
}
.pp-hero.has-photo .h1 {
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.pp-hero.has-photo .pp-hv-c,
.pp-hero.has-photo .pp-track {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 1000px) {
  .pp-photo img {
    object-position: 80% 40%;
  }
  .pp-photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, 0.72) 0%,
        rgba(11, 12, 14, 0.64) 50%,
        rgba(11, 12, 14, 0.8) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-photo img {
    animation: none;
  }
}
.pp-tracks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 1240px) and (min-width: 1001px) {
  .pp-tracks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pp-tracks:empty {
  min-height: 176px;
}
@media (max-width: 1000px) {
  .pp-tracks:empty {
    min-height: 428px;
  }
}
@media (max-width: 1240px) and (min-width: 1001px) {
  .pp-tracks:empty {
    min-height: 364px;
  }
}
@media (max-width: 640px) {
  .pp-tracks:empty {
    min-height: 866px;
  }
}
.pp-track {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, transform .4s var(--ease-out);
}
.pp-track:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.pp-track-k {
  font: 600 0.75rem/1 var(--font-data);
  color: var(--muted);
  letter-spacing: .08em;
}
.pp-track b {
  font: 650 1.0625rem/1.3 var(--font-display);
  color: var(--fg);
}
.pp-track-l {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.pp-track-s {
  font-size: 0.75rem;
  color: var(--ok);
  margin-top: 6px;
}
.pp-sec {
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.pp-sec-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pp-sec-k {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  font: 600 0.875rem/1 var(--font-data);
  color: var(--fg-2);
}
.pp-sec-l {
  margin-top: 8px;
  color: var(--fg-2);
  font-size: 0.9688rem;
  line-height: 1.65;
  max-width: 72ch;
}
.pp-papers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pp-paper {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fg) 3%, var(--surface)),
      var(--surface));
  transition:
    border-color .3s ease,
    transform .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}
.pp-paper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--line-strong);
}
.pp-paper.is-pass::before {
  background: var(--ok);
}
.pp-paper.is-fail::before {
  background: var(--caution);
}
.pp-paper:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .6);
}
.pp-paper-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pp-paper-n {
  font: 700 1.5rem/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.pp-paper p {
  font-size: 0.9063rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-paper-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pp-best {
  color: var(--fg-2);
}
.pp-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.875rem/1 var(--font-display);
  color: var(--fg);
}
.pp-stamp {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font: 700 0.6875rem/1 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.pp-paper.is-pass .pp-stamp,
.pp-stamp.is-pass {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.pp-paper.is-fail .pp-stamp,
.pp-stamp.is-fail {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 50%, transparent);
  background: color-mix(in srgb, var(--caution) 10%, transparent);
}
.pp-stamp.is-big {
  height: 30px;
  padding: 0 14px;
  font-size: 0.75rem;
  justify-self: start;
}
.pp-blue {
  display: grid;
  gap: 10px;
}
.pp-blue-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.pp-blue-bar i {
  display: block;
  background: color-mix(in srgb, var(--ok) calc(30% + var(--k) * 10%), var(--line-strong));
}
.pp-blue-l {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-blue-l b {
  color: var(--fg-2);
}
.pp-int {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pp-int-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, transform .4s var(--ease-out);
}
.pp-int-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.pp-int-card.is-mock {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--instr) 8%, var(--surface)),
      var(--surface) 60%);
}
.pp-int-k {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-int-card h3 {
  font: 650 1.375rem/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.pp-int-card p {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.pp-int-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  color: var(--fg-2);
  text-transform: capitalize;
}
.pp-crm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.pp-scn {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, transform .4s var(--ease-out);
}
.pp-scn:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.pp-scn-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-phase {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caution);
}
.pp-scn h3 {
  font: 650 1.125rem/1.3 var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}
.pp-scn p {
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-scn-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.pp-scn-end {
  margin-left: auto;
  font-size: 0.75rem;
}
.pp-scn.is-good .pp-scn-end {
  color: var(--ok);
}
.pp-scn.is-poor .pp-scn-end {
  color: var(--warn);
}
.pp-scn.is-ok .pp-scn-end {
  color: var(--caution);
}
.pp-comp {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font: 700 0.6875rem/1 var(--font-data);
  letter-spacing: .06em;
  color: var(--instr);
  border: 1px solid color-mix(in srgb, var(--instr) 45%, transparent);
  background: color-mix(in srgb, var(--instr) 8%, transparent);
}
.pp-stages {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line-strong);
  margin-left: 18px;
}
.pp-stages > li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 22px 26px;
}
.pp-stage-n {
  position: absolute;
  left: -18px;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  color: var(--fg-2);
}
.pp-stages > li > div {
  grid-column: 2;
  display: grid;
  gap: 6px;
  padding-top: 6px;
}
.pp-stages h3 {
  font: 650 1.0625rem/1.3 var(--font-display);
  color: var(--fg);
}
.pp-stages p {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 70ch;
}
.pp-stages summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
@media (pointer: coarse) {
  .pp-stages summary {
    padding: 12px 0;
  }
}
.pp-stage-d {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 10px;
}
.pp-stage-d ul,
.pp-tips,
.pp-comp-c ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-star {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-star-g {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pp-star-g > div {
  display: grid;
  gap: 4px;
  align-content: start;
}
.pp-star-g b {
  font: 700 1.75rem/1 var(--font-display);
  color: var(--ok);
}
.pp-star-g span {
  font: 600 0.8125rem/1.3 var(--font-display);
  color: var(--fg);
}
.pp-star-g p {
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-comps {
  display: grid;
  gap: 12px;
}
.pp-comps-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pp-comp-c {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.pp-comp-c summary {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.9063rem;
  color: var(--fg);
  list-style: none;
}
.pp-comp-c summary::-webkit-details-marker {
  display: none;
}
@media (pointer: coarse) {
  .pp-comp-c {
    padding-block: 0;
  }
  .pp-comp-c summary {
    padding-block: 14px;
  }
  .pp-comp-c[open] {
    padding-bottom: 14px;
  }
}
.pp-comp-c summary b {
  color: var(--instr);
  font-size: 0.75rem;
  letter-spacing: .06em;
}
.pp-comp-c p {
  margin-top: 8px;
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-fine {
  font-size: 0.75rem;
  line-height: 1.6;
  padding-block: 8px 72px;
  max-width: 90ch;
}
.pp-view {
  padding-block: 24px 72px;
}
.pp-cover {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 860px;
}
.pp-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 6px 0;
}
.pp-rules > div {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-rules dt {
  font: 600 0.6875rem/1.3 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-rules dd {
  margin: 6px 0 0;
  font: 700 1.375rem/1 var(--font-display);
  color: var(--fg);
}
.pp-rule-l {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 70ch;
}
.pp-brief {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 4px 0;
}
.pp-brief > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-brief dt {
  font: 600 0.6875rem/1.6 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-brief dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg);
}
.pp-comp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.pp-comp-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
body.pp-focus .site-header,
body.pp-focus .site-footer {
  display: none;
}
.pp-xbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  margin-top: -24px;
}
.pp-xbar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
}
.pp-xtitle {
  font: 650 1rem/1 var(--font-display);
  color: var(--fg);
}
.pp-xexit {
  font-size: 0.8125rem;
  color: var(--muted);
}
.pp-clock {
  font: 700 1.25rem/1 var(--font-data);
  color: var(--fg);
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
}
.pp-xbar .pp-clock {
  margin-left: auto;
}
.pp-clock.is-low {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 50%, transparent);
}
.pp-clock.is-out {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}
.pp-xdone {
  font-size: 0.8125rem;
  color: var(--muted);
}
.pp-xgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
  padding-top: 28px;
}
.pp-xq {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-xk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pp-sys {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pp-xqt {
  font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.4 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}
.pp-kick {
  display: block;
  font: 600 0.6875rem/1.6 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caution);
  margin-bottom: 4px;
}
.pp-opts,
.pp-choices {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-opt,
.pp-choice {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  font: 500 1rem/1.45 var(--font-body);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.pp-opt:hover,
.pp-choice:hover {
  border-color: var(--fg-2);
}
.pp-opt.is-on {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-2));
}
.pp-opt-k {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  font: 700 0.8125rem/1 var(--font-data);
  color: var(--fg-2);
}
.pp-opt.is-on .pp-opt-k {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg);
}
.pp-xnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.pp-flag.is-on,
.pp-flag.is-on:hover {
  color: var(--caution);
  background: color-mix(in srgb, var(--caution) 12%, transparent);
  border-color: color-mix(in srgb, var(--caution) 55%, transparent);
}
.pp-keys {
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-map {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-map-g {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.pp-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-2);
  font: 600 0.75rem/1 var(--font-data);
  cursor: pointer;
  position: relative;
}
.pp-cell.is-ans {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--fg);
}
.pp-cell.is-flag::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caution);
}
.pp-cell.is-cur {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
.pp-map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.6875rem;
  color: var(--muted);
}
.pp-map-key span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
  border: 1px solid var(--line-strong);
  vertical-align: -1px;
}
.pp-map-key .is-ans::before {
  background: color-mix(in srgb, var(--ok) 30%, transparent);
}
.pp-map-key .is-flag::before {
  background: var(--caution);
  border-color: var(--caution);
  border-radius: 50%;
}
.pp-confirm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim, rgba(0, 0, 0, .55));
}
.pp-confirm-c {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
.pp-confirm-c h2 {
  font: 650 1.375rem/1.2 var(--font-display);
  color: var(--fg);
}
.pp-confirm-c p {
  color: var(--fg-2);
  line-height: 1.6;
}
.pp-res {
  display: grid;
  gap: 28px;
  max-width: 980px;
}
.pp-res-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.pp-res-t {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.pp-ring.is-fail .tq-ring-fg {
  stroke: var(--caution);
  filter: none;
}
.pp-ring .tq-ring-n b {
  font-size: 2.4rem;
}
.pp-by ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pp-by li {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 54px;
  gap: 14px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.pp-by-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.pp-by-bar i {
  display: block;
  height: 100%;
  background: var(--ok);
}
.pp-by li.is-none .pp-by-bar {
  background: color-mix(in srgb, var(--warn) 25%, var(--line));
}
.pp-by .data {
  text-align: right;
}
.pp-revs {
  display: grid;
  gap: 14px;
}
.pp-revs-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pp-rev {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-rev-i {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
}
.pp-rev-i.is-right {
  border-left-color: var(--ok);
}
.pp-rev-i.is-wrong {
  border-left-color: var(--warn);
}
.pp-rev-k {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-rev-v {
  margin-left: auto;
  font: 700 0.6875rem/1 var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.is-right .pp-rev-v {
  color: var(--ok);
}
.is-wrong .pp-rev-v {
  color: var(--warn);
}
.pp-rev-q {
  font: 600 1.0625rem/1.45 var(--font-display);
  color: var(--fg);
}
.pp-rev-o {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-rev-o li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 0.9063rem;
  color: var(--fg-2);
  padding: 6px 8px;
  border-radius: 8px;
}
.pp-rev-o li .pp-opt-k {
  width: 24px;
  height: 24px;
  font-size: 0.6875rem;
}
.pp-rev-o li.is-a {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--fg);
}
.pp-rev-o li.is-mine {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.pp-rev-o em {
  font-style: normal;
  font: 700 0.625rem/1 var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-rev-o li.is-a em {
  color: var(--ok);
}
.pp-rev-o li.is-mine em {
  color: var(--warn);
}
.pp-why {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  display: grid;
  gap: 6px;
}
.pp-why p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.pp-why .pp-why-r {
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-iv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 920px;
}
.pp-iv-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pp-filter {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-filter::-webkit-scrollbar {
  display: none;
}
.pp-filter button {
  flex: none;
}
@media (pointer: coarse) {
  .pp-filter button,
  .pp-revs-h .seg button {
    min-height: 44px;
  }
}
.pp-iq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 359px) {
  .pp-iq-btns .btn {
    min-width: 0;
    white-space: normal;
    text-align: left;
  }
}
.pp-iq-card {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-iq-q {
  font: 600 clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem)/1.3 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
}
.pp-iq-how {
  font-size: 0.9063rem;
  color: var(--fg-2);
}
.pp-qclock {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-ans-w {
  display: grid;
  gap: 8px;
}
.pp-ans,
.pp-starp textarea {
  width: 100%;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  padding: 12px 14px;
  font: 400 0.9375rem/1.55 var(--font-body);
}
.pp-ans:focus,
.pp-starp textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ok) 50%, transparent);
  outline-offset: 1px;
}
.pp-ans-f {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-ans-n {
  font-size: 0.75rem;
}
.pp-mic[aria-pressed=true] {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
}
.pp-iq-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-starp summary {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.pp-starp-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pp-starp label {
  display: grid;
  gap: 4px;
}
.pp-starp label b {
  font: 700 1rem/1 var(--font-display);
  color: var(--ok);
}
.pp-starp label span {
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-model {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line));
  background: var(--surface);
  scroll-margin-top: 90px;
}
.pp-model .tr-k {
  margin-top: 8px;
}
.pp-why-t {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
}
.pp-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kp;
}
.pp-tick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
}
.pp-tick input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--ok);
}
.pp-tick > div {
  display: grid;
  gap: 6px;
}
.pp-tick p {
  font-size: 0.9688rem;
  line-height: 1.55;
  color: var(--fg);
}
.pp-quote {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--ok);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--ok) 6%, transparent);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-quote::before {
  content: "“";
}
.pp-quote::after {
  content: "”";
}
.pp-ref {
  font-size: 0.75rem;
  color: var(--muted);
}
.pp-ref b {
  color: var(--ok);
  font: 700 0.625rem/1 var(--font-data);
  letter-spacing: .12em;
}
.pp-fu,
.pp-pit {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.9063rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-pit li::marker {
  color: var(--warn);
}
.pp-outline {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-2);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
}
.pp-coach {
  display: grid;
  gap: 12px;
}
.pp-coach:not(:empty) {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--instr) 35%, var(--line));
  background: color-mix(in srgb, var(--instr) 5%, var(--surface));
}
.pp-coach ul {
  margin: 4px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.9063rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.pp-coach-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--fg);
}
.pp-score {
  font: 700 1.25rem/1 var(--font-display);
  color: var(--instr);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--instr) 45%, transparent);
}
.pp-coach-busy {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-2);
}
.pp-coach-next {
  font-size: 0.9375rem;
  color: var(--fg);
}
.pp-corr li b {
  color: var(--warn);
  font-weight: 600;
}
.pp-qnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pp-mock {
  display: grid;
  gap: 12px;
  max-width: 920px;
}
.pp-mock-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pp-mock-bar {
  display: flex;
  gap: 6px;
}
.pp-mock-bar i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}
.pp-mock-bar i.is-done {
  background: var(--ok);
}
.pp-mock-bar i.is-cur {
  background: var(--fg);
}
.pp-mock-f {
  max-width: 920px;
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}
.pp-mock-l {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-mock-l li {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-mock-l .pp-mock-q {
  font: 600 1rem/1.45 var(--font-display);
  color: var(--fg);
}
.pp-mock-s {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
  align-items: start;
}
.pp-mock-s > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.pp-mock-said p {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pp-mock-pts {
  display: grid;
  gap: 6px;
}
.pp-mock-pts p {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.pp-mock-pts p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
}
.pp-mock-pts p.is-said {
  color: var(--fg);
}
.pp-mock-pts p.is-said::before {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  border-color: var(--ok);
}
.pp-mock-pts p.is-said::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 3px;
  height: 6px;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pp-corr-q {
  margin: 8px 0 4px;
}
.pp-corr-q blockquote {
  font-size: 0.875rem;
}
.pp-paper .pp-paper-note {
  font-size: 0.8125rem;
  color: var(--caution);
}
.pp-note {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.pp-note.is-warn {
  color: var(--caution);
}
.pp-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-node:focus,
.pp-end:focus,
.pp-xqt:focus {
  outline: none;
}
.pp-node:focus-visible,
.pp-end:focus-visible,
.pp-xqt:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}
.pp-crm-v {
  display: grid;
  gap: 18px;
}
.pp-crm-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.pp-crm-h b {
  font: 650 1rem/1.3 var(--font-display);
  color: var(--fg);
}
.pp-crm-h .data {
  margin-left: auto;
}
.pp-crm-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.pp-node,
.pp-end {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-node-t {
  font: 400 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)/1.75 var(--font-read, var(--font-body));
  color: var(--fg);
  text-wrap: pretty;
  white-space: pre-line;
}
.pp-fb {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--instr);
}
.pp-fb p {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.pp-choice {
  padding: 16px 18px;
}
.pp-choice:hover {
  background: color-mix(in srgb, var(--fg) 4%, var(--bg-2));
}
.pp-trail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pp-trail ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}
.pp-trail li p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.pp-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.pp-delta {
  font: 700 0.625rem/1 var(--font-data);
  letter-spacing: .06em;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--line);
  color: var(--fg-2);
}
.pp-delta.is-up {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}
.pp-delta.is-down {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
}
.pp-end {
  border-top: 3px solid var(--line-strong);
}
.pp-end.is-good {
  border-top-color: var(--ok);
}
.pp-end.is-poor {
  border-top-color: var(--warn);
}
.pp-end.is-ok {
  border-top-color: var(--caution);
}
.pp-score-l {
  display: grid;
  gap: 10px;
}
.pp-cbars {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-cbars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.pp-cbar {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.pp-cbar i {
  display: block;
  height: 100%;
  background: var(--ok);
}
.pp-cbar.is-neg i {
  background: var(--warn);
}
.pp-cbars b {
  text-align: right;
  color: var(--fg);
}
.pp-debrief {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pp-debrief p,
.pp-debrief li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-2);
}
.pp-debrief ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.pp-model-d dl {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
}
.pp-model-d dl > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
}
.pp-model-d dt {
  font: 700 0.8125rem/1.5 var(--font-display);
  color: var(--fg);
}
.pp-model-d dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.pp-refs {
  display: grid;
  gap: 10px;
}
.ln-sub {
  margin-top: 6px;
  font: 600 0.75rem/1.4 var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caution);
}
.ln {
  display: grid;
  gap: 16px;
}
.ln-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.ln-fg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.ln-fk {
  flex: none;
  padding-top: 11px;
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ln-sel-w {
  position: relative;
}
.ln-sel-w::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border: solid var(--fg-2);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.ln-sel {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  max-width: 100%;
  padding: 0 36px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
}
.ln-sel:hover {
  border-color: var(--fg-2);
}
.ln-sel-w.is-on .ln-sel {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.ln-sel-w.is-on::after {
  border-color: var(--invert-fg);
}
.ln-sel option {
  color: var(--fg);
  background: var(--surface);
}
.ln-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ln-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}
@media (pointer: coarse) {
  .ln-chip {
    height: 44px;
  }
}
.ln-chip:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}
.ln-chip[aria-pressed=true] {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.ln-chip-n {
  font-size: 0.6875rem;
  color: var(--muted);
}
.ln-chip[aria-pressed=true] .ln-chip-n {
  color: inherit;
  opacity: .7;
}
.ln-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.ln-clear {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.ln-empty {
  padding: 28px;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  color: var(--fg-2);
  text-align: center;
}
.ln-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ln-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition:
    border-color .3s ease,
    transform .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}
.ln-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -34px rgba(0, 0, 0, .55);
}
.ln-card:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.ln-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ln-ph {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ln-min {
  font-size: 0.75rem;
  color: var(--muted);
}
.ln-card h3 {
  font: 650 1.125rem/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.ln-card-sys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.8438rem;
  color: var(--fg-2);
}
.ln-fleet {
  font: 600 0.6875rem/1.7 var(--font-data);
  letter-spacing: .06em;
  color: var(--instr);
}
.ln-card-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  align-self: end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}
.ln-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.8438rem/1 var(--font-display);
  color: var(--fg);
}
.ln-done {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ok);
}
.ln-done-i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok-soft);
}
.ln-done-i svg {
  width: 12px;
  height: 12px;
}
.ln-card.is-done::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--ok) 55%, transparent);
}
.ln-card.is-clean::before {
  background: var(--ok);
}
.ln-lvl {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font: 600 0.6875rem/1 var(--font-body);
  color: var(--fg-2);
}
.ln-lvl.is-cmd {
  color: var(--instr);
  border-color: color-mix(in srgb, var(--instr) 45%, transparent);
  background: var(--instr-soft);
}
.ln-more {
  display: flex;
  justify-content: center;
}
.ln-prof {
  display: inline-block;
  width: 52px;
  height: 14px;
  flex: none;
}
.ln-prof svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ln-prof-p {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ln-prof-h {
  fill: color-mix(in srgb, var(--caution) 22%, transparent);
}
.ln-prof-d {
  fill: var(--caution);
}
.ln-v {
  display: grid;
  gap: 18px;
}
.ln-v-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.ln-v-k {
  font: 600 0.6875rem/1 var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ln-v-n {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--muted);
}
.ln-dots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ln-dots li {
  width: 28px;
  height: 5px;
  border-radius: 3px;
  background: var(--line-strong);
}
.ln-dots li.is-cur {
  background: var(--fg);
}
.ln-dots li.is-right {
  background: var(--ok);
}
.ln-dots li.is-wrong {
  background: var(--warn);
}
.ln-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-2);
}
.ln-g {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ln-brief {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  border-radius: 20px;
  overflow: hidden;
  color-scheme: dark;
  --b-fg: #ECEEF1;
  --b-fg2: #B9BEC6;
  --b-mut: rgba(236, 238, 241, .58);
  --b-line: rgba(236, 238, 241, .12);
  background:
    radial-gradient(
      120% 70% at 100% 0%,
      rgba(242, 165, 58, .07),
      transparent 60%),
    linear-gradient(
      180deg,
      #1B1D21,
      #141518);
  border: 1px solid #2A2D33;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .7);
}
.ln-brief-s {
  display: none;
}
.ln-brief-b {
  display: grid;
  gap: 16px;
  padding: 22px;
}
.ln-brief-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ln-brief .ln-prof {
  width: 64px;
  height: 17px;
}
.ln-brief .ln-prof-p {
  stroke: rgba(236, 238, 241, .3);
}
.ln-brief .ln-prof-d {
  fill: #F2A53A;
}
.ln-brief .ln-prof-h {
  fill: rgba(242, 165, 58, .22);
}
.ln-brief-t {
  font: 700 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}
.ln-brief-ph {
  font: 600 0.75rem/1 var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F2A53A;
}
.ln-brief .ln-lvl {
  margin-left: auto;
  color: var(--b-fg2);
  border-color: rgba(236, 238, 241, .22);
}
.ln-brief .ln-lvl.is-cmd {
  color: #4FD1E8;
  border-color: rgba(79, 209, 232, .45);
  background: rgba(79, 209, 232, .08);
}
.ln-brief-m {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 6px 22px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--b-line);
}
.ln-brief-m dt {
  font: 600 0.625rem/1.2 var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--b-mut);
}
.ln-brief-m dd {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--b-fg);
}
.ln-setup {
  font: 400 1rem/1.7 var(--font-read, var(--font-body));
  color: var(--b-fg);
  text-wrap: pretty;
}
.ln-ecam {
  font: 600 0.88em/1 var(--font-data);
  letter-spacing: .03em;
  color: #F5B65A;
}
.ln-log {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--b-line);
}
.ln-log li {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(236, 238, 241, .16);
}
.ln-log li.is-new {
  border-left-color: #F2A53A;
}
.ln-log-k {
  font-size: 0.6875rem;
  letter-spacing: .08em;
  color: var(--b-mut);
}
.ln-log p {
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--b-fg2);
}
.ln-log li.is-new p {
  color: var(--b-fg);
}
.ln-q,
.ln-res {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.ln-q:focus,
.ln-res:focus,
.ln-qt:focus,
.ln-fb:focus {
  outline: none;
}
.ln-qt {
  font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.4 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: pretty;
}
.ln-opt {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ln-opt:disabled {
  cursor: default;
  color: var(--fg);
}
.ln-opt:disabled:hover {
  border-color: var(--line-strong);
}
.ln-opt .pp-opt-k svg {
  width: 15px;
  height: 15px;
}
.ln-opt.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-2));
}
.ln-opt.is-right .pp-opt-k {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg);
}
.ln-opt.is-wrong {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-2));
}
.ln-opt.is-wrong .pp-opt-k {
  background: var(--warn);
  border-color: var(--warn);
  color: #fff;
}
.ln-opt.is-off {
  opacity: .58;
}
.ln-opt.is-right:disabled:hover {
  border-color: var(--ok);
}
.ln-opt.is-wrong:disabled:hover {
  border-color: var(--warn);
}
.ln-mine {
  font: 700 0.625rem/1 var(--font-data);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ln-fb {
  display: grid;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 16px);
  animation: ln-in .45s var(--ease-out) both;
}
@keyframes ln-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.ln-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 650 1.125rem/1.3 var(--font-display);
  color: var(--fg);
}
.ln-verdict-i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
}
.ln-verdict-i svg {
  width: 16px;
  height: 16px;
}
.ln-fb.is-right .ln-verdict-i {
  background: var(--ok-soft);
  color: var(--ok);
}
.ln-fb.is-wrong .ln-verdict-i {
  background: var(--warn-soft);
  color: var(--warn);
}
.ln-why {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  max-width: 72ch;
}
.ln-not {
  display: grid;
  gap: 10px;
}
.ln-not ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ln-not li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
}
.ln-not li .pp-opt-k {
  width: 24px;
  height: 24px;
  font-size: 0.6875rem;
}
.ln-not li.is-mine {
  box-shadow: inset 3px 0 0 var(--warn);
}
.ln-not-o {
  font: 600 0.875rem/1.45 var(--font-body);
  color: var(--fg);
}
.ln-not-r {
  margin-top: 3px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.ln-src {
  display: grid;
  gap: 8px;
  margin: 0;
}
.ln-src figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ln-then {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--caution) 7%, transparent),
      transparent 70%);
}
.ln-then p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg);
}
.ln-then .ln-ecam {
  color: var(--caution);
}
.ln-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.ln-res-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.ln-ring {
  width: clamp(112px, 14vw, 140px);
}
.ln-ring .tq-ring-n b {
  font-size: 2rem;
}
.ln-res-t {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.ln-res-l {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 56ch;
}
.ln-res-l2 {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ln-res-l2 li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
}
.ln-res-i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.ln-res-i svg {
  width: 13px;
  height: 13px;
}
.is-right > .ln-res-i {
  background: var(--ok-soft);
  color: var(--ok);
}
.is-wrong > .ln-res-i {
  background: var(--warn-soft);
  color: var(--warn);
}
.ln-res-q {
  font: 600 0.9375rem/1.45 var(--font-display);
  color: var(--fg);
}
.ln-res-a {
  margin-top: 3px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.ln-res-btns {
  gap: 10px;
}
@media (max-width: 1000px) {
  .ln-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ln-g {
    grid-template-columns: minmax(0, 1fr);
  }
  .ln-brief {
    position: static;
  }
  .ln-brief-s {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    cursor: pointer;
    list-style: none;
  }
  .ln-brief-s::-webkit-details-marker {
    display: none;
  }
  .ln-brief[open] .ln-brief-s {
    padding-bottom: 0;
  }
  .ln-brief-k {
    font: 600 0.6875rem/1 var(--font-data);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--b-mut);
  }
  .ln-brief-more {
    font-size: 0.8125rem;
    color: var(--b-fg2);
  }
  .ln-brief-more::after {
    content: " +";
  }
  .ln-brief[open] .ln-brief-more {
    display: none;
  }
}
@media (max-width: 640px) {
  .ln-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ln-bar {
    padding: 14px 0;
    border-radius: 14px;
    gap: 12px;
    overflow: hidden;
  }
  .ln-bar {
    display: grid;
  }
  .ln-fg {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .ln-fk {
    padding: 0 14px;
  }
  .ln-fg {
    align-items: stretch;
  }
  .ln-sel-w {
    margin: 0 14px;
  }
  .ln-sel {
    width: 100%;
  }
  .ln-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 14px;
    -webkit-overflow-scrolling: touch;
  }
  .ln-chips::-webkit-scrollbar {
    display: none;
  }
  .ln-dots li {
    width: 20px;
  }
  .ln-brief-b {
    padding: 18px;
  }
  .ln-brief-m {
    grid-template-columns: repeat(2, auto);
  }
  .ln-res-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .ln-not li {
    padding: 10px 12px;
  }
  .ln-q,
  .ln-res {
    padding: 20px 16px;
    gap: 16px;
  }
  .ln-opt {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    font-size: 0.9688rem;
  }
  .ln-opt .ln-mine {
    grid-column: 2;
    margin-top: -4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ln-card,
  .ln-chip {
    transition: none;
  }
  .ln-card:hover {
    transform: none;
  }
  .ln-fb {
    animation: none;
  }
}
@media (max-width: 1000px) {
  .pp-hero-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-hv {
    display: none;
  }
  .pp-tracks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-track:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .pp-papers,
  .pp-int {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-comps-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-xgrid,
  .pp-crm-g {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-map,
  .pp-trail {
    position: static;
  }
  .pp-map-g {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pp-tracks,
  .pp-comps-g,
  .pp-star-g,
  .pp-stage-d,
  .pp-starp-g {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-sec-h {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .pp-res-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .pp-by li {
    grid-template-columns: minmax(0, 1fr) 80px 44px;
  }
  .pp-brief > div,
  .pp-model-d dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .pp-map-g {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .pp-xbar-in {
    gap: 10px;
  }
  .pp-xmore {
    display: none;
  }
  .pp-xtitle {
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .pp-xbar .pp-clock {
    font-size: 1.0625rem;
    padding: 5px 9px;
  }
  .pp-xdone {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .pp-xnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .pp-xnav .btn {
    justify-content: center;
    padding-inline: 8px;
    white-space: normal;
    text-align: center;
  }
  .pp-keys {
    display: none;
  }
  .pp-mock-s {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (hover: none) {
  .pp-keys {
    display: none;
  }
}
@media (pointer: coarse) {
  .prep .btn-sm {
    min-height: 44px;
  }
  .prep .back-link {
    padding: 4px 16px 4px 4px;
  }
  .prep .back-link-ic {
    width: 36px;
    height: 36px;
  }
  .pp-xexit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pp-ans,
  .pp-starp textarea {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  .ln-chips {
    padding-right: 36px;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 14px,
        #000 calc(100% - 36px),
        transparent);
    mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 14px,
        #000 calc(100% - 36px),
        transparent);
  }
  .pp-res-top {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px 20px;
    align-items: center;
    justify-items: stretch;
  }
  .pp-res-top > .pp-res-t {
    display: contents;
  }
  .pp-res-top > .pp-ring {
    width: 104px;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .pp-res-top > .pp-ring .tq-ring-n b {
    font-size: 1.75rem;
  }
  .pp-res-top .pp-stamp {
    grid-column: 2;
    justify-self: start;
    align-self: end;
  }
  .pp-res-top h1 {
    grid-column: 2;
    align-self: start;
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.2;
  }
  .pp-res-top .lede,
  .pp-res-top .cluster {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hv-c {
    animation: none;
  }
  .pp-paper,
  .pp-track,
  .pp-int-card,
  .pp-scn {
    transition: none;
  }
  .pp-paper:hover,
  .pp-track:hover,
  .pp-int-card:hover,
  .pp-scn:hover {
    transform: none;
  }
}
.tr-tile.is-early {
  --acc: var(--fg-2);
}
.tr-tile.is-early .tr-pct {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg-2);
}
.tr-recall {
  display: block;
  margin-top: 4px;
  color: var(--fg-2);
}
.tr-recall b {
  color: var(--ok);
}
.tr-len button {
  min-width: 40px;
}
.tr-rf {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
}
.tr-rf b {
  color: var(--muted);
  font-weight: 600;
}
@media (pointer: coarse) {
  .tr-rf {
    position: relative;
  }
  .tr-rf::after {
    content: "";
    position: absolute;
    inset: -5px;
  }
}
.tr-rf[aria-pressed=true] {
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
  color: var(--fg);
}
.tr-rf[aria-pressed=true] b {
  color: var(--ok);
}
.tr-detail-b {
  gap: 8px;
}
.tr-plan-p {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.tr-plan-p b {
  color: var(--fg);
}
.tr-plan-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 10px;
}
.tr-plan-f input[type=date] {
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px 10px;
  color-scheme: inherit;
}
.sched-r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.sched-q {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sched-conf button {
  font-size: 0.8125rem;
}
.sched-conf .is-guess[aria-pressed=true] {
  background: var(--warn);
  color: #fff;
}
.sched-conf .is-unsure[aria-pressed=true] {
  background: var(--caution);
  color: #121315;
}
.sched-conf .is-surewrong[aria-pressed=true] {
  background: var(--warn);
  color: #fff;
}
.qreveal {
  margin-top: 4px;
}
.qflag {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font: inherit;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    transform .2s ease;
}
.qflag-ic {
  display: grid;
  place-items: center;
}
.qflag-ic svg {
  display: block;
}
.qflag-f {
  transition: fill .2s ease;
}
.qflag-t {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.qflag:hover {
  color: var(--fg);
  border-color: var(--fg-2);
  background: var(--surface-2);
}
.qflag:active {
  transform: scale(0.94);
}
.qflag[aria-pressed=true] {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 55%, transparent);
  background: var(--caution-soft);
}
.qflag[aria-pressed=true] .qflag-f {
  fill: currentColor;
}
.qflag.is-pop .qflag-ic {
  animation: qflag-pop .38s cubic-bezier(.3, 1.6, .5, 1);
}
@media (pointer: coarse) {
  .qflag::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
  }
}
@keyframes qflag-pop {
  40% {
    transform: scale(1.22) rotate(-6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qflag.is-pop .qflag-ic {
    animation: none;
  }
}
.qtools-w {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.qtools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qtool {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  text-decoration: none;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease;
}
.qtool-ic {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color .2s ease;
}
.qtool:hover,
.qtool[aria-expanded=true] {
  color: var(--fg);
  border-color: var(--fg-2);
  background: var(--surface-2);
}
.qtool:hover .qtool-ic,
.qtool[aria-expanded=true] .qtool-ic {
  color: var(--fg);
}
.qnote-in,
.qrep textarea {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 12px;
  resize: vertical;
}
.qrep {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}
.qrep > b {
  font-size: 0.875rem;
}
.qrep-k {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qrep-k button {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}
.qrep-k button[aria-pressed=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: transparent;
}
.qrep-to {
  font-size: 0.75rem;
  margin: 0;
}
.qrep-done {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ok);
}
.tq-review li.is-guess .tq-rv-mark {
  background: var(--caution);
}
.tq-rv-why {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 6px 0 0;
}
.kb {
  padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 88px);
}
.kb-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 980px;
}
.kbb-row .seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  justify-self: start;
}
.kbb-row .seg::-webkit-scrollbar {
  display: none;
}
.kbb-row .seg button {
  flex: none;
}
.kbb-row {
  min-width: 0;
}
@media (max-width: 720px) {
  .kbb-row #kbb-what {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    padding: 0;
    overflow: visible;
  }
  .kbb-row #kbb-what button {
    border: 1px solid var(--line-strong);
    padding: 9px 14px;
    font-size: 0.875rem;
    min-height: 40px;
  }
  .kbb-row #kbb-what [aria-pressed=true] {
    border-color: transparent;
  }
  .kbb-row #kbb-what button::after {
    inset: -2px 0;
  }
}
.kb-head {
  display: grid;
  gap: 8px;
}
.kb-lede {
  margin: 0;
  max-width: 62ch;
}
.kb-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 10px;
}
.kb-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
}
.kb-search:focus-within {
  border-color: var(--fg-2);
}
.kb-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 0;
}
.kb-sys select {
  width: 100%;
  height: 100%;
  min-height: 46px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0 12px;
}
.kb-status {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  justify-self: start;
}
.kb-status::-webkit-scrollbar {
  display: none;
}
.kb-status button {
  flex: none;
}
.kb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.kb-item details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.kb-item details[open] {
  border-color: var(--line-strong);
}
.kb-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.kb-item summary::-webkit-details-marker {
  display: none;
}
.kb-code {
  font-size: 0.75rem;
  color: var(--muted);
}
.kb-q {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}
.kb-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kb-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.kb-pill.is-known {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.kb-pill.is-learning {
  color: var(--fg-2);
}
.kb-pill.is-miss {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.kb-pill.is-flag {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, transparent);
}
.kb-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px 72px;
}
.kb-flag {
  display: flex;
  justify-content: flex-end;
}
.kb-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.kb-opts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--fg-2);
}
.kb-opts li.is-a {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
  background: var(--ok-soft);
  color: var(--fg);
}
.kb-opts em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ok);
  align-self: center;
}
.kb-mem,
.kb-nowhy {
  margin: 0;
  font-size: 0.8125rem;
}
.kb-body .qtools-w {
  margin-top: 0;
}
.kb-none {
  padding: 18px 4px;
  list-style: none;
}
.kb-more {
  display: flex;
  justify-content: center;
}
.kbb {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.kbb-row {
  display: grid;
  gap: 10px;
}
.kbb-sys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kbb-chip {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.kbb-chip b {
  color: var(--muted);
  font-weight: 600;
  margin-right: 2px;
}
.kbb-chip[aria-pressed=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: transparent;
}
.kbb-chip[aria-pressed=true] b {
  color: inherit;
  opacity: .7;
}
.kbb-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
@media (max-width: 640px) {
  .kb-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .kb-item summary {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 6px 10px;
  }
  .kb-code {
    grid-column: 1;
    grid-row: 1;
  }
  .kb-q {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .kb-pills {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }
  .kb-item summary .faq-plus {
    grid-column: 2;
    grid-row: 1;
  }
  .kb-body {
    padding: 0 14px 14px;
  }
}
.qwhy-not {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.qwhy-not b {
  color: var(--fg);
  font-weight: 600;
}
.qwhy-not.is-mine {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--warn-soft);
}
.qwhy-more {
  margin-top: 8px;
}
.qwhy-more summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
}
.qwhy-more summary:hover {
  color: var(--fg);
}
.qfleet {
  color: var(--instr);
  border-color: color-mix(in srgb, var(--instr) 45%, transparent);
}
.tr-fleet button {
  min-width: 44px;
}
.nav-solo {
  text-decoration: none;
}
.nav:not(.has-ink) .nav-solo.is-current::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
}
.mobile-nav .mnav-solo {
  padding-block: 12px;
}
.pilot-btn {
  color: var(--fg-2);
  text-decoration: none;
}
.pilot-btn svg {
  width: 20px;
  height: 20px;
}
.pilot-btn.is-current {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
html[data-me] .pilot-btn svg {
  display: none;
}
html[data-me] .pilot-btn::after {
  content: var(--me-i, "");
  font: 700 0.9375rem/1 var(--font-display);
  letter-spacing: 0;
  color: var(--fg);
}
html[data-me] .pilot-btn {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: var(--line-strong);
}
html[data-me=plus] .pilot-btn {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
html[data-me=pending] .pilot-btn {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  border-style: dashed;
}
.ins-src {
  margin-top: -2px;
}
.ins-src > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  cursor: pointer;
  list-style: none;
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ins-src > summary::-webkit-details-marker {
  display: none;
}
.ins-src > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
  margin-right: 2px;
}
.ins-src[open] > summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}
.ins-src > summary:hover {
  color: var(--fg-2);
}
.ins-src-q {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--steel) 55%, transparent);
}
.ins-q {
  margin: 0;
  display: grid;
  gap: 3px;
}
.ins-q blockquote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-2);
  font-style: italic;
  overflow-wrap: anywhere;
}
.ins-q figcaption {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.ins-q figcaption b {
  font-weight: 700;
  letter-spacing: .06em;
}
.ins-src-wait {
  font-size: 0.75rem !important;
  color: var(--muted) !important;
}
.ins-defs .def-v {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ins-neo {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px 3px;
  border-radius: 5px;
  vertical-align: 1px;
  font: 700 0.625rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid color-mix(in srgb, var(--steel) 55%, transparent);
  background: color-mix(in srgb, var(--steel) 10%, transparent);
}
.ins-go {
  gap: 2px;
}
.ins-go .eyebrow {
  margin-bottom: 4px;
}
.ins-go-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
}
.ins-go-row:hover,
.ins-go-row:focus-visible {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.ins-go-ic {
  display: grid;
  place-items: center;
  color: var(--steel);
}
.ins-go-ic svg {
  width: 20px;
  height: 20px;
}
.ins-go-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ins-go-t b {
  font: 600 0.875rem/1.3 var(--font-body);
}
.ins-go-t small {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ins-go-row .arrow {
  color: var(--muted);
  font-size: 0.8125rem;
}
.tour-pred {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.ins-body .tour-pred-q {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.9375rem;
}
.tour-pred-list {
  display: grid;
  gap: 6px;
}
.tour-pred-opt {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  text-align: left;
  font: 500 0.8125rem/1.45 var(--font-body);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tour-pred-opt:hover,
.tour-pred-opt:focus-visible {
  border-color: var(--fg-2);
  background: var(--surface-2);
}
.tour-pred-opt .key {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  font: 600 0.75rem/1 var(--font-data);
}
.tour-pred-skip {
  justify-self: start;
  min-height: 24px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.tour-pred-mine {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  font-size: 0.8125rem !important;
  color: var(--fg) !important;
}
.tour-verdict {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
}
.tour-verdict.is-right {
  background: var(--ok-soft);
}
.tour-verdict.is-wrong {
  background: var(--warn-soft);
}
.ins-body .tour-verdict-h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 600;
}
.tour-verdict-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font: 700 0.75rem/1 var(--font-body);
  color: #fff;
}
.tour-verdict.is-right .tour-verdict-ic {
  background: var(--ok);
}
.tour-verdict.is-wrong .tour-verdict-ic {
  background: var(--warn);
}
.tour-verdict b {
  color: var(--fg);
  font-weight: 600;
}
.qdeck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0 !important;
  font-size: 0.8125rem !important;
}
.qdeck-ic {
  display: inline-grid;
  place-items: center;
  color: var(--steel);
}
.qdeck a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.qdeck a:hover {
  text-decoration-color: currentColor;
}
.qdeck-place {
  font-weight: 500;
  color: var(--muted);
  white-space: pre;
}
.qdeck-sep {
  color: var(--muted);
}
.ask-deck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ask-deck-a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.fd-deck {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--steel) 45%, transparent);
  text-underline-offset: 3px;
}
.fd-deck:hover {
  text-decoration-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .ins-src > summary::before,
  .tour-pred-opt {
    transition: none;
  }
}
.lv-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: default;
}
.lv-k {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 9px;
  font: 600 0.625rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  flex: none;
}
.lv-pill.is-paused .lv-dot {
  background: var(--caution);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--caution) 18%, transparent);
}
.lv-b {
  height: 34px;
  min-width: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg-2);
  font: 600 0.8125rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.lv-b:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
}
.lv-b[aria-pressed=true] {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.lv-b:focus-visible,
.ph-b:focus-visible,
.lv-chip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.lv-pause {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.lv-pill.is-paused .lv-pause {
  width: 0;
  height: 0;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.lv-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: 600 0.875rem/1.4 var(--font-body);
  text-align: left;
  cursor: help;
}
.lv-chip:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.lv-chip[hidden] {
  display: none;
}
.lv-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  align-self: center;
}
.lv-held .lv-chip-dot {
  background: var(--muted);
}
.lv-t {
  flex: 1;
  min-width: 0;
}
.lv-note {
  flex: none;
  color: var(--muted);
  font: 500 0.75rem/1.4 var(--font-body);
}
.lv-note-i {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font: italic 600 0.6875rem/16px var(--font-body);
  text-align: center;
}
.ph-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ph-i {
  display: flex;
  min-width: 0;
}
.ph-b {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 6px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg-2);
  font: 600 0.75rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}
.ph-b > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-b:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.ph-b.is-here {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: transparent;
}
.ph-b[aria-disabled=true] {
  color: var(--muted);
  border-style: dashed;
}
.ph-lock {
  display: inline-flex;
  flex: none;
  width: 11px;
  height: 11px;
}
.ph-lock svg {
  width: 11px;
  height: 11px;
}
.ph-busy {
  display: none;
  margin: 0;
  font: 500 0.8125rem/1.45 var(--font-body);
  color: var(--muted);
}
.deck:not(.has-phases) .ph-strip {
  display: none;
}
.deck:not(.has-phases) .ph-busy {
  display: block;
}
@media (pointer: coarse) {
  .ph-b {
    height: 44px;
  }
  .lv-b {
    height: 40px;
  }
}
@media (max-width: 720px) {
  .lv-note-w {
    display: none;
  }
  .lv-note-i {
    display: inline-block;
  }
}
@media (max-width: 360px) {
  .lv-k-t {
    display: none;
  }
  .lv-b {
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-b,
  .lv-b {
    transition: none;
  }
}
.mf-src {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.mf-src:empty {
  display: none;
}
.tr-main .mf-src {
  justify-content: flex-start;
  text-align: left;
  justify-self: stretch;
}
.mf-src .mf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .7;
  flex: none;
}
.mf-src.is-own .mf-dot {
  background: var(--ok);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.mf-src.is-own {
  color: var(--fg-2);
}
.mf-src .mf-sep {
  opacity: .6;
}
.mf-src .mf-name {
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.mf-src .mf-open {
  color: var(--fg);
  font-weight: 600;
  min-height: 28px;
}
@media (pointer: coarse) {
  .mf-src .mf-open {
    min-height: 44px;
  }
}
.mf-src .mf-counts {
  flex-basis: 100%;
  color: var(--muted);
}
.ask-top .mf-src {
  margin-top: -4px;
}
.mf {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88vh, 860px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
.mf::backdrop {
  background: rgba(8, 9, 11, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mf[open] {
  animation: mf-in .42s cubic-bezier(.2, .8, .2, 1) both;
  will-change: transform, opacity;
}
.mf[open]::backdrop {
  animation: mf-veil .42s ease both;
}
.mf.is-closing {
  animation: mf-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
.mf.is-closing::backdrop {
  animation: mf-veil-out .26s ease both;
}
@keyframes mf-out {
  to {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
}
@keyframes mf-veil {
  from {
    opacity: 0;
  }
}
@keyframes mf-veil-out {
  to {
    opacity: 0;
  }
}
@keyframes mf-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.mf-is-open {
  overflow: hidden;
}
.mf-in {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vw, 30px);
}
.mf-head {
  display: grid;
  gap: 4px;
  position: relative;
  padding-right: 44px;
}
.mf-h {
  font: 700 clamp(1.5rem, 1.2rem + 1vw, 1.875rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}
.mf-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mf-x::before,
.mf-x::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.6px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}
.mf-x::after {
  transform: rotate(-45deg);
}
.mf-x:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}
.mf-body {
  display: grid;
  gap: 14px;
}
.mf-lede {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9688rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.mf-small {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.mf-warn {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--caution-soft);
  color: var(--fg);
  font-size: 0.875rem;
  line-height: 1.55;
  border-left: 3px solid var(--caution);
}
.mf-drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--bg-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.mf-drop:hover,
.mf-drop:focus-visible,
.mf-drop.is-over {
  border-color: color-mix(in srgb, var(--ok) 60%, var(--line-strong));
  background: color-mix(in srgb, var(--ok) 6%, var(--bg-2));
  outline: none;
}
.mf-drop:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.mf-drop-ic {
  color: var(--ok);
  margin-bottom: 4px;
}
.mf-drop b {
  font-size: 1rem;
}
.mf-drop span {
  color: var(--muted);
  font-size: 0.875rem;
}
.mf-drop u {
  color: var(--fg);
  text-underline-offset: 3px;
}
.mf-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mf-status {
  display: grid;
  gap: 2px;
  margin: 0;
}
.mf-status b {
  font-size: 1rem;
}
.mf-status span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.mf-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mf-bar i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--ok);
  border-radius: inherit;
  transition: width .25s ease;
}
.mf-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.mf-acts .linklike {
  font-size: 0.875rem;
}
.mf-again {
  position: relative;
  cursor: pointer;
}
.mf-sure {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-2);
  line-height: 1.6;
}
.mf-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
.mf-card > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mf-card b {
  overflow-wrap: anywhere;
}
.mf-card span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.mf-card .muted {
  color: var(--muted);
}
.mf-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ok-soft);
  position: relative;
  margin-top: 1px;
}
.mf-tick::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mf-sum {
  display: grid;
  gap: 8px;
}
.mf-sum p {
  margin: 0;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.mf-sum b {
  color: var(--fg);
}
.mf-sum .muted {
  font-size: 0.8125rem;
  color: var(--muted);
}
.mf-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--fg-2);
  cursor: pointer;
  line-height: 1.5;
}
.mf-opt input {
  margin-top: 3px;
  accent-color: var(--ok);
  width: 16px;
  height: 16px;
  flex: none;
}
.mf-priv {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.mf-priv li {
  position: relative;
  padding-left: 22px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.mf-priv li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 9px;
  height: 7px;
  border: 1.5px solid var(--steel);
  border-radius: 2px;
}
.mf-priv li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 5px;
  border: 1.5px solid var(--steel);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
@media (max-width: 640px) {
  .mf {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  .mf[open] {
    animation-name: mf-up;
  }
  .mf.is-closing {
    animation-name: mf-down;
  }
  @keyframes mf-down {
    to {
      transform: translateY(48px);
      opacity: 0;
    }
  }
  @keyframes mf-up {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .mf-in {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .mf-head .eyebrow {
    letter-spacing: 0.1em;
    font-size: 0.625rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mf[open],
  .mf[open]::backdrop,
  .mf.is-closing,
  .mf.is-closing::backdrop {
    animation: none;
  }
  .mf-bar i {
    transition: none;
  }
}
.mf-note {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--caution) 40%, transparent);
  background: var(--caution-soft);
}
.mf-note-h {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.mf-note-h b {
  color: var(--fg);
}
.mf-note-p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.mf-note-q {
  display: grid;
  gap: 6px;
}
.mf-quote {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--caution);
  display: grid;
  gap: 2px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.mf-full {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  max-height: 22em;
  overflow: auto;
}
.mf-full[hidden] {
  display: none;
}
.mf-full p {
  margin: 0;
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.mf-note-ref {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 0.75rem;
  color: var(--muted);
}
.mf-note-ref .data {
  color: var(--fg-2);
  font-weight: 600;
}
.mf-man,
.ask-man.is-own {
  font: 700 0.625rem/1 var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 5px;
  padding: 3px 5px;
  align-self: center;
}
.mf-note-ref .mf-man {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, transparent);
}
.mf-more {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--fg-2);
}
.mf-note-line {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--caution);
}
.mf-out {
  margin: 10px 0 0;
  font-size: 0.8125rem;
}
.kb-pill.is-out {
  color: var(--muted);
  border-style: dashed;
}
.kb-pill.is-diff {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, transparent);
}
.kb-item.is-out summary .kb-q {
  color: var(--muted);
}
.cr-mode {
  display: grid;
  gap: 6px;
  margin: 4px 0 2px;
}
.cr-seg {
  justify-self: start;
}
.ins-body .cr-seg {
  margin: -2px 0 2px;
}
.fl-item .cr-sub {
  color: var(--fg-2);
}
.deck-insp.is-cr {
  bottom: auto;
  max-height: calc(100% - 80px);
}
.deck-insp.is-cr .ins-body {
  padding-bottom: 18px;
}
.cr-card {
  display: grid;
  gap: 8px;
}
.ins-body .cr-k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: .26em;
}
.cr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
  animation: cr-rec 1.6s ease-in-out infinite;
}
@keyframes cr-rec {
  50% {
    opacity: .35;
  }
}
.cr-helped {
  letter-spacing: .08em;
  color: var(--caution);
  text-transform: none;
}
.cr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-clock {
  font: 700 2.75rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--fg);
  min-width: 4ch;
}
.cr-card.is-helped .cr-clock {
  font-size: 1.5rem;
}
.cr-flight {
  font: 600 0.6875rem/1.3 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ins-body .cr-line {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.cr-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cr-acts .linklike {
  min-height: 32px;
  font-size: 0.875rem;
}
.cr-acts .muted {
  color: var(--muted);
  font-weight: 400;
}
.cr-card.is-helped {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.ins-title .cr-t {
  color: var(--fg);
  font-weight: 600;
}
.ins-body .cr-pill {
  justify-self: start;
  margin: 4px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--caution-soft, rgba(242,165,58,.12));
  color: var(--caution);
  font: 700 0.875rem/1.2 var(--font-body);
}
.ins-body .cr-pill.is-full {
  background: var(--ok-soft);
  color: var(--ok);
}
.ins-body .cr-comps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  font: 600 0.75rem/1.3 var(--font-body);
  letter-spacing: .1em;
  color: var(--muted);
}
.cr-comps abbr {
  text-decoration: none;
  cursor: help;
}
.ins-body .cr-fine {
  margin: 0;
}
.deck-dock.is-big .dock-du canvas {
  width: 336px;
  height: 336px;
}
.dock-live {
  color: var(--ok);
  letter-spacing: .02em;
  text-transform: none;
}
.deck.has-cr .deck-dock,
.deck.has-cr.has-insp .deck-dock {
  right: 16px;
}
@media (max-height: 760px) {
  .deck-dock.is-big .dock-du canvas {
    width: 240px;
    height: 240px;
  }
}
.deck-cx {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(400px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  animation: deck-in .18s ease both;
}
.deck-cx[hidden] {
  display: none;
}
.deck-cx p {
  margin: 0;
}
.deck-cx .cx-k {
  color: var(--warn);
  letter-spacing: .26em;
}
.deck-cx .cx-h code {
  font: 700 1rem/1.35 var(--font-screen);
  letter-spacing: .02em;
  color: var(--fg);
  background: none;
  padding: 0;
}
.deck-cx .cx-h span {
  font-weight: 600;
}
.deck-cx .cx-p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.mi-group {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn) 5%, transparent);
}
.mi-group .mi-h {
  margin: 0 6px;
}
.mi-group .dd-menu-note {
  margin: 0 6px 4px;
}
.mi-item b {
  font-family: var(--font-screen);
}
.mi-item.is-off b {
  color: var(--muted);
}
.mi-lock {
  position: relative;
  width: 9px;
  height: 7px;
  margin: 3px 0 0;
  border-radius: 1.5px;
  background: currentColor;
  flex: none;
  opacity: .8;
}
.mi-lock::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: -5px;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.mi-group .mi-note {
  margin-top: 4px;
}
.deck-mem {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px 4px 16px;
  border-radius: 22px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.deck-mem[hidden] {
  display: none;
}
.mi-rec {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
  animation: cr-rec 1.6s ease-in-out infinite;
}
.mi-clock {
  font: 700 1.25rem/1 var(--font-screen);
  color: var(--warn);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}
.mi-aural {
  font: 700 0.8125rem/1.2 var(--font-screen);
  letter-spacing: .04em;
  color: var(--warn);
  max-width: 46vw;
}
.mi-aural:empty,
.mi-aural[hidden] {
  display: none;
}
.mi-x {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.mi-x:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
}
.mi-x:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 1px;
}
.deck.has-mem .deck-top,
.deck.has-mem .deck-welcome,
.deck.has-mem .deck-pointers,
.deck.has-mem .deck-state-wrap,
.deck.has-mem .deck-parts,
.deck.has-mem #deck-status,
.deck.has-mem #deck-time,
.deck.has-mem .ph-strip {
  visibility: hidden;
}
.mi-title .mi-t {
  color: var(--fg);
  font-weight: 600;
}
.ins-body .mi-cond {
  margin: 0;
}
.mi-cond code {
  font: 600 0.75rem/1.35 var(--font-screen);
  color: var(--fg-2);
  background: none;
  padding: 0;
}
.mi-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.mi-rows > li::before {
  display: none;
}
.mi-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.mi-row.is-bad,
.mi-row.is-order {
  border-color: color-mix(in srgb, var(--caution) 45%, var(--line));
  background: color-mix(in srgb, var(--caution) 8%, var(--surface));
}
.mi-row.is-na,
.mi-row.is-say {
  background: none;
  border-style: dashed;
}
.mi-mk {
  font: 700 0.875rem/1.35 var(--font-body);
  text-align: center;
  color: var(--muted);
}
.mi-row.is-ok .mi-mk {
  color: var(--ok);
}
.mi-row.is-bad .mi-mk,
.mi-row.is-order .mi-mk {
  color: var(--caution);
}
.mi-tx {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mi-tx code {
  font: 600 0.8125rem/1.35 var(--font-screen);
  letter-spacing: .02em;
  color: var(--fg);
  white-space: normal;
  overflow-wrap: anywhere;
  background: none;
  padding: 0;
}
.mi-tx small {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fg-2);
}
.mi-tx .mi-lead {
  color: var(--muted);
  font-family: var(--font-screen);
}
.mi-at {
  font-size: 0.75rem;
  color: var(--muted);
}
.ins-body .mi-sum {
  justify-self: start;
  margin: 4px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--caution) 12%, transparent);
  color: var(--caution);
  font: 700 0.875rem/1.2 var(--font-body);
}
.ins-body .mi-sum.is-clean {
  background: var(--ok-soft);
  color: var(--ok);
}
.pg-mem {
  margin: 0 0 10px;
}
.pg-mem:empty {
  display: none;
}
#pg-memory.pg-mem:empty {
  display: block;
  min-height: 182px;
}
.pg-mem-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line));
  background: var(--bg-2);
}
.pg-mem-card.is-done {
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
}
.pg-mem-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-soft);
}
.pg-mem-card.is-done .pg-mem-dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-soft);
}
.pg-mem-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pg-mem-t p {
  margin: 0;
}
.pg-mem-name {
  font: 700 0.9375rem/1.3 var(--font-screen);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.pg-cr-fine {
  margin: 10px 0 0;
}
@media (max-width: 999px) {
  .deck-insp.is-cr {
    max-height: 62%;
  }
  .deck-insp.is-peek .cr-seg {
    display: none;
  }
  .cr-clock {
    font-size: 2rem;
  }
  .deck.has-cr .deck-dock,
  .deck.has-cr.has-insp .deck-dock {
    right: 16px;
    bottom: calc(var(--sheet, 0px) + 64px);
  }
  .deck-mem {
    top: 8px;
    min-height: 40px;
  }
  .mi-aural {
    max-width: 52vw;
    font-size: 0.75rem;
  }
}
@media (max-width: 560px) {
  .pg-mem-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pg-mem-card > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-dot,
  .mi-rec {
    animation: none;
  }
  .deck-cx {
    animation: none;
  }
}
.deck {
  --ios: #8B7CF6;
  --ios-ink: #B9AEFF;
  --ios-soft: rgba(139, 124, 246, .16);
}
:root[data-theme=light] .deck-ios,
:root[data-theme=light] .deck-share,
:root[data-theme=light] .deck-inote,
:root[data-theme=light] .deck-lesson {
  --ios-ink: #5B4BD6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .deck-ios,
  :root:not([data-theme=dark]) .deck-share,
  :root:not([data-theme=dark]) .deck-inote,
  :root:not([data-theme=dark]) .deck-lesson {
    --ios-ink: #5B4BD6;
  }
}
.deck-share {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 72px 16px 16px;
  background: rgba(8, 9, 11, .42);
}
.deck-share[hidden],
.deck-q[hidden],
.deck-ios[hidden],
.ios-frame[hidden],
.deck-lesson[hidden],
.deck-frozen[hidden],
.deck-inote[hidden],
.sh-qrfull[hidden],
.sh-qr[hidden],
.sh-q-more[hidden],
.sh-exact[hidden] {
  display: none;
}
.sh-box {
  position: relative;
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 20px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  animation: insp-in .24s cubic-bezier(.2, .8, .2, 1) both;
}
.sh-box p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-2);
}
.sh-box .eyebrow {
  margin: 0;
  color: var(--muted);
}
.sh-sum {
  font-weight: 600;
  color: var(--fg) !important;
}
.sh-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sh-url,
.sh-box textarea,
.sh-box input[type=text],
.deck-ios input[type=text],
.deck-ios input[type=number],
.deck-ios select,
.sh-box select {
  min-width: 0;
  flex: 1;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font: 500 0.875rem/1.3 var(--font-body);
}
.sh-box textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.45;
}
.sh-url {
  font-family: var(--font-screen, monospace);
  font-size: 0.75rem;
  color: var(--fg-2);
}
.sh-k {
  font: 600 0.75rem/1.2 var(--font-body);
  letter-spacing: .04em;
  color: var(--muted);
}
.sh-q-more {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.sh-more {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.sh-more summary {
  cursor: pointer;
  font: 600 0.875rem/1.3 var(--font-body);
  color: var(--fg);
}
.sh-more[open] summary {
  margin-bottom: 10px;
}
.sh-qr {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.sh-qr canvas {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  border-radius: 10px;
}
.sh-embed {
  font-family: var(--font-screen, monospace);
  font-size: 0.6875rem !important;
}
.sh-qrfull {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: #FFFFFF;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 16px;
}
.sh-qrfull canvas {
  width: min(78vmin, 720px);
  height: min(78vmin, 720px);
  image-rendering: pixelated;
}
.sh-qrfull-k {
  margin: 0;
  font: 600 1rem/1.4 var(--font-body);
  color: #17181B;
  text-align: center;
}
.deck-q {
  position: absolute;
  z-index: 7;
  left: 16px;
  top: 208px;
  width: min(360px, calc(100% - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--caution) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
}
.deck-q .eyebrow {
  margin: 0;
  color: var(--caution);
}
.deck-q-t {
  margin: 0;
  font: 600 1rem/1.4 var(--font-body);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.deck-q p.muted {
  margin: 0;
  font-size: 0.8125rem;
}
.q-veil {
  border-top-style: dashed;
}
html.is-embed .site-header,
html.is-embed .site-footer,
html.is-embed .mobile-nav,
html.is-embed .deck-welcome,
html.is-embed .deck-find-btn,
html.is-embed .deck-train-wrap,
html.is-embed .deck-flight-wrap,
html.is-embed .deck-mini,
html.is-embed .deck-wdock {
  display: none !important;
}
html.is-embed .deck {
  height: 100vh;
  height: 100svh;
}
.deck-embed-full {
  position: absolute;
  z-index: 8;
  left: 12px;
  bottom: 12px;
  text-decoration: none;
}
.deck-embed {
  margin: 28px 0;
}
.deck-embed-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(
      120% 90% at 50% 38%,
      #1A1C20,
      #0E0F12);
  display: grid;
  place-items: center;
}
.deck-embed-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.deck-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.deck-embed-go {
  position: relative;
}
.deck-embed figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}
.deck-ios {
  position: absolute;
  z-index: 7;
  top: 64px;
  right: 16px;
  bottom: 16px;
  width: 380px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--ios);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.deck.is-ios .deck-insp {
  display: none;
}
.ios-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 52px 10px 18px;
  position: relative;
}
.ios-head .deck-insp-x {
  top: 12px;
}
.ios-k {
  margin: 0;
  font: 700 0.8125rem/1 var(--font-body);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ios-ink);
}
.ios-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font: 600 0.75rem/1 var(--font-body);
  color: var(--fg-2);
  white-space: nowrap;
}
.ios-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.ios-pill.is-linked::before,
.ios-pill.is-open::before {
  background: var(--ios);
}
.ios-pill.is-offline::before {
  background: var(--caution);
}
.ios-tabs {
  margin: 0 18px 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ios-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 12px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.ios-body[hidden] {
  display: none;
}
.ios-sec {
  display: grid;
  gap: 8px;
}
.ios-sec + .ios-sec,
.ios-transport + .ios-sec,
.ios-sec + .ios-transport {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.ios-label {
  margin: 0;
  font: 600 0.6875rem/1.2 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
label.ios-label {
  display: grid;
  gap: 6px;
}
.ios-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ios-row > select,
.ios-row > input {
  flex: 1 1 140px;
}
.ios-code {
  margin: 0;
  font: 700 2.25rem/1 var(--font-screen, monospace);
  letter-spacing: .18em;
  color: var(--fg);
}
.ios-qr {
  width: 150px;
  height: 150px;
  image-rendering: pixelated;
  border-radius: 8px;
}
.ios-wait {
  margin: 0;
  font-size: 0.875rem;
}
.ios-warn {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--caution);
}
.ios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ios-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}
.ios-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ios-qcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
}
.ios-qcard.is-fired {
  opacity: .6;
}
.ios-ring {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.75rem/1 var(--font-body);
  color: var(--fg);
  position: relative;
  border: 1.5px dashed var(--ios);
  color: var(--ios-ink);
}
.ios-ring[style] {
  border: 0;
  color: var(--fg);
  background:
    radial-gradient(
      circle,
      var(--bg) 17px,
      transparent 18px),
    conic-gradient(var(--ios) calc(var(--p, 1) * 360deg), var(--ios-soft) 0);
}
.ios-qt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.ios-qt b {
  font: 700 0.9375rem/1.2 var(--font-screen, monospace);
  letter-spacing: .04em;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.ios-qx {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 1.125rem;
  cursor: pointer;
}
.ios-qx:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
}
.ios-add {
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 10px 12px;
}
.ios-add summary {
  cursor: pointer;
  text-align: center;
  font: 600 0.9375rem/1.3 var(--font-body);
  color: var(--fg);
  list-style: none;
}
.ios-add summary::-webkit-details-marker {
  display: none;
}
.ios-add[open] {
  display: grid;
  gap: 8px;
}
.ios-add[open] summary {
  margin-bottom: 4px;
}
.ios-transport {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ios-tbtn {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg);
  font: 600 0.8125rem/1.1 var(--font-body);
  cursor: pointer;
}
.ios-tbtn:hover {
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.ios-tbtn[aria-pressed=true] {
  border-color: var(--ios);
  color: var(--ios-ink);
}
.ios-tbtn.is-main {
  background: var(--ios);
  border-color: var(--ios);
  color: #fff;
}
.ios-tbtn[aria-disabled=true] {
  opacity: .55;
}
.deck-ios .deck-switch input:checked + .deck-switch-track {
  background: var(--ios);
}
.ios-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.ios-feed li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--fg-2);
}
.ios-feed li time {
  color: var(--muted);
  font-size: 0.8125rem;
}
.ios-feed li.is-new time {
  color: var(--ios-ink);
}
.ios-feed li b {
  font-weight: 600;
  color: var(--fg);
  display: block;
}
.ios-feed li small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 2px;
}
.ios-empty {
  border: 0 !important;
  font-size: 0.8125rem;
  display: block !important;
}
.ios-db .db-wrap {
  display: grid;
  gap: 10px;
}
.ios-fine {
  margin: 0;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}
.ios-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.ios-table th,
.ios-table td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg-2);
}
.ios-table thead th {
  font: 600 0.6875rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ios-table tbody th {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}
.ios-table tr.is-away {
  opacity: .6;
}
.ios-res {
  display: block;
}
.ios-res.is-full {
  color: var(--ok);
}
.ios-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
  vertical-align: middle;
}
.ios-dot.is-on {
  background: var(--ios);
  box-shadow: 0 0 0 3px var(--ios-soft);
}
.ios-frame {
  position: absolute;
  z-index: 4;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border: 2px solid var(--ios);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 36px -14px var(--ios);
}
.ios-tag {
  position: absolute;
  left: 10px;
  top: 4px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ios);
  background: rgba(16, 18, 21, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font: 600 0.875rem/1 var(--font-body);
  color: #F2F3F5;
  white-space: nowrap;
}
.ios-tag .ios-dot {
  margin: 0;
}
.ios-tag .ios-type {
  color: #B9AEFF;
}
.ios-tag .ios-paused {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--caution);
  color: #17181B;
  font-size: 0.75rem;
}
.ios-tag svg {
  width: 16px;
  height: 16px;
  color: #B9AEFF;
}
.deck.is-ios-watch .deck-crumbs,
.deck.is-ios-watch .deck-wdock,
.deck.is-ios-watch .deck-up,
.deck.is-ios .deck-welcome {
  display: none !important;
}
.deck.is-ios .ios-frame {
  right: 410px;
}
.deck-lesson {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 62px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ios);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--fg);
  white-space: nowrap;
  max-width: calc(100% - 32px);
}
.deck-lesson-t {
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-lesson-p {
  color: var(--caution);
}
.deck-lesson .linklike {
  font-size: 0.8125rem;
  color: var(--ios-ink);
}
.deck-frozen {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 108px;
  background: rgba(10, 10, 14, .18);
  box-shadow: inset 0 0 0 3px var(--ios);
  pointer-events: none;
}
.deck-frozen p {
  margin: 0;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(14, 16, 19, .94);
  color: #F2F3F5;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
}
.deck-inote {
  position: absolute;
  z-index: 7;
  left: 16px;
  bottom: 16px;
  width: min(340px, calc(100% - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--ios);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
}
.deck-inote .eyebrow {
  margin: 0;
  color: var(--ios-ink);
}
.deck-inote p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.ios-eyebrow {
  color: var(--ios-ink) !important;
}
.ios-msg {
  min-height: 1.2em;
  color: var(--fg) !important;
  font-weight: 500;
}
@media (max-width: 899px) {
  .deck-ios {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 52%;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .deck.is-ios .ios-frame {
    right: 6px;
    bottom: 52%;
  }
  .ios-fine {
    padding: 8px 18px 10px;
  }
  .deck-lesson {
    top: 58px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-box {
    animation: none;
  }
}
.deck.is-ios-watch .deck-flight-wrap {
  display: none !important;
}
.deck.is-ios .db-tl {
  left: 16px !important;
  right: 412px !important;
  bottom: 16px !important;
}
@media (max-width: 899px) {
  .deck.is-ios .db-tl {
    right: 16px !important;
    bottom: calc(52% + 12px) !important;
  }
}
.deck.is-ios.has-debrief .deck-mini {
  display: none !important;
}
.deck-tours.or-show > :not(.dd-tabs):not(.or-list) {
  display: none;
}
.deck-tours:not(.or-show) > .or-list {
  display: none;
}
.deck-tours.or-show > .or-list {
  display: grid;
  gap: 6px;
}
.or-item {
  display: grid;
  gap: 3px;
  padding: 10px 8px;
}
.or-item b {
  font-weight: 600;
  font-size: 0.875rem;
}
.or-item span {
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.or-item small {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.or-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
}
.or-grid .or-item {
  padding: 8px;
}
.or-ex {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.ins-body .or-who {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ins-body .or-say {
  color: var(--fg);
  font: 600 1.0625rem/1.4 var(--font-body);
}
.ins-body .or-how {
  font-size: 0.875rem;
  color: var(--fg-2);
}
.or-form {
  display: grid;
  gap: 8px;
}
.or-text {
  width: 100%;
  resize: vertical;
  min-height: 76px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  padding: 10px 12px;
  font: 400 0.9375rem/1.5 var(--font-body);
}
.or-text:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
.or-grade {
  display: grid;
  gap: 8px;
}
.ins-body .or-yours {
  color: var(--fg-2);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.or-k {
  display: block;
  font: 600 0.6875rem/1.4 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ins-body .or-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding-left: 10px;
  border-left: 3px solid var(--line-strong);
  color: var(--fg);
}
.or-verdict b {
  font-size: 1.125rem;
}
.or-verdict.is-ok {
  border-left-color: var(--ok);
}
.or-verdict.is-try {
  border-left-color: var(--caution);
}
.or-verdict.is-bad {
  border-left-color: var(--warn);
}
.or-count {
  font-size: 0.8125rem;
  color: var(--muted);
}
.ins-body .or-why {
  color: var(--caution);
}
.or-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.8125rem;
}
.or-keys .is-hit {
  color: var(--ok);
}
.or-keys .is-miss {
  color: var(--muted);
}
.or-model,
.or-askans {
  display: grid;
  gap: 6px;
}
.or-model blockquote,
.or-askans blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--ok);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.or-askans blockquote {
  border-left-color: var(--line-strong);
  color: var(--fg-2);
}
.or-model.is-end blockquote {
  font-size: 0.9375rem;
}
.or-ref {
  display: inline-block;
  font: 600 0.6875rem/1.4 var(--font-data, ui-monospace, monospace);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 6px;
  margin: 2px 4px 0 0;
}
.ins-body .or-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.ins-body .or-off {
  color: var(--muted);
}
.or-bank .ins-list li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.or-bank .ins-list li:first-child {
  border-top: 0;
}
.or-sum li {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.or-sum li.is-hit > span:first-child {
  color: var(--ok);
}
.or-sum li.is-miss > span:first-child {
  color: var(--caution);
}
.sop-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--caution) 60%, transparent);
  background: var(--caution-soft, color-mix(in srgb, var(--caution) 10%, transparent));
}
.sop-banner p {
  margin: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.sop-banner b {
  font-size: 0.875rem;
  color: var(--fg);
}
.sop-banner span {
  font-size: 0.75rem;
  color: var(--fg-2);
}
.sop-fcom {
  flex: none;
  height: 32px;
  font-size: 0.75rem;
  padding: 0 12px;
}
.ins-body .sop-line,
.sop-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.sop-role {
  display: inline-block;
  font: 700 0.6875rem/1 var(--font-data, ui-monospace, monospace);
  letter-spacing: .06em;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 3px 6px;
}
.sop-tag {
  display: inline-block;
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--caution);
}
.sop-call {
  font-style: italic;
  overflow-wrap: anywhere;
}
.sop-cl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.sop-cl-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font: 600 0.875rem/1.3 var(--font-screen, ui-monospace, monospace);
  color: var(--fg);
  cursor: pointer;
}
.sop-cl-list input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ok);
}
.sop-cl-list input:checked ~ span {
  color: var(--muted);
}
.sop-cl-r {
  color: #2FB8E8;
  white-space: nowrap;
}
.sop-menu {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.sop-open {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sop-open input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  padding: 0 10px;
  font: 500 0.8125rem/1 var(--font-body);
}
.sop-dlg {
  width: min(680px, calc(100vw - 24px));
  max-height: min(90vh, 920px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
.sop-dlg::backdrop {
  background: rgba(8, 9, 11, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sop-dlg[open] {
  animation: mf-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
.sop-in {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 4vw, 28px);
}
.sop-in p {
  margin: 0;
}
.sop-h {
  margin: 0;
  font: 700 1.375rem/1.2 var(--font-body);
  padding-right: 40px;
  overflow-wrap: anywhere;
}
.sop-xbar {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 3;
}
.sop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--surface);
}
.sop-body {
  display: grid;
  gap: 12px;
}
.sop-resp {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-2);
  padding: 10px 12px;
  border-left: 3px solid var(--caution);
  background: color-mix(in srgb, var(--caution) 8%, transparent);
  border-radius: 0 10px 10px 0;
}
.sop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sop-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.sop-field > span {
  font: 600 0.6875rem/1.2 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sop-field input,
.sop-dlg select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
  padding: 0 10px;
  font: 500 0.875rem/1 var(--font-body);
}
.sop-field input:focus-visible,
.sop-dlg select:focus-visible,
.sop-open input:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
.sop-k {
  margin-top: 6px !important;
}
.sop-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sop-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.sop-row.is-airline {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--caution) 50%, transparent);
}
.sop-row-h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sop-row-h .fw-line {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 600 0.875rem/1.3 var(--font-screen, ui-monospace, monospace);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.sop-n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.75rem/1 var(--font-data, ui-monospace, monospace);
  background: var(--bg-2);
  color: var(--fg-2);
}
.sop-src {
  margin-left: auto;
  font: 600 0.625rem/1 var(--font-body);
  letter-spacing: .1em;
  color: var(--muted);
}
.sop-add {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sop-ctrl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.sop-ctrl select:last-child {
  width: auto;
  min-width: 110px;
}
.sop-row-f {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.sop-cl-row .sop-row-f {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px auto;
}
.sop-acts {
  display: flex;
  gap: 4px;
}
.sop-ic {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  font-size: 1rem;
}
.sop-ic[disabled] {
  opacity: .35;
  cursor: default;
}
.sop-bad {
  font-size: 0.8125rem;
  color: var(--caution);
}
.sop-body .dd-msg {
  font-weight: 600;
  color: var(--fg);
  padding-left: 10px;
  border-left: 3px solid var(--line-strong);
}
.sop-body .dd-msg.is-ok {
  border-left-color: var(--ok);
}
.sop-body .dd-msg.is-try {
  border-left-color: var(--caution);
}
.sop-body .dd-msg.is-bad {
  border-left-color: var(--warn);
}
.sop-pub {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.sop-code {
  font: 700 1rem/1 var(--font-data, ui-monospace, monospace);
  letter-spacing: .08em;
  color: var(--fg);
}
.sop-errs {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--fg-2);
}
.sop-foot {
  position: sticky;
  bottom: 0;
  padding: 10px 0 2px;
  background: var(--surface);
}
@media (max-width: 640px) {
  .sop-dlg {
    width: 100vw;
    max-width: 100vw;
    max-height: 94vh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  .sop-in {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .sop-grid,
  .sop-add {
    grid-template-columns: minmax(0, 1fr);
  }
  .sop-row-f {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .sop-row-f .sop-acts {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .sop-cl-row .sop-row-f {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sop-banner {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sop-dlg[open] {
    animation: none;
  }
}
@media (max-width: 899px) {
  .ios-tag {
    top: auto;
    bottom: 8px;
    left: 8px;
    height: 34px;
    font-size: 0.8125rem;
  }
}
html.is-embed .deck-q {
  top: 12px;
  left: auto;
  right: 12px;
  width: min(320px, calc(100% - 24px));
  padding: 12px 14px;
  gap: 6px;
}
html.is-embed .deck-q p.muted {
  display: none !important;
}
html.is-embed .deck-q-t {
  font-size: 0.9375rem;
}
#ecam-intro.page-hero.has-photo {
  padding-bottom: clamp(56px, 6vw, 88px);
}
#ecam-pick.section {
  padding-top: clamp(20px, 2.5vw, 32px) !important;
}
.mc-hero.has-photo {
  padding-bottom: clamp(44px, 5vw, 72px);
}
.mc-lib.section {
  padding-top: clamp(28px, 3.4vw, 44px);
}
.lib {
  --lib-k: var(--caution);
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}
.lib[data-key=mcdu] {
  --lib-k: var(--instr);
}
.lib-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.lib-g {
  --g: var(--caution);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 20px 20px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color .25s ease,
    background-color .25s ease,
    opacity .25s ease,
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.lib-g[data-grp=dual],
.lib-g[data-grp=line] {
  --g: var(--warn);
}
.lib-g[data-grp=check],
.lib-g[data-grp=pages] {
  --g: var(--instr);
}
.lib-g[data-grp=prepare] {
  --g: var(--ok);
}
.lib-g[data-grp=datalink] {
  --g: #A991F7;
}
.lib[data-key=mcdu] .lib-g[data-grp=line] {
  --g: var(--caution);
}
.lib-g::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--g);
  opacity: .5;
  transition: opacity .25s ease;
}
.lib-g::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--g) 15%, transparent),
      transparent);
  opacity: .5;
  transition: opacity .35s ease;
}
.lib-g:hover {
  border-color: color-mix(in srgb, var(--g) 40%, var(--line-strong));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .5);
}
.lib-g:hover::after {
  opacity: .9;
}
.lib-g:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.lib-g[aria-pressed=true] {
  border-color: color-mix(in srgb, var(--g) 62%, transparent);
  background: color-mix(in srgb, var(--g) 6%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 30%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--g) 50%, transparent);
}
.lib-g[aria-pressed=true]::before {
  opacity: 1;
}
.lib-g[aria-pressed=true]::after {
  opacity: 1;
}
.lib-groups.has-on .lib-g[aria-pressed=false] {
  opacity: .58;
}
.lib-groups.has-on .lib-g[aria-pressed=false]:hover {
  opacity: 1;
}
.lib-g-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lib-g-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--g);
  background: color-mix(in srgb, var(--g) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 28%, transparent);
}
.lib-g-ic .sj-hot {
  fill: color-mix(in srgb, currentColor 18%, transparent);
}
.lib-g-ic .sj-hot2 {
  fill: color-mix(in srgb, currentColor 35%, var(--surface));
}
.lib-g-k {
  font: 600 0.75rem/1 var(--font-screen);
  letter-spacing: .1em;
  color: var(--muted);
}
.lib-g-t {
  font: 600 clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.lib-g-d {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.lib-g-s {
  display: none;
}
.lib-g-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.lib-g-n {
  font-size: 0.8125rem;
  color: var(--muted);
}
.lib-g-n b {
  font: 700 0.9375rem/1 var(--font-body);
  color: var(--fg);
}
.lib-g-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}
.lib-g-p i,
.lib-tile-p i {
  position: relative;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  overflow: hidden;
}
.lib-g-p i::after,
.lib-tile-p i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--ok);
}
.lib-g-p.is-plus i {
  display: none;
}
.lib-g-p.is-plus .data {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lib-bar {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.lib-tools {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 12px;
}
.lib-find {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: text;
}
.lib-find:focus-within {
  border-color: color-mix(in srgb, var(--fg) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 12%, transparent);
}
.lib-find-i {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 500 0.9375rem/1 var(--font-body);
}
.lib-find-i::placeholder {
  color: var(--muted);
  opacity: 1;
}
.lib-find-i::-webkit-search-cancel-button {
  filter: grayscale(1);
  opacity: .6;
}
.lib-tools-m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.lib-shown {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lib-chips {
  display: contents;
}
.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 9px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  font: 600 0.75rem/1 var(--font-body);
  cursor: pointer;
  transition: border-color .2s ease;
}
.lib-chip:hover {
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.lib-chip svg {
  opacity: .6;
}
.lib-views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.lib-views button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 0.8125rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
@media (pointer: coarse) {
  .lib-views button {
    position: relative;
    min-width: 44px;
    justify-content: center;
  }
  .lib-views button::before {
    content: "";
    position: absolute;
    inset: -5px 0;
  }
}
.lib-views button:hover {
  color: var(--fg);
}
.lib-views button[aria-pressed=true] {
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--line);
}
.lib-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 82px;
  border-top: 1px solid var(--line);
}
.lib-prof {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  width: 100%;
  height: 34px;
  overflow: visible;
  pointer-events: none;
}
.lib-prof .lib-seg {
  fill: none;
  stroke: color-mix(in srgb, var(--fg) 46%, transparent);
  stroke-width: 1.75;
  stroke-linecap: round;
  transition: stroke .3s ease, stroke-width .3s ease;
}
.lib-prof .lib-prof-a {
  stroke: none;
  fill: color-mix(in srgb, var(--fg) 5%, transparent);
}
.lib-prof .lib-prof-pa {
  stroke: none;
  fill: transparent;
  transition: fill .3s ease;
}
.lib-prof .lib-prof-pa.is-on {
  fill: color-mix(in srgb, var(--ok) 13%, transparent);
}
.lib-prof .lib-seg.is-none {
  stroke: color-mix(in srgb, var(--fg) 14%, transparent);
  stroke-dasharray: 2 5;
}
.lib-prof .lib-seg.is-on {
  stroke: var(--ok);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 60%, transparent));
}
.lib-phases.has-on .lib-prof .lib-seg:not(.is-on):not(.is-none) {
  stroke: color-mix(in srgb, var(--fg) 20%, transparent);
}
.lib-prof .lib-prof-g {
  fill: none;
  stroke: color-mix(in srgb, var(--fg) 10%, transparent);
  stroke-width: 1;
  stroke-dasharray: 1 6;
}
.lib-ph {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding: 0 4px 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color .2s ease, background-color .25s ease;
}
.lib-ph:last-child {
  border-radius: 0 0 17px 0;
}
.lib-ph:nth-child(2) {
  border-radius: 0 0 0 17px;
}
.lib-ph + .lib-ph::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  height: 14px;
  width: 1px;
  background: var(--line);
}
.lib-ph:hover:not(:disabled) {
  color: var(--fg);
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--fg) 4%, transparent));
}
.lib-ph:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}
.lib-ph:disabled {
  cursor: default;
  opacity: .45;
}
.lib-ph[aria-pressed=true] {
  color: var(--fg);
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--ok) 9%, transparent));
}
.lib-ph-t {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lib-ph-n {
  font: 600 0.75rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.lib-ph[aria-pressed=true] .lib-ph-n {
  color: var(--ok);
}
.lib-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px;
  align-items: start;
}
.lib-list-w {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
.lib-list {
  max-height: clamp(460px, calc(100vh - var(--header-h) - 64px), 780px);
  max-height: clamp(460px, calc(100dvh - var(--header-h) - 64px), 780px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  outline: 0;
}
.lib-sub {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -6px;
  padding: 16px 18px 9px;
  background: linear-gradient(var(--surface) 78%, color-mix(in srgb, var(--surface) 0%, transparent));
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.lib-sub:first-child {
  padding-top: 12px;
}
.lib-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease;
}
.lib-row + .lib-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 36px;
  right: 14px;
  height: 1px;
  background: var(--line);
  transition: opacity .18s ease;
}
.lib-row:hover {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.lib-row:hover::after,
.lib-row:hover + .lib-row::after,
.lib-row[aria-selected=true]::after,
.lib-row[aria-selected=true] + .lib-row::after {
  opacity: 0;
}
.lib-row[aria-selected=true] {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.lib-row[aria-selected=true]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 3px;
  background: var(--ok);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 50%, transparent);
}
.lib-row:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}
.lib-row-b {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.lib-row-t,
.lib-row-s {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-row-t {
  font: 600 0.9375rem/1.3 var(--font-body);
}
.lib-row-t.is-mono {
  font: 700 0.8438rem/1.3 var(--font-screen);
  letter-spacing: .02em;
}
.lib-row-s {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
}
.lib-row-e {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lib-best {
  font-size: 0.75rem;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.lib-best.is-clean {
  color: var(--ok);
}
.lib-tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--ok);
  background: var(--ok-soft);
}
.lib-dot {
  --c1: var(--caution);
  --c2: var(--caution);
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 16%, transparent);
}
.lib-dot.is-warn {
  --c1: var(--warn);
}
.lib-dot.is-mc {
  --c1: var(--instr);
}
.lib-dot.is-two {
  height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(
      var(--c1) 0 42%,
      transparent 42% 58%,
      var(--c2) 58%);
  box-shadow: none;
}
.lib-dot.is-two.w1 {
  --c1: var(--warn);
}
.lib-dot.is-two.w2 {
  --c2: var(--warn);
}
.lib-list-w {
  position: relative;
}
.lib-list-w::before,
.lib-list-w::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.lib-list-w::before {
  top: 0;
  height: 28px;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(var(--surface), color-mix(in srgb, var(--surface) 0%, transparent));
}
.lib-list-w::after {
  bottom: 0;
  height: 96px;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 82%);
}
.lib-list-w.has-less::before,
.lib-list-w.has-more::after {
  opacity: 1;
}
.lib-more {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 12px;
  margin-left: -1px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg-2);
  font: 600 0.75rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .3s ease,
    visibility 0s linear .3s,
    border-color .2s ease,
    color .2s ease;
}
.lib-list-w.has-more .lib-more {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .3s ease,
    visibility 0s,
    border-color .2s ease,
    color .2s ease;
}
.lib-more:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.lib-more svg {
  animation: lib-nudge 2.4s ease-in-out infinite;
}
.lib-more:hover svg {
  animation: none;
}
@keyframes lib-nudge {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(2px);
  }
}
.lib-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 56px 20px;
  text-align: center;
  color: var(--muted);
}
.lib-empty p {
  margin: 0;
}
.lib-brief-w {
  --fg: #ECEEF1;
  --fg-2: #C3C7CE;
  --muted: #8E939C;
  --line: rgba(236, 238, 242, 0.09);
  --line-strong: rgba(236, 238, 242, 0.2);
  --ok: #3FD27A;
  --ok-soft: rgba(63, 210, 122, 0.13);
  --caution: #F2A53A;
  --warn: #F0555A;
  --instr: #4FD1E8;
  --surface-2: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
  position: sticky;
  top: calc(var(--header-h) + 18px);
  max-height: calc(100vh - var(--header-h) - 36px);
  max-height: calc(100dvh - var(--header-h) - 36px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border-radius: 22px;
  border: 1px solid rgba(236, 238, 242, 0.08);
  color: var(--fg);
  background:
    radial-gradient(
      90% 60% at 100% 0%,
      rgba(63, 210, 122, 0.07),
      transparent 65%),
    linear-gradient(
      180deg,
      #181A1E 0%,
      #0F1013 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -50px rgba(0, 0, 0, 0.8);
}
.lib-sheet-x,
.lib-sheet-grip {
  display: none;
}
.lib-brief {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.2vw, 30px);
}
.lib-brief-k {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.lib-brief-k .lib-dot.is-two {
  height: 14px;
}
.lib-brief-done {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ok);
  background: var(--ok-soft);
  letter-spacing: .08em;
}
.lib-brief-b {
  display: grid;
  gap: 14px;
  animation: lib-in .45s var(--ease-out) both;
}
@keyframes lib-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lib-brief-h {
  margin: 10px 0 0;
  font: 600 clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem)/1.3 var(--font-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lib-brief-p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}
.lib-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.lib-facts div {
  min-width: 0;
}
.lib-facts dt {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lib-facts dd {
  margin: 7px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg);
}
.lib-brief-none {
  display: grid;
  place-items: center;
  min-height: 320px;
  color: var(--muted);
  text-align: center;
}
.lib-ewd {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 196px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: #040506;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(255, 255, 255, 0.025);
  font: 400 0.875rem/1.55 var(--font-screen);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lib-ewd p {
  margin: 0;
}
.lib-ewd-t {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #FFA436;
  text-shadow: 0 0 12px rgba(255, 164, 54, 0.25);
}
.lib-ewd-t.is-warn {
  color: #FF4B4E;
  text-shadow: 0 0 12px rgba(255, 75, 78, 0.28);
}
.lib-ewd-t u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.lib-ewd-t + .lib-ewd-l {
  margin-top: 4px;
}
.lib-ewd-l {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.lib-ewd-l.is-act {
  color: #49D2F0;
}
.lib-ewd-l.is-act span:first-child {
  min-width: 0;
}
.lib-ewd-l i {
  flex: 1 1 12px;
  min-width: 12px;
  height: 0;
  border-bottom: 2px dotted rgba(73, 210, 240, 0.5);
  transform: translateY(-3px);
}
.lib-ewd-l.is-act span:last-child {
  flex: none;
}
.lib-ewd-l.is-cond {
  color: #F2F4F7;
}
.lib-ewd-more {
  margin-top: 6px !important;
  font-size: 0.75rem;
  color: rgba(236, 238, 242, 0.42);
  letter-spacing: .06em;
}
.lib-ewd-then {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.09);
  font: 600 0.625rem/1 var(--font-body) !important;
  letter-spacing: .2em;
  color: rgba(236, 238, 242, 0.45);
}
.lib-mcdu {
  display: grid;
  gap: 10px;
  min-height: 196px;
  padding: 16px 22px 14px;
  border-radius: 14px;
  background: #040506;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(255, 255, 255, 0.025);
  font: 400 0.875rem/1.4 var(--font-screen);
  text-transform: uppercase;
}
.lib-mcdu p {
  margin: 0;
}
.lib-mcdu-t {
  text-align: center;
  color: #F2F4F7;
  font-size: 0.9375rem;
  letter-spacing: .04em;
}
.lib-mcdu-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  align-content: start;
}
.lib-mcdu-l li {
  display: flex;
  gap: 10px;
  min-width: 0;
  color: #49D2F0;
}
.lib-mcdu-l li span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-mcdu-l i {
  font-style: normal;
  color: #3DDB82;
  opacity: .85;
}
.lib-mcdu-more {
  color: rgba(236, 238, 242, 0.42);
  font-size: 0.75rem;
}
.lib-mcdu-s {
  margin-top: auto !important;
  padding-top: 9px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  color: #F2F4F7;
  min-height: 1.4em;
}
.lib-mcdu-s span::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: #F2F4F7;
  animation: lib-caret 1.1s steps(2, start) infinite;
}
@keyframes lib-caret {
  to {
    visibility: hidden;
  }
}
.lib-acts {
  display: grid;
  gap: 10px;
}
.lib-acts.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lib-act {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 243, 245, 0.3);
  background: transparent;
  color: #F2F3F5;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color .25s ease,
    background-color .25s ease,
    color .25s ease,
    box-shadow .35s var(--ease-out);
}
.lib-act:hover {
  border-color: rgba(242, 243, 245, 0.62);
  background: rgba(242, 243, 245, 0.05);
}
.lib-act:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
.lib-act.is-primary {
  background: #F2F3F5;
  border-color: #F2F3F5;
  color: #121315;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
}
.lib-act.is-primary:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.lib-act-b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: 700 0.75rem/1 var(--font-screen);
  letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  color: var(--ok);
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.lib-act-b.is-pf {
  color: var(--warn);
}
.lib-act-b.is-chal {
  color: var(--caution);
}
.lib-act.is-primary .lib-act-b {
  color: #121315;
  border-color: rgba(18, 19, 21, 0.22);
  background: rgba(18, 19, 21, 0.05);
}
.lib-act-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lib-act-t b {
  font: 600 0.9375rem/1.25 var(--font-display);
  letter-spacing: 0.005em;
}
.lib-act-t small {
  font-size: 0.75rem;
  color: rgba(242, 243, 245, 0.6);
}
.lib-act.is-primary .lib-act-t small {
  color: rgba(18, 19, 21, 0.58);
}
.lib-act-go {
  position: relative;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: left .35s var(--ease-out), background-color .25s ease;
}
.lib-act:hover .lib-act-go {
  left: 2px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.lib-keys {
  margin: -6px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.lib-keys kbd {
  font: 600 0.6875rem/1 var(--font-body);
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  color: var(--fg-2);
}
@media (hover: none) {
  .lib-keys {
    display: none;
  }
}
.lib-board {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.lib-board-h {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--muted);
}
.lib-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}
.lib-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 116px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform .3s var(--ease-out),
    border-color .2s ease,
    box-shadow .3s var(--ease-out);
}
.lib-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--lib-k) 45%, var(--line-strong));
  box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .55);
}
.lib-tile:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.lib-tile:disabled {
  opacity: .4;
  cursor: default;
}
.lib-tile-k {
  font: 700 0.8125rem/1 var(--font-screen);
  letter-spacing: .06em;
  color: var(--lib-k);
}
.lib-tile-t {
  font: 600 0.9375rem/1.3 var(--font-body);
}
.lib-tile-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.lib-tile-f b {
  color: var(--fg);
}
.lib-tile-p i {
  width: 44px;
  display: block;
}
.lib-veil {
  display: none;
}
@media (max-width: 1080px) and (min-width: 900px) {
  .lib-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lib-tools-m {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lib-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 899.98px) {
  .lib-groups {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(232px, 76%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px 4px;
    scroll-padding-inline: 16px;
  }
  .lib-groups::-webkit-scrollbar {
    display: none;
  }
  .lib-g {
    scroll-snap-align: start;
    padding: 16px 16px 14px;
  }
  .lib-g:hover {
    transform: none;
  }
  .lib-g-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .lib-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 10px;
  }
  .lib-tools .lib-find {
    grid-column: 1 / -1;
  }
  .lib-phases {
    height: 96px;
  }
  .lib-prof {
    top: 12px;
    height: 30px;
  }
  .lib-ph {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-bottom: 12px;
  }
  .lib-ph-t {
    font-size: 0.5625rem;
    letter-spacing: .02em;
  }
  .lib-ph-n {
    font-size: 0.8125rem;
  }
  .lib-ph + .lib-ph::before {
    display: none;
  }
  .lib-views button span {
    display: none;
  }
  .lib-views button {
    padding: 0 10px;
  }
  .lib-main {
    grid-template-columns: 1fr;
  }
  .lib-list {
    max-height: none;
    overflow: visible;
  }
  .lib-more,
  .lib-list-w::before,
  .lib-list-w::after {
    display: none;
  }
  .lib-sub {
    position: static;
    background: none;
  }
  .lib-brief-w {
    position: fixed;
    z-index: 91;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 90dvh;
    max-height: 90vh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(104%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility 0s linear .45s;
    overscroll-behavior: contain;
  }
  .lib.sheet-on .lib-brief-w {
    transform: none;
    visibility: visible;
    transition: transform .45s var(--ease-out), visibility 0s;
  }
  .lib-sheet-grip {
    display: block;
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: rgba(236, 238, 242, 0.22);
  }
  .lib-sheet-x {
    display: grid;
    place-items: center;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--fg);
    cursor: pointer;
  }
  @media (pointer: coarse) {
    .lib-sheet-x {
      top: 10px;
      right: 10px;
      width: 44px;
      height: 44px;
    }
    .lib .lib-brief-k {
      padding-right: 56px;
    }
  }
  .lib-brief {
    padding: 14px 18px 22px;
  }
  .lib-brief-k {
    padding-right: 46px;
  }
  .lib-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lib-acts.is-two {
    grid-template-columns: 1fr;
  }
  .lib-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(6, 7, 9, 0.56);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .lib.sheet-on .lib-veil {
    opacity: 1;
    pointer-events: auto;
  }
  .lib-mcdu-l {
    grid-template-columns: 1fr;
  }
  .lib-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lib-tile {
    min-height: 104px;
    padding: 14px;
  }
}
@media (max-width: 899.98px) {
  .lib[data-key=ecam] .lib-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 10px;
    scroll-snap-type: none;
  }
}
@media (max-width: 599.98px) {
  .lib[data-key=ecam] .lib-groups {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
  }
  .lib[data-key=ecam] .lib-g {
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 4px;
    min-height: 84px;
    padding: 10px 4px;
    border-color: transparent;
    border-radius: 14px;
    background: transparent;
    text-align: center;
  }
  .lib[data-key=ecam] .lib-g::before,
  .lib[data-key=ecam] .lib-g::after {
    display: none;
  }
  .lib[data-key=ecam] .lib-g[aria-pressed=true] {
    border-color: color-mix(in srgb, var(--g) 55%, transparent);
    background: color-mix(in srgb, var(--g) 10%, var(--surface-2));
  }
  .lib[data-key=ecam] .lib-g-top {
    margin: 0;
    justify-content: center;
  }
  .lib[data-key=ecam] .lib-g-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .lib[data-key=ecam] .lib-g-ic svg {
    width: 20px;
    height: 20px;
  }
  .lib[data-key=ecam] .lib-g-k,
  .lib[data-key=ecam] .lib-g-t,
  .lib[data-key=ecam] .lib-g-d,
  .lib[data-key=ecam] .lib-g-p {
    display: none;
  }
  .lib[data-key=ecam] .lib-g-s {
    display: block;
    font: 600 0.875rem/1.2 var(--font-display);
    letter-spacing: -0.005em;
  }
  .lib[data-key=ecam] .lib-g-f {
    margin: 0;
    padding: 0;
    border: 0;
    justify-content: center;
  }
  .lib[data-key=ecam] .lib-g-n {
    font-size: 0.6875rem;
    white-space: nowrap;
  }
  .lib[data-key=ecam] .lib-g-n b {
    font-size: 0.75rem;
  }
}
@media (max-width: 899.98px) {
  .lib[data-key=mcdu] .lib-groups {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
    gap: 10px;
  }
  .lib[data-key=mcdu] .lib-g {
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  .lib[data-key=mcdu] .lib-g-t {
    font-size: 1rem;
    text-wrap: balance;
  }
  .lib[data-key=mcdu] .lib-g-f {
    margin-top: 6px;
    padding-top: 10px;
    gap: 8px;
  }
  .lib[data-key=mcdu] .lib-g-n {
    white-space: nowrap;
  }
  .lib[data-key=mcdu] .lib-g-p i {
    display: none;
  }
}
@media (max-width: 719.98px) {
  .lib[data-key=mcdu] .lib-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599.98px) {
  .lib[data-key=mcdu] .lib-g {
    gap: 4px;
    padding: 12px 12px 10px;
  }
  .lib[data-key=mcdu] .lib-g-top {
    margin-bottom: 4px;
  }
  .lib[data-key=mcdu] .lib-g-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .lib[data-key=mcdu] .lib-g-ic svg {
    width: 22px;
    height: 22px;
  }
  .lib[data-key=mcdu] .lib-g-t {
    font-size: 0.9375rem;
    line-height: 1.25;
  }
  .lib[data-key=mcdu] .lib-g-d {
    display: none;
  }
  .lib[data-key=mcdu] .lib-g-f {
    margin-top: 4px;
    padding-top: 8px;
  }
  .lib[data-key=mcdu] .lib-g-n {
    font-size: 0.75rem;
  }
  .lib[data-key=mcdu] .lib-g-n b {
    font-size: 0.875rem;
  }
  .lib[data-key=mcdu] .lib-g-p {
    font-size: 0.6875rem;
  }
  .lib[data-key=mcdu] .lib-g-p i {
    display: none;
  }
}
html.lib-lock,
html.lib-lock body {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lib-g,
  .lib-act,
  .lib-tile,
  .lib-brief-w {
    transition: none;
  }
  .lib-more svg {
    animation: none;
  }
  .lib-brief-b {
    animation: none;
  }
  .lib-mcdu-s span::after {
    animation: none;
  }
}
.lib-brief-w:focus {
  outline: 0;
}
.pg-more {
  display: none;
}
@media (max-width: 700px) {
  .pg-ec.is-folded > :nth-child(n+9) {
    display: none;
  }
  .pg-more {
    display: inline-flex;
    margin-top: 12px;
  }
}
@media (pointer: coarse) {
  .site-header .brand,
  .site-footer .brand {
    position: relative;
  }
  .site-header .brand::after,
  .site-footer .brand::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }
  .footer-mail {
    padding-block: 10px;
    margin-block: 8px -10px;
  }
  .footer-legal a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  .article-page .back-link {
    min-height: 44px;
  }
  .acct .btn-sm,
  .auth .btn-sm,
  #pg-copy,
  .pg-import-row .btn,
  .pg-mem-card .btn-sm,
  .pg-more {
    min-height: 44px;
  }
  #pg-paste {
    min-height: 44px;
  }
  #pg-reset,
  .pg-small .linklike {
    position: relative;
  }
  #pg-reset::after,
  .pg-small .linklike::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }
  .ask-chip {
    position: relative;
    min-height: 38px;
  }
  .ask-chip::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .faq-index a {
    padding-block: 12px;
  }
}
.practice-free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin-top: calc(-1 * clamp(24px, 3vw, 40px));
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fg-2);
  text-decoration: none;
}
.practice-free:hover {
  color: var(--fg);
}
@media (pointer: coarse) {
  .practice-free {
    min-height: 44px;
  }
}