@font-face {
  font-family: 'Ari-W9500';
  src: url('./ari-w9500.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-deep: #0a0a0a;
  --bg-surface: #141414;
  --bg-card: rgba(25, 25, 25, 0.6);
  --bg-elevated: rgba(35, 35, 35, 0.7);

  /* --- NEW: Crimson/Blood Red Palette --- */
  --orange-dim: #5c1a14;       /* Deep Blood */
  --orange-primary: #c0392b;   /* Crimson Red */
  --orange-bright: #e74c3c;    /* Vibrant Red */
  --orange-glow: #c0392b;

  /* Text Colors */
  --text-primary: #e8e2d6;
  --text-muted: #8a8275;
  --text-dim: #555;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-orange: rgba(192, 57, 43, 0.4);

  /* Status Colors */
  --red-error: #e74c3c;
  --green-success: #2ecc71;
  --blue-secure: #3498db;
  --yellow-observer: #f1c40f;

  /* Ember Variables (for H1 animation) */
  --ember-core: #ffb3b3;       /* Lightest Red */
  --ember-bright: #e74c3c;     /* Vibrant Red */
  --ember-deep: #5c1a14;       /* Deep Blood */
  --ember-glow: #c0392b;

  /* Radiowave Separator Variables */
  --accent-gold: #e74c3c;
  --accent-amber: #c0392b;
  --accent-ember: #5c1a14;
  --accent-pale: #ffb3b3;
  --glow-gold: rgba(231, 76, 60, 0.7);
  --glow-amber: rgba(192, 57, 43, 0.5);
  --glow-ember: rgba(92, 26, 20, 0.6);
  
  /* Amber Wave Separator Colors (Updated to Red) */
  --amber-dark: #5c1a14;
}

* { scrollbar-width: thin; scrollbar-color: var(--orange-dim) transparent; }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--orange-dim); border-radius: 3px; }

body {
  font-family: 'Ari-W9500', monospace;
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;

}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Pass clicks through */
  z-index: 9999; /* Sit on top of everything */
  
  /* Background Gradients */
 /* background-image: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.08), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  
  /* Background Sizing */
  /* background-size: 100% 2px, 3px 100%; */
}

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: -1; /* Behind everything */
  pointer-events: none;
}

/* Sidebar Range Slider Styling */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 12px;
  height: 12px;
  background: var(--orange-primary);
  border: none;
  cursor: pointer;
}

input[type=range]::-moz-range-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--orange-primary);
  border: none;
  border-radius: 0;
}

.anim-paused #canvas {
  display: none;
}

.doc-content section[id] { scroll-margin-top: 80px; }

.typing-cursor {
  display: inline-block; width: 0.6em; height: 1.1em;
  background-color: var(--orange-bright); margin-left: 4px;
  vertical-align: text-bottom; animation: blink 1s step-end infinite;
}

@keyframes blink { from, to { background-color: transparent; } 50% { background-color: var(--orange-bright); } }




.font-display { font-family: 'Press Start 2P', cursive; letter-spacing: 0.05em; }

.sidebar, .chat-panel {
  /* Updated: Dark Blueish Tint */
  background: rgba(15, 18, 25, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-subtle);
  z-index: 30;
}
.chat-panel { border: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }

.nav-item { position: relative; padding: 0.75rem 1.25rem; color: var(--text-muted); transition: all 0.3s ease; border-left: 2px solid transparent; font-size: 0.85rem; perspective: 500px; }
.nav-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(230, 126, 34, 0.2) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.nav-item:hover, .nav-item.active { color: var(--orange-primary); border-left-color: var(--orange-primary); }
.nav-item:hover::before, .nav-item.active::before { opacity: 1; }
.nav-item.active { text-shadow: 0 0 20px rgba(230, 126, 34, 0.6); }

