/* MISChaufen v5 — TRON: Legacy */

* { box-sizing: border-box; }

:root {
  --bg:      #020c18;
  --panel:   rgba(2, 16, 30, .93);
  --fg:      #98c4dc;
  --blue:    #00e5ff;
  --white:   #dff4ff;
  --dim:     #0e3850;
  --border:  #0a2d40;
  --grid:    rgba(0, 210, 255, .055);
  --glow-b:  0 0 8px rgba(0, 229, 255, .9), 0 0 24px rgba(0, 229, 255, .4), 0 0 55px rgba(0, 229, 255, .12);
  --glow-w:  0 0 8px rgba(223, 244, 255, .7), 0 0 25px rgba(0, 229, 255, .25);
}

/* ── BACKGROUND ────────────────────────────────────── */

html {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(0, 90, 130, .55) 0%, rgba(0, 30, 55, .35) 30%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 20, 40, .4) 0%, transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
  color: var(--fg);
  min-height: 100vh;
}

/* vignette */
html::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* scanlines */
html::after {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 6, 14, .08) 2px 4px
  );
}

body {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  font: 14px/1.75 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
}

a { color: var(--blue); text-decoration: none; font-weight: 500; }
a:hover, a:focus { color: var(--white); text-shadow: var(--glow-b); text-decoration: none; }

/* ── ANIMATIONS ────────────────────────────────────── */

@keyframes flicker {
  0%, 87%, 89%, 91%, 100% { opacity: 1; text-shadow: 0 0 14px rgba(0, 229, 255, .7), 0 0 35px rgba(0, 229, 255, .25); }
  88%  { opacity: .55; text-shadow: none; }
  90%  { opacity: .85; text-shadow: 0 0 5px rgba(0, 229, 255, .4); }
}

@keyframes cornerGlow {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; }
}

@keyframes blink  { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── HEADER ────────────────────────────────────────── */

header {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.5rem 1.75rem 0;
  margin-bottom: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
  box-shadow:
    0 0 50px rgba(0, 229, 255, .06),
    inset 0 1px 0 rgba(0, 229, 255, .08),
    inset 0 0 60px rgba(0, 5, 15, .5);
}

/* top-left corner bracket */
header::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
  box-shadow: -3px -3px 14px rgba(0, 229, 255, .55);
  pointer-events: none;
  animation: cornerGlow 4s ease-in-out infinite;
}

/* bottom-right corner bracket */
header::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  border-bottom: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  box-shadow: 3px 3px 14px rgba(0, 229, 255, .55);
  pointer-events: none;
  animation: cornerGlow 4s ease-in-out infinite;
}

/* top-right corner bracket (positioned relative to header) */
.header-brand::before {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 22px; height: 22px;
  border-top: 2px solid rgba(0, 229, 255, .45);
  border-right: 2px solid rgba(0, 229, 255, .45);
  pointer-events: none;
  animation: cornerGlow 4s ease-in-out infinite 1.3s;
}

/* bottom-left corner bracket (positioned relative to header) */
.header-brand::after {
  content: '';
  position: absolute;
  bottom: -2px; left: -2px;
  width: 22px; height: 22px;
  border-bottom: 2px solid rgba(0, 229, 255, .45);
  border-left: 2px solid rgba(0, 229, 255, .45);
  pointer-events: none;
  animation: cornerGlow 4s ease-in-out infinite 2.6s;
}

.header-brand {
  display: flex;
  align-items: center;
}

header h1 {
  font-size: 1.75rem;
  font-weight: 200;
  margin: 0;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 14px rgba(0, 229, 255, .7), 0 0 40px rgba(0, 229, 255, .25);
  animation: flicker 12s ease-in-out infinite;
  line-height: 1.1;
}
header h1 a { color: inherit; text-shadow: inherit; text-decoration: none; }

.tagline {
  font-size: .62rem;
  color: rgba(0, 229, 255, .45);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: .2rem 0 0;
}

.cursor {
  color: var(--blue);
  text-shadow: var(--glow-b);
  animation: blink 1.1s step-end infinite;
}

nav {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: .5rem 0 .25rem;
  gap: 0;
  background: rgba(0, 229, 255, .02);
}
nav a {
  color: var(--dim);
  padding: .2rem .875rem;
  border-right: 1px solid var(--border);
  transition: color .2s, text-shadow .2s, background .2s;
}
nav a:first-of-type { padding-left: 0; }
nav a:last-of-type  { border-right: none; }
nav a:hover { color: var(--blue); text-shadow: var(--glow-b); background: rgba(0, 229, 255, .05); text-decoration: none; }

