/* The supplied theme video's composition, translated to the Hush palette. */
#site { width: 100%; overflow: clip; padding: 0; }
#site .wrap { width: min(100% - 5rem, 1280px); margin: 0 auto; }
#site h2 { margin-bottom: 2rem; font: 400 clamp(23px, 3vw, 40px)/1.55 var(--display); letter-spacing: -0.045em; }
#site h2 em { color: var(--vibrant-orange); font-style: normal; }
#site h3 { font-size: 1rem; }
.eyebrow, .section-kicker, .window-kicker { color: var(--golden-amber); font: 10px/1.7 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; }
.section-kicker { margin-bottom: 1.8rem; }
.status-pixel { display: inline-block; flex: none; width: 5px; height: 5px; margin-right: 0.5rem; background: var(--golden-amber); }

.hero { position: relative; display: grid; grid-template-columns: 49% 51%; width: min(100% - 5rem, 1480px); min-height: min(790px, calc(100svh - 96px)); margin: 0 auto; padding: 4rem 0 2rem; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: start; min-width: 0; padding: 1.5rem 0 1rem; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; margin-bottom: 2rem; }
.pixel-title { margin: 0; font: 400 clamp(38px, 4.55vw, 72px)/1.35 var(--display); letter-spacing: -0.045em; }
.pixel-title > span { display: block; white-space: nowrap; }
.pixel-title > span:last-child { color: var(--vibrant-orange); }
.terminal-cursor { display: inline-block; color: var(--bright-yellow); animation: cursor-blink 1.4s steps(1) infinite; }
@keyframes cursor-blink { 0%, 58% { opacity: 0; } 59%, 100% { opacity: 1; } }
.hero-bottom { margin-top: auto; padding-top: 4rem; }
.hero-lede { margin: 0 0 1rem; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; }
.hero-description { margin: 0 0 2rem; max-width: 43ch; color: var(--muted); font-size: 12px; }
.hero-actions { align-items: center; gap: 1.6rem; margin-bottom: 1.5rem; }
.hero-warning { display: flex; align-items: center; gap: 0.5rem; margin: 0; max-width: 48ch; color: var(--muted); font-size: 9px; }
.hero-warning::before { flex: none; width: 5px; height: 5px; content: ""; background: var(--burnt-orange); }
.hero-warning[data-connected="true"]::before { background: var(--bright-yellow); }

.hero-art { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 500px; margin-left: -2.5rem; }
.art-coordinates { position: absolute; top: 0.5rem; right: 0; left: 3rem; z-index: 2; display: flex; justify-content: space-between; gap: 0.75rem; color: var(--burnt-orange); font-size: 9px; letter-spacing: 0.1em; }
.envelope-stage { position: relative; z-index: 1; display: grid; place-content: center; width: 100%; aspect-ratio: 1.4; }
.ascii-envelope { margin: 0; padding: 0; color: var(--vibrant-orange); font: clamp(5.5px, 0.685vw, 11.5px)/1.05 "Courier New", monospace; font-weight: 600; letter-spacing: 0; white-space: pre; user-select: none; }
.ascii-line { display: block; height: 1.05em; white-space: pre; }
.art-dim { color: var(--dark-brown); }
.art-low { color: var(--burnt-orange); }
.art-mid { color: var(--vibrant-orange); }
.art-bright { color: var(--golden-amber); }
.art-high { color: var(--bright-yellow); }
.art-white { color: var(--foreground); }
.signal-lines { position: absolute; z-index: 0; right: -9rem; pointer-events: none; background: repeating-linear-gradient(to bottom, var(--burnt-orange) 0 1px, transparent 1px 8px); }
.signal-lines-top { top: -3rem; width: 72%; height: 47%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 68% 94%, 45% 69%, 42% 46%, 0 10%); }
.signal-lines-bottom { right: -8rem; bottom: 3rem; width: 97%; height: 16%; clip-path: polygon(24% 0, 100% 0, 100% 100%, 12% 97%, 0 55%); }
.hero-art > figcaption { position: absolute; bottom: 1rem; right: 0; left: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--muted); font-size: 8px; letter-spacing: 0.08em; }
.motion-toggle { min-height: 36px; padding: 0.4rem 0; color: var(--muted); background: transparent; border: 0; font-size: 9px; font-weight: 400; }
.motion-toggle:hover:not(:disabled) { color: var(--golden-amber); background: transparent; box-shadow: none; }