.pixel-icon { display: block; shape-rendering: crispEdges; transition: transform 0.3s ease; transform-style: preserve-3d; backface-visibility: visible; }
.nav-item.active .pixel-icon { animation: pixel-spin-3d 2s linear infinite; }
@keyframes pixel-spin-3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

.doc-content h1, .doc-content h2, .doc-content h3 {
  font-family: 'Press Start 2P', cursive;
  color: var(--text-primary);
  line-height: 1.6;
  /* Add Flexbox to align icons */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px gap */
  flex-wrap: wrap;
}
.doc-content h1 { font-size: 2rem; margin-bottom: 2rem; color: var(--orange-bright); }
.doc-content h2 { font-size: 1.25rem; color: var(--orange-primary); margin-top: 4rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--border-orange); }
.doc-content h3 { font-size: 0.875rem; color: var(--text-primary); margin-top: 2.5rem; margin-bottom: 1rem; }
.doc-content p { color: var(--text-muted); line-height: 1.9; font-size: 0.95rem; }
.doc-content h1 .pixel-icon, 
.doc-content h2 .pixel-icon,
.doc-content h3 .pixel-icon {
  flex-shrink: 0;
}
.doc-content code { background: rgba(230, 126, 34, 0.1); border: 1px solid rgba(230, 126, 34, 0.2); padding: 0.15rem 0.4rem; border-radius: 0; font-size: 0.85em; color: var(--orange-bright); font-family: 'Ari-W9500', monospace; }
.doc-content pre { background: var(--bg-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-subtle); border-radius: 0; padding: 2.5rem 1.25rem 1.25rem 1.25rem; overflow-x: auto; position: relative; font-size: 0.85rem; line-height: 1.7; }
.doc-content pre::before { content: 'SCHEMATIC'; position: absolute; top: 0; left: 0; right: 0; padding: 4px 10px; background: var(--bg-elevated); color: var(--orange-dim); font-size: 0.7rem; letter-spacing: 0.1em; border-bottom: 1px solid var(--border-subtle); font-family: 'Ari-W9500', monospace; text-align: left; }
.doc-content pre code { background: none; border: none; padding: 0; color: var(--text-primary); }
.code-keyword { color: var(--orange-bright); }
.code-string { color: #7ec699; }
.code-comment { color: var(--text-dim); font-style: italic; }
.code-function { color: #82aaff; }

.card { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: 0; transition: all 0.3s ease; }
.card:hover { border-color: var(--border-orange); box-shadow: 4px 4px 0 rgba(230, 126, 34, 0.2); background: rgba(35, 35, 35, 0.6); }

.warning-box, .spec-box { background: rgba(230, 126, 34, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(230, 126, 34, 0.3); border-left: 4px solid var(--orange-primary); border-radius: 0; padding: 1rem 1.25rem; }
.spec-box { padding: 0.75rem 1rem; margin-top: 0.5rem; }
.sidebar-toggle { display: none; }

.sidebar-input, .chat-input { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 0; border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: 'Ari-W9500', monospace; }
.sidebar-input::placeholder, .chat-input::placeholder { font-family: 'Ari-W9500', monospace; color: var(--text-dim); }

.search-highlight { background: rgba(243, 156, 18, 0.3); color: #fff; border-bottom: 1px solid var(--orange-bright); padding: 0 2px; box-shadow: 0 0 10px rgba(243, 156, 18, 0.4); transition: background 0.2s; }
.search-highlight.active { background: var(--orange-primary); color: #000; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 50; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 40; }
  .overlay.visible { display: block; }
  .doc-content h1 { font-size: 1.5rem; }
  .doc-content h2 { font-size: 1rem; }
  .doc-content h3 { font-size: 0.75rem; }
}

.logo-svg { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange-primary); outline-offset: 2px; }

.anim-paused .ember, .anim-paused .ambient-bg::before, .anim-paused .floating-rune, .anim-paused .noise-layer { animation: none; }
.anim-paused .ember, .anim-paused .floating-rune, .anim-paused .noise-layer { display: none; }
.anim-paused .nav-item.active .pixel-icon { animation: none; }
.anim-paused * { transition-duration: 0.01ms !important; }

@media (prefers-reduced-motion: reduce) { 
  .ember, .ambient-bg::before, .floating-rune, .noise-layer { animation: none; } 
  .ember, .floating-rune, .noise-layer { display: none; }
  .nav-item.active .pixel-icon { animation: none; }
  * { transition-duration: 0.01ms !important; } 
}


main { position: relative; z-index: 10; }

/* STL Viewer Styles */
#stl-viewer-container { width: 100%; height: 450px; background: var(--bg-card); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; }
#stl-viewer-canvas { width: 100%; height: 100%; display: block; }
.viewer-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(10,10,10,0.9), transparent); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.viewer-controls { pointer-events: auto; }
.viewer-actions { pointer-events: auto; }
.viewer-status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-dim); font-size: 0.875rem; pointer-events: none; z-index: 10; }

