:root { color-scheme: dark; font-family: "Cascadia Code", Consolas, "Courier New", monospace; color: #b0f9bc; background: #030805; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 50% 20%, #0b2315 0, transparent 65%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #3aff7210 3px 4px); opacity: .25; }
.matrix { position: fixed; inset: 0; overflow: hidden; pointer-events: none; opacity: .045; font-size: clamp(25px, 7vw, 90px); line-height: 2.3; letter-spacing: .5em; word-break: break-all; }
.workspace { position: relative; width: min(100% - 40px, 860px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
nav { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 28px; font-size: 11px; letter-spacing: .09em; color: #719e7c; }
a { color: #9befad; text-underline-offset: 5px; }
nav a { padding: 12px 0; }
.terminal { border: 1px solid #336e43; background: #040d08f5; box-shadow: 0 0 60px #43ff7010; border-radius: 10px; overflow: hidden; }
.titlebar { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #102016; padding: 15px 22px; border-bottom: 1px solid #284e33; font-size: 12px; color: #97bb9f; }
.lights { letter-spacing: 4px; color: #53845e; }
.terminal-body { padding: 30px 38px; }
.command { font-size: 12px; color: #d2fddd; margin: 0 0 30px; overflow-wrap: anywhere; }
.command span { color: #69bc7c; }
.eyebrow { font-size: 10px; letter-spacing: .17em; color: #7bac87; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 6vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.06em; margin: 0; color: #a7ffb7; text-shadow: 0 0 24px #44ff6526; }
.cursor { animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.intro { color: #91b79b; font-size: 13px; line-height: 1.8; margin: 18px 0 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label { display: block; min-width: 0; font-size: 10px; letter-spacing: .07em; color: #a2d7b0; margin-bottom: 20px; }
input, textarea { width: 100%; margin-top: 10px; padding: 13px 14px; border: 1px solid #30503a; border-radius: 3px; background: #020704; color: #c0ffd0; font: 16px/1.5 inherit; font-family: inherit; font-size: 16px; line-height: 1.5; caret-color: #83ff9e; }
input { min-height: 48px; }
textarea { resize: vertical; min-height: 152px; max-height: 450px; }
input::placeholder, textarea::placeholder { color: #73927c; opacity: 1; font-size: 12px; }
:focus-visible { outline: 2px solid #95ffa9; outline-offset: 4px; }
input:focus, textarea:focus { border-color: #85e79b; }
.message-meta { display: flex; justify-content: space-between; gap: 12px; margin: -12px 0 24px; font-size: 10px; color: #83aa8e; }
.submit-row { display: flex; align-items: center; gap: 24px; }
button { min-height: 50px; border: 1px solid #91ffab; border-radius: 3px; padding: 14px 22px; background: #97ffaf; color: #07230e; font: bold 12px/1.5 inherit; font-family: inherit; font-weight: bold; cursor: pointer; }
button:hover { background: #bdffcc; }
button:disabled { opacity: .6; cursor: wait; }
button span { margin-left: 24px; }
.privacy-note { font-size: 10px; line-height: 1.8; color: #87a891; }
.status { border-top: 1px dashed #284b34; padding-top: 18px; margin: 25px 0 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.status[data-state="error"] { color: #ffbc91; }
.status[data-state="success"] { color: #b4ffc6; }
.terminal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 22px; border-top: 1px solid #25422e; background: #0a150e; color: #80a78c; font-size: 9px; letter-spacing: .05em; }
.credits { text-align: center; font-size: 10px; line-height: 1.8; margin-top: 25px; color: #789982; }
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 580px) { .workspace { width: calc(100% - 24px); padding-top: max(12px, env(safe-area-inset-top)); } nav { margin-bottom: 14px; } nav > span { display: none; } .terminal-body { padding: 24px 20px; } .titlebar { padding: 13px; font-size: 10px; } .field-row { grid-template-columns: 1fr; gap: 0; } .submit-row { align-items: stretch; flex-direction: column; gap: 12px; } .terminal-footer { font-size: 8px; padding: 12px; } .command { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }