:root {
  --blue: #003594;
  --black: #080808;
  --white: #ffffff;
  --muted: #737373;
  --line: rgba(8, 8, 8, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--black); }
body {
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, "Geist", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
::selection { color: var(--white); background: var(--blue); }

.sShell { min-height: 100svh; padding: 76px clamp(22px, 4vw, 58px) 56px; }
.sNav {
  position: fixed; z-index: 30; inset: 0 0 auto; height: 76px;
  padding: 0 clamp(22px, 4vw, 58px);
  display: flex; align-items: center; justify-content: space-between;
}
.sMark { width: 42px; height: 42px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 50%; }
.sMark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sQuiet {
  font-size: .67rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
}
.sQuiet:focus-visible, .sMark:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sHead { width: min(1120px, 100%); margin: 0 auto 8px; padding: 36px 0 8px; }
.sKicker {
  margin: 0 0 24px; color: var(--muted);
  font-family: var(--font-geist-mono), ui-monospace, "Geist Mono", monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.sShell h1 {
  margin: 0 0 12px; letter-spacing: -.07em; font-weight: 560;
  font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: .92;
}
.sLede { margin: 0; max-width: 34em; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.sStatus { margin: 16px 0 0; font-family: ui-monospace, "Geist Mono", monospace; font-size: .72rem; letter-spacing: .03em; line-height: 1.45; }
.sErr { color: var(--blue); }

.sPanel { width: min(1120px, 100%); margin: 0 auto; padding: 28px 0 8px; border-top: 1px solid var(--line); }
.sPanel h2 {
  margin: 0 0 16px; color: var(--muted);
  font-family: ui-monospace, "Geist Mono", monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.sHint { margin: 0 0 16px; max-width: 36em; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.sFoot {
  width: min(1120px, 100%); margin: 28px auto 0; color: var(--muted);
  font-family: ui-monospace, "Geist Mono", monospace; font-size: .62rem; letter-spacing: .04em; line-height: 1.55;
}

.sField { display: grid; gap: 8px; margin: 0 0 16px; }
.sLabel {
  color: var(--muted); font-family: ui-monospace, "Geist Mono", monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sInput, .sArea {
  width: 100%; max-width: 36rem; min-height: 44px; padding: 10px 12px;
  color: var(--black); background: var(--white); border: 1px solid var(--line);
  font-family: ui-monospace, "Geist Mono", monospace; font-size: 1rem;
}
.sArea { min-height: 8rem; resize: vertical; }
.sInput:focus, .sArea:focus { outline: none; }
.sInput:focus-visible, .sArea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sBtn, .sTeam, .sCopy {
  min-height: 44px; padding: 10px 14px;
  color: var(--black); background: var(--white); border: 1px solid var(--line);
  font-family: ui-monospace, "Geist Mono", monospace;
  font-size: .62rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation;
}
.sBtn[aria-pressed="true"], .sTeam[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); }
.sBtn:disabled, .sTeam:disabled { color: var(--muted); cursor: not-allowed; }
.sBtn:focus, .sTeam:focus, .sCopy:focus { outline: none; }
.sBtn:focus-visible, .sTeam:focus-visible, .sCopy:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sLinks { display: grid; gap: 10px; }
.sLinkRow { display: grid; gap: 6px; }
.sLinkRow code {
  display: block; overflow-wrap: anywhere;
  font-family: ui-monospace, "Geist Mono", monospace; font-size: .72rem; line-height: 1.45;
}
.sActions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

.sGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sTeam {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  text-transform: none; letter-spacing: .04em; font-size: .78rem; text-align: left;
}
.sTeam img { width: 28px; height: 28px; display: block; object-fit: contain; }
.sTeam small { color: var(--muted); font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; }

.sTable { width: 100%; border-collapse: collapse; }
.sTable th {
  padding: 8px 6px 10px 0; color: var(--muted); text-align: left;
  font-family: ui-monospace, "Geist Mono", monospace;
  font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sTable td { padding: 10px 8px 10px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.sName { font-weight: 650; }
.sOut { color: var(--muted); }
.sPick, .sUsed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sLogo { width: 28px; height: 28px; object-fit: contain; display: block; }
.sLogoUsed { width: 22px; height: 22px; opacity: .72; }
.sAbbr { font-family: ui-monospace, "Geist Mono", monospace; font-size: .68rem; letter-spacing: .04em; }

.sPools { display: grid; gap: 10px; }
.sPools a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--black); font-weight: 650; }
.sPools a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (min-width: 720px) {
  .sGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sNav { height: 66px; }
  .sShell { padding: 66px 22px 40px; }
  .sHead { padding-top: 24px; }
  .sMark { width: 40px; height: 40px; }
  .sTable th:nth-child(4), .sTable td:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sShell * { animation: none !important; transition: none !important; }
}