:root {
  --bg: #080a08;
  --panel: #0d100d;
  --line: #354035;
  --text: #d7ddd2;
  --dim: #7d897a;
  --accent: #91c787;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr) 26px;
  gap: 7px;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.2 ui-monospace, "Cascadia Mono", "Courier New", monospace;
}

header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: 0 9px;
  white-space: nowrap;
}

.mark, a, output, #state { color: var(--accent); }
.muted, small { color: var(--dim); }
a { text-decoration: none; }
a:hover, a:focus-visible { color: var(--bg); background: var(--accent); outline: 0; }

main {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

section {
  min-width: 0;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

h1 { margin: 0; color: var(--dim); font: inherit; font-weight: 400; letter-spacing: .08em; }
output { display: block; font-size: clamp(22px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.07em; white-space: nowrap; }
.network { display: grid; gap: 2px; font-size: clamp(12px, 2.35vw, 28px); letter-spacing: -.04em; }
.network span { display: flex; justify-content: space-between; gap: 8px; }
.network b { font-weight: inherit; }

.bar { height: 5px; border: 1px solid var(--line); }
.bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s linear; }
small { min-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lamp { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border: 1px solid var(--dim); }
#lamp.on { background: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
  body { grid-template-rows: 28px minmax(0, 1fr) 24px; gap: 4px; padding: 5px; font-size: 10px; }
  header, footer { padding: 0 6px; }
  main { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; }
  section { padding: 7px; }
  output { font-size: clamp(20px, 8.5vw, 38px); }
  .network { font-size: clamp(11px, 4.2vw, 19px); }
}

@media (max-height: 480px) {
  body { grid-template-rows: 24px minmax(0, 1fr) 22px; gap: 3px; padding: 3px; font-size: 9px; }
  main { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; }
  section { padding: 5px; }
  output { font-size: clamp(17px, 7vh, 32px); }
}

::selection { color: var(--bg); background: var(--accent); }