/* Theme trim and edge decorations (phase 2). Each block applies only under its [data-theme].
   Rules: nothing here sits on the canvas or changes the artwork; decorations hang at the edges of the
   bars, cards and tool bar and never take clicks (pointer-events: none); anything that moves is on the
   home, lobby and reveal pages only (.page), and not at all for reduced motion. */
.topbar, header.bar { position: relative; }
.toolbar::after { content: ""; flex: none; }

/* ---------------------------------------------------------------- Gothic */
[data-theme=gothic] .topbar, [data-theme=gothic] header.bar, [data-theme=gothic] .sv-top { border-bottom: 1px solid #7a5a32; box-shadow: 0 1px 0 #1a0f08; }
[data-theme=gothic] .brand span { font-size: 21px; font-weight: 400; letter-spacing: .5px; color: #e9d3a8; }
[data-theme=gothic] .hero h1 { font-weight: 400; letter-spacing: 0; }
[data-theme=gothic] .card, [data-theme=gothic] .modal .box, [data-theme=gothic] .banner .bx, [data-theme=gothic] .pcard {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M2 21V9Q2 2 9 2H21' fill='none' stroke='%23c9a05f' stroke-width='1.6'/%3E%3Cpath d='M6 21V11Q6 6 11 6H21' fill='none' stroke='%23c9a05f' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23c9a05f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 0) scale(-1 1)'%3E%3Cpath d='M2 21V9Q2 2 9 2H21' fill='none' stroke='%23c9a05f' stroke-width='1.6'/%3E%3Cpath d='M6 21V11Q6 6 11 6H21' fill='none' stroke='%23c9a05f' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23c9a05f'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(0 22) scale(1 -1)'%3E%3Cpath d='M2 21V9Q2 2 9 2H21' fill='none' stroke='%23c9a05f' stroke-width='1.6'/%3E%3Cpath d='M6 21V11Q6 6 11 6H21' fill='none' stroke='%23c9a05f' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23c9a05f'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 22) scale(-1 -1)'%3E%3Cpath d='M2 21V9Q2 2 9 2H21' fill='none' stroke='%23c9a05f' stroke-width='1.6'/%3E%3Cpath d='M6 21V11Q6 6 11 6H21' fill='none' stroke='%23c9a05f' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23c9a05f'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px); border-color: #4a2e26; }
[data-theme=gothic] .btn.primary { border: 1px solid #c9a05f; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
[data-theme=gothic] .tool.on { box-shadow: inset 0 0 0 1px #c9a05f; }

/* ---------------------------------------------------------------- Cute gothic */
[data-theme=cutegoth] .topbar::after, [data-theme=cutegoth] header.bar::after { content: ""; position: absolute; right: 32%; bottom: -15px; width: 34px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%23c9a7ff'/%3E%3Ccircle cx='15' cy='6.5' r='.9' fill='%23151217'/%3E%3Ccircle cx='19' cy='6.5' r='.9' fill='%23151217'/%3E%3C/svg%3E") no-repeat; pointer-events: none; z-index: 3; }
[data-theme=cutegoth] .toolbar::after { content: ""; margin-top: auto; width: 16px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M8 14S1 9.5 1 5.5a3.5 3.5 0 0 1 7-1.2 3.5 3.5 0 0 1 7 1.2C15 9.5 8 14 8 14z' fill='%23ffb3d6'/%3E%3C/svg%3E") no-repeat; opacity: .8; }
[data-theme=cutegoth] .card::after { content: ""; position: absolute; top: 10px; right: 12px; width: 16px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M8 14S1 9.5 1 5.5a3.5 3.5 0 0 1 7-1.2 3.5 3.5 0 0 1 7 1.2C15 9.5 8 14 8 14z' fill='%23c9a7ff'/%3E%3C/svg%3E") no-repeat; opacity: .7; pointer-events: none; }
[data-theme=cutegoth] .card { position: relative; }
[data-theme=cutegoth] .brand span, [data-theme=cutegoth] h1, [data-theme=cutegoth] h2 { font-weight: 800; }
[data-theme=cutegoth] .btn, [data-theme=cutegoth] .chip, [data-theme=cutegoth] .tool { border-radius: 999px; }
[data-theme=cutegoth] .tool { border-radius: 12px; }

/* ---------------------------------------------------------------- Pop punk */
[data-theme=poppunk] .topbar, [data-theme=poppunk] header.bar { border-bottom: 4px solid #ff2e88; }
[data-theme=poppunk] .brand span { display: inline-block; transform: rotate(-3deg); font-size: 19px; }
[data-theme=poppunk] .hero h1 { transform: rotate(-1.2deg); }
[data-theme=poppunk] .btn.primary { border: 2px solid #111; box-shadow: 4px 4px 0 #c6ff00; transform: rotate(-1.5deg); }
[data-theme=poppunk] .btn.primary:active { transform: rotate(-1.5deg) translate(2px, 2px); box-shadow: 2px 2px 0 #c6ff00; }
[data-theme=poppunk] .card { position: relative; border: 2px solid #fff; box-shadow: 5px 5px 0 #ff2e88; }
[data-theme=poppunk] .card::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='18' viewBox='0 0 70 18'%3E%3Crect width='70' height='18' fill='%23c6ff00' fill-opacity='.72'/%3E%3Cpath d='M0 0l4 3-4 3 4 3-4 3 4 3-4 3M70 0l-4 3 4 3-4 3 4 3-4 3 4 3' fill='%23111' fill-opacity='.0' stroke='%23111' stroke-opacity='.15'/%3E%3C/svg%3E") no-repeat; transform: rotate(-4deg); pointer-events: none; }
[data-theme=poppunk] .card:nth-child(2)::before { transform: rotate(3deg); }
[data-theme=poppunk] .card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 26px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24' viewBox='0 0 26 24'%3E%3Cpath d='M4 20L20 4' stroke='%23e6e6e6' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='20.5' cy='3.5' r='3' fill='%23ff2e88' stroke='%23111'/%3E%3Cpath d='M4 20c-3-1-3-4-1-5' stroke='%23e6e6e6' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=poppunk] .tool.on, [data-theme=poppunk] .ib.on, [data-theme=poppunk] .chip.on { background: #c6ff00; color: #111; box-shadow: none; border-color: #c6ff00; }
[data-theme=poppunk] .lrow.on { box-shadow: inset 4px 0 0 #c6ff00; }

/* ---------------------------------------------------------------- Hyperpop */
[data-theme=hyperpop] .btn.primary { border-radius: 999px; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 4px 16px rgba(255,79,216,.35); }
[data-theme=hyperpop] .card, [data-theme=hyperpop] .modal .box { background: linear-gradient(160deg, #1f1248, #160d38); border-color: rgba(255,255,255,.14); }
[data-theme=hyperpop] .topbar::after, [data-theme=hyperpop] header.bar::after { content: ""; position: absolute; left: 42%; top: 50%; margin-top: -9px; width: 46px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18'%3E%3Cpath d='M8 2l1.4 4.6L14 8l-4.6 1.4L8 14l-1.4-4.6L2 8l4.6-1.4z' fill='%23c6ff00'/%3E%3Cpath d='M26 8l1 3 3 1-3 1-1 3-1-3-3-1 3-1z' fill='%23ffffff'/%3E%3Cpath d='M40 1l.8 2.2L43 4l-2.2.8L40 7l-.8-2.2L37 4l2.2-.8z' fill='%23c6ff00'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=hyperpop] .brand span { letter-spacing: 1px; text-transform: uppercase; font-size: 15px; }
[data-theme=hyperpop] .page { background: radial-gradient(circle at 15% 10%, rgba(255,79,216,.22), transparent 40%), radial-gradient(circle at 85% 30%, rgba(45,226,255,.18), transparent 40%), radial-gradient(circle at 50% 100%, rgba(198,255,0,.10), transparent 45%), var(--bg); background-size: 140% 140%; }

/* ---------------------------------------------------------------- Sparkles */
[data-theme=sparkles] .page { position: relative; }
[data-theme=sparkles] .page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--stage-img); background-size: 220px 220px; opacity: .8; }
[data-theme=sparkles] .page > * { position: relative; z-index: 1; }
[data-theme=sparkles] .page > header.bar { position: sticky; z-index: 2; }
[data-theme=sparkles] .topbar::after, [data-theme=sparkles] header.bar::after { content: ""; position: absolute; left: 44%; top: 50%; margin-top: -9px; width: 46px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18'%3E%3Cpath d='M8 2l1.4 4.6L14 8l-4.6 1.4L8 14l-1.4-4.6L2 8l4.6-1.4z' fill='%23f5d77a'/%3E%3Cpath d='M26 8l1 3 3 1-3 1-1 3-1-3-3-1 3-1z' fill='%23fff3c4'/%3E%3Cpath d='M40 1l.8 2.2L43 4l-2.2.8L40 7l-.8-2.2L37 4l2.2-.8z' fill='%23f5d77a'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=sparkles] .btn.primary { background-size: 260% 100%; background-position: 50% 0; }
[data-theme=sparkles] .card { box-shadow: 0 0 0 1px rgba(245,215,122,.10), 0 8px 30px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- Unicorn */
[data-theme=unicorn] .brand::after { content: ""; width: 14px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='20' viewBox='0 0 14 20'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe08a'/%3E%3Cstop offset='1' stop-color='%23d6b8ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 0l6 20H1z' fill='url(%23h)'/%3E%3Cpath d='M3 14l8-3M2.5 17l9-3.4M5 9l5-2' stroke='%23fff' stroke-width='1' opacity='.8'/%3E%3C/svg%3E") no-repeat; margin-left: -2px; transform: rotate(18deg); }
[data-theme=unicorn] .topbar::after, [data-theme=unicorn] header.bar::after { content: ""; position: absolute; left: 42%; top: 50%; margin-top: -9px; width: 46px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18'%3E%3Cpath d='M8 2l1.4 4.6L14 8l-4.6 1.4L8 14l-1.4-4.6L2 8l4.6-1.4z' fill='%23b98be8'/%3E%3Cpath d='M26 8l1 3 3 1-3 1-1 3-1-3-3-1 3-1z' fill='%23ffb3d1'/%3E%3Cpath d='M40 1l.8 2.2L43 4l-2.2.8L40 7l-.8-2.2L37 4l2.2-.8z' fill='%23b98be8'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=unicorn] .timer .arc { stroke: url(#tm-rainbow); }
[data-theme=unicorn] .card, [data-theme=unicorn] .modal .box { box-shadow: 0 8px 26px rgba(150,100,200,.14); }
[data-theme=unicorn] .btn, [data-theme=unicorn] .chip { border-radius: 999px; }
[data-theme=unicorn] .btn.primary { box-shadow: 0 3px 12px rgba(180,120,230,.30); }

/* ---------------------------------------------------------------- Orangutan */
[data-theme=orangutan] .topbar::after, [data-theme=orangutan] header.bar::after { content: ""; position: absolute; left: 38%; bottom: -14px; width: 48px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26' viewBox='0 0 48 26'%3E%3Cpath d='M2 24C5 12 13 5 26 3c-6 5-9 12-9 21z' fill='%233f7a3a'/%3E%3Cpath d='M20 24c0-9 5-16 15-19-4 5-6 11-6 19z' fill='%232f6030'/%3E%3Cpath d='M34 24c1-7 5-12 12-14-3 4-4 9-4 14z' fill='%234e8f45'/%3E%3Cpath d='M5 23Q14 12 24 5' stroke='%232a5228' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat; pointer-events: none; z-index: 3; }
[data-theme=orangutan] .toolbar::after { content: ""; margin-top: auto; width: 26px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cpath d='M2 18C3 9 9 3 18 2c-4 4-6 9-6 16z' fill='%233f7a3a'/%3E%3Cpath d='M14 18c0-6 4-11 10-13-3 3-4 8-4 13z' fill='%232f6030'/%3E%3C/svg%3E") no-repeat; }
[data-theme=orangutan] .studio.panel-hidden .panel-tab { width: 30px; height: 70px; border-radius: 16px 0 0 16px; font-size: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='56' viewBox='0 0 60 56'%3E%3Cellipse cx='30' cy='30' rx='22' ry='20' fill='%23c8641f'/%3E%3Cpath d='M10 24q-4-10 6-14M50 24q4-10-6-14' stroke='%23b0561a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='30' cy='34' rx='14' ry='12' fill='%23f0c49a'/%3E%3Cellipse cx='22' cy='27' rx='4' ry='4.4' fill='%23fff7ea'/%3E%3Cellipse cx='38' cy='27' rx='4' ry='4.4' fill='%23fff7ea'/%3E%3Ccircle cx='22.6' cy='27.6' r='2.3' fill='%232a1a10'/%3E%3Ccircle cx='38.6' cy='27.6' r='2.3' fill='%232a1a10'/%3E%3Ccircle cx='23.3' cy='26.8' r='.7' fill='%23fff'/%3E%3Ccircle cx='39.3' cy='26.8' r='.7' fill='%23fff'/%3E%3Cpath d='M27 34q3 1.6 6 0' stroke='%237a3a12' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 40q6 4 12 0' stroke='%237a3a12' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='50' rx='8' ry='6' fill='%23b0561a'/%3E%3Cellipse cx='48' cy='50' rx='8' ry='6' fill='%23b0561a'/%3E%3Cpath d='M6 50h12M42 50h12' stroke='%238a4214' stroke-width='1'/%3E%3C/svg%3E") 2px 10px / 34px auto no-repeat, var(--bg2); }
[data-theme=orangutan] .page::after { content: ""; position: fixed; right: 18px; bottom: 0; width: 72px; height: 66px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='56' viewBox='0 0 60 56'%3E%3Cellipse cx='30' cy='30' rx='22' ry='20' fill='%23c8641f'/%3E%3Cpath d='M10 24q-4-10 6-14M50 24q4-10-6-14' stroke='%23b0561a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='30' cy='34' rx='14' ry='12' fill='%23f0c49a'/%3E%3Cellipse cx='22' cy='27' rx='4' ry='4.4' fill='%23fff7ea'/%3E%3Cellipse cx='38' cy='27' rx='4' ry='4.4' fill='%23fff7ea'/%3E%3Ccircle cx='22.6' cy='27.6' r='2.3' fill='%232a1a10'/%3E%3Ccircle cx='38.6' cy='27.6' r='2.3' fill='%232a1a10'/%3E%3Ccircle cx='23.3' cy='26.8' r='.7' fill='%23fff'/%3E%3Ccircle cx='39.3' cy='26.8' r='.7' fill='%23fff'/%3E%3Cpath d='M27 34q3 1.6 6 0' stroke='%237a3a12' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 40q6 4 12 0' stroke='%237a3a12' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='50' rx='8' ry='6' fill='%23b0561a'/%3E%3Cellipse cx='48' cy='50' rx='8' ry='6' fill='%23b0561a'/%3E%3Cpath d='M6 50h12M42 50h12' stroke='%238a4214' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; z-index: 5; }
[data-theme=orangutan] .btn.primary { box-shadow: 0 3px 0 #a9541c; }

/* ---------------------------------------------------------------- movement (pages only, never for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  [data-theme=sparkles] .page::before { animation: swTwinkle 4.5s ease-in-out infinite alternate; }
  [data-theme=sparkles] .page .btn.primary { animation: swShimmer 3.6s ease-in-out infinite; }
  [data-theme=hyperpop] .page { animation: swDrift 20s ease-in-out infinite alternate; }
  [data-theme=orangutan] .page::after { animation: swPeek 9s ease-in-out infinite; }
}
@keyframes swTwinkle { from { opacity: .45; } to { opacity: .95; } }
@keyframes swShimmer { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes swDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes swPeek { 0%, 70%, 100% { transform: translateY(0); } 80%, 90% { transform: translateY(14px); } }

/* phones: fewer decorations */
@media (max-width: 760px) {
  [data-theme] .topbar::after { display: none; }
  [data-theme=orangutan] .page::after { width: 54px; height: 50px; right: 8px; }
}

/* ================================================================ phase 3 */
/* ---------------------------------------------------------------- Lavender */
[data-theme=lavender] .toolbar::after { content: ""; margin-top: auto; width: 16px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26'%3E%3Cpath d='M6 24C6 16 7 8 9 2' stroke='%236a8f4e' stroke-width='1.4' fill='none'/%3E%3Cellipse cx='9' cy='3' rx='2.2' ry='3' fill='%239b7be0'/%3E%3Cellipse cx='7' cy='7' rx='2.2' ry='3' fill='%239b7be0'/%3E%3Cellipse cx='10' cy='8' rx='2.2' ry='3' fill='%239b7be0'/%3E%3Cellipse cx='7' cy='11' rx='2.2' ry='3' fill='%239b7be0'/%3E%3Cellipse cx='10' cy='12' rx='2.2' ry='3' fill='%239b7be0'/%3E%3Cellipse cx='7' cy='15' rx='2.2' ry='3' fill='%239b7be0'/%3E%3C/svg%3E") no-repeat; }
[data-theme=lavender] .btn, [data-theme=lavender] .chip { border-radius: 999px; }
[data-theme=lavender] .card, [data-theme=lavender] .modal .box { box-shadow: 0 8px 24px rgba(116,68,214,.10); }

/* ---------------------------------------------------------------- Synthwave */
[data-theme=synthwave] .topbar::after, [data-theme=synthwave] header.bar::after { content: ""; position: absolute; left: 44%; bottom: 0; width: 40px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd84a'/%3E%3Cstop offset='1' stop-color='%23ff4f8a'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect width='40' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='18' fill='url(%23s)' clip-path='url(%23c)'/%3E%3Cpath d='M2 12h36M2 15.5h36M2 18.5h36' stroke='%232b0f4a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=synthwave] .brand span { font-size: 17px; letter-spacing: 1px; font-weight: 400; }
[data-theme=synthwave] .hero h1 { font-weight: 400; letter-spacing: 2px; }
[data-theme=synthwave] .btn.primary { box-shadow: 0 0 18px rgba(255,94,126,.35); }
[data-theme=synthwave] .card { border-color: #6a2d7c; box-shadow: 0 0 0 1px rgba(255,94,200,.10), 0 0 24px rgba(255,94,200,.08); }

/* ---------------------------------------------------------------- Spring blossom */
[data-theme=spring] .topbar::after, [data-theme=spring] header.bar::after { content: ""; position: absolute; left: 40%; bottom: -10px; width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'%3E%3Cpath d='M2 18C14 14 28 10 46 4' stroke='%237a5a44' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 12l4-6' stroke='%237a5a44' stroke-width='1.2'/%3E%3Cellipse cx='12' cy='10' rx='2.2' ry='3' transform='rotate(0 12 13)' fill='%23f4a6c2'/%3E%3Cellipse cx='12' cy='10' rx='2.2' ry='3' transform='rotate(72 12 13)' fill='%23f4a6c2'/%3E%3Cellipse cx='12' cy='10' rx='2.2' ry='3' transform='rotate(144 12 13)' fill='%23f4a6c2'/%3E%3Cellipse cx='12' cy='10' rx='2.2' ry='3' transform='rotate(216 12 13)' fill='%23f4a6c2'/%3E%3Cellipse cx='12' cy='10' rx='2.2' ry='3' transform='rotate(288 12 13)' fill='%23f4a6c2'/%3E%3Ccircle cx='12' cy='13' r='1.4' fill='%23e0567f'/%3E%3Cellipse cx='27' cy='3' rx='2.2' ry='3' transform='rotate(0 27 6)' fill='%23f4a6c2'/%3E%3Cellipse cx='27' cy='3' rx='2.2' ry='3' transform='rotate(72 27 6)' fill='%23f4a6c2'/%3E%3Cellipse cx='27' cy='3' rx='2.2' ry='3' transform='rotate(144 27 6)' fill='%23f4a6c2'/%3E%3Cellipse cx='27' cy='3' rx='2.2' ry='3' transform='rotate(216 27 6)' fill='%23f4a6c2'/%3E%3Cellipse cx='27' cy='3' rx='2.2' ry='3' transform='rotate(288 27 6)' fill='%23f4a6c2'/%3E%3Ccircle cx='27' cy='6' r='1.4' fill='%23e0567f'/%3E%3Cellipse cx='40' cy='4' rx='2.2' ry='3' transform='rotate(0 40 7)' fill='%23f4a6c2'/%3E%3Cellipse cx='40' cy='4' rx='2.2' ry='3' transform='rotate(72 40 7)' fill='%23f4a6c2'/%3E%3Cellipse cx='40' cy='4' rx='2.2' ry='3' transform='rotate(144 40 7)' fill='%23f4a6c2'/%3E%3Cellipse cx='40' cy='4' rx='2.2' ry='3' transform='rotate(216 40 7)' fill='%23f4a6c2'/%3E%3Cellipse cx='40' cy='4' rx='2.2' ry='3' transform='rotate(288 40 7)' fill='%23f4a6c2'/%3E%3Ccircle cx='40' cy='7' r='1.4' fill='%23e0567f'/%3E%3Cellipse cx='34' cy='9.5' rx='3' ry='1.4' transform='rotate(-30 34 9.5)' fill='%237fb069'/%3E%3C/svg%3E") no-repeat; pointer-events: none; z-index: 3; }
[data-theme=spring] .brand span { font-weight: 400; font-size: 19px; }
[data-theme=spring] .hero h1 { font-weight: 400; }
[data-theme=spring] .card { box-shadow: 0 6px 20px rgba(176,60,102,.08); }

/* ---------------------------------------------------------------- Summer citrus */
[data-theme=summer] .topbar::after, [data-theme=summer] header.bar::after { content: ""; position: absolute; left: 45%; top: 50%; margin-top: -11px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23ffb703'/%3E%3Ccircle cx='11' cy='11' r='8.2' fill='%23ffe08a'/%3E%3Cpath d='M11 11L19.0 11.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L16.7 16.7' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L11.0 19.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L5.3 16.7' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L3.0 11.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L5.3 5.3' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L11.0 3.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L16.7 5.3' stroke='%23ffb703' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23fff6cc'/%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=summer] .toolbar::after { content: ""; margin-top: auto; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23ffb703'/%3E%3Ccircle cx='11' cy='11' r='8.2' fill='%23ffe08a'/%3E%3Cpath d='M11 11L19.0 11.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L16.7 16.7' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L11.0 19.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L5.3 16.7' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L3.0 11.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L5.3 5.3' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L11.0 3.0' stroke='%23ffb703' stroke-width='1'/%3E%3Cpath d='M11 11L16.7 5.3' stroke='%23ffb703' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23fff6cc'/%3E%3C/svg%3E") no-repeat; transform: rotate(20deg); }
[data-theme=summer] .brand span, [data-theme=summer] h1, [data-theme=summer] h2 { font-weight: 400; letter-spacing: .3px; }
[data-theme=summer] .btn.primary { box-shadow: 0 3px 0 #9a3209; }

/* ---------------------------------------------------------------- Autumn harvest */
[data-theme=autumn] .topbar::after, [data-theme=autumn] header.bar::after { content: ""; position: absolute; left: 44%; bottom: -12px; width: 20px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M10 1l2 4 4-1-1 4 4 2-4 2 1 3-4-1-1 5h-2l-1-5-4 1 1-3-4-2 4-2-1-4 4 1z' fill='%23ef9447'/%3E%3Cpath d='M10 19V8' stroke='%235a3a24' stroke-width='1'/%3E%3C/svg%3E") no-repeat; transform: rotate(-18deg); pointer-events: none; z-index: 3; }
[data-theme=autumn] .toolbar::after { content: ""; margin-top: auto; width: 20px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M10 1l2 4 4-1-1 4 4 2-4 2 1 3-4-1-1 5h-2l-1-5-4 1 1-3-4-2 4-2-1-4 4 1z' fill='%23c45a2a'/%3E%3Cpath d='M10 19V8' stroke='%235a3a24' stroke-width='1'/%3E%3C/svg%3E") no-repeat; transform: rotate(14deg); }
[data-theme=autumn] .card { border-color: #5e3d26; }

/* ---------------------------------------------------------------- Winter frost */
[data-theme=winter] .topbar::after, [data-theme=winter] header.bar::after { content: ""; position: absolute; left: 36%; bottom: -15px; width: 60px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cpath d='M0 0l3.0 9l3.0 -9z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M7 0l2.5 13l2.5 -13z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M13 0l3.5 8l3.5 -8z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M21 0l2.5 15l2.5 -15z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M27 0l3.0 10l3.0 -10z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M34 0l2.5 12l2.5 -12z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M40 0l3.5 7l3.5 -7z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M48 0l2.5 11l2.5 -11z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3Cpath d='M54 0l3.0 9l3.0 -9z' fill='%23ffffff' stroke='%23b9d3ea' stroke-width='.8'/%3E%3C/svg%3E") no-repeat; pointer-events: none; z-index: 3; }
[data-theme=winter] .card, [data-theme=winter] .pcard { position: relative; }
[data-theme=winter] .card::before { content: ""; position: absolute; left: 6px; right: 6px; top: -6px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 10Q7 2 15 7T30 6T45 8T60 5V0H0z' fill='%23ffffff'/%3E%3Cpath d='M0 10Q7 2 15 7T30 6T45 8T60 5' fill='none' stroke='%23cfe0f0' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x; background-size: 60px 12px; pointer-events: none; }
[data-theme=winter] .brand span { font-size: 21px; }
[data-theme=winter] .card { box-shadow: 0 6px 22px rgba(42,109,181,.10); }

/* ---------------------------------------------------------------- Spooky */
[data-theme=spooky] .topbar::after, [data-theme=spooky] header.bar::after { content: ""; position: absolute; left: 42%; top: 50%; margin-top: -8px; width: 52px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='16' viewBox='0 0 52 16'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%238b5cf6'/%3E%3Cg transform='translate(30 4) scale(.6)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%23ff8a1f'/%3E%3C/g%3E%3C/svg%3E") no-repeat; pointer-events: none; }
[data-theme=spooky] .toolbar::after { content: ""; margin-top: auto; width: 24px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'%3E%3Cellipse cx='12' cy='13' rx='10' ry='8' fill='%23ff8a1f'/%3E%3Cpath d='M12 5v16M7 6q-3 7 0 14M17 6q3 7 0 14' stroke='%23c45e00' stroke-width='1' fill='none'/%3E%3Cpath d='M12 5q1-3 3-4' stroke='%235a7a2a' stroke-width='2' fill='none'/%3E%3Cpath d='M8 11l2 2-2 0zM16 11l-2 2 2 0zM8 16q4 3 8 0' fill='%233a1a00' stroke='%233a1a00' stroke-width='.6'/%3E%3C/svg%3E") no-repeat; }
[data-theme=spooky] .card, [data-theme=spooky] .modal .box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg stroke='%23bfb0d6' stroke-opacity='.55' fill='none' stroke-width='.9'%3E%3Cpath d='M0 0L40 40M0 0L18 42M0 0L42 18M0 0L0 40M0 0L40 0'/%3E%3Cpath d='M0 10Q5 5 10 0M0 20Q11 11 20 0M0 30Q16 16 30 0M0 40Q21 21 40 0'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 0; }
[data-theme=spooky] .brand span { font-size: 20px; font-weight: 400; letter-spacing: 1px; color: #ff9d3d; }
[data-theme=spooky] .hero h1 { font-weight: 400; letter-spacing: 1px; }
[data-theme=spooky] .btn.primary { box-shadow: 0 0 16px rgba(255,138,31,.30); }

/* ---------------------------------------------------------------- the home page's seasonal weather
   Snow (Winter frost), leaves (Autumn harvest), petals (Spring blossom) and bats (Spooky), drifting
   behind the home page only, never while drawing, and not at all for reduced motion. Two layers of
   different sizes and speeds give a little depth; each tile moves exactly one tile per loop, so the
   loop never jumps. */
.page.home { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme=winter] .page.home::before, [data-theme=autumn] .page.home::before, [data-theme=spring] .page.home::before, [data-theme=spooky] .page.home::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  [data-theme=winter] .page.home > *, [data-theme=autumn] .page.home > *, [data-theme=spring] .page.home > *, [data-theme=spooky] .page.home > * { position: relative; z-index: 1; }
  [data-theme=winter] .page.home > header.bar, [data-theme=autumn] .page.home > header.bar, [data-theme=spring] .page.home > header.bar, [data-theme=spooky] .page.home > header.bar { position: sticky; z-index: 2; }
  [data-theme=winter] .page.home::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Ccircle cx='165' cy='77' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.9'/%3E%3Ccircle cx='24' cy='37' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='298' cy='29' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='44' cy='222' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='123' cy='46' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='289' cy='63' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.9'/%3E%3Ccircle cx='298' cy='31' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='113' cy='23' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='214' cy='73' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.9'/%3E%3Ccircle cx='157' cy='286' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='297' cy='292' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='49' cy='280' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.9'/%3E%3Ccircle cx='30' cy='316' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='272' cy='218' r='2.4' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='299' cy='232' r='2.4' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='127' cy='92' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='294' cy='153' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='229' cy='147' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='262' cy='214' r='2' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='77' cy='250' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.6'/%3E%3Ccircle cx='39' cy='285' r='2.4' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.75'/%3E%3Ccircle cx='179' cy='304' r='3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.9'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='204' cy='116' r='1' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='69' cy='121' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='15' cy='187' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='165' cy='147' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='72' cy='183' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='5' cy='118' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='156' cy='29' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='55' cy='196' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='189' cy='63' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='127' cy='20' r='1' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='102' cy='140' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='209' cy='110' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='180' cy='106' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3Ccircle cx='59' cy='38' r='1' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='38' cy='59' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='3' cy='124' r='1.6' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='67' cy='72' r='1' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.4'/%3E%3Ccircle cx='107' cy='136' r='1.3' fill='%23ffffff' stroke='%2385a9cc' stroke-width='.9' fill-opacity='0.55'/%3E%3C/svg%3E"); background-size: 320px 320px, 220px 220px; animation: swSnow 26s linear infinite; }
  [data-theme=autumn] .page.home::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(74 273) rotate(316) scale(1.3)' fill='%23e98a3a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(243 296) rotate(200) scale(1.1)' fill='%23a8442a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(211 63) rotate(246) scale(1.3)' fill='%23a8442a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(41 107) rotate(34) scale(0.9)' fill='%23a8442a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(93 66) rotate(174) scale(1.3)' fill='%23e98a3a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(62 10) rotate(290) scale(0.9)' fill='%23e98a3a' fill-opacity='.8'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(196 324) rotate(13) scale(0.9)' fill='%23c45a2a' fill-opacity='.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(167 106) rotate(76) scale(.7)' fill='%23e6b23a' fill-opacity='.5'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(98 164) rotate(186) scale(.7)' fill='%23e6b23a' fill-opacity='.5'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(41 39) rotate(249) scale(.7)' fill='%23e6b23a' fill-opacity='.5'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(132 133) rotate(159) scale(.7)' fill='%23e98a3a' fill-opacity='.5'/%3E%3Cpath d='M0 -9C5 -6 7 0 0 9C-7 0 -5 -6 0 -9z' transform='translate(46 36) rotate(175) scale(.7)' fill='%23e6b23a' fill-opacity='.5'/%3E%3C/svg%3E"); background-size: 360px 360px, 260px 260px; animation: swLeaves 30s linear infinite; opacity: .75; }
  [data-theme=spring] .page.home::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cellipse cx='255' cy='92' rx='5' ry='2.8' transform='rotate(132 255 92)' fill='%23f4a6c2' fill-opacity='.85'/%3E%3Cellipse cx='115' cy='280' rx='5' ry='2.8' transform='rotate(92 115 280)' fill='%23f4a6c2' fill-opacity='.85'/%3E%3Cellipse cx='288' cy='23' rx='5' ry='2.8' transform='rotate(135 288 23)' fill='%23f9c6d8' fill-opacity='.85'/%3E%3Cellipse cx='56' cy='143' rx='5' ry='2.8' transform='rotate(132 56 143)' fill='%23f9c6d8' fill-opacity='.85'/%3E%3Cellipse cx='95' cy='192' rx='5' ry='2.8' transform='rotate(57 95 192)' fill='%23e98fb0' fill-opacity='.85'/%3E%3Cellipse cx='287' cy='267' rx='5' ry='2.8' transform='rotate(84 287 267)' fill='%23e98fb0' fill-opacity='.85'/%3E%3Cellipse cx='124' cy='109' rx='5' ry='2.8' transform='rotate(61 124 109)' fill='%23f9c6d8' fill-opacity='.85'/%3E%3Cellipse cx='126' cy='112' rx='5' ry='2.8' transform='rotate(132 126 112)' fill='%23f9c6d8' fill-opacity='.85'/%3E%3Cellipse cx='192' cy='24' rx='5' ry='2.8' transform='rotate(7 192 24)' fill='%23f9c6d8' fill-opacity='.85'/%3E%3Cellipse cx='251' cy='142' rx='5' ry='2.8' transform='rotate(49 251 142)' fill='%23e98fb0' fill-opacity='.85'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cellipse cx='164' cy='98' rx='3.6' ry='2' transform='rotate(114 164 98)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='216' cy='195' rx='3.6' ry='2' transform='rotate(89 216 195)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='103' cy='30' rx='3.6' ry='2' transform='rotate(56 103 30)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='36' cy='68' rx='3.6' ry='2' transform='rotate(120 36 68)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='60' cy='96' rx='3.6' ry='2' transform='rotate(52 60 96)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='133' cy='169' rx='3.6' ry='2' transform='rotate(156 133 169)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='225' cy='10' rx='3.6' ry='2' transform='rotate(122 225 10)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3Cellipse cx='177' cy='98' rx='3.6' ry='2' transform='rotate(164 177 98)' fill='%23f9c6d8' fill-opacity='.6'/%3E%3C/svg%3E"); background-size: 320px 320px, 240px 240px; animation: swPetals 34s linear infinite; opacity: .8; }
  [data-theme=spooky] .page.home::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320' viewBox='0 0 420 320'%3E%3Cg transform='translate(53 71) scale(0.9)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%23ff8a1f' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(112 254) scale(0.7)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%235b3a86' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(335 180) scale(0.7)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%23ff8a1f' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(212 247) scale(0.9)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%23ff8a1f' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(53 91) scale(0.7)'%3E%3Cpath d='M17 5c2-4 7-4 8-1 1-2 4-2 5 0-3 0-4 4-5 7-2-3-4-3-8-1-4-2-6-2-8 1-1-3-2-7-5-7 1-2 4-2 5 0 1-3 6-3 8 1z' fill='%238b5cf6' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); background-size: 420px 320px; animation: swBats 40s linear infinite; opacity: .55; }
}
@keyframes swSnow { from { background-position: 0 0, 0 0; } to { background-position: 320px 320px, -220px 440px; } }
@keyframes swLeaves { from { background-position: 0 0, 0 0; } to { background-position: -360px 360px, 260px 520px; } }
@keyframes swPetals { from { background-position: 0 0, 0 0; } to { background-position: 320px 320px, 480px 240px; } }
@keyframes swBats { from { background-position: 0 0; } to { background-position: 840px -320px; } }