@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */

html, body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%; /* For iOS Safari and older legacy WebKit engines */
  text-size-adjust: 100%;         /* Standard property for modern Chromium browsers */
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#terminal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

/* ========================================
   SPINNER
   ======================================== */

#spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-top-color: rgba(128, 128, 128, 0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   TERMINAL SURFACE
   ======================================== */

/* #surface is a plain div — backend-agnostic container.
   Each backend injects its own child on init. */
#surface {
  position: relative;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* HTML backend child: <pre> injected by HtmlOutput::new() */
#surface > pre {
  margin: 0;
  padding: 0;
  white-space: pre;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

#surface > pre span {
  display: inline-block;
  text-align: left;
}

/* Canvas backend child: <canvas> injected by CanvasOutput::new() */
#surface > canvas {
  display: block;
}

.wc {
  display: inline-block;
  width: 2ch;
  text-align: center;
  vertical-align: bottom;
}
/* Fixed-width 1-cell character — forces any glyph into exactly 1ch.
   Used for CTL scripts (Devanagari, etc.) whose natural font width
   differs from the Latin character cell. */
.fw {
  display: inline-block;
  width: 1ch;
  text-align: center;
  vertical-align: bottom;
}

/* ========================================
   USER SETTINGS
   Edit font, default colors, and themes here.
   ======================================== */

/* ----------------------------------------
   Font
   Applied to both #surface and #char-probe
   so char size measurement stays in sync.
   To change the font, edit this one rule.
   ---------------------------------------- */

/* Font applied to #surface (canvas backend reads it), #surface > pre
   (HTML backend inherits it), and #char-probe (measurement probe).
   All three must stay in sync or char size measurement will be wrong. */
#surface,
#surface > pre,
#char-probe {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  line-height: 18px;
}

/* ----------------------------------------
   Default palette (Basic dark)
   fg/bg on #surface; ansi 0–15 on probes
   inside #surface.
   ---------------------------------------- */

#surface, #terminal                { color: #EEEEEE; background-color: #080808; }
#probes .ansi-0               { color: #000000; } /* ANSI 16   / black */
#probes .ansi-1               { color: #AF0000; } /* ANSI 124 / red3 */
#probes .ansi-2               { color: #5FAF5F; } /* ANSI 71  / darkseagreen4 */
#probes .ansi-3               { color: #FFAF00; } /* ANSI 214 / orange1 */
#probes .ansi-4               { color: #005FAF; } /* ANSI 25  / deepskyblue4 */
#probes .ansi-5               { color: #AF5FAF; } /* ANSI 133 / mediumorchid3 */
#probes .ansi-6               { color: #00AFAF; } /* ANSI 37  / lightseagreen */
#probes .ansi-7               { color: #A8A8A8; } /* ANSI 248 / grey82 */
#probes .ansi-8               { color: #585858; } /* ANSI 240 / grey35 */
#probes .ansi-9               { color: #FF8787; } /* ANSI 210 / lightcoral */
#probes .ansi-10              { color: #87FF87; } /* ANSI 120 / lightgreen */
#probes .ansi-11              { color: #FFD75F; } /* ANSI 221 / light goldenrod2 */
#probes .ansi-12              { color: #00AFFF; } /* ANSI 39  / deepskyblue1 */
#probes .ansi-13              { color: #D7AFFF; } /* ANSI 183 / plum2 */
#probes .ansi-14              { color: #00FFFF; } /* ANSI 51  / cyan1 */
#probes .ansi-15              { color: #FFFFFF; } /* ANSI 231  / bright white */

/* ----------------------------------------
   Basic light (inverse)
   fg/bg on #surface; ansi 0–15 on probes
   ---------------------------------------- */

