:root{
  --g2:#3d3d3d; --g3:#7d7d7d; --g4:#bfbfbf;
  --glow:rgba(255,255,255,.45);
  --wide:"Michroma","Eurostile","Arial Black",sans-serif;
  --mono:"Space Mono","Courier New",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cbcbc6}
::selection{background:#fff;color:#000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.snd{position:fixed;z-index:3;background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
#case{position:fixed;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.screen{
  position:fixed;overflow:hidden;background:#050505;
  display:flex;flex-direction:column;color:#f2f2f2;font:15px/1.5 var(--mono);
  text-shadow:0 0 1px #fff,0 0 9px var(--glow);
  box-shadow:inset 0 0 70px rgba(0,0,0,.95);
}
@media (min-width:1200px){ .screen{font-size:16px} }
#out{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 6px;scrollbar-width:thin;scrollbar-color:var(--g3) transparent}
.ln{white-space:pre-wrap;word-break:break-word;max-width:78ch;min-height:1.5em}
.ln.echo{color:var(--g3);margin-top:.9em}
.ln.dim{color:var(--g3);text-shadow:none}
.ln.err{color:#fff;font-weight:700}
.ln.err::before{content:"▲ "}
.ln.h{font:400 .78em/1.4 var(--wide);letter-spacing:.12em;text-transform:uppercase;margin-top:1.1em}
.ln.quote{border-left:2px solid #fff;padding-left:1.4ch;font-style:italic}
.ln.rule{min-height:0;height:0;border-top:1px dashed var(--g3);margin:.8em 0}
.ln.li{padding-left:2.2ch;text-indent:-2.2ch}
.ln.li::before{content:"— "}
.ln.sub{padding-left:9ch;text-indent:-2ch}
.ln.bad{color:#fff;font-weight:700}
.bhead{border-top:5px double #fff;border-bottom:5px double #fff;padding:.7em 0;margin:0 0 .9em;max-width:78ch;text-align:center}
.bhead .corp{font-weight:700;letter-spacing:.9em;margin-right:-.9em}
.bhead + .binfo{border-bottom:5px double #fff;padding-bottom:.8em;margin-bottom:1.2em;max-width:78ch}
.entry{border-top:2px solid #fff;border-bottom:2px solid #fff;padding:.6em 0;margin:.2em 0 .9em;max-width:78ch}
.entry .t{font:400 clamp(17px,2vw,26px)/1.25 var(--wide);text-transform:uppercase;margin:.25em 0}
.entry .m{color:var(--g3);text-shadow:none;font-size:.85em;letter-spacing:.06em}
.row{display:grid;grid-template-columns:5ch 11ch 1fr;gap:1.5ch;max-width:78ch}
.row .d{color:var(--g3);text-shadow:none}
@media (max-width:600px){ .row{grid-template-columns:5ch 1fr} .row .d{display:none} }
.cmd{cursor:pointer;border-bottom:1px solid #fff;padding:0 .1ch}
.cmd:hover,.cmd:focus-visible{background:#fff;color:#000;text-shadow:none;outline:none;border-color:transparent}
.screen a{color:#fff}
.screen a:hover{background:#fff;color:#000}
.redact{background:#fff;color:transparent;text-shadow:none;cursor:pointer}
.redact.open{background:transparent;color:inherit;text-shadow:inherit;outline:1px dashed var(--g3)}
.scr{color:var(--g4)}
figure.img{margin:.8em 0;max-width:min(78ch,100%);border:1px solid var(--g3);padding:6px}
figure.img.seal{max-width:300px;border-style:dashed}
figure.img.seal canvas{filter:grayscale(1) contrast(1.1)}
figure.img canvas{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.35)}
figure.img figcaption{color:var(--g3);text-shadow:none;font-size:.8em;margin-top:5px}
.comms{border:2px solid #fff;margin:.8em 0;max-width:78ch}
.comms .bar{display:flex;justify-content:space-between;background:#fff;color:#000;text-shadow:none;font:700 11px/1 var(--mono);letter-spacing:.2em;padding:6px 10px}
.comms iframe{display:block;width:100%;height:min(65vh,520px);border:0;background:#050505;filter:grayscale(1)}
.prompt{display:flex;align-items:center;padding:10px 24px 14px;border-top:1px solid var(--g2);cursor:text}
.ps1{white-space:nowrap;margin-right:1.2ch;color:var(--g3);text-shadow:none}
#cmd{flex:0 1 auto;width:1ch;min-width:1ch;max-width:100%;padding:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:max(16px,1em);caret-color:transparent;text-shadow:inherit;text-transform:uppercase}
.caret{display:inline-block;width:.62em;height:1.1em;background:#fff;box-shadow:0 0 10px var(--glow);animation:blink 1s steps(2) infinite}
.fx{position:absolute;inset:0;pointer-events:none}
.scan{background:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px)}
.vig{background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.72) 100%)}
.band{height:18%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.035),transparent);animation:band 9s linear infinite}
.screen.jolt #out{animation:jolt .18s steps(2) 1}
.nofx .fx{display:none}
.nofx .screen{text-shadow:none}
@keyframes blink{50%{opacity:0}}

/* licence (sign in) */
.eula{position:relative;border:2px solid #fff;padding:1.1em 1.3em 1.3em;margin:.4em 0 1em;max-width:78ch}
.eula .top{display:flex;gap:1em;align-items:center;border-bottom:5px double #fff;padding-bottom:.8em;margin-bottom:.9em}
.eula .top img{width:64px;height:64px;flex:none;filter:grayscale(1) contrast(1.1)}
.eula .org{font:400 .72em/1.5 var(--wide);letter-spacing:.12em;text-transform:uppercase;flex:1}
.eula .no{font-size:.75em;color:var(--g3);text-shadow:none;align-self:flex-start;white-space:nowrap}
.eula h3{font:400 .82em/1.45 var(--wide);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .8em}
.eula h4{font:700 .85em/1 var(--mono);letter-spacing:.14em;margin:1.2em 0 .5em}
.eula p{margin:0 0 .8em}
.eula .dim{color:var(--g3);text-shadow:none}
.eula .fixed{border-bottom:1px solid #fff;padding:0 .4ch;cursor:not-allowed}
.eula .live{display:inline-block;min-width:9ch;border-bottom:1px dashed #fff;padding:0 .3ch}
.eula .live:empty::before{content:"\00a0"}
.eula .row2{display:grid;grid-template-columns:1fr 1fr;gap:.2em 2ch;margin:.6em 0}
.eula .fld{display:grid;grid-template-columns:3ch auto 1fr;gap:1ch;align-items:baseline;margin:.35em 0}
.eula .fld b{background:#fff;color:#000;text-shadow:none;text-align:center;font-size:.8em}
.eula input[type=text]{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px dashed var(--g3);color:#fff;font:inherit;font-size:max(16px,1em);text-shadow:inherit;padding:.1em .2em;outline:0;text-transform:uppercase}
.eula input[type=text]:focus{border-bottom:1px solid #fff;background:rgba(255,255,255,.06)}
.eula .chk{background:none;border:0;color:inherit;font:inherit;text-shadow:inherit;cursor:pointer;padding:0 .2ch;white-space:nowrap}
.eula .chk::before{content:"[ ] "}
.eula .chk[aria-checked=true]::before{content:"[x] "}
.eula .chk:hover,.eula .chk:focus-visible{background:#fff;color:#000;text-shadow:none;outline:none}
.eula ol,.eula ul{margin:.3em 0 .8em;padding-left:3ch}
.eula li{margin:.2em 0}
.eula .decide{display:flex;gap:3ch;flex-wrap:wrap;align-items:center;justify-content:center;border-top:1px solid var(--g2);margin-top:1.2em;padding-top:1em}
.eula .send{background:#fff;color:#000;text-shadow:none;border:0;font:700 .9em/1 var(--mono);letter-spacing:.2em;padding:.7em 1.4em;cursor:pointer}
.eula .send:hover,.eula .send:focus-visible{outline:2px solid #fff;outline-offset:3px}
.eula .okmsg{margin-top:1em;padding:.6em .8em;background:#fff;color:#000;text-shadow:none;font-weight:700;text-align:center;letter-spacing:.08em;animation:blkin .4s ease-out}
.eula .foot{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;font-size:.72em;color:var(--g3);text-shadow:none;margin-top:1.2em;letter-spacing:.06em}
.eula.done input[type=text],.eula.done .chk,.eula.done .send{pointer-events:none}
.eula.done .send{display:none}
.eula .stamp{position:absolute;right:6%;bottom:9%;transform:rotate(-14deg);border:3px double #fff;padding:.4em .9em;font:400 clamp(14px,2.2vw,24px)/1.2 var(--wide);letter-spacing:.14em;text-align:center;opacity:0;animation:stampin .35s cubic-bezier(.3,1.6,.5,1) forwards;background:rgba(0,0,0,.55);pointer-events:none}
.eula .stamp small{display:block;font:.45em/1.4 var(--mono);letter-spacing:.2em}
@keyframes stampin{from{opacity:0;transform:rotate(-14deg) scale(2.2)}to{opacity:.92;transform:rotate(-14deg) scale(1)}}
@media (max-width:700px){ .eula .fld{grid-template-columns:3ch 1fr} .eula .fld input[type=text]{grid-column:1/-1} .eula{padding:.9em .8em} .eula .row2{grid-template-columns:1fr} .eula .top img{width:44px;height:44px} .eula .stamp{right:4%;bottom:12%} }

/* page critique */
.crit{position:absolute;inset:0;z-index:4;overflow-y:auto;overflow-x:hidden;background:#e6e6e2;color:#111;text-shadow:none;cursor:pointer;
  font:17px/1.6 "EB Garamond",Georgia,"Times New Roman",serif}
.crit .page{max-width:40em;margin:0 auto;padding:7% 8% 12%;transform-origin:50% 30%}
.crit.fail .page{animation:recede 22s linear forwards}
.crit.win .page{animation:unfold 1.4s cubic-bezier(.2,.7,.2,1) both}
.crit .blk{opacity:0;animation:blkin .7s ease-out forwards}
.crit .hdr{font:700 11px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid #111;padding-bottom:.6em;margin-bottom:2em;display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}
.crit p{margin:0 0 1.1em}
.crit p.big{font-size:1.55em;line-height:1.3;font-style:italic;text-align:center;margin:1.4em 0}
.crit .box{border:1px solid #111;padding:.9em 1.1em;margin:1.8em auto;max-width:26em;font:14px/1.6 var(--mono)}
.crit .stair{margin:1.6em 0}
.crit .stair div{line-height:1.9}
.crit .mirror{display:block;transform:scaleX(-1);text-align:right;font-style:italic;margin:1.6em 0}
.crit .spread{text-align:center;letter-spacing:.55em;font-weight:600;font-size:.95em;margin:2em -1em;word-spacing:.4em}
.crit .note{font:13px/1.5 var(--mono);border-top:1px solid #111;padding-top:.5em;margin:2em 0 1em;max-width:30em}
.crit .shrink{margin:1.8em 0}
.crit .aside{font-size:.8em;font-style:italic;text-align:right;transform:rotate(-2deg);opacity:.75}
.crit .ret{font:11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;text-align:center;margin-top:3em;animation:blink 1.6s steps(2) infinite}
.crit s{text-decoration-thickness:1px}
@keyframes blkin{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes recede{from{transform:none}to{transform:scale(.86) translateY(-2%)}}
@keyframes unfold{from{transform:scale(.9);filter:blur(4px);opacity:0}to{transform:none;filter:none;opacity:1}}
@media (max-width:700px){ .crit{font-size:15px} .crit .page{padding:10% 7% 18%} .crit .box{font-size:12px} }
.screen.trip #out{animation:trip 1.6s ease-in-out 1}
@keyframes trip{
  0%{filter:none;transform:none}
  12%{filter:invert(1) blur(.6px);transform:skewX(-2deg) scale(1.01)}
  20%{filter:none;transform:skewX(1.5deg)}
  38%{filter:blur(1.2px) contrast(1.6);transform:scale(.99) skewY(.6deg)}
  55%{filter:invert(1);transform:skewX(-1deg)}
  62%{filter:none;transform:none}
  80%{filter:blur(.5px);letter-spacing:.04em}
  100%{filter:none;transform:none;letter-spacing:normal}
}
@keyframes band{from{transform:translateY(-30%)}to{transform:translateY(600%)}}
@keyframes jolt{50%{transform:translateX(-3px);filter:blur(.4px)}}
@media (max-width:700px){
  .screen{font-size:13px}
  #out{padding:12px 12px 6px}
  .prompt{padding:8px 12px 10px}
  .ln.sub{padding-left:4ch}
  .bhead .corp{letter-spacing:.45em;margin-right:-.45em}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }