body{height:700svh}.category-nav{position:absolute;left:5%;right:5%;top:89px;display:flex;gap:25px;align-items:center;border-bottom:1px solid #78909c20;padding-bottom:15px;z-index:4}.category-nav button{border:0;background:none;display:flex;gap:8px;align-items:center;padding:7px 0;color:#6f8694;font-size:12px;white-space:nowrap}.category-nav button small{font-size:8px;color:#526f82}.category-nav button.active{color:#e0f4ff}.category-nav button.active small{color:#83d7f3}.case-layout{top:155px}.case-info,.case-visual{opacity:var(--category-opacity,1);filter:blur(var(--category-blur,0px));translate:0 var(--category-shift,0px)}.case-info h2{margin:17px 0 13px;font-size:clamp(28px,3vw,46px)}.case-subtitle{font-size:17px;color:#c1d5df;font-weight:400;line-height:1.6;margin:0 0 20px}.case-selector{margin-top:24px;gap:16px}.case-selector span{min-width:70px;text-align:center}.case-category-progress{width:100%;height:2px;position:absolute;bottom:0;left:0;background:#d0f1ff;transform-origin:left;transform:scaleX(var(--case-track,0));opacity:.45}.case-art{position:absolute;inset:0;overflow:hidden;background:#0a1520}.category-panel{position:absolute;inset:0;overflow:hidden;animation:none}.category-panel>img.background{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.78)}.category-panel>img.character{position:absolute;width:auto;max-width:70%;height:105%;object-fit:contain;right:2%;bottom:-10%;filter:drop-shadow(0 0 18px #48bbda25)}.panel-label{position:absolute;top:7%;left:6%;font-size:9px;letter-spacing:3px;color:#9fcee5}.panel-title{position:absolute;left:6%;bottom:10%;font-size:clamp(28px,4.4vw,65px);line-height:1.03;font-weight:500;letter-spacing:-2px;color:#e5f0f3}.panel-title small{display:block;font-size:9px;letter-spacing:3px;line-height:2;color:#80bbd2;margin-bottom:14px}.panel-caption{position:absolute;right:5%;bottom:5%;font-size:8px;letter-spacing:2px;color:#7fabc1}.category-panel.art-key:after{content:"";position:absolute;inset:0;pointer-events:none;border:18px solid #03111a18}.store-grid{position:absolute;inset:17% 6%;display:flex;align-items:center;gap:4%;transform:rotate(-5deg)}.store-shot{position:relative;width:32%;height:100%;overflow:hidden;border:1px solid #bce8ff58;background:#072038;box-shadow:0 10px 30px #0004}.store-shot:nth-child(2){transform:translateY(-13px)}.store-shot img{width:100%;height:100%;object-fit:cover;filter:brightness(.75)}.store-shot:nth-child(2) img{object-position:70% 50%;filter:hue-rotate(20deg) brightness(.72)}.store-shot:nth-child(3) img{object-position:20% 50%;filter:hue-rotate(-15deg) brightness(.75)}.store-shot strong{position:absolute;top:9%;left:9%;font-size:clamp(12px,1.6vw,24px);line-height:1.1;font-weight:500;letter-spacing:-.5px}.store-shot small{position:absolute;bottom:8%;left:9%;font-size:7px;letter-spacing:1px;color:#e5f4ff}.portrait-study .background{filter:blur(5px) brightness(.45)!important;transform:scale(1.05)}.category-panel.portrait-study>img.character{height:172%;max-width:100%;right:8%;bottom:-67%;animation:portrait-float 5s ease-in-out infinite alternate;translate:var(--look-x,0px) var(--look-y,0px)}.portrait-frame{position:absolute;inset:12%;border:1px solid #89bad12b;pointer-events:none}.portrait-frame:before,.portrait-frame:after{content:'+';position:absolute;color:#bbdef0a0;font-size:20px;left:-7px;top:-12px}.portrait-frame:after{left:auto;top:auto;right:-7px;bottom:-12px}.spine-study .background{filter:brightness(.38)!important}.category-panel.spine-study>img.character{right:21%;height:105%;bottom:-4%;animation:spine-float 2.4s ease-in-out infinite;transform-origin:50% 85%}.motion-timeline{position:absolute;bottom:7%;left:7%;right:7%;height:15px;border-block:1px solid #7aabc84a;background:repeating-linear-gradient(90deg,#79b5d045 0 1px,transparent 1px 12px)}.motion-timeline i{position:absolute;width:2px;height:23px;top:-5px;background:#b4ebff;animation:timeline 3s linear infinite}.vfx-study .background{filter:brightness(.35) saturate(.4)!important}.energy-field{position:absolute;left:50%;top:48%;width:35%;aspect-ratio:1;transform:translate(-50%,-50%)}.energy-field i{position:absolute;inset:0;border:1px solid #5ae0ff;border-radius:50%;box-shadow:0 0 20px #00a6ff55,inset 0 0 20px #00a6ff55;animation:energy-expand 3s ease-out infinite}.energy-field i:nth-child(2){animation-delay:-1s}.energy-field i:nth-child(3){animation-delay:-2s}.energy-field:after{content:"";position:absolute;inset:37%;border-radius:50%;background:#c4f6ff;box-shadow:0 0 30px #c2f9ff,0 0 65px #1eb5ec,0 0 120px #00a6ff;animation:energy-core 2s ease-in-out infinite alternate}.case-scene:not([data-category="5"]) .load-note{display:none}.case-scene:not([data-category="5"]) .visual-toolbar{margin-top:25px}.case-active .category-panel:not([hidden]) *{animation-play-state:running}.category-panel[hidden] *,.motion-off .category-panel *{animation-play-state:paused!important}body:not(.case-active) .category-panel *{animation-play-state:paused!important}
@keyframes portrait-float{from{transform:translateY(2px) rotate(-.3deg)}to{transform:translateY(-4px) rotate(.4deg)}}@keyframes spine-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes timeline{from{left:0}to{left:100%}}@keyframes energy-expand{from{transform:scale(.45) rotateX(35deg);opacity:1}to{transform:scale(1.6) rotateX(35deg);opacity:0}}@keyframes energy-core{from{transform:scale(.7);opacity:.7}to{transform:scale(1.1);opacity:1}}
@media(max-width:1050px){.category-nav{gap:16px}.category-nav button{font-size:11px}.case-subtitle{font-size:15px}.case-layout{top:145px}}
@media(max-width:700px){body{height:700svh}.category-nav{top:90px;left:6%;right:6%;gap:18px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}.category-nav button{font-size:10px;gap:6px;flex:none}.case-layout{top:156px;bottom:68px;gap:15px;justify-content:flex-start;padding-top:22px}.case-info h2{font-size:26px;margin:10px 0}.case-subtitle{font-size:13px;margin-bottom:10px}.case-info .description{font-size:11px;line-height:1.8}.case-details{margin-top:12px;padding-top:10px}.case-footnote{margin-top:9px}.case-selector{margin-top:13px}.visual-toolbar{margin-top:16px!important}.panel-title{font-size:35px}.panel-title small{font-size:7px;letter-spacing:2px;margin-bottom:8px}.panel-label{font-size:7px;letter-spacing:2px}.store-shot strong{font-size:14px}.store-shot small{font-size:6px}.panel-caption{font-size:7px}.category-nav button.active{border-bottom:1px solid #89cee5}.case-art .character{max-width:55%}.category-panel.portrait-study>img.character{right:22%;height:210%;bottom:-100%}}
@media(max-height:700px) and (min-width:701px){.case-layout{top:140px;bottom:65px}.case-info h2{font-size:30px;margin:10px 0}.case-subtitle{font-size:14px;margin-bottom:13px}.case-info .description{font-size:12px}.case-details{margin-top:15px;padding-top:12px}.case-selector{margin-top:15px}.case-info .case-footnote{margin-top:12px}.showcase-frame{max-height:55vh}.visual-toolbar{margin-top:22px!important}}
@media(prefers-reduced-motion:reduce){.category-panel *{animation:none!important}.case-info,.case-visual{filter:none!important;translate:none!important;opacity:1!important}}