.glow-line {
  font-family: 'Courier New', monospace;
  font-size: .5rem;
  color: rgba(0, 229, 255, .4);
  letter-spacing: .1em;
  border-top: 1px solid rgba(0, 229, 255, .12);
  padding-top: .35rem;
  overflow: hidden;
  white-space: nowrap;
  height: 1.1rem;
  margin-top: .25rem;
}
.glow-line::before {
  content: 'UART 115200 8N1 ◈ JTAG UNLOCKED ◈ READ 0xDEADBEEF=0xFF3A1C00 ◈ SPI CLK 24MHz ◈ FLASH 0x00000000-0x00FFFFFF ◈ GPIO17 HIGH ◈ GPIO22 LOW ◈ VCC 3.312V ◈ I2C 0x68 ACK ◈ REG[0x2C]=0xFF3A ◈ BOOTLOADER INTERRUPTED ◈ DUMPING FIRMWARE ◈ CRC32:0xA3F71B2E MISMATCH EXPECTED:0xDECAFBAD ◈ RETRY 3/5 ◈ EEPROM WRITE 0x1000 ◈ SP=0xBFFFF4A8 ◈ IRQ PENDING ◈ DMA CH3 OVERFLOW ◈ OSC 16.000MHz ◈ FUSE:0xFF 0xD9 0xFD ◈ HEAP 0x20001A40 ◈ WATCHDOG RESET ◈ PC=0x08003F2C ◈ NOP SLED ◈ STACK SMASH ◈ UART 115200 8N1 ◈ JTAG UNLOCKED ◈ READ 0xDEADBEEF=0xFF3A1C00 ◈ SPI CLK 24MHz ◈ FLASH 0x00000000-0x00FFFFFF ◈ GPIO17 HIGH ◈ GPIO22 LOW ◈ VCC 3.312V ◈ I2C 0x68 ACK ◈ REG[0x2C]=0xFF3A ◈ BOOTLOADER INTERRUPTED ◈ DUMPING FIRMWARE ◈ CRC32:0xA3F71B2E MISMATCH EXPECTED:0xDECAFBAD ◈ RETRY 3/5 ◈ EEPROM WRITE 0x1000 ◈ SP=0xBFFFF4A8 ◈ IRQ PENDING ◈ DMA CH3 OVERFLOW ◈ OSC 16.000MHz ◈ FUSE:0xFF 0xD9 0xFD ◈ HEAP 0x20001A40 ◈ WATCHDOG RESET ◈ PC=0x08003F2C ◈ NOP SLED ◈ STACK SMASH ◈';
  display: inline-block;
  animation: ticker 60s linear infinite;
}

/* ── SECTIONS ───────────────────────────────────────── */

section {
  margin-bottom: 2.5rem;
  position: relative;
  padding-bottom: .5rem;
}

/* diamond node — cyan, top-left */
section::before {
  content: '';
  position: absolute;
  top: -5px; left: -12px;
  width: 6px; height: 6px;
  background: var(--blue);
  box-shadow: 0 0 6px rgba(0, 229, 255, .8), 0 0 14px rgba(0, 229, 255, .4);
  transform: rotate(45deg);
  pointer-events: none;
}

/* diamond node — dim cyan, bottom-right */
section::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -12px;
  width: 6px; height: 6px;
  background: rgba(0, 229, 255, .35);
  box-shadow: 0 0 6px rgba(0, 229, 255, .5), 0 0 14px rgba(0, 229, 255, .2);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ── HERO ───────────────────────────────────────────── */

.hero {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 2rem;
  border: 1px solid var(--border);
  box-shadow: 0 0 25px rgba(0, 229, 255, .1), 0 0 0 1px rgba(0, 229, 255, .05);
  transition: border-color .35s, box-shadow .35s;
}
.hero:hover {
  border-color: rgba(0, 229, 255, .5);
  box-shadow: 0 0 40px rgba(0, 229, 255, .2), 0 0 0 1px rgba(0, 229, 255, .15);
}

/* ── HEADINGS ───────────────────────────────────────── */

