/* ============================================================
   CTDaA CTF — SOC / Cyber-Defense Konsole
   Basis: blau-schwarze Konsole · Cyan = interaktiv
   Severity-System (grün/amber/rot) trägt Bedeutung, nicht Deko
   Monospace ausschliesslich fuer Maschinendaten (IDs, Keys, Flags)
   ============================================================ */
:root{
  --bg:#0a0f1a;
  --bg-2:#0d1524;
  --panel:#111b2e;
  --panel-2:#16223a;
  --line:#22314f;
  --line-2:#2d4269;
  --ink:#e8eefb;
  --muted:#8ea2c2;
  --faint:#5c6d8c;

  --accent:#37c9f0;        /* Cyan — interaktiv */
  --accent-2:#5b83ff;      /* Blau — Verlauf/Sekundaer */
  --ok:#36d39a;            /* geloest / Launch */
  --warn:#f5b13f;          /* Warnung */
  --crit:#ff6b81;          /* kritisch / loeschen */

  --glow-accent:rgba(55,201,240,.28);
  --glow-ok:rgba(54,211,154,.30);
  --radius:14px;
  --page-width:1440px;     /* Inhaltsbreite fuer Leiste und Seiten */
  --page-pad:2rem;
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{
  margin:0;color:var(--ink);font:15px/1.55 var(--sans);
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(91,131,255,.10), transparent 60%),
    radial-gradient(900px 480px at 8% 0%, rgba(55,201,240,.08), transparent 55%),
    linear-gradient(var(--bg-2),var(--bg));
  background-attachment:fixed;
  min-height:100vh;
}
/* feines Dashboard-Raster, sehr dezent */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,150,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,200,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 40%,transparent 85%);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1{font-size:1.55rem;letter-spacing:-.01em;margin:.2rem 0 1.1rem}
h3{margin:.1rem 0 .85rem;font-size:1.05rem;letter-spacing:-.01em}

