:root{
  --bg:#07080b; --fg:#e6f1ff; --muted:#98a7c0; --accent:#6ee7ff; --accent2:#8b5cf6; --ok:#35e1ad; --warn:#ffd166;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
* { box-sizing:border-box }
html,body{ height:100%; }
body{
  margin:0; background:radial-gradient(1200px 800px at 70% 10%, rgba(40,60,120,0.12), transparent 60%),
  radial-gradient(900px 600px at 10% 80%, rgba(15,160,200,0.10), transparent 60%), var(--bg);
  color:var(--fg); font-family:var(--mono); display:grid; place-items:center; overflow:hidden;
}
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.08; mix-blend:screen;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation:grain 12s steps(10) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-10px,6px)} 40%{transform:translate(6px,-8px)} 60%{transform:translate(8px,4px)} 80%{transform:translate(-6px,-4px)} 100%{transform:translate(0,0)} }

.wrap{ width:min(880px, 92vw); }
.term{
  border:1px solid rgba(255,255,255,.08); background:rgba(8,10,16,.7); backdrop-filter: blur(8px);
  border-radius:18px; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}
.chrome{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.r{ background:#ff5f57 } .y{ background:#ffbd2e } .g{ background:#28c840 }
.title{ margin-left:6px; font-size:12px; color:var(--muted); letter-spacing:.08em }

.screen{ padding:28px; font-size:16px; line-height:1.6; min-height:280px; }
.dim{ color: #7f8ba8 }
.accent{ color: var(--accent) }
.ok{ color: var(--ok) }
.warn{ color: var(--warn) }
.blink{ animation:blink 1.1s steps(1,end) infinite }
@keyframes blink { 50%{opacity:0} }

.logo{ font-weight:700; letter-spacing:.18em; display:inline-block; position:relative; filter: drop-shadow(0 4px 16px rgba(110,231,255,0.18)); }
.logo::after{
  content:attr(data-glitch); position:absolute; left:0; top:0; clip-path:polygon(0 0,100% 0,100% 40%,0 40%);
  transform:translate(1px,-1px); color:var(--accent); opacity:.9; mix-blend:screen; animation:gl 2.4s infinite;
}
@keyframes gl{ 0%,100%{transform:translate(1px,-1px)} 20%{transform:translate(-1px,.5px)} 40%{transform:translate(.6px,-.8px)} 60%{transform:translate(-.4px,.2px)} 80%{transform:translate(.8px,.6px)} }

.hud{ display:flex; justify-content:space-between; gap:16px; margin-top:18px; color:var(--muted); font-size:12px }
.hud .badge{ border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:6px 10px }

.kbd{ display:inline-grid; grid-auto-flow:column; gap:6px; align-items:center; font-size:12px; color:var(--muted) }
.key{ border:1px solid rgba(255,255,255,.12); border-bottom:2px solid rgba(0,0,0,.5); background:rgba(255,255,255,.03);
  padding:2px 6px; border-radius:6px; font-size:12px }

footer{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:12px; opacity:.86 }
footer a{ color:var(--muted); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.18) }
footer a:hover{ color:var(--fg); border-bottom-color:rgba(255,255,255,.35) }

.sound{ position:fixed; top:16px; right:16px; font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center }
.sound button{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--muted); padding:4px 10px; border-radius:6px; cursor:pointer; font-family:var(--mono); font-size:11px }
.sound button:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2) }

.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); place-items:center; z-index:100 }
.card{ background:rgba(10,12,18,.95); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:32px; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.6) }
.card h2{ margin:0 0 16px; color:var(--accent); font-size:18px; letter-spacing:.12em }
.card p{ margin:0 0 20px; color:var(--fg); line-height:1.7; font-size:15px }
.close{ font-size:12px; color:var(--muted); text-align:center }

/* Content pages specific styles */
body.content-page { overflow-y: auto; }
.content-wrap{ padding:40px 20px; min-height:100vh; }
.back-link{ display:inline-block; margin-bottom:24px; font-size:13px; color:var(--muted); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.18); }
.back-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.content-header h1{ margin:0 0 8px; color:var(--accent); font-size:24px; letter-spacing:.14em; }
.content-header .subtitle{ color:var(--muted); font-size:14px; margin-bottom:32px; display:block; }

.section{ margin-bottom:48px; }
.section h2{ color:var(--fg); font-size:18px; margin:0 0 16px; letter-spacing:.08em; }
.section p{ color:var(--muted); line-height:1.8; margin:0 0 16px; }

.tx-list{ list-style:none; padding:0; margin:0; }
.tx-item{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:20px; margin-bottom:12px; }
.tx-item:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.tx-meta{ font-size:11px; color:var(--muted); margin-bottom:10px; }
.tx-text{ color:var(--fg); font-size:15px; line-height:1.7; }

.key-block{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:20px; margin-bottom:20px; font-family:var(--mono); font-size:13px; overflow-x:auto; }
.key-block pre{ margin:0; color:var(--fg); white-space:pre-wrap; word-break:break-all; }
.fingerprint{ color:var(--accent); font-family:var(--mono); font-size:13px; letter-spacing:.05em; }

.contact-method{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:20px; margin-bottom:16px; }
.contact-method h3{ margin:0 0 8px; color:var(--accent); font-size:16px; }
.contact-method .value{ color:var(--fg); font-family:var(--mono); font-size:14px; margin:8px 0; }
.contact-method .note{ color:var(--muted); font-size:12px; margin-top:8px; }