@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans:wght@400;700&family=Shippori+Mincho:wght@600;700&display=swap");

:root {
  --led: #0c1210;
  --amber: #f0c14a;
  --vermilion: #c2412d;
  --paper: #efe8dc;
  --ink: #14120f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans", sans-serif; background: var(--paper); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

.board {
  background: var(--led);
  color: var(--amber);
  font-family: "IBM Plex Mono", monospace;
  padding: 10px 4vw 4px;
}

.board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 8px 0;
  color: #8a9a7a;
}

.rows { display: grid; }
.row-led {
  display: grid;
  grid-template-columns: 70px 1fr 160px 90px;
  gap: 12px;
  padding: 9px 8px;
  border-top: 1px solid #1c2a22;
  color: var(--amber);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.row-led:hover, .row-led.on { background: #152018; color: #fff3c4; }
.row-led b { color: var(--vermilion); font-weight: 600; }

.lang-led { display: flex; gap: 0; }
.lang-led button { background: transparent; border: 1px solid #3d4a3a; color: #8a9a7a; padding: 4px 10px; cursor: pointer; font-family: "IBM Plex Mono", monospace; }
.lang-led button.active { background: var(--amber); color: #111; }

.shell {
  display: grid;
  grid-template-columns: 1fr 72px;
}

.spine {
  writing-mode: vertical-rl;
  background: var(--ink);
  color: #cfc6b6;
  padding: 28px 18px;
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.4em;
  font-size: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.tt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 8px solid var(--ink);
}
.tt article { padding: 40px 28px; min-height: 280px; }
.tt article:nth-child(1) { background: #e4ddd0; }
.tt article:nth-child(2) { background: var(--ink); color: #efe8dc; }
.tt article:nth-child(3) { background: var(--vermilion); color: #fff; }
.tt small { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.16em; font-size: 11px; }
.tt h1, .tt h2 { font-family: "Shippori Mincho", serif; font-size: clamp(26px, 3vw, 38px); margin: 10px 0 12px; font-weight: 700; }

.paper { padding: 56px 7vw; max-width: 980px; }
.paper h2 { font-family: "Shippori Mincho", serif; font-size: 34px; margin-bottom: 12px; }
.columns { columns: 2; column-gap: 36px; }
.columns p { margin-bottom: 14px; break-inside: avoid; }
.num { font-family: "IBM Plex Mono", monospace; color: var(--vermilion); }

.console { background: #d9d1c3; padding: 40px 7vw 56px; }
.tabs { display: flex; gap: 0; border: 2px solid var(--ink); }
.tabs button { flex: 1; border: 0; background: transparent; padding: 12px; cursor: pointer; font-weight: 700; border-right: 2px solid var(--ink); }
.tabs button:last-child { border-right: 0; }
.tabs button.on { background: var(--ink); color: var(--paper); }
.panel { display: none; background: #efe8dc; border: 2px solid var(--ink); border-top: 0; padding: 24px; min-height: 180px; }
.panel.on { display: block; }

.waybill {
  margin: 0 7vw 56px;
  background: #fff;
  border: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
}
.waybill::before {
  content: "COPY / 控";
  position: absolute;
  right: 12px;
  top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--vermilion);
}
.copy { padding: 22px; border-right: 2px dashed var(--ink); }
.copy:last-child { border-right: 0; }
.copy h3 { font-family: "Shippori Mincho", serif; margin-bottom: 10px; }
form { display: grid; gap: 8px; }
label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
input, textarea, select { border: 1px solid var(--ink); padding: 8px; background: #f7f3ea; }
textarea { min-height: 80px; }
.cta { background: var(--vermilion); color: #fff; border: 0; padding: 10px; cursor: pointer; font-weight: 700; }

.colophon { padding: 24px 7vw 40px; font-size: 13px; color: #5c564c; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.colophon a { color: var(--vermilion); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .spine { display: none; }
  .tt, .waybill, .columns { grid-template-columns: 1fr; columns: 1; display: grid; }
  .row-led { grid-template-columns: 1fr 1fr; }
  .paper, .console { padding: 28px 18px; }
  .waybill { margin: 0 18px 32px; }
}