#surface.basic-light, #terminal.basic-light          { color: #080808; background-color: #EEEEEE; }
#probes.basic-light  .ansi-15              { color: #000000; } /* ANSI 16  / black */
#probes.basic-light  .ansi-9               { color: #AF0000; } /* ANSI 124 / red */
#probes.basic-light  .ansi-10              { color: #5FAF5F; } /* ANSI 71  / green */
#probes.basic-light  .ansi-11              { color: #FFAF00; } /* ANSI 214 / yellow */
#probes.basic-light  .ansi-12              { color: #005FAF; } /* ANSI 25  / blue */
#probes.basic-light  .ansi-13              { color: #AF5FAF; } /* ANSI 133 / magenta */
#probes.basic-light  .ansi-14              { color: #00AFAF; } /* ANSI 37  / cyan */
#probes.basic-light  .ansi-8               { color: #A8A8A8; } /* ANSI 248 / lightgrey */
#probes.basic-light  .ansi-7               { color: #585858; } /* ANSI 240 / darkgrey */
#probes.basic-light  .ansi-6               { color: #00FFFF; } /* ANSI 51  / lightcyan */
#probes.basic-light  .ansi-5               { color: #D7AFFF; } /* ANSI 183 / light magenta */
#probes.basic-light  .ansi-4               { color: #00AFFF; } /* ANSI 39  / lightblue */
#probes.basic-light  .ansi-3               { color: #FFD75F; } /* ANSI 221 / lightyellow */
#probes.basic-light  .ansi-2               { color: #87FF87; } /* ANSI 120 / lightgreen */
#probes.basic-light  .ansi-1               { color: #FF8787; } /* ANSI 210 / light red */
#probes.basic-light  .ansi-0               { color: #FFFFFF; } /* ANSI 231 / white */

/* ----------------------------------------
   Dracula
   ---------------------------------------- */

#surface.dracula, #terminal.dracula           { color: #f8f8f2; background-color: #282a36; }
#probes.dracula .ansi-0    { color: #282a36; }
#probes.dracula .ansi-1    { color: #ff5555; }
#probes.dracula .ansi-2    { color: #50fa7b; }
#probes.dracula .ansi-3    { color: #f1fa8c; }
#probes.dracula .ansi-4    { color: #bd93f9; }
#probes.dracula .ansi-5    { color: #ff79c6; }
#probes.dracula .ansi-6    { color: #8be9fd; }
#probes.dracula .ansi-7    { color: #f8f8f2; }
#probes.dracula .ansi-8    { color: #6272a4; }
#probes.dracula .ansi-9    { color: #ff6e6e; }
#probes.dracula .ansi-10   { color: #69ff94; }
#probes.dracula .ansi-11   { color: #ffffa5; }
#probes.dracula .ansi-12   { color: #d6acff; }
#probes.dracula .ansi-13   { color: #ff92df; }
#probes.dracula .ansi-14   { color: #a4ffff; }
#probes.dracula .ansi-15   { color: #ffffff; }

/* ----------------------------------------
   Nord
   ---------------------------------------- */

#surface.nord, #terminal.nord            { color: #d8dee9; background-color: #2e3440; }
#probes.nord .ansi-0    { color: #3b4252; }
#probes.nord .ansi-1    { color: #bf616a; }
#probes.nord .ansi-2    { color: #a3be8c; }
#probes.nord .ansi-3    { color: #ebcb8b; }
#probes.nord .ansi-4    { color: #81a1c1; }
#probes.nord .ansi-5    { color: #b48ead; }
#probes.nord .ansi-6    { color: #88c0d0; }
#probes.nord .ansi-7    { color: #e5e9f0; }
#probes.nord .ansi-8    { color: #4c566a; }
#probes.nord .ansi-9    { color: #bf616a; }
#probes.nord .ansi-10   { color: #a3be8c; }
#probes.nord .ansi-11   { color: #ebcb8b; }
#probes.nord .ansi-12   { color: #81a1c1; }
#probes.nord .ansi-13   { color: #b48ead; }
#probes.nord .ansi-14   { color: #8fbcbb; }
#probes.nord .ansi-15   { color: #eceff4; }

/* ----------------------------------------
   Solarized Dark
   ---------------------------------------- */