.signal-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; width: min(100% - 5rem, 1480px); margin: 1rem auto 0; padding: 1.5rem 0; color: var(--muted); border-block: 1px solid var(--border); font-size: 9px; letter-spacing: 0.12em; }
.signal-strip i { margin-right: 0.7rem; color: var(--vibrant-orange); font-style: normal; }

.sheet { position: relative; padding: clamp(5rem, 9vw, 9rem) 0; scroll-margin-top: 2rem; }
.sheet-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 5rem; margin-bottom: 2rem; }
.sheet-head .section-kicker { grid-column: 1 / -1; }
.sheet-head h2 { margin-bottom: 0 !important; }
.sheet-head > p:last-child { max-width: 44ch; margin-bottom: 0.5rem; color: var(--muted); font-size: 12px; }
.view-switch { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 2rem 0 1.25rem; border: 1px solid var(--border); }
.view-switch button { min-height: 44px; padding: 0.75rem 1rem; color: var(--muted); background: transparent; border: 0; font-size: 11px; font-weight: 400; }
.view-switch button[aria-pressed="true"] { color: var(--background); background: var(--golden-amber); }
.view-switch button:hover:not([aria-pressed="true"]) { color: var(--foreground); background: var(--surface); box-shadow: none; }
.view-demo { border: 1px solid var(--border); }
.view-demo th, .view-demo td { padding: 1.5rem; }
.view-demo tbody th { color: var(--golden-amber); }
.view-demo td { width: 24%; }
.view-demo + .note { margin: 1rem 0 0; font-size: 9px; }
.swap { display: inline-grid; align-items: center; max-width: 100%; }
.swap > * { grid-area: 1 / 1; transition: clip-path 240ms, visibility 240ms; }
[data-view="chain"] .you-value { clip-path: inset(0 100% 0 0); visibility: hidden; }
[data-view="chain"] .redacted { clip-path: inset(0 0 0 0); visibility: visible; }
[data-view="you"] .you-value { clip-path: inset(0 0 0 0); visibility: visible; }
[data-view="you"] .redacted { clip-path: inset(0 0 0 100%); visibility: hidden; }

.courier-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; width: min(100% - 5rem, 1280px); margin: 0 auto; padding: 5rem 0; border-block: 1px solid var(--border); }
.courier-copy > p:not(.section-kicker) { max-width: 48ch; color: var(--muted); font-size: 12px; }
.courier-copy > .pool-readout { margin: 1.8rem 0 1rem; color: var(--golden-amber) !important; font-size: 10px !important; }
.courier-copy > .note { font-size: 10px !important; }
.courier-art { position: relative; min-width: 0; padding: 0; background: transparent; border: 0; }
.courier-art > figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 9px; letter-spacing: 0.06em; }
.owl-airspace { display: grid; place-items: center; width: 100%; height: 420px; }
.owl-flight { display: grid; place-items: center; width: 100%; transform-origin: 50% 40%; }
.owl-flight[data-playing="true"] { animation: courier-flight 9.6s ease-in-out infinite !important; }
.ascii-owl { grid-area: 1 / 1; display: block; min-height: 0; width: max-content; margin: 0; padding: 0; overflow: visible; color: var(--golden-amber); font: clamp(3px, 0.375vw, 6px)/1 "Courier New", monospace; font-weight: 600; white-space: pre; letter-spacing: 0; user-select: none; }
.owl-dim { color: var(--deep-orange); }
.owl-high { color: var(--foreground); }
@keyframes courier-flight {
  0%, 100% { transform: translate(-14px, 10px) rotate(-2deg); }
  25% { transform: translate(20px, -12px) rotate(2deg); }
  50% { transform: translate(14px, 9px) rotate(-1deg); }
  75% { transform: translate(-20px, -8px) rotate(1deg); }
}
.courier-art .text-link { min-height: 40px; font-size: 9px; white-space: nowrap; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 3rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--border); counter-increment: step; }
.steps li::before { display: block; margin-bottom: 2rem; color: var(--vibrant-orange); content: "0" counter(step); font: 14px/1.7 var(--display); }
.steps h3 { margin-bottom: 1rem; color: var(--foreground); font-size: 13px; }
.steps p { margin: 0; color: var(--muted); font-size: 11px; }
.sheet.ruled { padding-top: 0; }
.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.row { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 1rem; min-height: 230px; padding: 1.8rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-decoration: none; transition: background 200ms; }
.feature-glyph { margin-bottom: 0.8rem; color: var(--vibrant-orange); font-size: 22px; }
.row h3 { font: 400 12px/1.6 var(--display); letter-spacing: -0.05em; }
.row p { max-width: 33ch; margin: 0; color: var(--muted); font-size: 11px; }
.row-arrow { position: absolute; top: 2rem; right: 1.75rem; color: var(--burnt-orange); transition: color 200ms, transform 200ms; }
.row:hover { background: var(--surface); }
.row:hover .row-arrow { color: var(--golden-amber); transform: translate(2px, -2px); }
.row:hover h3 { color: var(--golden-amber); }

