:root{
--bg:#f8f9ff;
--bg2:#f2f4ff;
--text:#1d2330;
--muted:#5b6679;
--accent:#6f7dff;
--accent2:#b06cff;
--card:rgba(255,255,255,.68);
--cardBorder:rgba(120,140,255,.18);
--pillBg:rgba(255,255,255,.68);
--pillBorder:rgba(120,140,255,.20);
--shadow:0 16px 50px rgba(16,20,35,.08);
--blur:blur(10px);
--radius:22px;
--ease:cubic-bezier(.22,1,.36,1);
--auraY:58%;
--sigil:rgba(111,125,255,.22);
--sigil2:rgba(176,108,255,.14);
--grain:.06;
--motes:.40;
--themeFadeDur:220ms;
--font-display: "Cormorant Garamond", ui-sans-serif, system-ui, -apple-system;
}
html[data-theme="dark"]{
--bg:#080b12;
--bg2:#0f1420;
--text:#edf0ff;
--muted:#b7bdd6;
--accent:#88b2ff;
--accent2:#d58cff;
--card:rgba(12,16,26,.55);
--cardBorder:rgba(140,160,255,.12);
--pillBg:rgba(12,16,26,.60);
--pillBorder:rgba(160,180,255,.12);
--shadow:0 18px 60px rgba(0,0,0,.40);
--blur:blur(12px);
--auraY:56%;
--sigil:rgba(136,178,255,.16);
--sigil2:rgba(213,140,255,.14);
--grain:.10;
--motes:.28;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.6;
  color:var(--text);
  background-color:var(--bg);
  overflow:hidden;
}
body, .bg-grad, .bg-lines, .bg-vignette, .card, .notice, .pill, .themebtn, .mini, .thumb, .icon, .brandmark, .chibi-face, .unified-card, .music-toggle-btn{
transition:color .3s var(--ease),border-color .2s var(--ease),background-color .3s var(--ease),box-shadow .2s var(--ease),opacity .3s var(--ease),filter .2s var(--ease),transform .2s var(--ease);
}
@media (prefers-reduced-motion:reduce){
body, .bg-grad, .bg-lines, .bg-vignette, .card, .notice, .pill, .themebtn, .mini, .thumb, .icon, .brandmark, .chibi-face, .unified-card, .music-toggle-btn{ transition:none; }
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid rgba(111,125,255,.55);outline-offset:3px;border-radius:999px}

.app-loader{
position:fixed;inset:0;z-index:99999;background-color:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease-out,visibility .5s ease-out;
}
.app-loader.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{display:flex;flex-direction:column;align-items:center;gap:16px;width:240px}
.loader-logo{font-size:42px;animation:loaderFloat 3s infinite ease-in-out;filter:drop-shadow(0 0 10px rgba(111,125,255,0.4));transform-origin:center}
@keyframes loaderFloat{0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}25%{transform:translateY(-4px) rotate(0deg) scale(1.05)}50%{transform:translateY(0) rotate(3deg) scale(1)}75%{transform:translateY(-2px) rotate(0deg) scale(1.02)}}
.loader-track{width:100%;height:4px;background:rgba(120,140,255,.15);border-radius:99px;overflow:hidden}
.loader-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;border-radius:99px;box-shadow:0 0 10px rgba(111,125,255,.5);transition:width .2s linear}
.loader-text{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.7;transition:opacity .15s var(--ease);min-width:160px;text-align:center}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}

