@font-face { font-family: Manuscript; src: url('assets/fonts/manuscript.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Console; src: url('assets/fonts/console.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Comic; src: url('assets/fonts/comic.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Journal; src: url('assets/fonts/journal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Pixel; src: url('assets/fonts/pixel.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { --world-secondary: #72d8e6; --world-heading: 'Geist', Arial, sans-serif; }
body { isolation: isolate; }
main { position: relative; z-index: 2; width: min(980px, calc(100% - 144px)); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1 { font-size: 64px; line-height: 1.06; }
.lead { font-size: 20px; line-height: 1.65; font-weight: 400; }
.section-heading h2, .big-heading h2 { font-size: 40px; line-height: 1.15; }
.big-heading p:last-child { font-size: 18px; }
.hero { min-height: unset; padding: 96px 0 76px; align-items: start; }
.hero .avatar-wrap { margin-top: 64px; }
.project-card { min-height: 0; }
.tags { margin: 0 0 18px; padding-top: 8px; }
.project-links { margin-top: auto; }
body[data-world]:not([data-world='original']) { --accent-soft: color-mix(in srgb, var(--accent), transparent 90%); --tag: color-mix(in srgb, var(--text), transparent 95%); --shadow: 0 8px 26px #00000015; }
body[data-world='chibi'] { --bg: #171c21; --text: #f9f6fb; --muted: #bfc4cd; --accent: #f1a0bd; --world-secondary: #7ad8c6; --panel: #20272bef; --panel-strong: #252e35; --line: #465057; --world-heading: Journal, sans-serif; }
body.light[data-world='chibi'] { --bg: #f6faf9; --text: #253b44; --muted: #5b7075; --accent: #a93e68; --world-secondary: #277967; --panel: #ffffffed; --panel-strong: #ffffff; --line: #d3e1dc; }
body[data-world='murim'] { --bg: #101713; --text: #f1efdf; --muted: #b5c1b4; --accent: #bdd19c; --world-secondary: #c06656; --panel: #18221bcf; --panel-strong: #202d23; --line: #39483c; --world-heading: Manuscript, Georgia, serif; }
body.light[data-world='murim'] { --bg: #e4e9da; --text: #19372d; --muted: #465d4b; --accent: #285840; --world-secondary: #963d30; --panel: #f6f8efd9; --panel-strong: #f7f8ed; --line: #a5b69d; }
body[data-world='astronaut'] { --bg: #080c11; --text: #eaf4f7; --muted: #9bacb5; --accent: #78d8e0; --world-secondary: #e5a35c; --panel: #101b22f0; --panel-strong: #17252e; --line: #33454f; --world-heading: Console, sans-serif; }
body.light[data-world='astronaut'] { --bg: #edf3f5; --text: #19323e; --muted: #516873; --accent: #146c78; --world-secondary: #a14f21; --panel: #fafdfff0; --panel-strong: #ffffff; --line: #b8ced6; }
body[data-world='anime'] { --bg: #10191c; --text: #ecf5f3; --muted: #b2c4c3; --accent: #6fcbe1; --world-secondary: #e57966; --panel: #1a272bee; --panel-strong: #213135; --line: #486068; --world-heading: Comic, sans-serif; }
body.light[data-world='anime'] { --bg: #f4f7f7; --text: #183137; --muted: #50676c; --accent: #167489; --world-secondary: #c34743; --panel: #fffffff5; --panel-strong: #ffffff; --line: #afc8cc; }
body[data-world='halloween'] { --bg: #151316; --text: #f1e9dc; --muted: #bfb3b7; --accent: #dca16c; --world-secondary: #a8a278; --panel: #211d21ec; --panel-strong: #2b252b; --line: #52414a; --world-heading: Manuscript, Georgia, serif; }
body.light[data-world='halloween'] { --bg: #f4f1f4; --text: #342933; --muted: #725c6b; --accent: #9a4e25; --world-secondary: #617048; --panel: #fffffff2; --panel-strong: #ffffff; --line: #c6b7c3; }
body[data-world='roblox'] { --bg: #191f26; --text: #f4f7fc; --muted: #b5c4ce; --accent: #86c6fa; --world-secondary: #ee9b77; --panel: #222d37f2; --panel-strong: #2e3c47; --line: #485966; --world-heading: Console, sans-serif; }
body.light[data-world='roblox'] { --bg: #eff5f8; --text: #213541; --muted: #5d7581; --accent: #1c6689; --world-secondary: #c2663c; --panel: #fffffff5; --panel-strong: #ffffff; --line: #c1d5df; }
body[data-world='lego'] { --bg: #1b2327; --text: #f4f7f6; --muted: #bcc8cb; --accent: #f5c352; --world-secondary: #77bdd3; --panel: #253037f5; --panel-strong: #303e45; --line: #51636a; --world-heading: Journal, sans-serif; }
body.light[data-world='lego'] { --bg: #f4f7fa; --text: #223b4a; --muted: #58717d; --accent: #aa303b; --world-secondary: #16668e; --panel: #fffffff5; --panel-strong: #ffffff; --line: #c2d2db; }
body[data-world='minecraft'] { --bg: #12221d; --text: #edf2dc; --muted: #bfcdba; --accent: #acd77f; --world-secondary: #e0c08b; --panel: #21332af2; --panel-strong: #2c4032; --line: #59704e; --world-heading: Pixel, monospace; }
body.light[data-world='minecraft'] { --bg: #edf6f5; --text: #273c2b; --muted: #586e5c; --accent: #386430; --world-secondary: #986132; --panel: #fcfff9f2; --panel-strong: #ffffff; --line: #a4b99b; }
body[data-world='superhero'] { --bg: #181f24; --text: #f6f1dd; --muted: #c4c2b3; --accent: #f4cf60; --world-secondary: #e77a78; --panel: #222e35f5; --panel-strong: #2b3941; --line: #576773; --world-heading: Comic, Impact, sans-serif; }
body.light[data-world='superhero'] { --bg: #f9faf5; --text: #243641; --muted: #5c717b; --accent: #b3373a; --world-secondary: #1d709b; --panel: #fffffff5; --panel-strong: #ffffff; --line: #bfd1d9; }
.character-pose { display: block; aspect-ratio: 1; background: var(--sprite) 0 0 / 200% 200% no-repeat; transform-origin: 50% 85%; pointer-events: none; animation: character-breathe 7s ease-in-out infinite; }
.character-pose[data-frame='1'] { background-position: 100% 0; }
.character-pose[data-frame='2'] { background-position: 0 100%; }
.character-pose[data-frame='3'] { background-position: 100% 100%; }
.hero-character { display: none; position: absolute; z-index: 4; inset: -30px -20px; align-items: center; justify-content: center; }
.hero-character .character-pose { width: 200px; height: 200px; }
body[data-world]:not([data-world='original']) .hero-character { display: flex; }
body[data-world]:not([data-world='original']) .hero .avatar { visibility: hidden; }
body[data-world]:not([data-world='original']) .hero .avatar-ring { display: none; }
.world-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#world-geometry, #world-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; }
#world-geometry { mask-image: none; }
body[data-world]:not([data-world='original']) main::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: min(100vw, calc(100% + 160px)); transform: translateX(-50%); z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg), transparent 12%) 18%, color-mix(in srgb, var(--bg), transparent 12%) 82%, transparent); }
body.light[data-world='murim'] main::before { background: linear-gradient(90deg, transparent, #ecf0e5cf 18%, #ecf0e5cf 82%, transparent); }
body[data-world='original'] .world-scene { opacity: 0; }
#world-companions { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.world-wanderer { position: absolute; top: 0; left: 0; width: var(--pet-size, 76px); height: var(--pet-size, 76px); pointer-events: auto; border: 0; background: transparent; color: var(--text); cursor: grab; padding: 0; touch-action: none; user-select: none; will-change: transform; transition: opacity 180ms ease; }
.world-wanderer .character-pose { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px #0003); }
.world-wanderer.dragging { cursor: grabbing; z-index: 4; pointer-events: auto; }
.world-wanderer.dragging .character-pose { animation-play-state: paused; }
.world-transforming .world-wanderer, .world-wanderer.pet-crossing-content { pointer-events: none; }
.world-wanderer[aria-pressed='true'] .character-pose { filter: drop-shadow(0 0 7px var(--accent-soft)); }
.world-wanderer:focus-visible { outline-offset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::view-transition-old(root) { animation: world-fold-away 800ms cubic-bezier(.6, 0, .3, 1) both; transform-origin: 50% 58%; }
::view-transition-new(root) { animation: world-reveal 620ms 830ms cubic-bezier(.5, 0, .3, 1) both; clip-path: circle(0 at 50% 58%); }
::view-transition-group(root) { animation-duration: 1450ms; perspective: 1300px; }
@keyframes world-fold-away { 55% { transform: scale(.86) rotateX(20deg) rotateY(-12deg) skewY(-3deg); opacity: .85; } 100% { transform: scale(.4) rotateY(-50deg) skewY(-8deg); opacity: 0; } }
@keyframes world-reveal { to { clip-path: circle(160vmax at 50% 58%); } }
.world-fold-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: all; overflow: hidden; contain: strict; }
.world-fold-layer canvas, .world-fold-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
body.world-fallback main { animation: world-fallback-fold 900ms cubic-bezier(.3, .6, .3, 1); }
@keyframes world-fallback-fold { from { opacity: .55; transform: perspective(1000px) rotateY(-9deg) scale(.96); } to { opacity: 1; transform: none; } }
.character-pose[data-character='chibi'] { animation: chibi-bounce 6s ease-in-out infinite; }
.character-pose[data-character='astronaut'] { animation: astronaut-float 12s ease-in-out infinite; }
.character-pose[data-character='halloween'] { animation: spooky-drift 10s ease-in-out infinite; }
.character-pose[data-character='roblox'], .character-pose[data-character='minecraft'] { animation: blocky-step 6s steps(4) infinite; }
.character-pose[data-character='lego'] { animation: lego-pivot 8s steps(5) infinite; }
.character-pose[data-character='superhero'] { animation: heroic-hover 10s ease-in-out infinite; }
@keyframes character-breathe { 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes chibi-bounce { 40% { transform: translateY(-5px) rotate(-3deg); } 55% { transform: translateY(1px) scale(1.02, .98); } 75% { transform: translateY(-2px) rotate(3deg); } }
@keyframes astronaut-float { 50% { transform: translate(3px, -8px) rotate(7deg); } }
@keyframes spooky-drift { 50% { transform: translate(-3px, -6px) rotate(-4deg); } }
@keyframes blocky-step { 25% { transform: translateY(-3px) rotate(-2deg); } 75% { transform: translateY(-3px) rotate(2deg); } }
@keyframes lego-pivot { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes heroic-hover { 50% { transform: translateY(-7px) rotate(-5deg); } }
body.motion-paused .character-pose { animation-play-state: paused; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; }
  .hero .avatar { width: 140px; height: 140px; }
  .hero .avatar-ring { width: 162px; height: 162px; }
  .hero-character .character-pose { width: 170px; height: 170px; }
  h1 { font-size: 54px; }
}
@media (max-width: 760px) {
  main { width: calc(100% - 96px); }
  .hero { padding: 40px 0 46px; grid-template-columns: 1fr; gap: 24px; }
  .hero .avatar-wrap { margin-top: 0; }
  .hero .avatar { width: 100px; height: 100px; }
  .hero .avatar-ring { width: 118px; height: 118px; }
  .hero-character { inset: -15px -18px; }
  .hero-character .character-pose { width: 135px; height: 135px; }
  h1 { font-size: 42px; }
  .lead { font-size: 17px; }
  .hero-actions { margin: 22px 0 28px; }
  .button { width: auto; }
  .recent strong { font-size: 14px; font-weight: 500; }
  .section-heading h2, .big-heading h2 { font-size: 30px; }
  .big-heading p:last-child { font-size: 16px; }
  .project-body { padding: 18px; }
  .project-links a { padding: 0 10px; font-size: 12px; }
  .dock { bottom: max(14px, env(safe-area-inset-bottom)); }
  main { padding-bottom: 160px; }
}
@media (max-width: 350px) { h1 { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}