/* Schematic Styles */
.schematic-svg { width: 100%; max-width: 600px; height: auto; margin: 0 auto; display: block; }
.schematic-component { fill: rgba(20, 20, 20, 0.8); stroke: var(--orange-dim); stroke-width: 1.5; transition: all 0.2s ease; cursor: pointer; }
.schematic-component:hover { fill: rgba(40, 20, 0, 0.9); stroke: var(--orange-bright); filter: drop-shadow(0 0 4px rgba(230, 126, 34, 0.3)); }
.schematic-label { fill: var(--text-muted); font-family: 'Ari-W9500', monospace; font-size: 9px; text-anchor: middle; pointer-events: none; transition: fill 0.2s ease; font-weight: normal; }
.schematic-component:hover ~ .schematic-label { fill: var(--orange-bright); }
.schematic-line { stroke: var(--text-dim); stroke-width: 1; fill: none; transition: stroke 0.2s ease; }
.spi-mosi { stroke: var(--red-error); }
.spi-sclk { stroke: var(--yellow-observer); }
.spi-cs { stroke: var(--green-success); }
.spi-dc { stroke: var(--blue-secure); }
.spi-rst { stroke: var(--orange-primary); }
.schematic-component:hover ~ .schematic-line { stroke-width: 1.5; }
.schematic-tooltip { position: absolute; background: rgba(20, 20, 20, 0.95); border: 1px solid var(--orange-primary); padding: 8px 12px; border-radius: 0; font-size: 11px; color: var(--text-primary); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 20; max-width: 150px; box-shadow: 0 0 10px rgba(230, 126, 34, 0.2); }
.schematic-wrapper { position: relative; }

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}
.modal-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(230, 126, 34, 0.1);
}
.rune-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(0.3rem, 1.2vw, 0.75rem) !important;
  line-height: 1.1;
  /* Updated to Red Hues */
  color: var(--orange-bright);
  text-shadow:
    0 0 8px var(--orange-bright),
    0 0 15px var(--orange-primary),
    0 0 30px var(--orange-dim);
  white-space: pre;
  user-select: none;
  text-align: center;
  padding: 2rem 0;
  margin: 0;
  margin-bottom: 2rem;
}

/* Remove Schematic Frame from Rune Art */
.doc-content pre.rune-text {
  background: transparent;
  border: none;
  padding: 2rem 0; /* Override schematic padding */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  line-height: 1.1;
}

.doc-content pre.rune-text::before {
  display: none; /* Hide 'SCHEMATIC' label */
}
main {
  position: relative; /* Anchor for the shadow */
}

/* Full Width Background Shadow */
/* main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px; 
  background: linear-gradient(
    180deg, 
    rgba(10, 8, 6, 0.8) 0%,   
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
} */

/* Ensure content sits above the shadow */
.doc-content {
  position: relative;
  z-index: 1;
}
.doc-content h1, .doc-content h2, .doc-content h3 { 
  font-family: 'Press Start 2P', cursive; 
  color: var(--text-primary); 
  line-height: 1.6; 
  /* Add Flexbox to align icons */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px gap */
  flex-wrap: wrap;
}

