/* src/index.css */
:root {
  --bg: #0b1020;
  --bg-2: #0f1229;
  --card: #ffffff0f;
  --card-border: #ffffff1f;
  --text: #ffffffeb;
  --muted: #fff9;
  --accent: #7c5cff;
  --accent-2: #6ee7ff;
  --shadow: 0 10px 30px #00000059;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #7c5cff40, transparent 50%), radial-gradient(1000px 600px at 90% 10%, #6ee7ff33, transparent 50%), linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  opacity: .03;
  animation: slide 30s linear infinite;
  pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iQnVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA3MCI+PHRpdGxlPkJ1biBMb2dvPC90aXRsZT48cGF0aCBpZD0iU2hhZG93IiBkPSJNNzEuMDksMjAuNzRjLS4xNi0uMTctLjMzLS4zNC0uNS0uNXMtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjUtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjVBMjYuNDYsMjYuNDYsMCwwLDEsNzUuNSwzNS43YzAsMTYuNTctMTYuODIsMzAuMDUtMzcuNSwzMC4wNS0xMS41OCwwLTIxLjk0LTQuMjMtMjguODMtMTAuODZsLjUuNS41LjUuNS41LjUuNS41LjUuNS41LjUuNUMxOS41NSw2NS4zLDMwLjE0LDY5Ljc1LDQyLDY5Ljc1YzIwLjY4LDAsMzcuNS0xMy40OCwzNy41LTMwQzc5LjUsMzIuNjksNzYuNDYsMjYsNzEuMDksMjAuNzRaIi8+PGcgaWQ9IkJvZHkiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kIiBkPSJNNzMsMzUuN2MwLDE1LjIxLTE1LjY3LDI3LjU0LTM1LDI3LjU0UzMsNTAuOTEsMywzNS43QzMsMjYuMjcsOSwxNy45NCwxOC4yMiwxM1MzMy4xOCwzLDM4LDNzOC45NCw0LjEzLDE5Ljc4LDEwQzY3LDE3Ljk0LDczLDI2LjI3LDczLDM1LjdaIiBzdHlsZT0iZmlsbDojZmJmMGRmIi8+PHBhdGggaWQ9IkJvdHRvbV9TaGFkb3ciIGRhdGEtbmFtZT0iQm90dG9tIFNoYWRvdyIgZD0iTTczLDM1LjdhMjEuNjcsMjEuNjcsMCwwLDAtLjgtNS43OGMtMi43MywzMy4zLTQzLjM1LDM0LjktNTkuMzIsMjQuOTRBNDAsNDAsMCwwLDAsMzgsNjMuMjRDNTcuMyw2My4yNCw3Myw1MC44OSw3MywzNS43WiIgc3R5bGU9ImZpbGw6I2Y2ZGVjZSIvPjxwYXRoIGlkPSJMaWdodF9TaGluZSIgZGF0YS1uYW1lPSJMaWdodCBTaGluZSIgZD0iTTI0LjUzLDExLjE3QzI5LDguNDksMzQuOTQsMy40Niw0MC43OCwzLjQ1QTkuMjksOS4yOSwwLDAsMCwzOCwzYy0yLjQyLDAtNSwxLjI1LTguMjUsMy4xMy0xLjEzLjY2LTIuMywxLjM5LTMuNTQsMi4xNS0yLjMzLDEuNDQtNSwzLjA3LTgsNC43QzguNjksMTguMTMsMywyNi42MiwzLDM1LjdjMCwuNCwwLC44LDAsMS4xOUM5LjA2LDE1LjQ4LDIwLjA3LDEzLjg1LDI0LjUzLDExLjE3WiIgc3R5bGU9ImZpbGw6I2ZmZmVmYyIvPjxwYXRoIGlkPSJUb3AiIGQ9Ik0zNS4xMiw1LjUzQTE2LjQxLDE2LjQxLDAsMCwxLDI5LjQ5LDE4Yy0uMjguMjUtLjA2LjczLjMuNTksMy4zNy0xLjMxLDcuOTItNS4yMyw2LTEzLjE0QzM1LjcxLDUsMzUuMTIsNS4xMiwzNS4xMiw1LjUzWm0yLjI3LDBBMTYuMjQsMTYuMjQsMCwwLDEsMzksMTljLS4xMi4zNS4zMS42NS41NS4zNkM0MS43NCwxNi41Niw0My42NSwxMSwzNy45Myw1LDM3LjY0LDQuNzQsMzcuMTksNS4xNCwzNy4zOSw1LjQ5Wm0yLjc2LS4xN0ExNi40MiwxNi40MiwwLDAsMSw0NywxNy4xMmEuMzMuMzMsMCwwLDAsLjY1LjExYy45Mi0zLjQ5LjQtOS40NC03LjE3LTEyLjUzQzQwLjA4LDQuNTQsMzkuODIsNS4wOCw0MC4xNSw1LjMyWk0yMS42OSwxNS43NmExNi45NCwxNi45NCwwLDAsMCwxMC40Ny05Yy4xOC0uMzYuNzUtLjIyLjY2LjE4LTEuNzMsOC03LjUyLDkuNjctMTEuMTIsOS40NUMyMS4zMiwxNi40LDIxLjMzLDE1Ljg3LDIxLjY5LDE1Ljc2WiIgc3R5bGU9ImZpbGw6I2NjYmVhNztmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJPdXRsaW5lIiBkPSJNMzgsNjUuNzVDMTcuMzIsNjUuNzUuNSw1Mi4yNy41LDM1LjdjMC0xMCw2LjE4LTE5LjMzLDE2LjUzLTI0LjkyLDMtMS42LDUuNTctMy4yMSw3Ljg2LTQuNjIsMS4yNi0uNzgsMi40NS0xLjUxLDMuNi0yLjE5QzMyLDEuODksMzUsLjUsMzgsLjVzNS42MiwxLjIsOC45LDMuMTRjMSwuNTcsMiwxLjE5LDMuMDcsMS44NywyLjQ5LDEuNTQsNS4zLDMuMjgsOSw1LjI3QzY5LjMyLDE2LjM3LDc1LjUsMjUuNjksNzUuNSwzNS43LDc1LjUsNTIuMjcsNTguNjgsNjUuNzUsMzgsNjUuNzVaTTM4LDNjLTIuNDIsMC01LDEuMjUtOC4yNSwzLjEzLTEuMTMuNjYtMi4zLDEuMzktMy41NCwyLjE1LTIuMzMsMS40NC01LDMuMDctOCw0LjdDOC42OSwxOC4xMywzLDI2LjYyLDMsMzUuNywzLDUwLjg5LDE4LjcsNjMuMjUsMzgsNjMuMjVTNzMsNTAuODksNzMsMzUuN0M3MywyNi42Miw2Ny4zMSwxOC4xMyw1Ny43OCwxMyw1NCwxMSw1MS4wNSw5LjEyLDQ4LjY2LDcuNjRjLTEuMDktLjY3LTIuMDktMS4yOS0zLTEuODRDNDIuNjMsNCw0MC40MiwzLDM4LDNaIi8+PC9nPjxnIGlkPSJNb3V0aCI+PGcgaWQ9IkJhY2tncm91bmQtMiIgZGF0YS1uYW1lPSJCYWNrZ3JvdW5kIj48cGF0aCBkPSJNNDUuMDUsNDNhOC45Myw4LjkzLDAsMCwxLTIuOTIsNC43MSw2LjgxLDYuODEsMCwwLDEtNCwxLjg4QTYuODQsNi44NCwwLDAsMSwzNCw0Ny43MSw4LjkzLDguOTMsMCwwLDEsMzEuMTIsNDNhLjcyLjcyLDAsMCwxLC44LS44MUg0NC4yNkEuNzIuNzIsMCwwLDEsNDUuMDUsNDNaIiBzdHlsZT0iZmlsbDojYjcxNDIyIi8+PC9nPjxnIGlkPSJUb25ndWUiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kLTMiIGRhdGEtbmFtZT0iQmFja2dyb3VuZCIgZD0iTTM0LDQ3Ljc5YTYuOTEsNi45MSwwLDAsMCw0LjEyLDEuOSw2LjkxLDYuOTEsMCwwLDAsNC4xMS0xLjksMTAuNjMsMTAuNjMsMCwwLDAsMS0xLjA3LDYuODMsNi44MywwLDAsMC00LjktMi4zMSw2LjE1LDYuMTUsMCwwLDAtNSwyLjc4QzMzLjU2LDQ3LjQsMzMuNzYsNDcuNiwzNCw0Ny43OVoiIHN0eWxlPSJmaWxsOiNmZjYxNjQiLz48cGF0aCBpZD0iT3V0bGluZS0yIiBkYXRhLW5hbWU9Ik91dGxpbmUiIGQ9Ik0zNC4xNiw0N2E1LjM2LDUuMzYsMCwwLDEsNC4xOS0yLjA4LDYsNiwwLDAsMSw0LDEuNjljLjIzLS4yNS40NS0uNTEuNjYtLjc3YTcsNywwLDAsMC00LjcxLTEuOTMsNi4zNiw2LjM2LDAsMCwwLTQuODksMi4zNkE5LjUzLDkuNTMsMCwwLDAsMzQuMTYsNDdaIi8+PC9nPjxwYXRoIGlkPSJPdXRsaW5lLTMiIGRhdGEtbmFtZT0iT3V0bGluZSIgZD0iTTM4LjA5LDUwLjE5YTcuNDIsNy40MiwwLDAsMS00LjQ1LTIsOS41Miw5LjUyLDAsMCwxLTMuMTEtNS4wNSwxLjIsMS4yLDAsMCwxLC4yNi0xLDEuNDEsMS40MSwwLDAsMSwxLjEzLS41MUg0NC4yNmExLjQ0LDEuNDQsMCwwLDEsMS4xMy41MSwxLjE5LDEuMTksMCwwLDEsLjI1LDFoMGE5LjUyLDkuNTIsMCwwLDEtMy4xMSw1LjA1QTcuNDIsNy40MiwwLDAsMSwzOC4wOSw1MC4xOVptLTYuMTctNy40Yy0uMTYsMC0uMi4wNy0uMjEuMDlhOC4yOSw4LjI5LDAsMCwwLDIuNzMsNC4zN0E2LjIzLDYuMjMsMCwwLDAsMzguMDksNDlhNi4yOCw2LjI4LDAsMCwwLDMuNjUtMS43Myw4LjMsOC4zLDAsMCwwLDIuNzItNC4zNy4yMS4yMSwwLDAsMC0uMi0uMDlaIi8+PC9nPjxnIGlkPSJGYWNlIj48ZWxsaXBzZSBpZD0iUmlnaHRfQmx1c2giIGRhdGEtbmFtZT0iUmlnaHQgQmx1c2giIGN4PSI1My4yMiIgY3k9IjQwLjE4IiByeD0iNS44NSIgcnk9IjMuNDQiIHN0eWxlPSJmaWxsOiNmZWJiZDAiLz48ZWxsaXBzZSBpZD0iTGVmdF9CbHVjaCIgZGF0YS1uYW1lPSJMZWZ0IEJsdWNoIiBjeD0iMjIuOTUiIGN5PSI0MC4xOCIgcng9IjUuODUiIHJ5PSIzLjQ0IiBzdHlsZT0iZmlsbDojZmViYmQwIi8+PHBhdGggaWQ9IkV5ZXMiIGQ9Ik0yNS43LDM4LjhhNS41MSw1LjUxLDAsMSwwLTUuNS01LjUxQTUuNTEsNS41MSwwLDAsMCwyNS43LDM4LjhabTI0Ljc3LDBBNS41MSw1LjUxLDAsMSwwLDQ1LDMzLjI5LDUuNSw1LjUsMCwwLDAsNTAuNDcsMzguOFoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJJcmlzIiBkPSJNMjQsMzMuNjRhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsMjQsMzMuNjRabTI0Ljc3LDBhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsNDguNzUsMzMuNjRaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkIi8+PC9nPjwvc3ZnPg==") 0 0 / 256px;
  inset: 0;
  transform: rotate(-12deg)scale(1.35);
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 256px 224px;
  }
}

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header, .footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.footer {
  color: var(--muted);
  justify-content: center;
  gap: .5rem;
}

