.library-hero{position:relative;isolation:isolate;padding-block:48px 38px;overflow:visible;}
.library-hero:before{content:'';position:absolute;top:0;bottom:0;left:calc((100vw - 100%)/-2);right:calc((100vw - 100%)/-2);background:linear-gradient(90deg,#ffe1eff5 0%,#ffe1efe6 35%,#ffe1ef75 67%,#ffe1ef22 100%),url('assets/nasu-komadome-falls.jpg') center 55%/cover;z-index:-1;}
.hero-message{line-height:1.65;}.tochigi-love{display:inline-block;color:#a6175c;font-size:clamp(28px,3.2vw,40px);letter-spacing:.04em;}.hero-invitation{color:#244961;font-weight:500;line-height:2.1;}.suki-title{color:#b21c69;}.stage-stamp{display:none;}
.hero-book-stage{height:535px;min-height:535px;--story-width:360px;--story-height:260px;}
.hero-books{height:395px;perspective:1200px;overflow:visible;}
.memory-orbit{position:absolute;top:35px;left:calc(50% - 27px);width:54px;height:87px;transform-style:preserve-3d;transform:rotateX(-12deg);animation:memory-circuit 30s linear infinite;pointer-events:none;}
.memory-mini{position:absolute;inset:0;display:flex;align-items:center;transform:rotateY(var(--mini-angle)) translateZ(175px);background:#ffde79;border:1px solid #b59569;border-radius:2px 6px 6px 2px;box-shadow:3px 3px #fff9df,inset 5px 0 #ffffff60;backface-visibility:hidden;padding:7px 4px 7px 8px;}.memory-mini.mini-1{background:#f8a7cd;}.memory-mini.mini-2{background:#86d1ee;}.memory-mini img{width:100%;height:37px;object-fit:cover;}
.story-volume{position:absolute;left:calc(50% - var(--story-width)/2);top:133px;width:var(--story-width);height:var(--story-height);padding:0;border:0;background:none;color:#244e67;transform-style:preserve-3d;transform:rotateY(-8deg) rotateX(3deg);animation:story-arrive 9s cubic-bezier(.25,.7,.2,1) both;cursor:pointer;text-align:left;}
.story-back{position:absolute;inset:-4px;background:#157baa;border-radius:7px 13px 13px 7px;box-shadow:0 16px 25px #153d5c48;transform:translateZ(-9px);}
.story-pages{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#fff8de;border-radius:3px 10px 10px 3px;box-shadow:0 3px #fff,0 5px #bfbd9e,0 7px #fff,0 9px #bfbd9e;transform:translateZ(1px);}
.story-page{padding:18px 16px;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.story-left{background:linear-gradient(90deg,#fff6d9 87%,#ded4b5 100%);border-radius:3px 0 0 3px;}.story-left>span{font-size:8px;letter-spacing:.03em;color:#a52466;}.story-left>strong{font-family:var(--serif);font-size:22px;line-height:1.9;margin:24px 0 17px;}.story-left>small{font-size:10px;line-height:1.9;}.story-left>b{font-size:8px;color:#527181;margin-top:auto;font-weight:400;}
.story-right{background:linear-gradient(90deg,#e4dbc0,#fff9e9 12%);border-radius:0 10px 10px 0;}.story-right>small{font-size:7px;color:#9d2d67;margin-bottom:13px;}.story-right img{width:100%;height:86px;object-fit:cover;border:3px solid #fff;box-shadow:1px 3px #ccbfa5;}.story-right>strong{font-size:10px;line-height:1.8;margin:14px 0 9px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.story-right>span{font-size:9px;color:#b52d70;margin-top:auto;}
.story-front{position:absolute;left:50%;top:-4px;bottom:-4px;right:-4px;background:linear-gradient(90deg,#187baa,#50b7db 8%,#85d2ed);padding:19px 17px 17px 22px;display:flex;flex-direction:column;border-radius:2px 12px 12px 2px;border:1px solid #367a9b;box-shadow:inset 7px 0 #ffffff33,3px 3px #fff8e2,5px 5px #9aafad;transform-origin:0 50%;transform:translateZ(12px) rotateY(0deg);backface-visibility:hidden;animation:story-cover 9s ease-in-out both;}
.jacket-1 .story-front{background:linear-gradient(90deg,#c7538c,#f69dc8 10%,#ffc2df);}.jacket-2 .story-front{background:linear-gradient(90deg,#d2a530,#ffe06d 10%,#ffec99);}
.story-front>small{font-size:7px;line-height:1.8;border-bottom:1px solid #fff9;padding-bottom:10px;}.story-front>strong{font-family:var(--serif);font-size:29px;line-height:1.5;margin:15px 0 13px;color:#244f6a;}.story-front img{width:100%;height:76px;object-fit:cover;border:3px solid #ffffffaa;}.story-front>span{font-size:8px;margin-top:auto;padding-top:8px;}
.story-turning-leaf{position:absolute;left:50%;right:0;top:2px;bottom:2px;padding:30px 15px;background:linear-gradient(90deg,#e5d6ad,#fff5d8 14%,#fffbef);transform-origin:0 50%;transform:translateZ(5px) rotateY(0);backface-visibility:hidden;opacity:0;animation:story-leaf 9s ease-in-out both;border-radius:0 8px 8px 0;display:grid;place-content:center;color:#a82a68;font-family:var(--serif);font-size:17px;line-height:2;box-shadow:3px 1px 8px #6e64442b;}
.hero-books:hover .story-volume,.hero-books:hover .story-front,.hero-books:hover .story-turning-leaf,.hero-books:hover .memory-orbit,.hero-books:focus-within .story-volume,.hero-books:focus-within .story-front,.hero-books:focus-within .story-turning-leaf,.hero-books:focus-within .memory-orbit{animation-play-state:paused;}
.story-volume:focus-visible{outline:3px solid #a21a61;outline-offset:11px;}.stage-shelf{bottom:106px;}.carousel-controls{bottom:58px;}.stage-note{bottom:-23px;}.stage-note #hero-book-caption{min-height:34px;font-size:10px;background:#ffeaf6da;border-radius:4px;padding:2px 5px;}
@keyframes memory-circuit{from{transform:rotateX(-12deg) rotateY(0)}to{transform:rotateX(-12deg) rotateY(-360deg)}}
@keyframes story-arrive{0%{transform:translate3d(0,-30px,-220px) rotateY(-24deg) scale(.65);opacity:0}14%,85%{transform:translate3d(0,0,20px) rotateY(-8deg) rotateX(3deg) scale(1);opacity:1}100%{transform:translate3d(0,15px,-150px) rotateY(12deg) scale(.8);opacity:0}}
@keyframes story-cover{0%,18%{transform:translateZ(12px) rotateY(0)}35%,83%{transform:translateZ(12px) rotateY(-158deg)}97%,100%{transform:translateZ(12px) rotateY(0)}}
@keyframes story-leaf{0%,66%{opacity:0;transform:translateZ(5px) rotateY(0)}68%{opacity:1;transform:translateZ(5px) rotateY(0)}80%{opacity:1;transform:translateZ(5px) rotateY(-165deg)}84%,100%{opacity:0;transform:translateZ(5px) rotateY(-180deg)}}
.tochigi-love-scene{position:relative;min-height:405px;margin:65px 0 0;padding:52px 0;background:linear-gradient(90deg,#173b58f2 0%,#173b58c9 35%,#173b5833 65%,#173b5800),url('assets/shochan-smiles.jpg') 70% 42%/cover;color:#fff6de;border-block:7px solid #ffb9da;}
.tochigi-love-scene .wrap>p:first-child{font-size:14px;color:#ffe17d;margin:0 0 19px;font-weight:600;}.tochigi-love-scene h2{font-family:var(--serif);font-size:clamp(29px,3.3vw,43px);line-height:1.6;margin:0 0 20px;}.tochigi-love-scene .wrap>p:last-child{font-size:14px;line-height:2;color:#fff6de;margin-bottom:0;}
.motion-paused .story-volume{animation:none;opacity:1;transform:rotateY(-8deg) rotateX(3deg);}.motion-paused .story-front{animation:none;transform:translateZ(12px) rotateY(-158deg);}.motion-paused .story-turning-leaf{animation:none;opacity:0;}.motion-paused .memory-orbit{animation-play-state:paused;}
@media(max-width:1000px){.hero-book-stage{--story-width:320px;--story-height:245px;}.story-left>strong{font-size:19px;}.story-front>strong{font-size:25px;}.story-page{padding:17px 13px;}.story-right img{height:73px;}.story-right>strong{font-size:9px;}.story-front{padding:17px 14px;}.story-front img{height:68px;}}
@media(max-width:760px){.hero-book-stage{--story-width:340px;--story-height:250px;}.library-hero:before{background:linear-gradient(180deg,#ffe1eff2 0%,#ffe1efec 38%,#ffe1ef99 62%,#ffe1ef33 100%),url('assets/nasu-komadome-falls.jpg') 58% center/cover;}.tochigi-love-scene{min-height:400px;background-position:75% center;padding:35px 0;background-image:linear-gradient(90deg,#173b58ed 0%,#173b58cc 30%,#173b5833 85%),url('assets/shochan-smiles.jpg');}.tochigi-love-scene .wrap{width:calc(100% - 46px);}.tochigi-love-scene h2{font-size:30px;}.tochigi-love-scene .wrap>p:last-child{font-size:12px;}}
@media(max-width:600px){.library-hero{padding-top:28px;}.hero-book-stage{--story-width:280px;--story-height:225px;height:465px;min-height:465px;}.story-volume{top:125px;}.memory-orbit{top:20px;}.memory-mini{transform:rotateY(var(--mini-angle)) translateZ(135px);}.story-left>strong{font-size:17px;margin:24px 0 15px;}.story-left>small{font-size:8px;}.story-left>span{font-size:6px;}.story-right>small{font-size:6px;margin-bottom:10px;}.story-right img{height:65px;}.story-right>strong{font-size:8px;margin:11px 0 8px;}.story-right>span{font-size:8px;}.story-front>strong{font-size:24px;}.story-front>small{font-size:6px;}.story-front img{height:63px;}.story-front{padding:15px 12px;}.story-turning-leaf{font-size:14px;}.stage-shelf{bottom:94px;}.carousel-controls{bottom:44px;}.stage-note{bottom:-36px;font-size:9px;}.stage-note #hero-book-caption{font-size:9px;}.tochigi-love{font-size:32px;}.hero-message{font-size:19px;}.hero-invitation{font-size:11px;}.suki-ticker{margin-top:53px;}.tochigi-love-scene{margin-top:40px;}}
@media(prefers-reduced-motion:reduce){.story-volume{animation:none;opacity:1;transform:rotateY(-8deg);}.story-front{animation:none;transform:translateZ(12px) rotateY(-158deg);}.story-turning-leaf{animation:none;opacity:0;}.memory-orbit{animation:none;}}

.tochigi-love-scene{background-position:70% 22%;}
.stage-note{background:#ffe8f4ed;border:1px solid #e3abc7;border-radius:8px;padding:7px 10px;bottom:-45px;color:#244d68;}
.stage-note #hero-book-caption{background:transparent;margin-top:4px;padding:0;}
body:has(#video-dialog[open]) .hero-books *{animation-play-state:paused;}
@media(max-width:600px){.stage-note{bottom:-43px;padding:6px 8px;}.tochigi-love-scene{background-position:75% 22%;}}