/* Fullscreen opening, theme particles and the interactive record player. */
:root[data-theme="makeine"]{--paper:#fcfdff;--surface:#fff;--ink:#20295b;--muted:#77829b;--blue:#070a7d;--blue-soft:#edf7fe;--yellow:#fff100;--warm:#fffbcf;--line:#e1edf5}
/* A soft blue music accent ties the header action to the home listening area. */
.site-header .listen-button{color:#24455f;background:#d9edf8}
.site-header .listen-button:hover{background:#c4e3f4}
.home-music{background:#eaf6fc}
.home-music .eyebrow{color:#52778f}
.home-music .track-row{border-bottom-color:#cddfea}
body{isolation:isolate}
#main{position:relative;z-index:1}
body:not([data-view="cover"]) #main{padding-top:84px}
.site-header{position:fixed;inset:0 0 auto;height:84px;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility .4s;box-shadow:0 1px 0 var(--line)}
body[data-view="cover"]:not(.nav-revealed) .site-header{transform:translateY(-104%);opacity:0;visibility:hidden;pointer-events:none}
.brand{gap:8px}.brand-otter{width:60px;height:60px;object-fit:contain}.brand-name{font-family:"Yu Mincho","Noto Serif SC",SimSun,serif;font-size:20px;letter-spacing:.1em}.brand small{letter-spacing:.16em;font-size:10px}
#ambient-particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;contain:strict}
#opening-bubbles{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
body[data-view="admin"] #ambient-particles,body[data-view="login"] #ambient-particles{visibility:hidden}
.site-footer{position:relative;z-index:5}
.immersive-hero{height:100svh;min-height:0;max-height:none;margin:0;border-radius:0;background:#b8ebfe;overflow:hidden;isolation:isolate}
.immersive-hero:after{display:none}
.hero-art-layer{position:absolute;inset:0;z-index:-2;transform:translateY(var(--hero-drift,0px)) scale(1.02);transform-origin:center;will-change:transform;background:#16436d}
.hero-art-layer:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eff9ff 0%,#edf8fff5 19%,#e8f6ffd4 33%,#d6efff68 47%,#c8eafa14 58%,transparent 70%)}
.immersive-hero .hero-art{z-index:auto;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;filter:none;position:absolute;mask-image:none}
/* Stationary aperture ghosts occupy the open sky, independently of the clean illustration. */
.hero-sunlight{position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateY(var(--hero-drift,0px));opacity:.95}
.hero-sunlight:before{content:"";position:absolute;left:27%;top:-28%;width:46%;height:73%;background:radial-gradient(ellipse,#fffce73d,transparent 66%);filter:blur(15px)}
.sun-hex{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-12deg);filter:blur(1.8px) drop-shadow(0 0 12px #fffde66b)}
.sun-hex:before,.sun-hex:after{content:"";position:absolute;inset:0;clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
.sun-hex:before{background:linear-gradient(125deg,#fffde978,#f0fcff30 48%,#ffffe552);filter:blur(.7px)}
.sun-hex:after{inset:3px;background:radial-gradient(ellipse at 36% 28%,#fffdf54d,#c7f2ff0a 75%)}
.sun-hex-one{left:42%;top:14%;width:clamp(115px,12vw,320px);opacity:.9}
.sun-hex-two{left:51%;top:25%;width:clamp(72px,7.2vw,190px);opacity:.7;transform:translate(-50%,-50%) rotate(9deg)}
.sun-hex-three{left:57%;top:32%;width:clamp(34px,3.8vw,100px);opacity:.65}
.sun-hex-four{left:59%;top:37%;width:clamp(17px,1.6vw,44px);opacity:.62}
.hero-topline{position:absolute;top:36px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;letter-spacing:.2em;color:#284c66;z-index:6;text-shadow:none}
.scene-switch{display:flex;align-items:center;gap:13px;letter-spacing:.08em;font-size:11px;padding:10px 15px;border:1px solid #ffffff8c;border-radius:30px;background:#f5fcffba;backdrop-filter:blur(14px);color:#294d6b}
.scene-switch svg{height:16px;width:16px}.scene-night{display:none}

.current-anime-theme{padding:12px 5px 16px;display:flex;gap:10px;align-items:center}.current-anime-theme strong{font-size:13px}.current-anime-theme small{display:block;font-size:10px;color:var(--muted);margin-top:7px;letter-spacing:.04em}.current-anime-theme .swatch{border-color:#fff100;background:#4ac1f0}
.theme-preview.makeine{background:linear-gradient(140deg,#57d0fb,#b8ebfe);color:#070a7d}.theme-preview.makeine:after{background:#fff100}
.opening-identity{position:absolute;left:6%;top:47%;transform:translateY(-50%);width:min(490px,40vw);text-align:center;z-index:5;color:#1d415d;text-shadow:none}
.hero-otter{width:190px;height:190px;object-fit:contain;display:block;margin:0 auto 3px;filter:drop-shadow(0 4px 12px #103e6815);animation:otter-float 6s ease-in-out infinite}
.identity-kana{font-size:16px;font-weight:500;letter-spacing:.4em;margin:12px 0 0;padding-left:.4em}
.immersive-hero h1{font-size:clamp(50px,5vw,76px);font-weight:600;line-height:1.5;letter-spacing:.12em;margin:12px 0 22px;text-shadow:0 2px 22px #ffffff60}
.identity-rule{width:34px;height:1px;background:currentColor;opacity:.4;margin:auto}
.identity-note{font-size:15px;letter-spacing:.24em;margin:21px 0 0}
.opening-bottom{position:absolute;bottom:34px;left:4.5%;right:4.5%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:12px;color:#fff;z-index:6}
.opening-edition,.opening-replay{font-size:9px;letter-spacing:.17em;line-height:1.8;text-shadow:0 1px 6px #ffffffaa}
.opening-edition a{text-decoration:underline;text-underline-offset:4px}
.opening-replay{grid-column:3;justify-self:end;padding:10px 0}
.opening-scroll{grid-column:2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:12px;letter-spacing:.23em;color:#204761;text-shadow:0 1px 8px #fff}
.opening-scroll i{display:block;width:1px;height:43px;background:#20476165;position:relative;overflow:hidden}
.opening-scroll i:after{content:"";position:absolute;inset:-43px 0 auto;height:43px;background:#204761;animation:scroll-cue 2.2s ease-in-out infinite}
.opening-caption{display:none;position:absolute;inset:0;place-items:center;letter-spacing:.35em;color:#39627b;font-size:13px;pointer-events:none;z-index:10}
.opening-active .hero-art-layer{animation:scene-zoom 3.8s cubic-bezier(.2,.6,.2,1) both}
.opening-active .opening-identity{animation:identity-appear 3.8s both}
.opening-active .hero-topline,.opening-active .opening-bottom{animation:opening-details 3.8s both}
.opening-active .hero-sunlight{animation:sunlight-appear 3.8s both}
body.has-player .opening-bottom{bottom:128px}
.replay-opening{width:100%;margin-top:9px;padding:12px 5px 4px;border-top:1px solid var(--line);font-size:12px;text-align:left;color:var(--blue)}
#home-content{scroll-margin-top:112px}
@keyframes scene-zoom{0%{opacity:.35;transform:scale(1.12)}30%{opacity:1}100%{opacity:1;transform:scale(1.02)}}
@keyframes identity-appear{0%,46%{opacity:0;transform:translateY(calc(-50% + 14px))}86%,100%{opacity:1;transform:translateY(-50%)}}
@keyframes opening-details{0%,70%{opacity:0}100%{opacity:1}}
@keyframes sunlight-appear{0%,24%{opacity:0}80%,100%{opacity:.95}}
@keyframes caption-fade{0%{opacity:0}22%,45%{opacity:1}70%,100%{opacity:0}}
@keyframes scroll-cue{0%{transform:translateY(0)}80%,100%{transform:translateY(86px)}}
@keyframes otter-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(2deg)}}
/* Main record deck styling lives in record-player.css. */
.music-layout{grid-template-columns:340px 1fr;gap:64px}
[data-motion="reduced"] .opening-active *{animation:none!important;transition:none!important}
[data-motion="reduced"] .hero-art-layer{transform:none!important;clip-path:none!important}
[data-motion="reduced"] .hero-otter,[data-motion="reduced"] .opening-scroll i:after{animation:none!important}
[data-motion="reduced"] .tonearm,[data-motion="reduced"] .site-header{transition:none}
@media(prefers-reduced-motion:reduce){.hero-art-layer{transform:none!important;clip-path:none!important}.opening-active *,.hero-otter,.opening-scroll i:after{animation:none!important;transition:none!important}.site-header,.tonearm{transition:none}}
@media(max-width:1050px){.opening-identity{left:3%;width:380px}.immersive-hero h1{font-size:52px}.hero-otter{width:165px;height:165px}.music-layout{grid-template-columns:290px 1fr;gap:35px}.brand-name{font-size:18px}.brand-otter{width:48px;height:48px}.desktop-nav{margin-right:10px;gap:22px}.header-inner{gap:18px}}
@media(max-width:760px){
 body:not([data-view="cover"]) #main{padding-top:70px}.site-header{height:70px}.brand-otter{width:43px;height:43px}.brand-name{font-size:17px}.brand small{font-size:9px}.header-inner{width:calc(100% - 32px);gap:10px}.header-actions{gap:6px}
 .immersive-hero{height:100svh;min-height:0;margin:0}.immersive-hero .hero-art{width:100%;height:100%;object-position:82% center;mask-image:none}.hero-art-layer:after{background:linear-gradient(0deg,#eef9ff 0%,#eaf7fff0 22%,#e0f4ff8c 42%,transparent 65%)}
 .hero-topline{left:22px;right:22px;top:22px;font-size:12px;letter-spacing:.14em;color:#fff;text-shadow:0 2px 8px #0b2b50}.scene-switch{font-size:9px;padding:9px 10px;gap:7px}.scene-switch svg{width:14px;height:14px}
 .hero-topline>span:first-child{max-width:145px;line-height:1.6}
 .hero-sunlight:before{left:-20%;top:-15%;width:75%;height:40%}.sun-hex-one{left:0;top:13%;width:80px;opacity:.5}.sun-hex-two{left:12%;top:9%;width:28px;opacity:.38}.sun-hex-three,.sun-hex-four{display:none}
 .opening-identity{left:0;width:100%;top:auto;bottom:13%;transform:none;padding:0 16px;color:#1d415d}.hero-otter{width:100px;height:100px;margin-bottom:-2px;filter:drop-shadow(0 2px 12px #17366515)}.identity-kana{font-size:13px;letter-spacing:.34em}.immersive-hero h1{font-size:43px;letter-spacing:.1em;margin:8px 0 14px;text-shadow:0 2px 20px #ffffff80}.identity-note{font-size:13px;letter-spacing:.15em;margin-top:15px}
 .opening-bottom{bottom:20px;left:22px;right:22px;grid-template-columns:1fr 1fr 1fr;color:#204761}.opening-edition{font-size:7px;max-width:82px;line-height:1.9;text-shadow:none}.opening-replay{font-size:10px;text-shadow:none}.opening-scroll{font-size:11px;letter-spacing:.1em;gap:10px;white-space:nowrap;text-shadow:none}.opening-scroll i{height:28px;background:#20476155}.opening-scroll i:after{height:28px;background:#204761}.opening-caption{font-size:11px}
 .opening-active .opening-identity{animation:mobile-identity 3.8s both}
 body.has-player .opening-bottom{bottom:185px}
 .music-layout{display:block}.music-sidebar{display:block}.turntable{max-width:330px;margin:auto}.music-sidebar>h2,.music-sidebar>p{text-align:center}.music-sidebar>.button{display:flex;width:max-content;margin:0 auto}.music-sidebar>.music-note{text-align:center;margin-bottom:36px}.record-stage{padding:24px 9px}.tonearm{right:0}
 .page-top h1{font-size:32px;line-height:1.5;text-wrap:balance}
 @keyframes mobile-identity{0%,46%{opacity:0;transform:translateY(14px)}86%,100%{opacity:1;transform:translateY(0)}}
}

/* The cover is a separate, viewport-sized destination. */
html:has(body[data-view="cover"]){overflow:hidden;overscroll-behavior:none}
body[data-view="cover"]{height:100svh;overflow:hidden;overscroll-behavior:none;padding-bottom:0}
body[data-view="cover"] #main{padding:0;height:100svh}
body[data-view="cover"] .site-header{visibility:hidden;pointer-events:none}
.hero-replay{display:block;margin:0 auto;width:max-content;border-radius:50%;padding:0;cursor:pointer;touch-action:manipulation}
.hero-replay:focus-visible{outline:2px solid #397993;outline-offset:5px}
.hero-replay .hero-otter{margin-bottom:0}
.identity-quote{margin:0 auto;max-width:420px}
.identity-quote .identity-note{font-size:15px;line-height:1.95;letter-spacing:.09em;margin:20px auto 9px;text-wrap:balance}
.identity-quote cite{display:block;font-style:normal;font-size:10px;line-height:1.7;letter-spacing:.07em;color:#51718a}
.identity-quote cite a{text-underline-offset:4px}
.identity-quote cite a:hover{text-decoration:underline}
.opening-scroll{padding:12px 22px 0;min-width:100px}
.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:62px 0 32px}
.home-welcome h1{font-size:clamp(26px,3vw,39px);font-weight:500;line-height:1.5;letter-spacing:.08em;margin:14px 0 0}
.home-welcome .eyebrow{font-size:10px;letter-spacing:.18em}
.home-welcome-mark{writing-mode:vertical-rl;font-size:11px;letter-spacing:.25em;color:#657d8d;border-left:1px solid #bddce9;padding-left:14px}
body[data-view="cover"].has-player .opening-identity{top:43%}
@media(max-width:760px){
 .identity-quote{max-width:330px}
 .identity-quote .identity-note{font-size:13px;letter-spacing:.06em;line-height:1.8;margin:14px auto 7px}
 .identity-quote cite{font-size:9px}
 .opening-identity{bottom:15%}
 .home-welcome{padding:36px 0 24px}
 .home-welcome h1{font-size:26px;max-width:265px;line-height:1.7}
 .home-welcome .eyebrow{font-size:8px;letter-spacing:.12em}
 .home-welcome-mark{font-size:10px}
 body[data-view="cover"].has-player .opening-identity{top:auto;bottom:calc(150px + 15%)}
 body[data-view="cover"].has-player .hero-otter{width:72px;height:72px}
 body[data-view="cover"].has-player h1{font-size:35px}
}
@media(max-height:660px){
 .hero-otter{width:110px;height:110px}
 .immersive-hero h1{font-size:44px;margin:5px 0 12px}
 .identity-kana{font-size:12px;margin-top:6px}
 .identity-quote .identity-note{font-size:13px;margin-top:12px}
 .opening-scroll i{height:24px}
 .opening-bottom{bottom:16px}
}
@media(max-height:660px) and (max-width:760px){
 .hero-otter{width:70px;height:70px}
 .opening-identity{bottom:17%}
 .immersive-hero h1{font-size:34px;margin:4px 0 8px}
 .identity-quote .identity-note{font-size:12px}
 body[data-view="cover"].has-player .hero-otter{width:45px;height:45px}
 body[data-view="cover"].has-player .identity-kana{display:none}
 body[data-view="cover"].has-player .opening-identity{bottom:225px}
 body[data-view="cover"].has-player .opening-bottom{bottom:156px}
}

@media(max-width:760px){.home-welcome h1 span{display:block;white-space:nowrap}}