@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap");
:root {
  --bg: #fff8ef;
  --bg-soft: #f9efe1;
  --bg-deep: #f3e2ca;
  --paper: rgba(255,250,243,0.92);
  --paper-strong: #fffdf9;
  --paper-warm: #fff7ef;
  --line: rgba(142,100,52,0.16);
  --line-strong: rgba(142,100,52,0.28);
  --ink-warm: rgba(209,109,73,0.82);
  --text: #49311f;
  --text-soft: #7a5b42;
  --accent: #da7b4a;
  --accent-soft: #f2b77f;
  --accent-deep: #b95d2f;
  --green: #9cae8a;
  --pink: #e7b6aa;
  --shadow: 0 18px 45px rgba(143,103,64,0.12);
  --shadow-soft: 0 12px 28px rgba(143,103,64,0.08);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --content: 1180px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 10% 2%, rgba(248,204,150,0.28), transparent 28%), radial-gradient(circle at 86% 14%, rgba(232,182,170,0.18), transparent 20%), linear-gradient(180deg, #fffdf9 0%, #fff8ef 36%, #fff3e4 100%);
  font-family: "Noto Serif SC", serif;
  min-height: 100vh;
  line-height: 1.75;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button,
input,
textarea {
  font: inherit;
}
.site-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
}
.backdrop-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity: 0.65;
}
.backdrop-orb-a {
  width: 28rem;
  height: 28rem;
  top: -10rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(255,210,155,0.6), rgba(255,210,155,0));
}
.backdrop-orb-b {
  width: 26rem;
  height: 26rem;
  right: -8rem;
  top: 18rem;
  background: radial-gradient(circle, rgba(228,186,170,0.42), rgba(228,186,170,0));
}
.backdrop-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(188,146,98,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(188,146,98,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 70%);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent) 0%, #f0b46c 60%, #f4d9ab 100%);
  z-index: 30;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(255,251,246,0.66);
  border-bottom: 1px solid rgba(180,131,79,0.08);
}
.site-header-inner,
.hero-inner,
.intro-strip-inner,
.journal,
.listing-page,
.generic-page,
.site-footer-inner {
  width: var(--content);
  margin: 0 auto;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}