.dot {
  background: var(--muted);
  border-radius: 999px;
  width: 4px;
  height: 4px;
}

.brand {
  display: flex;
  align-items:  center;
  gap: .6rem;
}

.brand-logo {
  width: 28px;
  height: 28px;
}

.brand-name {
  font-weight: 700;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.hero {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items:  center;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.logo {
  will-change: filter;
  height: 6em;
  padding: 1.5em;
  transition: filter .3s;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.bun-logo {
  transform: scale(1.2);
}

.bun-logo:hover {
  filter: drop-shadow(0 0 2em #fbf0dfaa);
}

.react-logo {
  animation: spin 20s linear infinite;
}

.react-logo:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.title {
  margin: 0;
}

.gradient-text {
  background: linear-gradient(90deg, #fff, #bdb7ff 30%, #9ae6ff 70%, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.subtitle {
  color: var(--muted);
  margin-top: .5rem;
}

.card {
  border-radius: 20px;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem;
}

.glass {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.glass.disabled {
  filter: grayscale(.3);
  opacity: .7;
  pointer-events: none;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:  center;
  gap: 1rem;
  margin: 1.25rem 0 .25rem;
}

.stat-card {
  border: 1px solid var(--card-border);
  text-align: center;
  position: relative;
  background: #ffffff12;
  border-radius: 14px;
  min-width: 160px;
  padding: .9rem 1.1rem;
}

.stat-label {
  color: var(--muted);
  font-size: .9rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
}

.tooltip {
  position: absolute;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  white-space: nowrap;
  z-index: 10;
  background: #0a0a0af2;
  border-radius: 10px;
  padding: .5rem .6rem;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.flips-tooltip:after {
  content: "";
  position: absolute;
  border: 6px solid #0000;
  border-top-color: #0a0a0af2;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.flips-row {
  display: flex;
  gap: .35rem;
}

.flip-pill {
  border: 1px solid var(--card-border);
  background: #ffffff0f;
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: .85rem;
}

.flip-pill.heads {
  color: #9ae6ff;
}

.flip-pill.tails {
  color: #fbb6ce;
}

.actions {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.primary-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0a0a;
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  padding: .9rem 1.4rem;
  transition: transform .1s, box-shadow .1s, opacity .2s;
  font-weight: 800;
  box-shadow: 0 6px 20px #7c5cff59;
}

.primary-button:hover {
  transform: translateY(-1px);
}

.primary-button[disabled], .primary-button[data-loading="true"] {
  opacity: .7;
  cursor: not-allowed;
}

.meta {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: .6rem;
  margin-top: 1.2rem;
}

.pill {
  border: 1px solid var(--card-border);
  background: #ffffff12;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .85rem;
}

.tx-link {
  text-decoration: none;
  color: #0a0a0a;
  background: #ffffffe6;
  border: 0;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.link {
  color: #9ae6ff;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

code {
  background-color: #1a1a1a;
  border-radius: .3em;
  padding: .2em .4em;
  font-family: monospace;
}

.api-tester {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  margin: 2rem auto 0;
}

.endpoint-row {
  display: flex;
  font: monospace;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 2px solid #fbf0df;
  border-radius: 12px;
  align-items:  center;
  gap: .5rem;
  width: 100%;
  padding: .75rem;
  transition: all .3s;
}

.endpoint-row:focus-within {
  border-color: #f3d5a3;
}

.method {
  color: #1a1a1a;
  appearance: none;
  display: block;
  background: #fbf0df;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  width: min-content;
  margin: 0;
  padding: .3rem .7rem;
  font-size: .9em;
  font-weight: 700;
}

.method option {
  text-align: left;
}

.url-input {
  color: #fbf0df;
  outline: 0;
  background: 0;
  border: 0;
  flex: 1;
  width: 100%;
  padding: .2rem;
  font: 1em monospace;
}

.url-input:focus {
  color: #fff;
}

.url-input::placeholder {
  color: #fbf0df66;
}

.send-button {
  color: #1a1a1a;
  cursor: var(--bun-cursor);
  background: #fbf0df;
  border: 0;
  border-radius: 8px;
  padding: .4rem 1.2rem;
  transition: all .1s;
  font-weight: 700;
}

.send-button:hover {
  cursor: pointer;
  background: #f3d5a3;
  transform: translateY(-1px);
}

.response-area {
  color: #fbf0df;
  font: monospace;
  resize: vertical;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 2px solid #fbf0df;
  border-radius: 12px;
  width: 100%;
  min-height: 120px;
  padding: .75rem;
}

.response-area:focus {
  border-color: #f3d5a3;
}

.response-area::placeholder {
  color: #fbf0df66;
}

@media (prefers-reduced-motion) {
  *, :before, :after {
    animation: none !important;
  }
}