:root {
  --ink: #f0f5ee;
  --muted: #8c9a8d;
  --green: #9dfc9d;
  --green-dim: #5ca86b;
  --orange: #f2a65a;
  --panel: rgba(10, 20, 17, 0.84);
  --line: rgba(157, 252, 157, 0.15);
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050a08; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 28px clamp(20px, 5vw, 76px) 24px;
  background: linear-gradient(rgba(157,252,157,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(157,252,157,.025) 1px, transparent 1px), radial-gradient(circle at 85% 12%, rgba(65,134,76,.18), transparent 30%), #050a08;
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.site-shell::after { position: absolute; z-index: 1; inset: 0; pointer-events: none; content: ""; background: repeating-linear-gradient(0deg, transparent 0, rgba(255,255,255,.018) 1px, transparent 2px, transparent 4px); mix-blend-mode: screen; }
.ambient { position: absolute; border-radius: 50%; pointer-events: none; }
.ambient-one { width: 320px; height: 320px; top: 16%; left: -210px; background: rgba(47,139,73,.1); }
.ambient-two { width: 240px; height: 240px; right: -110px; bottom: 10%; background: rgba(191,108,42,.08); }
.site-header, .hero, .site-footer { position: relative; z-index: 2; max-width: 1220px; margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 700 12px/1.2 var(--font-mono); letter-spacing: .18em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--green); color: var(--green); font-size: 13px; letter-spacing: -.1em; }
.header-meta { display: flex; gap: 18px; align-items: center; color: var(--muted); font: 10px/1.2 var(--font-mono); letter-spacing: .12em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.header-version { color: var(--orange); }
.hero { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 150px); padding: 32px 0 40px; }
.terminal-window { width: 100%; min-width: 0; border: 1px solid rgba(157,252,157,.28); border-radius: 5px; background: var(--panel); box-shadow: 0 26px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025); backdrop-filter: blur(14px); }
.terminal-topbar, .terminal-footer { display: flex; align-items: center; min-height: 42px; padding: 0 16px; color: var(--muted); font: 10px/1 var(--font-mono); letter-spacing: .07em; }
.terminal-topbar { justify-content: space-between; border-bottom: 1px solid var(--line); }
.window-lights { display: flex; gap: 6px; }
.window-lights span { width: 8px; height: 8px; border-radius: 50%; background: #4a6e53; }
.window-lights span:nth-child(2) { background: #b68c4d; }
.window-lights span:nth-child(3) { background: #bd6556; }
.terminal-title { margin-left: 18px; color: #c5d1c5; }
.terminal-lock { color: var(--green-dim); }
.terminal-body { height: clamp(520px, 64vh, 740px); overflow-y: auto; padding: 23px 24px; font: 13px/1.78 var(--font-mono); scrollbar-color: var(--green-dim) transparent; }
.terminal-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.line-command { margin-top: 14px; color: var(--green); }
.line-output { color: #c1d1c1; }
.line-muted { color: #718073; }
.line-accent { color: var(--orange); }
.line-error { color: #f0836d; }
.terminal-input-row { display: flex; align-items: center; min-height: 29px; margin-top: 8px; color: var(--green); }
.prompt { flex: none; margin-right: 9px; }
.terminal-editor { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; min-height: 20px; }
.terminal-editor-text { min-width: 0; overflow: hidden; color: var(--ink); white-space: pre; }
.input-cursor-block { width: 7px; height: 17px; flex: 0 0 7px; margin-left: 2px; background: var(--green); animation: blink 1s step-end infinite; }
.terminal-editor input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; }
.terminal-footer { justify-content: space-between; border-top: 1px solid var(--line); color: #6f8272; font-size: 9px; }
.terminal-footer b { color: var(--green); font-weight: 400; }
.site-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; color: #58705e; font: 9px/1.4 var(--font-mono); letter-spacing: .13em; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 860px) { .site-shell { padding-inline: 18px; } .hero { min-height: auto; padding: 70px 0 58px; } .terminal-body { height: min(64vh, 520px); } }
@media (max-width: 520px) { .header-version, .terminal-lock { display: none; } .header-meta { gap: 8px; font-size: 9px; } .hero { padding-top: 54px; } .terminal-body { padding: 18px 15px; font-size: 11px; } .terminal-footer { padding-inline: 11px; font-size: 8px; } .site-footer { flex-direction: column; gap: 7px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }