:root {
  color-scheme:light;
  --ink:#222942;
  --navy:#453480;
  --cream:#fffaf0;
  --purple:#7151bd;
  --blue:#bfe7f3;
  --pink:#f6a9bc;
  --display:'Jua',sans-serif;
  --sans:'Noto Sans KR',sans-serif;
  --latin:'Nunito',sans-serif;
  --accent:#7151bd;
  --line:#ddd6ec;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 15px/1.7 var(--sans);
  word-break:keep-all;
}
body.reading {
  overflow:hidden;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:0;
  background:none;
}
button:disabled {
  opacity:.35;
  cursor:default;
}
a {
  color:inherit;
  text-decoration:none;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #ee6592;
  outline-offset:5px;
}
img {
  max-width:100%;
  display:block;
}
[hidden] {
  display:none!important;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip {
  position:fixed;
  top:-100px;
  left:15px;
  background:white;
  z-index:100;
  padding:10px 20px;
}
.skip:focus {
  top:10px;
}
.announcement {
  height:34px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  font-size:11px;
  font-weight:700;
  background:#c9eaf3;
  color:#443584;
}
.announcement span {
  font-size:15px;
}
.masthead {
  height:96px;
  background:var(--navy);
  color:#fff8e7;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  padding:0 max(5vw,24px);
  position:sticky;
  top:0;
  z-index:20;
}
.wordmark {
  font:400 42px/1 var(--display);
  letter-spacing:-1.5px;
  color:#fff9ec;
  white-space:nowrap;
  text-shadow:2px 3px 0 #252747;
  position:relative;
  transform:rotate(-3deg);
  paint-order:stroke fill;
  -webkit-text-stroke:1px #fff9ec;
}
.wordmark .logo-star {
  font-size:23px;
  color:#ffc778;
  display:inline-block;
  transform:translate(-8px,-14px);
  -webkit-text-stroke:0;
}
.logo-dot {
  font-size:20px;
  color:#a5e5de;
  display:inline-block;
  transform:translate(8px,11px);
  -webkit-text-stroke:0;
}
.nav-right {
  justify-self:end;
  display:flex;
  gap:25px;
  align-items:center;
}
.header-note {
  font-family:var(--display);
  font-size:15px;
  color:#ffcf9d;
}
.saved-nav {
  display:flex;
  align-items:center;
  gap:6px;
  font:900 13px var(--latin);
  padding:10px;
}
.saved-nav svg {
  width:25px;
  height:25px;
  fill:#ffcd9e;
  stroke:#ffcd9e;
  stroke-width:2;
}
.saved-nav span {
  background:#fff6df;
  color:var(--navy);
  border-radius:50%;
  min-width:21px;
  height:21px;
  display:grid;
  place-items:center;
}
.hero {
  --hero-bg:#ccecf5;
  --hero-color:#f16188;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--hero-bg);
  transition:background .5s;
  min-height:665px;
  border-bottom:2px solid var(--ink);
  touch-action:pan-y;
}
.hero[data-active=fangs] {
  --hero-bg:#dedaff;
  --hero-color:#7859c9;
}
.hero[data-active=zodiac] {
  --hero-bg:#d3eddc;
  --hero-color:#397d69;
}
.hero-slide {
  max-width:1370px;
  margin:auto;
  min-height:594px;
  padding:38px 55px 12px;
  display:grid;
  grid-template-columns:47% 53%;
  align-items:center;
  position:relative;
  z-index:2;
  gap:5px;
}
.hero-copy {
  padding:5px 0 25px;
  position:relative;
  z-index:3;
  animation:copy-in .5s both;
}
.hero-kicker {
  display:flex;
  gap:14px;
  align-items:center;
  font-size:13px;
  font-weight:700;
  margin:0 0 23px;
}
.hero-kicker span {
  font:1000 12px var(--latin);
  background:#fff7e7;
  border:2px solid var(--ink);
  padding:7px 12px;
  border-radius:8px;
  transform:rotate(-4deg);
  box-shadow:2px 2px 0 var(--ink);
}
.hero h1,.hero h2 {
  font:400 clamp(58px,6vw,91px)/1.05 var(--display);
  letter-spacing:-3px;
  margin:0 0 22px;
  color:#fffdf5;
  -webkit-text-stroke:6px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 6px 0 var(--ink);
  position:relative;
  width:fit-content;
}
.hero h1 span,.hero h2 span {
  color:var(--hero-color);
}
.hero h1 i {
  font:400 78px var(--display);
  position:absolute;
  right:-87px;
  bottom:8px;
  color:#fff7da;
  -webkit-text-stroke:3px var(--ink);
  transform:rotate(13deg);
}
.hero h2.fangs-title {
  font-size:69px;
  line-height:1.07;
}
.hero h2.zodiac-title {
  font-size:72px;
  line-height:1.06;
}
.hero-description {
  font-size:18px;
  font-weight:600;
  line-height:1.8;
  margin:22px 0 27px;
}
.pill-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:#fff7db;
  border:2px solid var(--ink);
  border-radius:100px;
  padding:13px 27px 12px;
  font:400 20px/1.5 var(--display);
  box-shadow:3px 5px 0 var(--ink);
  transition:transform .2s,box-shadow .2s;
}
.pill-button span {
  font:800 24px var(--latin);
}
.pill-button:hover {
  transform:translateY(-4px) rotate(-2deg);
  box-shadow:4px 8px 0 var(--ink);
}
.pill-button:active {
  transform:translate(2px,3px);
  box-shadow:1px 2px 0 var(--ink);
}
.hero-art {
  position:relative;
  height:520px;
  animation:art-in .65s cubic-bezier(.2,.8,.2,1) both;
}
.art-window {
  position:absolute;
  inset:0 8px 4px 12px;
  border-radius:45% 45% 24% 25% / 40% 43% 27% 28%;
  overflow:hidden;
  border:6px solid #fffdf0;
  transform:rotate(3deg);
}
.art-window img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 9%;
  transform:scale(1.01);
}
[data-slide=office] .art-window img {
  object-position:50% 0%;
}
[data-slide=fangs] .art-window {
  transform:rotate(-3deg);
  border-radius:36% 46% 32% 20%;
}
[data-slide=fangs] .art-window img {
  object-position:50% 4%;
}
[data-slide=zodiac] .art-window img {
  object-position:50% 7%;
}

