:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f1f0ec;
  background: #111110;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: #aaa7a4;
  --line: #33312f;
  --accent: #a970ff;
  --warm: #efcf72;
  --surface: #1b1a1b;
  --surface-raised: #232124;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: #111110; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position:absolute; top:12px; left:12px; z-index:5; padding:10px 14px; transform:translateY(-160%); border-radius:4px; background:var(--accent); color:#10110f; text-decoration:none; }
.skip-link:focus { transform:translateY(0); }
.page-shell { width:min(100% - 64px, 1120px); min-height:100vh; margin-inline:auto; display:flex; flex-direction:column; }
.site-header { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { font-size:20px; font-weight:760; letter-spacing:-.055em; text-decoration:none; }
.wordmark::after { content:"."; color:var(--warm); }
.site-nav { display:flex; gap:32px; }
.site-nav a,.site-footer a { color:var(--muted); font-size:14px; text-decoration:none; transition:color .16s ease; }
.site-nav a:hover,.site-footer a:hover,.section-link:hover { color:var(--accent); }
main { flex:1; }
.intro { min-height:370px; display:flex; align-items:center; padding:60px 0 67px; border-bottom:1px solid var(--line); }
.intro-copy-block { max-width:760px; padding:12px 0; }
.eyebrow { margin:0; color:#c2a5f5; font-size:11px; font-weight:700; letter-spacing:.15em; line-height:1.6; text-transform:uppercase; }
.status-dot { display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; border-radius:50%; background:var(--warm); }
h1,h2,p { margin-top:0; }
h1 { max-width:630px; margin:18px 0 15px; font-size:clamp(64px,9vw,112px); font-weight:760; letter-spacing:-.065em; line-height:.9; }
h1 span { color:var(--warm); }
.intro-copy { max-width:470px; margin:0; color:#b7b8b1; font-size:clamp(17px,2vw,21px); line-height:1.55; }
.intro-topics { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 0; }
.intro-topics span { padding:6px 10px; border:1px solid #39353d; border-radius:3px; color:#c5c0c9; font-size:12px; }
.intro-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:29px; }
.primary-link,.secondary-link { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:18px; padding:0 18px; border:1px solid var(--line); border-radius:4px; font-size:14px; font-weight:650; text-decoration:none; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.primary-link { border-color:var(--accent); background:var(--accent); color:#17131d; }
.primary-link:hover { transform:translateY(-2px); background:#bd99fb; }
.secondary-link { color:#e9e9e4; }
.secondary-link:hover { transform:translateY(-2px); border-color:#73766a; background:var(--surface); }
.watch-section { padding:36px 0 34px; border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:19px; }
.section-heading h2,.watch-section h2 { margin:7px 0 0; font-size:clamp(24px,3vw,32px); font-weight:680; letter-spacing:-.055em; }
.section-link { color:#c7adef; font-size:14px; text-decoration:none; transition:color .16s ease; }
.live-player { min-height:300px; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.live-player iframe { display:block; width:100%; height:100%; min-height:300px; border:0; }
.live-player[hidden] { display:none; }
#twitch-embed { width:100%; height:100%; min-height:300px; }
.watch-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:17px; color:var(--muted); font-size:14px; }
.social-section { padding:38px 0 42px; border-bottom:1px solid var(--line); }
.social-section .section-heading { margin-bottom:22px; }
.tiktok-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tiktok-card { min-width:0; overflow:hidden; border:1px solid #34352f; border-radius:7px; background:var(--surface); transition:transform .2s ease,border-color .2s ease; }
.tiktok-card:hover { transform:translateY(-3px); border-color:#75599d; }
.tiktok-frame { position:relative; aspect-ratio:9/16; background:#191a17; }
.tiktok-player { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.tiktok-card h3 { min-height:57px; margin:0; padding:14px 15px; font-size:14px; font-weight:600; line-height:1.45; }
.embed-note { margin:15px 0 0; color:var(--muted); font-size:13px; }
.embed-note a { color:#d8d9d2; text-underline-offset:3px; }
.channels { padding:37px 0 0; }
.section-heading h2,.about h2 { margin-bottom:0; font-size:22px; font-weight:680; letter-spacing:-.045em; }
.channel-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:20px 0 0; padding:0; list-style:none; }
.channel-link { position:relative; display:flex; min-height:91px; flex-direction:column; justify-content:center; gap:5px; padding:17px 46px 17px 18px; border:1px solid var(--line); border-radius:5px; background:var(--surface); text-decoration:none; transition:border-color .15s ease,background .15s ease; }
.channel-link:hover { border-color:#747c5d; background:var(--surface-raised); }
.channel-name { font-size:15px; font-weight:650; }
.channel-handle { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.arrow { position:absolute; top:50%; right:18px; color:var(--accent); font-size:19px; transform:translateY(-50%); }
.about { max-width:720px; margin-top:72px; padding:28px 0 76px; border-top:1px solid var(--line); }
.about h2 { margin:10px 0 13px; font-size:26px; }
.about>p:last-child { max-width:650px; margin:0; color:#aeb0a8; font-size:16px; line-height:1.75; }
.site-footer { display:flex; min-height:66px; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media(max-width:700px) {
 .page-shell { width:min(100% - 40px,560px); }
 .site-header { min-height:70px; }
 .site-nav { gap:18px; }
 .intro { min-height:0; padding:59px 0 42px; }
 .intro-copy-block { padding:12px 0 0; }
 h1 { font-size:clamp(65px,15vw,100px); }
 .watch-section,.social-section { padding-top:30px; }
 .tiktok-list { grid-auto-flow:column; grid-auto-columns:minmax(225px,75%); grid-template-columns:none; gap:13px; overflow-x:auto; padding:0 1px 11px; scroll-snap-type:x mandatory; scrollbar-color:#596346 transparent; }
 .tiktok-card { scroll-snap-align:start; }
 .channel-list { grid-template-columns:1fr; gap:9px; }
 .channel-link { min-height:75px; }
 .about { margin-top:57px; padding-bottom:57px; }
}
@media(max-width:380px) {
 .page-shell { width:calc(100% - 32px); }
 .site-nav { gap:13px; }
 .site-nav a { font-size:13px; }
 .section-heading { align-items:flex-start; gap:12px; }
 .section-link { font-size:13px; text-align:right; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }

/* Creator profile: real content, restrained violet and warm yellow. */
.site-nav a { display:inline-flex; align-items:center; min-height:44px; }
.intro { display:grid; grid-template-columns:1.12fr 1fr; gap:64px; padding:56px 0; }
h1 { font-size:clamp(56px,7.4vw,94px); }
.intro-copy { max-width:420px; }
.hero-feature { display:block; min-width:0; border:1px solid #49414f; border-radius:12px; background:#1a181c; overflow:hidden; text-decoration:none; transform:rotate(2deg); transition:transform .2s ease,border-color .2s ease; box-shadow:12px 14px 0 #a970ff0c; }
.hero-feature:hover { transform:rotate(0); border-color:var(--accent); }
.hero-feature-top { display:flex; justify-content:space-between; gap:12px; padding:14px 18px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#beb2cb; }
.hero-shot { position:relative; height:285px; overflow:hidden; background:#27232c; }
.hero-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 34%; }
.hero-play { position:absolute; right:16px; bottom:16px; display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--warm); color:#17131d; font-size:24px; }
.hero-feature-caption { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; font-size:18px; font-weight:650; }
.hero-feature-caption small { display:block; margin-top:6px; color:var(--muted); font-size:12px; font-weight:400; }
.watch-section { margin:25px 0 0; padding:27px 28px; border:1px solid #39313f; border-left:3px solid var(--accent); border-radius:8px; background:#1b171f; }
.watch-section .section-heading { align-items:center; }
.live-status { margin:10px 0 0; color:#b9aebf; font-size:13px; line-height:1.6; }
.live-status[data-state="live"] { color:var(--warm); }
.watch-footer { border-top:1px solid #39313f; padding-top:16px; }
.social-section { padding-top:55px; }
.section-heading h2 { font-size:clamp(24px,3vw,32px); line-height:1.2; }
.section-link { display:inline-flex; align-items:center; min-height:44px; gap:9px; flex-shrink:0; }
.tiktok-list { max-width:990px; margin-inline:auto; gap:24px; }
.tiktok-card { border-radius:9px; }
.tiktok-card h3 { padding:17px 16px; min-height:70px; }
.embed-note { text-align:center; }
.about { max-width:none; display:grid; grid-template-columns:1fr 1.4fr; gap:0 64px; padding-bottom:64px; }
.about .eyebrow { grid-column:1; }
.about h2 { grid-column:1; }
.about>p:last-child { grid-column:2; grid-row:1 / span 2; }
.section-link:hover span,.intro-actions a:hover span { transform:translate(2px,-2px); }
.section-link span,.intro-actions a span { transition:transform .15s ease; }
@media(max-width:900px) and (min-width:701px) { .intro { gap:25px; } .hero-shot { height:260px; } .intro-actions { gap:10px; } .intro-actions a { padding-inline:12px; font-size:12px; } }
@media(max-width:700px) {
 .intro { grid-template-columns:1fr; gap:36px; padding:40px 0; }
 .hero-feature { transform:none; max-width:460px; width:100%; }
 .hero-shot { height:255px; }
 h1 { font-size:clamp(53px,14vw,82px); }
 .intro-topics { margin-top:17px; }
 .intro-actions { margin-top:23px; }
 .watch-section { padding:22px 18px; }
 .watch-section .section-heading { align-items:flex-start; flex-direction:column; gap:5px; }
 .section-heading { align-items:flex-start; }
 .social-section .section-heading { flex-direction:column; gap:3px; }
 .social-section { padding-top:40px; }
 .tiktok-list { grid-auto-columns:minmax(240px,84%); gap:16px; }
 .about { display:block; }
 .footer-note { display:none; }
}
@media(prefers-reduced-motion:reduce) { .hero-feature { transform:none; } }

.jesper-trigger { display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;border:0;background:transparent;color:var(--warm);font:inherit;font-size:14px;cursor:pointer; }
.jesper-trigger:hover { color:#ffe4a0; }
.audio-status { color:var(--warm);font-size:14px;padding:12px 0; }
@media(max-width:700px) { .site-header { flex-wrap:wrap;gap:5px;padding:14px 0; } .site-nav { flex-wrap:wrap;gap:16px; } }
/* Larger navigation controls, including comfortable touch targets. */
.site-nav { align-items:center;gap:8px; }
.site-nav a,.site-nav .jesper-trigger { min-height:48px;padding:10px 12px;border-radius:5px;font-size:16px;font-weight:600;line-height:1.4; }
.site-nav a:hover,.site-nav .jesper-trigger:hover { background:#a970ff12; }
.site-nav .game-link { color:var(--warm); }
@media(max-width:1000px) { .site-header { flex-wrap:wrap;justify-content:flex-start;gap:6px 24px;padding:15px 0; } .site-nav { flex-wrap:wrap;gap:4px; } }
@media(max-width:700px) { .site-nav { width:100%; } .site-nav a,.site-nav .jesper-trigger { font-size:15px;min-height:48px;padding:10px; } }

.site-nav .nav-tiktok { color:#f5f5f5;box-shadow:inset 0 -2px #25f4ee66;text-shadow:1px 0 #fe2c5580,-1px 0 #25f4ee80; }
.site-nav .nav-twitch { color:#c7a5ff;box-shadow:inset 0 -2px #9146ff44; }
.site-nav .nav-youtube { color:#ff8585;box-shadow:inset 0 -2px #ff003344; }
.site-nav .nav-tiktok:hover { background:#25f4ee12;box-shadow:inset 0 -2px #fe2c55; }
.site-nav .nav-twitch:hover { background:#9146ff20;box-shadow:inset 0 -2px #a970ff; }
.site-nav .nav-youtube:hover { background:#ff003312;box-shadow:inset 0 -2px #ff0033; }