/* Specific adjustments for h1/h2 sizes if needed */
.doc-content h1 { 
  font-size: 2rem; 
  margin-bottom: 2rem; 
  color: var(--orange-bright); 
  /* Subtle Amber Glow */
  text-shadow: 0 0 15px rgba(230, 126, 34, 0.6);
}

.doc-content h2 { 
  font-size: 1.25rem; 
  color: var(--orange-primary); 
  margin-top: 4rem; 
  margin-bottom: 1.5rem; 
  padding-bottom: 1rem; 
  border-bottom: 2px dashed var(--border-orange); 
  /* Subtle Amber Glow */
  text-shadow: 0 0 10px rgba(230, 126, 34, 0.4);
}

.doc-content h3 { 
  font-size: 0.875rem; 
  /* Subtle Amber Color */
  color: var(--orange-dim); 
  margin-top: 2.5rem; 
  margin-bottom: 1rem; 
}

/* Ensure icons don't shrink if title wraps */
.doc-content h1 .pixel-icon, 
.doc-content h2 .pixel-icon {
  flex-shrink: 0;
}

.separator {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, transparent, var(--orange-primary), transparent);
  margin: 3rem 0;
  opacity: 0.4;
}
.doc-content h1 { 
  font-size: 1.4rem; 
  margin-bottom: 2rem; 
  
  /* Removed centering */
  
  /* Lava Animation - Strict Red Hues */
  background: linear-gradient(
    135deg, 
    #ff5252 0%,       /* Light Red */
    #e74c3c 25%,      /* Bright Red */
    #c0392b 50%,      /* Primary Red */
    #e74c3c 75%,      /* Bright Red */
    #ff5252 100%      /* Light Red */
  );
  
  background-size: 400% 400%; 
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Red Glow */
  text-shadow: 
    0 0 8px rgba(231, 76, 60, 1),
    0 0 16px rgba(192, 57, 43, 0.8);
  
  animation: lava-flow 10s linear infinite;
  
  opacity: 0.95;
}
/* Quick Navigation Bar (Vertical) */
/* Quick Navigation Bar (Vertical) */
#quick-nav {
    position: sticky;
    top: calc(30vh - 100px);
    margin-left: -50px;

    width: 0;
    min-width: 0;
    flex-shrink: 0;
    overflow: visible;

    height: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    z-index: 20;
    background: transparent;
    border: none;
    padding: 0;
}

/* Right border line — pushed 12px right of the icons via negative right offset */
#quick-nav::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 4px;
    height: 210px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 2%,
        var(--orange-primary) 25%,
        var(--orange-primary) 75%,
        transparent 98%
    );
    opacity: 0.35;
}

/* Keycap Wrapper */
.keycap-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    pointer-events: auto;
    transition: transform 0.1s ease;
    z-index: 0;
}

/* Subtle glow on press — tight radius, low opacity, no fill changes */
.keycap-wrapper::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(231, 76, 60, 0.25) 30%,
        rgba(192, 57, 43, 0.1) 60%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.05s ease-out;
    z-index: -1;
    pointer-events: none;
}

.keycap-wrapper:active::before,
.keycap-wrapper.pressed::before {
    opacity: 1;
}

.keycap-wrapper:active,
.keycap-wrapper.pressed {
    transform: translateY(2px);
}

.keycap-wrapper svg {
    display: block;
}

.keycap-wrapper:focus {
    outline: none;
}

.keycap-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8));
    transition: filter 0.1s ease;
}

.keycap-wrapper:active .keycap-bg,
.keycap-wrapper.pressed .keycap-bg {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
}

.keycap-icon {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    #quick-nav {
        display: none !important;
    }
}

.sidebar-input {
    padding-right: 2.5rem;
}