:root {
  color-scheme: dark;
  --ground: #0f141a;
  --dark-ground: 1;
  --light-ground: 0;
  --ink: #f2f5f8;
  --muted: rgba(242, 245, 248, 0.76);
  --plate: rgba(20, 26, 33, 0.86);
  --plate-edge: rgba(255, 255, 255, 0.1);
  --plate-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --card: rgba(255, 255, 255, 0.05);
  --card-edge: rgba(255, 255, 255, 0.12);
  --point: rgba(34, 42, 52, 0.82);
  --point-on: color-mix(in srgb, rgba(34, 42, 52, 0.82) 90%, var(--accent));
  --accent: #00c6ad;
  --accent-ink: #0f141a;
  --accent-hover: #2ad9c2;
  --ring: rgba(0, 198, 173, 0.45);
  --glow: rgba(0, 198, 173, 0.6);
  --glow-wide: rgba(0, 198, 173, 0.35);
  --glow-tint: rgba(0, 198, 173, 0.08);
  --mark-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --warn: #fbbf24;
  --warn-wash: rgba(251, 191, 36, 0.12);
  --bad: #f87171;
  --bad-wash: rgba(248, 113, 113, 0.14);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #e9edf1;
  --dark-ground: 0;
  --light-ground: 1;
  --ink: #11161b;
  --muted: rgba(17, 22, 27, 0.72);
  --plate: rgba(255, 255, 255, 0.86);
  --plate-edge: rgba(17, 22, 27, 0.07);
  --plate-shadow: 0 18px 50px -24px rgba(17, 22, 27, 0.35);
  --card: #ffffff;
  --card-edge: rgba(17, 22, 27, 0.1);
  --point: #ffffff;
  --point-on: color-mix(in srgb, #ffffff 95%, var(--accent));
  --accent: #006d92;
  --accent-ink: #ffffff;
  --accent-hover: #005a79;
  --ring: rgba(0, 109, 146, 0.4);
  --glow: rgba(0, 109, 146, 0.4);
  --glow-wide: rgba(0, 109, 146, 0.22);
  --glow-tint: rgba(0, 109, 146, 0.05);
  --mark-shadow: 0 10px 28px -12px rgba(17, 22, 27, 0.45);
  --warn: #b45309;
  --warn-wash: rgba(180, 83, 9, 0.10);
  --bad: #b91c1c;
  --bad-wash: rgba(185, 28, 28, 0.14);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; margin: 0; font-size: 17px; background: var(--ground); transition: background-color 600ms ease; }
body {
  position: relative;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  transition: color 600ms ease;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 24px 16px;
  padding-top: calc(72px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat;
  pointer-events: none;
  transition: opacity 600ms ease;
}
body::before { background-image: url(/assets/pipes-dark.svg?m=1791727497); opacity: var(--dark-ground); }
body::after { background-image: url(/assets/pipes.svg?m=1791727497); opacity: var(--light-ground); }
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  padding: 40px 28px 36px;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: 26px;
  box-shadow: var(--plate-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}
.mark {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 28px;
  box-shadow: var(--mark-shadow);
  transition: box-shadow 600ms ease;
}
.mark.small { width: 64px; height: 64px; border-radius: 14px; }
.home { display: block; line-height: 0; border-radius: 14px; }
.home:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; text-align: center; transition: color 600ms ease; }
.tag { margin: -8px 0 0; color: var(--muted); font-size: 1.02rem; text-align: center; transition: color 600ms ease; }
.cta {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 600ms ease, color 600ms ease, transform 120ms ease;
}
.cta:hover { background: var(--accent-hover); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.ctas .cta { margin-top: 0; }
.cta { border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.5; }
.cta.second { background: var(--card); border-color: var(--card-edge); color: var(--ink); }
.cta.second:hover { border-color: var(--accent); background: var(--glow-tint); }
.back { display: inline-block; border: 0; padding: 4px 8px; background: transparent; color: var(--muted); font: inherit; font-size: 0.9rem; cursor: pointer; border-radius: 6px; text-decoration: none; }
.back:hover { color: var(--ink); }
.back:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ask { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 360px; }
.ask .word span { min-width: 4.4em; font-size: 0.86rem; }
.platforms { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
button.card { font: inherit; text-align: left; cursor: pointer; }
.awaiting { width: 100%; margin-top: 22px; }
.mine { width: 100%; }
.mine-row { cursor: pointer; }
.mine-row:hover, .mine-row:focus-visible { border-color: var(--accent); background-color: var(--glow-tint); outline: none; }
.mine-row .cancel { flex: 0 0 auto; padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); transition: border-color 250ms ease, color 250ms ease; }
.mine-row .cancel:hover { border-color: var(--bad); color: var(--ink); }
.mine-row .cancel.armed { border-color: var(--bad); color: var(--bad); }
.awaiting-head { margin: 0 0 8px; color: var(--muted); font-size: 0.86rem; text-align: left; }
a.card:hover, a.card:focus-visible, button.card:hover, button.card:focus-visible {
  border-color: var(--accent);
  background-color: var(--glow-tint);
  box-shadow: 0 0 0 1px var(--accent), 0 0 26px var(--glow), 0 0 72px 4px var(--glow-wide);
  transform: translateY(-1px);
}
a.card:focus-visible, button.card:focus-visible { outline: none; }
a.card:active, button.card:active { transform: translateY(0); }
.card .os { flex: 1 1 auto; min-width: 0; }
.card .os b { display: block; font-size: 1.02rem; }
.card .os span { display: block; color: var(--muted); font-size: 0.86rem; transition: color 600ms ease; }
.card .get { flex: 0 0 auto; font-weight: 600; color: var(--accent); transition: color 600ms ease; }
.card.soon { opacity: 0.62; }
.card.soon .get { color: var(--muted); font-weight: 500; }
.ico { flex: 0 0 auto; width: 28px; height: 28px; color: var(--accent); transition: color 600ms ease; }
.ico svg { width: 100%; height: 100%; display: block; fill: currentColor; stroke: none; }
#ios .ico svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.meta { margin: 0; color: var(--muted); font-size: 0.8rem; text-align: center; overflow-wrap: anywhere; transition: color 600ms ease; }
.meta code { display: block; margin-top: 2px; font: 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.theme {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--plate-edge);
  border-radius: 999px;
  background: var(--plate);
  color: var(--ink);
  box-shadow: var(--plate-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 600ms ease, border-color 600ms ease, box-shadow 600ms ease, color 600ms ease, transform 120ms ease;
}
.theme:hover { border-color: var(--accent); }
.theme:active { transform: scale(0.96); }
.theme:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; transition: opacity 400ms ease, transform 600ms ease; }
.theme .sun { opacity: 1; transform: rotate(0deg); }
.theme .moon { opacity: 0; transform: rotate(-90deg); }
:root[data-theme="light"] .theme .sun { opacity: 0; transform: rotate(90deg); }
:root[data-theme="light"] .theme .moon { opacity: 1; transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  html, body, body::before, body::after, .plate, .mark, h1, .tag, .cta, .card, .card .os span, .card .get, .ico, .meta, .theme, .theme svg { transition: none; }
  a.card:hover, a.card:focus-visible, button.card:hover, button.card:focus-visible { transform: none; }
}
@media (max-width: 420px) {
  .plate { padding: 30px 18px 28px; border-radius: 20px; }
  h1 { font-size: 1.6rem; }
  .mark { width: 104px; height: 104px; border-radius: 23px; }
}
.plate.doc {
  max-width: 760px;
  align-items: stretch;
  text-align: left;
  padding: 36px 32px 32px;
}
.plate.doc .home { align-self: flex-start; }
.plate.doc h1 { text-align: left; font-size: 1.7rem; }
.plate.doc .tag { text-align: left; }
.doc-body { display: flex; flex-direction: column; gap: 18px; }
.doc-body h2 {
  margin: 10px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.doc-body p, .doc-body li { margin: 0; color: var(--muted); }
.doc-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-body a { color: var(--accent); }
.doc-stamp {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--plate-edge); }
.legal a:hover { color: var(--ink); border-bottom-color: currentColor; }
.legal a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.plate.doc .legal { justify-content: flex-start; }
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
}
.brand:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.brand .mark { flex: none; }
.brand-words { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-tag { color: var(--muted); font-size: 0.95rem; }
.words {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.word {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  height: 44px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  transition: border-color 250ms ease, box-shadow 250ms ease, background-color 600ms ease;
}
.word span { flex: none; min-width: 1.4em; color: var(--muted); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.word input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  outline: none;
}
.word:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--glow-tint); }
.word.start { border-color: var(--warn); }
.word.right { border-color: var(--accent); }
.word.astray, .word.astray:focus-within { border-color: var(--bad); background: var(--bad-wash); box-shadow: 0 0 0 1px var(--bad); }
.word.astray input, .word.astray span { color: var(--bad); }
.word input::placeholder { color: var(--muted); opacity: 0.7; letter-spacing: 0.06em; }
.say { min-height: 1.5em; margin: -6px 0 0; color: var(--muted); font-size: 0.92rem; text-align: center; transition: color 600ms ease; }
.say.wrong { color: var(--bad); }
#order-say { white-space: pre-line; }
.say.good { color: var(--accent); }
#door .none { margin: 10px 0 -8px; color: var(--muted); font-size: 0.92rem; text-align: center; }
.warn { margin: 6px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.45; text-align: left; }
.cta:disabled { opacity: 0.45; cursor: default; transform: none; }
.cta:disabled:hover { background: var(--accent); }
.pick { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pick .say { margin: 0; }
#buy .back { color: var(--muted); }
#buy #codeopen, #home #mytunnels, #home #forget, #order #order-more, #order #pay-other, #order #pay-here { padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; transition: border-color 250ms ease, color 250ms ease; }
#buy { position: relative; }
#buy #codeopen, #home #mytunnels { position: absolute; top: -26px; right: -14px; }
#home #forget { position: absolute; top: -26px; left: -14px; margin: 0; }
#home { position: relative; }
@media (max-width: 420px) { #buy #codeopen, #home #mytunnels { top: -16px; right: -4px; } #home #forget { top: -16px; left: -4px; } #home > .mark { margin-top: 30px; } }
#buy #codeopen:hover, #home #mytunnels:hover, #home #forget:hover, #order #order-more:hover, #order #pay-other:hover, #order #pay-here:hover { border-color: var(--accent); color: var(--ink); }
.pick h2 { margin: 10px 0 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pick .hint { margin: -6px 0 0; color: var(--muted); font-size: 0.86rem; }
@property --fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
.regions { --row: 46px; --rows: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--row); gap: 8px; }
.regions.fold {
  --fade: 52px;
  max-height: calc(6px + var(--rows) * (var(--row) + 8px) + 24px);
  margin: -6px;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
  transition: --fade 250ms ease;
}
.regions.fold.end { --fade: 0px; }
#regions-gone { --rows: 3; }
@media (prefers-reduced-motion: reduce) { .regions.fold, .termbox { transition: none; } }
.region {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--point);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease, opacity 250ms ease;
}
.region .flag { flex: none; font-size: 1.3rem; line-height: 1; }
.region .label { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region .note { flex: none; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.region:hover { border-color: var(--accent); }
.region.on { border-color: var(--accent); background: var(--point-on); box-shadow: 0 0 0 1px var(--accent), 0 0 20px var(--glow-tint); }
.region.off { opacity: 0.55; cursor: default; }
.region.off:hover { border-color: var(--card-edge); }
.groupline { width: 100%; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.groupline::before, .groupline::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--plate-edge); }
.region.held { opacity: 0.5; cursor: default; }
.region.locked { cursor: default; }
.region.held:hover { border-color: var(--card-edge); }
.region .star { color: var(--warn); font-weight: 700; margin-left: 2px; }
.foot { margin: 0; color: var(--muted); font-size: 0.82rem; }
.foot .star { color: var(--warn); font-weight: 700; }
.region:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.segments { display: flex; gap: 6px; padding: 4px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; }
.seg {
  flex: 1 1 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}
.seg.on { background: var(--accent); color: var(--accent-ink); }
.seg.held { opacity: 0.4; cursor: default; }
.seg[aria-disabled="true"].on { cursor: default; }
.seg:has(.segicon) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.segicon, .chainicon { flex: none; width: 18px; height: 18px; object-fit: contain; }
#order-chains { display: flex; align-items: center; gap: 8px; }
.seg:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--plate-edge); }
.sum-label { color: var(--muted); font-size: 0.92rem; }
.sum-price { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pick .cta { align-self: center; }
.spread { display: grid; grid-template-rows: 0fr; margin-top: -10px; opacity: 0; transition: grid-template-rows 320ms ease, margin-top 320ms ease, opacity 260ms ease; }
.spread.shown { grid-template-rows: 1fr; margin-top: 2px; opacity: 1; }
.spread > div { min-height: 0; overflow: hidden; }
.consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.consent input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.consent .box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--warn); border-radius: 6px; transition: background-color 200ms ease, border-color 200ms ease; }
.consent .box svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 220ms ease; }
.consent input:checked + .box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .box svg { stroke-dashoffset: 0; }
.consent input:focus-visible + .box { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .spread, .consent .box, .consent .box svg { transition: none; } }
.agree { margin: -2px 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.agree a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--plate-edge); }
.agree a:hover { color: var(--ink); border-bottom-color: currentColor; }
.agree a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.codeparts { display: flex; align-items: center; gap: 6px; width: 100%; }
.codeparts .codepart {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 11px 4px;
  background: var(--point);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  color: var(--ink);
  font: 1.1rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.codeparts .codepart::placeholder { color: var(--muted); opacity: 0.35; }
.codeparts .codepart:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.codedash { flex: none; color: var(--muted); }
.codeparts.wrong .codepart { border-color: var(--bad); }
.codeparts.right .codepart { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--glow-tint); transition: border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.codeparts.wrong .codepart:focus-visible { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent); }
.codeparts.shake { animation: code-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes code-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) { .codeparts.shake { animation: none; } }
.codeclose { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--muted); cursor: pointer; transition: border-color 250ms ease, color 250ms ease; }
.codeclose:hover { border-color: var(--accent); color: var(--ink); }
.codeclose:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.codeclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 30px 26px 24px;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: 22px;
  box-shadow: var(--plate-shadow);
  color: var(--ink);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.modal[open] { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: modal-in 180ms ease-out; }
