@font-face{font-family:Anton;src:url('Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--ink:#20251e;--lime:#dfff65;--orange:#ff704b;--ice:#b7cdfb;--blue:#2637d9;--paper:var(--lime);--text:var(--ink);--ease:cubic-bezier(.18,.8,.2,1);--story-height:clamp(780px,100svh,844px)}
*{box-sizing:border-box}html{background:#eeeae3}body{margin:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);line-break:strict;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:4px}button:active{transform:scale(.975)}a{color:inherit}::selection{background:var(--text);color:var(--paper)}[hidden]{display:none!important}p,h1,h2,figure{margin:0}.app-shell{color:var(--text);width:390px;max-width:100%;min-height:var(--story-height);margin:auto;background:var(--paper);position:relative;isolation:isolate;--paper:var(--lime);--text:var(--ink)}.app-shell[data-active="1"]{--paper:var(--orange)}.app-shell[data-active="2"]{--paper:var(--ice);--text:var(--blue)}.report-header{position:absolute;z-index:5;top:0;left:24px;right:24px}.progress{height:35px;display:flex;gap:5px;margin-top:1px}.progress button{height:44px;min-width:44px;padding:13px 0 27px;flex:1;position:relative}.progress button span{display:block;height:3px;background:var(--text);opacity:.23}.progress button[aria-current] span,.progress button.is-complete span{opacity:1}.progress button:not([aria-current]):not(.is-complete):hover span{opacity:.7}.brand-row{display:flex;align-items:center;justify-content:space-between;height:43px}.brand{display:inline-flex;gap:7px;align-items:center;min-height:44px;text-decoration:none;font:italic 28px/1 Anton,sans-serif;letter-spacing:-.5px}.brand-beats{display:flex;align-items:flex-end;gap:3px;height:22px;transform:skew(-13deg);margin-right:1px}.brand-beats i{display:block;width:4px;background:currentColor;height:15px}.brand-beats i:nth-child(2){height:23px}.brand-beats i:nth-child(3){height:19px}.report-year{font-size:12px;font-weight:600;letter-spacing:.4px}.story{height:var(--story-height);position:relative;padding:105px 24px 18px;background:var(--paper);overflow:hidden;--arrival:18px}.story-content{touch-action:pan-y;cursor:pointer}.story-footer{position:absolute;z-index:4;right:24px;bottom:13px}.story-cue{display:inline-flex;align-items:center;gap:14px;padding:10px 0;min-height:44px;font-size:14px;font-weight:600;transition:transform 100ms}.story-cue svg{width:26px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;transition:transform 160ms}.story-cue:hover span{text-decoration:underline;text-underline-offset:4px}.story-cue:hover svg{transform:translateX(4px)}.story-cue:active{transform:translateX(2px)}.time-title{font-size:22px;font-weight:600;line-height:1.4;position:relative;z-index:2;margin-top:11px}.minutes{position:relative;margin:13px -24px 0}.minute-number{font:400 218px/.93 Anton,sans-serif;letter-spacing:-5px;overflow:visible}.number-line{display:flex;align-items:baseline;width:max-content;overflow:hidden;padding-bottom:8px;margin-bottom:-8px}.number-line:first-child{padding-left:18px}.number-line:last-child{margin-left:50px;margin-top:-3px}.number-line>span{display:block;animation:digit-in 380ms var(--ease) both;animation-delay:calc(var(--i)*32ms)}.minute-number .comma{margin-left:0}.minute-unit{position:absolute;right:26px;top:321px;font-size:22px;font-weight:600;writing-mode:vertical-rl;letter-spacing:5px;animation:unit-in 160ms var(--ease) 240ms both}.time-visual{position:absolute;inset:0;pointer-events:none}.records{position:absolute;left:0;right:0;top:588px;height:300px}.record{position:absolute;width:196px;height:196px;left:calc(-111px + var(--i)*8.25px);top:calc(157px - var(--i)*4.75px);background:var(--ink);border:1.5px solid var(--lime);border-radius:50%;animation:record-in 320ms var(--ease) both;animation-delay:calc(100ms + var(--i)*5ms)}.record:before{content:"";position:absolute;inset:12px;border:1px solid var(--lime);opacity:.3;border-radius:50%}.record:after{content:"";position:absolute;width:9px;height:9px;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--lime);border-radius:50%}.record.partial{background:none;border:0}.record.partial:before,.record.partial:after{display:none}.record.partial svg{display:block;width:100%;height:100%;overflow:visible}.time-visual figcaption{position:absolute;left:24px;top:566px;font-size:23px;line-height:1.5;font-weight:600;z-index:2}.time-visual figcaption span{font-size:15px;font-weight:500;margin-left:5px}.time-visual figcaption svg{display:block;margin:4px 0 0 152px;width:29px;height:31px;fill:none;stroke:var(--ink);stroke-width:1.5}.story-time .story-footer{bottom:13px;right:24px;color:var(--ink)}.artist-kicker{font-size:19px;font-weight:600;line-height:1.5;margin-top:11px}.artist-name h2{position:absolute;left:-8px;top:159px;font-size:134px;font-weight:800;line-height:1.03;letter-spacing:-8px;z-index:1}.artist-name h2 span{display:block}.artist-roman{position:absolute;right:24px;top:164px;font:400 22px/1 Anton,sans-serif;letter-spacing:1px}.artist-visual{position:absolute;left:54px;top:225px;width:414px;height:348px;z-index:2}.portrait{display:block;width:100%;height:100%}.artist-stats{position:absolute;top:602px;left:24px;right:24px}.play-count{display:flex;align-items:flex-start;flex-direction:column;gap:2px;font-size:16px;line-height:24px}.play-count>span+span{font-size:18px;line-height:1.2}.play-count strong{font:400 67px/1.15 Anton,sans-serif;margin-right:4px}.top-listener{margin-top:-24px;margin-left:174px}.top-listener>p:first-child{font-size:16px;line-height:24px}.percent{display:flex;align-items:baseline;gap:8px;line-height:1}.percent>strong{font:400 72px/1.13 Anton,sans-serif;letter-spacing:-1px}.percent strong span{font-size:42px;margin-left:2px}.listener-label{position:absolute;font-size:14px;right:0;bottom:-10px}.personality-kicker{font-size:19px;font-weight:600;line-height:1.5;text-align:right;margin-top:11px}.personality-title{margin-left:-5px;margin-top:8px;font-size:93px;line-height:1.06;letter-spacing:-6px;font-weight:800;width:max-content;position:relative;z-index:2}.personality-title>span{display:block}.personality-title>span:last-child{font-size:127px;line-height:1.15;margin-top:-2px}.moon-visual{position:absolute;top:317px;right:-16px;width:257px;height:285px;z-index:3;pointer-events:none}.moon-visual svg{width:100%;height:100%;display:block}.personality-copy{position:absolute;top:583px;left:24px;right:24px;font-size:16px;line-height:1.55;font-weight:500;z-index:4}.personality-copy>p+p{margin-top:5px}.personality-evidence{position:absolute;top:698px;left:24px;right:24px;display:grid;grid-template-columns:1fr 1.4fr;gap:15px}.personality-evidence>div{display:flex;flex-direction:column;align-items:flex-start}.personality-evidence>div>span{font-size:12px;line-height:18px}.personality-evidence strong{font:400 34px/1.2 Anton,sans-serif;margin-top:1px}.personality-evidence strong>span{font-size:23px;margin-left:1px}.personality-evidence>div+div strong{font:600 17px/1.4 "PingFang SC",sans-serif;letter-spacing:-.5px;margin-top:7px;margin-left:-7px}.personality-evidence small{font-size:11px;line-height:17px;margin-top:2px}.story-personality .story-footer{bottom:10px}.story-personality .share{font-size:16px;border-bottom:2px solid currentColor;padding-bottom:8px;gap:18px}.story-personality .share svg{width:22px;height:22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.story.is-entering .artist-name h2,.story.is-entering .personality-title,.story.is-entering .personality-copy{animation:copy-in 360ms var(--ease) both}.story.is-entering .artist-name h2,.story.is-entering .personality-title{animation-delay:70ms}.story.is-entering .artist-visual,.story.is-entering .moon-visual{animation:art-in 430ms var(--ease) 90ms both}.story.is-entering .personality-copy{animation-delay:130ms}.story.is-backward{--arrival:-18px}.is-still *, .is-still *:before,.is-still *:after{animation:none!important;transition:none!important}
@keyframes unit-in{from{opacity:0}to{opacity:1}}@keyframes digit-in{from{transform:translateY(20px);opacity:.18}to{transform:translateY(0);opacity:1}}@keyframes record-in{from{transform:translateY(10px) scale(.95);opacity:.15}to{transform:translateY(0) scale(1);opacity:1}}@keyframes copy-in{from{transform:translateX(var(--arrival));opacity:.2}to{transform:translateX(0);opacity:1}}@keyframes art-in{from{transform:translateY(12px);opacity:.2}to{transform:translateY(0);opacity:1}}
.primary{width:100%;height:54px;border-radius:30px;background:var(--text);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:16px;font-weight:600;transition:transform 100ms,background-color 160ms}.primary:hover{background:#343b2f}.primary svg{width:27px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}dialog{width:350px;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);border:0;border-radius:16px;padding:18px;background:#f2f3e9;color:var(--ink);overflow:auto;box-shadow:0 15px 55px #0003}dialog::backdrop{background:#142160a3;backdrop-filter:blur(4px)}.share-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}.share-head h2{font-size:17px;line-height:1.5;font-weight:600}.close-dialog{padding:10px;width:44px;height:44px;flex:none;margin:-8px -8px -8px 0}.close-dialog svg{fill:none;stroke:currentColor;stroke-width:2}.close-dialog:hover{background:#20251e10;border-radius:50%}#share-canvas{display:block;width:100%;height:auto;border-radius:3px}.share-actions{margin-top:16px}.share-actions .primary{background:var(--blue);color:var(--ice);font-size:15px;height:50px}.system-share{width:100%;min-height:44px;text-decoration:underline;font-size:13px}.share-result{font-size:12px;text-align:center;line-height:18px;margin-top:10px;min-height:18px}
@media(min-width:600px){body{padding:28px 0}.app-shell{box-shadow:0 12px 50px #20251e0d}}
@media(max-width:389px){.minute-number{font-size:202px}.number-line:last-child{margin-left:39px}.artist-name h2{font-size:127px}.artist-visual{left:32px}.artist-stats .top-listener{margin-left:154px}.personality-title{font-size:87px}.personality-title>span:last-child{font-size:120px}.moon-visual{right:-23px;width:242px}.personality-copy{font-size:15px}.story-cue{font-size:13px}.personality-evidence{grid-template-columns:1fr 1.45fr}}
@media(max-height:820px){.time-title{margin-top:4px}.minute-number{font-size:188px}.number-line:last-child{margin-left:49px}.minute-unit{top:295px}.records{top:526px;left:-32px;right:32px}.time-visual figcaption{top:495px}.artist-name h2{top:147px;font-size:126px}.artist-visual{top:205px}.artist-stats{top:544px}.play-count strong{font-size:60px}.percent>strong{font-size:68px}.personality-title{font-size:85px}.personality-title>span:last-child{font-size:112px}.moon-visual{top:286px;width:235px;height:257px}.personality-copy{top:524px;font-size:15px}.personality-evidence{top:632px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}