:root {
  --bg: #ffffff;
  --ink: #0b0b0c;
  --mute: #6b6b70;
  --faint: #a6a6ab;
  --line: #e4e4e7;
  --red: #d42a2a;
  --cyan: #12a8c4;
  --g1: #19d3c5;
  --g2: #2f7dff;
  --g3: #6a3df5;
  --g4: #d23ef0;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gut: 24px;
  --max: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--mono);
  font-feature-settings: "calt" 0, "liga" 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 12px; }
.skip:focus { top: 8px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 var(--gut); border-bottom: 1px solid var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .02em; justify-self: start; }
.brand img { display: block; filter: grayscale(1) contrast(4) brightness(.35); }
.brand:hover img { filter: none; }
.links { display: flex; align-items: center; gap: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .18em; }
.links a { text-decoration: none; padding: 4px 0; }
.links a:hover, .links a.on { color: var(--red); }
.sep { color: var(--faint); }
.lang { justify-self: end; font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--ink); padding: 5px 9px; cursor: pointer; color: var(--faint); }
.lang [data-lang].on { color: var(--ink); }
.lang:hover { background: var(--ink); }
.lang:hover [data-lang].on { color: #fff; }

.sub { display: flex; gap: 22px; padding: 0 var(--gut); height: 34px; align-items: center; border-bottom: 1px solid var(--line); font-size: 11.5px; letter-spacing: .06em; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.sub::-webkit-scrollbar { display: none; }
.sub a { text-decoration: none; color: var(--mute); }
.sub a b { font-weight: 500; color: var(--faint); margin-right: 6px; }
.sub a:hover, .sub a.on { color: var(--ink); }
.sub a.on b { color: var(--red); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: calc(100vh - 86px); padding-top: 48px; padding-bottom: 48px; }
.kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .2em; color: var(--mute); margin: 0 0 22px; }
.kicker::before { content: "■ "; color: var(--red); }
h1 { font-weight: 400; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 26px; }
.hl { background: var(--ink); color: #fff; padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.decode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 26px; font-size: clamp(14px, 1.5vw, 18px); font-weight: 500; letter-spacing: .02em; cursor: default; min-height: 1.6em; }
.decode .w { white-space: pre; }
.decode .w::first-letter { background: var(--ink); color: #fff; padding: 0 3px; margin-right: 1px; }
.decode .w:nth-child(1)::first-letter { background: var(--g1); color: var(--ink); }
.decode .w:nth-child(3)::first-letter { background: var(--g2); }
.decode .w:nth-child(5)::first-letter { background: var(--g3); }
.decode .w:nth-child(7)::first-letter { background: #a43df2; }
.decode .w:nth-child(9)::first-letter { background: var(--g4); }
.decode .dot { color: var(--faint); }

.lead { color: #2a2a2e; max-width: 34em; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn { --step: 4px; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; text-decoration: none; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; padding: 12px 18px; clip-path: polygon(0 var(--step), var(--step) var(--step), var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step))); transition: background .15s; }
.btn::after { content: "→"; transition: transform .15s; }
.btn:hover { background: var(--red); }
.btn:hover::after { transform: translateX(3px); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn:focus-visible { outline: none; background: var(--red); color: #fff; }

.hero-art { position: relative; margin: 0; }
#logo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; touch-action: pan-y; }
.art-cap { margin: 8px 0 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-align: right; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding-top: 0; padding-bottom: 0; background: #fff; max-width: calc(var(--max) - 2 * var(--gut)); }
.stat { padding: 26px 18px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .n { font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; }
.stat .n::before { content: ">"; color: var(--faint); font-size: .5em; vertical-align: .6em; margin-right: 4px; }
.stat .c { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--mute); line-height: 1.5; }

.step, .block { padding-top: 96px; }
.contact { padding-top: 120px; padding-bottom: 120px; }
.sh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 28px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 13px; letter-spacing: .08em; }
.sh .num { font-weight: 700; color: var(--red); }
.sh .tag { color: var(--ink); background: #fff; }
h2 { font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 18px; max-width: 22em; }
.step p, .block p, .contact p { color: #2a2a2e; max-width: 36em; margin: 0 0 14px; background: rgba(255, 255, 255, .82); }
code { font-family: var(--mono); font-size: .92em; background: #f1f1f3; padding: 1px 5px; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.card { background: #fff; border: 1px solid var(--line); margin: 0; }
.art, .code { position: relative; overflow: hidden; }
.art pre, .code pre { margin: 0; padding: 22px 22px 18px; font: 400 13px/1.65 var(--mono); overflow-x: auto; color: #333; }
.art pre b, .code pre b { font-weight: 500; color: var(--ink); background: linear-gradient(90deg, rgba(25, 211, 197, .18), rgba(210, 62, 240, .18)); }
.art pre i, .code pre i { font-style: normal; color: var(--red); }
.code pre s { text-decoration: none; color: #1f6fb5; }
.code pre code { background: none; padding: 0; font-size: inherit; }
.art figcaption { border-top: 1px solid var(--line); padding: 7px 22px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.code figcaption { border-bottom: 1px solid var(--line); padding: 7px 22px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: flex; gap: 8px; }
.code figcaption::before { content: "● ● ●"; color: var(--line); letter-spacing: 0; }
.codes { margin-top: 8px; }
.note { font-size: 12.5px; color: var(--mute) !important; margin-top: 18px !important; }

.flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: f; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 12px; padding-right: 28px; counter-increment: f; }
.flow li::after { content: "──▶"; position: absolute; right: 2px; top: 11px; color: var(--faint); font-size: 13px; letter-spacing: -.1em; }
.flow li:last-child::after { content: none; }
.flow .box { display: block; border: 1px solid var(--ink); background: #fff; padding: 10px 12px; font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap; }
.flow .box::before { content: "0" counter(f) " "; color: var(--faint); font-weight: 400; }
.flow .hlbox { background: var(--ink); color: #fff; }
.flow .cap { font-size: 11.5px; line-height: 1.5; color: var(--mute); background: rgba(255, 255, 255, .82); }

.cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards .card { padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.55; color: #2a2a2e; transition: border-color .2s; }
.cards .card:hover { border-color: var(--ink); }
.cards b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }

.manifesto { list-style: none; margin: 0; padding: 0; }
.manifesto li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 20px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .82); }
.manifesto .mn { font-size: 13px; color: var(--red); font-weight: 700; padding-top: 6px; }
.manifesto b { display: block; font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 8px; }
.manifesto li:hover b { background: var(--ink); color: #fff; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.manifesto li:hover b + p { margin-top: 8px; }
.manifesto p { margin: 0 !important; color: var(--mute) !important; background: none !important; }

.contact h2 { font-size: clamp(28px, 4.2vw, 52px); max-width: 16em; }
.contact .cta-row { margin-top: 28px; }
.contact-grid { align-items: start; gap: 48px; }
.contact-grid h2 { font-size: clamp(28px, 3.6vw, 46px); }

.packet { position: relative; background: #fff; border: 1px solid var(--ink); font-size: 14px; box-shadow: 6px 6px 0 rgba(11, 11, 12, .08); }
.packet [hidden] { display: none !important; }
.packet p { max-width: none; background: none; margin: 0; }
.pk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 10px 18px; font-size: 12.5px; letter-spacing: .06em; }
.pk-head b { background: var(--red); padding: 1px 6px; margin-right: 6px; font-weight: 700; }
.pk-proto { color: #8a8a90; }
.pk-dots { color: #4a4a50; letter-spacing: 0; font-size: 10px; }
.pk-meta { padding: 8px 18px; border-bottom: 1px dashed var(--line); font-size: 11.5px; color: var(--faint); }
.pk-body { padding: 4px 18px 0; }

.row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 10px 0 8px 10px; border: 0; border-bottom: 1px dashed var(--line); min-width: 0; transition: box-shadow .15s, background .15s; }
fieldset.row { display: block; }
fieldset.row legend { float: left; width: 96px; padding: 0; }
fieldset.row .val { margin-left: 106px; }
.row .k { display: block; padding-top: 7px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.row .k::before { content: " "; display: inline-block; width: 1.3ch; }
.row:focus-within { box-shadow: inset 2px 0 0 var(--ink); background: linear-gradient(90deg, rgba(25, 211, 197, .06), rgba(210, 62, 240, .05)); }
.row:focus-within .k { color: var(--ink); }
.row:focus-within .k::before { content: "›"; color: var(--red); animation: blink 1s steps(1) infinite; }
.row.bad { box-shadow: inset 2px 0 0 var(--red); }
.row.bad .k { color: var(--red); }
.packet input, .packet textarea { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 15px/1.5 var(--mono); padding: 6px 0; caret-color: var(--red); outline: none; -webkit-appearance: none; appearance: none; }
.packet input::placeholder, .packet textarea::placeholder { color: #b5b5bb; opacity: 1; }
.packet textarea { resize: vertical; min-height: 116px; }
.packet .err { font-size: 11.5px; line-height: 1.4; color: var(--red); padding: 2px 0 2px; }
.packet .err:empty { display: none; }
.packet .err::before { content: "! "; font-weight: 700; }
.msg-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.count { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.count.warn { color: var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 6px 6px; padding: 3px 0 2px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 4px 8px; border: 1px solid var(--line); font-size: 12.5px; color: var(--mute); transition: background .12s, color .12s, border-color .12s; }
.chip:hover span { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.strip { padding: 14px 18px 2px; font-size: 13px; white-space: pre; overflow-x: auto; scrollbar-width: none; }
.strip .nd { color: var(--faint); }
.strip .nd.on { color: var(--ink); font-weight: 700; }
.strip .nd.cur { background: var(--ink); color: #fff; font-weight: 700; }
.strip .nd.x { background: var(--red); color: #fff; font-weight: 700; }
.strip .trk { color: var(--ink); }
.strip .pk { color: var(--g3); }
.strip .pk { animation: blink .5s steps(1) infinite; }
.strip.fail .pk { color: var(--red); animation: none; }
.strip .cap { display: block; margin-top: 6px; font-size: 11.5px; color: var(--mute); white-space: normal; }

.pk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px 18px; }
.btn.send { border: 0; cursor: pointer; font-family: var(--mono); }
.packet.busy .btn.send { background: var(--mute); cursor: progress; }
.packet.busy .btn.send::after { content: "···"; animation: blink 1s steps(1) infinite; }
.hint { font-size: 11px; color: var(--faint); }
kbd { font: inherit; border: 1px solid var(--line); border-bottom-width: 2px; padding: 0 4px; color: var(--mute); }

.status { padding: 0 18px; font-size: 12.5px; line-height: 1.5; }
.status:empty { display: none; }
.status:not(:empty) { padding-bottom: 16px; }
.packet.sent .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.status .st-err { color: var(--red); }
.status a { color: var(--ink); white-space: nowrap; }
.status a:hover { color: var(--red); }

.done { padding: 30px 18px 24px; }
.done:focus { outline: none; }
.packet .done-code { font-size: 12px; color: var(--mute); }
.done-code b { background: var(--g3); color: #fff; padding: 0 5px; }
.packet .done-h { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.035em; margin: 14px 0 14px !important; min-height: 1.1em; }
.packet .done-p { font-size: 13px; color: #2a2a2e; margin-bottom: 22px !important; overflow-wrap: anywhere; }

@keyframes blink { 50% { opacity: 0; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--mute); background: #fff; max-width: calc(var(--max) - 2 * var(--gut)); }
.foot { padding-left: 0; padding-right: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1080px) {
  .links { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; gap: 8px; }
  .hero-art { order: -1; max-width: 360px; width: 100%; margin: 0 auto; }
  .grid2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0 var(--gut); width: auto; padding: 0; }
  .stat, .stat:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 16px; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 16px; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:last-child { grid-column: 1 / -1; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow li { padding: 0 0 34px; flex-direction: row; align-items: center; gap: 14px; }
  .flow li::after { content: "│\A▼"; white-space: pre; right: auto; left: 20px; top: auto; bottom: 0; line-height: 1; font-size: 11px; letter-spacing: 0; }
  .flow .box { min-width: 150px; text-align: left; }
  .step, .block { padding-top: 72px; }
  .foot { margin: 0 var(--gut); width: auto; }
}

@media (max-width: 520px) {
  :root { --gut: 16px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 8px; }
  .row { padding-left: 16px; }
  .row .k { padding-top: 2px; font-size: 12px; }
  .row .k::before { margin-left: -1.3ch; }
  fieldset.row legend { float: none; width: auto; }
  fieldset.row .val { margin-left: 0; }
  .pk-head, .pk-meta, .pk-body, .pk-foot, .strip, .status, .done { padding-left: 12px; padding-right: 12px; }
  .strip { font-size: 11.5px; }
  .hint { display: none; }
  .btn.send { width: 100%; justify-content: center; }
  .packet { box-shadow: 4px 4px 0 rgba(11, 11, 12, .08); }
  body { font-size: 14px; }
  html { scroll-padding-top: 96px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .flow li { flex-direction: column; align-items: stretch; gap: 8px; }
  .flow li::after { left: 12px; }
  .flow .box { min-width: 0; }
  .manifesto li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .art pre, .code pre { font-size: 11.5px; padding: 16px 14px 14px; }
  .art figcaption, .code figcaption { padding: 7px 14px; }
  .btn { padding: 12px 14px; letter-spacing: .12em; }
  .sub { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .row:focus-within .k::before, .packet.busy .btn.send::after, .strip .pk { animation: none; }
  .row, .chip span { transition: none; }
  .btn, .btn::after { transition: none; }
}
.step .sh, .block .sh, .contact .sh { max-width: none; background: none; margin: 0 0 28px; color: var(--ink); }
pre, code { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
.btn.ghost { clip-path: none; box-shadow: none; border: 1px solid var(--ink); padding: 11px 17px; }