@font-face {
  font-family: "Instrument Sans";
  src: url("./assets/InstrumentSans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Instrument Sans", Arial, sans-serif;
  color: #111b31;
  background: #f2f4f8;
  --ink: #111b31;
  --muted: #4c5a70;
  --line: #cbd4e1;
  --accent: #254bb9;
  --accent-deep: #193a9c;
  --paper: #fbfcfe;
}

* { box-sizing: border-box; }
html { min-width: 300px; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
p { line-height: 1.58; }
a { text-decoration: none; color: inherit; }
button, input, textarea { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { opacity: .58; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.frame { width: min(1160px, calc(100% - 5rem)); margin-inline: auto; }
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { min-height: 75px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.38rem; font-weight: 780; letter-spacing: -.035em; }
.brand img { display: block; width: 30px; height: 30px; object-fit: contain; }
nav { display: flex; align-items: center; gap: clamp(.8rem, 3vw, 1.85rem); font-size: .94rem; font-weight: 670; }
nav > a { padding-block: .6rem; white-space: nowrap; }
nav > a:hover, nav > a[aria-current] { color: var(--accent); }
nav .nav-app { padding: .6rem .82rem; background: #e9eef9; border-radius: 5px; color: var(--accent-deep); }
nav .nav-app:hover, nav .nav-app[aria-current] { background: #dce6fa; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 90px; color: var(--muted); border-top: 1px solid var(--line); }
.foot .brand { color: var(--ink); font-size: 1.12rem; }
.intro { display: flex; align-items: end; justify-content: space-between; padding-block: clamp(3.5rem, 8vw, 7.4rem) clamp(1.7rem, 4vw, 3rem); gap: 1rem 3.2rem; }
.intro h1 { font-size: clamp(3.4rem, 7.3vw, 5.55rem); font-weight: 715; line-height: 1; letter-spacing: -.036em; }
.intro-action { max-width: 20rem; display: grid; gap: 1.25rem; padding-bottom: .2rem; justify-items: start; }
.intro-action p, .page-title p { color: var(--muted); font-size: 1.05rem; }
.action { display: inline-flex; min-height: 47px; gap: .85rem; align-items: center; justify-content: center; padding: .6rem 1.06rem; background: var(--accent); color: #fff; border: 1px solid transparent; border-radius: 5px; font-weight: 720; transition: background-color .18s ease; }
.action:hover:not(:disabled) { background: var(--accent-deep); }
.action:active:not(:disabled) { background: #152f80; }
.workflow { display: grid; grid-template-columns: 1fr .72fr .77fr; align-items: center; min-height: 285px; background: #14233f; border-radius: 8px; padding: clamp(1.2rem, 4vw, 2.8rem); color: #f5f8ff; }
.example-input { min-width: 0; }
.caption { color: #c3d5f4; font-weight: 680; font-size: .93rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; text-align: left; }
th, td { padding: .75rem .35rem; }
th { font-weight: 700; }
th:last-child, td:last-child { text-align: right; }
.example-table { margin-top: .5rem; font-size: .92rem; }
.example-table th { color: #aebdd7; font-size: .84rem; }
.example-table tbody tr { border-top: 1px solid #394867; }
.example-table td:first-child { font-family: Consolas, monospace; color: #e3eaff; }
.transfer-path { position: relative; height: 128px; margin-inline: 12%; }
.transfer-path i, .transfer-path b { position: absolute; display: block; }
.transfer-path i { height: 31%; left: 0; width: 56%; border-right: 2px solid #768fc4; }
.transfer-path i:nth-child(1) { top: 19%; border-top: 2px solid #768fc4; border-top-right-radius: 15px; }
.transfer-path i:nth-child(2) { top: 50%; height: 0; border-top: 2px solid #768fc4; }
.transfer-path i:nth-child(3) { bottom: 19%; border-bottom: 2px solid #768fc4; border-bottom-right-radius: 15px; }
.transfer-path b { top: 50%; left: 55%; width: 45%; border-top: 2px solid #adc5fb; }
.transfer-path b::after { content: ""; position: absolute; right: 0; top: -5px; width: 7px; height: 7px; border-top: 2px solid #adc5fb; border-right: 2px solid #adc5fb; transform: rotate(45deg); }
.example-output { display: grid; gap: .45rem; justify-items: start; padding: 1.2rem; background: #edf2fb; color: var(--ink); border-radius: 6px; }
.example-output img { width: 38px; height: 38px; }
.example-output span { color: #495c7b; font-size: .89rem; }
.example-output strong { font-size: clamp(1.6rem, 3.7vw, 2.85rem); letter-spacing: -.036em; line-height: 1.1; }
.example-output small { font-size: .53em; letter-spacing: 0; }
.explanation { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; padding-block: clamp(3.4rem, 8vw, 6.7rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.75rem); letter-spacing: -.028em; line-height: 1.08; }
.explanation ol, .guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.7rem; }
.explanation li, .guide-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .65rem; align-items: start; }
.explanation li > span, .guide-steps li > span { color: var(--accent-deep); font-weight: 740; font-variant-numeric: tabular-nums; }
.explanation h3 { font-size: 1.14rem; line-height: 1.2; margin-bottom: .35rem; }
.explanation p, .guide-steps p { color: var(--muted); }
.desk, .guide { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.page-title { margin-bottom: clamp(1.9rem, 4vw, 3.2rem); }
.page-title h1 { font-size: clamp(2.7rem, 5.7vw, 5.4rem); font-weight: 715; letter-spacing: -.036em; line-height: 1.01; }
.page-title p { margin-top: .75rem; }
.workspace { display: grid; grid-template-columns: 1.05fr 1fr; align-items: start; gap: 1.15rem; }
.setup, .review-board { min-width: 0; background: var(--paper); border-radius: 7px; padding: clamp(1rem, 3.5vw, 2rem); }
.setup h2, .review-board h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.setup form { display: grid; gap: 1.13rem; margin-top: 1.35rem; }
.setup form .action { justify-self: start; }
.network { padding: 0; margin: 0; border: 0; min-width: 0; }
.network legend, .control label { font-weight: 700; }
.network legend { margin-bottom: .55rem; }
.network label { position: relative; display: inline-flex; margin-right: .2rem; }
.network input { opacity: 0; position: absolute; inset: 0; margin: 0; }
.network span { display: block; padding: .46rem .72rem; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); cursor: pointer; font-weight: 660; font-size: .9rem; }
.network input:checked + span { color: var(--accent-deep); border-color: #7a97d9; background: #e8effe; }
.network input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.control { display: grid; gap: .55rem; min-width: 0; }
.control input:not([type="file"]), .control textarea { width: 100%; min-width: 0; color: var(--ink); background: #f7f9fd; border: 1px solid #aab8ce; border-radius: 5px; padding: .75rem .8rem; }
textarea { resize: vertical; font: .9rem/1.5 Consolas, monospace; }
.file-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
#file { font-size: .82rem; width: min(100%, 250px); min-width: 0; color: var(--muted); }
#file::file-selector-button { padding: .37rem .55rem; border: 0; border-radius: 4px; background: #e8effc; color: var(--accent-deep); font: inherit; font-weight: 690; margin-right: .5rem; cursor: pointer; }
#file::file-selector-button:hover { background: #dce7fa; }
.status { margin-top: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.status[data-state="error"] { color: #9c2438; }
#summary { margin-block: 1.05rem .6rem; overflow-wrap: anywhere; color: var(--muted); }
#summary p:first-child { color: var(--ink); font-weight: 700; }
.table-wrap { margin-bottom: 1rem; overflow: auto; }
.review-board th, .review-board td { border-bottom: 1px solid #d9e1ef; }
.review-board td:first-child { overflow-wrap: anywhere; font: .83rem Consolas, monospace; }
.review-board td:last-child { white-space: nowrap; }
.guide-steps { max-width: 760px; gap: 2.1rem; }
.guide-steps h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.guide-steps p + p { margin-top: .65rem; }
.guide-steps code { color: var(--ink); background: #e5ebf7; padding: .1em .23em; }
.docs-link { color: var(--accent-deep); font-weight: 730; }
.docs-link:hover { color: #14275e; }

@media (max-width: 800px) {
  .intro { flex-direction: column; align-items: start; gap: 1.3rem; }
  .workspace { grid-template-columns: 1fr; }
  .explanation { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .frame { width: calc(100% - 1.7rem); }
  .bar { min-height: 66px; }
  .brand { font-size: 1.19rem; gap: .38rem; }
  .brand img { width: 26px; height: 26px; }
  nav { gap: .55rem; font-size: .84rem; }
  nav .nav-app { padding: .54rem .55rem; }
  .intro h1 { font-size: clamp(2.2rem, 9.65vw, 3.8rem); }
  .workflow { grid-template-columns: 1fr; align-items: stretch; }
  .transfer-path { width: 85px; height: 70px; margin: -.1rem auto; transform: rotate(90deg); }
  .example-output { grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: center; }
  .example-output img { grid-row: span 3; }
  .foot span { font-size: .78rem; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001s !important; }
}