:root{color-scheme:dark;background:#020305}
html{width:100%;height:100%;margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y pinch-zoom;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{width:100%;min-height:100%;margin:0}
.star-page,.art-page,.socrates-page{position:relative;width:100%;height:100svh;min-height:100svh;scroll-snap-align:start}
.star-page{overflow:hidden;background:#02050d}
.starry-frame{position:absolute;inset:0;display:block}
.starry-night{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:var(--moon-x,83%) var(--moon-y,17%);will-change:transform}
.moonlight-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle var(--light-radius,1px) at var(--moon-x,83%) var(--moon-y,17%),rgba(2,5,13,0) 0 54%,rgba(2,5,13,.58) 76%,rgba(2,5,13,.975) 100%);opacity:1;will-change:opacity}
.moon-glow{position:absolute;left:var(--moon-x,83%);top:var(--moon-y,17%);width:96vmax;height:96vmax;margin:-48vmax 0 0 -48vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,226,160,0) 0 2.5%,rgba(255,210,130,.58) 7%,rgba(255,198,108,.3) 18%,rgba(255,184,82,.1) 34%,rgba(255,180,80,0) 60%);mix-blend-mode:screen;opacity:0;transform:scale(.25);pointer-events:none;will-change:transform,opacity}
.moon-return{position:absolute;left:var(--moon-x,83%);top:var(--moon-y,17%);width:var(--moon-hit,160px);height:var(--moon-hit,160px);padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;transition:background .25s ease,box-shadow .25s ease}
.moon-return:hover,.moon-return:focus-visible{background:radial-gradient(circle,rgba(255,234,186,.12),rgba(255,216,138,.05) 45%,transparent 72%);box-shadow:0 0 0 1.5px rgba(255,244,214,.8),0 0 0 7px rgba(6,10,20,.22),0 0 42px rgba(255,220,150,.5)}
.moon-return:focus{outline:none}
.person-about{position:absolute;left:var(--person-x,0);top:var(--person-y,0);width:var(--person-w,0);height:var(--person-h,0);padding:0;border:0;background:transparent;border-radius:20px;cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent}
.person-about::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(255,214,150,.2),rgba(255,200,120,.05) 55%,transparent 72%);opacity:0;transition:opacity .3s ease;pointer-events:none;mix-blend-mode:screen;filter:blur(6px)}
.person-about:not(:disabled):hover::before,.person-about:focus-visible::before{opacity:1}
.person-about:focus{outline:none}
.person-about:disabled{cursor:default}
.about-popover{position:absolute;left:var(--about-left,30%);bottom:var(--about-bottom,20%);box-sizing:border-box;width:min(300px,calc(100vw - var(--about-left,30%) - 24px));padding:22px 22px 20px;border:1px solid rgba(255,236,200,.22);border-radius:16px;background:rgba(8,13,24,.86);box-shadow:0 22px 70px rgba(0,0,0,.5);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);color:#f4ecdd;font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;z-index:4}
.about-popover[data-open=true]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .24s ease,transform .24s ease,visibility 0s}
.about-popover::after{content:"";position:absolute;left:26px;bottom:-7px;width:12px;height:12px;background:rgba(8,13,24,.86);border-right:1px solid rgba(255,236,200,.22);border-bottom:1px solid rgba(255,236,200,.22);transform:rotate(45deg);border-bottom-right-radius:2px}
.about-kicker{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:10px;letter-spacing:.22em;color:#e5c78f}
.about-kicker span{font-size:11px;letter-spacing:0;color:#f0d49a}
.about-popover h2{margin:0 0 12px;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:.03em;color:#fff5e6}
.about-copy{margin:0;font-size:13px;line-height:1.9;color:rgba(244,236,221,.74)}
.about-copy + .about-copy{margin-top:4px}
.art-page{display:grid;place-items:center;overflow:hidden;background:#d2ac69}
.art-page img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.socrates-page{display:block;overflow:hidden;background:#0c0d0e}
.socrates-page img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
@media(orientation:portrait){
  .starry-night{object-position:84% 50%}
  .art-page img{object-position:30% 50%}
  .socrates-page img{object-position:63% 44%}
  .person-about,.about-popover{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}.about-popover{transition:none}}

.art-transition,.scene-viewport{position:relative;width:100%;isolation:isolate}
.art-transition[data-mode=cinematic] .scene-viewport{height:100svh;overflow:hidden;background:#02050d}
.art-transition[data-mode=cinematic] .star-page,
.art-transition[data-mode=cinematic] .art-page{position:absolute;inset:0;height:100%;min-height:0;scroll-snap-align:none}
.art-transition[data-mode=cinematic] .star-page{z-index:0}
.art-transition[data-mode=cinematic] .art-page{z-index:1;opacity:0;pointer-events:none}
.cloud-compositor{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:2;pointer-events:none;visibility:hidden}
.art-transition[data-compositing=true] .cloud-compositor{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .cloud-compositor{display:none}
  .starry-night{will-change:auto}
}