@font-face {
  font-family: 'Inter Meadow';
  src: url('./fonts/inter-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Meadow';
  src: url('./fonts/inter-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}
/* Orcha meadow — daylight is confined to the interactive landing. */
:root {
  --bg: #10172b;
  --panel: #182039;
  --ink: #f0f0f7;
  --muted: #a5adc4;
  --line: #ffffff20;
  --green: #c4b3ed;
  --mono: 'Inter Meadow', sans-serif;
  color-scheme: dark;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter Meadow', sans-serif;
}
button,
input,
textarea,
select {
  font-family: inherit;
}
button,
a {
  touch-action: manipulation;
}
::selection {
  background: #b6a2e3;
  color: #10172b;
}
a,
button {
  transition:
    color 0.2s,
    background 0.2s,
    opacity 0.2s,
    transform 0.2s;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #bda6ea;
  outline-offset: 6px;
}
header {
  position: fixed;
  inset: 0 0 auto;
  height: 76px;
  padding: 0 4.5%;
  background: #10172be8;
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  visibility: hidden;
  transition:
    transform 0.35s,
    visibility 0.35s;
  gap: 24px;
}
header.site-header-visible {
  transform: none;
  visibility: visible;
}
.brand {
  font:
    600 32px/1 'Inter Meadow',
    sans-serif;
  letter-spacing: -2px;
}
.brand span {
  color: #bda6ea;
  margin: 0;
}
header nav {
  gap: 24px;
}
header nav b {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
header nav a:hover b,
header nav button:hover b {
  color: #fff;
}
header .btn.small {
  font-size: 10px;
  min-height: 34px;
  padding: 10px 14px;
}
.landing {
  height: 100svh;
  min-height: 580px;
  max-height: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(#e9f0f4, #82b7f2 60%, #759c47);
  color: #424d55;
  touch-action: pan-y;
}
.landing::before {
  display: none;
}
#atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  animation: meadow-arrive 1.5s both;
}
.landing-copy {
  position: absolute;
  z-index: 2;
  left: 4.5%;
  top: 8.6%;
  margin: 0;
  padding: 0;
  width: 34%;
  max-width: 420px;
  pointer-events: none;
}
.landing h1 {
  font:
    600 clamp(25px, 3.05vw, 44px)/1.01 'Inter Meadow',
    Helvetica,
    sans-serif;
  letter-spacing: -0.065em;
  margin: 0 0 17px;
}
.landing-intro {
  font:
    400 clamp(11px, 1.04vw, 15px)/1.5 'Inter Meadow',
    sans-serif;
  color: inherit;
  opacity: 0.82;
  margin: 0;
  letter-spacing: -0.025em;
}
.meadow-nav {
  position: absolute;
  z-index: 3;
  right: 4.5%;
  top: 8.5%;
  width: 27%;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.8fr;
  gap: 20px;
  align-items: start;
}
.meadow-nav > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.meadow-nav a,
.meadow-nav button {
  font:
    400 clamp(10px, 1vw, 14px)/1.2 'Inter Meadow',
    sans-serif;
  letter-spacing: -0.025em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.78;
  text-align: left;
  white-space: nowrap;
}
.meadow-nav a:hover,
.meadow-nav button:hover {
  opacity: 1;
  transform: translateX(2px);
  color: inherit;
}
.landing-copy,
.meadow-nav {
  transition: none;
}
.landing[data-night='true'] {
  color: #e1e3ef;
}
.landing-bottom {
  position: absolute;
  z-index: 3;
  bottom: 4%;
  left: 4.5%;
  right: 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 0;
  color: #fff;
  font:
    11px 'Inter Meadow',
    sans-serif;
  gap: 20px;
}
.landing-bottom > div {
  display: flex;
  align-items: center;
  gap: 23px;
}
.landing-bottom a {
  color: #fff;
  opacity: 0.9;
}
.landing-bottom button {
  background: none;
  border: 0;
  color: #fff;
  padding: 4px;
  min-width: 24px;
  font-size: 17px;
}
.landing-bottom button:hover,
.landing-bottom a:hover {
  opacity: 0.65;
}
.meadow-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#edf2f7, #87b8ef 68%);
  z-index: 0;
}
.meadow-fallback span {
  position: absolute;
  top: 34%;
  width: 100%;
  text-align: center;
  color: #fff;
  font: 600 29vw/1 'Inter Meadow';
  letter-spacing: -0.07em;
}
.meadow-fallback i {
  position: absolute;
  left: -10%;
  bottom: -16%;
  width: 85%;
  height: 47%;
  border-radius: 50%;
  background: linear-gradient(130deg, #7d9654, #324c27);
  transform: rotate(-9deg);
}
.meadow-fallback i + i {
  left: 40%;
  bottom: -10%;
  background: linear-gradient(130deg, #94a563, #263d25);
  transform: rotate(10deg);
}
.landing[data-atmosphere='webgl'] .meadow-fallback {
  display: none;
}
.landing[data-night='true'] .meadow-fallback {
  filter: brightness(0.3) saturate(0.6);
}
.section {
  position: relative;
  padding: 100px 6%;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font:
    11px/1.5 'Inter Meadow',
    sans-serif;
  letter-spacing: 0.025em;
  color: var(--muted);
}
h2,
.card-title h3,
.lifecycle-grid h3 {
  font-family: 'Inter Meadow', sans-serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}
h2 {
  font-size: clamp(38px, 4.5vw, 66px);
  margin-top: 16px;
}
h2 > span {
  font:
    11px 'Inter Meadow',
    sans-serif;
  color: var(--muted);
}
.section-heading {
  margin-bottom: 44px;
}
.btn {
  border: 1px solid #c3c9df45;
  background: #ffffff04;
  border-radius: 5px;
  box-shadow: none;
  font:
    12px 'Inter Meadow',
    sans-serif;
  letter-spacing: 0;
  padding: 15px 21px;
  min-height: 44px;
  color: var(--ink);
  gap: 20px;
}
.btn:hover {
  background: #ffffff0e;
  border-color: #c3b5e7;
  box-shadow: none;
  transform: translateY(-1px);
}
.btn.primary {
  background: #d5c9f0;
  border-color: #d5c9f0;
  color: #25233d;
}
.btn.primary:hover {
  background: #e6dcfa;
  border-color: #e6dcfa;
  box-shadow: 0 6px 30px #bda6ea15;
}
.toolbar {
  border-color: var(--line);
}
.tabs {
  gap: 27px;
}
.tabs button {
  font:
    11px 'Inter Meadow',
    sans-serif;
  color: var(--muted);
  padding: 18px 0;
}
.tabs button.selected {
  color: #efe7ff;
  border-color: #c4b3ed;
}
.search input {
  font:
    12px 'Inter Meadow',
    sans-serif;
  color: var(--ink);
}
.queue-grid {
  gap: 22px;
}
.queue-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #1c2540, #161e34);
  padding: 23px;
}
.queue-card:hover {
  border-color: #b5a2d978;
  box-shadow: 0 18px 45px #04091e44;
  transform: translateY(-4px);
}
.queue-card p,
.card-data,
.card-foot {
  color: var(--muted);
}
.card-art {
  border-radius: 5px;
  background: radial-gradient(ellipse at 55% 100%, #b19cdf28, transparent 75%);
}
.token-monogram,
.queue-card:nth-child(n) .token-monogram {
  font:
    400 72px 'Inter Meadow',
    sans-serif;
  letter-spacing: -0.07em;
  text-shadow: none;
  color: #d6c7f1;
}
.queue-card:nth-child(2n) .token-monogram {
  color: #e2b9cc;
}
.queue-card:nth-child(3n) .token-monogram {
  color: #abc7e8;
}
.chip,
.chip.creator {
  background: #c7b3ea12;
  border-color: #c7b3ea33;
  color: #d5c6ed;
  border-radius: 3px;
  font:
    10px 'Inter Meadow',
    sans-serif;
}
.chip.bloom {
  background: #c1d4ba;
  color: #24382d;
}
.progress {
  background: #ffffff10;
}
.progress i {
  background: linear-gradient(90deg, #a99bd3, #d7b4d5);
  box-shadow: none;
}
.positive {
  color: #c1d4ba;
}
.section-note {
  margin-top: 25px;
  font:
    10px/1.6 'Inter Meadow',
    sans-serif;
  color: var(--muted);
}
.born-section {
  background: radial-gradient(ellipse at 75% 100%, #34304b55, transparent 65%), #121a2e;
}
.table-head,
.born-row {
  font-family: 'Inter Meadow', sans-serif;
  color: var(--muted);
}
.born-symbol {
  background: #c7b3ea12;
  border-color: var(--line);
  color: #d5c6ed;
}
.empty {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  font-size: 14px;
}
.lifecycle {
  background: radial-gradient(ellipse at 25% 100%, #263b4855, transparent 65%), #10172b;
}
.lifecycle-grid {
  margin-top: 40px;
}
.lifecycle-grid button {
  border-color: var(--line);
  padding: 28px !important;
}
.lifecycle-grid button:hover {
  background: #ffffff04;
}
.lifecycle-grid button > span {
  font:
    11px 'Inter Meadow',
    sans-serif;
  color: #bdafdc;
}
.lifecycle-grid h3 {
  font-size: 38px;
  margin-bottom: 18px;
}
.lifecycle-grid p {
  color: var(--muted);
  font-size: 14px;
}
.endmark {
  position: relative;
  overflow: hidden;
  padding: 65px 5% 50px;
  background: radial-gradient(ellipse at 60% 120%, #39433399, transparent 60%), #10172b;
  color: #f3f2fa;
  font:
    500 clamp(100px, 28vw, 540px)/0.9 'Inter Meadow',
    sans-serif;
  letter-spacing: -0.075em;
}
.endmark > span {
  color: #bda6ea;
  margin: 0;
}
.endmark p {
  font:
    11px 'Inter Meadow',
    sans-serif;
  letter-spacing: 0;
  color: var(--muted);
  margin: 30px 0 0;
}
footer {
  background: #10172b;
  border-color: var(--line);
  padding: 32px 5%;
  gap: 25px;
}
footer > span,
footer a,
footer button {
  font-family: 'Inter Meadow', sans-serif;
  color: var(--muted);
  letter-spacing: 0;
}
footer .brand {
  color: var(--ink);
  font-size: 25px;
}
/* All application and reading surfaces remain in the midnight palette. */
dialog,
dialog.pledge-dialog {
  color: var(--ink);
  background: radial-gradient(ellipse at 95% 0%, #60557730, transparent 65%), #141d33;
  border: 1px solid #b9aec33d;
  border-radius: 12px;
  box-shadow: 0 30px 100px #02051588;
}
dialog::backdrop {
  background: #070c20a6;
  backdrop-filter: blur(8px);
}
.modal-top {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-family: 'Inter Meadow', sans-serif;
}
.modal-top button {
  color: var(--muted);
}
#modalBody h2 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}
#modalBody p,
.fine,
.pledge-dialog .field,
.field {
  color: var(--muted);
}
input,
textarea,
select,
.launch-layout input,
.launch-layout textarea,
.launch-layout select,
.pledge-dialog #amount {
  background: #0e162b66;
  color: var(--ink);
  border: 1px solid #b7b8da30;
  border-radius: 5px;
  padding: 12px;
  font-family: 'Inter Meadow', sans-serif;
}
input::placeholder,
textarea::placeholder {
  color: #7c879f;
}
.launch-preview,
.pledge-controls {
  background: #1d294155;
  border-color: var(--line);
  border-radius: 8px;
}
.image-drop {
  background: #10192e;
  border-color: #b4a4cf55;
  border-radius: 6px;
}
.image-drop:hover,
.image-drop.dragging {
  background: #252c44;
}
.image-drop #imagePlaceholder,
.image-drop b {
  color: #d6c7ed;
}
.image-drop small,
.launch-preview #liveTicker,
.preview-total {
  color: var(--muted);
}
.review-grid > div,
.proposal {
  background: #1c2740;
  border-color: var(--line);
  border-radius: 5px;
}
.tutorial-visual {
  background: radial-gradient(ellipse at bottom, #53634c66, transparent 75%), #1a2440;
  color: #d8c8ed;
  border-color: var(--line);
  border-radius: 7px;
}
.tutorial-line {
  width: 90px;
  height: 1px;
  background: currentColor;
}
.reference-note,
#docContent .doc-callout {
  color: #d4cbe9;
  background: #c3b2ec0b;
  border: 1px solid #c3b2ec28;
  border-left: 2px solid #b6a4dd;
  border-radius: 4px;
}
.reference-source,
#docContent summary {
  color: #c4b7df;
}
.reference-quote {
  border-color: #b6a4dd;
}
#documentView:not([hidden]) {
  min-height: calc(100svh - 120px);
  padding-top: 140px;
  background: radial-gradient(ellipse at 95% 0%, #3d385433, transparent 45%), var(--bg);
}
#docContent h1 {
  font-family: 'Inter Meadow', sans-serif;
  font-size: clamp(42px, 5.2vw, 76px);
  letter-spacing: -0.06em;
  font-weight: 400;
  margin: 0 0 65px;
}
#docContent h2 {
  font-size: 30px;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
}
#docContent p,
#docContent li {
  color: #b1b9ce;
  line-height: 1.9;
  font-size: 15px;
}
#docContent section {
  scroll-margin-top: 105px;
  padding-bottom: 35px;
}
#docContent a {
  color: #d7c7ef;
}
#docNav {
  border-color: var(--line);
  top: 110px;
}
#docNav a {
  color: var(--muted);
  font:
    12px/1.6 'Inter Meadow',
    sans-serif;
  padding: 11px 0;
}
#docNav a:hover {
  color: #fff;
}
.local-escrow-layout,
.local-v2-panel,
.local-escrow-form,
.local-escrow-output,
.local-result-grid > div,
.local-empty,
.local-sign-receipt {
  background: #151f35;
  color: var(--ink);
  border-color: var(--line);
}
#toast {
  background: #25314a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
}
@keyframes meadow-arrive {
  from {
    filter: blur(12px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}
@media (min-width: 1800px) {
  .landing-copy {
    max-width: 500px;
  }
  .landing h1 {
    font-size: 48px;
  }
  .meadow-nav a,
  .meadow-nav button {
    font-size: 15px;
  }
}
@media (max-width: 1000px) {
  header nav {
    gap: 14px;
  }
  .meadow-nav {
    width: 35%;
    gap: 16px;
  }
  .landing-copy {
    width: 45%;
  }
  .section {
    padding: 75px 5%;
  }
  .lifecycle-grid button {
    padding: 20px !important;
  }
}
@media (max-width: 760px) {
  header {
    height: 102px;
    padding: 12px 5% 43px;
    flex-wrap: wrap;
    gap: 8px;
  }
  header nav {
    position: absolute;
    bottom: 8px;
    left: 5%;
    right: 5%;
    max-width: 90%;
    width: auto;
    gap: 22px;
    overflow: auto;
  }
  header nav b {
    font-size: 10px;
  }
  .brand {
    font-size: 28px;
  }
  header #wallet {
    max-width: 65%;
    margin-left: auto;
  }
  .landing {
    min-height: 680px;
    height: 100svh;
  }
  .landing-copy {
    top: 6%;
    left: 6%;
    width: 88%;
    max-width: none;
  }
  .landing h1 {
    font-size: 32px;
    line-height: 1.02;
    letter-spacing: -0.06em;
    margin-bottom: 14px;
  }
  .landing-intro {
    font-size: 12px;
  }
  .meadow-nav {
    top: 29%;
    left: 6%;
    right: 6%;
    width: auto;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .meadow-nav > div {
    gap: 13px;
  }
  .meadow-nav a,
  .meadow-nav button {
    font-size: 11px;
  }
  .landing-bottom {
    left: 6%;
    right: 6%;
    bottom: 3%;
    font-size: 9px;
    gap: 8px;
  }
  .landing-bottom > div {
    gap: 12px;
  }
  .landing-bottom > div:last-child a {
    display: none;
  }
  .landing-bottom button {
    font-size: 16px;
    min-width: 22px;
  }
  .section {
    padding: 60px 6%;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .section-heading h2 {
    font-size: 37px;
  }
  .section-heading .btn {
    font-size: 10px;
    padding: 12px;
  }
  .tabs {
    gap: 22px;
  }
  .tabs button {
    font-size: 10px;
  }
  .queue-grid {
    gap: 14px;
  }
  .queue-card {
    padding: 16px;
  }
  .lifecycle-grid h3 {
    font-size: 31px;
  }
  .endmark {
    padding: 50px 6% 40px;
    font-size: 27vw;
  }
  .endmark p {
    font-size: 10px;
  }
  footer {
    padding: 25px 6%;
  }
  footer > div {
    flex-wrap: wrap;
    gap: 16px;
  }
  #documentView:not([hidden]) {
    padding-top: 135px;
    gap: 35px;
  }
  #docNav {
    position: static;
  }
  #docNav a {
    font-size: 11px;
  }
  #docContent h1 {
    font-size: 44px;
    margin-bottom: 40px;
  }
  #docContent h2 {
    font-size: 27px;
  }
  #docContent p,
  #docContent li {
    font-size: 14px;
  }
  .launch-dialog #modalBody {
    padding: 22px;
  }
  .launch-preview {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #atmosphere {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* The same landscape remains available when WebGL cannot start. */
.meadow-fallback {
  background: url('./meadow-landscape.png') center/cover no-repeat;
}
.meadow-fallback i {
  display: none;
}
.meadow-fallback span {
  top: 40%;
  font-size: 29vw;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 70%,
    83% 60%,
    72% 49%,
    62% 58%,
    52% 75%,
    40% 80%,
    28% 65%,
    13% 78%,
    0 85%
  );
}
.endmark {
  background:
    linear-gradient(#10172b 5%, #10172bb5 55%, #10172b99),
    url('./meadow-landscape.png') center 72% / cover no-repeat;
}
#documentView:not([hidden]) {
  background:
    linear-gradient(#10172bf2, #10172b 390px),
    url('./meadow-landscape.png') center top/100% auto no-repeat;
}
.wallet-option {
  background: #ffffff04;
  border-color: var(--line);
  color: var(--ink);
}
.wallet-option:hover {
  background: #ffffff0c;
}
/* One continuous descent: meadow → grass shadow → soil → roots → footer. */
:root {
  --earth: #151410;
}
.landing::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: clamp(100px, 18vh, 180px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #15141018 24%,
    #15141088 69%,
    var(--earth) 100%
  );
}
.underground {
  position: relative;
  isolation: isolate;
  background: var(--earth);
}
.underground::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--earth), transparent 160px, transparent calc(100% - 180px), var(--earth)),
    linear-gradient(90deg, #15141008, #1514108c 30%, #1514108c 70%, #15141008),
    url('./soil-roots.png') center top / 100% 100% no-repeat;
}
.underground .section {
  background: transparent;
  border-bottom-color: #b9ad8c1a;
}
.underground #queues {
  padding-top: 62px;
}
.underground .queue-card {
  background: #1c2019de;
  border-color: #bbb89a28;
}
.underground .section-heading,
.underground .toolbar,
.underground .born-table,
.underground .lifecycle-grid {
  position: relative;
}
.underground .empty {
  background: #15141080;
}
.underground .eyebrow,
.underground .section-note,
.underground .lifecycle-grid p {
  color: #babcb0;
}
.underground .endmark {
  background: transparent;
  color: #f0efe6;
  padding-top: 95px;
  padding-bottom: 70px;
}
body:has(#homeView:not([hidden])) > footer {
  background: var(--earth);
  border-color: #b9ad8c1a;
}
@media (max-width: 760px) {
  .landing::after {
    height: 100px;
  }
  .underground::before {
    background:
      linear-gradient(
        var(--earth),
        transparent 110px,
        transparent calc(100% - 100px),
        var(--earth)
      ),
      linear-gradient(90deg, #15141030, #151410aa 28%, #151410aa 72%, #15141030),
      url('./soil-roots.png') center top / auto 100% no-repeat;
  }
  .underground #queues {
    padding-top: 42px;
  }
}