@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #080402;
  --panel: rgba(20, 9, 3, 0.86);
  --amber: #fea712;
  --orange: #e76219;
  --cream: #fddca9;
  --dim: #aa6022;
  --line: rgba(254, 167, 18, 0.28);
  --error: #ef593c;
  --font: 'IBM Plex Mono', Menlo, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--amber);
  font-family: var(--font);
}

#experience,
#terminal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
}

#terminal-canvas {
  display: block;
  z-index: 1;
  outline: 0;
  cursor: text;
}

#fallback-shell {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: none;
  overflow: auto;
  padding: 80px clamp(24px, 8vw, 120px) 180px;
  background: var(--bg);
}

.fallback-mode #terminal-canvas { display: none; }
.fallback-mode #fallback-shell { display: block; }

#fallback-shell h1,
#fallback-shell h2 { color: var(--cream); font-weight: 600; }
#fallback-shell h1 { margin: 8px 0; font-size: clamp(36px, 8vw, 90px); }
#fallback-shell h2 { margin-top: 70px; }
#fallback-shell p { max-width: 760px; color: var(--dim); line-height: 1.7; }
#fallback-shell img { width: min(100%, 1100px); max-height: 72vh; object-fit: cover; border: 1px solid var(--line); }
.fallback-kicker { color: var(--orange) !important; letter-spacing: 0.18em; }
.fallback-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.fallback-links a { padding: 10px 14px; border: 1px solid var(--line); color: var(--amber); text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}