:root {
  --ink: #4c2a00;
  --ink-soft: #77511e;
  --sun: #ffd93f;
  --cream: #fffdf0;
  --purple: #7444c8;
  --green: #46c56a;
  --grey: #96948c;
  --card-shadow: 0 32px 90px rgba(105, 66, 0, .27), 0 7px 0 rgba(119, 76, 0, .16);
  --rounded: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f9ce37; }
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--rounded);
  background:
    radial-gradient(circle at 17% 14%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.7) 0 4px, transparent 5px),
    linear-gradient(135deg, #fff2a8 0%, #ffd83f 42%, #ffbb3c 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: -70px;
  z-index: -4;
  background: url('/assets/portrait.png') 88% 45% / min(54vw,760px) auto no-repeat;
  filter: blur(34px) saturate(1.12);
  opacity: .15;
  transform: scale(1.08);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: radial-gradient(rgba(104,62,0,.09) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.ambient { position: fixed; border-radius: 50%; filter: blur(22px); z-index: -2; opacity: .42; pointer-events: none; }
.ambient-one { width: 300px; height: 300px; background: #ff6daf; left: -120px; top: 17vh; }
.ambient-two { width: 380px; height: 380px; background: #6b58d9; right: -220px; top: 12vh; opacity: .22; }
.sparkles i { position: fixed; z-index: -1; width: 11px; height: 11px; background: #fffbe2; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.16); animation: twinkle 3.2s ease-in-out infinite; }
.sparkles i:nth-child(1) { left: 8%; top: 16%; }
.sparkles i:nth-child(2) { left: 20%; top: 75%; animation-delay: .7s; }
.sparkles i:nth-child(3) { left: 89%; top: 24%; animation-delay: 1.4s; }
.sparkles i:nth-child(4) { left: 82%; top: 73%; animation-delay: 2.1s; }
.sparkles i:nth-child(5) { left: 54%; top: 7%; animation-delay: .35s; }
.sparkles i:nth-child(6) { left: 44%; top: 85%; animation-delay: 1.05s; }
@keyframes twinkle { 0%,100% { transform: scale(.65); opacity: .45; } 50% { transform: scale(1.2); opacity: 1; } }

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px) clamp(16px, 4vw, 64px) max(190px, env(safe-area-inset-bottom));
  position: relative;
  z-index: 2;
}
.profile-card {
  width: min(1120px, 100%);
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(92,54,0,.92);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255,255,247,.96), rgba(255,247,188,.94));
  box-shadow: var(--card-shadow);
  transform-style: preserve-3d;
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 10%, rgba(255,255,255,.95), transparent 27%), linear-gradient(115deg, transparent 0 43%, rgba(255,211,52,.17) 43% 100%);
}
.profile-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(96,56,0,.14);
  border-radius: 28px;
  pointer-events: none;
}

