:root {
  color-scheme: dark;
  --bg: #080b15;
  --surface: #151b2c;
  --text: #faf3e5;
  --muted: #c0bdd0;
  --gold: #edc681;
  --border: #8e6a3b;
  --header-height: 91px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  font: 16px/1.55 Arial, Helvetica, sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at 4% 5%, #653c352b, transparent 42%), radial-gradient(ellipse at 95% 15%, #34376d50, transparent 48%), radial-gradient(ellipse at 50% 90%, #51274925, transparent 55%), var(--bg);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 2px solid #ffe0a5; outline-offset: 4px; }
.skip { position: absolute; top: -80px; left: 20px; z-index: 99; background: var(--gold); color: #111; padding: 12px; }
.skip:focus { top: 10px; }
.site-header { position: sticky; top: 0; z-index: 10; background: #090d1aed; backdrop-filter: blur(18px); border-bottom: 1px solid #caa76c45; box-shadow: 0 4px 26px #0004; }
.header-inner { max-width: 1560px; margin: auto; padding: 12px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.brand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.brand img { height: 66px; width: 66px; border-radius: 50%; object-fit: contain; border: 1px solid #b89056; box-shadow: 0 0 24px #e3b56520; }
.brand span { font: italic 34px/1.1 Georgia, serif; letter-spacing: .2px; color: var(--gold); text-shadow: 0 2px 18px #dcb47735; }
.site-header nav { align-items: center; gap: 5px; }
.desktop-menu { display: flex; }
.site-header nav a { display: flex; align-items: center; gap: 9px; font: 18px/1.25 Georgia, serif; padding: 13px; border-radius: 10px; color: #d4cdd8; white-space: nowrap; }
.site-header nav a[aria-current],.site-header nav a:hover { background: linear-gradient(135deg,#d7b07122,#7c65931c); color: #ffe0a1; }
.site-header nav svg { width: 21px; height: 21px; color: var(--gold); flex: none; }
.mobile-menu { display: none; }
.mobile-menu summary { list-style: none; cursor: pointer; min-height: 44px; padding: 8px 12px; border: 1px solid #ad854950; border-radius: 10px; color: var(--gold); background: #e3b96e0c; align-items: center; gap: 8px; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::marker { content: ''; }
.mobile-menu summary svg { width: 23px; height: 23px; }
.menu-close-label,.mobile-menu[open] .menu-label { display: none; }
.mobile-menu[open] .menu-close-label { display: inline; }
.page { max-width: 1560px; margin: 0 auto; padding: 30px 36px 38px; min-height: calc(100dvh - 180px); }
.page-intro { margin-bottom: 24px; padding-bottom: 20px; position: relative; }
.page-intro::after { content: ''; position: absolute; bottom: 0; left: 0; width: min(440px,100%); height: 1px; background: linear-gradient(90deg,#f2cb88,#be8c6544,transparent); }
.page-intro h1 { font-size: clamp(32px,3.4vw,48px); line-height: 1.15; letter-spacing: -.4px; color: #f4d8a1; text-shadow: 0 3px 35px #c7a76d25; }
.page-intro>p:not(.eyebrow) { margin-top: 9px; color: var(--muted); max-width: 720px; }
.eyebrow { font-size: 14px; color: var(--gold); margin-bottom: 10px; }
.card { border: 1px solid transparent; background: radial-gradient(ellipse at 15% 0%,#b89a6b12,transparent 65%) padding-box, linear-gradient(145deg,#1d2235,#101522) padding-box, linear-gradient(135deg,#efc987,#78634e 35%,#4e5478 60%,#b48951) border-box; border-radius: 18px; box-shadow: 0 8px 20px #0004,inset 0 0 0 4px #c6a47704; transition: transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s ease; transform-origin: center; position: relative; }
.card::after { content: ''; position: absolute; inset: -1px; border: 1px solid #f7d596; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 12px #f0ca8840,0 0 30px #daa55b25; transition: opacity .3s ease; }
.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.collection-card { display: flex; align-items: center; gap: 18px; padding: 20px; min-height: 106px; }
.collection-card:nth-child(3n+2) { background: radial-gradient(ellipse at 0% 0%,#704b5a30,transparent 70%) padding-box,linear-gradient(145deg,#202035,#111523) padding-box,linear-gradient(135deg,#efc987,#725f75 50%,#b48951) border-box; }
.collection-card h2 { font-size: 26px; line-height: 1.2; color: #f5dfb4; }
.collection-card p { font-size: 14px; color: var(--muted); margin-top: 5px; }
.collection-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border: 1px solid #c89e5d66; border-radius: 50%; background: radial-gradient(circle,#edc68118,#bba0e007); box-shadow: inset 0 0 15px #e7c4870b,0 0 15px #ae884410; color: var(--gold); }
.collection-icon svg { width: 28px; height: 28px; filter: drop-shadow(0 0 6px #e6bd6540); }
.compact-section { margin-top: 26px; }
.section-top { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 9px; }
.section-top h2 { font-size: 29px; line-height: 1.25; color: #f6dfb6; }
.text-link { font-size: 14px; color: var(--gold); text-decoration: underline; text-underline-offset: 5px; }
.carousel-shell { position: relative; padding-inline: 54px; }
.carousel-controls { display: contents; }
.carousel-button { position: absolute; inset-inline-start: 0; top: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c69b58; border-radius: 50%; background: radial-gradient(circle at 30% 10%,#594330,#151829 80%); color: #ffe0a6; box-shadow: 0 0 18px #dfb26315; cursor: pointer; transition: background .2s,box-shadow .2s; }
.carousel-button[data-direction="1"] { inset-inline-start: auto; inset-inline-end: 0; }
.carousel-button svg { width: 24px; height: 24px; }
.carousel-button:hover:not(:disabled) { background: #413246; box-shadow: 0 0 18px #f1c76f30; }
.carousel-button:disabled { opacity: .35; cursor: default; }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px)/4); gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 10px; scroll-behavior: smooth; overscroll-behavior-inline: contain; padding: 12px 10px 16px; margin: 0 -10px; scrollbar-width: none; position: relative; }
.carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.carousel>.card { scroll-snap-align: start; min-width: 0; }
.recipe-card { display: flex; flex-direction: column; align-items: flex-start; padding: 21px; min-height: 230px; text-align: left; }
.recipe-icon { color: var(--gold); margin-bottom: 9px; }
.recipe-icon svg { width: 26px; height: 26px; }
.category { font-size: 14px; color: var(--gold); margin-bottom: 8px; }
.recipe-card h3 { font-size: 26px; line-height: 1.15; margin-bottom: 10px; color: #f5dfb4; }
.recipe-card>p:not(.category) { color: var(--muted); font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
.card-foot { font-size: 14px; color: #eccb91; margin-top: auto; border-top: 1px solid #c19a5938; padding-top: 12px; width: 100%; }
.picture-card { padding: 10px; cursor: pointer; text-align: left; width: 100%; min-width: 0; }
.image-frame { height: 230px; display: block; overflow: hidden; background: #080c17; border: 1px solid #c5a77b24; border-radius: 11px; width: 100%; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: inherit; }
.image-frame img[src$="fluffy.webp"],.series-portrait img[src$="fluffy.webp"] { object-position: 50% 46%; }
.picture-caption { display: block; padding: 13px 8px 8px; }
.picture-caption strong { display: block; font: 21px/1.15 Georgia,serif; color: #f8dfb2; }
.picture-caption>span { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.recipe-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.recipe-grid .recipe-card { min-height: 220px; }
.back-link { display: inline-block; font-size: 14px; color: var(--gold); text-decoration: underline; margin: 0 0 18px; }
.recipe-meta { font-size: 15px; color: var(--gold); margin-bottom: 15px; }
.recipe-note { border: 1px solid #8d744d; border-radius: 12px; max-width: 950px; background: #292231; margin-bottom: 20px; }
.recipe-note summary { padding: 12px 16px; cursor: pointer; color: #ecd7aa; font-size: 15px; }
.recipe-note p { padding: 0 16px 15px; font-size: 15px; color: #d6c9c1; }
.recipe-body { display: grid; grid-template-columns: .85fr 1.7fr; gap: 38px; }
.recipe-body h2 { font-size: 28px; margin-bottom: 15px; color: #f4d8a1; }
.ingredient-panel { padding: 23px; background: #171c2c; border: 1px solid #8e744b; border-radius: 16px; align-self: start; }
.recipe-body ul,.recipe-body ol { padding-left: 22px; margin: 0; }
.recipe-body li { margin-bottom: 12px; line-height: 1.6; }
.method-panel { padding: 15px 0; }
.method-panel li { padding-left: 6px; }
.method-panel li::marker { color: var(--gold); font-weight: 600; }
.pet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 950px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-visual { width: 100%; margin: 0; padding: 0; }
.home-visual picture { display: block; width: 100%; }
.home-visual img { display: block; width: 100%; height: auto; }
.page.home-content { min-height: 0; padding-top: 36px; }
.series-card { display: grid; grid-template-rows: 280px 112px; width: 100%; min-width: 0; padding: 10px; text-align: left; }
.series-card .image-frame { height: 100%; min-height: 0; }
.series-card .image-frame img { max-width: 100%; }
.series-caption { display: flex; flex-direction: column; gap: 5px; padding: 14px 8px 8px; }
.series-caption strong { font: 23px/1.15 Georgia,serif; color: #f8dfb2; }
.series-caption>span { font-size: 14px; color: var(--muted); }
.series-caption .series-link { margin-top: auto; color: var(--gold); }
.carousel .series-card { grid-template-rows: 230px 112px; }
.character-carousel .picture-card { display: grid; grid-template-rows: 230px 112px; }
.character-carousel .image-frame { width: 100%; height: 100%; margin: 0; }
.series-library { display: grid; grid-template-columns: minmax(220px,360px) minmax(0,1fr); gap: 36px; align-items: start; }
.series-portrait { height: 280px; overflow: hidden; border: 1px solid #a78044; border-radius: 16px; background: #080c17; }
.series-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.season-library { padding: 18px 0; }
.season-library h2 { font-size: 29px; color: #f4d8a1; margin-bottom: 16px; }
.empty-library { color: var(--muted); }
.pet-profile>.picture-card .image-frame { height: 330px; }
.pet-profile>p { color: var(--muted); margin: 15px 4px; font-size: 16px; }
.status { font-size: 14px; display: inline-block; border: 1px solid #b78f544d; border-radius: 8px; padding: 7px 12px; color: #e0cba5; background: #d6b2680c; }
.collection-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; }
.lifestyle-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; max-width: 1200px; }
.lifestyle-feature { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.lifestyle-feature h2 { font-size: 32px; }
.lifestyle-feature p { color: var(--muted); max-width: 510px; }
.lifestyle-list { border-top: 1px solid #9a794b; }
.lifestyle-list article { padding: 22px 8px; border-bottom: 1px solid #9a794b55; }
.lifestyle-list h3 { font-size: 25px; color: #f4d8a1; }
.lifestyle-list p { font-size: 16px; color: var(--muted); margin-top: 6px; }
.game-layout { max-width: 1080px; }
.game-preview { display: grid; grid-template-columns: 300px 1fr; gap: 30px; padding: 18px; align-items: center; }
.game-preview .image-frame { height: 330px; }
.game-preview h2 { font-size: 37px; line-height: 1.15; margin: 0 0 16px; color: #f4d8a1; }
.game-preview p:not(.category) { color: var(--muted); margin-bottom: 24px; }
.album-menu { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.album-menu a { border: 1px solid #b8925855; padding: 9px 16px; border-radius: 20px; font-size: 15px; color: #efd49f; background: linear-gradient(135deg,#b18d3a19,#63518d16); }
.album-menu a:hover { border-color: var(--gold); }
.gallery-section { margin-top: 24px; scroll-margin-top: 110px; }
.gallery-section .image-frame { height: 260px; }
footer { max-width: 1488px; margin: auto; border-top: 1px solid #b5915b40; padding: 24px clamp(20px, 3vw, 44px) 28px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
footer>a { font: italic 26px Georgia,serif; color: var(--gold); }
footer>span { color: #dfc99c; font: 400 16px/1.5 Georgia,serif; letter-spacing: .025em; }
footer>small { color: #dfc99c; font: 400 16px/1.5 Georgia,serif; letter-spacing: .025em; }
/* Keep artwork in a phone-sized viewer, with the toolbar inside its height. */
#picture-viewer { width: min(440px,calc(100vw - 24px)); height: min(760px,calc(100vh - 24px)); height: min(760px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-width: 440px; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 12px; overflow: hidden; border: 1px solid #c79e5a; border-radius: 18px; background: radial-gradient(ellipse at top,#27223b,#0b0f1c 70%); color: var(--text); box-shadow: 0 25px 90px #000b,0 0 30px #c7974822; }
#picture-viewer::backdrop { background: #030611ec; backdrop-filter: blur(10px); }
.viewer-layout { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.viewer-toolbar h2 { margin: 0; font-size: clamp(18px,2.2vw,26px); line-height: 1.2; color: #f2d6a3; overflow-wrap: anywhere; }
.viewer-toolbar form { display: flex; margin: 0; flex-shrink: 0; }
.close { min-height: 44px; border: 1px solid #bb925657; background: #282238; border-radius: 9px; padding: 8px 16px; cursor: pointer; color: var(--gold); }
.viewer-stage { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
#picture-image { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
html:has(#picture-viewer[open]) { overflow: hidden; }
@media (hover:hover) and (pointer:fine) {
  .card:hover { transform: scale(1.018); box-shadow: 0 12px 26px #0005,0 0 25px #e4bb6f20; z-index: 1; }
  .card:hover::after { opacity: 1; }
}
@media (min-width:1350px) {
  .collection-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .collection-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .collection-card h2 { font-size: 24px; }
  .recipe-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  :root { --header-height: 73px; }
  .header-inner { gap: 12px; padding: 10px 24px; }
  .brand img { width: 52px; height: 52px; }
  .brand span { font-size: 29px; }
  .site-header .desktop-menu { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; }
  .mobile-menu nav { position: absolute; top: calc(100% + 8px); left: 24px; right: 24px; display: grid; grid-template-columns: 1fr; padding: 10px; border: 1px solid #b68d50; border-radius: 15px; background: #101627fa; box-shadow: 0 20px 45px #0009,0 0 25px #e3b76d10; }
  .mobile-menu nav a { padding: 12px 14px; min-height: 44px; white-space: normal; }
  .page { padding: 26px 24px 34px; }
  .page.home-content { padding-top: 24px; }
  .carousel { grid-auto-columns: calc((100% - 32px)/3); }
  .collection-card { padding: 17px; gap: 12px; }
  .collection-card h2 { font-size: 24px; }
  .collection-icon { width: 46px; height: 46px; }
  .recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  footer { margin: 0 24px; }
  .recipe-body { gap: 26px; grid-template-columns: 1fr 1.5fr; }
}
@media (max-width:800px) { .carousel { grid-auto-columns: calc((100% - 16px)/2); } }
@media (max-width:650px) {
  :root { --header-height: 66px; }
  html { scroll-padding-top: 90px; }
  .header-inner { padding: 10px 16px; gap: 8px; }
  .brand { gap: 10px; }
  .brand img { width: 45px; height: 45px; }
  .brand span { font-size: 26px; }
  .mobile-menu summary { padding: 8px 10px; font-size: 14px; }
  .mobile-menu nav { left: 16px; right: 16px; }
  .page { padding: 23px 16px 30px; }
  .page.home-content { padding-top: 16px; }
  .page-intro { margin-bottom: 20px; }
  .page-intro h1 { font-size: 35px; }
  .page-intro>p:not(.eyebrow) { font-size: 16px; }
  .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .collection-card { padding: 15px; gap: 10px; min-height: 115px; flex-direction: column; align-items: flex-start; }
  .collection-card h2 { font-size: 23px; }
  .collection-card p { font-size: 14px; }
  .collection-icon { width: 40px; height: 40px; }
  .collection-icon svg { width: 24px; height: 24px; }
  .carousel-shell { padding-inline: 0; padding-top: 46px; }
  .carousel-button { top: 0; inset-inline-start: auto; inset-inline-end: 54px; }
  .carousel-button[data-direction="1"] { inset-inline-end: 0; }
  .carousel { grid-auto-columns: 82%; gap: 14px; }
  .recipe-card { min-height: 215px; padding: 20px; }
  .section-top h2 { font-size: 27px; }
  .section-top { align-items: center; }
  .text-link { font-size: 14px; }
  .image-frame { height: 240px; }
  .gallery-section .image-frame { height: 270px; }
  .recipe-grid { grid-template-columns: 1fr; gap: 14px; }
  .recipe-grid .recipe-card { min-height: 0; }
  .recipe-body { grid-template-columns: 1fr; gap: 20px; }
  .pet-grid { grid-template-columns: 1fr; gap: 24px; }
  .pet-grid .series-card { width: 100%; max-width: 400px; grid-template-rows: 260px 112px; }
  .series-library { grid-template-columns: 1fr; gap: 20px; }
  .series-portrait { max-width: 400px; width: 100%; height: 260px; }
  .pet-profile>.picture-card { max-width: 400px; }
  .pet-profile>.picture-card .image-frame { height: 330px; }
  .lifestyle-layout { grid-template-columns: 1fr; gap: 22px; }
  .game-preview { grid-template-columns: 1fr; gap: 20px; }
  .game-preview .image-frame { height: 290px; }
  .game-preview>div:last-child { padding: 0 8px 10px; }
  .collection-bottom { align-items: flex-start; flex-direction: column; }
  footer { margin: 0 16px; flex-wrap: wrap; padding: 20px 16px; }
  footer>span { width: 100%; order: 3; }
  .gallery-section { scroll-margin-top: 90px; }
  #picture-viewer { padding: 10px; border-radius: 13px; }
  .viewer-layout { gap: 8px; }
  .viewer-toolbar { gap: 10px; }
  .close { padding: 8px 12px; }
}
@media (max-width:1100px) and (max-height:420px) { .mobile-menu nav { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { html,.carousel { scroll-behavior: auto; } .card,.card::after { transition: none; } .card:hover { transform: none; } }
@media print { .site-header,footer,.back-link { display: none; } .page { padding: 0; max-width: none; color: #111; } .recipe-body { grid-template-columns: 1fr 1.7fr; } .ingredient-panel,.recipe-note { background: white; color: #111; border-color: #bbb; } .method-panel li::marker { color: #111; } body { background: white; } .page-intro p,.recipe-meta { color: #333; } }