@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/dm-sans-400.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/dm-sans-500.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/dm-sans-600.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/dm-sans-700.ttf") format("truetype"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/dm-mono-300.ttf") format("truetype"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/dm-mono-400.ttf") format("truetype"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/dm-mono-500.ttf") format("truetype"); }

:root {
  --ink: #25222d;
  --muted: #716b7b;
  --cream: #fffaf3;
  --pink: #f3a7c1;
  --light-pink: #fbd9e6;
  --purple: #b6a5eb;
  --light-purple: #e7e0fa;
  --blue: #99d8e7;
  --light-blue: #dcf3f7;
  --yellow: #f8dc92;
  --green: #bce1c8;
  --border: rgba(37, 34, 45, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; width: 360px; height: 360px; border-radius: 50%; z-index: -1;
  background: rgba(243, 167, 193, .18); filter: blur(60px); pointer-events: none;
  transform: translate(-50%, -50%);
}
.site-header {
  position: fixed; z-index: 30; top: 0; left: 0; width: 100%; padding: 22px 4vw;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .3s, padding .3s, box-shadow .3s;
}
.theme-toggle { width: 43px; height: 28px; margin-right: 18px; position: relative; display: flex; align-items: center; justify-content: space-around; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,.48); color: var(--ink); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.theme-toggle:hover { transform: rotate(-5deg) scale(1.06); }
.theme-toggle span { font-size: .9rem; line-height: 1; }
.theme-moon { opacity: .35; }
.site-header.scrolled {
  padding-block: 14px; background: rgba(255,250,243,.86); backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--border);
}
.wordmark { font-size: 1.35rem; font-weight: 700; letter-spacing: -.07em; }
.wordmark span { color: #d477a0; }
.legal-links { margin-left: auto; margin-right: 12px; display: flex; align-items: center; gap: 14px; color: var(--muted); font: 500 .58rem "DM Mono"; letter-spacing: .04em; }
.legal-links a { transition: color .2s; }.legal-links a:hover { color: #bc648c; }
nav { display: flex; align-items: center; gap: 28px; font-size: .82rem; font-weight: 600; }
nav a { transition: color .2s; }
nav a:hover { color: #bc648c; }
.nav-cta { border: 1px solid var(--ink); padding: 9px 14px; border-radius: 100px; }
.nav-cta span { margin-left: 5px; }
.menu-toggle { display: none; border: 0; background: none; padding: 10px; }

.hero {
  min-height: 100vh; position: relative; padding: 150px 8vw 80px;
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 2vw;
}
.hero-copy { position: relative; z-index: 2; max-width: 700px; }
.eyebrow {
  margin: 0 0 22px; display: flex; align-items: center; gap: 9px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .16em;
  font: 500 .67rem "DM Mono", monospace;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #80c99d; box-shadow: 0 0 0 5px rgba(128,201,157,.17); }
h1, h2 {
  margin: 0; font-weight: 700; letter-spacing: -.045em; line-height: .96;
}
h1 { font-size: clamp(3.5rem, 5.2vw, 6rem); }
h1 em, h2 em { color: #bc648c; font-style: normal; font-weight: 700; }
.intro { max-width: 590px; margin: 32px 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; }
.intro strong { color: var(--ink); }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 30px; padding: 15px 20px 15px 24px;
  border: 1px solid var(--ink); border-radius: 100px; font-size: .83rem; font-weight: 600; transition: transform .25s, box-shadow .25s;
}
.button span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--cream); color: var(--ink); }
.button.primary { background: var(--ink); color: white; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(37,34,45,.13); }
.text-link { font-size: .82rem; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.text-link span { margin-left: 5px; }

.hero-art { height: 580px; position: relative; display: grid; place-items: center; }
.orb { border-radius: 50%; position: relative; }
.orb-main {
  width: min(31vw, 430px); aspect-ratio: 1; background: var(--light-purple);
  box-shadow: inset 25px -25px 50px rgba(182,165,235,.38), 30px 30px 0 var(--light-pink);
  animation: breathe 5s ease-in-out infinite;
}
.orb-main::before { content: ""; position: absolute; width: 48%; height: 15%; left: 25%; bottom: -7%; border-radius: 50%; background: rgba(37,34,45,.12); filter: blur(20px); }
.pixel-face { position: absolute; inset: 0; }
.eye { position: absolute; top: 43%; width: 8%; height: 8%; background: var(--ink); border-radius: 2px; }
.eye::after { content: ""; position: absolute; width: 28%; height: 28%; right: 15%; top: 14%; background: white; }
.eye.left { left: 31%; } .eye.right { right: 31%; }
.smile { position: absolute; top: 57%; left: 44%; width: 12%; height: 6%; border: solid var(--ink); border-width: 0 5px 5px; }
.floating-tag {
  position: absolute; z-index: 2; display: grid; place-items: center; font: 500 1.1rem "DM Mono";
  border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(37,34,45,.08); backdrop-filter: blur(12px);
}
.tag-code { width: 85px; height: 85px; border-radius: 24px; background: rgba(220,243,247,.9); left: 3%; top: 15%; transform: rotate(-10deg); animation: float 5s ease-in-out infinite; }
.tag-game { width: 70px; height: 70px; border-radius: 50%; background: rgba(248,220,146,.9); right: 2%; top: 20%; font-size: 1.6rem; animation: float 4s 1s ease-in-out infinite; }
.tag-live { padding: 12px 16px; border-radius: 100px; background: rgba(255,255,255,.8); bottom: 11%; right: 5%; display: flex; grid-auto-flow: column; gap: 7px; font-size: .7rem; animation: float 4.5s .5s ease-in-out infinite; }
.tag-live svg,.live-pill svg { width: 13px; height: 13px; fill: #9146ff; }
.tag-live .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #aaa2b1; }
.twitch-status.is-live .live-dot,.twitch-status.is-live i { background: #ef6b8f; box-shadow: 0 0 0 4px rgba(239,107,143,.16); }
.spark { position: absolute; font-size: 2rem; color: #d18aab; animation: twinkle 2s ease-in-out infinite; }
.spark-one { left: 13%; bottom: 20%; }.spark-two { right: 15%; top: 8%; animation-delay: .7s; }
.pixel-trail { position: absolute; right: -5%; bottom: 16%; width: 8px; height: 8px; background: var(--pink); box-shadow: 16px 0 var(--purple), 32px 0 var(--blue), 48px 0 var(--yellow); }
.scroll-note { position: absolute; bottom: 32px; left: 4vw; display: flex; align-items: center; gap: 12px; color: var(--muted); font: .62rem "DM Mono"; letter-spacing: .12em; }
.scroll-note span { display: block; width: 35px; height: 1px; background: var(--ink); animation: widen 2s ease-in-out infinite; transform-origin: left; }

.marquee { position: relative; z-index: 8; width: 102%; left: -1%; overflow: hidden; margin: -9px 0; padding: 15px 0; background: var(--ink); color: var(--cream); transform: rotate(-1deg); }
.marquee-track { width: max-content; display: flex; align-items: center; animation: marquee 25s linear infinite; will-change: transform; }
.marquee-group { min-width: 102vw; display: flex; align-items: center; justify-content: space-around; gap: 35px; padding-right: 35px; flex-shrink: 0; }
.marquee span { font: 500 .72rem "DM Mono"; letter-spacing: .16em; }
.marquee i { color: var(--pink); font-style: normal; }

.world {
  min-height: 900px; padding: 130px 8vw; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9vw;
}
.world-web { background: #f6f0fb; }
.world-gaming { background: #eef8f8; }
.world-twitch { background: #f9edf4; }
.section-number { position: absolute; top: 55px; left: 8vw; font: .64rem "DM Mono"; letter-spacing: .12em; color: var(--muted); }
.world-copy { max-width: 590px; }
h2 { font-size: clamp(3.2rem, 6vw, 6.5rem); }
.world-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.75; margin: 30px 0; font-size: 1rem; max-width: 540px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 9px 13px; border: 1px solid var(--border); border-radius: 100px; font: 500 .63rem "DM Mono"; letter-spacing: .05em; background: rgba(255,255,255,.35); }

.browser-window {
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.56);
  box-shadow: 25px 30px 0 var(--light-pink), 0 30px 70px rgba(37,34,45,.1); transform: rotate(2deg);
}
.browser-top { height: 50px; padding: 0 17px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); }
.browser-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.browser-top i:nth-child(2) { background: var(--yellow); }.browser-top i:nth-child(3) { background: var(--green); }
.browser-top span { margin-left: auto; margin-right: auto; color: var(--muted); font: .57rem "DM Mono"; }
.browser-body { min-height: 370px; padding: 65px 35px; position: relative; font: clamp(.65rem,1vw,.85rem)/2.2 "DM Mono"; }
.code-line b { display: inline-block; width: 30px; font-weight: 400; color: #aaa2b1; }
.pink { color: #c96990; }.purple { color: #8872cb; }.blue { color: #3b93a9; }
.code-cursor { width: 8px; height: 16px; margin-left: 30px; background: var(--pink); animation: blink 1s steps(1) infinite; }
.mini-sticker { position: absolute; right: 30px; bottom: 25px; width: 90px; height: 90px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--yellow); font: .55rem/1.5 "DM Mono"; transform: rotate(10deg); }
.mini-sticker strong { font-size: .8rem; }

.game-art { min-height: 500px; position: relative; display: grid; place-items: center; }
.controller {
  width: min(39vw, 500px); height: 285px; position: relative; border-radius: 45% 45% 35% 35% / 45% 45% 55% 55%;
  background: linear-gradient(145deg,#d1c6f5,#aa98e4); box-shadow: inset 20px 15px 30px rgba(255,255,255,.55), inset -20px -15px 30px rgba(89,65,159,.18), 0 45px 0 rgba(37,34,45,.08);
  transform: rotate(-6deg);
}
.controller::before,.controller::after { content: ""; position: absolute; z-index: -1; width: 38%; height: 70%; bottom: -23%; border-radius: 35% 35% 55% 55%; background: #b3a2e7; }
.controller::before { left: 3%; transform: rotate(13deg); }.controller::after { right: 3%; transform: rotate(-13deg); }
.controller-center { position: absolute; width: 25%; height: 13%; top: 23%; left: 37.5%; border-radius: 10px; background: rgba(255,255,255,.25); box-shadow: inset 0 3px 8px rgba(37,34,45,.12); }
.dpad { position: absolute; left: 17%; top: 55%; width: 22%; aspect-ratio: 1; }
.dpad i { position: absolute; inset: 37% 0; border-radius: 6px; background: var(--ink); }.dpad i:nth-child(2) { transform: rotate(90deg); }
.buttons { position: absolute; right: 16%; top: 51%; width: 25%; aspect-ratio: 1; }
.buttons i { position: absolute; width: 27%; aspect-ratio: 1; border-radius: 50%; background: var(--pink); box-shadow: inset 3px 3px 5px rgba(255,255,255,.5), 0 4px 0 rgba(37,34,45,.15); }
.buttons i:nth-child(1) { top: 0; left: 36%; background: var(--yellow); }.buttons i:nth-child(2) { right: 0; top: 36%; }.buttons i:nth-child(3) { bottom: 0; left: 36%; background: var(--blue); }.buttons i:nth-child(4) { left: 0; top: 36%; background: var(--green); }
.controller-shine { position: absolute; top: 12%; left: 20%; width: 45%; height: 5px; border-radius: 100%; background: rgba(255,255,255,.35); transform: rotate(-4deg); }
.game-bubble { position: absolute; padding: 12px 15px; border-radius: 13px; background: var(--cream); box-shadow: 0 10px 30px rgba(37,34,45,.1); font: 600 .7rem "DM Mono"; animation: float 4s ease-in-out infinite; }
.bubble-one { top: 14%; left: 3%; transform: rotate(-8deg); }.bubble-two { right: 5%; bottom: 10%; background: var(--yellow); transform: rotate(8deg); animation-delay: .8s; }
.game-spark { position: absolute; font-size: 2rem; color: #aa98e4; animation: twinkle 2s infinite; }.gs-one { top: 5%; right: 18%; }.gs-two { bottom: 6%; left: 18%; animation-delay: .7s; }

.button.dark { background: var(--ink); color: white; margin-top: 8px; }
.stream-window { border: 1px solid var(--border); border-radius: 20px; padding: 12px; background: rgba(255,255,255,.55); box-shadow: 25px 30px 0 var(--light-purple), 0 30px 70px rgba(37,34,45,.1); transform: rotate(2deg); }
.stream-screen { height: 330px; position: relative; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 40% 35%,#f8e0ea 0 22%,transparent 23%), radial-gradient(circle at 65% 55%,#d5c9f3 0 18%,transparent 19%), linear-gradient(140deg,#f5b7ce,#bdaceb); }
.stream-screen::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size: 18px 18px; }
.live-pill { position: absolute; z-index: 1; top: 15px; left: 15px; display: flex; align-items: center; gap: 5px; background: var(--ink); color: white; padding: 7px 10px; border-radius: 100px; font: .58rem "DM Mono"; }
.live-pill i,.viewers i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff719b; margin-right: 5px; }
.stream-avatar { z-index: 1; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--cream); border: 8px solid rgba(255,255,255,.35); font-size: 4rem; font-weight: 700; color: #b779ad; box-shadow: 0 15px 30px rgba(37,34,45,.12); }
.stream-hearts i { position: absolute; color: #fff; font-style: normal; animation: hearts 3s infinite ease-out; }.stream-hearts i:nth-child(1) { left: 25%; bottom: 10%; }.stream-hearts i:nth-child(2) { left: 68%; bottom: 10%; animation-delay: .8s; }.stream-hearts i:nth-child(3) { left: 76%; bottom: 15%; animation-delay: 1.6s; }
.stream-info { display: flex; align-items: center; justify-content: space-between; padding: 15px 8px 8px; }
.stream-info div:first-child { display: flex; flex-direction: column; gap: 3px; font-size: .75rem; }
.stream-info span { color: var(--muted); font-size: .6rem; }
.viewers { font: .6rem "DM Mono"; }
.chat-lines { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.chat-lines span { display: block; height: 5px; width: 50%; border-radius: 4px; background: rgba(37,34,45,.1); }.chat-lines span:nth-child(2) { width: 75%; }.chat-lines span:nth-child(3) { width: 35%; }

.hobbies { position: relative; padding: 140px 8vw 150px; background: #fff8ed; }
.hobbies-heading { max-width: 780px; margin-bottom: 70px; }
.hobbies-heading > p:last-child { max-width: 560px; margin: 28px 0 0; color: var(--muted); line-height: 1.7; }
.hobby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hobby-card { min-height: 410px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 38px; border: 1px solid var(--border); border-radius: 28px; transition: transform .3s, box-shadow .3s; }
.hobby-card:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: 0 18px 0 rgba(37,34,45,.08); }
.hobby-books { background: var(--light-pink); }
.hobby-music { background: var(--light-purple); }
.hobby-creative { background: var(--light-blue); }
.hobby-more { background: #f8e7b8; }
.hobby-icon { position: absolute; right: 30px; top: 27px; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.55); font: 500 1.35rem "DM Mono"; transform: rotate(8deg); }
.hobby-icon-spark { color: #39879a; font-size: 1.8rem; }
.hobby-label { margin: 0 0 16px; text-transform: uppercase; color: var(--muted); letter-spacing: .13em; font: 500 .59rem "DM Mono"; }
.hobby-card h3 { margin: 0; font-size: clamp(2.2rem,4vw,4.3rem); letter-spacing: -.04em; line-height: 1; }
.hobby-card > p:not(.hobby-label) { max-width: 410px; margin: 24px 0 30px; color: var(--muted); line-height: 1.65; font-size: .9rem; }
.favorites { width: 100%; margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding-top: 19px; border-top: 1px solid var(--border); }
.favorites span { margin-bottom: 3px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font: .56rem "DM Mono"; }
.favorites strong { font-size: .76rem; font-weight: 600; }
.record { position: absolute; right: 27px; top: 25px; width: 75px; height: 75px; border-radius: 50%; background: var(--ink); animation: spin 8s linear infinite; box-shadow: inset 0 0 0 20px #35313d, inset 0 0 0 22px #8d7ec2; }
.record i { position: absolute; inset: 31px; border-radius: 50%; background: var(--yellow); }
.hobby-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.hobby-tags span { padding: 8px 11px; border-radius: 100px; background: rgba(255,255,255,.43); border: 1px solid var(--border); font: .58rem "DM Mono"; }
.hobby-dots { position: absolute; right: 32px; top: 34px; display: flex; gap: 6px; }
.hobby-dots i { width: 10px; height: 10px; background: var(--pink); }
.hobby-dots i:nth-child(2) { background: var(--purple); transform: translateY(8px); }.hobby-dots i:nth-child(3) { background: var(--blue); }

.now-section { padding: 140px 8vw; background: #eef8f8; }
.now-heading { max-width: 760px; margin-bottom: 65px; }
.now-heading > p:last-child,.stats-intro > p:last-child { max-width: 550px; margin: 26px 0 0; color: var(--muted); line-height: 1.7; }
.now-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.now-card { min-height: 445px; position: relative; display: flex; flex-direction: column; padding: 30px; overflow: hidden; border: 1px solid var(--border); border-radius: 25px; background: rgba(255,255,255,.47); transition: transform .3s, box-shadow .3s; }
.now-card:hover { transform: translateY(-7px); box-shadow: 0 15px 0 rgba(37,34,45,.07); }
.now-playing { background: var(--light-purple); }.now-reading { background: var(--light-pink); }.now-listening { background: #f8e7b8; }
.now-kicker { text-transform: uppercase; color: var(--muted); letter-spacing: .14em; font: .58rem "DM Mono"; }
.now-symbol { width: 52px; height: 52px; margin: 40px 0 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.55); font: 500 .9rem "DM Mono"; }
.now-card h3 { margin: 0; font-size: clamp(1.8rem,3vw,3.1rem); letter-spacing: -.04em; line-height: 1; }
.now-card p { margin: 15px 0 25px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.now-more { margin: 0 0 24px; }
.now-more > span { display: block; margin-bottom: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font: .52rem "DM Mono"; }
.now-more div { display: flex; flex-wrap: wrap; gap: 5px; }
.now-more i { padding: 6px 8px; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,.32); font: normal 500 .54rem "DM Mono"; }
.progress { height: 5px; margin-top: auto; overflow: hidden; border-radius: 100px; background: rgba(37,34,45,.1); }.progress i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.equalizer { height: 28px; margin-top: auto; display: flex; align-items: flex-end; gap: 4px; }.equalizer i { width: 4px; height: 50%; border-radius: 4px; background: var(--ink); animation: equalize .8s ease-in-out infinite alternate; }.equalizer i:nth-child(2) { height: 90%; animation-delay: .2s; }.equalizer i:nth-child(3) { height: 65%; animation-delay: .4s; }.equalizer i:nth-child(4) { height: 100%; animation-delay: .1s; }.equalizer i:nth-child(5) { height: 40%; animation-delay: .3s; }
.stats-section { padding: 130px 8vw 150px; background: #f6f0fb; }
.stats-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: 70px; }.stats-intro .eyebrow { grid-column: 1/-1; margin-bottom: -10px; }.stats-intro h2 { font-size: clamp(3rem,5vw,5.5rem); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); border: solid var(--border); border-width: 1px 0; }
.stat { min-height: 210px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 25px; border-right: 1px solid var(--border); }.stat:last-child { border: 0; }
.stat strong { color: #bc648c; font-size: clamp(2.8rem,5vw,5.2rem); letter-spacing: -.06em; line-height: 1; }.stat span { max-width: 150px; color: var(--muted); font: .64rem/1.5 "DM Mono"; }
.cat-easter-egg { position: fixed; z-index: 1000; inset: 0; pointer-events: none; display: grid; place-items: center; opacity: 0; visibility: hidden; background: rgba(37,34,45,.28); backdrop-filter: blur(4px); }
.cat-easter-egg img { width: min(60vw,500px); border-radius: 35px; filter: drop-shadow(0 25px 50px rgba(0,0,0,.3)); }
.cat-easter-egg strong { position: absolute; bottom: 8%; padding: 12px 18px; border-radius: 100px; background: var(--pink); color: var(--ink); font: 600 .75rem "DM Mono"; letter-spacing: .15em; }
.cat-easter-egg.active { visibility: visible; animation: catParty 10s ease both; }

.dark-mode { --ink:#f6eff8; --muted:#bdb2c5; --cream:#211d26; --border:rgba(255,255,255,.14); --light-pink:#593b4a; --light-purple:#463d60; --light-blue:#29474e; }
.dark-mode .site-header.scrolled,.dark-mode nav { background: rgba(33,29,38,.9); }
.dark-mode .theme-toggle { background: #393140; }.dark-mode .theme-sun { opacity: .35; }.dark-mode .theme-moon { opacity: 1; }
.dark-mode .world-web { background:#292331; }.dark-mode .world-gaming,.dark-mode .now-section { background:#202f33; }.dark-mode .world-twitch { background:#35242e; }.dark-mode .hobbies { background:#29231e; }.dark-mode .stats-section { background:#292331; }
.dark-mode .browser-window,.dark-mode .stream-window { background:rgba(33,29,38,.72); }.dark-mode .contact { background:#17141b; color:#f6eff8; }.dark-mode footer { background:#17141b; }
.dark-mode .hobby-more,.dark-mode .now-listening { background:#4d4128; }.dark-mode .hobby-card,.dark-mode .now-card { color:var(--ink); }
.dark-mode .nav-cta,.dark-mode .button { border-color:var(--ink); }.dark-mode .button.primary,.dark-mode .button.dark { background:var(--ink); color:#211d26; }

.contact { min-height: 730px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 5vw; background: var(--ink); color: var(--cream); }
.contact-orb { position: absolute; z-index: -1; width: min(70vw,800px); aspect-ratio: 1; border-radius: 50%; background: #47404f; filter: blur(2px); }
.contact h2 { font-size: clamp(4rem,10vw,9rem); }.contact h2 em { color: var(--pink); }
.contact > p:not(.eyebrow) { max-width: 490px; margin: 25px 0 30px; color: #bdb5c5; line-height: 1.6; }
.contact .eyebrow { color: var(--pink); }
.mail-link { padding-bottom: 5px; border-bottom: 1px solid var(--pink); font-size: clamp(1rem,2vw,1.4rem); }
.mail-link span { color: var(--pink); }
.socials { display: flex; gap: 20px; margin-top: 50px; font: .65rem "DM Mono"; color: #bdb5c5; }
.socials a:hover { color: var(--pink); }
footer { padding: 22px 4vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--ink); color: #a79fab; border-top: 1px solid rgba(255,255,255,.1); font: .57rem "DM Mono"; }
footer .wordmark { color: white; font: 700 1rem "DM Sans"; }
footer p a:hover { color: var(--pink); }

.legal-page { min-height: 100vh; padding: 150px max(24px,8vw) 100px; background: linear-gradient(145deg,var(--cream),var(--light-purple)); }
.legal-shell { max-width: 920px; margin: 0 auto; }
.legal-shell h1 { max-width: 100%; margin-bottom: 26px; }
.legal-lead { max-width: 680px; margin: 0 0 55px; color: var(--muted); line-height: 1.7; }
.legal-content { padding: clamp(25px,5vw,60px); border: 1px solid var(--border); border-radius: 30px; background: rgba(255,255,255,.44); box-shadow: 20px 25px 0 rgba(182,165,235,.16); }
.legal-content section + section { margin-top: 40px; padding-top: 35px; border-top: 1px solid var(--border); }
.legal-content h2 { margin-bottom: 16px; font-size: clamp(1.5rem,3vw,2.5rem); letter-spacing: -.035em; }
.legal-content h3 { margin: 25px 0 8px; font-size: 1rem; }
.legal-content p,.legal-content li { color: var(--muted); line-height: 1.75; font-size: .9rem; }
.legal-content ul { padding-left: 20px; }
.legal-placeholder { display: inline-block; padding: 2px 7px; border-radius: 5px; background: var(--light-pink); color: var(--ink); font: .78rem "DM Mono"; }
.legal-back { display: inline-flex; gap: 9px; margin-top: 35px; font: 500 .68rem "DM Mono"; }
.legal-back:hover { color: #bc648c; }
.dark-mode .legal-page { background:linear-gradient(145deg,var(--cream),#292331); }.dark-mode .legal-content { background:rgba(33,29,38,.6); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes breathe { 50% { transform: scale(1.025) rotate(2deg); } }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.7) rotate(45deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes widen { 50% { transform: scaleX(.45); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes hearts { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-150px) scale(1.2) rotate(20deg); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes equalize { to { height: 15%; } }
@keyframes catParty { 0%,100% { opacity:0; } 5%,95% { opacity:1; } 30% { background:rgba(182,165,235,.4); } 60% { background:rgba(243,167,193,.4); } }

@media (max-width: 900px) {
  .site-header { padding: 18px 22px; }
  .legal-links { margin-left: auto; margin-right: 8px; gap: 8px; font-size: .5rem; }
  .theme-toggle { margin-right: 5px; }
  .menu-toggle { display: block; position: relative; z-index: 2; }
  .menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: var(--ink); transition: transform .25s; }
  nav { display: none; position: absolute; top: 0; right: 0; width: min(80vw,330px); min-height: 100vh; padding: 100px 35px; flex-direction: column; align-items: flex-start; background: var(--cream); box-shadow: -10px 0 40px rgba(37,34,45,.1); font-size: 1.2rem; }
  nav.open { display: flex; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 130px 24px 70px; }
  h1 { font-size: clamp(3.3rem,14vw,5.5rem); }
  .hero-art { height: 450px; }
  .orb-main { width: min(70vw,330px); }
  .scroll-note { display: none; }
  .world { min-height: auto; grid-template-columns: 1fr; gap: 70px; padding: 120px 24px 100px; }
  .world-gaming .game-art { order: 2; }
  .section-number { left: 24px; top: 45px; }
  .browser-window,.stream-window { transform: none; }
  .game-art { min-height: 390px; }
  .controller { width: min(85vw,430px); height: 240px; }
  .hobbies { padding: 120px 24px 100px; }
  .hobby-grid { grid-template-columns: 1fr; }
  .now-section,.stats-section { padding: 110px 24px; }
  .now-grid { grid-template-columns: 1fr; }
  .stats-intro { grid-template-columns: 1fr; }.stats-intro .eyebrow { grid-column: auto; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }.stat:nth-child(2) { border-right: 0; }.stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .contact { min-height: 650px; }
}
@media (max-width: 520px) {
  .site-header .wordmark { font-size: 1.02rem; }
  .legal-links { flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2; }
  .theme-toggle { width: 36px; }
  .hero { padding-top: 115px; }
  .hero-art { height: 370px; }
  .tag-code { width: 65px; height: 65px; }.tag-game { width: 55px; height: 55px; }
  .world { padding-inline: 19px; gap: 55px; }
  .browser-body { min-height: 300px; padding: 45px 18px; }
  .mini-sticker { width: 70px; height: 70px; right: 15px; }
  .controller { height: 180px; }
  .stream-screen { height: 260px; }
  .hobby-card { min-height: 390px; padding: 28px; }
  .stats-grid { grid-template-columns: 1fr; }.stat { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--border); }.stat:nth-child(3) { border-bottom: 1px solid var(--border); }
  footer { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}