:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #111722;
  --line: #2a3442;
  --text: #e7edf5;
  --muted: #9aa7b8;
  --cyan: #79d9ff;
  --blue: #8fb7ff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, sans-serif; }
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(52rem, 100%); padding: clamp(22px, 5vw, 44px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 16px 64px #0006; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font: 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
h1 { margin: 0 0 24px; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; }
.profile { margin: 0 0 28px; overflow-x: auto; color: #d9e3ee; font: .9rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.terminal-link { display: inline-block; color: var(--cyan); text-underline-offset: 4px; }
.terminal-page { overflow: hidden; }
.terminal { min-height: 100vh; max-height: 100vh; overflow-y: auto; padding: clamp(18px, 4vw, 32px); color: #d8e0e8; background: #050608; font: 15px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: text; }
.transcript { margin: 0; min-height: calc(100vh - 36px); overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; }
.input-row { display: flex; align-items: baseline; min-height: 1.45em; }
.input-prompt { flex: 0 0 auto; margin-right: .6em; color: var(--cyan); }
.command-input { min-width: 0; flex: 1 1 auto; padding: 0; border: 0; outline: 0; background: transparent; color: #d8e0e8; font: inherit; caret-color: #d8e0e8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.terminal.shake { animation: shake .18s linear 2; }
.impact { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; background: #fff0; transition: opacity .12s ease; }
.impact.active { opacity: 1; animation: flash .62s ease-out forwards; }
.bullet-hole { position: absolute; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #555 0 8%, #090909 30% 62%, #000 63% 100%); box-shadow: 0 0 0 3px #222, 0 0 18px 6px #000; }
.cracks { position: absolute; width: min(86vw, 720px); height: min(86vw, 720px); margin: min(-43vw, -360px); overflow: visible; transform: scale(.2); opacity: .1; transform-origin: center; }
.impact.active .cracks { animation: crack .52s cubic-bezier(.12,.72,.2,1) .04s forwards; }
.cracks path { fill: none; stroke: #c7d0d8; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #fff8); }
@keyframes crack { to { transform: scale(1); opacity: .82; } }
@keyframes flash { 0%, 12% { background: #fff4; } 35% { background: #fff0; } 100% { background: #fff0; opacity: 0; } }
@keyframes shake { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }
@media (prefers-reduced-motion: reduce) { .impact.active { animation: none; opacity: 1; } .impact.active .cracks { animation: none; transform: scale(1); opacity: .82; } .terminal.shake { animation: none; } }
@media (max-width: 600px) { .terminal { font-size: 13px; } .profile { font-size: .78rem; } }