:root {
  --bg: #f4f6f2;
  --ink: #16201e;
  --muted: #5b6762;
  --line: #ccd5ce;
  --panel: #ffffff;
  --signal: #1f8f5f;
  --amber: #c3872d;
  --cyan: #277f91;
  --danger: #b54b3c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 28px;
  background: rgba(244, 246, 242, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: white;
  background: var(--signal);
}
nav { display: flex; gap: 18px; font-size: 14px; color: var(--muted); }
nav a { text-decoration: none; }
nav a:hover { color: var(--ink); }

.hero {
  min-height: calc(100vh - 64px);
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 17, 15, .86), rgba(9, 17, 15, .42) 46%, rgba(9, 17, 15, .08));
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100% - 40px));
  margin-left: max(20px, 8vw);
  color: white;
  padding-bottom: 10vh;
}
.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 800;
  color: var(--signal);
}
.hero .eyebrow { color: #68df9d; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  margin: 0;
  font-size: clamp(54px, 9vw, 118px);
  line-height: .9;
  letter-spacing: 0;
}
h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: 0;
}
h3 { margin: 0 0 10px; font-size: 20px; }
.lead {
  max-width: 650px;
  font-size: 20px;
  color: rgba(255,255,255,.88);
}
.page-lead { color: var(--muted); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.language-picker { margin-bottom: 28px; padding: 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(8,18,15,.72); backdrop-filter: blur(8px); }
.language-picker strong { display:block; margin-bottom:10px; font-size:14px; }
.language-picker > div { display:flex; flex-wrap:wrap; gap:10px; }
.lang-button { display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 17px; border:2px solid rgba(255,255,255,.75); border-radius:9px; color:white; text-decoration:none; font-weight:850; box-shadow:0 5px 16px rgba(0,0,0,.22); transition:transform .15s, filter .15s; }
.lang-button:hover { transform:translateY(-2px); filter:brightness(1.12); }
.lang-button span { font-size:25px; }
.lang-button.italian { background:linear-gradient(90deg,#138b4b 0 33%,#f7f7f7 33% 66%,#c9323e 66%); color:#101715; text-shadow:0 1px 2px white; }
.lang-button.russian { background:linear-gradient(#fff 0 33%,#1753a4 33% 66%,#d52b35 66%); text-shadow:0 1px 3px #111; }
.lang-button.english { background:#21468b; }
.button.contact { background:#277f91; border-color:#277f91; color:white; }
.dedication-band { display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; padding:42px max(20px,6vw); color:#fff; background:linear-gradient(120deg,#17201d,#294d43); border-bottom:1px solid var(--line); }
.dedication-band h2 { max-width:900px; font-size:clamp(28px,3.5vw,48px); }
.dedication-band p:last-child { max-width:850px; margin:14px 0 0; color:rgba(255,255,255,.84); font-size:19px; }
.dedication-heart { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; color:#fff; background:#b54b3c; font-size:38px; box-shadow:0 8px 25px rgba(0,0,0,.25); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 750;
}
.button.primary { background: var(--signal); border-color: var(--signal); color: white; }
.button.donate { background: var(--amber); border-color: var(--amber); color: #16110a; }
.button.ghost { color: white; }
.button.light { background: white; border-color: var(--line); color: var(--ink); }

.donation-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 34px max(20px, 6vw);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.donation-banner h2 {
  max-width: 820px;
  font-size: clamp(28px, 3.4vw, 48px);
}
.donation-banner p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 18px;
}
.donation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.donation-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--signal);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
}
.donation-mini a {
  flex: 0 0 auto;
  color: var(--signal);
  font-weight: 900;
  text-decoration: none;
}
.donation-mini-links {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
}
.donation-page h1 {
  color: var(--ink);
  font-size: clamp(48px, 7vw, 88px);
}
.donation-actions {
  margin: 24px 0;
}
.donation-transparency {
  width: min(860px, 100%);
  margin: 24px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.donation-transparency h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 26px;
}
.donation-transparency p {
  margin: 8px 0 0;
  color: var(--muted);
}
.donation-transparency a {
  color: var(--signal);
  font-weight: 800;
}
.donation-form {
  display: grid;
  gap: 14px;
  width: min(760px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.donation-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}
.donation-form input,
.donation-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: white;
  color: var(--ink);
  font: inherit;
}
.donation-form textarea {
  min-height: 100px;
  resize: vertical;
}
.donation-form .check-row {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
}
.donation-form .check-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}
.hp-field {
  position: absolute;
  left: -9999px;
}
.donation-result {
  width: min(760px, 100%);
  margin: 22px 0;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
}
.donation-result.success {
  border-left: 4px solid var(--signal);
}
.donation-result.error {
  border-left: 4px solid var(--danger);
}

.band {
  padding: 78px max(20px, 6vw);
  border-bottom: 1px solid var(--line);
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 48px;
}
.intro-grid p { color: var(--muted); font-size: 18px; }
.feature-list { display: grid; gap: 14px; }
.feature-list article,
.code-card,
.manual-grid article,
.topic-box,
.station-card,
.panel-shot,
.terminal-shot {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.feature-list article { padding: 20px; }
.feature-list span { color: var(--amber); font-weight: 900; font-size: 13px; }
.feature-list p, .manual-grid p { color: var(--muted); margin-bottom: 0; }

.section-title {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.section-title.split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}
.code-grid, .manual-grid, .screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.screen-grid { grid-template-columns: 1fr 1fr; }
.code-card { padding: 20px; }
pre {
  margin: 0;
  padding: 16px;
  overflow: auto;
  border-radius: 6px;
  background: #121917;
  color: #c8f4d9;
  font: 14px/1.45 "Cascadia Mono", Consolas, monospace;
}
.manual-grid article { padding: 22px; }
.manual-grid a {
  display: inline-flex;
  margin-top: 18px;
  color: var(--signal);
  font-weight: 800;
  text-decoration: none;
}

.terminal-shot { overflow: hidden; }
.shot-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: #e9eee9;
}
.shot-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
}
.shot-bar span:nth-child(2) { background: var(--signal); }
.shot-bar span:nth-child(3) { background: var(--cyan); }
.terminal-shot pre { border-radius: 0; min-height: 230px; }
.panel-shot { padding: 24px; display: grid; gap: 18px; }
.panel-row { display: flex; justify-content: space-between; gap: 16px; }
.ok { color: var(--signal); font-weight: 800; }
.meter { height: 14px; border-radius: 999px; background: #e2e8e4; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--signal); }
.meter.accent i { background: var(--cyan); }

.geotech { background: #eef2ec; }
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
}
select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
}
.geo-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px;
}
.station-list { display: grid; gap: 12px; align-content: start; }
.station-card { padding: 16px; cursor: pointer; }
.station-card.active { outline: 2px solid var(--signal); }
.station-card b { display: block; }
.station-card span { color: var(--muted); font-size: 14px; }
.chart-area { min-width: 0; }
.metric-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.metric {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; margin-top: 6px; font-size: 22px; }
.chart-wrap {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}
canvas { width: 100%; height: auto; display: block; }
.topic-box { margin-top: 12px; padding: 18px; }
.topic-box pre { max-height: 240px; }
.samples-page h1 {
  color: var(--ink);
  font-size: clamp(52px, 8vw, 92px);
}
.monitor-page h1 {
  color: var(--ink);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.98;
}
.monitor-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(190px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 22px 0 18px;
}
.monitor-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.monitor-toolbar input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--ink);
  background: white;
  font: inherit;
}
.monitor-chart {
  margin-top: 12px;
}
.sensor-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.monitor-geo {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid #277f91;
  background: #eef7f8;
  color: #29433f;
  font-size: 0.92rem;
}
.monitor-map {
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.monitor-map[hidden] {
  display: none;
}
.monitor-map iframe {
  display: block;
  width: 100%;
  height: 230px;
  border: 0;
}
.monitor-map a {
  display: block;
  padding: 0.6rem 0.8rem;
  color: #1d6572;
  font-size: 0.88rem;
  text-decoration: none;
}
.monitor-map a:hover {
  text-decoration: underline;
}
.sensor-chart-card {
  min-width: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px 12px;
  overflow: hidden;
}
.sensor-chart-card header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 4px;
}
.sensor-chart-card h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.05;
}
.sensor-chart-card header span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}
.sensor-chart-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  width: 100%;
}

