/* Kaynak: projeler/Crypto/Consensus/portal/public/portal.css (2026-10-03) — uyarlandı
   ══════════════════════════════════════════════════════════
   TRUFFLE: the whitelist.

   Cream paper, soil, cap orange and the dark brown of the
   wordmark, taken from the brand art. These tokens are the
   placeholder until the brand file arrives: change them here
   and the card colours in card.js together.

   Fonts are served from this origin (no third-party request),
   which is also what lets the CSP stay at font-src 'self'.
   ══════════════════════════════════════════════════════════ */

@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
  --paper:    #FFF3E6;
  --paper-2:  #FBEADB;
  --card:     #FFFBF6;
  --soil:     #F0E3D6;
  --ink:      #2A1B14;
  --ink-2:    #5B4537;
  --ink-3:    #86705F;
  --line:     #EEDCCB;
  --line-2:   #E2CBB6;

  --orange:   #EE8442;
  --orange-lit: #F4A26B;
  --orange-pale: #FFE2CC;
  --glow:     #FFD2AE;

  --c1: #EE8442;
  --c2: #8A5A3B;
  --c3: #C77E52;
  --c4: #5E8F5A;
  --ok: #5E8F5A;
  --bad: #C2462B;

  --sans: "Manrope", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --s--2: 0.72rem;
  --s--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.88rem);
  --s-0:  clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --s-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --s-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --s-3:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);

  --pad: clamp(1.15rem, 3.4vw, 2.75rem);

  --glass-ring: rgba(42,27,20,.12);
  --glass-shadow: 0 14px 30px -20px rgba(42,27,20,.3);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
}

*, *::before, *::after { box-sizing: border-box; }

/* A column that fills the viewport, so the footer sits on the bottom edge
   instead of wherever the content happened to end. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255,210,174,.55), transparent 70%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; }
a { color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow { font-size: var(--s--2); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
.tnum { font-variant-numeric: tabular-nums; }
.hint { font-size: var(--s--2); color: var(--ink-3); line-height: 1.5; }
.hint.is-bad { color: var(--bad); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.78rem 1.4rem; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: var(--s--1); font-weight: 800;
  letter-spacing: 0.04em; text-decoration: none;
  color: #FFFFFF;
  background: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 70%, var(--ink));
  box-shadow: 0 8px 20px -10px rgba(238,132,66,.75);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .18s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 26px -10px rgba(238,132,66,.8); }
.btn--quiet { color: var(--ink); background: var(--card); border: 1px solid var(--glass-ring); box-shadow: none; }
.btn:active, .linkbtn:active { transform: translateY(1px) scale(0.985); }
.btn--quiet:hover { border-color: var(--orange); color: var(--orange); filter: none; box-shadow: none; }
.btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 6px 18px -10px rgba(42,27,20,.7); }
.btn--dark:hover { filter: brightness(1.25); }
.btn--sm { padding: 0.52rem 1rem; font-size: var(--s--2); }
.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--s-0); }
.btn--wide { width: 100%; }
.btn[disabled], .btn.is-off { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; filter: none; box-shadow: none; }

/* ── Dev banner ──────────────────────────────────────────── */
.devbar { flex: 0 0 auto; background: var(--ink); color: var(--paper); padding: 0.55rem var(--pad); font-size: var(--s--2); }
.devbar__in { width: min(100%, 820px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.devbar b { color: var(--orange-lit); letter-spacing: 0.1em; text-transform: uppercase; }
.devbar .btn { padding: 0.38rem 0.85rem; font-size: 0.68rem; }

/* ── Header ────────────────────────────────────────────── */
.top { flex: 0 0 auto; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); }
.top__in { width: min(100%, 820px); margin-inline: auto; padding: 0.6rem var(--pad); display: flex; align-items: center; gap: 0.8rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; min-width: 0; }
.brand__mark { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.brand__word { display: grid; gap: 0; min-width: 0; }
.brand__name { font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; }
.brand__tag { font-size: 0.72rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.top__spacer { margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--glass-ring);
  font-size: var(--s--1); font-weight: 800; color: var(--ink);
  cursor: pointer; white-space: nowrap; font-family: var(--sans);
  transition: border-color .18s;
}
.chip:hover { border-color: var(--orange); }
.chip b { font-size: var(--s-0); color: var(--orange); }
.chip__label { font-size: var(--s--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.chip__handle { font-size: var(--s--1); font-weight: 800; color: var(--ink); max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.chip__av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }

@media (max-width: 640px) {
  .brand__tag, .chip__label { display: none; }
  .top__in { gap: 0.45rem; }
}

/* ── The progress spine ──────────────────────────────────── */
.prog { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.prog__in { width: min(100%, 820px); margin-inline: auto; padding: 0.55rem var(--pad); display: flex; align-items: center; gap: 0.4rem; }
.prog__step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.55rem; border-radius: 999px;
  background: none; border: 1px solid transparent; cursor: default;
  font-family: var(--sans); text-align: left; color: var(--ink-3);
  transition: all .18s cubic-bezier(.2,.8,.2,1);
}
.prog__step[data-can-go="1"] { cursor: pointer; }
.prog__step[data-can-go="1"]:hover { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.prog__n {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 0.82rem; font-weight: 800;
  background: var(--card); color: var(--ink-3); border: 1px solid var(--line-2);
  transition: all .18s ease;
}
.prog__n svg { width: 13px; height: 13px; }
.prog__lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog__step.is-on { color: var(--ink); }
.prog__step.is-on .prog__n { background: var(--orange); color: #FFF; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-pale); }
.prog__step.is-done { color: var(--ink-2); }
.prog__step.is-done .prog__n { background: var(--ok); color: #FFF; border-color: var(--ok); }

@media (max-width: 760px) {
  .prog__lbl { display: none; }
  .prog__in { gap: 0.45rem; justify-content: center; }
  .prog__step { flex: 0 0 auto; }
}

/* ── Screens ─────────────────────────────────────────────── */
.wrap {
  width: min(100%, 820px);
  margin-inline: auto;
  padding: clamp(1.4rem, 3.2vw, 2.4rem) var(--pad) clamp(2rem, 4vw, 3.2rem);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.removed {
  padding: 0.75rem 1rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bad) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line));
  color: var(--bad); font-weight: 700; font-size: var(--s--1);
}

.screen {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--glass-ring);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -22px rgba(42,27,20,.25), 0 0 0 1px rgba(42,27,20,.03);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 440px;
  will-change: transform, opacity;
}

@keyframes screenSoftIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.screen:not([hidden]) { animation: screenSoftIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.screen.is-leaving {
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.995) !important;
  transition: opacity 0.16s ease-in, transform 0.16s ease-in !important;
  pointer-events: none !important;
}

/* The mycelium line along the top of every card, the brand's own thread. */
.screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--orange-lit) 20%, var(--orange) 50%, var(--orange-lit) 80%, transparent);
}

.screen__art {
  display: block;
  width: calc(100% + 2 * clamp(1.8rem, 4vw, 2.6rem));
  max-width: none;
  height: auto;
  margin: calc(-1 * clamp(1.8rem, 4vw, 2.6rem)) calc(-1 * clamp(1.8rem, 4vw, 2.6rem)) 0;
  border-bottom: 1px solid var(--line);
}

.screen__top { display: flex; flex-direction: column; gap: 0.45rem; }
.screen__body { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; flex: 1 0 auto; }

.screen h1, .screen h2 {
  font-size: clamp(1.6rem, 1.45rem + 1.1vw, 2.3rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--ink);
}

.lede { color: var(--ink-2); font-size: var(--s-0); line-height: 1.55; max-width: 62ch; }
.lede b { color: var(--ink); }

.msg { font-size: var(--s--1); font-weight: 700; color: var(--ok); min-height: 1.35em; }
.msg.is-bad { color: var(--bad); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }

.screen__body > .missions,
.screen__body > .wallet,
.screen__body > .share,
.screen__body > .field { width: 100%; }

.actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.actions--bare { border-top-color: transparent; padding-top: 0; }
.actions__note { font-size: var(--s--2); color: var(--ink-3); margin-left: auto; text-align: right; }

@media (max-width: 700px) {
  .screen { min-height: 0; padding: 1.4rem; }
  .screen__art { width: calc(100% + 2.8rem); margin: -1.4rem -1.4rem 0; }
}

.linkbtn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--s--1); font-weight: 700;
  color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
  transition: color .18s;
}
.linkbtn:hover { color: var(--ink); }

