@font-face { font-family: "Maple Mono"; src: url("/fonts/maple-mono/maple-mono-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM VGA"; src: url("/fonts/ibm-vga-8x16/WebPlus_IBM_VGA_8x16.woff") format("woff"); font-display: swap; }

:root { color-scheme: dark; --bg:#0c0d10; --panel:#14151a; --soft:#1c1d23; --line:rgba(243,238,230,.17); --text:#f3eee6; --muted:#b3aba0; --accent:#a81f2d; --bright:#d95b63; --green:#96d9ad; font-family:"Maple Mono",ui-monospace,monospace; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--text); background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 18%),radial-gradient(circle at top left,rgba(168,31,45,.15),transparent 28%),var(--bg); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/2.5rem 2.5rem,linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/2.5rem 2.5rem,repeating-linear-gradient(0deg,rgba(243,238,230,.018) 0 1px,transparent 1px 5px); }
button,input { font:inherit; }
button { cursor:pointer; border:1px solid rgba(217,91,99,.72); color:var(--text); background:var(--accent); padding:.75rem 1rem; }
button:hover:not(:disabled) { background:var(--bright); }
button:disabled { cursor:not-allowed; opacity:.48; }
input { width:100%; color:var(--text); background:#090a0d; border:1px solid var(--line); padding:.8rem .9rem; }
input:focus { outline:1px solid var(--bright); border-color:var(--bright); }
code { color:#d9c6a3; font:inherit; }
.landing { width:min(100% - 2rem,44rem); min-height:100vh; margin:auto; padding:clamp(4rem,14vh,9rem) 0 3rem; }
.signal { margin:0 0:.7rem; color:var(--bright); font-family:"IBM VGA","Maple Mono",monospace; font-size:.86rem; letter-spacing:.12em; }
h1 { margin:0; max-width:15ch; font-size:clamp(2.3rem,8vw,5rem); line-height:.95; letter-spacing:-.08em; }
.landing h1 { font-family:"IBM VGA","Maple Mono",monospace; line-height:1.12; letter-spacing:0; }
h1 span { color:var(--muted); }
.intro { max-width:39rem; color:var(--muted); line-height:1.7; }
.enter-card { display:grid; gap:.65rem; margin:2.5rem 0 1rem; padding:1.3rem; border:1px solid var(--line); background:rgba(20,21,26,.9); box-shadow:0 18px 60px rgba(0,0,0,.22); }
.enter-card label { font-size:.85rem; color:var(--muted); }
.enter-card button { justify-self:start; margin-top:.4rem; }
.hint,.away,.native { color:var(--muted); font-size:.82rem; line-height:1.7; }
.away { max-width:49rem; padding-left:.9rem; border-left:2px solid var(--accent); }
.native { margin-top:2.5rem; }
.client { display:grid; grid-template-rows:auto 1fr auto; height:100vh; max-width:85rem; margin:auto; background:rgba(12,13,16,.9); border-inline:1px solid var(--line); }
.client-header { display:flex; align-items:center; gap:1rem; min-height:3.6rem; padding:.55rem 1rem; border-bottom:1px solid var(--line); background:var(--panel); }
.client-header div { display:grid; gap:.14rem; }
.client-header strong { font-size:1.05rem; }
.client-header .signal { margin:0; font-size:.64rem; }
#connection-state { margin-left:auto; color:var(--muted); font-size:.75rem; }
#connection-state.online { color:var(--green); }
#leave { padding:.4rem .6rem; font-size:.75rem; background:transparent; border-color:var(--line); }
.messages { overflow:auto; padding:1rem; scroll-behavior:smooth; }
.message { display:grid; grid-template-columns:minmax(7rem,auto) 1fr; gap:.2rem 1rem; max-width:100%; padding:.18rem 0; line-height:1.55; }
.message time { color:#8d8479; grid-column:1; text-align:right; font-size:.75rem; padding-top:.2rem; }
.message .sender { color:#c8b8d4; overflow-wrap:anywhere; }
.message .body { grid-column:2; overflow-wrap:anywhere; white-space:pre-wrap; }
.notice { margin:.55rem 0; color:var(--muted); font-size:.82rem; }
.notice.error { color:var(--bright); }
.motd { margin:0 0 1rem; padding:1rem; border:1px solid rgba(217,91,99,.42); background:rgba(168,31,45,.08); color:var(--muted); white-space:pre-wrap; overflow:auto; font-size:.75rem; line-height:1.45; }
.message-form { display:grid; grid-template-columns:1fr auto; gap:.5rem; padding:.75rem 1rem; border-top:1px solid var(--line); background:var(--panel); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:600px) { .landing { width:min(100% - 1.25rem,44rem); } .message { grid-template-columns:1fr; gap:0; } .message time { display:none; } .message .body { grid-column:1; padding-left:.75rem; } .client-header { padding-inline:.7rem; } .messages { padding:.75rem; } .message-form { padding:.65rem; } }