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

:root {
  --accent: #ff3d00;
  --code: #00d4aa;
  --canvas: #000;
  --sheet: #000;
  --surface: #050505;
  --surface-raised: #0a0a0a;
  --text: #fafafa;
  --muted: #9a9a9a;
  --line: #1a1a1a;
  --line-strong: #333;
  --paper-shadow: rgba(0, 0, 0, 0.72);
}

html {
  color-scheme: dark;
  background: var(--canvas);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    var(--canvas);
  background-size: 80px 80px, 80px 80px, auto;
  font-family: "JetBrains Mono", monospace;
  line-height: 1.45;
}

a {
  color: inherit;
}

.site-header,
.worksheet-shell {
  width: min(1400px, calc(100% - 10%));
  margin-inline: auto;
}

.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  font: 600 0.68rem/1 "JetBrains Mono", monospace;
}

.site-header a,
.sheet-footer a {
  text-decoration: none;
}

.logo {
  font-weight: 700;
}

.logo::before {
  content: "//";
  margin-right: 0.55rem;
  color: var(--accent);
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 2rem);
  color: var(--muted);
}

.diagnosis-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  animation: statusPulse 1.8s ease-in-out infinite;
}

.site-header a:hover,
.site-header a:focus-visible,
.sheet-footer a:hover,
.sheet-footer a:focus-visible {
  color: var(--accent);
}

.worksheet-shell {
  margin-top: 0;
  margin-bottom: 5rem;
}

.sheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.2rem 0 0;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 600 0.6rem/1 "JetBrains Mono", monospace;
}

