@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --bg: #080b10;
  --panel: #11151c;
  --text: #f2f4f8;
  --muted: #a0a9b9;
  --line: #303744;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/1.6 Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #b6c9ff; outline-offset: 6px; }
::selection { background: #acbaff; color: #080b10; }
.wrap { width: min(1480px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 20; padding: 10px 18px; background: var(--text); color: var(--bg); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 102px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 25px; font-weight: 800; letter-spacing: -.065em; line-height: 1; }
.brand small { display: block; font: 9px/1.3 var(--mono); letter-spacing: .21em; margin-top: 8px; color: var(--muted); }
.brand-mark { width: 29px; height: 31px; display: flex; align-items: center; gap: 3px; transform: skew(-14deg); }
.brand-mark i { display: block; width: 7px; height: 28px; background: currentColor; }
.brand-mark i:nth-child(2) { height: 17px; }
.header-label, .header-link, .eyebrow, .edition { font: 10px/1.6 var(--mono); letter-spacing: .08em; }
.header-label { color: #bdc6d5; }
.header-label b { font-weight: 400; color: #677388; margin-inline: 15px; }
.header-link { border: 1px solid #616c7d; padding: 12px 16px; text-transform: uppercase; }
.header-link span { margin-left: 25px; }
.header-link:hover { background: var(--text); color: var(--bg); }
.intro { padding-block: 39px 74px; }
.intro-top { display: flex; justify-content: space-between; gap: 30px; color: var(--muted); }
.eyebrow { margin: 0; }
.square { display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: #acbaff; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 50px; align-items: end; margin-top: 57px; }
h1 { margin: 0; font-size: clamp(64px, 7.8vw, 118px); font-weight: 750; letter-spacing: -.075em; line-height: 1.01; }
h1 span { color: #8392ad; }
.intro-note p { margin: 15px 0 0; font-size: 15px; line-height: 1.75; }
.intro-note .muted { color: var(--muted); font-size: 13px; }
.index-cross { font: 33px/1 var(--mono); color: #acbaff; }
.directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; scroll-margin-top: 35px; }
.direction { min-width: 0; display: flex; flex-direction: column; }
.preview { position: relative; height: 390px; padding: 23px; overflow: hidden; isolation: isolate; border: 1px solid #333b4a; transition: border-color .2s, transform .2s; }
.direction:hover .preview { border-color: #b6c9ff; transform: translateY(-4px); }
.preview-label, .preview-bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-label > span { font-size: 17px; font-weight: 800; letter-spacing: -.06em; }
.preview-label small { font: 8px/1.4 var(--mono); letter-spacing: .05em; }
.preview p { position: relative; z-index: 2; margin: 33px 0 0; font-size: clamp(26px, 2.55vw, 39px); font-weight: 750; line-height: 1.12; letter-spacing: -.06em; }
.preview-bottom { position: absolute; inset: auto 23px 20px; font: 8px/1.4 var(--mono); letter-spacing: .05em; }
.preview-bottom > span:last-child { font: 18px/1 Manrope, sans-serif; }
.preview-network { background: radial-gradient(ellipse at 70% 73%, #4e22753d, transparent 60%), #0a0a14; }
.preview-network p span, .preview-network .preview-label small { color: #b9a1ff; }
.mini-mesh { position: absolute; width: 300px; height: 178px; left: 50%; bottom: 43px; transform: translateX(-50%); }
.mini-mesh i { position: absolute; width: 260px; height: 100px; top: 40px; left: 20px; border: 1px solid #a68bd873; border-radius: 50%; transform: rotate(-20deg); }
.mini-mesh i:nth-child(2) { transform: rotate(20deg); }
.mini-mesh i:nth-child(3) { transform: rotate(60deg); }
.mini-mesh i:nth-child(4) { transform: rotate(-60deg); }
.mini-mesh i:nth-child(5) { width: 180px; height: 140px; top: 20px; left: 60px; transform: rotate(0); }
.mini-mesh i:nth-child(6) { width: 230px; height: 130px; top: 25px; left: 35px; transform: rotate(0); }
.mini-mesh b { position: absolute; top: 60px; left: 120px; display: grid; place-items: center; width: 60px; height: 60px; color: #10101d; background: #bfa7ff; font-size: 32px; font-weight: 800; box-shadow: 0 0 45px #b08aff52; }
.mini-mesh span { position: absolute; width: 6px; height: 6px; background: #8ae7ff; box-shadow: 0 0 12px #8ae7ff; top: 40px; left: 45px; }
.mini-mesh span:nth-last-child(2) { top: 143px; left: 240px; }
.mini-mesh span:nth-last-child(3) { top: 134px; left: 50px; }
.mini-mesh span:nth-last-child(4) { top: 22px; left: 195px; }
.preview-terminal { background: #0a100d; }
.preview-terminal p span, .cursor, .preview-terminal .preview-label small { color: #a9fb73; }
.mini-terminal { margin-top: 27px; border: 1px solid #577544; font: 8px/1.6 var(--mono); background: #122011; }
.mini-terminal > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 11px; border-bottom: 1px solid #2c4328; }
.mini-terminal > div:first-child { color: #b6fa85; }
.mini-terminal b { font-weight: 400; color: #d3dfcf; }
.mini-terminal .meter { gap: 4px; align-items: end; height: 30px; border: 0; }
.meter i { flex: 1; height: 7px; background: #85c75e; }
.meter i:nth-child(3n) { height: 12px; }
.meter i:nth-child(4n) { background: #365829; }
.preview-protocol { background: #254cff; border-color: #496cff; }
.preview-protocol .preview-label small { color: #e0e7ff; }
.preview-protocol p { max-width: 240px; margin-top: 32px; font-size: clamp(28px, 2.6vw, 40px); }
.mini-stack { position: absolute; right: 6px; bottom: 45px; width: 165px; height: 150px; }
.mini-stack i { position: absolute; width: 117px; height: 73px; left: 20px; top: 58px; border: 1px solid white; background: #1430ae; transform: rotate(-30deg) skewX(25deg); }
.mini-stack i:nth-child(2) { top: 31px; background: #1c3ed5; }
.mini-stack i:nth-child(3) { top: 4px; background: #f1f4ff; }
.mini-stack b { position: absolute; z-index: 2; top: 11px; left: 54px; color: #254cff; font-size: 39px; font-weight: 800; transform: rotate(-30deg) skewX(25deg); }
.direction-title { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.direction-title h2 { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -.06em; }
.direction-title h2 span { font: 10px var(--mono); color: var(--muted); vertical-align: middle; margin-right: 8px; }
.direction-title > span { font-size: 24px; }
.direction > p { margin: 10px 0 0; font-size: 14px; font-weight: 650; }
.direction > p.description { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.85; margin: 10px 0 24px; }
.direction-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; padding-top: 17px; border-top: 1px solid var(--line); font: 8px/1.5 var(--mono); }
.direction-foot > span:first-child { color: var(--muted); }
.principle { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 35px; margin-top: 85px; padding-block: 42px; border-block: 1px solid var(--line); }
.principle .eyebrow { color: var(--muted); }
.principle > p { margin: 0; font-size: clamp(29px, 3.4vw, 50px); font-weight: 750; line-height: 1.07; letter-spacing: -.06em; }
.principle > p span { color: #8594ad; }
.principle > div { font-size: 12px; line-height: 1.85; color: #b9c2d2; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; min-height: 100px; padding-block: 28px; font: 9px/1.6 var(--mono); }
.footer > span:nth-child(2) { color: var(--muted); }
.footer a { border-bottom: 1px solid #4c586c; padding-bottom: 5px; }
.footer a span { margin-left: 15px; color: #b9c2d2; }
.soon-page { min-height: 100svh; display: flex; flex-direction: column; }
.soon-main { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10%; align-items: center; padding-block: 100px; }
.soon-main .eyebrow { color: #b9a1ff; margin-bottom: 25px; }
.soon-main h1 { font-size: clamp(65px, 7.2vw, 105px); }
.soon-main h1 span { color: #b9a1ff; }
.soon-main .lead { margin: 33px 0; max-width: 500px; color: #bcc4d2; font-size: 16px; line-height: 1.85; }
.app-disabled { border: 1px solid #454250; background: #242032; color: #c7bfd9; font: 600 14px Manrope, sans-serif; padding: 17px 24px; cursor: not-allowed; }
.soon-links { display: flex; flex-wrap: wrap; gap: 27px; margin-top: 27px; font-size: 13px; }
.soon-links a { padding-bottom: 5px; border-bottom: 1px solid #727d90; }
.soon-art { position: relative; aspect-ratio: 1; border: 1px solid #42475d; background: repeating-linear-gradient(90deg, transparent 0 49px, #3b426129 49px 50px), repeating-linear-gradient(0deg, transparent 0 49px, #3b426129 49px 50px), radial-gradient(ellipse, #4e278053, transparent 65%); overflow: hidden; }
.soon-art .mini-mesh { top: 50%; left: 50%; bottom: auto; transform: translate(-50%,-50%) scale(1.2); }
.art-label { position: absolute; inset: auto 22px 20px; color: #bbc4d8; font: 9px/1.5 var(--mono); letter-spacing: .05em; }
@media (min-width: 1550px) { .preview p { font-size: 39px; } }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 56px); }
  .intro-grid { grid-template-columns: 1fr 230px; gap: 28px; }
  h1 { font-size: clamp(58px, 8.5vw, 86px); }
  .directions { gap: 16px; }
  .preview { padding: 18px; height: 350px; }
  .preview p { font-size: 27px; }
  .mini-mesh { transform: translateX(-50%) scale(.8); }
  .preview-label small { font-size: 7px; }
  .mini-stack { transform: scale(.8); transform-origin: bottom right; }
  .preview-bottom { inset-inline: 18px; }
  .direction-foot { flex-direction: column; gap: 7px; }
  .principle { grid-template-columns: .8fr 1.2fr; }
  .principle > div { display: none; }
}
@media (max-width: 760px) {
  .header { min-height: 90px; gap: 18px; }
  .header-label { display: none; }
  .header-link { font-size: 8px; padding: 10px 12px; }
  .header-link span { margin-left: 12px; }
  .intro { padding-block: 30px 45px; }
  .intro-top { flex-direction: column; gap: 6px; }
  .edition { font-size: 8px; }
  .intro-grid { grid-template-columns: 1fr; margin-top: 35px; gap: 28px; }
  h1 { font-size: clamp(43px, 9.7vw, 73px); }
  .intro-note { display: grid; grid-template-columns: 20px 1fr; column-gap: 18px; }
  .intro-note p { margin: 0; font-size: 14px; }
  .intro-note .muted { grid-column: 2; margin-top: 8px; font-size: 12px; }
  .index-cross { font-size: 23px; }
  .directions { grid-template-columns: 1fr; gap: 45px; }
  .preview { height: 390px; padding: 23px; }
  .preview p, .preview-protocol p { font-size: 36px; }
  .preview-label small { font-size: 8px; }
  .mini-mesh { transform: translateX(-50%); }
  .mini-stack { transform: none; }
  .mini-terminal { margin-top: 27px; }
  .preview-bottom { inset-inline: 23px; }
  .direction-foot { flex-direction: row; font-size: 8px; }
  .principle { grid-template-columns: 1fr; gap: 25px; margin-top: 50px; }
  .principle .eyebrow br { display: none; }
  .principle > p { font-size: 42px; }
  .footer { font-size: 8px; gap: 15px; }
  .footer > span:nth-child(2) { display: none; }
  .soon-main { grid-template-columns: 1fr; gap: 50px; padding-block: 60px; }
  .soon-main h1 { font-size: clamp(58px, 14vw, 90px); }
  .soon-art { max-width: 430px; width: 100%; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 36px); }
  .brand { font-size: 21px; gap: 9px; }
  .brand small { font-size: 8px; }
  .header-link { font-size: 7px; padding-inline: 8px; }
  .header-link span { margin-left: 6px; }
  .preview p, .preview-protocol p { font-size: 29px; }
  .preview { height: 360px; }
  .mini-stack { transform: scale(.85); transform-origin: right bottom; }
  .direction-foot { font-size: 7px; }
  .soon-art .mini-mesh { transform: translate(-50%,-50%) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}