/* hepka site styles. Sections: tokens, base, header, intro, links, pages, cards, footer, marquee. */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #8a8a8a;
  --chip: #f3f3f3;
  --line: #e8e8e8;
  --c-games: #5558e6;
  --c-work: #d6336c;
  --c-coding: #0d9488;
  --c-building: #d97706;
  --c-uis: #9333ea;
  --sel: #1a8cff;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b;
    --fg: #ededed;
    --muted: #8b8b8b;
    --chip: #1a1a1a;
    --line: #2a2a2a;
    --c-games: #8f91ff;
    --c-work: #f06292;
    --c-coding: #2dd4bf;
    --c-building: #fbbf24;
    --c-uis: #c084fc;
    --sel: #4aa8ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0b;
  --fg: #ededed;
  --muted: #8b8b8b;
  --chip: #1a1a1a;
  --line: #2a2a2a;
  --c-games: #8f91ff;
  --c-work: #f06292;
  --c-coding: #2dd4bf;
  --c-building: #fbbf24;
  --c-uis: #c084fc;
  --sel: #4aa8ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  padding-inline: 20px;
  padding-block: 0;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 640px; margin: 0 auto; padding-block: 56px 48px; }
p { margin: 0; }
svg { display: block; flex: none; }

.top { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--chip);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--chip);
  margin: 4px;
}
.who { flex: 1; min-width: 0; }
h1 { font-size: 17px; line-height: 1.3; font-weight: 500; margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 4px; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.toggle:hover { background: var(--chip); color: var(--fg); }
a.toggle { text-decoration: none; }

[hidden] { display: none !important; }
.view { display: flex; flex-direction: column; gap: 28px; }

.sel {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.86em;
  line-height: 1.5;
  padding: 0 7px;
  margin: 0 5px;
  border: 1.5px solid var(--sel);
}
.sel::before {
  content: "";
  position: absolute;
  inset: -4.5px;
  pointer-events: none;
  background:
    linear-gradient(var(--sel), var(--sel)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--sel), var(--sel)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--sel), var(--sel)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--sel), var(--sel)) 100% 100% / 7px 7px no-repeat;
}

.l {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
  transition: opacity 0.15s ease;
}
.l:hover { opacity: 0.7; }
.l.games { color: var(--c-games); }
.l.work { color: var(--c-work); }
.l.coding { color: var(--c-coding); }
.l.building { color: var(--c-building); }
.l.uis { color: var(--c-uis); }

.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 15px; align-self: flex-start; }
.back:hover { color: var(--fg); }
h2 { font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0; }
.sub { color: var(--muted); margin-top: -18px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; min-width: 0; color: var(--fg); text-decoration: none; }
.thumb { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; background: var(--chip); overflow: hidden; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
a.card:hover .thumb { opacity: 0.85; }
.card h3 { font-size: 16px; font-weight: 500; margin: 10px 0 0; line-height: 1.4; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 2px; }
.card .go { color: var(--c-games); font-size: 14px; margin-top: 4px; }
.ph .thumb { background: transparent; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.ph h3, .ph p { color: var(--muted); }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg a {
  padding: 2px 14px;
  border-radius: 10px;
  background: var(--chip);
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.8;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg a:hover { color: var(--fg); }
.seg a[aria-current="page"] { background: var(--fg); color: var(--bg); }

hr { border: 0; border-top: 1px solid var(--line); margin: 56px 0 28px; }
footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); }
.social { display: flex; gap: 2px; margin-right: -8px; }
.note { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--muted); user-select: text; -webkit-user-select: text; }

:focus-visible { outline: 2px solid var(--sel); outline-offset: 3px; border-radius: 4px; }

/* Marquee: game names scrolling right to left, seamless loop */
.marquee-section { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.marquee-section h2 { font-size: 14px; color: var(--muted); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.track { display: flex; width: max-content; animation: scroll-left var(--duration, 30s) linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track span {
  flex: none;
  padding-right: 48px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.track .ph { font-weight: 400; opacity: 0.6; }
@keyframes scroll-left { to { transform: translateX(-50%); } }

/* Small screens and reduced motion */
@media (max-width: 480px) { .wrap { padding-block: 44px 40px; } }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .track { animation: none; }
  .marquee { overflow-x: auto; }
}