/* Synthwave Terminal Theme */
:root{
  --bg: #0b0615;
  --bg-2: #120a24;
  --grid: rgba(255,0,128,0.08);
  --text: #e6e6ff;
  --muted: #aab;
  --accent: #ff2ea6;
  --accent-2: #6cf9ff;
  --prompt: #6cf9ff;
  --ok: #7CFFCB;
  --warn: #ffd166;
  --err: #ff6b6b;
  --shadow: rgba(0,0,0,0.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  background: radial-gradient(1000px 600px at 50% 0%, #1b0b3a 0%, var(--bg) 60%, #02010a 100%);
  color:var(--text); line-height:1.6; overflow:hidden;
}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.4rem .6rem; border-radius:6px}
.container{position:relative; height:100%; padding:2rem; display:flex; align-items:center; justify-content:center}
.bg-grid{
  position:fixed; inset:0; background:
    linear-gradient(rgba(255,0,128,0.12), rgba(0,255,255,0.06)),
    linear-gradient(0deg, transparent 24px, var(--grid) 25px, transparent 26px),
    linear-gradient(90deg, transparent 24px, var(--grid) 25px, transparent 26px);
  background-size:100% 100%, 100% 26px, 26px 100%;
  filter:saturate(120%) contrast(110%);
  pointer-events:none;
}
.terminal{
  width:min(1200px, 95%);
  height:min(85vh, 900px);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)) ,
             radial-gradient(1200px 260px at 50% -10%, rgba(255,46,166,0.10), transparent 60%) ,
             var(--bg-2);
  border:1px solid rgba(108,249,255,0.14);
  border-radius:12px; box-shadow:0 20px 60px var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.03);
  display:flex; flex-direction:column; overflow:hidden;
}
.terminal__titlebar{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-bottom:1px solid rgba(108,249,255,0.12);
  background:linear-gradient(180deg, rgba(108,249,255,0.10), rgba(255,46,166,0.06));
  position:relative;
}
.terminal__title{margin-left:.4rem; color:var(--muted); font-size:.9rem}
.btn{width:12px; height:12px; border-radius:50%; box-shadow:0 0 8px rgba(0,0,0,0.6) inset}
.btn--close{background:#ff5f57}
.btn--min{background:#ffbd2e}
.btn--max{background:#28c940}
.terminal__output{flex:1; overflow:auto; padding:1rem; font-size:15px}
.terminal__prompt{display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border-top:1px solid rgba(108,249,255,0.12); background:rgba(2,1,10,0.6); backdrop-filter:blur(4px)}
.prompt__path{color:var(--prompt)}
#cmd{flex:1; background:transparent; border:none; outline:none; color:var(--text); font:inherit}
#cmd::placeholder{color:rgba(230,230,255,0.35)}

.output-line{white-space:pre-wrap}
.output-line .ok{color:var(--ok)}
.output-line .warn{color:var(--warn)}
.output-line .err{color:var(--err)}
.output-line a{color:var(--accent-2); text-decoration:none}
.output-line a:hover{text-decoration:underline}

.banner{color:var(--accent-2); text-shadow:0 0 8px rgba(108,249,255,0.5)}
.kbd{display:inline-block; padding:.1rem .35rem; border:1px solid rgba(255,255,255,0.2); border-radius:4px; font-size:.9em; color:#fff3; background:#fff1}

/* Alt theme */
body.alt{
  --bg: #05040d;
  --bg-2: #0b0a1a;
  --grid: rgba(108,249,255,0.08);
  --accent: #6cf9ff;
  --accent-2: #ff2ea6;
  --prompt: #ff2ea6;
}

/* Corruption effects */
.ascii.corrupted {
  animation: corruption 3s ease-in-out infinite;
  text-shadow: 1px 0 #ff0040, -1px 0 #00ffff;
}

.corrupted-text {
  color: var(--err) !important;
  animation: glitch 2s ease-in-out infinite;
  text-shadow: 1px 0 #ff0040, -1px 0 #00ffff;
}

@keyframes corruption {
  0%, 100% { 
    transform: translateX(0px) scaleX(1); 
    filter: none;
  }
  10% { 
    transform: translateX(2px) scaleX(1.02); 
    filter: hue-rotate(180deg);
  }
  20% { 
    transform: translateX(-1px) scaleX(0.98); 
    filter: invert(1);
  }
  30% { 
    transform: translateX(1px) scaleX(1.01); 
    filter: hue-rotate(90deg);
  }
  40% { 
    transform: translateX(-2px) scaleX(0.99); 
    filter: none;
  }
  50% { 
    transform: translateX(1px) scaleX(1.01); 
    filter: saturate(2);
  }
  60% { 
    transform: translateX(0px) scaleX(1); 
    filter: brightness(1.5);
  }
  70% { 
    transform: translateX(-1px) scaleX(1.02); 
    filter: contrast(2);
  }
  80% { 
    transform: translateX(2px) scaleX(0.98); 
    filter: hue-rotate(270deg);
  }
  90% { 
    transform: translateX(-1px) scaleX(1.01); 
    filter: invert(0.5);
  }
}

@keyframes glitch {
  0%, 100% { 
    transform: translateX(0px); 
    opacity: 1;
  }
  10% { 
    transform: translateX(-2px); 
    opacity: 0.8;
  }
  20% { 
    transform: translateX(2px); 
    opacity: 1;
  }
  30% { 
    transform: translateX(-1px); 
    opacity: 0.9;
  }
  40% { 
    transform: translateX(1px); 
    opacity: 1;
  }
  50% { 
    transform: translateX(0px); 
    opacity: 0.7;
  }
  60% { 
    transform: translateX(-1px); 
    opacity: 1;
  }
  70% { 
    transform: translateX(1px); 
    opacity: 0.9;
  }
  80% { 
    transform: translateX(-2px); 
    opacity: 1;
  }
  90% { 
    transform: translateX(1px); 
    opacity: 0.8;
  }
}

/* Scrollbar */
.terminal__output::-webkit-scrollbar{height:10px; width:10px}
.terminal__output::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius:8px}

/* Accessibility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
:focus-visible{outline:2px dashed var(--accent-2); outline-offset:2px}

/* Responsive */
@media (min-width: 1201px) {
  /* Large desktop - even bigger terminal */
  .terminal {
    width: min(1400px, 90%);
    height: min(90vh, 1000px);
  }
}

@media (max-width: 1024px) and (min-width: 601px) {
  /* Tablet - medium sized terminal */
  .terminal {
    width: min(900px, 95%);
    height: min(75vh, 700px);
  }
}

@media (max-width: 600px){
  .container{padding:1rem}
  .terminal{
    height: 80vh;
    width: 100%;
  }
  .terminal__output{font-size:14px}
  
  /* Hide ASCII art on mobile */
  .ascii {
    display: none;
  }
}