.ticker { min-height: 56px; display: grid; grid-template-columns: auto 1fr; align-items: stretch; border-bottom: 3px solid var(--ink); background: rgba(255,255,255,.62); position: relative; z-index: 6; }
.ticker-status { display: flex; align-items: center; gap: 10px; padding: 0 22px; border-right: 3px solid var(--ink); white-space: nowrap; letter-spacing: .08em; }
.status-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--grey); box-shadow: 0 0 0 5px rgba(150,148,140,.18); transition: .25s ease; }
.ticker.is-live .status-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(70,197,106,.20), 0 0 18px rgba(70,197,106,.8); }
.ticker.is-live { background: linear-gradient(90deg,rgba(232,255,235,.85),rgba(255,255,255,.7)); }
.ticker-track { overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.ticker-copy { display: flex; width: max-content; min-width: max-content; transform: translate3d(0,0,0); will-change: transform; }
.ticker-copy.is-moving { animation: ticker-roll var(--ticker-duration,24s) linear infinite; }
.ticker-group { display: flex; flex: 0 0 auto; min-width: max-content; }
.ticker-item { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0 30px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.ticker-item::after { content: "✦"; margin-left: 30px; color: #e59f00; }
@keyframes ticker-roll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.card-grid { min-height: 650px; display: grid; grid-template-columns: 53% 47%; position: relative; z-index: 3; }
.content-column { padding: clamp(38px,5vw,70px) clamp(28px,5vw,68px) 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; z-index: 5; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fff7a9; font-size: .76rem; font-weight: 1000; letter-spacing: .1em; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg); }
.eyebrow span:first-child,.eyebrow span:last-child { font-size: 1rem; letter-spacing: 0; }
.wordmark-wrap { width: min(530px,100%); min-height: 136px; display: flex; align-items: center; margin: 18px 0 8px; }
.wordmark { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 9px 0 rgba(255,255,255,.7)); }
.tagline { max-width: 560px; margin: 0 0 24px; font-size: clamp(1.06rem,2vw,1.34rem); line-height: 1.48; color: #6c481c; font-weight: 750; }

.watch-button { width: min(520px,100%); min-height: 82px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 11px 18px 11px 12px; color: var(--ink); text-decoration: none; border: 3px solid var(--ink); border-radius: 23px; background: linear-gradient(135deg,#fff3a2 0%,#ffd950 65%,#ffc83f 100%); box-shadow: 7px 8px 0 var(--ink); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease, background .25s ease; }
.watch-button:not(.is-disabled):hover { transform: translate(-2px,-3px) rotate(-.35deg); box-shadow: 10px 12px 0 var(--ink); filter: saturate(1.12); }
.watch-button:not(.is-disabled):active { transform: translate(5px,6px); box-shadow: 2px 2px 0 var(--ink); }
.watch-button.is-disabled { cursor: not-allowed; opacity: 1; color: #79571f; background: linear-gradient(135deg,#fff6b8 0%,#ffe176 62%,#f8ca4d 100%); filter: saturate(.72); box-shadow: 5px 6px 0 rgba(76,42,0,.82); }
.watch-button.is-disabled .play-disc,.watch-button.is-disabled .arrow,.watch-button.is-disabled .live-signal { opacity: .58; }
.watch-button.is-disabled:hover,.watch-button.is-disabled:active { transform: none; box-shadow: 5px 6px 0 rgba(76,42,0,.82); filter: saturate(.72); }
.watch-button.is-live { color: #3e2600; background: linear-gradient(135deg,#fff377 0%,#ffd329 54%,#ffad25 100%); box-shadow: 7px 8px 0 var(--ink), 0 0 0 7px rgba(70,197,106,.16); }
.play-disc { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.76); border: 2px solid var(--ink); }
.play-disc svg { width: 28px; fill: currentColor; }
.watch-copy { min-width: 0; }
.watch-button small,.social small { display: block; opacity: .77; font-size: .66rem; letter-spacing: .13em; font-weight: 1000; }
.watch-button b { display: block; font-size: 1.24rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.live-signal { width: 13px; height: 13px; border-radius: 50%; background: #cba72e; box-shadow: 0 0 0 5px rgba(203,167,46,.18); }
.watch-button.is-live .live-signal { background: var(--green); box-shadow: 0 0 0 5px rgba(70,197,106,.22),0 0 18px rgba(70,197,106,.8); }
.watch-button .arrow { width: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.social-area { width: min(520px,100%); display: grid; gap: 12px; margin-top: 18px; }
.social-primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.social-secondary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.social { min-width: 0; display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; box-shadow: 4px 5px 0 rgba(76,42,0,.92); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease; }
.social:hover { transform: translateY(-3px) rotate(-.7deg); box-shadow: 6px 8px 0 rgba(76,42,0,.92); filter: saturate(1.08); }
.social-large { min-height: 70px; padding: 11px 13px; border-radius: 18px; }
.social-small { min-height: 62px; padding: 9px 8px; border-radius: 16px; }
.social-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.74); border: 2px solid rgba(76,42,0,.78); }
.social-icon svg { width: 22px; height: 22px; fill: currentColor; }
.social b { display: block; font-size: 1rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.social-small small { font-size: .58rem; letter-spacing: .1em; }
.social-small b { font-size: .88rem; }
.discord { background: linear-gradient(135deg,#c9c1ff,#a89df9); }
.twitch { background: linear-gradient(135deg,#e3c3ff,#c18eff); }
.x-social { background: linear-gradient(135deg,#fff,#f2ede4); }
.tiktok { background: linear-gradient(135deg,#ffb8cf,#89f2ed); }
.youtube { background: linear-gradient(135deg,#ffdad7,#ff9c93); }
.social.is-unconfigured { opacity: .62; filter: saturate(.45); cursor: not-allowed; }

.art-column { position: relative; min-height: 650px; }
.sun-disc { position: absolute; width: 500px; aspect-ratio: 1; border-radius: 50%; right: -55px; top: 46px; background: radial-gradient(circle at 35% 28%,#fff9bd,#ffd738 58%,#ffb325); border: 3px solid rgba(92,54,0,.58); box-shadow: inset -22px -18px 0 rgba(223,132,0,.12), 0 22px 60px rgba(255,183,24,.35); }
.hero-art { position: absolute; z-index: 4; height: 91%; max-width: 94%; object-fit: contain; right: -6px; bottom: -8px; filter: drop-shadow(0 22px 17px rgba(74,36,0,.28)); }
.chibi-sticker { position: absolute; z-index: 8; width: 128px; left: -20px; bottom: 30px; filter: drop-shadow(6px 7px 0 rgba(76,42,0,.85)); transform: rotate(-8deg); animation: bob 4.2s ease-in-out infinite; }
.yippee-sticker { position: absolute; z-index: 7; width: 126px; right: 2px; bottom: 10px; transform: rotate(8deg); filter: drop-shadow(5px 7px 0 rgba(76,42,0,.7)); animation: bob 4.8s ease-in-out infinite .8s; }
.goo-sticker { position: absolute; z-index: 2; width: 108px; left: 22px; top: 44px; opacity: .92; transform-origin: 50% 78%; filter: drop-shadow(4px 6px 0 rgba(76,42,0,.5)); animation: goo-float 5.4s ease-in-out infinite; }
.doodle { position: absolute; z-index: 9; font-size: 2.2rem; color: #fff; text-shadow: 2px 2px 0 var(--ink); animation: spin-wiggle 5s ease-in-out infinite; }
.doodle-a { left: 24px; top: 195px; }
.doodle-b { right: 195px; top: 92px; animation-delay: 1s; }
.doodle-c { right: 34px; top: 266px; animation-delay: 2s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-11px) rotate(-3deg); } }
@keyframes goo-float { 0%,100% { transform: translate3d(0,0,0) rotate(-8deg) scale(1); } 32% { transform: translate3d(5px,-9px,0) rotate(-3deg) scale(1.04,.98); } 67% { transform: translate3d(-3px,-4px,0) rotate(-11deg) scale(.98,1.03); } }
@keyframes spin-wiggle { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(9deg) scale(1.12); } }

.card-footer { min-height: 51px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; border-top: 3px solid var(--ink); background: #ffde54; font-size: .82rem; font-weight: 900; letter-spacing: .04em; text-align: center; padding: 10px 20px; }
.stretch-corner { position: fixed; z-index: 1; width: min(210px,22vw); left: -22px; bottom: 95px; opacity: .46; filter: drop-shadow(0 12px 16px rgba(71,43,0,.22)); pointer-events: none; }
.portrait-ghost { position: fixed; z-index: 0; width: min(330px,28vw); right: -95px; bottom: 56px; opacity: .11; filter: blur(1px); transform: rotate(-7deg); pointer-events: none; }
.sunflower-field { position: fixed; z-index: 0; left: 0; right: 0; bottom: 0; height: clamp(92px,12vw,180px); background: url('/assets/sunflower-banner.png') center bottom / cover no-repeat; pointer-events: none; }
.snail-lane { position: fixed; z-index: 20; inset: 0; pointer-events: none; overflow: hidden; }
#snailRunner { position: absolute; top: 0; left: 0; width: clamp(80px,5.3vw,110px); height: auto; display: block; visibility: hidden; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 7px 4px rgba(54,34,0,.25)); }

@media (min-width: 901px) {
  .page-shell { padding: 24px 22px max(150px, env(safe-area-inset-bottom)); }
  .profile-card { width: min(1400px, calc(100vw - 44px)); border-radius: 42px; }
  .profile-card::after { inset: 14px; border-radius: 31px; }
  .ticker { min-height: 64px; }
  .ticker-status { padding-inline: 27px; font-size: 1.03rem; }
  .status-dot { width: 15px; height: 15px; }
  .ticker-item { padding-inline: 38px; font-size: 1.02rem; }
  .ticker-item::after { margin-left: 38px; }
  .card-grid { min-height: 750px; grid-template-columns: 52% 48%; }
  .content-column { padding: 50px clamp(48px, 4.5vw, 78px) 40px; }
  .eyebrow { padding: 10px 16px; font-size: .86rem; }
  .wordmark-wrap { width: min(620px, 100%); min-height: 158px; margin-top: 22px; }
  .tagline { max-width: 620px; margin-bottom: 28px; font-size: clamp(1.22rem, 1.45vw, 1.55rem); }
  .watch-button { width: min(610px, 100%); min-height: 94px; gap: 17px; padding: 13px 22px 13px 14px; border-radius: 26px; }
  .play-disc { width: 62px; height: 62px; border-radius: 19px; }
  .play-disc svg { width: 32px; }
  .watch-button small { font-size: .75rem; }
  .watch-button b { font-size: 1.42rem; }
  .watch-button .arrow { width: 32px; }
  .live-signal { width: 15px; height: 15px; }
  .social-area { width: min(610px, 100%); gap: 15px; margin-top: 22px; }
  .social-primary { gap: 15px; }
  .social-secondary { gap: 12px; }
  .social-large { min-height: 82px; padding: 13px 16px; border-radius: 21px; }
  .social-small { min-height: 72px; padding: 11px 10px; border-radius: 18px; }
  .social-icon { flex-basis: 47px; height: 47px; border-radius: 14px; }
  .social-icon svg { width: 25px; height: 25px; }
  .social b { font-size: 1.16rem; }
  .social-small b { font-size: 1rem; }
  .social small { font-size: .71rem; }
  .social-small small { font-size: .63rem; }
  .art-column { min-height: 750px; }
  .sun-disc { width: 585px; right: -66px; top: 48px; }
  .hero-art { height: 94%; right: 1px; bottom: -10px; }
  .chibi-sticker { width: 150px; left: -18px; bottom: 34px; }
  .yippee-sticker { width: 148px; right: 4px; bottom: 12px; }
  .goo-sticker { width: 128px; left: 25px; top: 49px; }
  .doodle { font-size: 2.55rem; }
  .doodle-a { left: 28px; top: 225px; }
  .doodle-b { right: 225px; top: 105px; }
  .doodle-c { right: 38px; top: 305px; }
  .card-footer { min-height: 58px; font-size: .92rem; }
}

@media (max-width: 900px) {
  .page-shell { padding: 22px 14px 165px; place-items: start center; }
  .card-grid { grid-template-columns: 1fr; min-height: 0; }
  .art-column { min-height: 430px; order: -1; overflow: hidden; }
  .hero-art { height: 104%; right: 50%; transform: translateX(50%); bottom: -26px; }
  .sun-disc { width: min(460px,92vw); right: 50%; transform: translateX(50%); top: 24px; }
  .goo-sticker { left: 7%; }
  .chibi-sticker { left: 6%; }
  .content-column { padding: 34px clamp(22px,7vw,58px) 34px; }
  .wordmark-wrap { margin-top: 14px; min-height: 112px; }
}

@media (max-width: 620px) {
  .page-shell { padding: 10px 8px 142px; }
  .profile-card { border-radius: 25px; }
  .profile-card::after { inset: 8px; border-radius: 18px; }
  .ticker { grid-template-columns: 1fr; }
  .ticker-status { justify-content: center; min-height: 44px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .ticker-track { min-height: 40px; }
  .ticker-item { padding: 0 22px; font-size: .84rem; }
  .ticker-item::after { margin-left: 22px; }
  .art-column { height: 330px; min-height: 330px; }
  .hero-art { height: 105%; max-width: 100%; bottom: -24px; }
  .sun-disc { width: 340px; top: 16px; }
  .goo-sticker { width: 72px; left: 9px; top: 20px; }
  .chibi-sticker { width: 84px; left: 10px; bottom: 18px; }
  .yippee-sticker { width: 82px; right: 3px; bottom: 10px; }
  .doodle-a { left: 13px; top: 145px; }
  .doodle-b { right: 95px; top: 50px; }
  .doodle-c { right: 16px; top: 190px; }
  .content-column { padding: 30px 18px 28px; }
  .eyebrow { align-self: center; font-size: .7rem; }
  .wordmark-wrap { min-height: 92px; margin: 14px auto 6px; }
  .tagline { width: 100%; text-align: center; margin-bottom: 21px; }
  .watch-button { min-height: 72px; gap: 10px; padding: 9px 12px 9px 10px; border-radius: 19px; }
  .play-disc { width: 47px; height: 47px; border-radius: 14px; }
  .watch-button b { font-size: 1.08rem; }
  .watch-button .arrow { width: 23px; }
  .live-signal { width: 11px; height: 11px; }
  .social-primary { gap: 9px; }
  .social-secondary { gap: 7px; }
  .social-large { min-height: 64px; padding: 9px 8px; gap: 7px; }
  .social-small { min-height: 72px; padding: 8px 4px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .social-large .social-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .social-small .social-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .social-small .social-icon svg { width: 19px; height: 19px; }
  .social-large b { font-size: .9rem; }
  .social-large small { font-size: .56rem; letter-spacing: .08em; }
  .social-small small { display: none; }
  .social-small b { font-size: .76rem; }
  .stretch-corner,.portrait-ghost { display: none; }
  .sunflower-field { height: 118px; background-size: auto 100%; }
  #snailRunner { width: 80px; }
  .card-footer { font-size: .72rem; padding-inline: 14px; }
}

@media (max-width: 380px) {
  .art-column { height: 285px; min-height: 285px; }
  .hero-art { height: 102%; }
  .content-column { padding-inline: 14px; }
  .watch-button .arrow { display: none; }
  .watch-button { grid-template-columns: auto 1fr auto; }
  .social-primary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-copy { transform: none !important; }
}