/* SizaIe — coming soon. An application window on dark slate. Written by hand. */

:root {
  --page: #0e1418;
  --win: #151d23;
  --bar: #1b252c;
  --line: rgba(255, 255, 255, .09);
  --text: #e6eef3;
  --muted: #8695a1;
  --green: #3ddc97;
  --on-green: #06251a;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 14px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 48px) clamp(14px, 3vw, 32px);
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(61, 220, 151, .10), transparent 70%),
    var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.win {
  max-width: 780px; margin: 0 auto;
  background: var(--win);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* title bar */
.chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}
.lights { display: flex; gap: 7px; flex: none; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #333f47; }
.lights i:nth-child(1) { background: #e06c5f; }
.lights i:nth-child(2) { background: #e0b34f; }
.lights i:nth-child(3) { background: #52c07a; }
.chrome .title {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome .badge {
  flex: none;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(61, 220, 151, .34);
  border-radius: 5px; padding: 3px 8px;
}

.pane { padding: clamp(24px, 5vw, 46px); }

h1 {
  margin: 0 0 18px;
  max-width: 22ch;
  font-size: clamp(1.95rem, 5vw, 3rem);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 740;
}
h1 span { color: var(--green); }
.tagline { margin: 0 0 14px; color: #b9c6cf; font-size: 1.04rem; }
.intro { margin: 0; max-width: 58ch; color: var(--muted); }

.seam { border: 0; height: 1px; background: var(--line); margin: clamp(26px, 4vw, 38px) 0; }

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 4vw, 42px); align-items: start; }

h2 {
  margin: 0 0 4px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green);
}
.hint { margin: 0 0 20px; color: var(--muted); font-size: .88rem; }

.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit; font-size: .95rem;
  color: var(--text);
  background: #101820;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, .15);
}
.field .invalid { border-color: #e2705f; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 0 22px;
  font: inherit; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-green); background: var(--green);
  border: 0; border-radius: 8px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn:hover { background: #5ce8ab; transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

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

.status { margin: 12px 0 0; min-height: 1.2em; font-size: .86rem; font-family: var(--mono); }
.status.ok { color: var(--green); }
.status.err { color: #f0937f; }

.rows { margin: 0; }
.rows > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rows dt { color: var(--muted); font-size: .82rem; font-family: var(--mono); }
.rows dd { margin: 0; text-align: right; font-weight: 600; font-size: .9rem; word-break: break-word; }

.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--bar);
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}
.statusbar nav { display: flex; gap: 18px; }
.statusbar a { color: var(--muted); }
.statusbar a:hover { color: var(--green); text-decoration: none; }
.statusbar p { margin: 0; }
.statusbar .live { display: inline-flex; align-items: center; gap: 7px; }
.statusbar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* legal */
.doc { max-width: 820px; margin: 0 auto; padding: clamp(22px, 4vw, 42px) 0 44px; }
.doc .pane h1 { margin-top: 0; }
.stamp {
  display: inline-block; margin: 0 0 26px;
  padding: 4px 11px; border-radius: 5px;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}
.doc h2 {
  margin: 28px 0 10px;
  font-family: var(--sans); font-size: 1.04rem; font-weight: 700;
  letter-spacing: -.01em; text-transform: none; color: var(--text);
}
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { color: #b3c0c9; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: .5em; }
.doc-actions {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.doc-actions .btn { width: auto; min-width: 165px; }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.ghost:hover { background: rgba(255, 255, 255, .05); }

@media (max-width: 840px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .chrome .title { text-align: left; }
  .chrome .badge { display: none; }
  .rows > div { flex-direction: column; gap: 2px; }
  .rows dd { text-align: left; }
  .statusbar { flex-direction: column; align-items: flex-start; }
}