#surface.solarized-dark, #terminal.solarized-dark            { color: #839496; background-color: #002b36; }
#probes.solarized-dark .ansi-0    { color: #073642; }
#probes.solarized-dark .ansi-1    { color: #dc322f; }
#probes.solarized-dark .ansi-2    { color: #859900; }
#probes.solarized-dark .ansi-3    { color: #b58900; }
#probes.solarized-dark .ansi-4    { color: #268bd2; }
#probes.solarized-dark .ansi-5    { color: #d33682; }
#probes.solarized-dark .ansi-6    { color: #2aa198; }
#probes.solarized-dark .ansi-7    { color: #eee8d5; }
#probes.solarized-dark .ansi-8    { color: #002b36; }
#probes.solarized-dark .ansi-9    { color: #cb4b16; }
#probes.solarized-dark .ansi-10   { color: #586e75; }
#probes.solarized-dark .ansi-11   { color: #657b83; }
#probes.solarized-dark .ansi-12   { color: #839496; }
#probes.solarized-dark .ansi-13   { color: #6c71c4; }
#probes.solarized-dark .ansi-14   { color: #93a1a1; }
#probes.solarized-dark .ansi-15   { color: #fdf6e3; }

/* ----------------------------------------
   Solarized Light
   ---------------------------------------- */

#surface.solarized-light, #terminal.solarized-light            { color: #657b83; background-color: #fdf6e3; }
#probes.solarized-light .ansi-0    { color: #eee8d5; }
#probes.solarized-light .ansi-1    { color: #dc322f; }
#probes.solarized-light .ansi-2    { color: #859900; }
#probes.solarized-light .ansi-3    { color: #b58900; }
#probes.solarized-light .ansi-4    { color: #268bd2; }
#probes.solarized-light .ansi-5    { color: #d33682; }
#probes.solarized-light .ansi-6    { color: #2aa198; }
#probes.solarized-light .ansi-7    { color: #073642; }
#probes.solarized-light .ansi-8    { color: #fdf6e3; }
#probes.solarized-light .ansi-9    { color: #cb4b16; }
#probes.solarized-light .ansi-10   { color: #586e75; }
#probes.solarized-light .ansi-11   { color: #657b83; }
#probes.solarized-light .ansi-12   { color: #839496; }
#probes.solarized-light .ansi-13   { color: #6c71c4; }
#probes.solarized-light .ansi-14   { color: #93a1a1; }
#probes.solarized-light .ansi-15   { color: #002b36; }

/* ----------------------------------------
   Catppuccin Frappe
   ---------------------------------------- */

#surface.catppuccin-frappe            { color: #c6d0f5; background-color: #303446; }
#probes.catppuccin-frappe .ansi-0    { color: #51576d; }
#probes.catppuccin-frappe .ansi-1    { color: #e78284; }
#probes.catppuccin-frappe .ansi-2    { color: #a6d189; }
#probes.catppuccin-frappe .ansi-3    { color: #e5c890; }
#probes.catppuccin-frappe .ansi-4    { color: #8caaee; }
#probes.catppuccin-frappe .ansi-5    { color: #f4b8e4; }
#probes.catppuccin-frappe .ansi-6    { color: #81c8be; }
#probes.catppuccin-frappe .ansi-7    { color: #b5bfe2; }
#probes.catppuccin-frappe .ansi-8    { color: #626880; }
#probes.catppuccin-frappe .ansi-9    { color: #e78284; }
#probes.catppuccin-frappe .ansi-10   { color: #a6d189; }
#probes.catppuccin-frappe .ansi-11   { color: #e5c890; }
#probes.catppuccin-frappe .ansi-12   { color: #8caaee; }
#probes.catppuccin-frappe .ansi-13   { color: #f4b8e4; }
#probes.catppuccin-frappe .ansi-14   { color: #81c8be; }
#probes.catppuccin-frappe .ansi-15   { color: #a5adce; }

/* ----------------------------------------
   Catppuccin Latte
   ---------------------------------------- */

#surface.catppuccin-latte            { color: #4c4f69; background-color: #eff1f5; }
#probes.catppuccin-latte .ansi-0    { color: #5c5f77; }
#probes.catppuccin-latte .ansi-1    { color: #d20f39; }
#probes.catppuccin-latte .ansi-2    { color: #40a02b; }
#probes.catppuccin-latte .ansi-3    { color: #df8e1d; }
#probes.catppuccin-latte .ansi-4    { color: #1e66f5; }
#probes.catppuccin-latte .ansi-5    { color: #ea76cb; }
#probes.catppuccin-latte .ansi-6    { color: #179299; }
#probes.catppuccin-latte .ansi-7    { color: #acb0be; }
#probes.catppuccin-latte .ansi-8    { color: #6c6f85; }
#probes.catppuccin-latte .ansi-9    { color: #d20f39; }
#probes.catppuccin-latte .ansi-10   { color: #40a02b; }
#probes.catppuccin-latte .ansi-11   { color: #df8e1d; }
#probes.catppuccin-latte .ansi-12   { color: #1e66f5; }
#probes.catppuccin-latte .ansi-13   { color: #ea76cb; }
#probes.catppuccin-latte .ansi-14   { color: #179299; }
#probes.catppuccin-latte .ansi-15   { color: #bcc0cc; }

