@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Special+Elite&display=swap');
:root{--bg:#030506;--cyan:#3FE0FF;--dim:#1b6f80;--white:#F2F4F5;--red:#8B0F14;--copper:#B87333}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--cyan);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;min-height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:20px 16px 28px;font-size:14px;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:6;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%)}
.stamp{font-size:11px;letter-spacing:.08em;color:var(--dim);display:grid;gap:2px;max-width:560px;width:100%;margin:0 auto}
.stamp b{color:var(--cyan);font-weight:600}
.stamp .hi{color:var(--white)}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:560px;width:100%;margin:0 auto;gap:22px;padding:28px 0}
.ring{width:132px;height:132px;opacity:.9;filter:drop-shadow(0 0 10px rgba(63,224,255,.35));animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.prompt{width:100%;text-align:left;font-size:13px;color:var(--white);min-height:3.2em;white-space:pre-wrap}
form{width:100%;display:flex;gap:8px}
input{flex:1;min-width:0;background:transparent;border:1px solid var(--dim);color:var(--cyan);font:inherit;font-size:16px;padding:12px;letter-spacing:.18em;text-transform:uppercase;border-radius:0;outline:none;caret-color:var(--cyan)}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 18px rgba(63,224,255,.18)}
button{background:var(--cyan);color:#001015;border:0;font:inherit;font-weight:600;font-size:13px;padding:0 16px;letter-spacing:.1em;cursor:pointer;border-radius:0}
button:disabled{opacity:.45;cursor:wait}
.out{width:100%;min-height:2.6em;font-size:12px;letter-spacing:.06em;white-space:pre-wrap}
.out.err{color:var(--red);text-shadow:0 0 6px rgba(139,15,20,.6)}
.shake{animation:shake .32s linear}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cursor::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
footer{max-width:560px;width:100%;margin:0 auto;font-size:10px;line-height:1.6;color:#4a5a60;border-top:1px solid #0f2328;padding-top:12px}
footer a{color:#6f8a92}
/* node pages */
.node{justify-content:flex-start}
.node h1{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--white);width:100%}
.node figure{width:100%}
.node img{width:100%;height:auto;display:block;border:1px solid #0f2328}
.node figcaption{font-size:10px;color:var(--dim);margin-top:6px;letter-spacing:.06em}
.tx{width:100%;font-size:12px;color:var(--dim);border-left:2px solid var(--dim);padding:6px 0 6px 12px;white-space:pre-wrap}
.tx .r{color:#5c6b70}
.voice{width:100%;font-size:15px;color:var(--white);white-space:pre-wrap;line-height:1.9}
.back{font-size:11px;color:var(--dim);text-decoration:none;letter-spacing:.1em;align-self:flex-start}
.copper{font-family:'Special Elite',monospace;color:var(--copper)}