/* Basis-Look aus mockups/a2-terminal-glitch.html */
:root{
  --bg:#030803; --fg:#5dff8a; --dim:#2f8f4e; --hot:#e2ffe9; --warn:#ffcf5c;
  --m:#ff2a6d; --c:#2de2ff;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:#000}
body{
  background:var(--bg) radial-gradient(ellipse at 50% 40%,#0a1f0f 0%,var(--bg) 70%) fixed;
  color:var(--fg); font:16px/1.6 var(--mono);
  text-shadow:0 0 5px rgba(93,255,138,.5),0 0 18px rgba(93,255,138,.15);
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:20;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:21;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);
}
.roll{
  position:fixed;left:0;right:0;top:-30vh;height:30vh;pointer-events:none;z-index:19;
  background:linear-gradient(to bottom,transparent,rgba(93,255,138,.05),transparent);
  animation:roll 8s linear infinite;
}
@keyframes roll{to{transform:translateY(160vh)}}

.screen{min-height:100vh;min-height:100svh;transform-origin:50% 50vh;animation:flicker 4s steps(1) infinite}
@keyframes flicker{0%{opacity:.96}7%{opacity:.88}8%{opacity:.97}40%{opacity:.93}41%{opacity:1}77%{opacity:.95}}
.screen.pon{animation:pon .7s cubic-bezier(.2,.8,.2,1) both,flicker 4s steps(1) infinite}
@keyframes pon{0%{transform:scale(.5,.004);filter:brightness(6)}45%{transform:scale(1,.004);filter:brightness(4)}100%{transform:none;filter:none}}
.screen.glitch{animation:gl .32s steps(1) 1,flicker 4s steps(1) infinite}
@keyframes gl{
  0%{transform:translate(4px,0) skewX(5deg);text-shadow:-3px 0 var(--m),3px 0 var(--c)}
  25%{transform:translate(-6px,1px);filter:hue-rotate(60deg) saturate(1.6)}
  50%{transform:translate(2px,-2px) skewX(-4deg);text-shadow:3px 0 var(--m),-3px 0 var(--c)}
  75%{transform:translate(-2px,0);filter:invert(.08)}
  100%{transform:none;filter:none}
}

.gt{position:relative;display:inline-block}
.gt::before,.gt::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;text-shadow:none;mix-blend-mode:screen;white-space:pre-wrap;
}
.gt::before{color:var(--m);transform:translateX(-3px);clip-path:inset(0 0 100% 0);animation:gs1 3.3s steps(1) infinite}
.gt::after{color:var(--c);transform:translateX(3px);clip-path:inset(0 0 100% 0);animation:gs2 4.7s steps(1) infinite}
@keyframes gs1{0%,84%{clip-path:inset(0 0 100% 0)}85%{clip-path:inset(15% 0 55% 0)}88%{clip-path:inset(62% 0 8% 0);transform:translateX(4px)}91%{clip-path:inset(0 0 100% 0)}}
@keyframes gs2{0%,70%{clip-path:inset(0 0 100% 0)}71%{clip-path:inset(40% 0 30% 0)}73%{clip-path:inset(5% 0 80% 0);transform:translateX(-5px)}76%{clip-path:inset(0 0 100% 0)}}

.bar{
  position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;gap:12px;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  background:rgba(3,8,3,.92);border-bottom:1px dashed var(--dim);font-size:13px;color:var(--dim);
}
.bar b{color:var(--fg);font-weight:normal}

main{max-width:720px;margin:0 auto;padding:20px 16px calc(48px + env(safe-area-inset-bottom))}
.ln{white-space:pre-wrap;word-break:break-word;min-height:1.6em}
.dim{color:var(--dim)}
.hot{color:var(--hot);text-shadow:0 0 8px rgba(226,255,233,.7)}
.big{font-size:clamp(22px,7vw,34px);line-height:1.25;margin:6px 0 4px}
.warn{color:var(--warn);text-shadow:0 0 6px rgba(255,207,92,.5)}
.err{color:var(--m);text-shadow:0 0 6px rgba(255,42,109,.55)}
.cur::after{content:"\2588";margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.js .ln.wait{visibility:hidden}

a{color:var(--hot)}
a:focus-visible{outline:1px dashed var(--fg);outline-offset:3px}

@media (min-width:768px){
  body{font-size:18px}
  main{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .roll,.screen,.cur::after,.gt::before,.gt::after{animation:none!important}
}