/* ----------------------------------------
   Gruvbox Dark
   ---------------------------------------- */

#surface.gruvbox-dark            { color: #ebdbb2; background-color: #282828; }
#probes.gruvbox-dark .ansi-0    { color: #282828; }
#probes.gruvbox-dark .ansi-1    { color: #cc241d; }
#probes.gruvbox-dark .ansi-2    { color: #98971a; }
#probes.gruvbox-dark .ansi-3    { color: #d79921; }
#probes.gruvbox-dark .ansi-4    { color: #458588; }
#probes.gruvbox-dark .ansi-5    { color: #b16286; }
#probes.gruvbox-dark .ansi-6    { color: #689d6a; }
#probes.gruvbox-dark .ansi-7    { color: #a89984; }
#probes.gruvbox-dark .ansi-8    { color: #928374; }
#probes.gruvbox-dark .ansi-9    { color: #fb4934; }
#probes.gruvbox-dark .ansi-10   { color: #b8bb26; }
#probes.gruvbox-dark .ansi-11   { color: #fabd2f; }
#probes.gruvbox-dark .ansi-12   { color: #83a598; }
#probes.gruvbox-dark .ansi-13   { color: #d3869b; }
#probes.gruvbox-dark .ansi-14   { color: #8ec07c; }
#probes.gruvbox-dark .ansi-15   { color: #ebdbb2; }

/* ----------------------------------------
   Gruvbox Light
   ---------------------------------------- */

#surface.gruvbox-light            { color: #3c3836; background-color: #fbf1c7; }
#probes.gruvbox-light .ansi-0    { color: #fbf1c7; }
#probes.gruvbox-light .ansi-1    { color: #cc241d; }
#probes.gruvbox-light .ansi-2    { color: #98971a; }
#probes.gruvbox-light .ansi-3    { color: #d79921; }
#probes.gruvbox-light .ansi-4    { color: #458588; }
#probes.gruvbox-light .ansi-5    { color: #b16286; }
#probes.gruvbox-light .ansi-6    { color: #689d6a; }
#probes.gruvbox-light .ansi-7    { color: #7c6f64; }
#probes.gruvbox-light .ansi-8    { color: #928374; }
#probes.gruvbox-light .ansi-9    { color: #9d0006; }
#probes.gruvbox-light .ansi-10   { color: #79740e; }
#probes.gruvbox-light .ansi-11   { color: #b57614; }
#probes.gruvbox-light .ansi-12   { color: #076678; }
#probes.gruvbox-light .ansi-13   { color: #8f3f71; }
#probes.gruvbox-light .ansi-14   { color: #427b58; }
#probes.gruvbox-light .ansi-15   { color: #3c3836; }

/* ========================================
   INTERNAL — do not edit below this line
   ======================================== */

/* Char size probe — off-screen, never visible.
   Font is inherited from the shared rule above.
   Position absolute requires body { position: relative }. */
#char-probe {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
}

/* ANSI color probes — children of #surface so they inherit its theme class.
   Read by Rust via getComputedStyle. Colors defined in palette sections above. */
.ansi-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

/* Theme picker button */
#theme-btn {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 100;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

#theme-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

#theme-btn svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

/*  Light themes need a dark button */
#terminal.basic-light #theme-btn, #terminal.solarized-light #theme-btn, #terminal.catppuccin-latte #theme-btn, #terminal.gruvbox-light #theme-btn {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.4);
}

#theme-menu {
  position: fixed;
  bottom: 40px;
  right: 12px;
  z-index: 100;
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 150px;
}

#theme-menu.open {
  display: flex;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 0px;
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  transition: background 0.1s, color 0.1s;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.theme-option.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.theme-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}