@tailwind base;

@tailwind components;

@tailwind utilities;

:root {

  --color-canvas: #050607;

  --color-teal: #16e0c8;

  --color-teal-dim: #0d9e8e;

  --color-teal-muted: #0a6b60;

  --color-surface-0: #050607;

  --color-surface-1: #0a0c0e;

  --color-surface-2: #0f1214;

  --color-surface-3: #141820;

  --color-text-primary: #e8eaed;

  --color-text-secondary: #8b929e;

  --color-text-muted: #4a525e;

  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-expo-inout: cubic-bezier(0.87, 0, 0.13, 1);

}

*, *::before, *::after {

  box-sizing: border-box;

}

html {

  background: var(--color-canvas);

  color: var(--color-text-primary);

  font-family: 'Inter', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

@media (pointer: coarse) {

  html { cursor: auto; }

}

::-webkit-scrollbar {

  width: 3px;

  height: 3px;

}

::-webkit-scrollbar-track {

  background: var(--color-surface-1);

}

::-webkit-scrollbar-thumb {

  background: var(--color-surface-3);

}

::-webkit-scrollbar-thumb:hover {

  background: var(--color-teal-muted);

}

.invert-cursor.is-expanded {

  width: 40px !important;

  height: 40px !important;

}

.font-display {

  font-family: 'Space Grotesk', sans-serif;

}

.font-ui {

  font-family: 'Inter', sans-serif;

}

.font-mono {

  font-family: 'JetBrains Mono', 'Fira Code', monospace;

}

.aurora-blob {

  position: fixed;

  top: -30vh;

  left: 50%;

  transform: translateX(-50%);

  width: 100vw;

  height: 80vh;

  background:

    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(22, 224, 200, 0.07) 0%, transparent 70%),

    radial-gradient(ellipse 40% 35% at 30% 60%, rgba(22, 224, 200, 0.03) 0%, transparent 60%);

  pointer-events: none;

  z-index: 0;

  animation: aurora-drift 12s ease-in-out infinite alternate;

}

@keyframes aurora-drift {

  0%   { opacity: 0.7; transform: translateX(-50%) scale(1); }

  100% { opacity: 1;   transform: translateX(-50%) scale(1.06); }

}

.hero-section {

  position: relative;

  height: 100dvh;

  min-height: 600px;

  overflow: hidden;

  isolation: isolate;

  contain: layout paint size;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.hero-organism {

  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

}

.hero-organism canvas {

  position: absolute !important;

  inset: 0;

  width: 100% !important;

  height: 100% !important;

}

.surface-pane {

  border: 1px solid rgba(22, 224, 200, 0.08);

  background: rgba(10, 12, 14, 0.85);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  height: 100%;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding: 2rem 2.25rem;

  border-radius: 2px;

}

.answer-prose p {

  margin: 0 0 0.85em 0;

}

.answer-prose p:last-child {

  margin-bottom: 0;

}

.answer-prose strong {

  color: #f4f6f8;

  font-weight: 600;

}

.answer-prose em {

  color: var(--color-text-secondary);

  font-style: italic;

}

.answer-prose .ml-list {

  margin: 0.4em 0 0.85em 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.4em;

}

.answer-prose .ml-list li {

  position: relative;

  padding-left: 1.1em;

  line-height: 1.6;

  font-size: 0.95em;

}

.answer-prose .ml-list li::before {

  content: "›";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--color-teal);

  font-family: 'JetBrains Mono', monospace;

}

.answer-prose .ml-code {

  font-family: 'JetBrains Mono', monospace;

  font-size: 0.85em;

  background: var(--color-surface-2);

  color: var(--color-teal);

  padding: 0.08em 0.36em;

  border-radius: 2px;

  word-break: break-word;

}

.magnetic {

  display: inline-block;

}

.fade-rise {

  opacity: 0;

  transform: translateY(24px);

}

.fade-rise.is-visible {

  opacity: 1;

  transform: translateY(0);

  transition: opacity 0.6s var(--ease-expo-out), transform 0.6s var(--ease-expo-out);

}

.mask-line {

  overflow: hidden;

}

.mask-line-inner {

  display: block;

  transform: translateY(110%);

  transition: transform 0.9s var(--ease-expo-out);

}

.mask-line.is-revealed .mask-line-inner {

  transform: translateY(0);

}

.mobile-surface-pane {

  padding: 1.5rem 1.25rem;

  min-height: calc(100dvh - 200px);

}

@media (max-width: 1023px) {

  .surface-pane {

    height: auto;

    min-height: 0;

  }

}

@supports (height: 100dvh) {

  .hero-section {

    height: 100dvh;

  }

}

@media (pointer: coarse) {

  input[type="text"],

  input[type="search"],

  button {

    min-height: 44px;

  }

  .aurora-blob {

    opacity: 0.4;

    animation: none;

  }

}

.fixed .xterm,

body:has([data-darwin-workspace]) {

  cursor: auto;

}

[data-darwin-workspace] * {

  cursor: auto;

}

.xterm .xterm-viewport {

  scrollbar-width: thin;

  scrollbar-color: #141820 transparent;

}

.xterm .xterm-viewport::-webkit-scrollbar {

  width: 6px;

}

.xterm .xterm-viewport::-webkit-scrollbar-track {

  background: transparent;

}

.xterm .xterm-viewport::-webkit-scrollbar-thumb {

  background: #141820;

  border-radius: 3px;

}

.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {

  background: #0a6b60;

}

.xterm,

.xterm .xterm-screen {

  height: 100% !important;

}

@keyframes sheet-up {

  from { transform: translateY(100%); }

  to   { transform: translateY(0); }

}

@keyframes glow-breathe {

  0%, 100% { opacity: 0.55; }

  50%      { opacity: 1; }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

  .mask-line-inner {

    transform: none !important;

  }

  .fade-rise {

    opacity: 1 !important;

    transform: none !important;

  }

  .aurora-blob {

    animation: none !important;

  }

}