:root {
  --bg: #030508;
  --panel: #0d141e;
  --ink: #a0aec0;
  --dim: #6a7482;
  --line: #2b394a;
  --cyan: #00f0ff;
  --hi: #f2f5f8;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
body {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,240,255,.08) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,240,255,.08) 40px);
}
.fx-page {
  max-width: 720px;
  margin: 24px auto;
  padding: 18px 20px 28px;
  background: linear-gradient(135deg, rgba(8,12,18,.96), rgba(4,6,10,.98));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 10px 30px rgba(0,0,0,.9);
}
.fx-head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.fx-back {
  color: #0c1015;
  background: linear-gradient(180deg, #f2f5f8 0%, #b8c6d6 40%, #57697c 52%, #ffffff 100%);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  padding: 8px 12px;
}
h1 {
  margin: 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 28px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hi);
}
.fx-sub { margin: 2px 0 0; color: var(--dim); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.fx-stat {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 6px 10px;
}
.fx-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 16px 0;
  font-size: 12px;
}
.fx-spec span { display: block; color: var(--dim); letter-spacing: .2em; font-size: 9px; }
.fx-spec b { font-weight: 600; color: var(--hi); }
.fx-log {
  margin: 0 0 16px;
  min-height: 120px;
  padding: 12px;
  background: #05070a;
  border: 1px solid #1f2836;
  color: #7dffb3;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.fx-row { display: flex; gap: 10px; align-items: center; }
#fx-boot {
  font: inherit;
  letter-spacing: .24em;
  font-weight: 800;
  padding: 10px 22px;
  cursor: pointer;
  color: #0c1015;
  background: linear-gradient(180deg, #f2f5f8 0%, #b8c6d6 40%, #57697c 52%, #ffffff 100%);
  border: 1px solid #05070a;
}
.fx-row a { color: var(--cyan); font-size: 12px; letter-spacing: .16em; text-decoration: none; }
.fx-keys, .fx-pack { color: var(--dim); font-size: 11px; letter-spacing: .04em; }
@media (max-width: 640px) {
  .fx-page { margin: 8px; padding: 14px; }
  .fx-spec { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
}