:root{
  --bg-dark:#04030a;
  --red-1:#c2111f;
  --red-2:#7b0014;
  --accent-cyan:#39dbe3;
  --glow:0 0 200px rgba(255,40,40,0.12);
  --mono: "Press Start 2P", monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--mono);
  background: radial-gradient(ellipse at center, #07050a 0%, var(--bg-dark) 60%);
  color:#fff;
  overflow:hidden;
}
.app{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}

.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:0.6}

.screen{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--red-2),var(--red-1));overflow:hidden;box-shadow:var(--glow);transform-style:preserve-3d;z-index:10}

.scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0 3.2px,
    rgba(255,255,255,0.01) 3.2px 6.4px
  );
  mix-blend-mode:multiply;
  animation:scanlinesMove 5s linear infinite, scanlinesPulse 3.8s ease-in-out infinite;
  opacity:0.86;
  will-change:background-position, transform, opacity;
}
.scanlines::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0 3.2px,
    rgba(0,0,0,0.02) 3.2px 6.4px
  );
  mix-blend-mode:overlay;
  opacity:0.52;
  animation:scanlinesTilt 6s ease-in-out infinite;
  pointer-events:none;
}

.glitch-white{
  position:fixed;
  left:0;
  width:100%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.6));
  mix-blend-mode:screen;
  z-index:32;
  opacity:0;
  transition:opacity 120ms ease-out, transform 160ms ease-out;
  will-change:opacity, transform;
}

.noise{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.03' fill='white'/></svg>");mix-blend-mode:overlay;animation:noiseAnim 0.12s steps(1) infinite;opacity:0.9}

.countdown-wrap{text-align:center;transform:translateZ(60px);z-index:12;pointer-events:auto;cursor:pointer}
.countdown{color:#fff;font-size:clamp(40px,11vw,230px);line-height:0.85;letter-spacing:0;text-shadow:0 4px 0 rgba(0,0,0,0.6),0 0 24px rgba(255,40,40,0.28);-webkit-font-smoothing:antialiased;user-select:none;display:inline-block}
.cd-char{display:inline-block;will-change:transform,opacity}

.countdown.glitch{
  animation: glitchShift 260ms steps(2) both;
  text-shadow:
    -3px 0 0 rgba(57,219,227,0.95),
     3px 0 0 rgba(255,82,82,0.95),
     0 3px 0 rgba(0,0,0,0.6);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25)) saturate(1.05);
}

.subtext{margin-top:12px;font-size:clamp(10px,1.8vw,18px);color:rgba(255,255,255,0.85);text-shadow:0 1px 0 rgba(0,0,0,0.6)}

.details{position:absolute;left:4%;bottom:6%;width:min(36%,360px);background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.02));padding:12px;border-radius:6px;z-index:13;color:rgba(255,255,255,0.92);font-family:monospace;font-size:12px;backdrop-filter:blur(2px);box-shadow:0 8px 40px rgba(0,0,0,0.6)}
.details-row{margin-bottom:6px}
.details-row.small{font-size:11px;color:rgba(255,255,255,0.55)}

.console.overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) translateZ(80px);
  width: min(720px, 92%);
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(10,8,12,0.9));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px;
  z-index: 400;
  color: rgba(200,255,255,0.96);
  font-family: monospace;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 26px 80px rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  overflow: hidden;
}
.console.closed{display:none}
.console-header{height:40px;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-bottom:1px solid rgba(255,255,255,0.03);user-select:none;cursor:default}
.console-title{text-transform:uppercase;font-size:12px;color:rgba(220,255,255,0.94)}
.console-close{background:transparent;border:0;color:rgba(255,255,255,0.78);font-size:16px;cursor:pointer;padding:6px;border-radius:6px;z-index:410;}
.console-close:hover{background:rgba(255,255,255,0.02);color:#fff}
.console-body{flex:1;overflow:auto;min-height:160px;padding:10px;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));white-space:pre-wrap;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.012)}
.console-input{display:flex;align-items:center;padding-top:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.03)}
.prompt{color:var(--accent-cyan);margin-right:6px}
.console-text{flex:1;background:transparent;border:0;color:rgba(200,255,255,0.95);outline:none;font-family:monospace;font-size:14px;padding:6px}

