:root{--moon-rgb:170,191,245;--moon-strength:.24;--sky-tint:184,166,234}
.hero-study-link{pointer-events:auto;color:#dfcff7;font-size:11px;min-height:36px;display:inline-flex;align-items:center;border-bottom:1px solid #7b6e96}.hero-index{gap:18px}.site-header nav{gap:25px}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.manage-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid #827198;border-radius:3px;background:#bba9e80a;color:#e4d4ff;font-size:12px;white-space:nowrap;transition:border-color .2s,background .2s}.manage-link:hover{border-color:var(--accent);background:#bba9e81c}
@media(min-width:701px) and (max-width:1050px){.site-header:has(.manage-link:not([hidden])){gap:16px}.site-header:has(.manage-link:not([hidden])) nav{gap:16px}.site-header:has(.manage-link:not([hidden])) .about-link{display:none}.header-actions{gap:8px}}
@media(max-width:700px){.header-actions{gap:8px}.manage-link{padding-inline:10px;font-size:11px}}
@media(max-width:400px){.site-header:has(.manage-link:not([hidden])){height:auto;min-height:110px;padding-block:14px;row-gap:8px}.site-header:has(.manage-link:not([hidden])) .brand{width:100%}.site-header:has(.manage-link:not([hidden])) .header-actions{margin-left:auto}}
html[data-moon-phase=crescent]{--moon-rgb:180,155,237;--moon-strength:.11;--sky-tint:155,132,225}
html[data-moon-phase=half]{--moon-rgb:139,193,229;--moon-strength:.18;--sky-tint:111,180,216}
body{isolation:isolate}
.night-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 80% 14%,rgba(var(--moon-rgb),var(--moon-strength)),transparent 62%);transition:background 1.2s}
#night-sky{width:100%;height:100%;display:block;position:absolute;inset:0}
.aurora{position:absolute;width:100vw;height:75vh;left:-25%;top:5%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--sky-tint),.16),transparent 65%);filter:blur(32px);animation:aurora-drift 16s ease-in-out infinite alternate;will-change:transform}
.aurora-two{left:30%;top:38%;background:radial-gradient(ellipse,rgba(var(--moon-rgb),.14),transparent 65%);animation-duration:22s;animation-delay:-8s}
.featured-section{background:linear-gradient(180deg,#0e162699,#080d1940)}
.manifesto{background:radial-gradient(ellipse at 50% 60%,rgba(var(--moon-rgb),.09),transparent 65%)}
.hero-copy{padding-block:56px 52px}
.hero-index{margin-top:30px}
.hero-visual picture{opacity:.9}
.hero-artwork{transform:translate(var(--drift-x),var(--drift-y));transition:transform .8s ease-out}
.hero-visual:after{background:radial-gradient(ellipse at var(--light-x) var(--light-y),rgba(var(--moon-rgb),.12),transparent 55%);mix-blend-mode:screen}
.moon-mist{background:radial-gradient(ellipse,rgba(var(--moon-rgb),.24),transparent 67%);animation-duration:9s;opacity:.9}
.scene-star{animation:star-glimmer 3s ease-in-out infinite alternate}.star-two{animation-delay:-1.5s}
.moon-console{margin-top:26px;padding-top:18px;border-top:1px solid #a9b8d52b;max-width:350px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;pointer-events:auto}
.moon-console>p{font-size:11px;color:#bdc6d7;letter-spacing:1px;display:flex;align-items:center;gap:9px;width:100%}
.moon-console-star{font-size:20px;line-height:1;color:var(--accent)}
#moon-phase-name{color:#eee7ff;border-left:1px solid #69718b;padding-left:12px;margin-left:3px}
.phase-options{display:flex;gap:5px}
.phase-options button{border:1px solid transparent;background:transparent;border-radius:20px;min-height:38px;padding:5px 13px;font-size:11px;color:#c3cadd;transition:background .3s,border-color .3s}
.phase-options button[aria-pressed=true]{background:rgba(var(--moon-rgb),.14);border-color:rgba(var(--moon-rgb),.55);color:#fff}
.phase-options button:hover{background:rgba(var(--moon-rgb),.2)}
#meteor-button{font-size:11px;color:#d7c9ee}#meteor-button span{display:inline-block;margin-left:6px}
.moon-toggle{position:absolute;border:0;border-radius:50%;padding:0;background:none;z-index:3;isolation:isolate;pointer-events:auto;transform:translate(var(--drift-x),var(--drift-y));transition:transform .8s ease-out;touch-action:manipulation}
.moon-toggle:not(.is-positioned){visibility:hidden}
.moon-disc{display:block;position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 22px rgba(var(--moon-rgb),.16);transition:box-shadow 1s}
.moon-texture{display:block;position:absolute;inset:0;border-radius:50%;background:url('./assets/moon-texture.webp') center/cover;transition:filter 1s}
.moon-shadow{position:absolute;inset:0;background:#0a1020;clip-path:ellipse(50% 50% at -52% 50%);transition:clip-path 1.1s ease,background 1.1s;filter:drop-shadow(0 0 3px #10182a)}
.moon-halo{position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,rgba(var(--moon-rgb),var(--moon-strength)),transparent 68%);animation:moon-halo 5s ease-in-out infinite alternate;pointer-events:none}
.moon-tap-ring{position:absolute;inset:-9px;border:1px solid rgba(var(--moon-rgb),.3);border-radius:50%;animation:moon-ring 4s ease-out infinite;pointer-events:none}
.moon-toggle:hover .moon-disc{box-shadow:0 0 44px rgba(var(--moon-rgb),.45)}
.moon-hint{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;white-space:nowrap;font-size:10px;letter-spacing:1px;color:#d1d9ec;text-shadow:0 2px 8px #02050c;pointer-events:none}
.hero-visual .visual-caption{pointer-events:none}
.ambience-dock{position:fixed;right:25px;bottom:24px;z-index:12;display:flex;align-items:center;padding:5px 7px;border:1px solid #68718e;border-radius:40px;background:#10182ee8;backdrop-filter:blur(18px);box-shadow:0 8px 40px #03061180;color:#e1dcf1}
.ambience-dock button{height:40px;min-width:40px;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:25px;padding:8px 11px;font-size:12px}
.ambience-dock button:hover{background:#bba9e81a}.ambience-dock #sound-settings{font-size:19px;padding-inline:9px}
.dock-divider{height:17px;width:1px;background:#64718d77;margin-inline:2px}
.sound-bars{display:flex;align-items:center;gap:3px;height:18px}
.sound-bars i{display:block;width:2px;height:5px;background:#c7b6f0;border-radius:3px}
.sound-bars i:nth-child(2){height:13px}.sound-bars i:nth-child(3){height:8px}.sound-bars i:nth-child(4){height:16px}
[aria-pressed=true] .sound-bars i{animation:sound-wave .85s ease-in-out infinite alternate}
[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.6s}[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.3s}
.sound-panel{position:fixed;inset:auto 25px 90px auto;margin:0;width:290px;max-width:calc(100vw - 32px);padding:25px;border:1px solid #7d789c;border-radius:12px;background:#111b2cf5;color:var(--text);box-shadow:0 15px 60px #0009;backdrop-filter:blur(20px)}
.sound-panel:popover-open{animation:dialog-appear .2s ease}.sound-panel h2{font-size:24px;margin:8px 0}.sound-panel p:not(.eyebrow){font-size:12px;color:var(--muted)}
.sound-panel .eyebrow{font-size:9px;color:#cabde6;letter-spacing:1.6px}
.sound-panel label{display:flex;justify-content:space-between;font-size:12px;margin-top:24px}.sound-panel input{display:block;width:100%;height:35px;accent-color:#c5b4ed}.sound-panel .text-button{font-size:11px;padding-bottom:0}
.site-footer{padding-bottom:94px}
.collection-card{transform-style:preserve-3d;transition:transform .28s ease-out,border-color .3s,box-shadow .3s;--tilt-x:0deg;--tilt-y:0deg;--shine-x:50%;--shine-y:50%}
@media(hover:hover) and (pointer:fine){.collection-card:hover{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px);box-shadow:0 20px 44px #02050b70}.collection-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--shine-x) var(--shine-y),#dbd1ff17,transparent 55%);opacity:0;transition:opacity .3s}.collection-card:hover:after{opacity:1}}
.reveal-ready{opacity:0;translate:0 28px;transition:opacity .75s,translate .75s}.reveal-ready.is-revealed{opacity:1;translate:0 0}
.love-spark{position:fixed;z-index:40;pointer-events:none;left:var(--spark-x);top:var(--spark-y);color:#ded0ff;font:18px Georgia,serif;animation:love-scatter .85s ease-out forwards;text-shadow:0 0 12px #cbb5ff}
.save-pop{animation:save-pop .45s ease-out}.discovery-orbit{animation:orbit-turn 20s linear infinite}.discovery-orbit span{animation:orbit-turn 20s linear infinite reverse}
.discovery-section.is-discovering{box-shadow:0 0 70px #bba9e82b;border-color:#c7b5ec}.discovery-section{transition:box-shadow .4s,border-color .4s}
.is-discovering .discovery-orbit{animation-duration:1s}.is-discovering #discover-button span{animation:orbit-turn .6s linear infinite}
.detail-art.detail-changing svg{animation:exhibit-arrive .35s ease-out}.saved-dialog[open]{animation:drawer-arrive .35s ease-out}
.motion-off .moon-toggle{transform:none!important}.motion-off .reveal-ready{opacity:1;translate:none;transition:none}.motion-off .collection-card{transform:none!important}.motion-off .aurora{will-change:auto}
.page-hidden *,.page-hidden *:before,.page-hidden *:after{animation-play-state:paused!important}
@keyframes aurora-drift{from{transform:translate(-8%,-8%) rotate(-12deg) scale(1)}to{transform:translate(24%,18%) rotate(16deg) scale(1.2)}}
@keyframes star-glimmer{from{opacity:.2;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}
@keyframes moon-halo{from{opacity:.6;transform:scale(.93)}to{opacity:1;transform:scale(1.13)}}
@keyframes moon-ring{0%{opacity:.5;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.22)}}
@keyframes sound-wave{to{height:3px;opacity:.6}}
@keyframes love-scatter{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(calc(-50% + var(--spark-dx)),calc(-50% + var(--spark-dy))) rotate(80deg) scale(1)}}
@keyframes save-pop{50%{scale:1.35}}
@keyframes orbit-turn{to{rotate:360deg}}
@keyframes exhibit-arrive{from{opacity:.4;transform:translateX(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drawer-arrive{from{opacity:.3;transform:translateX(50px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.moon-console{max-width:305px;column-gap:10px}.phase-options button{padding-inline:10px}.hero-copy{padding-block:45px}.moon-hint{font-size:9px;letter-spacing:.5px}}
@media(min-width:701px) and (max-width:900px){.hero{min-height:700px}.hero-visual{inset:80px -2% 64px 20%}.hero-copy{padding-block:44px}.hero-visual .visual-caption{bottom:25px}.moon-hint{top:calc(100% + 18px);font-size:8px}.moon-console{max-width:290px}}
@media(max-width:700px){.hero-copy{padding:39px 0 0}.hero-index{margin-top:25px}.moon-console{max-width:100%;margin-top:22px;column-gap:19px}.moon-console>p{font-size:11px}.phase-options button{min-height:40px;padding-inline:13px}.hero-visual{pointer-events:auto;margin-top:0}.moon-hint{font-size:9px;letter-spacing:.3px;top:calc(100% + 18px)}.moon-tap-ring{inset:-6px}.aurora{filter:blur(15px);animation-duration:22s}.ambience-dock{right:14px;bottom:14px;padding:3px 5px}.ambience-dock button{min-width:38px;height:38px;font-size:11px;padding-inline:8px}.sound-panel{right:14px;bottom:76px}.interaction-status{bottom:80px}.moon-console #meteor-button{font-size:11px}.site-footer{padding-bottom:95px}.reveal-ready{translate:0 18px}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;translate:none}.moon-toggle{transform:none!important}.collection-card{transform:none!important}.aurora{will-change:auto}}