.brand-seal {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 16px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), transparent 38%), linear-gradient(145deg, #f2c98f, #de7f4d);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), var(--shadow-soft);
  transform: rotate(-8deg);
}
.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-copy strong {
  font: 600 1.02rem/1.2 "Fraunces", "Noto Serif SC", serif;
  letter-spacing: 0.02em;
}
.brand-copy em {
  margin-top: 0.15rem;
  color: var(--text-soft);
  font: 500 0.78rem/1.2 "Outfit", sans-serif;
  font-style: normal;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.site-nav-link {
  padding: 0.62rem 0.88rem;
  border-radius: 999px;
  color: var(--text-soft);
  font: 500 0.86rem/1 "Outfit", sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.site-nav-link:hover,
.site-nav-link.is-active {
  background: rgba(218,123,74,0.12);
  color: var(--accent-deep);
  transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(218,123,74,0.12);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  border-radius: 999px;
  background: var(--accent-deep);
}
.site-main {
  padding-bottom: 2.4rem;
}
.hero {
  padding: 1.35rem 0 0.9rem;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(360px, 1.18fr) minmax(240px, 0.74fr);
  gap: 0.9rem;
  align-items: center;
}
.hero-copy,
.hero-logboard,
.hero-fox-stage,
.hero-collage,
.intro-item,
.paper-card,
.sidebar-card,
.article-paper,
.toc-panel,
.timeline,
.tag-cloud-page,
.post-license,
.post-nav-link,
.listing-hero,
.empty-state {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(186,144,96,0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-copy {
  padding: 2rem 1.8rem;
  overflow: hidden;
}
.hero-logboard,
.hero-fox-stage,
.hero-intro {
  overflow: hidden;
}
.hero-logboard,
.hero-fox-stage {
  padding: 1.15rem;
}
.hero-logboard {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 0.35rem 0.2rem 0.35rem 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-panel-title-wrap {
  display: grid;
  gap: 0.35rem;
}
.hero-panel-title {
  margin: 0;
  font: 600 1.45rem/1.18 "Fraunces", "Noto Serif SC", serif;
}
.hero-log-list {
  display: grid;
  gap: 0.5rem;
}
.hero-log-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.72rem 0.78rem 0.72rem 0.92rem;
  border-radius: 999px 18px 18px 999px;
  background: linear-gradient(90deg, rgba(255,248,239,0.94), rgba(255,255,255,0.84));
  border: 1px dashed rgba(186,144,96,0.24);
  box-shadow: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.hero-log-card::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 0.26rem;
  height: calc(100% - 1rem);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, #f0b46c 100%);
  transform: translateY(-50%);
}
.hero-log-card:hover {
  transform: translateX(5px) rotate(-0.65deg);
  border-color: rgba(218,123,74,0.28);
}
.hero-log-card:nth-child(2n) {
  transform: translateX(0.4rem) rotate(0.4deg);
}
.hero-log-card:nth-child(2n):hover {
  transform: translateX(0.72rem) rotate(-0.25deg);
}
.hero-log-index {
  color: var(--accent);
  padding-left: 0.38rem;
  font: 700 0.72rem/1 "Outfit", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-log-body {
  display: grid;
  gap: 0.16rem;
}
.hero-log-title {
  margin: 0;
  font: 600 0.88rem/1.35 "Noto Serif SC", serif;
}
.hero-log-tag,
.hero-log-empty,
.fox-caption,
.hero-note-title,
.hero-note-text,
.hero-note-link {
  margin: 0;
  color: var(--text-soft);
}
.hero-log-tag {
  font: 500 0.7rem/1.35 "Outfit", sans-serif;
}
.hero-log-date {
  color: var(--text-soft);
  font: 600 0.72rem/1 "Outfit", sans-serif;
  letter-spacing: 0.12em;
}
.hero-log-empty {
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.68);
}
.hero-fox-stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 29rem;
  background: radial-gradient(circle at 50% 16%, rgba(255,241,214,0.9), transparent 38%), linear-gradient(180deg, rgba(255,249,239,0.95), rgba(248,234,213,0.92));
  --fox-rotate-x: 0deg;
  --fox-rotate-y: 0deg;
  --fox-shift-x: 0px;
  --fox-shift-y: 0px;
  z-index: 1;
}
.hero-fox-backdrop {
  position: absolute;
  inset: 0;
  padding: 1rem;
  pointer-events: none;
}
.hero-fox-backdrop .hero-artwork {
  width: 100%;
  height: 100%;
}
.fox-scene {
  position: relative;
  width: 22rem;
  height: 24rem;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--fox-rotate-x)) rotateY(var(--fox-rotate-y)) translate3d(var(--fox-shift-x), var(--fox-shift-y), 0);
  transition: transform 0.2s ease-out;
}
.fox-shadow {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  width: 13.5rem;
  height: 2.6rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(145,101,63,0.28), rgba(145,101,63,0.02) 72%);
  transform: translateX(-50%) translateZ(0);
  filter: blur(6px);
  animation: shadowBreathe 4.8s ease-in-out infinite;
}
.fox-body {
  position: absolute;
  left: 50%;
  bottom: 4.8rem;
  width: 10.4rem;
  height: 8.7rem;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #ee9d55 0%, #d87442 100%);
  transform: translateX(-50%) translateZ(30px);
  box-shadow: inset 0 -18px 0 rgba(114,64,28,0.08);
}
.fox-body::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  width: 5.9rem;
  height: 4.8rem;
  border-radius: 46% 46% 38% 38%;
  background: linear-gradient(180deg, #fff5e6 0%, #f9e8d0 100%);
  transform: translateX(-50%) translateZ(12px);
}
.fox-paw {
  position: absolute;
  bottom: 3.6rem;
  width: 2.9rem;
  height: 4rem;
  border-radius: 999px 999px 1.2rem 1.2rem;
  background: linear-gradient(180deg, #f1a45f 0%, #de7c48 100%);
  transform: translateZ(16px);
}
.fox-paw::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(255,244,226,0.9);
}
.fox-paw-left {
  left: calc(50% - 4.7rem);
}
.fox-paw-right {
  right: calc(50% - 4.7rem);
}
.fox-tail {
  position: absolute;
  right: 2.4rem;
  bottom: 7.6rem;
  width: 8.2rem;
  height: 3.6rem;
  border-radius: 999px 999px 999px 2rem;
  background: linear-gradient(90deg, #d87240 0%, #ee9c56 74%);
  transform: rotate(28deg) translateZ(12px);
  transform-origin: left center;
  animation: tailSwing 4.4s ease-in-out infinite;
}
.fox-tail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -10px 0 rgba(116,61,26,0.08);
}
.fox-tail-tip {
  position: absolute;
  right: -0.5rem;
  top: 0.35rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff9f1 0%, #f6e6d1 100%);
}
.fox-head {
  position: absolute;
  left: 50%;
  top: 4.8rem;
  width: 13.6rem;
  height: 12.8rem;
  transform: translateX(-50%) translateZ(68px);
  animation: headBreathe 5.2s ease-in-out infinite;
}
.fox-face {
  position: absolute;
  inset: 1.9rem 1rem 0.4rem;
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(180deg, #f2a761 0%, #df7f47 100%);
  box-shadow: inset 0 -16px 0 rgba(117,70,32,0.06);
}
.fox-face::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.05rem;
  width: 7.2rem;
  height: 5.8rem;
  border-radius: 46% 46% 44% 44%;
  background: linear-gradient(180deg, #fff9f1 0%, #f7ead4 100%);
  transform: translateX(-50%);
}
.fox-ear {
  position: absolute;
  top: 0;
  width: 4.4rem;
  height: 5.6rem;
  background: linear-gradient(180deg, #ef9d55 0%, #d9743d 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.fox-ear-left {
  left: 0.55rem;
  transform: rotate(-14deg) translateZ(6px);
}
.fox-ear-right {
  right: 0.55rem;
  transform: rotate(14deg) translateZ(6px);
}
.fox-ear-inner {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  width: 2rem;
  height: 2.7rem;
  background: rgba(255,227,210,0.88);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transform: translateX(-50%);
}
.fox-eye {
  position: absolute;
  top: 4.7rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #52311f;
  transform: translateZ(20px);
  animation: foxBlink 6.8s infinite;
}
.fox-eye::after {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0.2rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
}
.fox-eye-left {
  left: 3.55rem;
}
.fox-eye-right {
  right: 3.55rem;
}
.fox-cheek {
  position: absolute;
  top: 5.4rem;
  width: 1.8rem;
  height: 1rem;
  border-radius: 999px;
  background: rgba(244,190,177,0.56);
}
.fox-cheek-left {
  left: 1.7rem;
}
.fox-cheek-right {
  right: 1.7rem;
}
.fox-snout {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: 4.2rem;
  height: 2.7rem;
  transform: translateX(-50%) translateZ(20px);
}
.fox-nose {
  position: absolute;
  left: 50%;
  top: 0.25rem;
  width: 1rem;
  height: 0.8rem;
  border-radius: 48% 48% 60% 60%;
  background: #5c3623;
  transform: translateX(-50%);
}
.fox-mouth {
  position: absolute;
  left: 50%;
  top: 1.05rem;
  width: 2.1rem;
  height: 1rem;
  border-bottom: 3px solid #7a523a;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}
.fox-mouth::before,
.fox-mouth::after {
  content: "";
  position: absolute;
  top: -0.18rem;
  width: 0.9rem;
  height: 0.8rem;
  border-bottom: 3px solid #7a523a;
  border-radius: 0 0 999px 999px;
}
.fox-mouth::before {
  left: -0.42rem;
  transform: rotate(14deg);
}
.fox-mouth::after {
  right: -0.42rem;
  transform: rotate(-14deg);
}
.fox-float-star {
  position: absolute;
  width: 0.95rem;
  height: 0.95rem;
  background: rgba(255,240,219,0.96);
  clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);
  box-shadow: 0 0 18px rgba(255,199,122,0.45);
}
.fox-float-star-a {
  top: 3.5rem;
  left: 2.1rem;
  animation: starFloat 7s ease-in-out infinite;
}
.fox-float-star-b {
  top: 8.8rem;
  right: 1.4rem;
  animation: starFloat 8.5s ease-in-out infinite 1.4s;
}
.fox-float-star-c {
  bottom: 8.2rem;
  left: 3.2rem;
  animation: starFloat 6.8s ease-in-out infinite 0.6s;
}
.fox-caption {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(186,144,96,0.16);
  font: 500 0.74rem/1.2 "Outfit", sans-serif;
}
.hero-intro {
  display: grid;
  align-content: start;
  padding: 0.6rem 0 0 0.35rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-poster-mark {
  margin: 0 0 0.35rem;
  color: rgba(185,93,47,0.68);
  font: 600 0.76rem/1 "Outfit", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-note-box {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.82rem 0.88rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(186,144,96,0.15);
}
.hero-note-title {
  color: var(--accent-deep);
  font: 600 0.84rem/1 "Outfit", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-note-text {
  font-size: 0.9rem;
  line-height: 1.72;
}
.hero-note-link {
  color: var(--accent-deep);
  font: 600 0.82rem/1.4 "Outfit", sans-serif;
}
.hero-title-poster {
  display: grid;
  gap: 0.05em;
  margin-top: 0.15rem;
}
.hero-title-line {
  display: block;
}
.hero-title-line-1 {
  padding-left: 1.1rem;
}
.hero-title-line-2 {
  padding-left: 0.18rem;
}
body.is-home {
  color: #5b3a28;
  background: radial-gradient(circle at 16% 8%, rgba(255,201,139,0.48), transparent 18%), radial-gradient(circle at 84% 12%, rgba(241,154,118,0.22), transparent 14%), radial-gradient(circle at 52% 36%, rgba(255,232,204,0.5), transparent 22%), linear-gradient(180deg, #fff8ee 0%, #fff3e3 45%, #fbead6 100%);
}
.site-header {
  position: relative;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  box-shadow: none;
}
.brand-copy strong,
.brand-copy em,
.site-nav-link {
  color: #7b523a;
}
.site-header-inner {
  position: relative;
  justify-content: center;
  min-height: 94px;
  padding-top: 1rem;
}
.brand {
  display: none;
}
.site-nav {
  gap: 2rem;
  padding: 0.15rem 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: rotate(-1.2deg);
  animation: navFloat 7s ease-in-out infinite;
}
.site-nav-link {
  position: relative;
  padding: 0.3rem 0.05rem;
  border-radius: 0;
  background: transparent;
  font: 600 0.92rem/1 "Caveat", "Ma Shan Zheng", cursive;
  letter-spacing: 0.08em;
}
.site-nav-link:nth-child(1) {
  transform: rotate(-3deg);
}
.site-nav-link:nth-child(2) {
  transform: rotate(1.6deg);
}
.site-nav-link:nth-child(3) {
  transform: rotate(-1deg);
}
.site-nav-link:nth-child(4) {
  transform: rotate(2.4deg);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 0.35rem;
  background: radial-gradient(circle at left center, rgba(240,114,77,0.7) 0.12rem, transparent 0.13rem) left bottom/0.58rem 0.28rem repeat-x;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-nav-link:hover,
.site-nav-link.is-active {
  color: #c86543;
  background: transparent;
  transform: translateY(-2px) rotate(-2deg) scale(1.06);
}
.site-nav-link:hover::after,
.site-nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav-toggle {
  position: absolute;
  right: 0;
  background: rgba(240,114,77,0.12);
}
.nav-toggle span {
  background: #cf7650;
}
.hero-poster {
  position: relative;
  padding: 0.6rem 0 2.3rem;
}
.poster-scene {
  position: relative;
  width: 1240px;
  margin: 0 auto;
  padding: 0.35rem 1.9rem 1.9rem;
  isolation: isolate;
}
.poster-scene::before,
.poster-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.poster-scene::before {
  left: 13%;
  top: 4.2rem;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,219,176,0.32), rgba(255,219,176,0));
  filter: blur(6px);
}
.poster-scene::after {
  right: 11%;
  top: 8.6rem;
  width: 21rem;
  height: 21rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245,196,174,0.18), rgba(245,196,174,0));
  filter: blur(8px);
}
.poster-doodle {
  position: absolute;
  --scroll-parallax-y: 0px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(206,119,85,0.84);
  opacity: 0.6;
  cursor: pointer;
  pointer-events: auto;
  translate: 0 var(--scroll-parallax-y);
  transform-origin: center;
  transition: transform 0.24s ease, translate 0.32s ease, opacity 0.24s ease, color 0.24s ease;
}
.poster-doodle:hover,
.poster-doodle:focus-visible {
  opacity: 0.86;
  color: #d86c46;
  outline: none;
}
.poster-doodle svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.poster-doodle-bag {
  left: -1.2rem;
  top: 12.8rem;
  width: 4rem;
  transform: rotate(-11deg);
  animation: doodleFloat 7s ease-in-out infinite;
}
.poster-doodle-bag:hover,
.poster-doodle-bag:focus-visible {
  transform: rotate(-15deg) scale(1.08);
}
.poster-doodle-eye {
  right: -1.4rem;
  top: 8.9rem;
  width: 6rem;
  transform: rotate(10deg);
  animation: doodleFloat 8.4s ease-in-out infinite 1.2s;
}
.poster-doodle-eye:hover,
.poster-doodle-eye:focus-visible {
  transform: rotate(7deg) scale(1.08);
}
.poster-doodle-fish {
  left: -1.7rem;
  bottom: 4.4rem;
  width: 5.5rem;
  transform: rotate(-8deg);
  animation: doodleFloat 7.6s ease-in-out infinite 0.6s;
}
.poster-doodle-fish:hover,
.poster-doodle-fish:focus-visible {
  transform: rotate(-12deg) scale(1.08);
}
.poster-doodle-plant {
  right: -1.4rem;
  bottom: 1.5rem;
  width: 4.2rem;
  animation: doodleFloat 8.8s ease-in-out infinite 1.4s;
}
.poster-doodle-plant:hover,
.poster-doodle-plant:focus-visible {
  transform: rotate(-4deg) scale(1.06);
}
.poster-doodle-star {
  right: 0.6rem;
  top: 19.1rem;
  width: 3.6rem;
  animation: doodleSpin 16s linear infinite;
}
.poster-doodle-star:hover,
.poster-doodle-star:focus-visible {
  transform: scale(1.08);
}
.fox-memory {
  position: absolute;
  --scroll-parallax-y: 0px;
  --memory-rotate: 0deg;
  --memory-shift-y: 0px;
  --memory-scale: 1;
  z-index: 0;
  width: 7.9rem;
  opacity: 0.58;
  pointer-events: none;
  translate: 0 var(--scroll-parallax-y);
  transform: translateY(var(--memory-shift-y)) rotate(var(--memory-rotate)) scale(var(--memory-scale));
  transform-origin: center;
  filter: drop-shadow(0 8px 18px rgba(201,134,89,0.06));
}
.fox-memory svg {
  width: 100%;
  height: auto;
}
.fox-memory-a {
  left: 5.8rem;
  top: 3rem;
}
.fox-memory-b {
  right: 5rem;
  top: 2.6rem;
}
.fox-memory-c {
  left: 3.2rem;
  bottom: 7.8rem;
}
.fox-memory-d {
  right: 4.4rem;
  bottom: 8.6rem;
}
.fox-memory-frame,
.fox-memory-face,
.fox-memory-ear,
.fox-memory-floor,
.fox-memory-line,
.fox-memory-blush {
  fill: none;
  stroke: rgba(209,109,73,0.68);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fox-memory-frame {
  fill: rgba(255,252,246,0.68);
  stroke-width: 3;
}
.fox-memory-ear,
.fox-memory-face,
.fox-memory-line {
  stroke-width: 3.4;
}
.fox-memory-floor {
  stroke-width: 2.6;
  stroke-dasharray: 7 8;
  opacity: 0.48;
}
.fox-memory-tape {
  fill: none;
  stroke: rgba(244,181,145,0.62);
  stroke-width: 7;
  stroke-linecap: round;
}
.fox-memory-blush {
  stroke-width: 2.6;
  opacity: 0.6;
}
.poster-easter-note {
  position: absolute;
  z-index: 3;
  width: calc(100vw - 3rem);
  max-width: 15rem;
  padding: 0.95rem 1rem 0.9rem;
  border: 2px solid rgba(223,104,71,0.42);
  border-radius: 1.1rem 1.1rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(255,252,246,0.97), rgba(249,236,214,0.95));
  box-shadow: 0 18px 34px rgba(196,127,74,0.18);
  opacity: 0;
  transform: translateY(8px) rotate(-2deg) scale(0.94);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.poster-easter-note.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(-2deg) scale(1);
}
.poster-easter-pin {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f28d63 0%, #da6d49 100%);
  box-shadow: 0 0 0 2px rgba(255,246,234,0.95);
}
.poster-easter-text {
  margin: 0;
  padding-right: 1rem;
  color: #7b4d37;
  font: 600 0.92rem/1.7 "Caveat", "Ma Shan Zheng", cursive;
}
.poster-book {
  position: relative;
  --scroll-parallax-y: 0px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  --poster-rotate: 0deg;
  --poster-shift-x: 0px;
  --poster-shift-y: 0px;
  box-shadow: none;
  overflow: visible;
  translate: 0 var(--scroll-parallax-y);
  transform: translate3d(var(--poster-shift-x), var(--poster-shift-y), 0) rotate(var(--poster-rotate));
  transition: transform 0.28s ease-out, box-shadow 0.28s ease-out;
}
.poster-book::before {
  content: none;
  pointer-events: none;
}
.poster-book-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 2.4rem;
  padding: 1.4rem 1.2rem 0.6rem;
  min-height: 22rem;
}
.poster-grid {
  position: absolute;
  inset: 2.6rem 10.8rem 4.8rem 9.2rem;
  border-radius: 2.8rem;
  background: linear-gradient(rgba(199,175,154,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(199,175,154,0.09) 1px, transparent 1px);
  background-size: 1.8rem 1.8rem;
  opacity: 0.66;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.95), transparent 78%);
}
.poster-headline,
.poster-window,
.poster-book-bottom {
  position: relative;
  z-index: 1;
}
.poster-headline {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 100%;
  padding: 1rem 0.3rem 0.4rem;
  transform: rotate(-1.4deg);
}
.poster-role {
  margin: 0 0 0.55rem;
  color: #dc6547;
  font: 600 2rem/0.9 "Caveat", "Ma Shan Zheng", cursive;
}
.poster-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.035em;
  max-width: none;
  color: #70402d;
  font-family: "Smiley Sans Oblique", "得意黑", "Noto Sans SC", "PingFang SC", sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  text-shadow: 0 1px 0 rgba(255,247,239,0.5), 0 10px 26px rgba(213,153,116,0.08);
}
.poster-title-char {
  display: inline-block;
  --char-rotate: -2.8deg;
  --char-rise: -0.05em;
  --char-scale: 1.04;
  --char-shift-x: 0em;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.28s ease, text-shadow 0.34s ease, filter 0.34s ease;
  transform-origin: center bottom;
  will-change: transform;
}
.poster-title-char.is-handwritten,
.poster-title-char:focus-visible {
  color: #d26a46;
  font-family: "Ma Shan Zheng", "Caveat", cursive;
  transform: translate3d(var(--char-shift-x), var(--char-rise), 0) rotate(var(--char-rotate)) scale(var(--char-scale));
  text-shadow: 0 0.08em 0 rgba(255,247,239,0.4), 0 0.2em 0.45em rgba(210,106,70,0.12);
  filter: saturate(1.03);
  outline: none;
}
.poster-subline {
  max-width: 15rem;
  margin: 1rem 0 0.4rem;
  color: #8b563f;
  font: 500 1.06rem/1.6 "Noto Serif SC", serif;
}
.poster-location {
  margin: 0;
  color: #d36446;
  font: 600 0.9rem/1.2 "Outfit", sans-serif;
}
.poster-window {
  --fox-rotate-x: 0deg;
  --fox-rotate-y: 0deg;
  --fox-shift-x: 0px;
  --fox-shift-y: 0px;
  transform: translateY(0.25rem) rotate(1.6deg);
}
.poster-window-frame {
  position: relative;
  min-height: 20rem;
  padding: 0.35rem 0 1.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.poster-window .fox-scene {
  width: 20rem;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0.1rem auto 0;
  cursor: pointer;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(210,149,110,0.08));
}
.poster-window .fox-linework {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--fox-rotate-x)) rotateY(var(--fox-rotate-y)) translate3d(var(--fox-shift-x), var(--fox-shift-y), 0);
  transition: transform 0.2s ease-out;
}
.fox-linework .fox-ground,
.fox-linework .fox-desk-line,
.fox-linework .fox-monitor-line,
.fox-linework .fox-screen-line,
.fox-linework .fox-keyboard-line,
.fox-linework .fox-typing-line,
.fox-linework .fox-coffee-line,
.fox-linework .fox-lamp-line,
.fox-linework .fox-note-line,
.fox-linework .fox-pot-line,
.fox-linework .fox-plant-line,
.fox-linework .fox-body-line,
.fox-linework .fox-belly-line,
.fox-linework .fox-arm-line,
.fox-linework .fox-chair-line,
.fox-linework .fox-ear-line,
.fox-linework .fox-head-line,
.fox-linework .fox-face-line,
.fox-linework .fox-paw-line,
.fox-linework .fox-tail-line,
.fox-linework .fox-tail-detail,
.fox-linework .fox-eye-line,
.fox-linework .fox-nose-line,
.fox-linework .fox-whisker-line,
.fox-linework .fox-cheek-line,
.fox-linework .fox-mouth,
.fox-linework .fox-float-spark circle,
.fox-linework .fox-float-spark path {
  fill: none;
  stroke: rgba(209,109,73,0.84);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fox-linework .fox-ground {
  stroke-width: 3;
  stroke-dasharray: 8 10;
  opacity: 0.6;
}
.fox-linework .fox-desk-line,
.fox-linework .fox-keyboard-line,
.fox-linework .fox-screen-line,
.fox-linework .fox-lamp-line,
.fox-linework .fox-note-line,
.fox-linework .fox-pot-line,
.fox-linework .fox-plant-line {
  stroke-width: 3.4;
}
.fox-linework .fox-monitor-line {
  stroke-width: 3.8;
}
.fox-linework .fox-coffee-line,
.fox-linework .fox-chair-line {
  stroke-width: 3.1;
  opacity: 0.76;
}
.fox-linework .fox-typing-line {
  stroke-width: 2.8;
  opacity: 0.72;
}
.fox-linework .fox-arm-line {
  stroke-width: 3.8;
}
.fox-linework .fox-eye-line,
.fox-linework .fox-nose-line,
.fox-linework .fox-mouth {
  stroke-width: 4.5;
}
.fox-linework .fox-whisker-line {
  stroke-width: 3.3;
  opacity: 0.84;
}
.fox-linework .fox-cheek-line {
  stroke-width: 3.1;
  opacity: 0.72;
}
.fox-linework .fox-head-group {
  transform-origin: 177px 146px;
  animation: lineFoxHeadBreathe 5.4s ease-in-out infinite;
}
.fox-linework .fox-tail-group {
  transform-origin: 221px 221px;
  animation: lineFoxTailSwing 4.6s ease-in-out infinite;
}
.fox-linework .fox-monitor-group {
  transform-origin: 180px 170px;
  animation: lineFoxHeadBreathe 6.2s ease-in-out infinite reverse;
}
.fox-linework .fox-plant-group {
  transform-origin: 256px 214px;
  animation: lineFoxSpark 9.2s ease-in-out infinite reverse;
}
.fox-linework .fox-float-spark {
  stroke: rgba(231,154,111,0.86);
  fill: rgba(255,236,204,0.72);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
}
.fox-linework .fox-float-spark-a {
  animation: lineFoxSpark 7s ease-in-out infinite;
}
.fox-linework .fox-float-spark-b {
  animation: lineFoxSpark 8.4s ease-in-out infinite 1.2s;
}
.fox-linework .fox-float-spark-c {
  animation: lineFoxSpark 6.8s ease-in-out infinite 0.8s;
}
.poster-window .fox-caption {
  bottom: 0.7rem;
  background: rgba(255,251,245,0.66);
  border: 1px dashed rgba(223,104,71,0.18);
  color: #8b6049;
  transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}
.poster-window .fox-caption.is-active {
  transform: translateX(-50%) rotate(-3deg) scale(1.04);
  background: rgba(255,243,226,0.96);
  color: #c56440;
}
.fox-scene.is-excited {
  animation: foxHappyHop 0.7s ease;
}
.fox-scene.is-excited .fox-float-spark {
  filter: drop-shadow(0 0 10px rgba(255,201,122,0.72));
}
.fox-scene.is-excited .fox-tail-group {
  animation-duration: 1s;
}
.fox-scene.is-excited .fox-head-group {
  animation-duration: 1.4s;
}
.poster-book-seam {
  display: none;
}
.poster-seam-line {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(141,84,62,0.42);
  box-shadow: 0 2px 10px rgba(103,52,34,0.16);
}
.poster-tape {
  display: inline-block;
  width: 4.8rem;
  height: 1rem;
  border-radius: 999px;
  background: rgba(228,103,75,0.86);
  opacity: 0.92;
}
.poster-tape-left {
  transform: rotate(-10deg);
}
.poster-tape-right {
  transform: rotate(10deg);
}
.poster-book-bottom {
  position: relative;
  display: block;
  padding: 0.8rem 0.4rem 0;
  background: transparent;
  min-height: 18rem;
}
.poster-bottom-head {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.5rem 1.1rem;
  transform: rotate(-2.2deg);
}
.poster-bottom-kicker,
.poster-bottom-link {
  margin: 0;
  color: #d36446;
  font: 600 1.2rem/1 "Caveat", "Ma Shan Zheng", cursive;
}
.poster-bottom-link {
  font-size: 1rem;
}
.poster-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem;
  padding-top: 0.6rem;
  width: 36rem;
  margin-left: 0.8rem;
}
.poster-note {
  position: relative;
  display: grid;
  gap: 0.45rem;
  width: calc(50% - 0.5rem);
  min-height: 9.6rem;
  padding: 1rem 1rem 1.05rem;
  color: #2d2019;
  border: 0;
  box-shadow: 0 12px 20px rgba(77,52,33,0.08);
  outline: 1px solid rgba(93,66,54,0.06);
}
.poster-note:nth-child(1) {
  margin-top: 0.2rem;
}
.poster-note:nth-child(2) {
  margin-top: 1.1rem;
}
.poster-note:nth-child(3) {
  margin-left: 0.8rem;
  margin-top: -0.2rem;
}
.poster-note:nth-child(4) {
  margin-top: 0.85rem;
}
.poster-note-0 {
  background: linear-gradient(transparent 0.9rem, rgba(82,127,197,0.18) 0.9rem, rgba(82,127,197,0.18) 1.04rem, transparent 1.04rem), linear-gradient(90deg, rgba(229,112,81,0.26) 0.7rem, transparent 0.7rem), #f7eedf;
  background-size: 100% 1.45rem, 100% 100%, auto;
  transform: rotate(-4deg);
}
.poster-note-1 {
  background: linear-gradient(rgba(120,120,120,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(120,120,120,0.18) 1px, transparent 1px), #d9d2c7;
  background-size: 1rem 1rem;
  transform: rotate(6deg);
}
.poster-note-2 {
  background: radial-gradient(circle at top left, rgba(252,233,204,0.8), transparent 42%), #f4e2c0;
  transform: rotate(-2deg);
}
.poster-note-3 {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent 38%), #efe2d4;
  transform: rotate(4deg);
}
.poster-note-pin {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(231,98,73,0.85);
  box-shadow: 0 0 0 2px rgba(255,245,234,0.74);
}
.poster-note-meta {
  color: #a46349;
  font: 600 0.72rem/1 "Outfit", sans-serif;
  letter-spacing: 0.08em;
}
.poster-note-title {
  font: 600 1rem/1.35 "Noto Serif SC", serif;
}
.poster-note-tag {
  color: #7d5a49;
  font: 500 0.78rem/1.4 "Outfit", sans-serif;
  font-style: normal;
}
.poster-manifesto {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  padding: 1rem 1rem 1.05rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: calc(100% - 1rem);
  max-width: 18rem;
  margin: -12.1rem 0 0 auto;
  transform: rotate(2.8deg);
}
.poster-description {
  margin: 0;
  color: #83614d;
  font-size: 0.95rem;
  line-height: 1.72;
}
.journal-scrapbook {
  position: relative;
  padding-top: 1.1rem;
}
.scrap-scene {
  position: relative;
  margin-top: 1.4rem;
  padding: 2.35rem 2.15rem 2.15rem;
  border-radius: 2rem;
  background: radial-gradient(circle at 16% 10%, rgba(255,212,173,0.24), transparent 18%), radial-gradient(circle at 82% 14%, rgba(239,174,154,0.14), transparent 16%), linear-gradient(180deg, rgba(255,251,246,0.94), rgba(250,241,228,0.92));
  border: 1px solid rgba(186,144,96,0.1);
  box-shadow: 0 16px 34px rgba(165,118,84,0.08);
  overflow: hidden;
}
.scrap-scene::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(217,136,92,0.12);
  border-radius: 1.5rem;
  pointer-events: none;
}
.scrap-doodle {
  position: absolute;
  --scroll-parallax-y: 0px;
  pointer-events: none;
  opacity: 0.36;
  translate: 0 var(--scroll-parallax-y);
}
.scrap-doodle::before,
.scrap-doodle::after {
  content: "";
  position: absolute;
}
.scrap-doodle-flower {
  left: -0.2rem;
  top: 0.2rem;
  width: 7rem;
  height: 7rem;
}
.scrap-doodle-flower::before {
  inset: 1.2rem 2rem 2rem 2.9rem;
  border-left: 3px solid rgba(213,119,81,0.42);
  border-bottom: 3px solid rgba(213,119,81,0.42);
  border-radius: 0 0 0 2rem;
  transform: rotate(-18deg);
}
.scrap-doodle-flower::after {
  left: 1.1rem;
  top: 0.9rem;
  width: 3rem;
  height: 3rem;
  border: 3px solid rgba(213,119,81,0.4);
  border-radius: 68% 32% 64% 36%;
  box-shadow: 1.9rem 1.3rem 0 -1px rgba(213,119,81,0.28), 3.7rem 2.9rem 0 -1px rgba(213,119,81,0.24);
}
.scrap-doodle-spark {
  right: -0.3rem;
  bottom: 0.4rem;
  width: 5rem;
  height: 5rem;
}
.scrap-doodle-spark::before {
  inset: 1.2rem;
  border: 3px solid rgba(213,119,81,0.4);
  border-radius: 55% 45% 58% 42%;
  transform: rotate(14deg);
}
.scrap-doodle-spark::after {
  left: 2rem;
  top: 0;
  width: 0.28rem;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(213,119,81,0), rgba(213,119,81,0.42), rgba(213,119,81,0));
  box-shadow: -1.7rem 1.8rem 0 -1px rgba(213,119,81,0.28), 1.7rem 1.4rem 0 -1px rgba(213,119,81,0.28);
}
.scrap-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1.3rem 1.1rem;
  align-items: start;
}
.scrap-card,
.scrap-note {
  position: relative;
  --scroll-parallax-y: 0px;
  translate: 0 var(--scroll-parallax-y);
  will-change: translate;
}
.scrap-card {
  grid-column: span 4;
}
.scrap-grid > .scrap-card:nth-child(6n + 1) {
  grid-column: 1/span 4;
  margin-top: 0.6rem;
}
.scrap-grid > .scrap-card:nth-child(6n + 2) {
  grid-column: 6/span 4;
  margin-top: -0.55rem;
}
.scrap-grid > .scrap-card:nth-child(6n + 3) {
  grid-column: 3/span 3;
  margin-top: 1.1rem;
}
.scrap-grid > .scrap-card:nth-child(6n + 4) {
  grid-column: 8/span 4;
  margin-top: -0.35rem;
}
.scrap-grid > .scrap-card:nth-child(6n + 5) {
  grid-column: 2/span 5;
  margin-top: 0.85rem;
}
.scrap-grid > .scrap-card:nth-child(6n + 6) {
  grid-column: 7/span 4;
  margin-top: 0.2rem;
}
.scrap-card-0 {
  transform: translateY(0.45rem) rotate(-3.8deg);
}
.scrap-card-1 {
  transform: translateY(-0.35rem) rotate(2.5deg);
}
.scrap-card-2 {
  grid-column: span 5;
  transform: translateY(0.9rem) rotate(-1.6deg);
}
.scrap-card-3 {
  grid-column: span 3;
  transform: translateY(-0.5rem) rotate(3.4deg);
}
.scrap-card-link,
.scrap-note {
  display: block;
}
.scrap-card-link {
  transition: transform 0.26s ease;
}
.scrap-card-link:hover {
  transform: translateY(-6px) rotate(1.5deg);
}
.scrap-card-frame {
  position: relative;
  min-height: 13.4rem;
  padding: 1rem 1rem 1.15rem;
  border-radius: 1.35rem 1rem 1.55rem 0.95rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,242,230,0.94));
  border: 3px solid rgba(255,255,255,0.96);
  outline: 1px solid rgba(123,82,58,0.12);
  box-shadow: 0 14px 24px rgba(128,86,55,0.1);
  overflow: hidden;
  clip-path: polygon(2% 4%, 97% 1%, 100% 16%, 97% 41%, 100% 76%, 97% 97%, 18% 100%, 1% 96%, 3% 63%, 0 26%);
}
.scrap-card-frame::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 3.2rem;
  height: 0.9rem;
  border-radius: 0.35rem;
  background: rgba(242,170,133,0.56);
  transform: translateX(-50%) rotate(-4deg);
}
.scrap-card-frame::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem;
  height: 3rem;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 0%, rgba(243,223,194,0.52), rgba(243,223,194,0));
  pointer-events: none;
}
.scrap-card-0 .scrap-card-frame {
  border-radius: 1.4rem 0.95rem 1.7rem 1rem;
  clip-path: polygon(3% 3%, 98% 0, 100% 18%, 96% 44%, 100% 73%, 96% 98%, 15% 100%, 0 95%, 4% 67%, 0 28%);
}
.scrap-card-1 .scrap-card-frame {
  border-radius: 1rem 1.5rem 1.1rem 1.7rem;
  clip-path: polygon(1% 7%, 94% 2%, 100% 21%, 98% 58%, 96% 100%, 28% 97%, 0 100%, 2% 54%, 0 19%);
}
.scrap-card-2 .scrap-card-frame {
  border-radius: 1.2rem 1.8rem 1.25rem 1.05rem;
  clip-path: polygon(4% 1%, 100% 4%, 96% 23%, 100% 60%, 95% 98%, 24% 100%, 0 94%, 2% 61%, 0 20%);
}
.scrap-card-3 .scrap-card-frame {
  border-radius: 1.55rem 1rem 1rem 1.65rem;
  clip-path: polygon(2% 4%, 92% 0, 100% 23%, 98% 53%, 100% 82%, 93% 100%, 17% 96%, 0 100%, 4% 55%, 0 17%);
}
.scrap-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding-top: 0.6rem;
}
.scrap-card-date,
.scrap-card-tag {
  color: #af6c50;
  font: 600 0.72rem/1 "Outfit", sans-serif;
  letter-spacing: 0.08em;
}
.scrap-card-tag {
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(244,187,151,0.18);
}
.scrap-card-title {
  margin: 0 0 0.55rem;
  color: #5d3a2c;
  font: 600 1.15rem/1.35 "Fraunces", "Noto Serif SC", serif;
}
.scrap-card-summary {
  margin: 0;
  color: #7f6453;
  font-size: 0.92rem;
  line-height: 1.75;
}
.scrap-card-shot {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.9rem 0.75rem 0.75rem;
  border-radius: 1.15rem 0.9rem 1.2rem 0.8rem;
  background: rgba(255,251,245,0.94);
  box-shadow: 0 7px 12px rgba(143,101,67,0.06), inset 0 0 0 1px rgba(159,115,77,0.06);
  transform-origin: center;
  clip-path: polygon(2% 5%, 97% 1%, 100% 19%, 96% 42%, 100% 77%, 94% 98%, 16% 100%, 0 96%, 4% 65%, 0 22%);
}
.scrap-card-shot-0 {
  transform: rotate(-2.4deg);
}
.scrap-card-shot-1 {
  transform: rotate(1.8deg);
}
.scrap-card-shot-2 {
  transform: rotate(-1.2deg);
}
.scrap-card-shot-3 {
  transform: rotate(2.8deg);
}
.scrap-card-shot-0 {
  clip-path: polygon(4% 3%, 98% 2%, 100% 20%, 97% 38%, 100% 79%, 94% 99%, 12% 100%, 0 96%, 3% 61%, 0 20%);
}
.scrap-card-shot-1 {
  clip-path: polygon(2% 8%, 94% 1%, 100% 24%, 97% 56%, 99% 85%, 95% 100%, 20% 97%, 0 100%, 4% 51%, 0 17%);
}
.scrap-card-shot-2 {
  clip-path: polygon(4% 2%, 99% 6%, 96% 26%, 100% 66%, 92% 100%, 27% 97%, 0 95%, 3% 64%, 0 19%);
}
.scrap-card-shot-3 {
  clip-path: polygon(1% 5%, 96% 0, 100% 18%, 98% 48%, 100% 81%, 95% 97%, 13% 100%, 0 94%, 5% 59%, 0 23%);
}
.scrap-card-tape {
  position: absolute;
  top: -0.35rem;
  width: 2.6rem;
  height: 0.78rem;
  border-radius: 0.28rem;
  background: rgba(243,181,150,0.54);
  box-shadow: 0 2px 4px rgba(172,125,87,0.06);
}
.scrap-card-tape-left {
  left: 0.85rem;
  transform: rotate(-9deg);
}
.scrap-card-tape-right {
  right: 0.85rem;
  transform: rotate(8deg);
}
.scrap-card-screen {
  position: relative;
  min-height: 7.4rem;
  padding: 0.85rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(116,87,69,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0)), linear-gradient(135deg, rgba(255,242,225,0.95), rgba(243,233,219,0.95));
}
.scrap-card-shot-0 .scrap-card-screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0)), linear-gradient(135deg, #fff0e2, #f3e8dc);
}
.scrap-card-shot-1 .scrap-card-screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0)), linear-gradient(135deg, #efe8df, #ddd1c5);
}
.scrap-card-shot-2 .scrap-card-screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0)), linear-gradient(135deg, #fdf3de, #f2dfbf);
}
.scrap-card-shot-3 .scrap-card-screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0)), linear-gradient(135deg, #f7ecdf, #eadfd4);
}
.scrap-card-screen-bar {
  position: absolute;
  top: 0.7rem;
  left: 0.8rem;
  right: 0.8rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(101,76,61,0.08);
}
.scrap-card-screen-chip {
  position: absolute;
  top: 1.65rem;
  left: 0.85rem;
  width: 3rem;
  height: 0.85rem;
  border-radius: 999px;
  background: rgba(219,115,81,0.18);
}
.scrap-card-screen-block,
.scrap-card-screen-line {
  position: absolute;
  border-radius: 0.7rem;
}
.scrap-card-screen-block {
  top: 2.95rem;
  bottom: 0.95rem;
  background: rgba(255,255,255,0.52);
  box-shadow: inset 0 0 0 1px rgba(120,92,72,0.06);
}
.scrap-card-screen-block-a {
  left: 0.85rem;
  width: 38%;
}
.scrap-card-screen-block-b {
  right: 0.85rem;
  width: 48%;
}
.scrap-card-screen-line {
  left: calc(0.85rem + 42%);
  right: 1rem;
  height: 0.52rem;
  background: rgba(103,79,63,0.12);
}
.scrap-card-screen-line-a {
  top: 3.15rem;
}
.scrap-card-screen-line-b {
  top: 4.2rem;
  width: 38%;
}
.scrap-card-screen-line-c {
  top: 5.25rem;
  width: 32%;
}
.scrap-card-link:hover .scrap-card-shot {
  transform: rotate(0deg) translateY(-3px);
}
.scrap-card-more {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: #cf6e49;
  font: 700 0.82rem/1 "Caveat", "Ma Shan Zheng", cursive;
  letter-spacing: 0.02em;
}
.scrap-card-more::after {
  content: "→";
  margin-left: 0.3rem;
}
.scrap-note {
  min-height: 10.2rem;
  padding: 1.15rem 1.1rem 1rem;
  color: #5a3d2f;
  box-shadow: 0 16px 24px rgba(126,88,59,0.1);
}
.scrap-note-pin {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ea8c60 0%, #d86547 100%);
  box-shadow: 0 0 0 2px rgba(255,246,234,0.82);
  transform: translateX(-50%);
}
.scrap-note-kicker {
  margin: 0 0 0.75rem;
  color: #ce6f4a;
  font: 700 0.82rem/1 "Caveat", "Ma Shan Zheng", cursive;
}
.scrap-note strong,
.scrap-note p {
  margin: 0;
}
.scrap-note strong {
  display: block;
  font: 700 1.08rem/1.05 "Caveat", "Ma Shan Zheng", cursive;
}
.scrap-note p {
  color: #795949;
  font-size: 0.92rem;
  line-height: 1.72;
}
.scrap-note-a {
  grid-column: 2/span 2;
  padding-top: 1.35rem;
  background: linear-gradient(transparent 1rem, rgba(82,127,197,0.18) 1rem, rgba(82,127,197,0.18) 1.1rem, transparent 1.1rem), linear-gradient(90deg, rgba(228,107,74,0.2) 0.8rem, transparent 0.8rem), #f8eede;
  background-size: 100% 1.55rem, 100% 100%, auto;
  transform: translate(1.2rem, -0.6rem) rotate(-6deg);
}
.scrap-note-b {
  grid-column: 8/span 2;
  background: linear-gradient(rgba(111,111,111,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(111,111,111,0.16) 1px, transparent 1px), #ddd5ca;
  background-size: 1rem 1rem;
  transform: translate(-0.8rem, 0.5rem) rotate(5deg);
}
.scrap-note-c {
  grid-column: 10/span 3;
  min-height: 8.8rem;
  border-radius: 1rem 1rem 1.2rem 1rem;
  background: #f3dfc7;
  transform: translateY(0.9rem) rotate(-3deg);
}
.scrap-footer {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
body.is-home .section-heading .section-title,
body.is-home .section-heading .section-desc {
  color: #6e4732;
}
body.is-home .section-heading .section-kicker {
  color: #e78f6c;
}
.hero-copy > * {
  position: relative;
  z-index: 1;
}
.hero-art {
  position: absolute;
  right: -1.6rem;
  top: -1.1rem;
  width: 24rem;
  aspect-ratio: 1/1;
  pointer-events: none;
  opacity: 0.94;
  z-index: 0;
}
.hero-artwork {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-sun {
  fill: rgba(243,191,120,0.26);
  stroke: rgba(217,117,73,0.45);
  stroke-width: 2.5;
  transform-origin: 306px 84px;
  animation: heroPulse 7s ease-in-out infinite;
}
.hero-wave,
.hero-orbit {
  fill: none;
  stroke: url("#sunpaperStroke");
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-wave {
  stroke-width: 4;
  opacity: 0.72;
}
.hero-wave-one {
  stroke-dasharray: 14 16;
  animation: waveDrift 12s linear infinite;
}
.hero-wave-two {
  stroke-width: 3;
  stroke-dasharray: 10 14;
  opacity: 0.5;
  animation: waveDrift 16s linear infinite reverse;
}
.hero-orbit {
  stroke-width: 2.4;
  stroke-dasharray: 8 14;
  opacity: 0.5;
  animation: orbitFloat 10s ease-in-out infinite;
}
.hero-dot,
.hero-leaf {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-dot {
  fill: rgba(218,123,74,0.75);
}
.hero-dot-a {
  animation: dotFloat 8s ease-in-out infinite;
}
.hero-dot-b {
  fill: rgba(156,174,138,0.85);
  animation: dotFloat 6.5s ease-in-out infinite 1s;
}
.hero-dot-c {
  fill: rgba(242,183,127,0.95);
  animation: dotFloat 7.5s ease-in-out infinite 0.4s;
}
.hero-leaf {
  fill: rgba(156,174,138,0.26);
  stroke: rgba(122,155,104,0.5);
  stroke-width: 1.5;
}
.hero-leaf-a {
  animation: leafSwing 9s ease-in-out infinite;
}
.hero-leaf-b {
  animation: leafSwing 11s ease-in-out infinite reverse;
}
.hero-copy::before,
.hero-collage::before,
.sidebar-card::before,
.paper-card::before,
.article-paper::before,
.listing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.62), transparent 32%), linear-gradient(180deg, transparent 74%, rgba(243,226,202,0.32));
  pointer-events: none;
}
.hero-kicker,
.section-kicker,
.post-kicker,
.sidebar-eyebrow,
.collage-label,
.toc-kicker {
  margin: 0 0 0.55rem;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font: 600 0.72rem/1.3 "Outfit", sans-serif;
}
.hero-title,
.section-title,
.post-title,
.listing-hero h1 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.08;
}
.hero-title {
  font-size: clamp(2.25rem, 4.1vw, 4rem);
  max-width: 5.2em;
  line-height: 1.02;
}
.hero-subtitle,
.hero-description,
.section-desc,
.sidebar-text,
.paper-summary,
.intro-item p,
.collage-card p,
.post-meta,
.post-license p {
  color: var(--text-soft);
}
.hero-subtitle {
  margin: 0.8rem 0 0.55rem;
  font-size: 1rem;
}
.hero-description {
  max-width: 36rem;
  margin: 0 0 1.05rem;
  font-size: 0.95rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.66rem 1.05rem;
  border-radius: 999px;
  font: 600 0.88rem/1 "Outfit", sans-serif;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.button-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #f0af6c 100%);
  color: #fff9f2;
  box-shadow: 0 12px 24px rgba(218,123,74,0.22);
}
.button-secondary {
  background: rgba(255,255,255,0.58);
  color: var(--accent-deep);
  border: 1px solid rgba(218,123,74,0.18);
}
.button-primary:hover,
.button-secondary:hover {
  transform: translateY(-2px);
}
.hero-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.95rem;
}
.hero-ribbon span,
.post-tag,
.paper-tag,
.sidebar-tag,
.tag-cloud-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(186,144,96,0.16);
  font: 500 0.76rem/1.2 "Outfit", sans-serif;
}
.hero-collage {
  display: grid;
  gap: 1rem;
  padding: 1.3rem;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: minmax(220px, 1fr) auto;
  background: linear-gradient(180deg, rgba(255,247,236,0.95), rgba(248,237,220,0.92));
}
.collage-card {
  position: relative;
  padding: 1.45rem;
  border-radius: 24px;
  background: rgba(255,252,248,0.86);
  border: 1px solid rgba(186,144,96,0.14);
  box-shadow: var(--shadow-soft);
}
.collage-card-main {
  grid-row: 1/3;
  transform: rotate(-2deg);
}
.collage-card-main h2 {
  margin: 0 0 0.9rem;
  font: 600 clamp(1.6rem, 2.6vw, 2.2rem)/1.18 "Fraunces", "Noto Serif SC", serif;
}
.collage-card-main p {
  margin: 0 0 1rem;
}
.collage-link {
  display: inline-flex;
  color: var(--accent-deep);
  font: 600 0.92rem/1 "Outfit", sans-serif;
}
.collage-card-accent {
  background: linear-gradient(135deg, rgba(247,229,199,0.95), rgba(255,244,228,0.95));
  transform: rotate(3deg);
}
.collage-handwriting {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent-deep);
  font: 700 clamp(2.2rem, 4vw, 3rem)/1 "Caveat", cursive;
}
.collage-card-mini {
  transform: rotate(-1deg);
}
.collage-card-mini ul {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
}
.intro-strip {
  padding: 1rem 0 1.4rem;
}
.intro-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.intro-item {
  padding: 1.5rem;
}
.intro-no {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--accent);
  font: 700 1.1rem/1 "Fraunces", serif;
}
.intro-item h3,
.sidebar-title {
  margin: 0 0 0.5rem;
  font: 600 1.25rem/1.3 "Fraunces", "Noto Serif SC", serif;
}
.intro-item p {
  margin: 0;
}
.journal,
.listing-page,
.generic-page,
.post-view {
  padding-top: 1.5rem;
}
.section-heading {
  max-width: 42rem;
  margin-bottom: 1.5rem;
}
.section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
}
.section-desc {
  margin: 0.75rem 0 0;
}
.journal-layout,
.post-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
}
.post-view {
  width: 1100px;
  margin: 0 auto;
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-content: start;
}
.paper-card {
  overflow: hidden;
  min-height: 100%;
}
.paper-card.tilt-left {
  transform: rotate(-1.15deg);
}
.paper-card.tilt-flat {
  transform: rotate(0.3deg);
}
.paper-card.tilt-right {
  transform: rotate(1.2deg);
}
.paper-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.55rem;
}
.paper-card-top,
.paper-card-bottom,
.post-meta,
.sidebar-stats,
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}
.paper-card-top {
  margin-bottom: 1rem;
  color: var(--text-soft);
  font: 500 0.82rem/1 "Outfit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.paper-index {
  color: var(--accent);
}
.paper-title {
  margin: 0 0 0.85rem;
  font: 600 clamp(1.3rem, 2vw, 1.6rem)/1.25 "Fraunces", "Noto Serif SC", serif;
}
.paper-summary {
  flex: 1;
  margin: 0 0 1.35rem;
}
.paper-card-bottom {
  flex-wrap: wrap;
}
.paper-tags,
.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.paper-tag,
.sidebar-tag,
.post-tag,
.tag-cloud-chip {
  color: var(--accent-deep);
}
.paper-tag-muted {
  color: var(--text-soft);
}
.paper-read {
  color: var(--text-soft);
  font: 500 0.86rem/1 "Outfit", sans-serif;
}
.sidebar-stack {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.sidebar-card {
  padding: 1.4rem;
}
.sidebar-text {
  margin: 0;
}
.sidebar-stats {
  flex-wrap: wrap;
  margin-top: 1rem;
}
.sidebar-stats span,
.note-list li {
  padding: 0.48rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(186,144,96,0.14);
  font: 500 0.84rem/1.2 "Outfit", sans-serif;
}
.sidebar-list {
  display: grid;
  gap: 0.9rem;
}
.sidebar-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  color: var(--text);
}
.sidebar-link span {
  flex: 1;
}
.sidebar-link small {
  color: var(--text-soft);
  font: 500 0.78rem/1 "Outfit", sans-serif;
}
.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination-wrap {
  grid-column: 1/-1;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.page-number,
.extend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.85rem;
  min-height: 2.85rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(186,144,96,0.16);
  background: rgba(255,255,255,0.78);
  color: var(--text-soft);
  font: 500 0.94rem/1 "Outfit", sans-serif;
}
.page-number.current {
  background: linear-gradient(135deg, var(--accent) 0%, #f0af6c 100%);
  color: #fffaf3;
  border-color: transparent;
}
.listing-hero,
.post-hero {
  margin-bottom: 1.4rem;
}
.listing-hero,
.post-hero-inner {
  padding: 2rem 2.2rem;
}
.post-hero-inner {
  width: 100%;
  margin: 0 auto;
}
.listing-hero h1,
.post-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}
.timeline,
.tag-cloud-page {
  padding: 1.2rem;
}
.timeline-year + .timeline-year {
  margin-top: 1.2rem;
}
.timeline-year-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding: 0.8rem 0.6rem;
}
.timeline-year-head h2 {
  margin: 0;
  font: 600 1.7rem/1.2 "Fraunces", "Noto Serif SC", serif;
}
.timeline-year-head span,
.timeline-item em {
  color: var(--text-soft);
  font: 500 0.88rem/1.2 "Outfit", sans-serif;
  font-style: normal;
}
.timeline-list {
  display: grid;
  gap: 0.8rem;
}
.timeline-item {
  padding: 1rem 1.1rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(186,144,96,0.12);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.timeline-item:hover {
  transform: translateX(4px);
  border-color: rgba(218,123,74,0.26);
}
.timeline-date {
  color: var(--accent-deep);
  font: 600 0.84rem/1 "Outfit", sans-serif;
  letter-spacing: 0.12em;
}
.timeline-item strong {
  flex: 1;
  font: 600 1.02rem/1.5 "Noto Serif SC", serif;
}
.tag-cloud-page {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.tag-cloud-chip {
  font-size: calc(0.9rem * var(--tag-scale));
  background: rgba(255,255,255,0.84);
  transform: rotate(calc((var(--tag-scale) - 1) * 4deg));
}
.tag-cloud-chip small {
  color: var(--text-soft);
}
.post-main {
  display: grid;
  gap: 1rem;
  width: 100%;
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.post-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1rem;
  color: var(--text-soft);
  font: 500 0.9rem/1.3 "Outfit", sans-serif;
}
.post-meta span {
  padding-right: 0.85rem;
  position: relative;
}
.post-meta span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(121,91,66,0.34);
  transform: translateY(-50%);
}
.article-paper {
  padding: clamp(1.45rem, 3vw, 2.6rem);
}
.post-content {
  font-size: 1rem;
}
.post-content > *:first-child {
  margin-top: 0;
}
.post-content > *:last-child {
  margin-bottom: 0;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
  margin: 2.1rem 0 0.8rem;
  color: var(--text);
  font-family: "Fraunces", "Noto Serif SC", serif;
  line-height: 1.25;
}
.post-content h2 {
  font-size: 1.85rem;
}
.post-content h3 {
  font-size: 1.42rem;
}
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content table,
.post-content pre {
  margin: 1rem 0;
}
.post-content ul,
.post-content ol {
  padding-left: 1.4rem;
}
.post-content blockquote {
  padding: 1.1rem 1.2rem;
  border-left: 4px solid rgba(218,123,74,0.45);
  border-radius: 0 18px 18px 0;
  background: rgba(255,247,236,0.9);
  color: var(--text-soft);
}
.post-content img {
  margin: 1.4rem auto;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.post-content code {
  padding: 0.16rem 0.45rem;
  border-radius: 8px;
  background: rgba(222,127,77,0.1);
  color: var(--accent-deep);
  font-family: "Consolas", "Monaco", monospace;
  font-size: 0.92em;
}
.post-content pre {
  overflow: auto;
  padding: 1.05rem 1.15rem;
  border-radius: 20px;
  background: #fffaf4;
  border: 1px solid rgba(186,144,96,0.14);
}
.post-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}
.post-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
}
.post-content th,
.post-content td {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(186,144,96,0.12);
}
.post-content hr {
  border: 0;
  border-top: 1px dashed rgba(186,144,96,0.4);
  margin: 2rem 0;
}
.toc-panel {
  position: sticky;
  top: 104px;
  align-self: start;
  padding: 1.3rem;
}
.post-shell {
  grid-template-columns: minmax(0, 760px) 260px;
  justify-content: center;
}
.toc-content .toc,
.toc-content .toc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.toc-content li {
  margin: 0.2rem 0;
}
.toc-content a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  color: var(--text-soft);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.toc-content a:hover,
.toc-content a.is-active {
  background: rgba(218,123,74,0.12);
  color: var(--accent-deep);
}
.post-license {
  padding: 1.25rem 1.4rem;
}
.post-license p {
  margin: 0.2rem 0;
}
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.post-nav-link {
  display: block;
  padding: 1.25rem 1.35rem;
}
.post-nav-link small {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-soft);
  font: 500 0.82rem/1 "Outfit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.post-nav-link strong {
  font: 600 1rem/1.55 "Noto Serif SC", serif;
}
.post-nav-next {
  text-align: right;
}
.post-nav-empty {
  opacity: 0.7;
}
.generic-paper {
  width: 860px;
  margin: 0 auto;
}
.empty-state {
  grid-column: 1/-1;
  padding: 2.2rem;
  text-align: center;
}
.empty-state h3 {
  margin: 0 0 0.6rem;
  font: 600 1.8rem/1.2 "Fraunces", "Noto Serif SC", serif;
}
.site-footer {
  padding: 1rem 0 3rem;
}
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(186,144,96,0.16);
}
.footer-title {
  margin: 0 0 0.25rem;
  font: 600 1.1rem/1.2 "Fraunces", "Noto Serif SC", serif;
}
.footer-text,
.footer-meta {
  margin: 0;
  color: var(--text-soft);
  font: 500 0.92rem/1.5 "Outfit", sans-serif;
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, #f0af6c 100%);
  color: #fff9f2;
  box-shadow: 0 14px 30px rgba(218,123,74,0.24);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1024px) {
  .poster-scene {
    padding: 0.2rem 0.8rem 1.6rem;
  }
  .poster-doodle {
    display: none;
  }
  .poster-headline {
    padding-bottom: 0;
    transform: none;
  }
  .poster-window {
    transform: none;
  }
  .poster-book-bottom {
    min-height: auto;
  }
  .poster-notes {
    width: 100%;
    margin-left: 0;
  }
  .poster-manifesto {
    margin: 1.4rem 0 0;
    transform: rotate(1.2deg);
  }
  .scrap-scene {
    padding: 1.8rem 1.2rem 1.7rem;
  }
  .scrap-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .scrap-grid > .scrap-card:nth-child(6n + 1),
  .scrap-grid > .scrap-card:nth-child(6n + 2),
  .scrap-grid > .scrap-card:nth-child(6n + 3),
  .scrap-grid > .scrap-card:nth-child(6n + 4),
  .scrap-grid > .scrap-card:nth-child(6n + 5),
  .scrap-grid > .scrap-card:nth-child(6n + 6) {
    grid-column: span 4;
    margin-top: 0;
  }
  .scrap-card,
  .scrap-card-2,
  .scrap-card-3 {
    grid-column: span 4;
  }
  .scrap-note-a {
    grid-column: 1/span 3;
  }
  .scrap-note-b {
    grid-column: 5/span 2;
  }
  .scrap-note-c {
    grid-column: 6/span 3;
  }
  .poster-window .fox-scene {
    margin-top: 0.4rem;
  }
  .hero-inner,
  .journal-layout,
  .post-shell {
    grid-template-columns: 1fr;
  }
  .hero-logboard,
  .hero-intro {
    padding: 0.6rem 0 0;
  }
  .hero-fox-stage {
    min-height: 25.5rem;
  }
  .hero-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .collage-card-main {
    grid-row: auto;
    grid-column: 1/-1;
  }
  .toc-panel {
    position: static;
  }
}
@media (max-width: 780px) {
  .brand {
    display: inline-flex;
  }
  .site-header-inner {
    justify-content: space-between;
  }
  .site-nav {
    gap: 0.55rem;
    padding: 0.25rem 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    animation: none;
  }
  .site-nav-link {
    padding: 0.95rem 0.15rem;
    border-radius: 0;
    font: 500 0.95rem/1 "Outfit", sans-serif;
  }
  .poster-scene {
    width: 1360px;
    padding: 0.2rem 0 1.2rem;
  }
  .poster-book {
    border-width: 3px;
    border-radius: 1.4rem;
  }
  .poster-book-top {
    padding: 1.45rem 1.1rem 1.2rem;
    min-height: auto;
  }
  .poster-book-bottom {
    padding: 1rem 1rem 1.4rem;
  }
  .poster-title {
    flex-wrap: wrap;
    gap: 0.04em 0.08em;
    font-size: clamp(2.35rem, 11vw, 4rem);
    line-height: 0.98;
  }
  .poster-note {
    width: 100%;
    transform: none;
  }
  .poster-note:nth-child(1),
  .poster-note:nth-child(2),
  .poster-note:nth-child(3),
  .poster-note:nth-child(4) {
    margin-top: 0;
    margin-left: 0;
  }
  .poster-bottom-head {
    margin-left: 0.1rem;
    transform: rotate(-1.2deg);
  }
  .poster-notes {
    padding-top: 0.35rem;
  }
  .poster-manifesto {
    width: 100%;
    margin-top: 1.2rem;
    transform: none;
  }
  .poster-easter-note {
    width: calc(100vw - 2rem);
    max-width: 13rem;
  }
  .scrap-doodle {
    display: none;
  }
  .scrap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scrap-grid > .scrap-card:nth-child(6n + 1),
  .scrap-grid > .scrap-card:nth-child(6n + 2),
  .scrap-grid > .scrap-card:nth-child(6n + 3),
  .scrap-grid > .scrap-card:nth-child(6n + 4),
  .scrap-grid > .scrap-card:nth-child(6n + 5),
  .scrap-grid > .scrap-card:nth-child(6n + 6) {
    grid-column: span 1;
    margin-top: 0;
  }
  .scrap-card,
  .scrap-card-2,
  .scrap-card-3,
  .scrap-note-a,
  .scrap-note-b,
  .scrap-note-c {
    grid-column: span 1;
    transform: none;
  }
  .scrap-card-link:hover {
    transform: translateY(-4px);
  }
  .scrap-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .site-header-inner {
    min-height: 74px;
  }
  .nav-toggle {
    display: inline-block;
  }
  .site-nav {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 1rem;
    left: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0.8rem;
    border-radius: 24px;
    background: rgba(255,250,243,0.96);
    border: 1px solid rgba(186,144,96,0.16);
    box-shadow: var(--shadow);
  }
  .site-header.is-open .site-nav {
    display: flex;
  }
  .site-nav-link {
    padding: 0.95rem 1rem;
  }
  .hero-copy,
  .post-hero-inner,
  .listing-hero,
  .article-paper {
    padding: 1.6rem;
  }
  .hero-logboard {
    padding: 0;
  }
  .hero-intro {
    padding: 0.6rem 0 0;
  }
  .hero-title,
  .post-title,
  .listing-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }
  .intro-strip-inner,
  .post-grid,
  .post-nav {
    grid-template-columns: 1fr;
  }
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .hero-poster {
    padding-top: 1rem;
  }
  .poster-book-seam {
    padding: 0 0.6rem;
  }
  .poster-tape {
    width: 3rem;
  }
  .poster-bottom-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 0;
    transform: none;
  }
  .poster-window-frame {
    min-height: 17.8rem;
    padding: 0.7rem 0.7rem 1.7rem;
  }
  .poster-window .fox-scene {
    width: 15.8rem;
    height: 16.4rem;
  }
  .poster-easter-note {
    left: 0.8rem !important;
    right: 0.8rem;
    width: auto;
  }
  .scrap-scene {
    margin-top: 1rem;
    padding: 1.2rem 0.85rem 1.25rem;
    border-radius: 1.45rem;
  }
  .scrap-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .scrap-grid > .scrap-card:nth-child(6n + 1),
  .scrap-grid > .scrap-card:nth-child(6n + 2),
  .scrap-grid > .scrap-card:nth-child(6n + 3),
  .scrap-grid > .scrap-card:nth-child(6n + 4),
  .scrap-grid > .scrap-card:nth-child(6n + 5),
  .scrap-grid > .scrap-card:nth-child(6n + 6) {
    grid-column: auto;
  }
  .scrap-card,
  .scrap-card-2,
  .scrap-card-3,
  .scrap-note-a,
  .scrap-note-b,
  .scrap-note-c {
    grid-column: auto;
  }
  .scrap-card-frame,
  .scrap-note {
    min-height: auto;
  }
  .site-header-inner,
  .hero-inner,
  .intro-strip-inner,
  .journal,
  .listing-page,
  .generic-page,
  .site-footer-inner {
    width: var(--content);
  }
  .hero {
    padding-top: 1.3rem;
  }
  .hero-collage {
    grid-template-columns: 1fr;
  }
  .hero-logboard,
  .hero-intro,
  .hero-fox-stage {
    padding: 1.25rem;
  }
  .hero-logboard {
    padding: 0;
  }
  .hero-fox-stage {
    min-height: 26rem;
  }
  .fox-scene {
    width: 19rem;
    height: 22rem;
  }
  .fox-head {
    top: 3.8rem;
    width: 11.8rem;
    height: 11rem;
  }
  .fox-body {
    width: 9rem;
    height: 7.7rem;
  }
  .fox-tail {
    right: 1.6rem;
    width: 6.6rem;
  }
  .hero-log-card,
  .hero-log-card:nth-child(2n),
  .hero-log-card:hover,
  .hero-log-card:nth-child(2n):hover {
    transform: none;
  }
  .collage-card-main,
  .collage-card-accent,
  .collage-card-mini,
  .paper-card.tilt-left,
  .paper-card.tilt-flat,
  .paper-card.tilt-right {
    transform: none;
  }
  .hero-ribbon,
  .sidebar-stats,
  .paper-card-bottom,
  .footer-meta {
    gap: 0.5rem;
  }
}
@-moz-keyframes doodleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
@-webkit-keyframes doodleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
@-o-keyframes doodleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
@keyframes doodleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
@-moz-keyframes doodleSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes doodleSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes doodleSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes doodleSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes navFloat {
  0%, 100% {
    transform: rotate(-1.2deg) translateY(0);
  }
  50% {
    transform: rotate(0.2deg) translateY(4px);
  }
}
@-webkit-keyframes navFloat {
  0%, 100% {
    transform: rotate(-1.2deg) translateY(0);
  }
  50% {
    transform: rotate(0.2deg) translateY(4px);
  }
}
@-o-keyframes navFloat {
  0%, 100% {
    transform: rotate(-1.2deg) translateY(0);
  }
  50% {
    transform: rotate(0.2deg) translateY(4px);
  }
}
@keyframes navFloat {
  0%, 100% {
    transform: rotate(-1.2deg) translateY(0);
  }
  50% {
    transform: rotate(0.2deg) translateY(4px);
  }
}
@-moz-keyframes foxHappyHop {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.03) translateY(-8px);
  }
  70% {
    transform: scale(0.99) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@-webkit-keyframes foxHappyHop {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.03) translateY(-8px);
  }
  70% {
    transform: scale(0.99) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@-o-keyframes foxHappyHop {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.03) translateY(-8px);
  }
  70% {
    transform: scale(0.99) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@keyframes foxHappyHop {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.03) translateY(-8px);
  }
  70% {
    transform: scale(0.99) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@-moz-keyframes lineFoxTailSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@-webkit-keyframes lineFoxTailSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@-o-keyframes lineFoxTailSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@keyframes lineFoxTailSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@-moz-keyframes lineFoxHeadBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@-webkit-keyframes lineFoxHeadBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@-o-keyframes lineFoxHeadBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes lineFoxHeadBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@-moz-keyframes lineFoxSpark {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-8px) rotate(8deg);
    opacity: 1;
  }
}
@-webkit-keyframes lineFoxSpark {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-8px) rotate(8deg);
    opacity: 1;
  }
}
@-o-keyframes lineFoxSpark {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-8px) rotate(8deg);
    opacity: 1;
  }
}
@keyframes lineFoxSpark {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-8px) rotate(8deg);
    opacity: 1;
  }
}
@-moz-keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@-webkit-keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@-o-keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@-moz-keyframes waveDrift {
  0% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    stroke-dashoffset: 90;
    transform: translateY(0);
  }
}
@-webkit-keyframes waveDrift {
  0% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    stroke-dashoffset: 90;
    transform: translateY(0);
  }
}
@-o-keyframes waveDrift {
  0% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    stroke-dashoffset: 90;
    transform: translateY(0);
  }
}
@keyframes waveDrift {
  0% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    stroke-dashoffset: 90;
    transform: translateY(0);
  }
}
@-moz-keyframes orbitFloat {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-8px);
  }
}
@-webkit-keyframes orbitFloat {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-8px);
  }
}
@-o-keyframes orbitFloat {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-8px);
  }
}
@keyframes orbitFloat {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-8px);
  }
}
@-moz-keyframes dotFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.08);
  }
}
@-webkit-keyframes dotFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.08);
  }
}
@-o-keyframes dotFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.08);
  }
}
@keyframes dotFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.08);
  }
}
@-moz-keyframes leafSwing {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-4px);
  }
}
@-webkit-keyframes leafSwing {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-4px);
  }
}
@-o-keyframes leafSwing {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-4px);
  }
}
@keyframes leafSwing {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-4px);
  }
}
@-moz-keyframes tailSwing {
  0%, 100% {
    transform: rotate(24deg) translateZ(12px);
  }
  50% {
    transform: rotate(38deg) translateZ(12px);
  }
}
@-webkit-keyframes tailSwing {
  0%, 100% {
    transform: rotate(24deg) translateZ(12px);
  }
  50% {
    transform: rotate(38deg) translateZ(12px);
  }
}
@-o-keyframes tailSwing {
  0%, 100% {
    transform: rotate(24deg) translateZ(12px);
  }
  50% {
    transform: rotate(38deg) translateZ(12px);
  }
}
@keyframes tailSwing {
  0%, 100% {
    transform: rotate(24deg) translateZ(12px);
  }
  50% {
    transform: rotate(38deg) translateZ(12px);
  }
}
@-moz-keyframes headBreathe {
  0%, 100% {
    transform: translateX(-50%) translateY(0) translateZ(68px);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) translateZ(68px);
  }
}
@-webkit-keyframes headBreathe {
  0%, 100% {
    transform: translateX(-50%) translateY(0) translateZ(68px);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) translateZ(68px);
  }
}
@-o-keyframes headBreathe {
  0%, 100% {
    transform: translateX(-50%) translateY(0) translateZ(68px);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) translateZ(68px);
  }
}
@keyframes headBreathe {
  0%, 100% {
    transform: translateX(-50%) translateY(0) translateZ(68px);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) translateZ(68px);
  }
}
@-moz-keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.55;
  }
}
@-webkit-keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.55;
  }
}
@-o-keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.55;
  }
}
@keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.55;
  }
}
@-moz-keyframes foxBlink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.1);
  }
}
@-webkit-keyframes foxBlink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.1);
  }
}
@-o-keyframes foxBlink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.1);
  }
}
@keyframes foxBlink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.1);
  }
}
@-moz-keyframes starFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-12px) scale(1.12);
    opacity: 1;
  }
}
@-webkit-keyframes starFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-12px) scale(1.12);
    opacity: 1;
  }
}
@-o-keyframes starFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-12px) scale(1.12);
    opacity: 1;
  }
}
@keyframes starFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-12px) scale(1.12);
    opacity: 1;
  }
}