:root {
  --ink: #13214b;
  --pink: #f72b8c;
  --blue: #4669ff;
  --violet: #7c3aed;
  --glass: rgba(255, 255, 255, .82);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 5%, rgba(255,255,255,.62) 0 7%, transparent 25%),
    radial-gradient(circle at 95% 12%, rgba(255,206,234,.8) 0 8%, transparent 24%),
    linear-gradient(128deg, #6f91ff 0%, #5968ed 34%, #cc4fc4 74%, #ff7aae 100%);
  background-attachment: fixed;
}

/* App shell: calmer canvas, sticky controls, and touch-friendly surfaces. */
body.app-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.75) 0 8%, transparent 25%),
    radial-gradient(circle at 100% 18%, rgba(255,213,239,.76) 0 7%, transparent 22%),
    linear-gradient(155deg, #dfe8ff 0%, #eef0ff 38%, #fceafa 76%, #fff3f8 100%);
  color: #172554;
}
.app-shell { width: min(100% - 1.25rem, 1120px); margin-inline: auto; }
.app-topbar {
  position: sticky; top: .75rem; z-index: 40; border-radius: 1.4rem;
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 14px 38px rgba(63, 64, 151, .14); backdrop-filter: blur(20px);
}
.app-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.app-brand-copy { display: grid; line-height: 1.1; }
.app-brand-copy small { margin-top: .2rem; color: #8a89a5; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.app-status {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dbdcff;
  border-radius: 999px; padding: .42rem .65rem; color: #6556c6; background: #f7f6ff; font-size: .72rem;
}
.app-status i { width: .42rem; height: .42rem; display: inline-block; border-radius: 999px; background: #2dd4bf; box-shadow: 0 0 0 4px #ccfbf1; }
.app-icon-button { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .9rem; background: #f5f5ff; color: #6357c9; transition: .2s ease; }
.app-icon-button:hover { background: #eceaff; transform: translateY(-1px); }
.app-main { padding-top: 1.1rem; padding-bottom: 4.5rem; }
.app-hero {
  position: relative; overflow: hidden; border-radius: 2rem; color: white;
  background: linear-gradient(132deg, #303eac 0%, #6540bd 48%, #db3e9a 100%);
  box-shadow: 0 22px 55px rgba(76, 54, 177, .24);
}
.app-hero::before { content: ""; position: absolute; width: 18rem; height: 18rem; right: -7rem; top: -8rem; border: 30px solid rgba(255,255,255,.1); border-radius: 999px; }
.app-hero::after { content: "✦"; position: absolute; right: 6%; bottom: -2.6rem; color: rgba(255,255,255,.14); font-size: 11rem; transform: rotate(-14deg); }
.app-hero > * { position: relative; z-index: 1; }
.app-hero-kicker { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; background: rgba(255,255,255,.14); padding: .4rem .75rem; font-size: .7rem; letter-spacing: .09em; }
.app-hero-kicker i { width: .42rem; height: .42rem; border-radius: 999px; background: #f9a8d4; box-shadow: 0 0 0 4px rgba(249,168,212,.18); }
.app-hero-action { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.13); color: white; transition: .2s ease; }
.app-hero-action:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.app-section { scroll-margin-top: 5.5rem; }
.app-section-label { display: inline-flex; align-items: center; gap: .45rem; color: #9b3fe5; font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.app-section-label::before { content: ""; width: .42rem; height: .42rem; border-radius: 99px; background: #f53e9a; }
.app-surface { background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 14px 38px rgba(70,65,150,.12); backdrop-filter: blur(16px); }
.app-body .glass { background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.92); box-shadow: 0 14px 38px rgba(70,65,150,.12); }
.app-surface:hover { border-color: rgba(183,159,255,.55); }
.app-hints-band { border: 1px solid rgba(255,255,255,.65); border-radius: 1.7rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(46,58,161,.92), rgba(124,61,180,.92) 56%, rgba(220,58,144,.9)); box-shadow: 0 18px 44px rgba(81,49,157,.18); }
.hint-studio { border-radius: 1.35rem; background: rgba(255,255,255,.9); padding: 1.15rem; box-shadow: 0 10px 26px rgba(35,36,105,.1); }
.hint-studio-kicker { color: #a03ae2; font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.hint-create-form, .hint-manage-row { border-radius: 1rem; background: #f8f7ff; padding: .8rem; }
.hint-manage-row { border: 1px solid #ece9ff; }
.hint-datetime { width: auto; min-width: 13rem; }
.hint-active-label { display: inline-flex; align-items: center; gap: .35rem; color: #72738b; font-size: .75rem; }
.hint-save-button, .hint-delete-button { border-radius: .7rem; padding: .48rem .75rem; font-size: .72rem; font-weight: 500; transition: .18s ease; }
.hint-save-button { background: #ebe5ff; color: #7043c9; }
.hint-save-button:hover { background: #ded3ff; }
.hint-delete-button { background: #fff0f4; color: #d24d7d; }
.hint-delete-button:hover { background: #ffe0ea; }
.app-bottom-nav { display: none; }
.app-bottom-nav a { display: grid; justify-items: center; gap: .18rem; min-width: 3.2rem; color: #9491b0; font-size: .62rem; transition: .2s ease; }
.app-bottom-nav a span { display: grid; place-items: center; width: 2.35rem; height: 2.1rem; border-radius: .8rem; font-size: 1.05rem; }
.app-bottom-nav a:hover, .app-bottom-nav a.active { color: #7a4bdb; }
.app-bottom-nav a.active span { color: white; background: linear-gradient(135deg, #7c48df, #e13b99); box-shadow: 0 7px 15px rgba(125,71,211,.25); }
.quick-stat { border-radius: 1rem; background: rgba(255,255,255,.13); padding: .65rem .8rem; color: rgba(255,255,255,.86); font-size: .78rem; }
.quick-stat strong { display: block; color: white; font-size: 1.05rem; }

.aurora::before, .aurora::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  z-index: -1;
  filter: blur(4px);
  opacity: .55;
  pointer-events: none;
  animation: float 11s ease-in-out infinite alternate;
}
.aurora::before { width: 18rem; height: 18rem; background: #b8ecff; top: 23%; left: -8rem; }
.aurora::after { width: 22rem; height: 22rem; background: #ffb5e0; bottom: -8rem; right: -7rem; animation-delay: -4s; }

@keyframes float { to { transform: translate(30px, -25px) scale(1.08); } }
@keyframes reveal { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse-glow { 50% { box-shadow: 0 0 0 10px rgba(255,255,255,.14), 0 18px 45px rgba(86,60,204,.32); } }

.glass {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 50px rgba(26, 29, 104, .16);
  backdrop-filter: blur(16px);
}
.card-pop { animation: reveal .45s ease both; }
.card-pop:nth-child(2) { animation-delay: .06s; }
.card-pop:nth-child(3) { animation-delay: .12s; }
.card-pop:nth-child(4) { animation-delay: .18s; }
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 22px 45px rgba(38,35,116,.22); }

.brand-mark {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  background: linear-gradient(135deg, #ff4ba4, #7a45fc);
  color: white; border-radius: 1rem; box-shadow: 0 8px 20px rgba(100,55,201,.35);
}
.nav-link { color: rgba(19,33,75,.72); transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: #f31d85; }

.btn-primary {
  background: linear-gradient(120deg, #fa278e, #8e45f7 55%, #4d79ff);
  color: white; box-shadow: 0 10px 24px rgba(111,50,213,.3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(111,50,213,.4); }
.btn-primary:active { transform: translateY(0); }

.btn-soft { background: rgba(255,255,255,.8); color: var(--violet); transition: all .2s ease; }
.btn-soft:hover { background: white; transform: translateY(-1px); }
.draw-button { animation: pulse-glow 2.5s ease-in-out infinite; }

.input-ui {
  width: 100%; border: 1px solid #dfe3ff; border-radius: .9rem; background: rgba(255,255,255,.9);
  padding: .75rem 1rem; outline: none; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.input-ui:focus { border-color: #9d69f5; box-shadow: 0 0 0 4px rgba(144,91,244,.14); }
.input-ui[readonly] { background: #f4f5fc; }

.secret-card { background: linear-gradient(136deg, #273da9, #6e3cba 52%, #ed358f); color: white; overflow: hidden; position: relative; }
.secret-card::after { content: "✦"; position: absolute; font-size: 15rem; right: -2rem; top: -6rem; opacity: .12; transform: rotate(12deg); }
.secret-card > * { position: relative; z-index: 1; }
.mission-card.selected { border-color: #f42690; box-shadow: 0 0 0 3px rgba(244,38,144,.15); }
.mission-card.completed { border-color: #34c9a0; background: linear-gradient(145deg, rgba(240,255,250,.95), rgba(255,255,255,.84)); }
.mission-check-form { margin-top: .9rem; border-top: 1px solid rgba(125,116,185,.14); padding-top: .75rem; }
.mission-check-row { display: flex; align-items: center; gap: .55rem; cursor: pointer; color: #767795; font-size: .75rem; user-select: none; }
.mission-check-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mission-checkbox { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1.5px solid #c7c6db; border-radius: .45rem; background: white; color: transparent; font-size: .8rem; font-weight: 700; transition: .18s ease; }
.mission-check-row input:checked + .mission-checkbox { border-color: #27bb93; background: #27bb93; color: white; box-shadow: 0 3px 8px rgba(39,187,147,.25); }
.mission-card.completed .mission-check-row { color: #15916f; font-weight: 500; }
.progress-row { margin: 0; }
.progress-row label { display: flex; align-items: center; gap: .55rem; cursor: pointer; color: #4f5171; font-size: .78rem; }
.progress-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.progress-box { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1.5px solid #c6c4da; border-radius: .4rem; background: white; color: transparent; font-size: .75rem; font-weight: 700; }
.progress-row input:checked + .progress-box { border-color: #27bb93; background: #27bb93; color: white; }
.progress-row input:checked ~ span:last-child { color: #168f70; text-decoration: line-through; text-decoration-color: rgba(22,143,112,.4); }
.locked { background: linear-gradient(135deg, #eff1ff, #f9eefa); color: #777596; }
.message-own { background: linear-gradient(135deg, #7444df, #ed439b); color: white; }
.message-other { background: #f2f4ff; color: #2c3965; }

/* iMessage-inspired conversation surface */
.chat-app { position: relative; background: #fafaff; border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 42px rgba(65,62,141,.14); }
.chat-header { display: flex; align-items: center; gap: .85rem; min-height: 5.3rem; padding: .9rem 1.15rem; border-bottom: 1px solid #ececf4; background: rgba(255,255,255,.92); }
.chat-back { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; border: 1px solid #ececf4; border-radius: 999px; color: #485071; font-size: 2rem; line-height: 1; transition: .2s ease; }
.chat-back:hover { background: #f2f1ff; color: #7446d9; transform: translateX(-2px); }
.chat-profile { display: flex; min-width: 0; flex: 1; align-items: center; gap: .7rem; }
.chat-profile h2 { overflow: hidden; color: #1f2a4d; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-profile p { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; color: #9a9aab; font-size: .72rem; }
.chat-avatar, .chat-mini-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 999px; background: linear-gradient(145deg, #9feef1, #5ed4e1); box-shadow: 0 6px 14px rgba(76,196,210,.25); }
.chat-avatar { width: 3.25rem; height: 3.25rem; font-size: 1.65rem; }
.chat-mini-avatar { width: 2.25rem; height: 2.25rem; align-self: end; font-size: 1.05rem; }
.chat-online-dot { width: .42rem; height: .42rem; border-radius: 999px; background: #22c99a; box-shadow: 0 0 0 3px #d8f8ec; }
.chat-header-actions { color: #8d8da4; font-size: 1.1rem; }
.chat-switcher { display: flex; gap: .35rem; overflow-x: auto; padding: .7rem 1.15rem 0; background: #fff; }
.chat-switch { white-space: nowrap; border-radius: 999px; padding: .4rem .75rem; background: #f4f4fb; color: #777791; font-size: .72rem; transition: .2s ease; }
.chat-switch.active { background: #e9e2ff; color: #7446d9; font-weight: 500; }
.chat-date-pill { width: max-content; margin: .85rem auto .35rem; border-radius: 999px; background: #f0f0f5; padding: .32rem .7rem; color: #a0a0ad; font-size: .68rem; }
.chat-messages { display: flex; min-height: 24rem; max-height: 35rem; flex-direction: column; gap: .85rem; overflow-y: auto; padding: .8rem 1.2rem 1.35rem; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(248,248,253,.96) 70%); }
.chat-message-row { display: flex; align-items: flex-end; gap: .5rem; animation: reveal .25s ease both; }
.chat-message-row.own { justify-content: flex-end; }
.chat-message-group { display: flex; max-width: min(78%, 31rem); flex-direction: column; gap: .18rem; }
.chat-message-row.own .chat-message-group { align-items: flex-end; }
.chat-sender-label { padding: 0 .55rem; color: #a0a0ad; font-size: .68rem; }
.chat-bubble { position: relative; padding: .72rem .9rem .55rem; color: #22263a; font-size: .94rem; line-height: 1.5; box-shadow: 0 4px 12px rgba(57,54,112,.06); }
.chat-bubble.incoming { border-radius: 1.25rem 1.25rem 1.25rem .3rem; background: #e8e8ed; }
.chat-bubble.own { border-radius: 1.25rem 1.25rem .3rem 1.25rem; background: #32a9f4; color: white; box-shadow: 0 8px 16px rgba(50,169,244,.2); }
.chat-bubble-meta { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; margin-top: .22rem; color: rgba(50,53,75,.45); font-size: .61rem; }
.chat-bubble.own .chat-bubble-meta { color: rgba(255,255,255,.72); }
.chat-reply { color: inherit; opacity: .72; transition: .15s ease; }
.chat-reply:hover { opacity: 1; text-decoration: underline; }
.chat-welcome, .chat-empty { display: flex; min-height: 16rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.chat-welcome { color: #6e7085; }
.chat-welcome-icon, .chat-empty-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: .8rem; border-radius: 1.2rem; background: #e1f7f8; font-size: 1.7rem; }
.chat-welcome p { margin-top: .25rem; color: #a2a2b0; font-size: .76rem; }
.chat-empty { padding: 2rem; background: rgba(255,255,255,.8); }
.chat-composer { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem .85rem calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid #ececf4; background: rgba(255,255,255,.96); }
.chat-add, .chat-mic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: 999px; color: #9194a8; font-size: 1.5rem; transition: .2s ease; }
.chat-add { background: #edf0f7; }
.chat-add:hover, .chat-mic:hover { background: #e9e8fc; color: #7850dc; }
.chat-mic { font-size: 1.6rem; }
.chat-input-shell { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; border: 1px solid #dadce8; border-radius: 1.25rem; background: #fbfbfd; transition: .2s ease; }
.chat-input-shell:focus-within { border-color: #9a78e9; box-shadow: 0 0 0 3px rgba(150,113,231,.13); }
.chat-input { width: 100%; min-height: 2.35rem; max-height: 7rem; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; padding: .55rem .8rem; color: #2c3150; font: inherit; font-size: .88rem; line-height: 1.35; }
.chat-input::placeholder { color: #a5a5b2; }
.reply-preview { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .35rem .55rem 0; border-left: 2px solid #8d6be3; padding: .25rem .5rem; color: #8171b1; font-size: .66rem; }
.reply-preview[hidden] { display: none; }
.reply-preview button { color: #a0a0b4; font-size: 1rem; line-height: 1; }
.chat-send { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; border-radius: 999px; background: #2da9f3; color: white; font-size: 1.4rem; line-height: 1; box-shadow: 0 7px 15px rgba(45,169,243,.28); transition: .2s ease; }
.chat-send:hover { background: #168fdb; transform: translateY(-2px); }

.table-wrap { overflow-x: auto; }
table { min-width: 650px; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #78769d; }
td, th { padding: .85rem .75rem; text-align: left; border-bottom: 1px solid #edf0ff; }
tr:last-child td { border-bottom: 0; }

.admin-nav a { display: block; padding: .7rem .8rem; border-radius: .75rem; color: #606186; transition: .18s ease; }
.admin-nav a:hover, .admin-nav a.active { background: #f3edff; color: #8a3ce9; font-weight: 600; }

@media (max-width: 640px) {
  .desktop-nav { display: none; }
  .hero-title { font-size: 2rem; line-height: 1.2; }
  .mobile-stack { flex-direction: column; align-items: stretch; }
  .mobile-stack > * { width: 100%; }
  body.app-body { background: linear-gradient(160deg, #e4ebff 0%, #f4edff 47%, #fff2f8 100%); }
  .app-shell { width: min(100% - 1rem, 640px); }
  .app-topbar { top: .45rem; border-radius: 1.15rem; }
  .app-topbar .brand-mark { width: 2.35rem; height: 2.35rem; border-radius: .8rem; }
  .app-brand-copy small { display: none; }
  .app-status { display: none; }
  .app-main { padding-top: .8rem; padding-bottom: 6.25rem; }
  .app-hero { border-radius: 1.55rem; }
  .app-hero::after { right: -1rem; bottom: -3rem; font-size: 9rem; }
  .app-bottom-nav {
    position: fixed; display: flex; justify-content: space-around; align-items: end; gap: .2rem;
    left: .65rem; right: .65rem; bottom: .65rem; z-index: 60; padding: .55rem .4rem .45rem;
    border: 1px solid rgba(255,255,255,.9); border-radius: 1.35rem; background: rgba(255,255,255,.9);
    box-shadow: 0 18px 40px rgba(57,53,142,.2); backdrop-filter: blur(20px);
    padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
  }
  .app-surface, .glass { box-shadow: 0 9px 26px rgba(65,62,141,.1); }
  .app-hints-band { padding: 1.15rem; border-radius: 1.35rem; }
  .chat-header { min-height: 4.7rem; padding-inline: .85rem; }
  .chat-messages { min-height: 23rem; max-height: 32rem; padding-inline: .75rem; }
  .chat-message-group { max-width: 84%; }
  .chat-bubble { font-size: .89rem; }
  .chat-composer { gap: .3rem; padding-inline: .55rem; }
  .chat-mic { display: none; }
  .hint-studio { padding: .85rem; }
  .hint-datetime { width: 100%; min-width: 0; }
}
/* Self-draw celebration overlay */
.draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(32, 26, 96, .72);
  backdrop-filter: blur(12px);
  animation: draw-fade-in .25s ease-out both;
}

.draw-overlay-card {
  position: relative;
  width: min(100%, 22rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 2rem;
  padding: 2rem 1.5rem 1.75rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 242, 255, .94));
  box-shadow: 0 2rem 5rem rgba(13, 9, 75, .35);
  text-align: center;
  animation: draw-card-pop .55s cubic-bezier(.2, .8, .2, 1) both;
}

.draw-orbit {
  position: relative;
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #dff8ff, #ffe5f4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 .8rem 2rem rgba(98, 77, 191, .18);
  animation: draw-orbit-pulse 1.4s ease-in-out infinite;
}

.draw-orbit b,
.draw-orbit span {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.draw-orbit b {
  inset: 1.65rem;
  font-size: 2.7rem;
  background: #fff;
  box-shadow: 0 .5rem 1.25rem rgba(61, 44, 147, .15);
  animation: draw-token-spin 1.15s ease-in-out infinite;
}

.draw-orbit span { width: 2rem; height: 2rem; font-size: 1.1rem; }
.draw-orbit span:nth-child(1) { top: .2rem; left: 3rem; }
.draw-orbit span:nth-child(2) { right: .35rem; bottom: 1.35rem; animation: draw-float 1.4s ease-in-out infinite .15s; }
.draw-orbit span:nth-child(3) { bottom: .3rem; left: .85rem; animation: draw-float 1.4s ease-in-out infinite .3s; }

.draw-sparkles {
  margin-top: 1.1rem;
  color: #f39ac6;
  letter-spacing: .55rem;
  animation: draw-sparkle 1.2s ease-in-out infinite;
}

@keyframes draw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw-card-pop { from { opacity: 0; transform: translateY(1rem) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draw-orbit-pulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.04) rotate(4deg); } }
@keyframes draw-token-spin { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
@keyframes draw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.45rem); } }
@keyframes draw-sparkle { 0%, 100% { opacity: .45; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .draw-overlay, .draw-overlay-card, .draw-orbit, .draw-orbit b, .draw-orbit span, .draw-sparkles { animation: none; }
}