/* fscking.com — one dark look, four phosphors.
   Layout: the fsck output runs the full page; a tmux-style status bar sticks to the bottom. */
:root{
  --bg:#030703; --fg:#8fe39a; --hi:#4dff6a; --dim:#3c7a46; --wh:#d9f0dc;
  --sel:rgba(77,255,106,.18); --glow:rgba(77,255,106,.55);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color-scheme:dark;
}
:root[data-phosphor="amber"]{ --bg:#0a0603; --fg:#e0a84a; --hi:#ffbf2f; --dim:#7a5a25; --wh:#f6e4c2; --sel:rgba(255,191,47,.18); --glow:rgba(255,191,47,.5); }
:root[data-phosphor="white"]{ --bg:#050506; --fg:#c6ccc6; --hi:#ffffff; --dim:#6e736e; --wh:#ffffff; --sel:rgba(255,255,255,.16); --glow:rgba(255,255,255,.4); }
:root[data-phosphor="blue"]{  --bg:#000309; --fg:#63b9ff; --hi:#a6dcff; --dim:#2f5f88; --wh:#dceeff; --sel:rgba(166,220,255,.18); --glow:rgba(166,220,255,.5); }

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.45;min-height:100vh}
a{color:var(--hi);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
a:hover,a:focus-visible{background:var(--sel);outline:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible{outline:1px dashed var(--hi);outline-offset:2px}
pre{margin:0;font:inherit}
::selection{background:var(--hi);color:var(--bg)}

/* CRT, toggled with the crt button: scanlines + RGB shadow mask, a curved-glass
   vignette, a slow rolling refresh band, a faint flicker, and colour fringing on
   the text. Four fixed overlays, all pointer-events:none. */
.crt body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.2) 2px 4px),
    repeating-linear-gradient(90deg,rgba(255,0,0,.05) 0 1px,rgba(0,255,0,.03) 1px 2px,rgba(0,0,255,.05) 2px 3px)}
.crt body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 60%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.7) 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.6)}
html.crt::before{content:"";position:fixed;left:0;right:0;top:-20vh;height:20vh;pointer-events:none;z-index:5;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.07) 50%,rgba(255,255,255,0));
  animation:roll 7s linear infinite}
html.crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;background:var(--hi);opacity:0;
  animation:flicker .12s steps(2) infinite}
.crt body{text-shadow:0 0 2px var(--glow)}
.crt .logo{text-shadow:-.8px 0 rgba(255,60,60,.5),.8px 0 rgba(60,200,255,.5),0 0 6px var(--glow),0 0 18px var(--glow),0 0 40px var(--glow)}
.crt .status{text-shadow:none}
@keyframes roll{to{top:120vh}}
@keyframes flicker{0%{opacity:0}50%{opacity:.025}100%{opacity:.01}}

/* top bar: phosphor picker, crt toggle, skip/replay */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 16px;border-bottom:1px solid var(--dim);font-size:12px;letter-spacing:.02em}
.bar .lbl{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.bar .phos{display:flex;gap:2px;flex-wrap:wrap}
.bar button{padding:3px 8px;color:var(--fg);border:1px solid transparent}
.bar button:hover{color:var(--hi)}
.bar .phos button[aria-pressed="true"]{color:var(--hi);background:var(--sel);border-color:var(--dim)}
.bar .tog[aria-pressed="true"]{color:var(--bg);background:var(--hi);border-color:var(--hi)}
.bar .sp{flex:1}
.bar .hint{color:var(--dim);font-size:11px}
.bar .hint button{padding:0;color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.fsck{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 34px);max-width:110ch;margin:0 auto;padding:18px 16px 0}
#out{flex:1;padding-bottom:28px}

.dim{color:var(--dim)} .hi{color:var(--hi)}
.line{white-space:pre-wrap;word-break:break-word}
.fsck h1,.fsck h2{font:inherit;font-weight:400;margin:0}
.fsck h1{margin:0 0 8px}
.line.cmd{color:var(--wh)}
.line.pass,h2.line.pass{color:var(--wh);margin-top:14px}
.line.note{color:var(--dim)}
.line.warn{color:var(--hi);font-weight:700;margin-top:14px;text-shadow:0 0 8px var(--glow)}

.blk{margin:8px 0 4px 4ch;padding-left:2ch;border-left:1px solid var(--dim);max-width:72ch}
.blk.wide,.blk#about{max-width:none}
.blk p{margin:0 0 8px}
.blk p:last-child{margin-bottom:0}
.links{list-style:none;margin:0;padding:0}
.links li::before{content:"-> ";color:var(--dim)}

.logo{display:block;white-space:pre;overflow-x:auto;overflow-y:hidden;color:var(--hi);
  text-shadow:0 0 6px var(--glow),0 0 18px var(--glow);
  font-size:min(10px,calc((100vw - 90px)/82));line-height:1.12;margin-left:-2ch}
.logo.outro{margin-top:12px;font-size:min(11px,calc((100vw - 90px)/70))}

.cur{display:inline-block;width:.6em;height:1.1em;vertical-align:-2px;background:var(--hi);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.status{position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;margin:0 -16px;
  background:var(--hi);color:var(--bg);font-size:12px;padding:3px 10px;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px))}
.status>*{padding:0 8px;white-space:nowrap}
.status a{color:inherit;text-decoration:none}
.status a:hover,.status button:hover{background:var(--bg);color:var(--hi)}
.status .win{background:var(--bg);color:var(--hi)}
.status .sp{flex:1;padding:0}
.status u{text-decoration:underline;text-underline-offset:2px}
.status b{font-weight:700}

@media (max-width:520px){
  .blk{margin-left:1ch;padding-left:1ch}
  .logo{margin-left:-1ch;font-size:calc((100vw - 60px)/82)}
  .bar .hint{flex-basis:100%}
  .status>*{padding:0 5px}
}
@media (prefers-reduced-motion:reduce){.cur{animation:none}html.crt::before,html.crt::after{animation:none;display:none}}