body{font-family:'IBM Plex Mono','Courier New',Courier,monospace;background:#000;color:#00ff41;min-height:100vh;margin:0;display:flex;flex-direction:column;margin-top:48px;margin-bottom:32px}.terminal-outer{display:flex;justify-content:center;align-items:stretch;flex:1;min-height:calc(100vh - 80px);width:100vw}.terminal{background:#181c18;border-radius:12px;box-shadow:0 0 32px #00ff41,0 0 4px #222 inset;border:2px solid #00ff41;width:100vw;max-width:900px;min-height:60vh;height:100%;padding:2rem 2vw 1.5rem 2vw;position:relative;overflow:hidden;margin:auto;display:flex;flex-direction:column;justify-content:flex-start}.crt-scanlines{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(180deg,rgba(0,255,65,0.04) 0px,rgba(0,255,65,0.04) 1px,transparent 2px,transparent 6px);z-index:2}.terminal-menu{display:flex;justify-content:center;gap:1.2rem;margin-bottom:1.2rem;z-index:3}.terminal-menu button{background:transparent;color:#00ff41;border:none;font-family:inherit;font-size:1.1rem;padding:.3em 1.2em;border-radius:6px;cursor:pointer;transition:background .2s,color .2s;outline:none;position:relative}.terminal-menu button.active,.terminal-menu button:hover{background:#00ff41;color:#181c18;box-shadow:0 0 8px #00ff41}.terminal-screen{background:transparent;min-height:220px;font-size:1.1rem;white-space:pre-wrap;z-index:3;position:relative;padding-bottom:1.2em;flex:1;overflow-y:auto}.terminal-cursor{display:inline-block;width:1ch;background:#00ff41;color:#181c18;animation:blink 1s steps(2,start) infinite;font-weight:bold}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@media (max-width:800px){.terminal{max-width:100vw;min-width:0;padding:.5rem .5rem 1rem .5rem;border-radius:0;box-shadow:none}.terminal-menu{flex-wrap:wrap;gap:.5rem;font-size:1rem}.terminal-screen{font-size:1rem;min-height:120px}}@media (max-width:500px){.terminal{padding:.2rem .1rem .5rem .1rem}.terminal-menu button{font-size:.95rem;padding:.2em .7em}}

/* --- Terminal Color Schemes --- */
/* VT100 (Green on Black) */
.theme-vt100 {
  --term-bg: #000;
  --term-fg: #00FF00;
  --term-cursor: #00FF00;
  --term-accent: #00FF00;
}
/* VT100 (Amber on Black) */
.theme-vt100-amber {
  --term-bg: #000;
  --term-fg: #FFB000;
  --term-cursor: #FFB000;
  --term-accent: #FFB000;
}
/* IBM 3270 */
.theme-ibm3270 {
  --term-bg: #000;
  --term-fg: #00FFFF;
  --term-cursor: #FFFFFF;
  --term-accent: #00FF00;
}
/* Apple II (Green) */
.theme-apple2 {
  --term-bg: #000;
  --term-fg: #39FF14;
  --term-cursor: #39FF14;
  --term-accent: #39FF14;
}
/* Amiga */
.theme-amiga {
  --term-bg: #2D2D2D;
  --term-fg: #AFAFAF;
  --term-cursor: #00AEEF;
  --term-accent: #00AEEF;
}
/* DOS ANSI */
.theme-dos {
  --term-bg: #000;
  --term-fg: #C0C0C0;
  --term-cursor: #FFFFFF;
  --term-accent: #00FFFF;
}
/* xterm */
.theme-xterm {
  --term-bg: #000;
  --term-fg: #FFFFFF;
  --term-cursor: #FFFFFF;
  --term-accent: #00FF00;
}
/* Linux Console */
.theme-linux {
  --term-bg: #000;
  --term-fg: #FFFFFF;
  --term-cursor: #FFFFFF;
  --term-accent: #00FF00;
}
/* Windows CMD */
.theme-cmd {
  --term-bg: #001F3F;
  --term-fg: #C0C0C0;
  --term-cursor: #FFFFFF;
  --term-accent: #00FFFF;
}
/* macOS Terminal (Solarized) */
.theme-solarized {
  --term-bg: #002B36;
  --term-fg: #839496;
  --term-cursor: #93A1A1;
  --term-accent: #B58900;
}
/* Matrix */
.theme-matrix {
  --term-bg: #000;
  --term-fg: #00FF41;
  --term-cursor: #00FF41;
  --term-accent: #00FF41;
}
/* Cyberpunk Neon */
.theme-cyberpunk {
  --term-bg: #1A0033;
  --term-fg: #FF00CC;
  --term-cursor: #00FFFF;
  --term-accent: #00FFFF;
}
/* Monokai */
.theme-monokai {
  --term-bg: #272822;
  --term-fg: #F8F8F2;
  --term-cursor: #F8F8F0;
  --term-accent: #A6E22E;
}

/* --- Apply theme variables --- */
.terminal {
  background: var(--term-bg, #101510);
  color: var(--term-fg, #00ff41);
  border: 2px solid var(--term-accent, #00ff41);
  box-shadow: 0 0 32px var(--term-accent, #00ff41), 0 0 4px #222 inset;
}
.terminal-menu button {
  color: var(--term-accent, #00ff41);
}
.terminal-menu button.active,
.terminal-menu button:hover {
  background: var(--term-accent, #00ff41);
  color: var(--term-bg, #181c18);
  box-shadow: 0 0 8px var(--term-accent, #00ff41);
}
.terminal-cursor {
  background: var(--term-cursor, #00ff41);
  color: var(--term-bg, #181c18);
}

/* --- Terminal Window Chrome Emulation --- */
/*
  Windowed theme classes emulate the look of classic terminal windows.
  - .theme-solarized: macOS Terminal, traffic lights, rounded bar
  - .theme-amiga: Amiga Workbench, blue bar, square corners
  - .theme-dos: DOS box, simple border, no chrome
  - .theme-cmd: Windows CMD, dark blue bar
  - .theme-cyberpunk, .theme-monokai: custom accent bars
  To add a new windowed theme, create a .theme-<name> class and update JS terminalThemes list.
*/
.terminal-window-bar {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--term-accent, #00ff41);
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
}
.terminal-buttons {
  display: flex;
  gap: 6px;
  margin-right: 12px;
}
.terminal-title {
  flex: 1;
  text-align: left;
  color: var(--term-accent, #00ff41);
  font-weight: bold;
  letter-spacing: 0.05em;
}
/* macOS style traffic lights */
.theme-solarized .terminal-window-bar {
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #93A1A1;
}
.theme-solarized .terminal-buttons .btn-close {
  background: #ff5f56;
  border-radius: 50%;
  width: 12px; height: 12px;
  border: 1px solid #e33e41;
  display: inline-block;
}
.theme-solarized .terminal-buttons .btn-min {
  background: #ffbd2e;
  border-radius: 50%;
  width: 12px; height: 12px;
  border: 1px solid #e09c25;
  display: inline-block;
}
.theme-solarized .terminal-buttons .btn-max {
  background: #27c93f;
  border-radius: 50%;
  width: 12px; height: 12px;
  border: 1px solid #1aab29;
  display: inline-block;
}
.theme-solarized .terminal-title {
  color: #586e75;
  font-weight: 500;
}
/* Amiga style blue bar */
.theme-amiga .terminal-window-bar {
  background: #0050a0;
  color: #fff;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid #00AEEF;
}
.theme-amiga .terminal-title {
  color: #fff;
}
/* DOS style: simple border, no bar */
.theme-dos .terminal-window-bar {
  display: none;
}
/* Windows CMD: dark blue bar */
.theme-cmd .terminal-window-bar {
  background: #001F3F;
  color: #C0C0C0;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid #00FFFF;
}
.theme-cmd .terminal-title {
  color: #C0C0C0;
}
/* Default/fallback: subtle accent bar */
.terminal-window-bar {
  background: var(--term-accent, #222);
  color: var(--term-fg, #00ff41);
  border-radius: 4px 4px 0 0;
}
/* Hide window bar for Matrix, VT100, Apple II, xterm, Linux */
.theme-matrix .terminal-window-bar,
.theme-vt100 .terminal-window-bar,
.theme-vt100-amber .terminal-window-bar,
.theme-apple2 .terminal-window-bar,
.theme-xterm .terminal-window-bar,
.theme-linux .terminal-window-bar {
  display: none;
}
/* Cyberpunk: neon bar */
.theme-cyberpunk .terminal-window-bar {
  background: linear-gradient(90deg, #ff00cc 0%, #00ffff 100%);
  color: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 16px #00ffff;
}
.theme-cyberpunk .terminal-title {
  color: #fff;
}
/* Monokai: dark bar */
.theme-monokai .terminal-window-bar {
  background: #444;
  color: #A6E22E;
  border-radius: 4px 4px 0 0;
}
.theme-monokai .terminal-title {
  color: #A6E22E;
}
/* --- End Terminal Window Chrome Emulation --- */

/* --- CRT Emulation for Windowless Themes --- */
/*
  CRT classes emulate the look of classic CRT displays for windowless terminal themes.
  - .crt-vt100: Green phosphor, scanlines, glow, rounded corners
  - .crt-apple2: Green/amber, strong curvature, thick bezel, scanlines
  - .crt-matrix: Neon green, heavy scanlines, minimal bezel
  - .crt-xterm, .crt-linux: Minimal CRT/LCD look, subtle scanlines
  To add a new CRT style, create a .crt-<name> class and update JS crtThemes map.
*/
.crt-vt100 {
  border-radius: 18px;
  box-shadow: 0 0 32px #00ff00, 0 0 8px #222 inset;
  background: #000;
  position: relative;
  overflow: hidden;
}
.crt-vt100::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,0,0.07) 0px,
    rgba(0,255,0,0.07) 1px,
    transparent 2px,
    transparent 4px
  );
  z-index: 2;
}
.crt-vt100::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  box-shadow: 0 0 64px 16px #00ff00 inset;
  z-index: 1;
}
.crt-apple2 {
  border-radius: 28px;
  box-shadow: 0 0 48px #39ff14, 0 0 12px #222 inset;
  background: #000;
  border: 16px solid #222;
  position: relative;
  overflow: hidden;
}
.crt-apple2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(57,255,20,0.09) 0px,
    rgba(57,255,20,0.09) 2px,
    transparent 4px,
    transparent 8px
  );
  z-index: 2;
}
.crt-apple2::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  box-shadow: 0 0 96px 24px #39ff14 inset;
  z-index: 1;
}
.crt-matrix {
  border-radius: 12px;
  box-shadow: 0 0 32px #00ff41, 0 0 8px #222 inset;
  background: #000;
  position: relative;
  overflow: hidden;
}
.crt-matrix::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,65,0.12) 0px,
    rgba(0,255,65,0.12) 1px,
    transparent 2px,
    transparent 4px
  );
  z-index: 2;
}
.crt-xterm, .crt-linux {
  border-radius: 8px;
  box-shadow: 0 0 16px #fff, 0 0 4px #222 inset;
  background: #000;
  position: relative;
  overflow: hidden;
}
.crt-xterm::before, .crt-linux::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 2px,
    transparent 4px
  );
  z-index: 2;
}
/* --- End CRT Emulation --- */