/* ============================================================
   Викторина АТОМДАТА · экраны участника
   ============================================================ */
.quiz-root { min-height: 100dvh; display: flex; justify-content: center; }
.quiz-col {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 24px;
}
.screen { display: none; flex: 1 1 auto; flex-direction: column; position: relative; }
.screen.is-active { display: flex; animation: atdFade 400ms var(--atd-ease) both; }
.spacer { flex: 1 1 auto; }

.logo-lg { width: 212px; height: auto; display: block; position: relative; }
.logo-md { width: 188px; height: auto; display: block; position: relative; }
.logo-sm { width: 152px; height: auto; display: block; }

h1.hero {
  margin: 14px 0 0;
  font-size: 35px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  position: relative;
}
h2.title {
  margin: 12px 0 0;
  font-size: 31px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
  position: relative;
}
.subtitle { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--atd-grey-400); position: relative; }
.footnote { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--atd-grey-600); position: relative; }
.footnote.center { text-align: center; }

/* --- Стартовый экран ------------------------------------- */
.stat-row { margin-top: 28px; display: flex; gap: 12px; position: relative; }
.stat-card {
  flex: 1 1 0;
  background: var(--atd-bg-surface);
  border: 1px solid var(--atd-grey-900);
  border-radius: 12px;
  padding: 16px 16px 18px;
  box-shadow: var(--atd-shadow-card);
}
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.stat-num { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--atd-ocean-blue); }
.stat-cap { margin-top: 10px; font-size: 14px; color: var(--atd-grey-400); }
.stat-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--atd-blue-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600; color: #81D8FE; position: relative;
}
.clock-h, .clock-m { position: absolute; background: #81D8FE; }
.clock-h { left: 50%; top: 50%; width: 1.5px; height: 11px; transform: translate(-50%, -100%); }
.clock-m { left: 50%; top: 50%; width: 9px; height: 1.5px; transform: translateY(-50%); }

.orbits { position: relative; flex: 1 1 auto; min-height: 150px; overflow: hidden; perspective: 900px; pointer-events: none; }
.orbits > .anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.orbit { position: absolute; border-radius: 50%; }
.orbit-a {
  left: -170px; top: -170px; width: 340px; height: 340px;
  background: conic-gradient(from 0deg, rgba(191,229,251,0) 0deg, rgba(6,178,254,.9) 60deg, rgba(0,51,255,.55) 130deg, rgba(191,229,251,0) 185deg, rgba(191,229,251,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 97%, transparent 98%);
  mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 97%, transparent 98%);
  animation: atdOrbitA 22s linear infinite;
}
.orbit-b {
  left: -140px; top: -140px; width: 280px; height: 280px;
  background: conic-gradient(from 150deg, rgba(0,51,255,0) 0deg, rgba(0,51,255,.6) 58deg, rgba(6,178,254,.75) 128deg, rgba(129,216,254,0) 182deg, rgba(129,216,254,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 85%, #000 86%, #000 97%, transparent 98%);
  mask: radial-gradient(closest-side, transparent 85%, #000 86%, #000 97%, transparent 98%);
  animation: atdOrbitC 26s linear infinite;
}
.orbit-c {
  left: -110px; top: -110px; width: 220px; height: 220px;
  background: conic-gradient(from 280deg, rgba(129,216,254,0) 0deg, rgba(129,216,254,.9) 62deg, rgba(6,178,254,.5) 132deg, rgba(129,216,254,0) 188deg, rgba(129,216,254,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 87%, #000 98%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 86%, #000 87%, #000 98%, transparent 99%);
  animation: atdOrbitB 30s linear infinite;
}
.dots-bl {
  position: absolute; bottom: -24px; left: -20px; width: 180px; height: 210px; pointer-events: none;
  background-image: radial-gradient(var(--atd-blue-soft) 1.1px, transparent 1.2px);
  background-size: 15px 15px;
  animation: atdDrift 30s linear infinite;
  -webkit-mask-image: linear-gradient(35deg, #000 0%, transparent 68%);
  mask-image: linear-gradient(35deg, #000 0%, transparent 68%);
}
.date-row { margin-top: 22px; display: flex; align-items: flex-start; gap: 12px; position: relative; }
.cal { flex: 0 0 auto; position: relative; width: 22px; height: 22px; border: 1.5px solid #81D8FE; border-radius: 4px; margin-top: 2px; }
.cal i { position: absolute; background: #81D8FE; }
.cal .bar { left: 0; right: 0; top: 3.5px; height: 1.5px; }
.cal .p1 { left: 4px; top: -4px; width: 1.5px; height: 5px; }
.cal .p2 { right: 4px; top: -4px; width: 1.5px; height: 5px; }
.cal .d1 { left: 4px; bottom: 4px; width: 4px; height: 4px; background: var(--atd-blue-soft); }
.cal .d2 { left: 11px; bottom: 4px; width: 4px; height: 4px; background: var(--atd-blue-soft); }

/* --- Фон «серверный зал» --------------------------------- */
.hall {
  position: absolute; top: -24px; right: -24px; width: 250px; height: 340px;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(220deg, #000 0%, rgba(0,0,0,.5) 40%, transparent 78%);
  mask-image: linear-gradient(220deg, #000 0%, rgba(0,0,0,.5) 40%, transparent 78%);
}
.hall .grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, var(--atd-blue-pale) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, #E8F3FE 0 1px, transparent 1px 15px); }
.hall .rack { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(6,178,254,.22) 0 3px, transparent 3px 26px); background-size: 100% 15px; }
.hall .scan { position: absolute; left: 0; right: 0; height: 70px; background: linear-gradient(180deg, rgba(6,178,254,0) 0%, rgba(6,178,254,.16) 50%, rgba(6,178,254,0) 100%); animation: atdHallScan 7s cubic-bezier(.4,0,.6,1) infinite; }

/* --- Экран данных участника ------------------------------ */
.field {
  display: block;
  background: var(--atd-bg-surface);
  border: 1px solid var(--atd-grey-900);
  border-radius: 16px;
  padding: 16px 20px 18px;
  box-shadow: var(--atd-shadow-card);
  transition: background 220ms var(--atd-ease), border-color 220ms var(--atd-ease);
}
.field.is-invalid { background: var(--atd-alert-bg); border-color: var(--atd-alert-border); }
.field-name { font-size: 15px; font-weight: 600; color: #000; }
.field-name span { color: var(--atd-ocean-blue); }
.field input {
  margin-top: 6px; display: block; width: 100%;
  border: none; outline: none; background: transparent;
  font-size: 16px; line-height: 1.35; color: #000; padding: 0;
}
.field-hint { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--atd-ocean-blue); }
.fields { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }

.consent-row { margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; position: relative; }
.checkbox {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 5px;
  border: 1.5px solid var(--atd-grey-700); background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 160ms var(--atd-ease), border-color 160ms var(--atd-ease);
}
.checkbox i { width: 12px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); opacity: 0; transition: opacity 160ms; }
.checkbox.is-on { background: var(--atd-ocean-blue); border-color: var(--atd-ocean-blue); }
.checkbox.is-on i { opacity: 1; }
.checkbox.is-invalid { background: var(--atd-alert-bg); border-color: var(--atd-alert-border); }
.consent-text { flex: 1 1 auto; font-size: 14px; line-height: 1.5; color: var(--atd-grey-400); }
.link { color: var(--atd-ocean-blue); cursor: pointer; }

/* --- Экран согласия ------------------------------------- */
.legal { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.6; color: var(--atd-grey-400); text-wrap: pretty; }
.legal h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--atd-blue-800); }
.legal .req { background: #fff; border: 1px solid var(--atd-grey-900); border-radius: 14px; padding: 16px 18px; }
.legal .req b { display: block; font-size: 14px; color: #000; }
.legal .req dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.legal .req dt { color: var(--atd-grey-600); }
.legal .req dd { margin: 0; }
.back-btn { align-self: flex-start; display: flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 0; font-size: 14px; font-weight: 600; color: var(--atd-ocean-blue); cursor: pointer; }
.back-btn i { width: 9px; height: 9px; border-left: 1.8px solid var(--atd-ocean-blue); border-bottom: 1.8px solid var(--atd-ocean-blue); transform: rotate(45deg); }
.pair { display: flex; gap: 10px; }
.pair button { flex: 1 1 0; }

/* --- Экран правил --------------------------------------- */
.rules { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.rule {
  position: relative; display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 16px; padding: 18px; overflow: hidden;
  box-shadow: var(--atd-shadow-card);
  animation: atdRise 460ms var(--atd-ease) both;
}
.rule:nth-child(2) { animation-delay: 100ms; }
.rule:nth-child(3) { animation-delay: 200ms; }
.rule .ring { position: relative; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--atd-grey-900); display: flex; align-items: center; justify-content: center; }
.rule .ring::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,51,255,0) 0deg, rgba(0,51,255,0) 250deg, rgba(6,178,254,.65) 340deg, rgba(0,51,255,.9) 358deg, rgba(0,51,255,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93%);
  mask: radial-gradient(closest-side, transparent 92%, #000 93%);
  animation: atdSpin 7s linear infinite;
}
.rule:nth-child(2) .ring::before { animation-delay: .9s; }
.rule:nth-child(3) .ring::before { animation-delay: 1.8s; }
.rule .num { font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--atd-ocean-blue); }
.rule .txt { position: relative; flex: 1 1 auto; padding-right: 62px; font-size: 15px; line-height: 1.5; color: #000; text-wrap: pretty; }
.rule .ghost { position: absolute; right: 16px; top: 50%; width: 56px; height: 56px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.rule .ghost > * { animation: atdFloat 6.5s ease-in-out infinite; }
.rule .ghost .glyph { width: 46px; height: 46px; color: var(--atd-blue-mist); }
.rule .ghost .clock { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--atd-blue-mist); }
.rule .ghost .clock i { position: absolute; background: var(--atd-blue-mist); }
.rule .ghost .clock .h { left: 50%; top: 50%; width: 2px; height: 12px; transform: translate(-50%, -100%); }
.rule .ghost .clock .m { left: 50%; top: 50%; width: 10px; height: 2px; transform: translateY(-50%); transform-origin: 0 50%; animation: atdSpin 9s linear infinite; }

.divider { margin-top: 26px; display: flex; align-items: center; gap: 12px; position: relative; }
.divider .line { flex: 1 1 auto; height: 1.5px; background: var(--atd-grey-900); overflow: hidden; }
.divider .line i { display: block; width: 34%; height: 100%; background: linear-gradient(90deg, rgba(6,178,254,0) 0%, var(--atd-pool-blue) 55%, rgba(0,51,255,0) 100%); }
.divider .line:first-child i { animation: atdCurrentX 5s linear infinite; }
.divider .line:last-child i { animation: atdCurrentXRev 5s linear infinite; }
.divider img { flex: 0 0 auto; width: 38px; height: 38px; display: block; }

/* --- Экран вопроса -------------------------------------- */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-count { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--atd-grey-400); font-variant-numeric: tabular-nums; }
.timer-row { margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.timer { font-size: 38px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--atd-ocean-blue); }
.timer.is-low { color: var(--atd-blue-deep); }
.dots { display: flex; gap: 7px; padding-bottom: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--atd-grey-800); transition: background 220ms; }
.dots i.is-done { background: var(--atd-ocean-blue); }
.dots i.is-now { background: var(--atd-pool-blue); }
.track { margin-top: 12px; height: 3px; background: var(--atd-grey-800); overflow: hidden; }
.track i { display: block; height: 100%; background: var(--atd-ocean-blue); transition: width 1000ms linear; }
.q-text { margin-top: 26px; font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; min-height: 82px; animation: atdRise 260ms var(--atd-ease) both; }
.options { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 16px 13px 13px; min-height: 58px;
  border: 1px solid var(--atd-grey-800); border-radius: 4px; background: #fff;
  font-size: 15px; line-height: 1.35; color: #000; cursor: pointer;
  transition: border-color 220ms var(--atd-ease), background 220ms var(--atd-ease), opacity 220ms var(--atd-ease);
}
.option .letter {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  background: var(--atd-bg-page); color: var(--atd-grey-400);
  transition: background 220ms, color 220ms;
}
.option.is-picked { border-color: var(--atd-ocean-blue); background: #F5FAFF; box-shadow: inset 0 0 0 1px var(--atd-ocean-blue); }
.option.is-picked .letter { background: var(--atd-ocean-blue); color: #fff; }
.option.is-dimmed { opacity: .4; }

/* --- Обработка результата -------------------------------- */
.processing { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.processing .cap { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--atd-ocean-blue); }
.processing .bar { width: 180px; height: 2px; background: var(--atd-grey-800); overflow: hidden; }
.processing .bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--atd-pool-blue) 0%, var(--atd-ocean-blue) 100%); animation: atdScan 900ms var(--atd-ease) infinite; }

/* --- Результат ------------------------------------------- */
.pin-stage { margin-top: 8px; display: flex; justify-content: center; perspective: 900px; }
.pin-tilt { transform-style: preserve-3d; will-change: transform; transition: transform 220ms var(--atd-ease); }
.pin-in { transform-style: preserve-3d; animation: atdPinIn 1500ms var(--atd-ease) both; }
.pin-sway { transform-style: preserve-3d; animation: atdPinSway 7s ease-in-out 1500ms infinite; }

.pin { position: relative; width: 190px; height: 212px; }
.pin > div { position: absolute; }
.hex { clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); }
.pin .plate { inset: 0; }
.pin .rim { inset: 5px; }
.pin .face, .pin .grid { inset: 11px; }
.pin .content {
  inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 0 20px 44px;
}
.pin .content .glyph { width: 40px; height: 40px; }
.pin .content .name { font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.2; }
.pin .content .sep { width: 34px; height: 1px; }
.pin .band { inset: 11px; display: flex; align-items: flex-end; pointer-events: none; }
.pin .band > div { width: 100%; height: 42px; background: linear-gradient(180deg, #FFFFFF 0%, #EDF1FB 100%); display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.pin .band img { width: 24px; height: 24px; display: block; }
.pin .gloss { inset: 0; overflow: hidden; pointer-events: none; }
.pin .gloss .sweep { position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%); animation: atdGloss 6.5s ease-in-out 1600ms infinite; }
.pin .gloss .spec { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; background: radial-gradient(closest-side, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%); transform: translate(0, -34%); transition: transform 140ms linear; will-change: transform; }

.pin-trainee { filter: drop-shadow(0 16px 22px rgba(0,25,126,.24)); }
.pin-trainee .plate { background: linear-gradient(145deg, #FFFFFF 0%, #B0B1B6 20%, #545557 40%, #D0D1D7 54%, #909195 72%, #38383A 90%, #B0B1B6 100%); }
.pin-trainee .rim { background: linear-gradient(325deg, #FFFFFF 0%, #909195 30%, #38383A 62%, #B0B1B6 100%); }
.pin-trainee .face { background: linear-gradient(160deg, #E4E4EA 0%, #D0D1D7 46%, #B0B1B6 100%); }
.pin-trainee .grid { background: repeating-linear-gradient(0deg, rgba(0,51,255,.10) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(0,51,255,.10) 0 1px, transparent 1px 10px); }
.pin-trainee .content { color: var(--atd-blue-active); }
.pin-trainee .content .glyph { background: var(--atd-ocean-blue); }
.pin-trainee .content .sep { background: rgba(0,38,191,.35); }

.pin-engineer { filter: drop-shadow(0 18px 26px rgba(0,25,126,.32)); }
.pin-engineer .plate { background: linear-gradient(145deg, #FFFFFF 0%, #B0B1B6 18%, #38383A 42%, #E4E4EA 54%, #727376 74%, #212122 92%, #909195 100%); }
.pin-engineer .rim { background: linear-gradient(325deg, #FFFFFF 0%, #909195 26%, #212122 60%, #D0D1D7 100%); }
.pin-engineer .face { background: linear-gradient(160deg, #0372FF 0%, #0033FF 45%, #00197E 100%); }
.pin-engineer .grid { background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px); }
.pin-engineer .content { color: #fff; }
.pin-engineer .content .glyph { background: #fff; }
.pin-engineer .content .sep { background: rgba(255,255,255,.45); }

.pin-expert { filter: drop-shadow(0 22px 30px rgba(0,25,126,.42)); }
.pin-expert .plate { background: linear-gradient(145deg, #FFFFFF 0%, #D0D1D7 14%, #545557 34%, #FFFFFF 50%, #909195 66%, #000000 88%, #B0B1B6 100%); }
.pin-expert .rim { background: linear-gradient(325deg, #FFFFFF 0%, #B0B1B6 22%, #000000 58%, #E4E4EA 100%); }
.pin-expert .face { background: linear-gradient(160deg, #06B2FE 0%, #0033FF 46%, #000000 100%); }
.pin-expert .grid { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px); }
.pin-expert .kant { inset: 21px; box-shadow: inset 0 0 0 2px rgba(6,178,254,.55); }
.pin-expert .content { color: #fff; }
.pin-expert .content .glyph { background: #fff; }
.pin-expert .content .sep { background: rgba(255,255,255,.6); }

.result-block { margin-top: 20px; animation: atdRise 420ms var(--atd-ease) 300ms both; }
.score-row { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.score-num { font-size: 52px; line-height: .9; font-weight: 300; color: var(--atd-ocean-blue); font-variant-numeric: tabular-nums; }
.score-of { font-size: 18px; color: var(--atd-grey-400); }
.level-name { margin-top: 14px; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.prize-card {
  margin-top: 20px; background: #fff; border: 1px solid var(--atd-grey-900); border-radius: 12px;
  padding: 16px 18px 18px; box-shadow: var(--atd-shadow-card);
  animation: atdRise 420ms var(--atd-ease) 420ms both;
}
.prize-card .cap { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--atd-grey-500); }
.prize-card .val { margin-top: 8px; font-size: 19px; line-height: 1.3; font-weight: 500; }
.prize-card .note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--atd-grey-900); font-size: 14px; line-height: 1.5; color: var(--atd-grey-400); }

/* --- DEV-панель ------------------------------------------ */
.dev-fab { position: fixed; right: 12px; bottom: 12px; z-index: 39; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--atd-grey-400); background: #000; color: var(--atd-pool-blue); font-size: 10px; font-weight: 600; cursor: pointer; }
.dev-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 430px; margin: 0 auto; background: #000; color: #fff; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.dev-panel .cap { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--atd-pool-blue); }
.dev-panel .row { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-panel button { min-height: 34px; padding: 0 12px; border-radius: 2px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--atd-grey-400); background: transparent; color: #fff; }
.dev-panel button.is-on { border-color: var(--atd-pool-blue); background: var(--atd-blue-deep); }
.dev-panel .muted { font-size: 11px; line-height: 1.5; color: var(--atd-grey-500); }

@keyframes atdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes atdRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes atdPinIn { 0% { transform: rotateY(-25deg) rotateX(9deg) scale(.84); opacity: 0; } 22% { opacity: 1; } 100% { transform: rotateY(355deg) rotateX(2deg) scale(1); opacity: 1; } }
@keyframes atdPinSway { 0%, 100% { transform: rotateY(-5deg); } 50% { transform: rotateY(5deg); } }
@keyframes atdGloss { 0% { transform: translateX(-160%) skewX(-18deg); } 55%, 100% { transform: translateX(240%) skewX(-18deg); } }
@keyframes atdScan { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@keyframes atdSpin { to { transform: rotate(360deg); } }
@keyframes atdFloat { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes atdDrift { from { background-position: 0 0; } to { background-position: 30px 30px; } }
@keyframes atdHallScan { 0% { transform: translateY(-40%); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(160%); opacity: 0; } }
@keyframes atdCurrentX { 0% { transform: translateX(-140%); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(520%); opacity: 0; } }
@keyframes atdCurrentXRev { 0% { transform: translateX(520%); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(-140%); opacity: 0; } }
@keyframes atdOrbitA { from { transform: rotateX(68deg) rotateY(-12deg) rotateZ(0); } to { transform: rotateX(68deg) rotateY(-12deg) rotateZ(360deg); } }
@keyframes atdOrbitB { from { transform: rotateX(-60deg) rotateY(20deg) rotateZ(360deg); } to { transform: rotateX(-60deg) rotateY(20deg) rotateZ(0); } }
@keyframes atdOrbitC { from { transform: rotateX(74deg) rotateY(38deg) rotateZ(0); } to { transform: rotateX(74deg) rotateY(38deg) rotateZ(360deg); } }