.sensor-chart-tooltip {
  position: absolute;
  z-index: 5;
  width: 178px;
  padding: 9px 11px;
  border: 1px solid rgba(13, 105, 120, .28);
  border-radius: 9px;
  background: rgba(15, 35, 48, .94);
  color: #fff;
  box-shadow: 0 8px 22px rgba(12, 28, 38, .22);
  font: 12px/1.35 system-ui, sans-serif;
  pointer-events: none;
}

.sensor-chart-tooltip strong,
.sensor-chart-tooltip span { display: block; }
.sensor-chart-tooltip strong { margin-bottom: 3px; color: #9de1df; }
.sensor-chart-card canvas {
  display: block;
  height: 135px;
  min-width: 760px;
  width: 100%;
}
.sensor-chart-card.empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 18px;
}
.samples-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sample-stat {
  padding: 16px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sample-stat span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.sample-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}
.samples-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.samples-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.samples-table th,
.samples-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.samples-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e9eee9;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}
.samples-table tbody tr:hover { background: #f7faf6; }
.samples-table td span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.sample-value {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 800;
}
.test-console {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1100px;
}
.editor-panel,
.output-panel {
  display: grid;
  gap: 0;
}
.editor-panel label,
.output-panel label {
  color: var(--muted);
  font-weight: 800;
}
.output-panel {
  gap: 10px;
}
.editor-panel {
  width: min(100%, 86ch);
}
.code-panel-label {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #e9eee9;
  color: var(--ink);
}
textarea {
  width: 100%;
  min-height: 13.5em;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: white;
  color: var(--ink);
  font: 15px/1.5 "Cascadia Mono", Consolas, monospace;
}
.code-entry {
  max-width: 86ch;
  min-width: min(100%, 86ch);
  border-radius: 0 0 8px 8px;
}
.test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
button.button {
  cursor: pointer;
  font: inherit;
}
button.button:disabled {
  opacity: .55;
  cursor: wait;
}

/* Pagina contatti */
.contact-page { min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; background:linear-gradient(145deg,#edf3ee 0%,#f7f8f5 55%,#e8f0ed 100%); }
.contact-main { width:calc(100% - 40px); max-width:1120px; margin:0 auto; padding:clamp(54px,8vw,100px) 0 70px; }
.contact-hero { padding:clamp(58px,8vw,96px) max(20px,8vw); color:white; background:linear-gradient(120deg,#17201d,#294d43); }
.contact-hero > div { width:min(920px,100%); }
.contact-hero .eyebrow { color:#68df9d; }
.contact-hero h1 { font-size:clamp(44px,7vw,82px); }
.contact-hero p:not(.eyebrow) { max-width:760px; margin:20px 0; color:rgba(255,255,255,.84); font-size:clamp(18px,2vw,22px); }
.contact-hero a { color:white; font-size:clamp(18px,2vw,23px); font-weight:850; text-decoration-thickness:1px; text-underline-offset:5px; }
.contact-form-section { padding:clamp(34px,6vw,68px) max(14px,8vw); }
.contact-heading { max-width:820px; margin-bottom:42px; }
.contact-heading h1 { color:var(--ink); font-size:clamp(54px,8vw,96px); line-height:.92; }
.contact-heading > p:last-child { max-width:720px; margin:22px 0 0; color:var(--muted); font-size:clamp(18px,2vw,22px); }
.contact-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.7fr); gap:24px; align-items:stretch; }
.contact-layout > *,.contact-heading,.contact-form,.contact-fields,.contact-form label { min-width:0; }
.contact-aside,.contact-card { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(22,32,30,.08); }
.contact-aside { padding:32px; background:linear-gradient(155deg,#16201e,#244d42); color:white; }
.contact-aside .eyebrow { margin-top:28px; color:#68df9d; }
.contact-aside > a { display:block; margin:8px 0 24px; color:white; font-size:clamp(17px,2vw,22px); font-weight:850; text-decoration:none; overflow-wrap:anywhere; }
.contact-aside > p:last-child { color:rgba(255,255,255,.72); }
.contact-icon { display:grid; place-items:center; width:62px; height:62px; border-radius:12px; background:var(--cyan); font-size:30px; font-weight:900; }
.contact-card { width:min(820px,100%); margin:0 auto; padding:clamp(24px,4vw,44px); box-shadow:none; }
.contact-form { display:grid; gap:22px; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form label { display:grid; gap:8px; color:var(--ink); font-weight:800; }
.contact-form input,.contact-form textarea { display:block; width:100%; max-width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:#fafcf9; color:var(--ink); font:inherit; outline:none; transition:border-color .15s,box-shadow .15s,background .15s; }
.contact-form input { min-height:52px; padding:0 15px; }
.contact-form textarea { min-height:190px; padding:14px 15px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--cyan); background:white; box-shadow:0 0 0 4px rgba(39,127,145,.13); }
.contact-submit { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.contact-submit small { max-width:480px; color:var(--muted); }
.contact-submit .button { flex:0 0 auto; gap:12px; min-height:52px; border:0; padding:0 24px; cursor:pointer; }
.contact-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.contact-notice { margin-bottom:24px; padding:15px 17px; border-radius:8px; font-weight:750; }
.contact-notice.success { border:1px solid #8ac7a4; background:#e8f6ed; color:#17623e; }
.contact-notice.error { border:1px solid #dda69e; background:#fff0ed; color:#8d3429; }
.contact-footer { margin-top:auto; padding:24px 20px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:14px; }
@media (max-width:760px) { .contact-main{width:calc(100% - 28px);padding-top:46px}.contact-layout{grid-template-columns:minmax(0,1fr)}.contact-aside{padding:25px}.contact-fields{grid-template-columns:minmax(0,1fr)}.contact-submit{align-items:stretch;flex-direction:column}.contact-submit .button{width:100%}.contact-page .topbar{padding:0 16px}.contact-page .topbar nav{font-size:13px}.contact-hero{padding:48px 20px}.contact-form-section{padding:24px 14px}.contact-card{padding:24px 18px} }
#nikibasicOutput {
  min-height: 360px;
  max-height: 56vh;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 16px;
}
.c64-shell {
  display: grid;
  gap: 14px;
  width: min(100%, 100ch);
  min-width: min(100%, 80ch);
}
.c64-bezel {
  padding: clamp(10px, 2vw, 18px);
  border-radius: 8px;
  background: #252927;
  border: 1px solid #111614;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.05);
}
.c64-screen {
  display: grid;
  grid-template-rows: auto auto auto;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 4px;
  overflow: hidden;
  background: #243f9a;
  color: #b8d7ff;
  border: 8px solid #5f7ac8;
  font: 18px/1.08 "Cascadia Mono", Consolas, monospace;
}
.c64-status {
  min-height: 34px;
  padding: 7px 12px;
  color: #e3ecff;
  background: #314faa;
  border-bottom: 2px solid #5f7ac8;
  font-weight: 800;
}
.c64-status.ok { color: #9dffbf; }
.c64-output {
  margin: 0;
  padding: 14px 18px;
  height: calc(24 * 1.08em + 28px);
  min-height: 0;
  overflow: hidden;
  white-space: pre-wrap;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font: inherit;
}
.c64-input-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 14px;
  background: #243f9a;
  border-top: 2px solid #5f7ac8;
}
.c64-prompt {
  color: #ffffff;
  font-weight: 800;
}
.c64-input-line input {
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  caret-color: #ffffff;
  font: inherit;
  text-transform: uppercase;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px max(20px, 6vw);
  color: var(--muted);
  background: #17201d;
}
footer span:first-child { color: white; font-weight: 800; }

.chat-section { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:32px; padding:48px max(20px,6vw); background:#E6EDF0; border-bottom:1px solid #ccd5ce; }
.chat-intro h2 { color:#0F3157; font-size:clamp(30px,3.6vw,48px); }
.chat-intro > p:not(.eyebrow) { color:#244C46; }
.chat-rules { padding:14px; background:#FAFCFB; border-left:4px solid #0D6978; }
.chat-warning { padding:14px; background:#fff; border:2px solid #B42318; color:#0E2623!important; }
.chat-panel { min-width:0; padding:16px; background:#FAFCFB; border:1px solid #ccd5ce; border-radius:8px; }
.chat-messages { height:360px; overflow-y:auto; padding:8px; background:#F8FBFA; border:1px solid #ccd5ce; }
.chat-empty { color:#808992; text-align:center; margin:145px 10px 0; }
.chat-message { position:relative; padding:10px 38px 10px 12px; border-bottom:1px solid #E4EDEB; }
.chat-message > div { display:flex; align-items:baseline; gap:10px; }
.chat-message strong { color:#0D6978; }
.chat-message time { color:#808992; font-size:12px; }
.chat-message p { margin:3px 0 0; white-space:pre-wrap; color:#0E2623; }
.chat-report { position:absolute; top:12px; right:8px; width:26px; height:26px; border:0; border-radius:4px; background:#E4EDEB; color:#5B6875; cursor:pointer; font-weight:800; }
.chat-form { display:grid; grid-template-columns:180px minmax(160px,1fr) auto; gap:8px; align-items:end; margin-top:12px; }
.chat-form label { display:grid; gap:4px; color:#244C46; font-size:13px; }
.chat-form input { width:100%; height:34px; padding:0 9px; border:1px solid #aebdb8; background:#fff; color:#102A27; font:inherit; }
.chat-form .button { min-height:34px; height:34px; }
.chat-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; }
.chat-status { min-height:22px; margin:7px 0 0; color:#B42318; font-size:13px; }

.monitor-page .sensor-chart-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.monitor-page .sensor-chart-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

@media (max-width: 860px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 14px 20px; gap: 10px; }
  nav { flex-wrap: wrap; }
  .hero { min-height: 760px; }
  .hero-copy { margin: 0 20px; width: calc(100% - 40px); }
  .intro-grid, .geo-layout, .section-title.split { grid-template-columns: 1fr; }
  .code-grid, .manual-grid, .screen-grid, .metric-strip, .samples-toolbar, .monitor-toolbar, .sensor-chart-grid { grid-template-columns: 1fr; }
  .donation-banner { grid-template-columns: 1fr; }
  .dedication-band { grid-template-columns:1fr; }
  .donation-buttons { justify-content: stretch; }
  .donation-banner .button { width: 100%; }
  .donation-mini { align-items: flex-start; flex-direction: column; }
  .monitor-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .monitor-page h1 {
    font-size: 36px;
  }
  .monitor-toolbar {
    gap: 8px;
    margin: 14px 0 12px;
  }
  .sensor-chart-grid {
    gap: 12px;
  }
  .sensor-chart-card {
    padding: 10px;
  }
  .sensor-chart-card header {
    gap: 6px;
  }
  .sensor-chart-card header span {
    text-align: left;
    white-space: normal;
  }
  .sensor-chart-card canvas {
    height: 180px;
    min-width: 820px;
  }
  .test-console { grid-template-columns: 1fr; }
  .c64-screen {
    height: auto;
    min-height: 0;
    font-size: 15px;
    grid-template-rows: auto auto auto;
  }
  footer { flex-direction: column; }
  .chat-section { grid-template-columns:1fr; padding:34px 14px; }
  .chat-form { grid-template-columns:1fr; }
  .chat-messages { height:320px; }
}
.radio-page{max-width:1180px;margin:0 auto}.radio-listen-card{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:32px;align-items:start;background:#fafcfb;border:1px solid #d5e2df;padding:32px}.radio-poster{margin:0;width:100%}.radio-poster img{display:block;width:100%;height:auto;border:1px solid #d5e2df}.radio-listen-copy h1{margin:6px 0 12px;color:#0e2623}.radio-live-label{display:flex;align-items:center;gap:8px;color:#157347;font-weight:700;font-size:13px;letter-spacing:.06em}.radio-live-label span{width:10px;height:10px;border-radius:50%;background:#157347}.radio-player{display:block;width:100%;max-width:680px;margin:16px 0}.radio-help,.radio-compat{color:#5b6875}.radio-actions{margin:18px 0}.topbar nav a[aria-current="page"]{color:#0d6978;text-decoration:underline;text-underline-offset:5px}@media(max-width:760px){.radio-listen-card{grid-template-columns:1fr;padding:20px}.radio-poster{max-width:420px;margin:0 auto}}