.console.overlay.console-media-look::before,
.console.overlay.console-media-look::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 420;
}
.console.overlay.console-media-look::before {
  background-image: linear-gradient(rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.035) 50%, rgba(255,255,255,0.01) 100%);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation: oldpcFlicker 2.6s linear infinite;
}
.console.overlay.console-media-look::after {
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.32) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.04' fill='white'/></svg>");
  background-repeat: no-repeat, repeat;
  mix-blend-mode: multiply;
  opacity: 0.92;
}

.hud{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,0.6);z-index:15;backdrop-filter:blur(2px);padding:6px 10px;border-radius:6px;background:rgba(0,0,0,0.12)}
.log{position:absolute;top:6%;right:3%;width:min(28%,320px);color:rgba(255,255,255,0.55);z-index:12;font-family:monospace;font-size:11px;transform:translateZ(60px);pointer-events:none}
.log div{margin-bottom:6px}

.media-window{
  position:fixed;
  left:20px;
  top:20px;
  width:640px;
  height:420px;
  background:linear-gradient(180deg, rgba(0,0,0,0.88), rgba(10,8,12,0.72));
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 60px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.35);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  z-index:220;
  transition:box-shadow .14s ease, transform .12s ease;
  backdrop-filter: blur(3px);
  color: #e8ffff;
  font-family: monospace;
}
.media-window.focused{
  box-shadow: 0 26px 110px rgba(0,0,0,0.75), 0 6px 26px rgba(0,0,0,0.5);
  transform: translateZ(20px);
}
.media-header{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-bottom:1px solid rgba(255,255,255,0.02);
  cursor:grab;
  user-select:none;
  z-index:40;
}
.media-header:active{ cursor:grabbing; }
.media-title{ font-size:12px; color:rgba(220,255,255,0.9); letter-spacing:0.6px; }
.media-controls{ display:flex; gap:8px; align-items:center; }
.mw-btn{
  background:transparent;
  border:0;
  color:rgba(200,255,255,0.88);
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:6px;
  font-size:13px;
}
.mw-btn:hover{ background:rgba(255,255,255,0.02); }
.media-content{
  flex:1;
  position:relative;
  min-height:120px;
  background: #0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.media-img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  user-select:none;
  -webkit-user-drag: none;
  image-rendering: auto;
  transition: filter .12s linear, transform .12s linear;
  pointer-events: none;
}
.media-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(200,255,255,0.95);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04));
  padding:12px;
  text-align:center;
  z-index:35;
}
.media-resizer{
  position:absolute;
  right:6px;
  bottom:6px;
  width:16px;
  height:16px;
  cursor:nwse-resize;
  z-index:45;
  border-radius:3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

.media-window.oldpc .media-img{
  filter: grayscale(.05) contrast(0.95) brightness(0.94) saturate(0.85) hue-rotate(-10deg);
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}
.media-window.oldpc::after,
.media-window.oldpc::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.media-window.oldpc::before{
  background-image:
    linear-gradient(rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.03) 50%, rgba(255,255,255,0.01) 100%);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity: 0.65;
  animation: oldpcFlicker 2.6s linear infinite;
  transform: translateZ(0);
}
.media-window.oldpc::after{
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.36) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06' fill='white'/></svg>");
  background-repeat: no-repeat, repeat;
  background-size: cover, 80%;
  mix-blend-mode: multiply;
  opacity: 0.9;
  transform: translateZ(0);
  transition: opacity .18s linear;
}
.media-window.oldpc .media-content::before{
  content: '';
  position: absolute;
  inset: 2px;
  pointer-events: none;
  z-index: 32;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.01), rgba(0,0,0,0));
  mix-blend-mode: screen;
  opacity: 0.28;
  filter: blur(0.6px) saturate(1.05);
}

@keyframes scanlinesMove{0%{background-position:0 0; transform:translateY(0)}50%{background-position:0 60%; transform:translateY(-6px)}100%{background-position:0 120%; transform:translateY(0)}}
@keyframes scanlinesTilt{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(3px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
@keyframes scanlinesPulse{0%{opacity:0.86}50%{opacity:0.9}100%{opacity:0.86}}
@keyframes noiseAnim{0%{opacity:0.02}50%{opacity:0.06}100%{opacity:0.02}}
@keyframes glitchShift{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes oldpcFlicker{0%{ opacity:0.62; transform: translateY(0);}20%{ opacity:0.7; transform: translateY(-0.4px);}40%{ opacity:0.58; transform: translateY(0.6px);}60%{ opacity:0.66; transform: translateY(-0.2px);}80%{ opacity:0.6; transform: translateY(0.3px);}100%{ opacity:0.62; transform: translateY(0);}}

.shutting-down .countdown {
  animation: crtPowerOff 0.9s cubic-bezier(.2,.0,.1,1) both;
  z-index: 60;
}
.shutting-down .scanlines { opacity: 1 !important; filter: contrast(1.2) saturate(.9); }
body.system-off .countdown { opacity: 0 !important; pointer-events: none; }
body.booting .countdown { animation: crtBoot 0.56s ease-out both; }

@keyframes crtPowerOff {
  0% { opacity: 1; transform-origin: 50% 50%; transform: translateY(0) scaleY(1) skewX(0deg); filter: none; text-shadow: 0 3px 0 rgba(0,0,0,0.6), -6px 0 0 rgba(57,219,227,0.9), 6px 0 0 rgba(255,82,82,0.9); }
  12% { filter: contrast(1.6) brightness(1.1); transform: translateY(-2px) scaleY(0.98) skewX(-0.4deg); }
  34% { filter: contrast(0.6) brightness(1.4); transform: translateY(0) scaleY(0.5) skewX(0.6deg); }
  60% { opacity: 0.9; transform: translateY(0) scaleY(0.08) skewX(1deg); filter: blur(0.6px) saturate(0.6); }
  85% { opacity: 0.5; transform: translateY(0) scaleY(0.02) skewX(2deg); filter: blur(1.2px) saturate(0.2); }
  100% { opacity: 0; transform: translateY(0) scaleY(0.01) skewX(3deg); filter: blur(1.6px) saturate(0); }
}
@keyframes crtBoot {
  0% { opacity: 0; transform: scaleY(0.02); filter: blur(1.6px) saturate(0); }
  60% { opacity: 1; transform: scaleY(1.04); filter: blur(0.2px) saturate(1.05) contrast(1.06); }
  100% { opacity: 1; transform: scaleY(1); filter: none; }
}

body.system-off .fx-canvas,
body.system-off .scanlines,
body.system-off .noise,
body.system-off .g-slice,
body.system-off .glitch-white {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
body.system-off .screen { background: #000 !important; transition: background 260ms linear; }
body.system-off .hud,
body.system-off .details,
body.system-off .log,
body.system-off .console { opacity: 0.0; pointer-events: none; }
body.system-off .media-window,
body.system-off .pdf-window { filter: brightness(0) saturate(0); transition: filter 240ms linear, opacity 240ms linear; opacity: 0.0; pointer-events: none; }

@media (max-width:720px){
  .console.overlay{left:0;top:0;transform:none;width:100%;height:100vh;max-height:none;padding:14px;border-radius:0}
  .details{display:none}
  .media-window{ left:8px !important; top:8px !important; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; border-radius:6px; }
  .media-resizer{ display:none; }
  .media-header{ height:44px; padding:10px; }
}

.media-window:focus-within{ outline: 3px solid rgba(57,219,227,0.06); outline-offset: 4px; }

.console-body .art{font-family:monospace; white-space:pre;}








.media-header {
    cursor: grab !important;
}

.media-header .mw-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-app-region: no-drag !important; 
}