.inverse { width: min(100% - 5rem, 1280px); margin: 0 auto; padding-block: 0 6rem; border-bottom: 1px solid var(--border); }
.inverse .wrap { width: 100% !important; }
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.limits li { position: relative; padding-left: 1.5rem; }
.limits li::before { position: absolute; top: 0.35rem; left: 0; color: var(--vibrant-orange); content: "+"; }
.limits h3 { margin-bottom: 0.75rem; font-size: 13px; font-weight: 500; }
.limits p { margin: 0; color: var(--muted); font-size: 11px; }

.closing { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; width: min(100% - 5rem, 1280px); margin: 0 auto; padding: 7rem 0; }
.closing-stamp { width: min(100%, 440px); padding: 12px; border: 1px dashed var(--burnt-orange); }
.closing-stamp img { display: block; width: 100%; aspect-ratio: 796 / 514; object-fit: contain; }
.closing-stamp > span { display: block; margin-top: 0.7rem; color: var(--golden-amber); font-size: 9px; letter-spacing: 0.15em; text-align: center; }
.closing .window-kicker { margin-bottom: 1.75rem; }
.closing .button { margin-top: 0.5rem; }
.site-footer { border-top: 1px solid var(--border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0; }
.footer-brand { display: grid; gap: 0.4rem; margin: 0; color: var(--muted); font-size: 9px; }
.footer-wordmark { color: var(--foreground); font-size: 10px; letter-spacing: 0.1em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; color: var(--muted); font-size: 9px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover { color: var(--golden-amber); }

@media (min-width: 1650px) { .hero { min-height: 790px; } .ascii-envelope { font-size: 11.5px; } }
@media (max-width: 1050px) {
  .hero { min-height: 680px; }
  .hero-art { margin-left: -1rem; }
  .hero-actions { gap: 1rem; }
  .courier-section { gap: 2rem; }
  .courier-art > figcaption { font-size: 8px; letter-spacing: 0; }
  .owl-airspace { height: 330px; }
  .ascii-owl { font-size: 4px; }
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  #site .wrap, .courier-section, .closing, .inverse { width: calc(100% - 2.5rem); }
  .hero { width: calc(100% - 2.5rem); grid-template-columns: 1fr; min-height: 0; padding: 2rem 0 0; }
  .hero-copy { display: block; }
  .pixel-title { font-size: clamp(34px, 7.1vw, 56px); }
  .hero-bottom { padding-top: 2.5rem; }
  .hero-art { width: 100%; min-height: 360px; margin: 0; }
  .envelope-stage { width: 100%; aspect-ratio: 1.7; padding: 2rem 0; }
  .ascii-envelope { font-size: clamp(5px, 1.05vw, 8.4px); }
  .art-coordinates { top: 0.5rem; left: 0; }
  .hero-art > figcaption { left: 0; bottom: 0; }
  .signal-lines-top { top: -2rem; right: -3rem; width: 55%; height: 50%; }
  .signal-lines-bottom { bottom: 1rem; right: -4rem; width: 60%; height: 22%; }
  .signal-strip { width: calc(100% - 2.5rem); justify-content: flex-start; gap: 1rem 2rem; margin-top: 2.5rem; font-size: 8px; }
  .sheet-head { grid-template-columns: 1fr; gap: 0; }
  .sheet-head .section-kicker { grid-column: auto; }
  .sheet-head > p:last-child { margin-top: 1.5rem; }
  .courier-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .courier-art { width: min(100%, 580px); }
  .owl-airspace { height: 380px; }
  .ascii-owl { font-size: clamp(3px, 0.9vw, 5.4px); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  .limits { gap: 2.5rem; }
  .closing { gap: 2rem; }
  #site h2 { font-size: clamp(22px, 3.3vw, 30px); }
  .view-demo th, .view-demo td { padding: 1rem 0.75rem; }
}
@media (max-width: 520px) {
  .hero { padding-top: 1.5rem; }
  .eyebrow { font-size: 8px; margin-bottom: 1.75rem; }
  .pixel-title { font-size: 8.7vw; letter-spacing: -0.055em; }
  .terminal-cursor { display: none; }
  .hero-lede { font-size: 15px; }
  .hero-description { font-size: 11px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 0.5rem 1rem; }
  .hero-actions .button, .hero-actions .text-link { font-size: 11px; }
  .hero-art { min-height: 300px; }
  .ascii-envelope { font-size: clamp(4px, 1.18vw, 6.1px); }
  .signal-lines-top { height: 35%; }
  .signal-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; font-size: 7px; letter-spacing: 0.05em; }
  .sheet { padding-block: 4.5rem; }
  .view-demo { padding: 0 1rem; }
  .view-demo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .view-demo table, .view-demo tbody, .view-demo tr, .view-demo tbody th, .view-demo td { display: block; width: 100%; }
  .view-demo tr { padding: 1rem 0; border-bottom: 1px solid var(--border); }
  .view-demo tr:last-child { border: 0; }
  .view-demo tbody th { margin-bottom: 0.75rem; }
  .view-demo tbody th, .view-demo td { padding: 0.2rem 0; border: 0; }
  .view-demo td { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; font-size: 11px; }
  .view-demo td::before { color: var(--muted); content: attr(data-label); font-size: 10px; }
  .view-switch { display: flex; }
  .view-switch button { flex: 1; padding-inline: 0.6rem; font-size: 10px; }
  .courier-section { padding-block: 4rem; }
  .ascii-owl { font-size: clamp(2.4px, 0.82vw, 4.2px); }
  .owl-airspace { height: 265px; }
  .steps { gap: 2rem 1.25rem; }
  .steps li::before { margin-bottom: 1.2rem; }
  .steps h3 { font-size: 12px; }
  .steps p { font-size: 10px; }
  .rows { grid-template-columns: 1fr; margin-top: 2rem; }
  .row { min-height: 190px; padding: 1.5rem; }
  .feature-glyph { margin-bottom: 0.2rem; }
  .limits { grid-template-columns: 1fr; gap: 2rem; }
  .inverse { padding-bottom: 4rem; }
  .closing { grid-template-columns: 1fr; padding-block: 4rem; gap: 2.5rem; }
  .closing-stamp { width: 230px; }
  .site-footer .wrap { gap: 1rem; }
  .footer-links { gap: 0.25rem 1.5rem; }
}

/* Program address controls retained alongside the original visual design. */
.network-panel { display: grid; gap: 0.65rem; max-width: 100%; font: 14px/1.5 var(--mono); }
.network-panel::before { display: none; }
.network-label { display: inline-flex; align-items: center; color: var(--foreground); font-size: 14px; }
.program-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.program-label { color: var(--muted); font-size: 12px; }
.program-copy { min-height: 40px; gap: 0.75rem; padding: 0.4rem 0.65rem; color: var(--golden-amber); background: var(--surface); border-color: var(--border); }
.program-copy code { font-size: 14px; }
.solscan-link { min-height: 40px; padding: 0.4rem 0.6rem; font: 12px/1.5 var(--mono); }
@media (max-width: 520px) { .program-copy code, .network-label { font-size: 13px; } }