@font-face {
  font-family: "Black Sugar Plum";
  src: url("assets/BlackSugarPlumCandy-Bold.ttf") format("truetype");
  font-display: swap;
}

:root { --animal-font-family: "Black Sugar Plum", "Noto Sans SC", sans-serif !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #8ac68a; color: var(--animal-text-color); font-family: var(--animal-font-family) !important; }
a { color: inherit; }
main { position: relative; isolation: isolate; overflow: hidden; }
main > :not(.egg-field) { position: relative; z-index: 1; }
.egg-field { position: absolute; z-index: 0; inset: -72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-auto-rows: 190px; pointer-events: none; overflow: hidden; animation: egg-field-drift 16s linear infinite alternate; will-change: transform; }
.egg-field img { width: 118px; height: 118px; margin: auto; object-fit: contain; opacity: .1; transform: translate(var(--egg-x), var(--egg-y)) rotate(var(--egg-rotate)); }
.hero { min-height: 100svh; }
.nav { width: min(1120px, calc(100% - 48px)); min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: var(--animal-text-color); font-weight: 900; text-decoration: none; }
.nav nav { display: flex; gap: 8px; }
.nav nav a { padding: 8px 13px; border-radius: var(--animal-border-radius-lg); color: var(--animal-text-color); font-weight: 700; text-decoration: none; transition: background var(--animal-motion-duration-base) var(--animal-motion-ease); }
.nav nav a:hover { background: rgba(248, 248, 240, .35); }
.hero-inner { width: min(1000px, calc(100% - 48px)); min-height: calc(100svh - 76px); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .74fr); align-items: center; gap: clamp(52px, 10vw, 154px); }
.hero-copy { display: grid; justify-items: start; gap: 24px; }
.hero-copy h1 { margin: 0; color: var(--animal-bg-color); font-size: clamp(58px, 7.6vw, 108px); line-height: 1; letter-spacing: .02em; font-weight: 900; text-shadow: 0 7px 0 rgba(121, 79, 39, .18); }
.typewriter { min-height: 1.7em; margin: 0; color: var(--animal-text-color); font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; }
.hero-button, .play-button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 0 25px; border: 2px solid var(--animal-bg-color); border-radius: 50px; background: var(--animal-bg-color); color: var(--animal-text-color); box-shadow: 0 5px #bdaea0; font-weight: 700; text-decoration: none; transition: transform var(--animal-motion-duration-base) var(--animal-motion-ease), box-shadow var(--animal-motion-duration-base) var(--animal-motion-ease); }
.hero-button:hover, .play-button:hover { transform: translateY(-1px); box-shadow: 0 6px #bdaea0; }
.avatar { justify-self: center; width: min(100%, 360px); aspect-ratio: 1; object-fit: cover; border: 6px solid var(--animal-bg-color); border-radius: 48% 52% 46% 54%; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(121, 79, 39, .16)); animation: avatar-float 4.5s var(--animal-motion-ease) infinite alternate; }
.divider-wrap { width: min(1060px, calc(100% - 48px)); margin: 0 auto 20px; }
.works { padding: 30px max(24px, calc((100% - 1060px) / 2)) 62px; background: transparent; text-align: center; }
.works-panel { max-width: 1060px; margin: auto; padding: clamp(30px, 5vw, 58px) !important; text-align: center; }
.work-list { display: grid; margin: 34px auto 0; gap: 22px; text-align: left; }
.work-card { overflow: hidden; }
.work-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.work-number { color: var(--animal-primary-color-active); font-size: 18px; font-weight: 900; }
.work-head h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1; font-weight: 900; }
.work-head p { margin: 0; color: var(--animal-text-color-secondary); font-size: 13px; font-weight: 700; text-align: right; }
.work-detail { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: clamp(26px, 5vw, 72px); margin-top: 18px; }
.cover-placeholder { display: grid; aspect-ratio: 16 / 9; place-items: center; border: 2px dashed var(--animal-border-color); border-radius: var(--animal-border-radius-base); background: rgba(248, 248, 240, .72); color: var(--animal-text-color-secondary); font-size: 14px; font-weight: 700; line-height: 1.6; text-align: center; }
.cover-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--animal-border-color); border-radius: var(--animal-border-radius-base); background: var(--animal-bg-color); }
.work-copy p { margin: 14px 0 16px; font-weight: 600; }
.work-copy small { display: block; margin-top: 17px; color: var(--animal-text-color-secondary); font-size: 12px; font-weight: 700; }
.contact-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; padding: 30px max(24px, calc((100% - 1000px) / 2)) 42px; background: transparent; }
.identity { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.25; }
.identity span { color: var(--animal-text-color-secondary); font-size: 15px; }
.contact { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.contact .contact-button { min-width: 76px; }
.contact .contact-xiaohongshu { background: #ff2442; border-color: #ff2442; box-shadow: 0 5px #bf1931; }
.contact .contact-bilibili { background: #fb7299; border-color: #fb7299; box-shadow: 0 5px #bd5772; }
.contact .contact-douyin { background: #20c8cf; border-color: #20c8cf; box-shadow: 0 5px #168f95; }
.contact .contact-itch { background: #fa5c5c; border-color: #fa5c5c; box-shadow: 0 5px #bd4646; }
.contact .contact-xiaohongshu:hover, .contact .contact-bilibili:hover, .contact .contact-douyin:hover, .contact .contact-itch:hover { transform: translateY(-1px); }
.contact-section > small { grid-column: 1 / -1; margin-top: 28px; color: var(--animal-text-color-secondary); font-size: 13px; font-weight: 700; }
@keyframes egg-field-drift { to { transform: translate(48px, -48px); } }
@keyframes avatar-float { to { transform: translateY(-11px) rotate(2deg); } }
@media (max-width: 700px) { .nav, .hero-inner { width: calc(100% - 40px); } .nav { min-height: 62px; } .nav nav { gap: 0; } .nav nav a { padding: 7px 9px; font-size: 14px; } .hero-inner { min-height: calc(100svh - 62px); grid-template-columns: 1fr; gap: 34px; align-content: center; } .hero-copy { grid-row: 1; justify-items: center; text-align: center; gap: 19px; } .hero-copy h1 { font-size: clamp(54px, 16vw, 76px); } .avatar { grid-row: 2; width: min(70vw, 278px); } .divider-wrap { width: calc(100% - 40px); margin-bottom: 14px; } .works { padding: 22px 20px 34px; } .works-panel { padding: 28px 20px !important; } .work-head { grid-template-columns: 1fr auto; gap: 8px 14px; } .work-head h2 { grid-column: 1 / -1; grid-row: 1; font-size: clamp(40px, 13vw, 60px); } .work-number { grid-column: 2; grid-row: 1; justify-self: end; } .work-head p { grid-column: 1 / -1; grid-row: 2; text-align: left; } .work-detail { grid-template-columns: 1fr; gap: 18px; } .contact-section { display: block; padding: 30px 20px 36px; } .contact { flex-wrap: wrap; justify-content: flex-start; margin-top: 27px; } .contact-section > small { display: block; margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero, .avatar, .egg-field { animation: none; } }