code{font-family:var(--mono);font-size:.9em;background:#0a1120;color:#cfe6ff;
  padding:.08rem .38rem;border:1px solid var(--line);border-radius:6px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(10,16,28,.78);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar::after{ /* einziger Akzentstrich */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  opacity:.6;
}
.topbar-inner{
  max-width:var(--page-width);margin:0 auto;padding:.55rem var(--page-pad);
  display:flex;align-items:center;gap:.85rem;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:#fff;letter-spacing:.02em;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--accent);filter:drop-shadow(0 0 6px var(--glow-accent))}
.brand .wordmark{font-family:var(--mono);font-size:.98rem;font-weight:600}
.brand .dim{color:var(--faint)}

/* Hauptnavigation: Segment-Gruppe, aktive Seite hervorgehoben */
.mainnav{
  display:flex;align-items:center;gap:.1rem;padding:.25rem;
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;
}
.mainnav a{
  display:flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.42rem .62rem;border-radius:9px;
  color:var(--muted);font-size:.88rem;font-weight:500;
  transition:color .15s,background .15s;
}
.mainnav a:hover{color:var(--ink);background:rgba(255,255,255,.05);text-decoration:none}
.mainnav a.active{
  color:var(--accent);background:rgba(55,201,240,.12);
  box-shadow:inset 0 0 0 1px rgba(55,201,240,.28);
}
.mainnav .ico{flex-shrink:0;opacity:.85}
.mainnav a.active .ico{opacity:1}

/* Benutzerbereich rechts */
.usernav{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}
.userchip{display:flex;align-items:center;gap:.55rem;padding:.2rem .7rem .2rem .2rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);
  transition:border-color .15s,background .15s}
.userchip:hover{border-color:var(--accent);background:rgba(55,201,240,.06);text-decoration:none}
.userchip.active{border-color:rgba(55,201,240,.5);background:rgba(55,201,240,.1)}
.userchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avatar{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#04121c;font-weight:700;font-size:.82rem;
}
.userinfo{display:flex;flex-direction:column;line-height:1.15}
.username{color:var(--ink);font-size:.84rem;font-weight:600;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userrole{color:var(--faint);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.iconbtn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:color .15s,border-color .15s,background .15s;
}
.iconbtn:hover{color:var(--crit);border-color:rgba(255,107,129,.45);background:rgba(255,107,129,.08)}
.mainnav a:focus-visible,.iconbtn:focus-visible,.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Mittlere Breite: nur Avatar statt Name + Rolle */
@media (max-width:1200px){
  .userinfo{display:none}
  .userchip{padding:.2rem}
}

/* Schmale Bildschirme: Navigation in eigene, horizontal scrollbare Zeile */
@media (max-width:1040px){
  .topbar-inner{flex-wrap:wrap;row-gap:.5rem;padding:.5rem 1rem}
  .mainnav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .userinfo{display:none}
  .userchip{padding:.2rem}
  /* breite Tabellen scrollen in sich statt die Seite zu verbreitern */
  table{display:block;overflow-x:auto}
}

main{max-width:var(--page-width);margin:0 auto;padding:1.7rem var(--page-pad) 4.5rem}

/* ---------- Panels ---------- */
.card{
  position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.25rem;margin:0 0 1.2rem;
}
.card.narrow{max-width:380px;margin:4rem auto}
.card.login{max-width:420px}
.card.narrow-wide{max-width:560px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin:.4rem 0 1rem;font-weight:700;color:#fff;letter-spacing:.02em}
.login-brand .mark{color:var(--accent);filter:drop-shadow(0 0 10px var(--glow-accent))}
.login-brand .wordmark{font-family:var(--mono);font-size:1.25rem;font-weight:600}
.login-brand .dim{color:var(--faint)}
.card.login h1{text-align:center;font-size:1.25rem;line-height:1.3}

/* ---------- Uebersicht (Admin-Startseite) ---------- */
.hero-brand{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;margin:.6rem 0 1.6rem}
.hero-brand .mark{color:var(--accent);filter:drop-shadow(0 0 12px var(--glow-accent))}
.hero-brand .wordmark{font-family:var(--mono);font-size:1.25rem;font-weight:600;color:#fff;letter-spacing:.02em}
.hero-brand .dim{color:var(--faint)}
.hero-brand h1{margin:.5rem 0 .1rem;font-size:1.45rem}
.hero-brand p{margin:0}
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.guide-item{display:flex;flex-direction:column;gap:.45rem;margin:0;color:var(--ink);
  transition:border-color .15s,transform .1s,box-shadow .15s}
.guide-item:hover{border-color:var(--accent);box-shadow:0 10px 30px -18px var(--glow-accent);text-decoration:none;transform:translateY(-2px)}
.guide-item h3{margin:0}
.guide-item p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;flex:1}
.guide-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:var(--accent);background:rgba(55,201,240,.1);border:1px solid rgba(55,201,240,.25)}
.guide-icon .ico{width:18px;height:18px}
.guide-stat{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
ol.steps{margin:.3rem 0 .6rem;padding-left:1.2rem;color:var(--muted)}
ol.steps li{margin:.35rem 0}

/* ---------- Formulare ---------- */
label{display:block;margin:.7rem 0;color:var(--muted);font-size:.92rem}
input,textarea,select{
  width:100%;margin-top:.3rem;padding:.6rem .7rem;color:var(--ink);
  background:#0a1120;border:1px solid var(--line);border-radius:9px;
  font:inherit;transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--glow-accent);
}
textarea{resize:vertical}
textarea.mono,.mono{font-family:var(--mono);font-size:13px;letter-spacing:.01em}
.checkbox{display:flex;align-items:center;gap:.55rem}
.checkbox input{width:auto;margin:0}

/* ---------- Buttons ---------- */
button,.btn{
  cursor:pointer;border:1px solid transparent;border-radius:9px;
  padding:.58rem 1.05rem;font:inherit;font-weight:600;letter-spacing:.01em;
  background:var(--accent);color:#04121c;display:inline-block;
  transition:filter .15s,box-shadow .15s,transform .05s;
}
button:hover,.btn:hover{filter:brightness(1.07);text-decoration:none}
button:active{transform:translateY(1px)}
button.ghost,.ghost{background:var(--panel-2);color:var(--ink);border-color:var(--line-2)}
button.ghost:hover,.ghost:hover{border-color:var(--accent);filter:none}
button.play,.play{ /* der eine Glow-Moment: Launch */
  background:linear-gradient(180deg,#43e0aa,var(--ok));color:#032018;
  box-shadow:0 0 0 1px rgba(54,211,154,.4),0 6px 20px -6px var(--glow-ok);
}
button.play:hover{box-shadow:0 0 0 1px rgba(54,211,154,.6),0 8px 26px -6px var(--glow-ok)}
button.danger,.danger{background:transparent;color:var(--crit);border-color:rgba(255,107,129,.45)}
button.danger:hover{background:rgba(255,107,129,.12);filter:none}
button.small,.small.btn{padding:.32rem .62rem;font-size:.82rem}
.default-submit{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
button:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}

/* ---------- Layout-Helfer ---------- */
.row{display:flex;gap:.65rem;align-items:flex-end}
.row.wrap{flex-wrap:wrap}
.row .grow,.grow{flex:1 1 200px}
.row > label{margin-bottom:0}  /* Buttons buendig mit dem Eingabefeld */

/* ---------- Task-Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:1rem}
.task{display:block;color:var(--ink);transition:border-color .15s,transform .1s,box-shadow .15s}
.task:hover{border-color:var(--accent);box-shadow:0 10px 30px -18px var(--glow-accent);text-decoration:none;transform:translateY(-2px)}
.task.is-solved{border-color:rgba(54,211,154,.55)}
.task.is-solved::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:3px 0 0 3px;
  background:linear-gradient(var(--ok),transparent);
}
.task.is-locked{opacity:.6;border-style:dashed;cursor:not-allowed}
.task.is-locked:hover{border-color:var(--line-2);box-shadow:none;transform:none}
.task-top{display:flex;gap:.4rem;margin-bottom:.5rem}
.task h3{margin:.1rem 0 .35rem}

/* ---------- Badges = Severity-Chips ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;
  padding:.08rem .6rem;font-family:var(--mono);font-size:.74rem;color:var(--muted);
}
.badge.ok{background:rgba(54,211,154,.14);color:#8ff0cd;border-color:rgba(54,211,154,.4)}
.badge.admin{background:rgba(55,201,240,.12);color:var(--accent);border-color:rgba(55,201,240,.4)}
.badge.warn{background:rgba(245,177,63,.12);color:#ffd48a;border-color:rgba(245,177,63,.4)}
.badge.crit{background:rgba(255,107,129,.12);color:#ffb3c0;border-color:rgba(255,107,129,.4)}

/* ---------- MFA ---------- */
.mfa-setup{display:flex;gap:1.5rem;align-items:flex-start;margin-top:.6rem}
.mfa-qr{width:200px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#fff}
.mfa-qr svg{display:block;width:100%;height:auto}
.mfa-secret{font-size:1rem;letter-spacing:.08em;color:var(--ink);user-select:all;word-break:break-all;margin-top:0}
.mfa-disable{margin-top:1rem}
input.otp-input{font-family:var(--mono);font-size:1.15rem;letter-spacing:.25em}
.card h3 .badge{margin-left:.4rem;vertical-align:middle}

/* ---------- Audit: Reiter ---------- */
.subnav{display:flex;gap:.3rem;margin:-.2rem 0 1.1rem;border-bottom:1px solid var(--line)}
.subnav a{display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;margin-bottom:-1px;color:var(--muted);
  font-weight:600;font-size:.92rem;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.subnav .ico{opacity:.85}
.warn-text{color:var(--warn);font-weight:600}
p.inactive{margin:.9rem 0 0;color:var(--muted)}
p.inactive strong{color:var(--warn)}

/* ---------- Audit: Anmeldungen / Aktivitaet ---------- */
.filterbar{align-items:center;gap:1rem}
.filterbar label{margin:0;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.filterbar select{width:auto;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1rem}
.stat{display:flex;flex-direction:column;gap:.3rem;margin:0}
.stat-value{font-family:var(--mono);font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1.1}
.stat-value.warn{color:var(--warn)}
.stat-label{color:var(--muted);font-size:.82rem;line-height:1.4}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.split > .card{margin-top:0}
.nowrap{white-space:nowrap}
td.ua{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.55rem .65rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--faint);font-weight:600;font-size:.78rem;letter-spacing:.03em}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(120,150,200,.05)}
/* Zelle bleibt table-cell (sonst verrutschen die Zeilenraender); Flex im inneren Container */
td.actions .actions-inner{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
td.actions form.edit-form{display:flex;gap:.4rem;align-items:center}
td.actions form{margin:0}
.inline-edit{margin:0;padding:.3rem .5rem;font-size:.9rem;min-width:9rem}
select.inline-edit{width:auto;min-width:0}

/* ---------- Text-Utilities ---------- */
.muted{color:var(--muted)}
.small{font-size:.82rem}
.faint,.hint{font-size:.85rem}
.hint{color:var(--warn)}
.key-hint{margin:.35rem 0 0}
.key-hint::before{content:"\24D8";margin-right:.35rem;color:var(--accent)}
.question{font-size:1.06rem;line-height:1.5}
.desc{white-space:pre-wrap;color:var(--muted);margin-top:.55rem}
.back{color:var(--faint);font-family:var(--mono);font-size:.85rem}
.back:hover{color:var(--muted)}

/* ---------- Status-Banner ---------- */
.flash{
  position:relative;padding:.65rem .85rem .65rem 1rem;border-radius:9px;margin:0 0 1.1rem;
  border:1px solid var(--line);background:var(--panel);padding-left:1.1rem;
}
.flash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.flash.ok{background:rgba(54,211,154,.10);border-color:rgba(54,211,154,.35);color:#c7f6e5}
.flash.ok::before{background:var(--ok)}
.flash.error{background:rgba(255,107,129,.10);border-color:rgba(255,107,129,.35);color:#ffd3da}
.flash.error::before{background:var(--crit)}
.flash.warn{background:rgba(245,177,63,.10);border-color:rgba(245,177,63,.35);color:#ffe2a8}
.flash.warn::before{background:var(--warn)}
.flash.crit{background:rgba(255,107,129,.10);border-color:rgba(255,107,129,.35);color:#ffd3da}
.flash.crit::before{background:var(--crit)}

/* ---------- Terminal / Telemetrie ---------- */
pre.events{
  background:#070c16;border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;
  overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:#bfe0ff;
  white-space:pre;box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
.answer{font-family:var(--mono);font-size:1rem;color:#8ff0cd}
pre.events .key-line{display:block;margin:0 -.9rem;padding:0 .9rem;background:rgba(245,177,63,.14);
  border-left:3px solid var(--warn);color:#ffe2a8}
h4.section{margin:1.4rem 0 .2rem;color:var(--accent);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
h4.section:first-of-type{margin-top:.4rem}

details.help,details{margin-top:1rem;color:var(--muted)}
details.help ul{margin:.5rem 0 0;padding-left:1.15rem}
details summary{cursor:pointer;color:var(--accent)}
details summary:hover{text-decoration:underline}

/* ---------- Setup-Installer ---------- */
ul.steps{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.9rem}
ul.steps li{padding:.3rem 0;border-bottom:1px solid var(--line)}
ul.steps li.ok{color:#a9f0d6}
ul.steps li.err{color:#ffd3da}

/* ---------- Feinschliff ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){
  main{padding:1.2rem 1rem 3.5rem}
  .topbar{padding:.6rem 1rem}
  h1{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .task:hover{transform:none}
}

/* ---------- Fragen einer Challenge ---------- */
.qcard.current{border-color:rgba(55,201,240,.5)}
.qcard.is-solved{border-color:rgba(54,211,154,.45)}
.qcard.is-solved input[readonly]{border-color:rgba(54,211,154,.55);background:rgba(54,211,154,.08);color:#c7f6e5}
.qcard.next-up{border-color:var(--ok);box-shadow:0 0 0 1px rgba(54,211,154,.45),0 10px 30px -14px var(--glow-ok)}
.qnext{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin:.9rem 0 0;padding:.7rem .9rem;border:1px solid rgba(54,211,154,.55);border-radius:10px;
  background:rgba(54,211,154,.14);color:#c7f6e5;
}
.btn-next{
  background:linear-gradient(180deg,#43e0aa,var(--ok));color:#032018;
  box-shadow:0 0 0 1px rgba(54,211,154,.4),0 6px 20px -6px var(--glow-ok);
}
.qcard.locked{opacity:.6;border-style:dashed}
.qcard.locked p{margin:.2rem 0 0}
.qedit{border:1px solid var(--line-2);border-radius:var(--radius);padding:.9rem 1rem 1rem;margin:0 0 1rem;background:var(--panel-2)}
.qedit-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}
.qedit-actions{display:flex;gap:.35rem}
.qedit-actions button:disabled{opacity:.35;cursor:default}
.play-form{margin:.4rem 0 .2rem}
.play-form button{margin:0}
tr.me td{background:rgba(55,201,240,.07)}

/* ---------- Challenge geschafft: Animation ---------- */
.celebrate{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(4,12,24,.72);backdrop-filter:blur(3px);animation:cel-fade .3s ease-out both;
}
.celebrate.is-closing{animation:cel-out .35s ease-in both}
.celebrate-card{
  position:relative;max-width:30rem;width:100%;text-align:center;padding:1.6rem 1.4rem 1.4rem;
  background:var(--panel);border:1px solid rgba(54,211,154,.6);border-radius:16px;
  box-shadow:0 0 0 1px rgba(54,211,154,.35),0 24px 70px -20px var(--glow-ok);
  animation:cel-pop .55s cubic-bezier(.2,1.4,.4,1) .1s both;
}
.celebrate-card h2{margin:.4rem 0 .5rem;color:#c7f6e5}
.celebrate-card p{margin:.4rem 0}
.celebrate-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem !important}
.celebrate-check{width:84px;height:84px;display:block;margin:0 auto}
.celebrate-check .cc-circle{stroke:var(--ok);stroke-width:2.4;stroke-dasharray:145;stroke-dashoffset:145;animation:cel-draw .7s ease-out .2s forwards}
.celebrate-check .cc-tick{stroke:var(--ok);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:cel-draw .4s ease-out .85s forwards}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{
  position:absolute;top:-24px;display:block;border-radius:2px;opacity:0;
  animation-name:cel-fall;animation-timing-function:cubic-bezier(.3,.6,.6,1);animation-fill-mode:forwards;
}
@keyframes cel-fade{from{opacity:0}to{opacity:1}}
@keyframes cel-out{to{opacity:0}}
@keyframes cel-pop{from{opacity:0;transform:scale(.7) translateY(14px)}to{opacity:1;transform:none}}
@keyframes cel-draw{to{stroke-dashoffset:0}}
@keyframes cel-fall{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx,0),105vh,0) rotate(var(--rot,540deg))}
}
@media (prefers-reduced-motion:reduce){
  .celebrate,.celebrate-card{animation:none}
  .celebrate-check .cc-circle,.celebrate-check .cc-tick{animation:none;stroke-dashoffset:0}
}