.sheet-toolbar button {
  min-height: 2.5rem;
  flex: 0 0 auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #050505;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.sheet-toolbar button:hover,
.sheet-toolbar button:focus-visible {
  background: transparent;
  color: var(--accent);
}

.worksheet {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.worksheet::before {
  content: none;
}

.worksheet-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.kicker,
.intro-terminal,
.section-head,
.detail-grid label,
.protocol,
.matrix-grid,
.check-list,
.block-plan label,
.sheet-footer {
  font-family: "JetBrains Mono", monospace;
}

.kicker {
  display: flex;
  gap: 2rem;
  margin: 0 0 2.25rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.kicker span:last-child {
  color: var(--accent);
}

h1 {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font: 700 clamp(4rem, 7.4vw, 8.2rem)/0.82 "Space Grotesk", sans-serif;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.accent-cursor {
  color: var(--accent);
  text-shadow: none;
}

.intro-subtitle {
  max-width: 680px;
  margin: 2rem 0 1.8rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}

.diagnosis-message {
  max-width: 680px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 500 0.8rem/1.5 "JetBrains Mono", monospace;
}

.diagnosis-message > span,
.terminal-command span,
.terminal-list dd {
  color: var(--code);
}

.diagnosis-message p {
  margin: 0;
  color: var(--muted);
}

.intro-terminal {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  box-shadow: none;
}

.terminal-bar {
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
}

.terminal-controls {
  display: flex;
  gap: 0.45rem;
}

.terminal-controls span {
  width: 7px;
  height: 7px;
  border: 1px solid var(--muted);
  border-radius: 50%;
}

.terminal-controls span:first-child {
  border-color: var(--accent);
  background: var(--accent);
}

.terminal-body {
  min-height: 390px;
  padding: 2rem;
}

.terminal-command {
  margin: 0 0 2.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.terminal-list {
  display: grid;
  margin: 0;
}

.terminal-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.terminal-list dt,
.terminal-list dd {
  margin: 0;
  font-size: 0.75rem;
}

.terminal-list dt {
  color: var(--muted);
}

.terminal-list .is-pending {
  color: var(--accent);
}

.terminal-output {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  font-size: 0.72rem;
}

.terminal-cursor {
  width: 9px;
  height: 1rem;
  display: block;
  margin-top: 1.2rem;
  background: var(--code);
  animation: cursorBlink 1s steps(1, end) infinite;
}

.diagnosis-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
}

.diagnosis-strip > div {
  padding: 1.4rem 1.5rem;
}

.diagnosis-strip > div + div {
  border-left: 1px solid var(--line);
}

.diagnosis-strip span,
.diagnosis-strip strong {
  display: block;
}

.diagnosis-strip span {
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.diagnosis-strip strong {
  color: var(--text);
  font-size: 0.85rem;
}

.sheet-section {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.section-head {
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.62rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.section-head > span {
  min-width: 1.7rem;
  color: var(--accent);
  font-size: 0.58rem;
}

.section-head h2 {
  margin: 0;
  color: var(--text);
  font: 700 0.67rem/1 "JetBrains Mono", monospace;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-grid label,
.block-plan label {
  min-width: 0;
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem;
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 600;
}

.detail-grid label:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}

.detail-grid label:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}

.detail-grid label span,
.block-plan label span {
  min-height: 1.2rem;
  display: block;
  border-bottom: 1px solid var(--line-strong);
}

.protocol ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.9rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.protocol li + li {
  border-left: 1px solid var(--line);
}

.protocol b {
  color: var(--accent);
  font-size: 0.56rem;
}

.protocol strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text);
  font-size: 0.56rem;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.matrix-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.3rem minmax(0, 1fr);
  grid-template-areas:
    "mark zone"
    "mark observation"
    "mark fix";
  background: var(--surface);
}

.matrix-row > div {
  min-width: 0;
  padding: 0.72rem 0.8rem;
}

.matrix-mark {
  grid-area: mark;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  border-right: 1px solid var(--line);
  color: var(--accent);
}

.matrix-mark b {
  font-size: 0.55rem;
}

.matrix-zone {
  grid-area: zone;
}

.matrix-zone strong {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--accent);
  font-size: 0.66rem;
}

.matrix-zone small {
  color: var(--muted);
  font-size: 0.58rem;
}

.matrix-observation {
  grid-area: observation;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.65rem;
}

.matrix-fix {
  grid-area: fix;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.65rem;
}

.cell-label {
  display: block;
  margin-bottom: 0.28rem;
  color: #6f6f6a;
  font-size: 0.51rem;
  font-weight: 700;
}

.box {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  flex: 0 0 auto;
  border: 1.5px solid var(--accent);
}

.decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.check-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.75rem 0.8rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.check-list li + li,
.block-plan label + label {
  border-top: 1px solid var(--line);
}

.check-list strong {
  color: var(--text);
  font-size: 0.56rem;
}

.notes {
  background:
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) 1px);
}

.notes-lines {
  min-height: 10rem;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  padding: 0 0.8rem 0.65rem;
}

.notes-lines span {
  display: block;
  border-bottom: 1px solid var(--line);
}

.sheet-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.8rem 0.1rem 0;
  border-top: 2px solid var(--accent);
  color: var(--muted);
  font-size: 0.55rem;
}

