/* Ciro Goud: brand tokens and shared chrome.
   One accent for the whole site. Change --sc-accent / --accent-rgb here and
   every page, the 3D world and the canvas thread follow. */
:root {
  --sc-canvas: #0A0B0D;  --sc-surface: #131519;
  --sc-ink: #F2F0EB;     --sc-ink-soft: #A3A39C;
  --sc-accent: #5CE1A6;  --sc-accent-ink: #06170F;
  --accent-hover: #80EBBD;
  --accent-rgb: 92, 225, 166;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 220 30% 2%;
  --gut: clamp(1rem, 4.5vw, 5rem);
  --ink-08: color-mix(in oklab, var(--sc-ink) 8%, transparent);
  --ink-14: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --ink-30: color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
body { background: var(--sc-canvas); letter-spacing: 0.002em; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.9rem, 2.2vw, 1.6rem) var(--gut);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 640;
  font-size: 1.12rem; letter-spacing: -0.01em; text-decoration: none; border-radius: 4px;
}
.mark__sq { width: 0.62rem; height: 0.62rem; background: var(--sc-accent); border-radius: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 2.9rem; padding: 0 1.25rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-text); font-weight: 560; font-size: 0.98rem;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--ink-30); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-hover); box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.4); }
  .btn--ghost:hover { background: var(--ink-08); box-shadow: inset 0 0 0 1px var(--sc-ink); }
}
.btn svg { width: 1.05em; height: 1.05em; }
.textlink { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--sc-accent); font-weight: 540; text-decoration: none; border-radius: 4px; }
.textlink:hover { text-decoration: underline; }