@font-face {
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('node_modules/@fontsource-variable/jost/files/jost-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family:'Spectral';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('node_modules/@fontsource/spectral/files/spectral-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family:'Spectral';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('node_modules/@fontsource/spectral/files/spectral-latin-500-normal.woff2') format('woff2');
}

:root {
  --paper:#F6F1E7;
  --ink:#15181C;
  --blue:#0D5BC9;
  --mid:#5B564F;
  --line:#d8d4cc;
  --font-display:'Jost',Futura,'Century Gothic',sans-serif;
  --font-body:'Spectral',Charter,Georgia,serif;
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
  color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(#15181c04 1px,transparent 1px),linear-gradient(90deg,#15181c04 1px,transparent 1px);
  background-size:40px 40px;
  font-family:var(--font-display);
  letter-spacing:0;
}

.cockpit-stage { width:min(1240px,100%); min-width:0; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); }
p,label { font-family:var(--font-body); font-weight:400; }
button,input,select { font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; touch-action:manipulation; }
input { display:block; width:100%; min-width:0; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
::selection { background:var(--blue); color:var(--paper); }

dialog {
  width:min(500px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  padding:32px;
}

dialog::backdrop { background:#15181c99; backdrop-filter:blur(4px); }
body:has(dialog[open]) { overflow:hidden; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
dialog h2 { margin:0; font-size:28px; font-weight:450; line-height:1.12; }
dialog p { font-size:14px; line-height:1.5; color:var(--mid); }

@media(max-width:700px) {
  body {
    padding:12px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    align-items:start;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}