:root { color-scheme: dark; --green:#9df59d; --dim:#779377; --panel:#111a15; --line:#2b4532; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:#07100a; color:#d8eadb; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,255,150,.025) 3px 4px); }
header { height:54px; padding:0 clamp(16px,4vw,44px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#0d1710; }
.lamp { display:inline-block; width:9px; height:9px; margin-right:10px; border-radius:50%; background:#ffcc66; box-shadow:0 0 10px #ffcc66; }
#status { color:#c6a96a; font-size:13px; } #status.online { color:var(--green); }
main { width:min(1000px,100%); margin:auto; padding:24px clamp(14px,3vw,30px); }
#terminal { height:calc(100vh - 180px); min-height:380px; margin:0 0 14px; padding:24px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:10px; background:#050b07; color:var(--green); font:16px/1.48 ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:inset 0 0 40px rgba(0,0,0,.6); }
.command-row,.join-row { display:flex; align-items:center; gap:10px; }
.command-row span { color:var(--green); font-weight:bold; }
input { min-width:0; flex:1; padding:12px; border:1px solid var(--line); border-radius:6px; background:#0b140e; color:#fff; font:inherit; }
input:focus { outline:2px solid #4d8a5c; outline-offset:1px; }
button { padding:11px 16px; border:1px solid #588a63; border-radius:6px; background:#17351e; color:#e7ffe9; cursor:pointer; font:inherit; }
button:hover { background:#214a2a; }
.disabled { opacity:.4; pointer-events:none; }
.hidden { display:none !important; }
.join-panel,.links { margin-bottom:14px; padding:16px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.join-panel label,.links strong { display:block; margin-bottom:10px; color:#fff; }
.links div { display:flex; gap:8px; margin:8px 0; }.links small { color:var(--dim); }
.links .revoke { display:block; margin-top:14px; border-color:#815656; background:#351717; }
.landing { display:grid; place-items:center; padding:20px; }
.card { max-width:560px; padding:44px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 60px #0008; }
.card h1 { margin:.15em 0; color:var(--green); font-size:clamp(40px,9vw,72px); }.eyebrow { color:#d2b36d; text-transform:uppercase; letter-spacing:.15em; }.muted { color:var(--dim); }
@media(max-width:600px){ #terminal{height:calc(100vh - 210px);padding:15px;font-size:14px}.links div{align-items:stretch;flex-direction:column}.join-row{align-items:stretch;flex-direction:column}.card{padding:28px} }