/* ── Missions ────────────────────────────────────────────── */
.missions { display: grid; gap: 0.75rem; width: 100%; }

.mission {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s, background .18s;
}
.mission:hover { background: var(--card); border-color: var(--orange-lit); box-shadow: 0 6px 18px -10px rgba(238,132,66,.3); transform: translateY(-1px); }
.mission.is-approved { background: color-mix(in srgb, var(--ok) 7%, var(--card)); border-color: color-mix(in srgb, var(--ok) 35%, var(--line-2)); }
.mission.is-rejected { background: color-mix(in srgb, var(--bad) 6%, var(--card)); }

/* Waiting on the campaign post. Deliberately quiet and not hoverable: there is
   nothing to press, and a row that lifts under the cursor promises otherwise. */
.mission.is-waiting { opacity: 0.55; background: var(--paper); }
.mission.is-waiting:hover { background: var(--paper); border-color: var(--line); box-shadow: none; transform: none; }

.mission__ico {
  width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; color: #FFF;
  box-shadow: 0 2px 6px rgba(42,27,20,.1);
}
.mission__ico svg { width: 18px; height: 18px; display: block; }

.mission__t {
  font-size: var(--s-0); font-weight: 800; flex: 1 1 auto; min-width: 0; color: var(--ink);
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}

.pts {
  flex: 0 0 auto; padding: 0.28rem 0.68rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  font-size: var(--s--2); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.mission.is-approved .pts { background: color-mix(in srgb, var(--ok) 14%, var(--card)); border-color: color-mix(in srgb, var(--ok) 45%, var(--glass-ring)); color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }

.mission__actions { display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; white-space: nowrap; }
.mission__actions .btn { white-space: nowrap; }

.mission__state { font-size: var(--s--2); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.mission.is-approved .mission__state { color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }
.mission__state.is-bad { color: var(--bad); }

.mission__req, .mission__opt {
  padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.mission__req { color: #9A4A17; background: var(--orange-pale); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.mission__opt { color: var(--ink-3); background: var(--card); border: 1px solid var(--line-2); }

.mission__proof { flex: 1 1 100%; display: grid; gap: 0.35rem; }
/* On a phone the icon and the title share the first line; points and the
   buttons wrap under them rather than pushing the title onto a line of its own. */
@media (max-width: 520px) {
  .mission__t { flex: 1 1 calc(100% - 36px - 0.85rem); }
  .mission__actions { margin-left: auto; }
}
.mission .field { flex-wrap: nowrap; }
.mission .field input { flex: 1 1 80px; padding-inline: 0.85rem; }

/* ── Fields ────────────────────────────────────────────── */
.field { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.field input {
  flex: 1 1 220px; min-width: 0;
  padding: 0.7rem 1rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  font-family: var(--sans); font-size: var(--s--1); color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus-visible { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px var(--orange-pale); }
.field input[data-mono] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }

/* ── Status pills ──────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.8rem 0.32rem 0.65rem; border-radius: 999px;
  font-size: var(--s--2); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.status__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.status--soon { background: var(--card); border: 1px solid var(--glass-ring); color: var(--ink-3); }
.status--soon .status__dot { background: var(--ink-3); }
.status--done { background: color-mix(in srgb, var(--ok) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--glass-ring)); color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }
.status--done .status__dot { background: var(--ok); }

/* ── Wallet ────────────────────────────────────────────── */
.wallet { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 1.3rem 1.45rem; display: grid; gap: 0.95rem; background: var(--paper); transition: all .2s ease; }
.wallet.is-set { border-color: color-mix(in srgb, var(--ok) 45%, var(--glass-ring)); background: color-mix(in srgb, var(--ok) 5%, var(--card)); box-shadow: 0 6px 20px -10px rgba(94,143,90,.3); }
.wallet__addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: 0.86rem;
  word-break: break-all; margin: 0.6rem 0 0.4rem;
  padding: 0.75rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink);
}

/* ── Done ───────────────────────────────────────────────── */
.done-banner { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 0.35rem; }
.done-tick {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--orange-pale), var(--card));
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  box-shadow: 0 6px 20px -6px rgba(238,132,66,.45), 0 0 0 4px rgba(238,132,66,.1);
}
.done-tick.is-playing { animation: tickPop .6s cubic-bezier(.175, .885, .32, 1.275) both; }
.done-tick__svg { width: 32px; height: 32px; display: block; }
.done-tick__circle { stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 145; stroke-dashoffset: 0; }
.done-tick__check { stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 38; stroke-dashoffset: 0; }
.done-tick.is-playing .done-tick__circle { animation: strokeCircle .55s ease-out both; }
.done-tick.is-playing .done-tick__check { animation: strokeCheck .38s .28s ease-out both; }

@keyframes tickPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 65% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes strokeCircle { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes strokeCheck { from { stroke-dashoffset: 38; } to { stroke-dashoffset: 0; } }

.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; }

.share { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 780px) { .share { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 1.8rem; } }
.share__left { display: grid; gap: 0.85rem; justify-items: start; }
.share__card { display: grid; gap: 0.5rem; }
.reflink { display: flex; gap: 0.5rem; width: 100%; }
.reflink input {
  flex: 1 1 auto; min-width: 0; padding: 0.65rem 0.9rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line-2);
  font-family: var(--sans); font-size: var(--s--2); color: var(--ink-2);
}
.cardprev__frame { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1200 / 630; box-shadow: 0 8px 24px -12px rgba(42,27,20,.25); }
.cardprev__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.reftally { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.reftally__n { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.reftally__k { font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* ── The invite and closed pages, server rendered ──────── */
.invite { min-height: 100vh; display: grid; place-items: center; padding: var(--pad); }
.invite__card { width: min(100%, 600px); background: var(--card); border: 1px solid var(--glass-ring); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--glass-shadow); }
.invite__art { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.invite__in { padding: clamp(1.3rem, 4vw, 2.1rem); display: grid; gap: 0.8rem; justify-items: start; }
.invite__h { font-size: var(--s-2); font-weight: 800; }
.invite__p { color: var(--ink-2); font-size: var(--s--1); }

/* ── Footer ────────────────────────────────────────────── */
.foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 0.85rem var(--pad); background: var(--soil); }
.foot__in { width: min(100%, 820px); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.foot__mark { width: 22px; height: 22px; border-radius: 50%; }
.foot__tag { font-size: var(--s--2); color: var(--ink-3); font-weight: 600; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; }
.foot__nav a { font-size: var(--s--2); font-weight: 800; color: var(--ink-2); text-decoration: none; }
.foot__nav a:hover { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]), .done-tick.is-playing, .done-tick.is-playing .done-tick__circle, .done-tick.is-playing .done-tick__check { animation: none; }
  .btn:hover, .mission:hover { transform: none; }
}