.speech-bubble {
  position:absolute;
  top:32px;
  left:-34px;
  background:#fffdf1;
  border:2px solid var(--ink);
  border-radius:16px 18px 16px 3px;
  font:18px/1.5 var(--display);
  padding:12px 19px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-8deg);
  animation:bob 4s ease-in-out infinite;
}
.sticker {
  position:absolute;
  right:-18px;
  bottom:31px;
  width:119px;
  height:119px;
  background:#fff1a9;
  display:grid;
  place-content:center;
  text-align:center;
  font:1000 19px/.95 var(--latin);
  border:2px solid var(--ink);
  border-radius:50%;
  box-shadow:3px 4px 0 var(--ink);
  transform:rotate(13deg);
}

.hero-sky {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.spark {
  position:absolute;
  line-height:1;
  color:#fff9d0;
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}
.spark-one {
  font-size:57px;
  left:4%;
  bottom:16%;
}
.spark-two {
  font-size:60px;
  right:4%;
  bottom:38%;
  transform:rotate(18deg);
}
.spark-three {
  font-size:30px;
  left:46%;
  top:8%;
}
.hero-controls {
  position:relative;
  z-index:4;
  max-width:1260px;
  margin:0 auto;
  padding:13px 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.slide-dots {
  display:flex;
  gap:10px;
}
.slide-dots button {
  border:2px solid var(--ink);
  border-radius:50%;
  width:35px;
  height:35px;
  background:#fffaf0;
  font:900 15px var(--latin);
  transition:transform .2s,background .2s;
}
.slide-dots button[aria-pressed=true] {
  background:var(--ink);
  color:#fffaf0;
  transform:translateY(-3px);
  box-shadow:0 3px 0 #ffffffa8;
}
.slide-arrows {
  display:flex;
  align-items:center;
  gap:13px;
}
.slide-arrows>span {
  font:900 13px var(--latin);
  margin-right:10px;
}
.slide-arrows button {
  width:34px;
  height:34px;
  font:800 22px var(--latin);
  border-radius:50%;
  line-height:1;
}
.slide-arrows button:hover {
  background:#ffffff70;
}
#autoplay {
  font-size:17px;
  border:1px solid #262d4260;
  margin-left:8px;
}
.story-ribbon {
  height:53px;
  background:#ffe598;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:45px;
  white-space:nowrap;
  overflow:hidden;
  font:900 15px var(--latin);
  border-bottom:2px solid var(--ink);
  color:#443580;
}
.story-ribbon span:nth-of-type(2) {
  font-family:var(--display);
  font-weight:400;
  font-size:19px;
}
.section-wrap {
  max-width:1330px;
  margin:auto;
  padding:0 35px;
}
.arrivals {
  padding-top:70px;
  padding-bottom:90px;
}
.section-heading {
  text-align:center;
  margin-bottom:39px;
}
.eyebrow {
  font:900 11px var(--latin);
  letter-spacing:2px;
  margin:0 0 12px;
}
.section-heading h2 {
  font:1000 clamp(31px,3.3vw,47px)/1.15 var(--latin);
  letter-spacing:-1.7px;
  margin:0 0 14px;
  position:relative;
  display:inline-block;
}
.heading-spark {
  color:#8fcbbc;
  font-size:33px;
  position:absolute;
  right:-48px;
  top:-12px;
  -webkit-text-stroke:1px var(--ink);
  transform:rotate(15deg);
}
.story-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.story-card {
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 4px 0 #e5e0d6;
  transition:transform .3s,box-shadow .3s;
  min-width:0;
}
.story-card:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 0 #e5e0d6;
}
.card-art {
  position:relative;
  background:#dbeefa;
  overflow:hidden;
  border-radius:22px 22px 0 0;
}
.card-image-button {
  width:100%;
  padding:0;
  display:block;
  overflow:hidden;
}
.card-image-button img {
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:contain;
  transition:transform .6s;
}
.card-image-button:hover img {
  transform:scale(1.025);
}
.new-badge {
  position:absolute;
  top:16px;
  left:14px;
  background:#bef1ac;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  font:1000 16px var(--latin);
  border:2px solid var(--ink);
  border-radius:20% 35% 22% 35%;
  box-shadow:2px 3px 0 var(--ink);
  transform:rotate(-13deg);
  pointer-events:none;
}
.save-button {
  position:absolute;
  right:14px;
  top:16px;
  width:42px;
  height:42px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:#fffdf2;
  display:grid;
  place-items:center;
  box-shadow:2px 3px 0 #262d4240;
}
.save-button svg {
  width:22px;
  height:22px;
  fill:transparent;
  stroke:var(--ink);
  stroke-width:1.8;
}
.save-button[aria-pressed=true] {
  background:#ffccd9;
}
.save-button[aria-pressed=true] svg {
  fill:#dd477c;
  stroke:#dd477c;
}
.card-copy {
  padding:22px 24px 20px;
}
[data-genre="romance"] { --genre-color:#a23861; --genre-bg:#fff0f5; }
[data-genre="mystery"] { --genre-color:#6443a8; --genre-bg:#f1ebff; }
[data-genre="beast"] { --genre-color:#245f9f; --genre-bg:#eaf4ff; }
[data-genre="battle"] { --genre-color:#ad3434; --genre-bg:#fff0ed; }
[data-genre="fantasy"] { --genre-color:#276754; --genre-bg:#e8f5ec; }
[data-genre="investigation"] { --genre-color:#865509; --genre-bg:#fff5dc; }
.card-genres {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 13px;
}
.card-genre {
  font-size:11px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border:1.5px solid var(--genre-color);
  border-radius:100px;
  background:var(--genre-bg);
  color:var(--genre-color);
  margin:0;
  transition:background .18s,color .18s,box-shadow .18s;
}
.card-genre:hover,.story-card:focus-within .card-genre {
  background:var(--genre-color);
  color:#fff;
  box-shadow:0 3px 0 color-mix(in srgb,var(--genre-color) 25%,transparent);
}
.card-copy h3 {
  font:400 25px/1.35 var(--display);
  margin:0 0 13px;
  min-height:34px;
  letter-spacing:-.6px;
}
.card-copy h3 button {
  font:inherit;
  padding:0;
  text-align:left;
}
.card-copy>p:not(.card-genres) {
  font-size:13px;
  line-height:1.9;
  color:#686b76;
  margin:0;
}
.card-bottom {
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.card-bottom>span {
  font-size:12px;
  font-weight:700;
  color:#6650a3;
}
.round-link {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid var(--ink);
  box-shadow:2px 3px 0 #ccc4e0;
  color:#5a4aa8;
  font:800 25px var(--latin);
  transition:transform .2s;
}
.round-link:hover {
  transform:rotate(15deg);
  background:#e9e1ff;
}
.collection-note {
  text-align:center;
  font-size:12px;
  color:#75717d;
  margin:35px 0 0;
}
.saved-message {
  padding:16px 22px;
  background:#eee5ff;
  border:1px solid #cfc0ef;
  border-radius:15px;
  font-size:13px;
  margin-bottom:30px;
}
.pixy-section {
  background:#d7eecf;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.pixy-inner {
  max-width:1210px;
  margin:auto;
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  padding:78px 35px;
  gap:50px;
}
.pixy-stamp {
  justify-self:center;
  width:310px;
  height:310px;
  background:#fff6c8;
  border:3px solid var(--ink);
  border-radius:40% 46% 37% 48%;
  box-shadow:8px 10px 0 #aac7a5;
  transform:rotate(-9deg);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.pixy-stamp>span {
  font:400 58px/1.1 var(--display);
  color:var(--navy);
  text-align:center;
  letter-spacing:-3px;
}
.pixy-stamp i {
  position:absolute;
  right:-25px;
  top:30px;
  font:70px var(--latin);
  color:#faafc2;
  -webkit-text-stroke:2px var(--ink);
  font-style:normal;
}
.pixy-stamp small {
  font:900 9px var(--latin);
  margin-top:20px;
  letter-spacing:1px;
}
.pixy-copy .eyebrow {
  color:#466448;
}
.pixy-copy h2 {
  font:400 45px/1.2 var(--display);
  margin:18px 0 25px;
  letter-spacing:-1px;
}
.pixy-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.95;
}
.pixy-copy .pill-button {
  margin-top:15px;
  font-size:17px;
}
footer {
  background:var(--navy);
  color:#fff4e6;
  padding:44px max(6vw,25px);
  display:flex;
  align-items:center;
  gap:32px;
}
footer .wordmark {
  font-size:30px;
}
footer .wordmark span {
  font-size:19px;
  margin-left:12px;
  color:#ffc788;
  -webkit-text-stroke:0;
}
.no-script {
  padding-block:40px;
}
/* Existing public story reader, restyled to match the collection. */
dialog {
  padding:0;
  border:2px solid var(--ink);
  border-radius:24px;
  background:var(--cream);
  color:var(--ink);
  max-width:1100px;
  width:calc(100% - 48px);
  max-height:calc(100dvh - 60px);
  overflow:auto;
  box-shadow:9px 12px 0 #20264166;
}
dialog::backdrop {
  background:#252239ad;
  backdrop-filter:blur(6px);
}
.reader-bar {
  position:sticky;
  top:0;
  z-index:5;
  background:var(--navy);
  color:#fffaf0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 25px;
}
.reader-bar>span {
  font:400 15px var(--display);
}
.reader-close {
  border:1px solid #ffffff70;
  border-radius:100px;
  padding:5px 14px;
  font-size:12px;
}
.reader-layout {
  display:grid;
  grid-template-columns:36% 64%;
}
.reader-art {
  padding:35px 28px;
  background:#dceaf4;
}
.reader-art img {
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:4px 5px 0 #282b4333;
}
.reader-art p {
  font:18px var(--display);
  text-align:center;
  color:#585080;
  margin-top:25px;
}
.reader-content {
  padding:30px 35px;
  min-width:0;
}
.small-label,.panel-kicker {
  font:900 10px var(--latin);
  letter-spacing:1px;
  color:#786195;
}
.reader-content>h2 {
  font:400 31px/1.3 var(--display);
  margin:16px 0 24px;
}
.reader-tabs {
  display:flex;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
}
.reader-tabs button {
  font:400 16px var(--display);
  padding:8px 14px;
  border-radius:100px;
}
.reader-tabs [aria-pressed=true] {
  background:var(--navy);
  color:white;
}
#reader-panel {
  font-size:14px;
  line-height:1.95;
  min-height:370px;
  padding-top:20px;
}
.location {
  font-size:12px;
  color:#786195;
}
.world-page h3,.scene-page h3 {
  font:400 25px/1.4 var(--display);
  margin:12px 0 20px;
}
.margin-note {
  background:#efe6fc;
  border-radius:15px;
  padding:17px 20px;
  margin:25px 0;
}
.margin-note span {
  font:16px var(--display);
  color:#5f418b;
}
.margin-note p {
  margin:7px 0 0;
}
.pencil-note {
  color:#77717e;
  font-size:13px;
}
.inline-action {
  border:2px solid var(--ink);
  padding:8px 17px;
  border-radius:100px;
  font:16px var(--display);
  background:#fff0bd;
  margin-top:10px;
}
.cast-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:23px 0;
}
.cast-list button {
  font-size:12px;
  border:1px solid #c9bfda;
  border-radius:100px;
  padding:7px 12px;
}
.cast-list button[aria-pressed=true] {
  background:var(--navy);
  color:white;
  border-color:var(--navy);
}
.character-detail {
  position:relative;
  padding:16px 0;
  min-height:200px;
  border-top:1px solid var(--line);
}
.character-detail h3 {
  font:34px var(--display);
  margin:14px 0;
}
.character-detail>p:last-child {
  max-width:85%;
}
.character-number {
  position:absolute;
  right:0;
  top:8px;
  font:1000 85px var(--latin);
  color:var(--character-color);
  opacity:.18;
}
.fine-print {
  font-size:10px;
  color:#817789;
  margin-top:23px;
}
.scene-page {
  min-height:325px;
}
.scene-page blockquote {
  font:400 25px/1.6 var(--display);
  margin:24px 0;
  color:#66508e;
}
.scene-page blockquote small {
  display:block;
  font:12px var(--sans);
  color:#7a7284;
  margin-bottom:10px;
}
.page-turn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:17px;
}
.page-turn button {
  font-size:12px;
}
.page-turn span {
  font:900 16px var(--latin);
}
@keyframes copy-in {
  from {
    opacity:0;
    transform:translateY(14px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes art-in {
  from {
    opacity:0;
    transform:translateX(30px) rotate(2deg);
  }
  to {
    opacity:1;
    transform:translateX(0) rotate(0);
  }
}
@keyframes bob {
  0%,100% {
    transform:translateY(0) rotate(-8deg);
  }
  50% {
    transform:translateY(-7px) rotate(-6deg);
  }
}
.is-paused .speech-bubble {
  animation-play-state:paused;
}
@media(min-width:1600px) {
  .hero-slide {
    padding-block:45px 16px;
    min-height:630px;
  }
  .hero-art {
    height:550px;
  }
  .hero-controls {
    padding-bottom:28px;
  }
  .hero {
    min-height:700px;
  }
}
@media(max-width:1300px) {
  .hero-slide {
    padding-inline:6vw;
    grid-template-columns:46% 54%;
  }
  .hero-art {
    height:470px;
  }
  .hero-controls {
    margin-inline:6vw;
  }
  .hero h1 {
    font-size:75px;
  }
  .hero h2.fangs-title,.hero h2.zodiac-title {
    font-size:62px;
  }
  .hero h1 i {
    font-size:56px;
    right:-60px;
  }
  .hero {
    min-height:620px;
  }
  .hero-slide {
    min-height:550px;
  }
  .hero-description {
    font-size:16px;
  }
  .speech-bubble {
    font-size:16px;
    left:-10px;
  }
  .sticker {
    right:-6px;
    width:100px;
    height:100px;
    font-size:17px;
  }
  .card-copy {
    padding:19px;
  }
  .card-copy h3 {
    font-size:23px;
  }
  .pixy-inner {
    gap:25px;
  }
  .header-note {
    display:none;
  }
}
@media(max-width:850px) {
  .masthead {
    height:80px;
    padding-inline:25px;
    gap:15px;
  }
  .wordmark {
    font-size:34px;
  }
  .wordmark .logo-star {
    font-size:17px;
  }
  .logo-dot {
    font-size:16px;
  }
  .hero-slide {
    padding:35px 5vw 10px;
    grid-template-columns:45% 55%;
    min-height:490px;
  }
  .hero-art {
    height:390px;
  }
  .hero h1 {
    font-size:62px;
    -webkit-text-stroke-width:4px;
    text-shadow:3px 4px 0 var(--ink);
  }
  .hero h1 i {
    font-size:42px;
    right:-42px;
  }
  .hero h2.fangs-title,.hero h2.zodiac-title {
    font-size:53px;
    -webkit-text-stroke-width:4px;
    text-shadow:3px 4px 0 var(--ink);
  }
  .hero-kicker {
    font-size:10px;
    gap:8px;
  }
  .hero-kicker span {
    font-size:10px;
    padding:6px 9px;
  }
  .hero-description {
    font-size:14px;
  }
  .pill-button {
    font-size:18px;
    gap:20px;
    padding:11px 22px;
  }
  .speech-bubble {
    font-size:13px;
    padding:8px 12px;
    top:18px;
  }
  .sticker {
    width:84px;
    height:84px;
    font-size:14px;
    right:-9px;
    bottom:30px;
  }
  .hero {
    min-height:550px;
  }
  .story-grid {
    gap:18px;
  }
  .section-wrap {
    padding-inline:25px;
  }
  .card-copy {
    padding:16px;
  }
  .card-copy h3 {
    font-size:20px;
    min-height:54px;
  }
  .card-copy>p:not(.card-genres) {
    font-size:11px;
  }
  .card-genre {
    font-size:10px;
  }
  .card-bottom>span {
    font-size:10px;
  }
  .card-art .new-badge {
    width:48px;
    height:48px;
    top:12px;
    left:10px;
    font-size:13px;
  }
  .save-button {
    width:34px;
    height:34px;
    top:12px;
    right:10px;
  }
  .save-button svg {
    width:18px;
    height:18px;
  }
  .pixy-stamp {
    width:230px;
    height:230px;
  }
  .pixy-stamp>span {
    font-size:45px;
  }
  .pixy-copy h2 {
    font-size:35px;
  }
  .pixy-copy>p:not(.eyebrow) {
    font-size:12px;
  }
  .pixy-inner {
    padding:55px 30px;
    grid-template-columns:42% 58%;
    gap:10px;
  }
  footer {
    flex-wrap:wrap;
    gap:20px;
  }
  .reader-layout {
    grid-template-columns:32% 68%;
  }
  .reader-art {
    padding:30px 18px;
  }
  .reader-content {
    padding:25px;
  }
  .reader-content>h2 {
    font-size:27px;
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:85px;
  }
  .announcement {
    font-size:10px;
    height:29px;
    gap:10px;
  }
  .masthead {
    height:74px;
    padding-inline:15px;
    gap:9px;
    grid-template-columns:1fr auto 1fr;
  }
  .wordmark {
    font-size:29px;
    letter-spacing:-1px;
  }
  .wordmark .logo-star {
    display:none;
  }
  .logo-dot {
    font-size:13px;
    transform:translate(4px,8px);
  }
  .saved-nav {
    padding:5px;
    gap:4px;
  }
  .saved-nav svg {
    width:20px;
    height:20px;
  }
  .saved-nav span {
    min-width:18px;
    height:18px;
    font-size:10px;
  }
  .hero {
    min-height:0;
  }
  .hero-slide {
    display:flex;
    flex-direction:column;
    gap:0;
    padding:28px 25px 0;
    min-height:0;
  }
  .hero-copy {
    text-align:center;
    padding:0;
    width:100%;
  }
  .hero-kicker {
    justify-content:center;
    font-size:11px;
    margin-bottom:17px;
  }
  .hero-kicker span {
    font-size:10px;
  }
  .hero h1,.hero h2.fangs-title,.hero h2.zodiac-title {
    font-size:54px;
    line-height:1.03;
    margin:0 auto 14px;
    letter-spacing:-2px;
    -webkit-text-stroke-width:4px;
    text-shadow:2px 4px 0 var(--ink);
  }
  .hero h1 br {
    display:none;
  }
  .hero h1 i {
    position:static;
    font-size:37px;
    display:inline-block;
    margin-left:7px;
    transform:rotate(10deg);
    text-shadow:2px 3px 0 var(--ink);
  }
  .hero h2.fangs-title {
    font-size:43px;
    max-width:310px;
  }
  .hero h2.fangs-title br:first-child {
    display:none;
  }
  .hero h2.zodiac-title {
    font-size:44px;
  }
  .hero h2.zodiac-title br:first-child {
    display:none;
  }
  .hero h2.zodiac-title span {
    font-size:48px;
  }
  .hero-description {
    font-size:12px;
    line-height:1.7;
    margin:12px 0 17px;
  }
  .pill-button {
    font-size:16px;
    padding:8px 22px;
    gap:30px;
    box-shadow:2px 4px 0 var(--ink);
  }
  .pill-button span {
    font-size:22px;
  }
  .hero-art {
    height:305px;
    width:min(100%,355px);
    margin:27px auto 22px;
  }
  .art-window {
    inset:0 10px 4px 10px;
    border-width:4px;
  }

  .speech-bubble {
    top:12px;
    left:-7px;
    font-size:12px;
    padding:8px 12px;
  }
  .sticker {
    width:75px;
    height:75px;
    font-size:12px;
    right:-6px;
    bottom:22px;
    box-shadow:2px 3px 0 var(--ink);
  }
  .hero-controls {
    margin:0;
    padding:12px 25px 20px;
    gap:12px;
  }
  .slide-dots {
    gap:8px;
  }
  .slide-dots button {
    width:31px;
    height:31px;
    font-size:12px;
  }
  .slide-arrows {
    gap:5px;
  }
  .slide-arrows>span {
    font-size:11px;
    margin-right:3px;
  }
  .slide-arrows button {
    width:29px;
    height:29px;
    font-size:20px;
  }
  #autoplay {
    font-size:13px;
    margin-left:5px;
  }
  .spark-one {
    left:-12px;
    bottom:29%;
    font-size:45px;
  }
  .spark-two {
    right:-10px;
    bottom:10%;
    font-size:42px;
  }
  .spark-three {
    left:90%;
    top:5%;
    font-size:25px;
  }

  .story-ribbon {
    height:43px;
    gap:25px;
    font-size:12px;
  }
  .story-ribbon span:nth-of-type(2) {
    font-size:16px;
  }
  .story-ribbon span:nth-of-type(n+3) {
    display:none;
  }
  .section-wrap {
    padding-inline:20px;
  }
  .arrivals {
    padding-top:43px;
    padding-bottom:50px;
  }
  .section-heading {
    margin-bottom:28px;
  }
  .section-heading h2 {
    font-size:32px;
    letter-spacing:-1px;
  }
  .section-heading .eyebrow {
    font-size:9px;
    letter-spacing:1.5px;
  }
  .heading-spark {
    font-size:23px;
    right:-27px;
    top:-10px;
  }
  .story-grid {
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:0 0 18px;
    scroll-padding-left:0;
  }
  .story-card {
    flex:0 0 78%;
    scroll-snap-align:start;
    border-radius:18px;
  }
  .card-art {
    border-radius:18px 18px 0 0;
  }
  .card-copy h3 {
    font-size:22px;
    min-height:0;
    margin-bottom:10px;
  }
  .card-copy>p:not(.card-genres) {
    font-size:12px;
  }
  .card-genre {
    font-size:10px;
  }
  .card-bottom {
    margin-top:14px;
  }
  .collection-note {
    font-size:11px;
    line-height:1.8;
    margin:22px 10px 0;
  }
  .pixy-inner {
    display:flex;
    flex-direction:column;
    gap:32px;
    text-align:center;
    padding:48px 24px;
  }
  .pixy-stamp {
    width:185px;
    height:185px;
    box-shadow:5px 6px 0 #aac7a5;
  }
  .pixy-stamp>span {
    font-size:38px;
  }
  .pixy-stamp small {
    font-size:7px;
    letter-spacing:.4px;
    margin-top:14px;
  }
  .pixy-stamp i {
    font-size:50px;
    right:-19px;
    top:16px;
  }
  .pixy-copy h2 {
    font-size:36px;
    margin-top:15px;
  }
  .pixy-copy>p:not(.eyebrow) {
    font-size:12px;
  }
  .pixy-copy .pill-button {
    font-size:16px;
  }
  footer {
    padding:30px 22px;
    justify-content:space-between;
    gap:24px;
  }
  footer .wordmark {
    font-size:27px;
  }
  dialog {
    width:calc(100% - 20px);
    max-height:calc(100dvh - 24px);
    border-radius:18px;
  }
  .reader-bar {
    padding:12px 16px;
  }
  .reader-bar>span {
    font-size:12px;
  }
  .reader-close {
    font-size:11px;
  }
  .reader-layout {
    display:block;
  }
  .reader-art {
    display:none;
  }
  .reader-content {
    padding:23px 20px;
  }
  .reader-content>h2 {
    font-size:27px;
  }
  .reader-tabs {
    gap:6px;
  }
  .reader-tabs button {
    font-size:15px;
    padding:7px 12px;
  }
  .scene-page blockquote {
    font-size:23px;
  }
  .world-page h3,.scene-page h3 {
    font-size:23px;
  }
  .scene-page {
    min-height:320px;
  }
  .character-number {
    font-size:70px;
  }
  .saved-message {
    font-size:12px;
  }
}
@media(max-width:360px) {
  .wordmark {
    font-size:25px;
  }
  .hero-slide {
    padding-inline:18px;
  }
  .hero h1 {
    font-size:47px;
  }
  .hero h1 i {
    font-size:28px;
  }
  .hero-art {
    height:275px;
  }
  .hero-controls {
    padding-inline:18px;
  }
  .story-card {
    flex-basis:86%;
  }
  .section-heading h2 {
    font-size:28px;
  }
  .heading-spark {
    right:-23px;
  }
  .card-copy h3 {
    font-size:21px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .hero .speech-bubble {
    animation:none;
  }
  #autoplay {
    display:none;
  }
}

/* The compact header keeps the Korean wordmark on the center column. */
.brand-lockup { grid-column: 2; display: flex; align-items: center; gap: 12px; }
.nav-right { grid-column: 3; }
.hero-art picture { display: contents; }
.card-image-button picture { display: block; }
footer { justify-content: center; }
.pixy-companion {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 35%;
  background: transparent;
}
@media (max-width: 600px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .brand-lockup { grid-column: 1; gap: 7px; }
  .nav-right { grid-column: 2; }
  .pixy-companion { flex-basis: 48px; width: 48px; height: 48px; }
}

/* Outlined controls keep navigation recognizable without bare text arrows. */
.chevron { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.button-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--cream); }
.button-icon .chevron { width: 18px; height: 18px; }
.slide-arrows button { display: grid; place-items: center; width: 40px; height: 40px; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.slide-arrows button:hover { background: #fff1a9; transform: translateY(-2px); }
.slide-arrows button:active { transform: translateY(2px); box-shadow: none; }
#autoplay { border: 2px solid var(--ink); }
.round-link { background: #eee5ff; }
.story-ribbon span:nth-of-type(3) { font-family: var(--display); font-weight: 400; }
@media (max-width: 600px) {
  .slide-arrows { gap: 6px; }
  .slide-arrows button { width: 32px; height: 32px; border-radius: 10px; }
  .slide-arrows .chevron { width: 18px; height: 18px; }
  #autoplay { margin-left: 0; }
}