/* Portrait compositions use the same 390 × 844 stage as the website Rewind. */
.photo-playback{position:absolute;right:4px;bottom:-48px;padding:10px 4px;min-height:40px;border:0;background:transparent;color:#874653;font:11px var(--sans);transform:rotate(-2.2deg)}
@media(prefers-reduced-motion:reduce){.photo-playback{display:none}}
@media(max-width:380px){.number{font-size:29px}.number small{font-size:12px}}
.stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.stat:nth-child(4){padding-left:0}.stat:nth-child(4)::before{display:none}
.stat{min-width:0}.stat .number{white-space:nowrap}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(odd){padding-left:0}.stat:nth-child(even){padding-left:23px}.stat:nth-child(odd)::before{display:none}.stat:nth-child(4)::before{display:block}.stat:nth-child(n){border:0}}
.rewind-preview-art{position:absolute;right:32px;bottom:-12px;width:190px;transform:rotate(8deg);opacity:.18;pointer-events:none}
.rewind-panel{padding-right:35px}
.rewind-panel .rewind-preview-art{z-index:0}
.account-cover{position:relative;overflow:hidden;margin:22px -6px 18px;padding:25px 22px 19px;border-radius:24px;background:#fffdf5;min-height:245px}
.account-cover h3{position:relative;z-index:1;margin:0;font:850 42px/.98 var(--tight);letter-spacing:-2px}
.account-cover h3 em{display:block;color:#e00048;font:italic 500 41px/1.1 var(--serif)}
.account-cover img{position:absolute;right:-20px;bottom:-17px;width:170px}
.account-cover p{position:relative;z-index:1;width:160px;margin:22px 0 0;font-size:11px;color:var(--muted)}
.account-cover .button{position:relative;z-index:1;margin-top:18px;background:#120f0b;color:#fffdf5;padding:12px 18px}
.mini-stats{display:flex;gap:26px;margin:16px 0 6px}.mini-stats strong{display:block;font:700 25px/1.1 var(--tight)}.mini-stats span{font-size:10px;color:var(--muted)}
#personal .account-row{border-top:1px solid var(--line);padding-top:10px}
#download{background:transparent;color:#874653;box-shadow:none;border:1px solid var(--line);width:100%;margin-top:14px}
body:has(dialog[open]){overflow:hidden}
#story{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:rgb(31 22 23/.94);overflow:hidden;box-shadow:none;overscroll-behavior:contain}
#story::backdrop{background:#241918}
.story-surround{position:absolute;inset:0;display:grid;place-items:center;padding:20px}
.story-card{position:relative;height:min(904px,calc(100dvh - 40px));aspect-ratio:390/904;max-width:100%;overflow:hidden;border-radius:24px;background:#fffdf5;color:#120f0b;box-shadow:0 28px 100px #0005;isolation:isolate}
.story-stage{position:absolute;left:50%;top:calc(50% - 30px);width:390px;height:844px;transform:translate(-50%,-50%) scale(var(--story-scale,1));transform-origin:center;overflow:hidden;user-select:none}
.story-scene{position:absolute;inset:0;overflow:hidden}
.story-stage p{margin:0}.story-stage .font-display{font-family:var(--tight)}.story-stage .font-body{font-family:var(--sans)}.story-stage .font-accent{font-family:var(--serif)}
.story-brand{position:absolute;left:24px;top:26px;z-index:3;pointer-events:none}
.story-brand .brand{gap:3px}.story-brand .brand-mark{width:24px;height:33px}.story-brand .brand-word{width:53px;height:24px}.story-brand>span{display:block;margin:3px 0 0 8px;font:9px var(--sans);letter-spacing:1.8px}
.story-progress{position:absolute;z-index:5;left:12px;right:12px;top:10px;display:flex;gap:4px}
.story-progress button{height:12px;flex:1;padding:4px 0;border:0;background:none;color:inherit}
.story-progress .track{display:block;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,currentColor 24%,transparent)}
.story-progress .fill{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.story-controls{position:absolute;z-index:5;right:10px;top:23px;display:flex}
.story-controls button{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px}
.story-controls button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.story-navigation{position:absolute;z-index:5;left:16px;right:16px;bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.story-navigation button{min-height:44px;min-width:70px;padding:8px 12px;border:1px solid currentColor;border-radius:99px;background:transparent;color:inherit;font-size:12px;font-weight:550}
.story-navigation button:disabled{opacity:.3;cursor:default}
.story-count{font-size:10px;letter-spacing:.06em}
.story-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,100%);display:flex;justify-content:space-between;color:#f7e4d3;font-size:11px;pointer-events:none}
.story-hint p{max-width:140px;line-height:1.7}.story-hint strong{display:block;color:#fff9f1;font:italic 23px var(--serif);margin-bottom:8px}
.story-stage .cover-title{position:absolute;left:26px;top:142px;font:900 72px/.98 var(--tight);letter-spacing:-3px}
.story-stage .cover-title em{display:block;color:#e00048;font:italic 600 64px/1.1 var(--serif);letter-spacing:-3px}
.cover-art{position:absolute;left:0;top:88px;width:390px;height:auto;mask-image:linear-gradient(#000 0 86%,transparent 100%)}
.cover-copy{position:absolute;left:20px;right:20px;top:650px;text-align:center;font-size:15px;line-height:1.5}
.cover-copy strong{display:block;margin-top:18px;color:#e82f08;font:800 22px var(--tight)}
.cover-copy small{display:block;margin-top:8px;font-size:10px;letter-spacing:1.8px}
.story-export{position:absolute;z-index:4;left:95px;top:722px;width:200px;min-height:48px;border:0;border-radius:99px;background:#120f0b;color:#fffdf5;font:600 14px var(--sans)}
.story-stage[data-paused=true] .animate-rewind-wheel,.story-stage[data-paused=true] .animate-rewind-checker{animation-play-state:paused}
.animate-rewind-wheel{animation:rewind-wheel 36s linear infinite}.animate-rewind-checker{animation:rewind-wheel 45s linear infinite}
@keyframes rewind-wheel{to{transform:rotate(360deg)}}
@media(max-width:900px){.story-hint{display:none}}
@media(max-width:600px){.hero-image{width:calc(100% - 24px);margin-inline:auto}.story-surround{padding:0}.story-card{width:100%;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none}.rewind-preview-art{right:-20px;bottom:5px;width:180px}.rewind-panel .button{z-index:1}.account-cover img{width:150px;right:-25px}}
@media(prefers-reduced-motion:reduce){.animate-rewind-wheel,.animate-rewind-checker{animation:none}}