.modal::backdrop { background: rgba(6, 9, 13, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: modal-fade 180ms ease-out; }
.modal.closing { animation: modal-out 160ms ease-in forwards; }
.modal.closing::backdrop { animation: modal-fade 160ms ease-in reverse forwards; }
.modal h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.modal .hint { margin: -6px 0 4px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.modal .say { margin: 0; min-height: 1.4em; }
.modalclose { position: absolute; top: 12px; right: 12px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal[open], .modal::backdrop, .modal.closing, .modal.closing::backdrop { animation: none; } }
.termbox { display: flex; flex-direction: column; gap: 8px; width: 100%; border: 1px solid transparent; border-radius: 16px; transition: padding 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.termbox.coded { padding: 8px; background: var(--glow-tint); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.codeheld { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 2px 0 8px; }
.codename { font: 0.95rem ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: 0.06em; }
.codesaid { flex: 1 1 auto; min-width: 0; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.codeheld .back { flex: none; }
.warncard { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 10px; color: var(--ink); text-align: left; }
.warncard + .consent { margin-top: 10px; }
.warncard svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.was { margin-right: 10px; color: var(--muted); font-size: 1rem; font-weight: 500; }
#order .tag { margin-top: -10px; }
.pay { display: flex; align-items: flex-start; gap: 22px; width: 100%; padding: 18px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; }
.pay .qr { flex: none; width: 196px; height: 196px; border-radius: 10px; background: #ffffff; }
.payto { flex: 1 1 auto; min-width: 0; margin: 0; }
.payto dt { margin: 0; color: var(--muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.payto dd { margin: 3px 0 14px; }
.payto dd:last-child { margin-bottom: 0; }
.payto .line { display: flex; align-items: center; gap: 8px; }
.amount { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.unit { flex: 1 1 auto; color: var(--muted); font-size: 0.92rem; }
.addr { flex: 1 1 auto; min-width: 0; font: 0.84rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.copy { flex: none; padding: 4px 10px; background: transparent; border: 1px solid var(--card-edge); border-radius: 999px; color: var(--accent); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 200ms ease, color 200ms ease; }
.copy:hover { border-color: var(--accent); }
.copy.done { color: var(--muted); }
.copy:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#order .warn { text-align: center; }
.wallet { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.wallets { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta.walletpay { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; margin-top: 0; }
.cta.walletpay img { flex: none; width: 22px; height: 22px; border-radius: 5px; }
.cta.walletpay span { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.wallet .say { margin: 0; }
.wallet #pay-other { align-self: center; }
.choose { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pay .qrcol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pay.lapsed .qrcol { display: none; }
.pay.gone { flex-direction: column; align-items: stretch; gap: 10px; }
.pay.gone h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pay.gone .gonesay { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.qrsay { max-width: 196px; margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; text-align: center; }
.pay .qrcol .back { font-size: 0.8rem; padding: 4px 12px; border: 1px solid transparent; border-radius: 999px; transition: border-color 250ms ease, color 250ms ease; }
.pay .qrcol .back:hover { border-color: var(--accent); color: var(--ink); }
@media (max-width: 480px) {
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions { grid-template-columns: 1fr; --rows: 10; }
}
@media (max-width: 480px) {
  .pay { flex-direction: column; align-items: stretch; }
  .pay .qrcol { align-self: center; }
  .pay .qr { width: 216px; height: 216px; }
  .qrsay { max-width: 216px; }
}
.corner {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 250ms ease, background-color 250ms ease;
}
.corner svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.corner:hover { color: var(--ink); background: var(--card); }
.corner:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pipefield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.card.sparkling { position: relative; overflow: hidden; isolation: isolate; }
.card.sparkling > :not(.pipefield) { position: relative; z-index: 1; }
.plate.sparkling { overflow: hidden; isolation: isolate; }
.plate.sparkling > .view { position: relative; z-index: 1; }
.plate.sparkling > .corner { z-index: 2; }
.view { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; transition: opacity 170ms ease, transform 170ms ease; }
.view .say { margin: -4px 0 0; }
.view.out-left { opacity: 0; transform: translateX(-12px); }
.view.out-right { opacity: 0; transform: translateX(12px); }
.view.in-right { opacity: 0; transform: translateX(12px); transition: none; }
.view.in-left { opacity: 0; transform: translateX(-12px); transition: none; }
.plate.sizing { overflow: hidden; transition: height 250ms ease, background-color 600ms ease, border-color 600ms ease, box-shadow 600ms ease; }
.plate:has(.view.wide:not([hidden])) { max-width: 560px; }
@media (prefers-reduced-motion: reduce) {
  .view, .plate.sizing { transition: none; }
}