.page{max-width:980px;margin:0 auto;padding:0 16px}

.topbar{
  background:linear-gradient(#1c1c1c,#0a0a0a);
  border-bottom:1px solid #2b0a0a;
  box-shadow:0 1px 0 #000;
  font-size:11px;color:var(--ash);
}
.topbar .page{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:10px;flex-wrap:wrap}
.topbar b{color:var(--blood2);font-weight:normal}
.prompt{direction:ltr;font-family:"Courier New",monospace}
.blink{animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.lang{display:inline-flex;border:1px solid #000;border-radius:3px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.07)}
.lang a{
  display:block;padding:3px 12px;font-size:11px;font-weight:bold;color:#9a938b;
  background:linear-gradient(#333 0%,#1d1d1d 50%,#111 51%,#1a1a1a 100%);
  text-shadow:0 -1px 0 #000;
}
.lang a + a{border-inline-start:1px solid #000}
.lang a:hover{color:#fff;text-decoration:none}
.lang a.on{background:linear-gradient(#c41a1f 0%,#8c0a0e 50%,#6a0508 51%,#850a0d 100%);color:#fff}

.hero{text-align:center;padding:26px 0 10px;overflow:hidden}
pre.art{
  display:inline-block;
  direction:ltr;text-align:left;unicode-bidi:isolate;
  margin:0;
  font-family:"Courier New",Consolas,monospace;
  font-weight:bold;
  font-size:clamp(6px,2.1vw,13px);
  line-height:1.15;
  white-space:pre;
}
pre.skull{
  color:var(--bone);
  text-shadow:0 0 2px #fff, 0 0 10px rgba(209,20,26,.75), 0 0 26px rgba(158,11,15,.6);
  animation:breathe 4s ease-in-out infinite;
}
pre.name{
  margin-top:4px;
  color:#e3171d;
  text-shadow:0 0 1px #ff6a60, 0 0 8px rgba(209,20,26,.55), 0 2px 0 #300;
}
@keyframes breathe{
  0%,100%{text-shadow:0 0 2px #fff,0 0 10px rgba(209,20,26,.7),0 0 26px rgba(158,11,15,.5)}
  50%{text-shadow:0 0 2px #fff,0 0 14px rgba(255,40,40,.9),0 0 38px rgba(158,11,15,.8)}
}
.sub{margin:14px 0 0;color:var(--ash);font-size:12px;letter-spacing:.3px}
.sub em{font-style:normal;color:var(--bone)}

nav ul{list-style:none;margin:0 auto;padding:0;max-width:980px;display:flex;flex-wrap:wrap;justify-content:center}

nav.menu{
  margin:22px 0 0;
  background:linear-gradient(#2a2a2a 0%,#151515 50%,#0a0a0a 51%,#121212 100%);
  border-top:1px solid #3a3a3a;border-bottom:1px solid #000;
  box-shadow:0 2px 6px rgba(0,0,0,.8);
}
nav.menu li a{
  display:block;padding:10px 22px;color:#bdb6ad;font-size:12.5px;font-weight:bold;
  border-left:1px solid #000;border-right:1px solid #2c2c2c;
  text-shadow:0 -1px 0 #000;
}
nav.menu li a:hover,nav.menu li a.on{
  text-decoration:none;color:#fff;
  background:linear-gradient(#7a0a0e 0%,#5a0609 50%,#3d0305 51%,#560709 100%);
}

nav.subnav{
  background:#0b0606;border-bottom:1px solid #2a0b0b;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.9);
}
nav.subnav li a{display:block;padding:7px 13px;font-size:12px;color:#8f8780}
nav.subnav li a:hover{color:var(--bone);text-decoration:none}
nav.subnav li a.on{color:#ff5a4f}
nav.subnav li a.on::before{content:"\25B8 ";color:var(--blood2)}

main{padding:30px 0 10px}
.tool{display:none}
.tool.on{display:block}

.tool h2{
  margin:0 0 4px;font-size:20px;font-family:Georgia,"Times New Roman",serif;
  color:var(--bone);font-weight:normal;letter-spacing:.3px;
  text-shadow:0 0 12px rgba(209,20,26,.35);
}
.tool h2 small{font-family:Tahoma,sans-serif;font-size:11px;font-weight:normal;color:var(--blood2);margin-inline-start:8px;vertical-align:middle}
.tool .lead{margin:0 0 18px;color:var(--ash);max-width:680px}
.sep{height:1px;margin:0 0 18px;background:linear-gradient(90deg,transparent,var(--blood) 30%,var(--blood) 70%,transparent);opacity:.7}
h3{font-size:13px;color:var(--bone);margin:22px 0 4px;font-weight:bold}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.cols{grid-template-columns:1fr}}

footer{
  margin-top:40px;padding:18px 0 30px;text-align:center;
  border-top:1px solid #1a0a0a;color:#5e5853;font-size:11px;
}
footer .badges{margin-top:10px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;direction:ltr}
footer .badges span{
  font-family:Verdana,sans-serif;font-size:9px;font-weight:bold;
  border:1px solid #333;background:#0b0b0b;color:#777;padding:1px 6px;
}
footer .badges span b{color:var(--blood2)}

.topbar .tb{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .howto{color:#a59e95}
.topbar .howto:hover{color:#fff}
button.panic{padding:2px 10px;font-size:11px;background:linear-gradient(#3a0a0c 0%,#260608 50%,#170304 51%,#220506 100%);color:#ff8a80;border-color:#000}
button.panic:hover{background:linear-gradient(#7a0a0e 0%,#5a0609 50%,#3d0305 51%,#560709 100%);color:#fff}

.hero{position:relative}
.hero .page{position:relative;z-index:1}
#rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.22;pointer-events:none}
pre.skull{cursor:default;user-select:none}

.findbar{background:#070404;border-bottom:1px solid #1d0909}
.findbar .page{position:relative;padding-top:8px;padding-bottom:8px;display:flex;justify-content:flex-end}
#find{max-width:280px;font-family:Tahoma,sans-serif;font-size:12px;padding:5px 10px}
#findList{position:absolute;top:100%;inset-inline-end:16px;width:280px;max-width:calc(100% - 32px);margin:0;padding:0;list-style:none;
  background:#0b0707;border:1px solid #3b1a1a;box-shadow:0 6px 18px rgba(0,0,0,.9);z-index:20}
#findList a{display:block;padding:7px 10px;color:#cfc9c0;border-bottom:1px solid #1a0e0e}
#findList a small{color:#6d6762;font-size:10px;margin-inline-start:6px}
#findList a.sel,#findList a:hover{background:#3d0305;color:#fff;text-decoration:none}
#findList .none{padding:8px 10px;color:#6d6762}

.tool h2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tool h2 button.fs{margin-inline-start:auto;padding:0 8px;font-size:13px;line-height:20px;background:transparent;border:1px solid #2a1414;box-shadow:none;color:#8d8682}
.tool h2 button.fs:hover{color:#fff;border-color:var(--blood2)}

body.focus header,body.focus footer,body.focus .lead,body.focus .sep{display:none}
body.focus main{max-width:1280px;padding-top:16px}

#boot{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
#boot pre{margin:0;color:#e3171d;font:bold 14px/1.6 "Courier New",monospace;text-shadow:0 0 8px rgba(209,20,26,.6);direction:ltr;text-align:left;min-width:300px}
#boot.out{opacity:0}

#toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);opacity:0;z-index:90;pointer-events:none;
  background:#120707;border:1px solid #5a0609;color:#f0e7dc;padding:8px 16px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.9);transition:all .25s}
#toast.on{opacity:1;transform:translate(-50%,0)}

footer .meta{margin-top:6px;color:#4d4844}
footer .meta a{color:#8d8682}

@media(max-width:600px){
  nav.menu li a{padding:9px 12px}
  nav.subnav li a{padding:6px 9px}
  .findbar .page{justify-content:stretch}
  #find{max-width:none}
  #findList{width:auto;inset-inline-start:16px}
  table.kv td:first-child{width:96px}
  .big{font-size:30px;letter-spacing:3px}
  .topbar .prompt{display:none}
}

.doc{max-width:760px;padding-top:34px;font-size:14px}
.doc h1{font:normal 26px Georgia,"Times New Roman",serif;color:var(--bone);margin:0 0 14px;text-shadow:0 0 14px rgba(209,20,26,.4)}
.doc h2{font:bold 15px Tahoma,sans-serif;color:#ff5a4f;margin:30px 0 8px;padding-bottom:4px;border-bottom:1px solid #2a0b0b}
.doc p,.doc li,.doc dd{color:#bdb6ad}
.doc ol,.doc ul{padding-inline-start:22px}
.doc li{margin-bottom:6px}
.doc .log dt{color:var(--bone);font-weight:bold;margin-top:12px}
.doc .log dd{margin:2px 0 0;margin-inline-start:16px}
[dir=rtl] .doc h1{font-family:Tahoma,sans-serif;font-weight:bold;font-size:22px}