/* JetBrains Mono is loaded via a in index.html so it starts fetching in parallel with other assets, instead of waiting on this stylesheet to download first (which an @import here would force). */ :root { --term-bg: #0f1319; --term-fg: #d8dee9; --term-accent: #88c0d0; --term-dim: #4c566a; --term-cursor: #88c0d0; --scanline-opacity: 0.05; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; background: var(--term-bg); overflow: hidden; } body { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace; display: flex; flex-direction: column; } #terminal-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; } #terminal-container { flex: 1 1 auto; min-height: 0; padding: 12px 16px 0 16px; } /* subtle CRT scanline + vignette overlay, purely decorative */ #crt-overlay { pointer-events: none; position: fixed; inset: 0; z-index: 5; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, var(--scanline-opacity)) 0px, rgba(0, 0, 0, var(--scanline-opacity)) 1px, transparent 1px, transparent 3px ); box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.65); mix-blend-mode: multiply; } .xterm { height: 100%; padding-bottom: 8px; } .xterm-viewport::-webkit-scrollbar { width: 8px; } .xterm-viewport::-webkit-scrollbar-thumb { background: var(--term-dim); border-radius: 4px; } .xterm-viewport::-webkit-scrollbar-track { background: transparent; } /* matrix rain canvas */ #matrix-canvas { position: fixed; inset: 0; z-index: 4; display: none; background: #000; } /* mobile quick-command bar */ #quickbar { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; background: #06080a; border-top: 1px solid #12261a; -webkit-overflow-scrolling: touch; } #quickbar button { flex: 0 0 auto; background: #0f1a13; color: var(--term-accent); border: 1px solid #1e3a28; border-radius: 6px; padding: 8px 12px; font-family: inherit; font-size: 13px; white-space: nowrap; } #quickbar button:active { background: #17281c; } @media (min-width: 769px) { #quickbar { display: none; } } #footer-links { flex: 0 0 auto; text-align: center; font-size: 11px; color: var(--term-dim); padding: 4px 0 8px; background: var(--term-bg); } #footer-links a { color: var(--term-dim); text-decoration: none; } #footer-links a:hover { color: var(--term-accent); text-decoration: underline; } noscript { display: block; color: var(--term-fg); background: var(--term-bg); font-family: monospace; padding: 40px; text-align: center; }