/* Illustrated chronology. Separate from the public homepage and private Studio. */
.story-world{background:#08090b;min-height:0;height:100svh}
.story-world:after{display:none}
.story-backgrounds{opacity:.30;pointer-events:none}
.story-backgrounds:after{background:linear-gradient(90deg,#08090bea 0%,#08090b98 38%,#08090b22 78%),linear-gradient(0deg,#08090bf2,transparent 38%,transparent 75%,#08090b99)}
.story-backgrounds img{filter:grayscale(.25);transition:opacity .8s ease,transform 2s ease;transform:scale(1.025)}
.story-world #universe{z-index:2;touch-action:none;background:radial-gradient(ellipse at 75% 57%,#08090bbf 0%,#08090b7a 23%,#08090b22 43%,transparent 65%)}
.story-console{top:110px;left:35%;right:5%;width:auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:start}
.timeline-controls{grid-column:1/-1;width:100%}
.timeline-controls input{border-radius:2px;height:36px;background-color:#101215}
.timeline-labels{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:0;margin-top:0}
.timeline-labels button{min-width:0;max-width:none;width:100%;height:25px;padding:0;display:grid;place-items:center;position:relative}
.timeline-labels button i{width:3px;height:10px;display:block;background:#8c8d8c;transition:height .2s,background .2s}
.timeline-labels button:hover i,.timeline-labels [aria-current] i{height:17px;background:var(--red)}
.chapter-picker{min-width:0}
.chapter-picker select{font:16px/1.4 var(--body);width:100%;margin:0;padding:9px 32px 9px 12px;border:1px solid #ffffff30;background:#101215;border-radius:2px;cursor:pointer;height:44px;text-overflow:ellipsis}
.story-console .sound-toggle{margin:0;min-height:44px;background:#101215;border-radius:2px}
.story-music-credit{top:112px;left:5%;width:25%;max-width:270px;font-size:16px}
.story-chapter{padding:225px 5% 142px;justify-content:flex-end;transform:translateY(16px);transition:opacity .45s ease,transform .6s ease}
.story-chapter h1{font-size:clamp(56px,6.8vw,112px);line-height:.9;max-width:43%;margin:0 0 22px;text-shadow:0 2px 20px #000}
.story-chapter .story-date{font-size:16px;max-width:44%;margin-bottom:16px;text-shadow:0 2px 6px #000,0 0 16px #08090b}
.story-detail{display:block;width:43%;max-width:650px}
.story-detail p{font-size:17px;line-height:1.7;padding:0 0 0 18px;background:none;backdrop-filter:none;max-height:32svh;overflow-y:auto;pointer-events:auto;touch-action:pan-y;color:#d3d3cf;text-shadow:0 2px 5px #000,0 0 14px #08090b}
.story-position{left:5%;bottom:92px;max-width:none;font-size:16px}
.story-page .story-bottom{bottom:27px;left:5%;right:235px;gap:22px;justify-content:flex-start}
.story-bottom .round-action{width:46px;height:46px;flex-shrink:0;border-radius:2px;background:#121417}
.story-bottom .story-exit{margin-left:auto;max-width:none;font-size:16px}
.story-page .music-toggle{bottom:28px}
@media(min-width:761px) and (max-width:1100px){
 .story-console{left:32%;right:4%}
 .story-chapter{padding-top:220px}
 .story-chapter h1{font-size:clamp(54px,6.8vw,78px);max-width:44%}
 .story-detail{width:44%}
 .story-detail p{font-size:16px;line-height:1.6}
 .story-music-credit{width:23%}
}
@media(min-width:761px) and (max-height:700px){
 .story-console{top:101px;gap:4px 14px}
 .story-music-credit{top:106px}
 .story-chapter{padding-top:205px;padding-bottom:115px}
 .story-chapter h1{font-size:clamp(48px,5.2vw,72px);max-width:43%;margin-bottom:16px}
 .story-detail p{position:static;bottom:auto;right:auto;width:100%;max-height:22svh;font-size:16px;line-height:1.55;padding:0 0 0 16px}
 .story-position{bottom:78px}
 .story-page .story-bottom{bottom:17px}
 .story-page .music-toggle{bottom:17px}
}
@media(max-width:760px){
 .story-backgrounds{opacity:.25}
 .story-world #universe{background:radial-gradient(ellipse at 43% 33%,#08090bb5 0%,#08090b66 24%,transparent 48%)}
 .story-backgrounds:after{background:linear-gradient(0deg,#08090bf9 0%,#08090bd9 38%,#08090b11 75%,#08090ba8)}
 .story-console{inset:100px 10px 170px auto;width:44px;display:block;z-index:8}
 .timeline-controls{width:44px;height:100%;position:relative}
 .timeline-controls input{width:44px;height:100%;writing-mode:vertical-lr;direction:ltr;cursor:ns-resize;padding:16px 0;background:repeating-linear-gradient(0deg,transparent 0 12px,#d2d3d555 12px 14px,transparent 14px 17px),#101215;background-size:14px calc(100% - 32px);background-position:center 16px;background-repeat:no-repeat;touch-action:none}
 .timeline-controls input::-webkit-slider-thumb{width:28px;height:14px}
 .timeline-controls input::-moz-range-thumb{width:28px;height:14px}
 .timeline-labels{display:none}
 .chapter-picker{position:absolute;top:0;right:54px;width:calc(100vw - 88px)}
 .chapter-picker select{height:46px;font-size:16px;background:#101215e8;padding-left:10px}
 .story-console .sound-toggle{position:absolute;right:0;bottom:-58px;width:44px;height:44px;min-height:44px;padding:8px;justify-content:center}
 .story-console #soundLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .story-chapter{padding:165px 74px 172px 5%;justify-content:flex-end}
 .story-chapter h1{font-size:clamp(39px,10.4vw,67px);max-width:100%;line-height:.92;margin-bottom:15px;overflow-wrap:normal}
 .story-chapter .story-date{font-size:16px;max-width:100%;margin-bottom:12px;line-height:1.4}
 .story-detail{width:100%;max-width:none}
 .story-detail p{max-height:22svh;font-size:16px;line-height:1.55;padding:0 0 0 12px;background:none;color:#d3d3cf}
 .story-position{left:5%;bottom:145px;max-width:130px;font-size:16px}
 .story-position>span:not(:first-child){display:none}
 .story-page .story-bottom{left:auto;right:74px;bottom:18px;gap:12px;justify-content:flex-end}
 .story-page .story-bottom #storyHint{display:none}
 .story-page .story-bottom .story-exit{display:none!important}
 .story-music-credit{top:auto;bottom:82px;left:5%;width:calc(100% - 94px);max-width:460px;font-size:16px;line-height:1.4}
 .story-page .music-toggle{left:5%;right:auto;bottom:18px;padding:11px 13px;gap:7px}
 .story-page .music-toggle .music-meter{display:none}
 .story-bottom .round-action{width:44px;height:44px}
}
@media(max-width:760px) and (max-height:700px){
 .story-console{top:94px;bottom:148px}
 .story-chapter{padding-top:150px;padding-bottom:148px}
 .story-chapter h1{font-size:clamp(31px,8.5vw,48px);margin-bottom:12px}
 .story-detail p{max-height:20svh;line-height:1.45}
 .story-chapter .story-date{margin-bottom:8px}
 .story-music-credit{bottom:74px}
 .story-position{bottom:122px}
}
@media(prefers-reduced-motion:reduce){
 .story-backgrounds img,.story-chapter{transition:none;transform:none}
}