.topbar{
position:fixed;left:0;right:0;top:0;height:86px;display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 18px 14px;z-index:50;pointer-events:none;
}
.brandmark{pointer-events:auto;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--pillBg);border:1px solid var(--pillBorder);box-shadow:var(--shadow);backdrop-filter:var(--blur);transform:translateZ(0)}
.navpills{pointer-events:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:min(980px,calc(100vw - 220px));position:relative}
.nav-indicator{
position:absolute;bottom:-6px;height:2.5px;border-radius:99px;
background:linear-gradient(90deg,var(--accent),var(--accent2));
box-shadow:0 0 10px rgba(111,125,255,.45),0 0 20px rgba(176,108,255,.20);
opacity:0;transition:left .3s var(--ease),width .3s var(--ease),opacity .3s var(--ease);
pointer-events:none;z-index:1;
}
.nav-indicator.is-visible{opacity:1}
html[data-theme="dark"] .nav-indicator{
box-shadow:0 0 10px rgba(136,178,255,.40),0 0 20px rgba(213,140,255,.20);
}
.pill{
padding:8px 16px;border-radius:999px;background:var(--pillBg);border:1px solid var(--pillBorder);backdrop-filter:var(--blur);font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted);transition:box-shadow .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);box-shadow:0 8px 26px rgba(0,0,0,.06);position:relative;overflow:hidden;
}
.pill:hover{color:var(--text);box-shadow:0 12px 30px rgba(111,125,255,.12);border-color:rgba(111,125,255,.35)}
.pill.is-active{color:var(--text);border-color:rgba(111,125,255,.45);box-shadow:0 12px 34px rgba(111,125,255,.20);animation:pillPulse .25s var(--ease)}
@keyframes pillPulse{0%{transform:scale(0.96)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
.themebtn{
pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:var(--pillBg);border:1px solid var(--pillBorder);backdrop-filter:var(--blur);box-shadow:var(--shadow);cursor:pointer;transition:transform .2s var(--ease);color:var(--muted);
}
.themebtn:hover{transform:translateY(-1px);color:var(--text)}
.themebtn .dot{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(111,125,255,.55)}
.themebtn .label{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}

.bg{position:fixed;inset:0;z-index:0}
.bg-grad{position:absolute;inset:-24%;opacity:0;transform:scale(1.02);filter:saturate(1.08) blur(0px);transition:opacity .75s var(--ease),transform .85s var(--ease),filter .85s var(--ease);will-change:opacity,transform,filter}
.bg-grad--angel{background:radial-gradient(circle at 18% 34%,rgba(111,125,255,.22),transparent 56%),radial-gradient(circle at 84% 28%,rgba(176,108,255,.18),transparent 60%),radial-gradient(circle at 70% 86%,rgba(255,190,220,.20),transparent 58%),linear-gradient(180deg,#fbfbff,#f2f4ff)}
.bg-grad--fallen{background:radial-gradient(circle at 22% 30%,rgba(136,178,255,.14),transparent 58%),radial-gradient(circle at 86% 26%,rgba(213,140,255,.14),transparent 60%),radial-gradient(circle at 70% 88%,rgba(255,120,160,.10),transparent 58%),linear-gradient(180deg,#0b0e14,#0f1420)}
html[data-chapter="angel"] .bg-grad--angel{opacity:1;transform:scale(1.00)}
html[data-chapter="angel"] .bg-grad--fallen{opacity:0;transform:scale(1.03);filter:saturate(1.02) blur(1px)}
html[data-chapter="fallen"] .bg-grad--angel{opacity:0;transform:scale(1.03);filter:saturate(1.02) blur(1px)}
html[data-chapter="fallen"] .bg-grad--fallen{opacity:1;transform:scale(1.00)}
html[data-chapter="fallen"] .bg-sigil,
html[data-chapter="fallen"] .bg-motes,
html[data-chapter="fallen"] .bg-grain{display:none}
.bg-lines{position:absolute;inset:0;opacity:.18;background:linear-gradient(90deg,rgba(111,125,255,.25) 1px,transparent 1px),linear-gradient(0deg,rgba(111,125,255,.18) 1px,transparent 1px);background-size:140px 140px;mask-image:radial-gradient(circle at 50% 45%,black 0,transparent 72%)}
html[data-theme="dark"] .bg-lines{display:none}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,transparent 35%,rgba(0,0,0,.12) 100%);opacity:.45}
html[data-theme="dark"] .bg-vignette{opacity:.65}

.rail{
position:fixed;inset:0;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-top:86px;
}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:rgba(111,125,255,.22);border-radius:999px}
.panel{
flex:0 0 100vw;width:100vw;height:100vh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:24px 18px 72px;position:relative;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
}
.panel-inner{width:min(860px,92vw);position:relative;will-change:transform,opacity}

.bg-sigil{position:absolute;inset:0;opacity:.55;pointer-events:none;mix-blend-mode:screen}
html[data-theme="dark"] .bg-sigil{mix-blend-mode:lighten;opacity:.40}
.bg-motes{
position:absolute;inset:0;opacity:var(--motes);pointer-events:none;background:radial-gradient(circle at 12% 28%,rgba(255,255,255,.28) 0 1px,transparent 2px),radial-gradient(circle at 74% 18%,rgba(255,255,255,.22) 0 1px,transparent 2px),radial-gradient(circle at 82% 72%,rgba(255,255,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 26% 78%,rgba(255,255,255,.16) 0 1px,transparent 2px);filter:blur(.2px);animation:motesFloat 7.5s var(--ease) infinite alternate;
}
@keyframes motesFloat{from{transform:translateY(0px)}to{transform:translateY(-14px)}}
.bg-grain{
position:absolute;inset:0;opacity:var(--grain);pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light;
}
html[data-theme="dark"] .bg-grain{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.20) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px);mix-blend-mode:overlay}
html.theme-immediate *{transition:none !important}

@media (max-width:980px){
:root{--blur:none;--themeFadeDur:.16s}
.rail,.card,.notice,.pill,.themebtn,.mini,.icon,.brandmark,.panel-inner,.unified-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.bg-sigil::before,.bg-motes,.chibi-glow{animation:none !important}
.bg-grain{display:none}
.bg-lines{opacity:.12;background-size:180px 180px}
html[data-theme="dark"] .bg-lines{display:none}
.card,.unified-card{box-shadow:0 10px 28px rgba(16,20,35,.10)}
html[data-theme="dark"] .card,html[data-theme="dark"] .unified-card{box-shadow:0 14px 34px rgba(0,0,0,.35)}
}

@media (max-width:760px){
.nav-indicator{display:none !important}
html, body {
overflow: auto !important;
height: auto !important;
min-height: 100%;
}
.rail {
position: relative;
inset: auto;
height: auto;
overflow: visible;
display: block;
padding-top: 96px;
scroll-snap-type: none;
scroll-behavior: smooth;
}
.panel {
width: 100%;
min-width: 0;
min-height: auto;
height: auto;
align-items: flex-start;
justify-content: flex-start;
padding: 18px 0 26px;
scroll-snap-align: none;
overflow-y: visible;
}
.panel-inner {
width: min(860px, 92vw);
margin: 0 auto;
filter: none !important;
}
.foot {
position: relative;
left: auto;
right: auto;
bottom: auto;
display: block;
text-align: center;
padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
justify-content: center;
}
.topbar {
background: transparent !important;
border: none !important;
box-shadow: none !important;
height: 0 !important;
padding: 0 !important;
min-height: 0 !important;
pointer-events: none;
}
.topbar > * { display: none !important; }
#themeBtn.themebtn {
display: flex !important;
position: fixed !important;
top: 14px !important;
right: 14px !important;
z-index: 60 !important;
pointer-events: auto !important;
-webkit-tap-highlight-color: transparent;
}
.bg-lines, .bg-sigil, .bg-motes, .grain, .scanlines { display: none !important; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-name: none !important;
}
.panel, .card, .pill, .themebtn, .social a, .brandmark, .unified-card {
transition-property: background-color, color, border-color, opacity !important;
transition-duration: .2s !important;
transition-timing-function: ease !important;
}
.panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.panel-inner { filter: none !important; }
.topbar { height: auto; padding: 14px 14px 10px; gap: 12px; }
.navpills { max-width: 100%; overflow: visible; flex-wrap: wrap; justify-content: center; padding-bottom: 0; }
.navpills::-webkit-scrollbar { display: none; }
.panel.is-entrance .panel-inner > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.card:hover,
.unified-card:hover,
.notice:hover,
.mini:hover {
transform: none !important;
box-shadow: var(--shadow) !important;
}
}

.theme-fade-layer{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:1;transition:opacity var(--themeFadeDur,220ms) ease;will-change:opacity}
.theme-fade-layer.fade-out{opacity:0}
@media (max-width:980px){:root{--themeFadeDur:160ms}}
@media (prefers-reduced-motion:reduce){.bg-sigil::before,.bg-motes,.chibi-glow{animation:none !important}}
html:not([data-visible="true"]) .bg-sigil::before,html:not([data-visible="true"]) .bg-motes{animation-play-state:paused}
html:not([data-visible="true"]) .chibi-glow{animation-play-state:paused}
html[data-switching="true"] .bg-grain{display:none !important}
html[data-switching="true"] .bg-motes,html[data-switching="true"] .bg-sigil::before,html[data-switching="true"] .chibi-glow{animation:none !important}
html[data-switching="true"] .rail,html[data-switching="true"] .card,html[data-switching="true"] .notice,html[data-switching="true"] .pill,html[data-switching="true"] .themebtn,html[data-switching="true"] .mini,html[data-switching="true"] .icon,html[data-switching="true"] .brandmark,html[data-switching="true"] .panel-inner,html[data-switching="true"] .unified-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

.egg-toast{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);padding:16px 24px;background:rgba(255,255,255,.9);border:1px solid var(--pillBorder);border-radius:99px;box-shadow:0 12px 40px rgba(111,125,255,.3);backdrop-filter:blur(12px);color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.1em;z-index:9999;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}
html[data-theme="dark"] .egg-toast{background:rgba(20,20,30,.9);color:var(--accent);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.egg-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.scroll-to-top-btn {
position: fixed;
bottom: 24px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--pillBorder);
background: var(--pillBg);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
color: var(--text);
cursor: pointer;
z-index: 45;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.22s var(--ease);
pointer-events: none;
}
.scroll-to-top-btn svg { width: 24px; height: 24px; }
.scroll-to-top-btn.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.scroll-to-top-btn:hover {
transform: translateY(-2px);
background: var(--card);
}
.scroll-to-top-btn:active { transform: scale(0.95); }
@media (min-width: 761px) {
.scroll-to-top-btn { display: none !important; }
.mobile-doodle-wrapper { display: none !important; }
}

.wishlist-iframe-wrapper {
margin-top: 20px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--cardBorder);
background: var(--card);
}
.wishlist-iframe-wrapper iframe {
width: 100%;
height: 500px;
border: none;
display: block;
}
@media (max-width: 760px) {
.wishlist-iframe-wrapper iframe { height: 450px; }
}