@font-face {
  font-family: Norwester;
  src: url('assets/norwester.woff') format('woff');
  font-display: swap;
}
:root {
  color-scheme: dark;
  --display: Norwester, Impact, sans-serif;
  --orange: #ff991b;
  --purple: #b48aff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #050505;
  color: #f6f2ed;
  font: 16px/1.5 Arial, sans-serif;
}
.shell { width: min(850px, calc(100% - 32px)); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
button, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
button { color: inherit; }
button, .action, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
}
.brand { font: 25px/1 var(--display); letter-spacing: .04em; }
.brand span { color: var(--orange); }
.aid-explorer summary {
  background: #140e1e;
  border-color: #a778ff66;
  color: #eee4ff;
}
.aid-explorer summary::after { color: var(--orange); }
.site-header .aid-explorer nav { background: #100b17; }
.site-header .aid-explorer nav .explore-aid,
.site-header .aid-explorer nav .explore-contact {
  background: #a778ff12;
  color: #d7bdff;
}
.site-header .aid-explorer nav a:hover { background: #31203e; }
.video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #af7aff66;
  border-radius: 12px;
  background: #0d0a0f;
  box-shadow: -7px 0 30px #ff991b18, 8px 0 32px #8a36ff30;
}
video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.sound-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid #ffffff70;
  border-radius: 50%;
  background: #000b;
}
.sound-toggle svg { width: 19px; height: 19px; }
.sound-on { display: none; }
.sound-toggle[aria-pressed='true'] .sound-on { display: block; }
.sound-toggle[aria-pressed='true'] .sound-off { display: none; }
.video-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}
.location { color: var(--purple); font-size: 10px; letter-spacing: .13em; }
.location::before { content: '✦'; margin-right: 6px; color: var(--orange); }
#play-toggle {
  border: 0;
  padding: 8px 0 8px 12px;
  background: transparent;
  font-size: 12px;
}
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; }
h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; }
h1 span { color: var(--orange); }
.intro { padding-block: 8px 16px; }
.intro p { margin-top: 7px; color: #d6cfd9; }
.intro strong { color: #fff; }
.intro .appeal { color: var(--orange); font-size: 19px; }
h2 { font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
h2 span { color: var(--purple); }
.support, .connect { margin-bottom: 20px; }
.crypto { border: 1px solid #ff991b80; border-radius: 8px; }
.crypto > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: var(--orange);
  border-radius: 7px;
  color: #130b02;
  font-weight: 700;
  list-style: none;
}
.crypto > summary::-webkit-details-marker { display: none; }
.crypto[open] .chevron { transform: rotate(180deg); }
.crypto-content { padding: 14px; }
label { display: block; margin-bottom: 6px; font-size: 13px; }
select, textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #796487;
  border-radius: 5px;
  background: #151018;
  color: #fff;
}
select { font-size: 14px; }
textarea {
  resize: none;
  font: 13px/1.6 monospace;
  overflow-wrap: anywhere;
}
.network-note { margin-block: 12px 8px; color: #fbc47c; font-size: 14px; }
.wallet-actions { display: flex; gap: 8px; margin-top: 8px; }
.wallet-actions button, #share-page {
  border: 1px solid #b48aff88;
  border-radius: 5px;
  background: #28183e;
  padding: 10px 14px;
  font-size: 13px;
}
.help { margin-top: 12px; color: #bcb2c4; font-size: 12px; }
.help a { color: var(--purple); text-decoration: underline; }
#wallet-qr { width: min(100%, 320px); height: auto; margin: 14px auto 0; }
#wallet-qr:not([hidden]) { display: block; }
[hidden] { display: none !important; }
.action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid #b48aff40;
  border-radius: 7px;
  background: #100c14;
}
.action > span:last-child { color: var(--purple); font-size: 22px; }
.action:hover { background: #21152d; border-color: var(--purple); }
.chuffed { margin-top: 8px; font-weight: 700; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.social-grid .action {
  border: 2px solid var(--orange);
  box-shadow: 0 0 10px #ff991b18;
}
.social-grid .action:hover {
  border-color: #ffbc65;
  box-shadow: 0 0 14px #ff991b30;
}
.action strong { font-size: 14px; }
.action small { display: block; font-size: 11px; color: #c4b7cd; }
.share { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share h2 { font-size: 23px; margin-bottom: 3px; }
.share p, footer p { font-size: 12px; color: #b8acbf; }
#share-page { flex-shrink: 0; }
[role='status']:not(:empty) { margin-top: 10px; color: #fbc47c; font-size: 13px; }
footer { display: flex; justify-content: space-between; padding-block: 24px 20px; }
footer .brand { font-size: 19px; }
.sparkles { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.sparkle {
  position: absolute;
  color: var(--orange);
  font-size: 13px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.sparkle:nth-child(even) { color: var(--purple); }
@keyframes twinkle { from { opacity: .25; } to { opacity: .9; } }
@media (max-width: 480px) {
  .shell { width: calc(100% - 24px); }
  .intro p { font-size: 14px; }
  .intro .appeal { font-size: 18px; }
  .share { align-items: flex-start; flex-direction: column; gap: 9px; }
  h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: .5; }
}