:root {
  --paper: #F7F2E9;
  --ink: #17130D;
  --accent: #E2562B;   /* burnt terracotta */
  --cobalt: #2647D8;   /* studio cobalt */
  --card: #FFFDF8;
  --line: rgba(23, 19, 13, 0.14);
  --shadow: #17130D;
}
html.dark {
  --paper: #0C0D11;
  --ink: #F2ECE0;
  --accent: #FF7A3C;   /* amber */
  --cobalt: #8AA0FF;   /* periwinkle */
  --card: #14151B;
  --line: rgba(242, 236, 224, 0.16);
  --shadow: #000000;
}

* { border-color: var(--line); }

body {
  background-color: var(--paper);
  color: var(--ink);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -13px -13px;
}

/* Paper grain overlay (light world) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.theme-tx, .theme-tx * {
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, fill .5s ease, stroke .5s ease;
}

.hard {
  box-shadow: 5px 5px 0 0 var(--shadow);
  transition: transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s ease;
}
.hard:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 0 var(--shadow); }
.hard:active { transform: translate(5px,5px); box-shadow: 0 0 0 0 var(--shadow); }

/* ░░ DARK = a deliberately different world ░░
   cool slate · crisp light card-lines (no neon glow) · Space Grotesk headings · faint CRT grid */
html.dark .font-display { font-family: "Space Grotesk", "Fraunces", sans-serif; letter-spacing: -0.012em; }
html.dark body {
  background-image:
    linear-gradient(rgba(94,227,138,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,227,138,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
}
html.dark body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0, rgba(0,0,0,.26) 1px, transparent 1px, transparent 3px);
  opacity: .3;
}
/* Cards keep crisp light borders + solid shadow — no glow */
html.dark .hard { box-shadow: 5px 5px 0 0 #000; }
html.dark .hard:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 0 #000; }
html.dark .hard:active { transform: translate(5px,5px); box-shadow: 0 0 0 0 #000; }
html.dark .scribble::after { border-style: dashed; }

.ink-border { border: 2px solid var(--ink); }

/* Text-only wordmark (logo) — uses the heading font (font-display), just tighter */
.wordmark { letter-spacing: -0.03em; }

/* Eyebrow shown as a clean bordered band (not glowing) */
.eyebrow-band {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: .45rem .85rem;
  box-shadow: 3px 3px 0 0 var(--shadow);
}

.sticker {
  transform: rotate(-2deg);
  clip-path: polygon(1% 6%, 99% 0%, 100% 94%, 4% 100%);
}

/* Hand-drawn circle around a word */
.scribble { position: relative; display: inline-block; }
.scribble::after {
  content: ""; position: absolute; inset: -22% -10% -28% -10%;
  border: 3px solid var(--accent);
  border-radius: 47% 53% 44% 56% / 42% 58% 42% 58%;
  transform: rotate(-2.5deg); z-index: -1; pointer-events: none;
}

.outline-ink { -webkit-text-stroke: 2px var(--ink); color: transparent; }

/* Marquee */
@keyframes slide { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee { animation: slide 32s linear infinite; }
.marquee-track:hover .marquee { animation-play-state: paused; }

/* Float */
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-10px) rotate(1.2deg);} }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Scanlines on the video */
.scanlines {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) 1px, transparent 1px, transparent 3px);
}

/* Spin */
@keyframes spin { to { transform: rotate(360deg);} }
.spin { animation: spin 18s linear infinite; transform-origin: center; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Hero staggered rise */
@keyframes rise { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform:none;} }
.rise { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }

/* Range slider */
input[type=range].slider { -webkit-appearance:none; appearance:none; width:100%; background:transparent; cursor:pointer; }
input[type=range].slider::-webkit-slider-runnable-track { height:8px; background:var(--card); border:2px solid var(--ink); }
input[type=range].slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; margin-top:-7px; height:20px; width:20px; background:var(--accent); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); transition: transform .1s ease, background .2s ease; }
input[type=range].slider::-webkit-slider-thumb:hover { transform: scale(1.15); background:var(--cobalt); }
input[type=range].slider::-moz-range-track { height:8px; background:var(--card); border:2px solid var(--ink); }
input[type=range].slider::-moz-range-thumb { height:20px; width:20px; background:var(--accent); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }

.notepad-tear { mask-image: radial-gradient(circle at 11px 0, transparent 10px, #000 10.5px); mask-size: 22px 100%; }

::selection { background: var(--accent); color: #fff; }

/* Hotspot pulse */
@keyframes ping2 { 0%{ box-shadow:0 0 0 0 var(--accent);} 70%{ box-shadow:0 0 0 10px rgba(0,0,0,0);} 100%{ box-shadow:0 0 0 0 rgba(0,0,0,0);} }
.hot { animation: ping2 2.2s ease-out infinite; }

.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--ink); }

/* Character hotspots */
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:9999px;
  border:2px solid var(--ink); background:var(--cobalt); color:#fff;
  font-size:12px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:20; box-shadow:2px 2px 0 var(--ink);
  transition: transform .15s ease, background .2s ease;
}
.hotspot:hover{ transform:translate(-50%,-50%) scale(1.25); background:var(--accent); }
.hotspot.active{ background:var(--accent); transform:translate(-50%,-50%) scale(1.2); }