.sheet-footer a {
  color: var(--text);
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes cursorBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (max-width: 1024px) {
  .worksheet::before {
    display: none;
  }

  .worksheet-intro {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .intro-terminal {
    width: min(100%, 680px);
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 1rem);
    min-height: 64px;
  }

  .worksheet-shell {
    width: calc(100% - 0.75rem);
    margin-top: 0;
  }

  .sheet-toolbar {
    padding-inline: 0.3rem;
  }

  .worksheet {
    padding: 0;
  }

  .worksheet-intro {
    gap: 2.5rem;
    padding: 3rem 0;
  }

  h1 {
    font-size: clamp(2.8rem, 13vw, 5rem);
    line-height: 0.88;
  }

  .kicker {
    gap: 0.55rem;
    flex-direction: column;
    margin-bottom: 1.4rem;
  }

  .intro-subtitle {
    margin-top: 1.4rem;
    font-size: 1rem;
  }

  .diagnosis-message {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .terminal-body {
    min-height: 350px;
    padding: 1.5rem;
  }

  .diagnosis-strip {
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
  }

  .diagnosis-strip > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-grid label:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  .detail-grid label:nth-child(n + 4) {
    border-top: 0;
  }

  .detail-grid label:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .detail-grid label:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .protocol ol,
  .decision-grid,
  .matrix-grid {
    grid-template-columns: 1fr;
  }

  .protocol li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .diagnosis-status,
  .site-header nav a:first-of-type,
  .sheet-toolbar > span {
    display: none;
  }

  .sheet-toolbar {
    justify-content: flex-end;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid label:nth-child(even) {
    border-left: 0;
  }

  .detail-grid label:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .matrix-row {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  .terminal-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .sheet-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  *,
  *::before,
  *::after {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  :root {
    --canvas: #050505;
    --sheet: #050505;
    --surface: #0b0b0b;
    --surface-raised: #121212;
    --text: #ffffff;
    --muted: #aaaaa4;
    --line: #30302e;
    --line-strong: #555550;
  }

  html,
  body {
    width: 210mm;
    min-width: 0;
    min-height: 297mm;
    margin: 0;
    background: #050505 !important;
  }

  body {
    font-size: 6pt;
    line-height: 1.22;
  }

  .site-header,
  .sheet-toolbar {
    display: none;
  }

  .worksheet-shell {
    width: 210mm;
    margin: 0;
  }

  .worksheet {
    width: 210mm;
    min-height: 297mm;
    display: flex;
    flex-direction: column;
    padding: 7mm 8mm 6mm;
    border: 0;
    border-top: 2.2mm solid var(--accent);
    background: #050505 !important;
    box-shadow: none;
  }

  .worksheet::before {
    display: none;
  }

  .worksheet-intro {
    display: block;
    padding: 0 0 3mm;
  }

  .kicker {
    margin-bottom: 1mm;
    font-size: 5pt;
  }

  h1 {
    font-size: 23pt;
    line-height: 0.86;
  }

  .intro-terminal,
  .intro-subtitle,
  .diagnosis-message,
  .diagnosis-strip {
    display: none;
  }

  .sheet-section {
    break-inside: avoid;
    margin-top: 2mm;
  }

  .section-head {
    min-height: 0;
    padding: 1.2mm 1.7mm;
  }

  .section-head > span,
  .section-head h2 {
    font-size: 4.8pt;
  }

  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-grid label {
    gap: 1mm;
    padding: 1.5mm 1.8mm;
    font-size: 4.5pt;
  }

  .detail-grid label:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--line);
  }

  .detail-grid label:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .detail-grid label:nth-child(4) {
    border-left: 0;
  }

  .detail-grid label span,
  .block-plan label span {
    min-height: 2.8mm;
  }

  .protocol ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .protocol li {
    gap: 1.3mm;
    padding: 1.5mm 1.8mm;
    font-size: 5pt;
  }

  .protocol li + li {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .protocol b,
  .protocol strong {
    font-size: 4.5pt;
  }

  .matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matrix-row {
    grid-template-columns: 8mm minmax(0, 1fr);
  }

  .matrix-row > div {
    padding: 1.35mm 1.6mm;
  }

  .matrix-mark {
    gap: 1.5mm;
  }

  .matrix-mark b,
  .matrix-zone small,
  .cell-label {
    font-size: 4.2pt;
  }

  .matrix-zone strong {
    font-size: 5pt;
  }

  .matrix-observation,
  .matrix-fix {
    font-size: 4.8pt;
  }

  .box {
    width: 3mm;
    height: 3mm;
  }

  .decision-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2mm;
  }

  .check-list li {
    min-height: 0;
    gap: 1.3mm;
    padding: 1.35mm 1.7mm;
    font-size: 4.8pt;
  }

  .check-list strong,
  .block-plan label {
    font-size: 4.4pt;
  }

  .block-plan label {
    gap: 0.8mm;
    padding: 1.25mm 1.7mm;
  }

  .notes {
    flex: 1;
    min-height: 37mm;
    display: flex;
    flex-direction: column;
  }

  .notes-lines {
    flex: 1;
    min-height: 31mm;
    padding: 0 1.8mm 1.5mm;
  }

  .sheet-footer {
    margin-top: 2mm;
    padding-top: 1.3mm;
    font-size: 4.6pt;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .terminal-cursor {
    animation: none;
  }
}