h2 {
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin: 3rem 0 1.25rem;
  color: var(--white);
  text-shadow: var(--glow-w);
  padding: .4rem .875rem .4rem 1rem;
  background: linear-gradient(90deg, rgba(0, 229, 255, .09), transparent 80%);
  border-left: 3px solid var(--blue);
  box-shadow: -5px 0 25px rgba(0, 229, 255, .4);
  display: flex;
  align-items: center;
  gap: .75rem;
  line-height: 1.4;
}
h2::before { content: "▶"; color: var(--blue); font-size: .7em; text-shadow: var(--glow-b); flex-shrink: 0; }
h2::after  { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 229, 255, .2), transparent); }

h3 {
  font-size: .8rem;
  font-weight: 400;
  margin: 1.75rem 0 .25rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, .65);
  text-shadow: 0 0 10px rgba(0, 229, 255, .3);
}

/* ── LISTS ──────────────────────────────────────────── */

ul { padding-left: 0; list-style: none; }
li { margin: .5rem 0; padding-left: 1.5rem; text-indent: -1.5rem; }
li::before { content: "▸ "; color: var(--blue); font-size: .9em; text-shadow: 0 0 6px rgba(0, 229, 255, .6); }

/* ── UTILITIES ──────────────────────────────────────── */

.muted { color: var(--dim); font-size: .82rem; letter-spacing: .04em; }
.date  { color: var(--dim); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* ── CODE ───────────────────────────────────────────── */

code {
  background: var(--panel);
  color: var(--blue);
  padding: .1em .4em;
  border: 1px solid var(--border);
  font-family: 'Courier New', monospace;
  font-size: .85em;
  text-shadow: 0 0 5px rgba(0, 229, 255, .4);
}
pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: .85rem;
  font-family: 'Courier New', monospace;
  box-shadow: -5px 0 20px rgba(0, 229, 255, .2);
}
pre code { border: none; padding: 0; }

/* ── TABLES / DL ────────────────────────────────────── */

img { max-width: 100%; height: auto; }
table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: .4rem .75rem; text-align: left; }
th { color: var(--blue); font-weight: 400; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 5px rgba(0, 229, 255, .5); }
tr:hover td { background: rgba(0, 229, 255, .03); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; }
dt { color: var(--dim); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding-top: .15rem; }
dd { margin: 0; }

/* ── FOOTER ─────────────────────────────────────────── */

footer {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 1px solid rgba(0, 229, 255, .3);
  padding: 1rem 1.5rem;
  margin-top: 4rem;
  color: var(--dim);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
  box-shadow: 0 -5px 30px rgba(0, 229, 255, .06);
}

footer::before {
  content: '';
  position: absolute;
  top: -3px; left: 0;
  width: 5px; height: 5px;
  background: var(--blue);
  box-shadow: var(--glow-b);
}

footer::after {
  content: '// END OF LINE';
  position: absolute;
  bottom: .875rem;
  right: 1.5rem;
  font-size: .6rem;
  color: rgba(0, 229, 255, .2);
  letter-spacing: .2em;
  pointer-events: none;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.footer-links a { color: var(--dim); font-weight: 500; transition: color .2s, text-shadow .2s; }
.footer-links a:hover { color: var(--blue); text-shadow: var(--glow-b); text-decoration: none; }
.footer-links span {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── LEGAL ──────────────────────────────────────────── */

details {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
summary {
  cursor: pointer;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  user-select: none;
  list-style: none;
  transition: color .2s;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "[+] "; color: var(--blue); }
details[open] summary::before { content: "[-] "; }
summary:hover { color: var(--fg); }

.legal {
  font-size: .78rem;
  line-height: 1.7;
  margin-top: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  opacity: .7;
}
.legal h3 {
  color: var(--blue);
  font-size: .75rem;
  margin: 1.5rem 0 .25rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  background: none;
  border-left: none;
  box-shadow: none;
  padding: 0;
  display: block;
  text-shadow: none;
  opacity: 1;
}
.legal h3::before { display: none; }
.legal h3::after  { display: none; }
.legal p { margin: .5rem 0; }
.legal ul { margin: .5rem 0; }
.legal li::before { content: "– "; color: var(--dim); font-weight: 400; font-size: 1em; text-shadow: none; }
.legal a { font-size: inherit; }
.legal table td, .legal table th { font-size: .72rem; }

/* ── RESPONSIVE ─────────────────────────────────────── */

@media (max-width: 30rem) {
  body { padding-left: 1rem; padding-right: 1rem; }
  header { padding: 1.25rem 1rem 0; }
  header h1 { font-size: 1.3rem; letter-spacing: .18em; }
  dl { grid-template-columns: 1fr; }
  dt { margin-top: .5rem; }
  footer::after { display: none; }
}