@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap');

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; touch-action: manipulation; background: #090909; font-family: "Space Grotesk", Arial, sans-serif; }
button { font: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; background: #090909; }
.stage { position: absolute; top: 50%; left: 50%; width: 1080px; height: 1920px; transform-origin: center center; }
.story { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100%; color: #101010; background: var(--bg); display: flex; flex-direction: column; padding: 32px 36px 40px; }
.story-shape { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9; }
.story-shape path { fill: var(--accent); }
.progress { display:flex; gap:8px; height:6px; margin-bottom:24px; }.progress span{flex:1;background:#12121244;border-radius:8px;overflow:hidden}.progress b{display:block;height:100%;width:0;background:#121212}.progress span.done b{width:100%}.progress span.active b{animation: fill 15s linear forwards; animation-play-state:var(--play, running)} @keyframes fill{from{width:0}to{width:100%}}
.topline { display:flex; justify-content:space-between; align-items:center; min-height:64px; font-size:24px; font-weight:700; }.brand { letter-spacing:-.04em; }.icon-btn { border:0; background:#121212; color:white; height:76px; width:76px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:32px; }.icon-btn svg{width:36px;height:36px;fill:currentColor}.top-actions{display:flex;gap:14px}
.content { flex:1; display:flex; flex-direction:column; justify-content:center; padding:48px 12px 84px; min-height:0; }.eyebrow { font-family:"DM Mono",monospace; font-size:22px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 30px; }.display { font-family:"Archivo Black",sans-serif; line-height:.88; letter-spacing:-.075em; font-size:152px; margin:0; text-transform:uppercase; }.cover-title{font-size:172px}.byline{font-size:40px;font-weight:700;margin-top:44px}.start{margin-top:80px;align-self:flex-start;padding:26px 36px;border:4px solid #111;background:#111;color:#fff;border-radius:198px;font-weight:700;font-size:32px;cursor:pointer}
.number .display { font-size:334px; }.number .label { font-size:76px; line-height:.95; max-width:11ch; margin:36px 0 0; font-weight:700; letter-spacing:-.05em }.number .scribble{font-family:"Archivo Black";font-size:32px;transform:rotate(-9deg);align-self:flex-end;margin-right:8%;background:var(--accent);padding:16px 22px;border-radius:50%}
.person-content { justify-content:flex-start; padding-top:56px; min-height:0; }.person-name{font-size:164px; line-height:.92;}.subtitle{margin:24px 0 42px;font-weight:700;font-size:34px}.person-top{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:end}.album{aspect-ratio:1;border:14px solid #121212;background:#ffed00;position:relative;overflow:hidden;transform:rotate(-3deg)}.album img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(1.12);}.album:after{content:"SUNTIFY\A MIX";white-space:pre;position:absolute;left:14px;bottom:10px;font-family:"Archivo Black";font-size:28px;line-height:.78;color:#fff;text-shadow:2px 2px 0 #111}.message{font-size:36px;line-height:1.12;font-weight:700;margin:50px 0 30px;max-width:27ch}.stats{display:flex;gap:18px;margin:12px 0 44px}.stat{background:#101010;color:#fff;padding:20px 22px;min-width:230px;clip-path:polygon(0 0,100% 8%,94% 100%,6% 93%)}.stat b{font-family:"Archivo Black";font-size:44px;display:block;letter-spacing:-.06em}.stat span{font:20px "DM Mono";text-transform:uppercase;line-height:1.05;display:block;margin-top:6px}.songs-title{font:700 24px "DM Mono";letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px}.songs{padding:0;margin:0;list-style:none}.song{display:grid;grid-template-columns:54px 1fr 42px;gap:16px;align-items:center;padding:14px 6px;border-top:2px solid #10101066;cursor:pointer}.song.active{background:#101010;color:#fff;padding-left:16px}.song-number{font:24px "DM Mono"}.song-title{font-size:28px;font-weight:700}.song-artist{font-size:22px;opacity:.7}.song-play{font-size:28px;text-align:right}
.playlist-box{background:#141414;color:#fff;padding:36px;margin-top:50px;transform:rotate(1deg);clip-path:polygon(0 2%,100% 0,97% 97%,3% 100%)}.playlist-box h2{font:50px "Archivo Black";letter-spacing:-.06em;margin:0 0 26px}.playlist-box ol{margin:0;padding-left:42px;line-height:1.65;font-size:30px}.closing .display{font-size:140px}.closing-text{font-weight:700;font-size:34px;line-height:1.18;max-width:30ch;margin:50px 0}.contact{font:24px "DM Mono";word-break:break-word;line-height:1.5}.bottom{display:flex;justify-content:space-between;gap:20px;align-items:center}.nav{display:flex;gap:14px}.nav button{border:4px solid #111;background:transparent;border-radius:50%;width:82px;height:82px;font-weight:700;cursor:pointer;font-size:32px;}.nav button:disabled{opacity:.35}.download{border:0;background:#111;color:#fff;border-radius:198px;padding:24px 30px;font-size:24px;font-weight:700;cursor:pointer}.download svg{width:28px;vertical-align:-4px;margin-right:8px;fill:currentColor}.tap-zone{position:absolute;z-index:1;top:124px;bottom:144px;width:28%;background:transparent;border:0}.tap-zone.left{left:0}.tap-zone.right{right:0}.topline,.content,.bottom{z-index:2}.story.pause .progress b{animation-play-state:paused}.capture .topline,.capture .bottom,.capture .tap-zone{visibility:hidden}.capture{padding-bottom:0}.capture .content{padding-bottom:40px}