:root {
  --bg: #ffffff;
  --dark: #0b0f19;
  --dark-2: #10141f;

  --text: #0f172a;
  --text2: #475569;
  --text3: #64748b;
  --muted: #94a3b8;

  --dark-text: #f8fafc;
  --dark-text2: #94a3b8;
  --dark-muted: #64748b;

  --border: #e5e7eb;
  --border-soft: #f1f5f9;
  --dark-border: rgba(255,255,255,0.09);
  --dark-border-soft: rgba(255,255,255,0.06);

  --accent: #16a34a;
  --accent-soft: rgba(22,163,74,0.1);
  --accent-dark: #4ade80;

  --ink: #0f172a;
  --ink-soft: rgba(15,23,42,0.06);

  --radius: 20px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.2, 0.65, 0.3, 0.9);
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.4"/></svg>');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

::selection { background: var(--text); color: #fff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--text); border-radius: 10px; }

/* grain texture over the whole page */
body::before {
  content: '';
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1;
  background-image: var(--grain);
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* boxed container border lines, framing the page like a canvas margin */
.frame-border {
  position: fixed; top: 0; bottom: 0; width: 1px;
  background: var(--border);
  z-index: 2; pointer-events: none;
}
.frame-border.left { left: 28px; }
.frame-border.right { right: 28px; }

/* entry gate */
.gate {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999;
  height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--bg);
  display: flex;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.gate.hidden { opacity: 0; visibility: hidden; }
.gate-side { position: absolute; top: 8vh; width: auto; pointer-events: none; }
.gate-side-left { left: 6vw; height: min(24vh, 200px); }
.gate-side-right {
  right: 6vw; height: min(30vh, 250px);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
@media (max-width: 820px) {
  .gate-side { top: max(2vh, env(safe-area-inset-top)); height: min(15vh, 110px); }
  .gate-side-left { left: 5vw; }
  .gate-side-right { right: 5vw; height: min(13vh, 96px); }
  .gate.typing .gate-side { display: none; }
}
@media (max-height: 520px) { .gate-side { display: none; } }
.gate-card {
  max-width: 420px; width: 100%; margin: auto;
  padding: 2.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 10px 40px rgba(15,23,42,0.06);
}
.gate-img {
  display: block; width: 100%; max-height: 42vh;
  object-fit: contain; margin: -1rem 0 1rem;
}
.gate-card.wide { max-width: 560px; }
.gate-text.typed { text-align: left; font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }
.gate-text { font-size: 1.25rem; font-weight: 500; color: var(--text); margin-bottom: 1.75rem; }
.gate-actions { display: flex; gap: 0.75rem; justify-content: center; }
.gate-btn {
  font: inherit; font-size: 0.95rem; cursor: pointer;
  padding: 0.6rem 1.75rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gate-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* one section at a time (hash routes) */
section[id]:not(.active-view) { display: none; }

@media (max-width: 480px) {
  .gate-card { padding: 1.75rem 1.25rem; }
  .gate-text { font-size: 1.1rem; margin-bottom: 1.25rem; }
  .gate-img { max-height: 32vh; }
}