.online-body{background:#f4f5f9;color:#183047;min-height:100svh}.online-body>.header{position:absolute;top:0;left:0;width:100%;height:100px;background:transparent;z-index:8;pointer-events:none}.online-body>.header .brand{background:transparent;pointer-events:auto}.online-body>.header nav{display:none}.site-menu-button{position:absolute;top:30px;right:25px;z-index:12;width:103px;height:36px;background:#34323f;color:#fff;clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 1px #3336)}.site-menu-button>span{font-size:9px;color:#34323f;background:#fff;padding:12px 10px 12px 5px;transform:skew(12deg);margin-left:7px}.site-menu-button>b{font-size:23px;font-weight:400;padding:0 14px 0 9px}.site-menu{position:fixed;inset:0 0 0 auto;margin:0;width:425px;max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:94px 30px 40px;background:repeating-linear-gradient(55deg,#f5f6f9 0,#f5f6f9 135px,#eef0f4 136px,#f2f3f7 270px);color:#193448;box-shadow:-10px 0 50px #34304030}.site-menu::backdrop{background:#26223070;backdrop-filter:blur(3px)}.menu-close{border-radius:50%;background:#fff;color:#383341;top:27px;right:30px;width:33px;height:33px;padding:0;display:grid;place-items:center;font-size:26px}.site-menu nav>a,.site-menu nav>button{display:flex;width:100%;align-items:center;gap:18px;min-height:58px;text-align:left;font-size:17px;padding:10px 0;position:relative;color:#1e3b4f}.site-menu nav>a:hover,.site-menu nav>button:hover{color:#6443a6}.site-menu nav img{height:27px;width:27px;object-fit:contain}.site-menu h2{font-size:16px;font-weight:800;margin:18px 0 10px;font-style:italic}.menu-rule{display:flex;align-items:center;justify-content:center;gap:13px;font-size:13px;color:#b7bcc5;margin:15px 60px 14px}.menu-rule:before,.menu-rule:after{content:'';height:1px;background:#9da1ad;flex:1}.menu-lock{margin-left:auto;margin-right:115px;display:block;width:13px;height:17px;border:1.5px solid #9d9ba5;border-radius:2px;position:relative;transform:scale(.8)}.menu-lock:before{content:'';position:absolute;width:7px;height:8px;border:1.5px solid #9d9ba5;border-bottom:0;border-radius:8px 8px 0 0;top:-9px;left:1.5px}.menu-lock:after{content:'·';position:absolute;inset:-5px 0 0;text-align:center;color:#9d9ba5;font-size:20px}#menu-subscription-state{font-size:10px;color:#78539f;margin-left:auto}.redeem-symbol{width:27px;height:18px;border:1px solid #34323f;font-size:9px;text-align:center;line-height:16px}.online-dialog{width:430px;padding:43px 35px;background:#fbfaff;color:#233448;text-align:center}.online-dialog h2{font-size:25px;letter-spacing:2px}.online-dialog p{font-size:13px;line-height:2;margin:20px 0;color:#7f7890}.online-dialog .primary{width:100%;justify-content:center;margin-top:25px}.online-page{width:min(100%,960px);margin:0 auto;padding:120px 40px 65px}.online-title{height:175px;display:flex;justify-content:center;align-items:flex-start;padding-top:20px}.online-title h1{position:relative;font-size:45px;font-weight:800;line-height:1.1;letter-spacing:0;min-width:300px;padding:0 0 45px 65px;color:#09090d}.online-title h1:before{content:'';position:absolute;width:300px;height:100px;left:0;top:-6px;background:#373440;clip-path:polygon(14% 0,0 45%,22% 100%,100% 100%,24% 90%,3% 43%);z-index:0}.online-title small{display:block;font-size:21px;margin-top:6px;letter-spacing:-.5px}.subscription-sheet,.potential-sheet{background:white;box-shadow:0 5px 15px #0003;border-top:3px solid transparent;border-image:linear-gradient(90deg,#be1672,#513bbb) 1;padding:48px 45px 35px;text-align:center}.subscription-sheet h2{font-size:27px;letter-spacing:0;color:#344658}.online-diamonds{font-size:16px;word-spacing:10px;color:#943092;margin:29px 0}.memories-hex{height:295px;max-width:385px;margin:0 auto;background:linear-gradient(140deg,#d10063,#4c42b5);clip-path:polygon(38% 0,62% 0,100% 50%,62% 100%,38% 100%,0 50%);position:relative;padding-top:108px;color:#fff}.memories-hex:before{content:'';position:absolute;inset:9px;background:linear-gradient(140deg,#a91b71,#453db0);clip-path:inherit;pointer-events:none}.memories-hex>p,.memories-hex>strong{position:relative}.memories-hex>p{font-size:18px;font-weight:800}.memories-hex>strong{font-size:57px;line-height:1.2;font-weight:800}.memories-hex>button{background:#34303d;color:#fff;clip-path:polygon(25% 0,75% 0,100% 55%,75% 100%,25% 100%,0 55%);position:absolute;top:7px;left:30%;width:40%;height:72px;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.memories-hex>button b{font-size:26px;line-height:1}.memories-hex>button span{font-size:12px;font-weight:700}.sheet-rule{display:flex;align-items:center;justify-content:center;color:#c3c5ca;gap:18px;max-width:365px;margin:40px auto 58px}.sheet-rule:before,.sheet-rule:after{content:'';height:1px;background:#b8bac1;flex:1}.subscription-ribbon{height:180px;display:grid;place-items:center;position:relative;margin:18px -45px 30px;background:linear-gradient(transparent 32%,#472b92 32%,#4b35a3 67%,transparent 67%)}.subscription-ribbon img{background:linear-gradient(135deg,#4c32a9,#3e1a74);width:145px;height:145px;padding:26px;transform:rotate(45deg);filter:drop-shadow(0 4px 10px #48248240)}.subscription-ribbon img{object-fit:contain}.benefit{margin:70px auto 0;max-width:420px}.benefit-icon{position:relative;width:80px;height:80px;transform:rotate(45deg);background:linear-gradient(135deg,#583cae,#401880);margin:0 auto 25px;z-index:1;display:grid;place-items:center}.benefit-icon img{width:48px;height:48px;transform:rotate(-45deg);filter:brightness(0) invert(1)}.benefit-paper{height:130px;max-width:270px;margin:-2px auto 38px;box-shadow:0 7px 10px #0003;border:7px solid #f5f5f7;transform:perspective(500px) rotateX(15deg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#fff}.mini-b50{background:repeating-linear-gradient(0deg,#f4f1f9 0,#fff 30px,#e6deef 31px,#fff 33px)}.mini-b50>span{font-size:11px;color:#7d5da5;font-weight:800;letter-spacing:4px}.mini-b50>b{font-size:18px;color:#4a345e}.mini-b50>small{font-size:10px;color:#8e789d}.mini-boost{color:#fff;background:linear-gradient(145deg,#5030a1,#332458);border-color:#eeeaf7}.mini-boost span{letter-spacing:3px;font-size:12px}.mini-boost strong{font-size:33px}.mini-boost small{font-size:10px}.benefit p{font-size:13px;line-height:1.7;color:#2d4761}.benefit p strong{color:#532e92}.mini-banner img{width:95%;height:28px;object-fit:fill}.mini-gift{background:#f9f8fb;color:#583399}.mini-gift strong{font-size:17px}.mini-gift small{font-size:10px;color:#879}.subscription-cta{width:280px;max-width:100%;height:52px;clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);background:#373441;color:#fff;font-size:19px;font-weight:800;margin:28px auto 0;display:block}.subscription-cta:disabled{opacity:.55}.subscription-status{font-size:13px;line-height:1.9;margin-top:45px;color:#785c92}.subscription-price{font-size:12px;color:#8e799d;margin:15px 0}.renewal-control{padding:25px 0 12px;display:flex;flex-direction:column;gap:13px;align-items:center}.renewal-control label{font-size:14px;color:#4d3b68;display:flex;align-items:center;gap:10px}.renewal-control input{width:17px;height:17px;accent-color:#6c3ca2}.renewal-control small{font-size:10px;line-height:1.8;color:#908499}.monthly-gifts{margin-top:40px;border-top:1px solid #e7e1ed;padding-top:25px}.monthly-gifts h3{font-size:18px;color:#4c3c63}.gift-period{margin-top:20px;padding:20px;background:#f8f6fb}.gift-period p{font-size:11px;color:#8b7a9b;margin-bottom:13px}.gift-choices{display:grid;grid-template-columns:1fr;gap:8px}.gift-choices button{padding:12px;border:1px solid #ded3e9;color:#6d4a88;background:#fff;font-size:12px}.gift-result{font-size:12px;color:#7e5f93;line-height:1.7}.potential-sheet{padding:30px}.potential-summary{display:flex;align-items:center;justify-content:center;gap:35px;flex-wrap:wrap;color:#5c3d82}.potential-summary>div{display:flex;flex-direction:column;gap:5px}.potential-summary small{font-size:10px;letter-spacing:1px}.potential-summary strong{font-size:45px;color:#4e2d77}.potential-summary b{font-size:23px}.potential-summary span{font-size:12px}.potential-note,#potential-override-note{font-size:10px;line-height:1.8;margin:20px auto;max-width:500px;color:#9b8ba9}.potential-tabs{display:flex;justify-content:center;gap:25px;margin:30px 0 10px;border-bottom:1px solid #e9e1f1}.potential-tabs button{padding:15px 0;font-size:12px;color:#a28ab4;border-bottom:2px solid transparent}.potential-tabs button[aria-pressed=true]{border-color:#795198;color:#5a3378}.potential-item{display:grid;grid-template-columns:30px 55px 1fr 85px;gap:16px;align-items:center;border-bottom:1px solid #eee8f4;padding:20px 0;text-align:left}.potential-item>small{font-size:13px;color:#a88bb9}.potential-item>img{width:55px;height:55px;object-fit:cover;background:#eee8f4}.potential-song h3{font-size:14px;font-weight:600;color:#543b69;overflow-wrap:anywhere}.potential-song p{font-size:10px;color:#a08aaf;margin-top:6px;line-height:1.7}.potential-rating{display:flex;flex-direction:column;text-align:right;gap:5px}.potential-rating strong{font-size:21px;color:#6c4691}.potential-rating small{font-size:9px;color:#a18bb2}.potential-pagination{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:30px;font-size:11px;color:#9a81ac}.potential-state{font-size:13px;color:#8e729f;line-height:2;padding:65px 10px}.potential-state a{display:block;margin:20px auto;width:220px}.online-empty{font-size:12px;color:#9c89ac;padding:40px 10px}
@media(min-width:961px){.online-body .site-menu-button{right:max(25px,calc((100vw - 960px)/2 + 25px))}.profile-body.online-body .header .brand{margin-left:max(0px,calc((100vw - 960px)/2))}}
@media(max-width:760px){.online-body>.header .brand{width:180px;height:75px;padding-left:22px;clip-path:none}.online-body>.header{height:80px}.site-menu-button{top:24px;right:18px;width:100px;height:35px}.online-page{padding:118px 25px 45px}.online-title{height:180px}.online-title h1{font-size:42px}.subscription-sheet{padding:48px 26px 35px}.subscription-ribbon{margin-left:-26px;margin-right:-26px}.memories-hex{height:285px;padding-top:104px}.menu-lock{margin-right:115px}.potential-sheet{padding:25px 18px}.potential-item{grid-template-columns:25px 48px 1fr 68px;gap:10px}.potential-item>img{width:48px;height:48px}.potential-rating strong{font-size:18px}.potential-song h3{font-size:12px}.potential-summary{gap:20px}.potential-summary strong{font-size:38px}}
@media(max-width:420px){.online-page{padding-left:15px;padding-right:15px}.subscription-sheet{padding-left:18px;padding-right:18px}.subscription-ribbon{margin-left:-18px;margin-right:-18px}.memories-hex{height:240px;padding-top:92px}.memories-hex>p{font-size:14px}.memories-hex>strong{font-size:45px}.memories-hex>button{height:63px}.site-menu{padding:88px 25px 35px}.site-menu nav>a,.site-menu nav>button{font-size:16px;min-height:54px}.menu-lock{margin-right:85px}.online-title h1{min-width:275px;font-size:39px}.online-title h1:before{width:275px}.online-title small{font-size:19px}.subscription-sheet h2{font-size:24px}.potential-item{grid-template-columns:19px 42px 1fr 62px;gap:8px}.potential-item>img{width:42px;height:42px}.potential-summary>div:first-child{width:100%}}
.period-banner{display:block;width:min(100%,320px);height:auto;margin:12px auto}.subscription-ribbon img{transform:none;background:linear-gradient(135deg,#5932ae,#3b1676);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.subscription-ribbon{isolation:isolate}.subscription-ribbon:after{content:'◇';position:absolute;color:#fff;font-size:120px;line-height:1;font-weight:800;pointer-events:none}.subscription-ribbon img{padding:42px}

.period-song{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 0;color:#654883;font-size:14px}.period-jacket{width:160px;height:160px;object-fit:cover;box-shadow:0 5px 12px #39224d30}
.period-pack-cover{height:280px;width:160px;object-fit:contain;box-shadow:none}
.account-settings-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.account-settings-actions button{flex:1;min-width:120px}.account-form{display:grid;gap:16px}.account-form label{display:grid;gap:8px}.account-form input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #b8b5c5;border-radius:3px;font:inherit}.account-danger{border:1px solid #ac305c;background:#93264f;color:#fff;padding:12px 18px;cursor:pointer;font:inherit}.account-danger:disabled{opacity:.4;cursor:not-allowed}.account-delete-warning{line-height:1.9;color:#92264f;font-weight:600}.account-form-dialog{max-width:460px;width:calc(100% - 52px)}

.partner-name-prefix{display:block;font-size:10px;font-weight:500;letter-spacing:.24em;line-height:1.5;color:inherit;margin:8px 0 2px}.partner-name-prefix[hidden]{display:none}.partner-tile .partner-name-prefix{font-size:9px;margin:4px 0 0}