.viewer-page{padding:24px 0 40px}.viewer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.viewer-top>span{font-size:12px;letter-spacing:2px;color:var(--muted)}.viewer-hero{position:relative;isolation:isolate;border:1px solid #ffffff1b;border-radius:22px;min-height:285px;padding:38px;display:grid;grid-template-columns:minmax(0,1fr) 265px;align-items:end;gap:30px;overflow:hidden}
.cover-midnight{background:radial-gradient(ellipse at 80% 0,#36598588,transparent 65%),linear-gradient(115deg,#202b40,#111b2a)}.cover-nebula{background:radial-gradient(ellipse at 85% 0,#79519388,transparent 65%),linear-gradient(115deg,#29243d,#181927)}.cover-ember{background:radial-gradient(ellipse at 85% 0,#9e613e88,transparent 65%),linear-gradient(115deg,#342725,#1e1b23)}
.viewer-cover-art{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;opacity:.5}.viewer-cover-art i{position:absolute;top:-140px;right:10%;width:400px;height:400px;border:1px solid #cddfff1c;border-radius:50%;transform:rotate(-30deg)}.viewer-cover-art i:nth-child(2){width:600px;height:600px;right:-5%;top:-240px}.viewer-cover-art i:nth-child(3){width:800px;height:800px;right:-20%;top:-340px}
.viewer-identity{display:flex;align-items:center;gap:24px;min-width:0}.viewer-avatar{width:100px;height:100px;flex-shrink:0;display:grid;place-items:center;border:1px solid #cddfff5c;border-radius:23px;background:#10182599;color:#d6e6ff;font-size:50px;box-shadow:0 0 0 7px #cddfff08}.viewer-identity>div{min-width:0}.viewer-kicker{font-size:11px;letter-spacing:2px;color:#b8c9e4}.viewer-identity h1{font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-1px;margin:12px 0;overflow-wrap:anywhere}.viewer-identity p{color:#c0cadb;font-size:15px;line-height:1.6;margin:0 0 20px;overflow-wrap:anywhere;max-width:480px}.viewer-identity .button{background:#ffffff0d;border-color:#ffffff26;color:#e5ebf5}
.viewer-level{padding:23px;border:1px solid #ffffff24;border-radius:17px;background:#0e172b77;backdrop-filter:blur(10px)}.viewer-level-heading{display:flex;align-items:center;gap:16px}.viewer-level-number{font-size:48px;font-weight:600;line-height:1;color:#d8e5ff}.viewer-level-heading b{display:block;font-size:15px}.viewer-level-heading div>span{display:block;color:#abbcd8;font-size:13px;margin-top:7px}.viewer-level progress{margin-top:23px;height:7px;width:100%;display:block}.viewer-page progress{appearance:none;border:0;background:#ffffff10;border-radius:8px;overflow:hidden}.viewer-page progress::-webkit-progress-bar{background:#ffffff10;border-radius:8px}.viewer-page progress::-webkit-progress-value{background:var(--accent);border-radius:8px}.viewer-page progress::-moz-progress-bar{background:var(--accent)}.viewer-xp-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b4c3dc;margin-top:10px}.viewer-summary{display:flex;gap:32px;padding:24px 4px;color:var(--muted);font-size:14px}.viewer-summary b{color:var(--text);font-size:19px;margin-right:5px}
.viewer-pins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 38px}.viewer-pins>button{display:flex;align-items:center;gap:14px;padding:14px;text-align:left;border:1px solid #ffffff14;border-radius:13px;background:#1b2330}.viewer-pins>button>span:nth-child(2){font-size:14px;line-height:1.4;flex:1}.viewer-pins>button>svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}.viewer-badge{display:grid;place-items:center;width:60px;height:66px;flex-shrink:0;clip-path:polygon(50% 0,94% 23%,94% 75%,50% 100%,6% 75%,6% 23%);background:#323b48;color:#a8b1bf;position:relative}.viewer-badge:before{content:'';position:absolute;inset:3px;clip-path:inherit;background:#151e2de0;z-index:-1}.viewer-badge svg{width:30px;height:30px}.viewer-badge.unlocked{background:linear-gradient(150deg,#d6e8ff,#5877a7);color:#e5f0ff;filter:drop-shadow(0 0 8px #9cb9f533)}.badge-crown.unlocked{background:linear-gradient(150deg,#f2d49b,#8d6240);color:#fff0c6}.badge-compass.unlocked,.badge-planet.unlocked{background:linear-gradient(150deg,#e0cbff,#8163b6);color:#edddff}
.viewer-showcase{margin-bottom:38px}.viewer-showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.viewer-title{text-align:left;min-width:0;border-radius:12px}.viewer-title .art{aspect-ratio:2/3;border:1px solid #ffffff16;border-radius:12px;overflow:hidden}.viewer-title b{display:block;font-size:17px;line-height:1.4;margin:12px 0 5px}.viewer-title>span{font-size:13px;color:var(--muted)}.viewer-title:hover .art{border-color:var(--accent)}.viewer-empty{display:flex;align-items:center;gap:20px;padding:28px;background:#ffffff02;border:1px dashed #ffffff24;border-radius:15px}.viewer-empty>span>svg{width:32px;height:32px;color:var(--accent)}.viewer-empty>div{flex:1}.viewer-empty h3{font-size:18px;margin:0 0 8px}.viewer-empty p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.viewer-empty .button{flex-shrink:0}
.viewer-badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.viewer-achievement{display:flex;gap:16px;align-items:center;min-width:0;padding:21px 17px;text-align:left;border:1px solid #ffffff12;background:#181e28;border-radius:14px}.viewer-achievement:hover,.viewer-pins>button:hover{border-color:#a7c4ec6b;background:#222b3a}.viewer-achievement.earned{background:linear-gradient(115deg,#202c40,#1b2330);border-color:#a9c6f12b}.viewer-achievement-info{flex:1;min-width:0}.viewer-achievement-info b{display:block;font-size:16px;line-height:1.45}.viewer-achievement-info>span{display:block;margin:8px 0;font-size:13px;color:var(--muted)}.viewer-achievement-info progress{display:block;width:100%;height:4px}.viewer-badge-grid>.viewer-empty{grid-column:1/-1}.viewer-rules{margin-top:30px}.viewer-rules p{max-width:850px;line-height:1.8;color:var(--muted);font-size:14px}.viewer-loading{padding:80px 20px;text-align:center;color:var(--muted)}
.viewer-achievement-detail{text-align:center;padding:16px 8px}.viewer-achievement-detail>.viewer-badge{width:90px;height:100px;margin:0 auto 24px}.viewer-achievement-detail>.viewer-badge svg{width:42px;height:42px}.viewer-achievement-detail p{font-size:16px;line-height:1.7;color:var(--muted)}.viewer-achievement-detail .viewer-detail-note{font-size:13px;margin-top:25px}
#viewer-form fieldset{border:0;padding:0;margin:24px 0}#viewer-form legend{font-size:15px;font-weight:600;margin-bottom:14px}.viewer-cover-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.viewer-cover-picker label{position:relative}.viewer-cover-picker input{position:absolute;opacity:0;width:1px;height:1px}.viewer-cover-picker span{display:grid;place-items:center;height:70px;border:2px solid transparent;border-radius:10px;color:#dce5f4;font-size:13px}.viewer-cover-picker input:checked+span{border-color:var(--accent)}.viewer-cover-picker input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.viewer-choice-list{max-height:210px;overflow:auto;scrollbar-width:thin}.viewer-choice-list label{display:flex;gap:12px;align-items:center;padding:10px 4px;font-size:14px;line-height:1.5}.viewer-choice-list label[hidden]{display:none}.viewer-choice-list input{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent)}.viewer-choice-list p{font-size:14px;color:var(--muted)}.viewer-picker-search{margin-bottom:10px}#viewer-save-status{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:1150px){.viewer-hero{grid-template-columns:1fr;padding:28px;gap:24px}.viewer-level{max-width:400px;width:100%}.viewer-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viewer-pins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.viewer-page{padding-top:12px}.viewer-top>span{display:none}.viewer-top{justify-content:flex-end}.viewer-hero{padding:24px 20px;border-radius:17px}.viewer-identity{display:block}.viewer-avatar{width:76px;height:76px;font-size:38px;margin-bottom:24px}.viewer-identity h1{font-size:30px}.viewer-level{padding:20px}.viewer-summary{gap:12px;justify-content:space-between;font-size:12px;flex-wrap:wrap}.viewer-summary b{font-size:17px}.viewer-pins,.viewer-badge-grid{grid-template-columns:1fr}.viewer-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.viewer-title b{font-size:15px}.viewer-empty{flex-wrap:wrap;padding:22px}.viewer-empty>span{display:none}.viewer-empty>div{flex-basis:100%}.viewer-achievements>.section-heading{flex-wrap:wrap}.viewer-achievement{padding:18px}.viewer-cover-picker{gap:6px}.viewer-cover-picker span{font-size:11px}.viewer-choice-list{max-height:180px}}

.watch-credit-info{margin:12px 0 24px}.watch-credit-info p{color:var(--muted);font-size:14px;line-height:1.7;max-width:800px}.viewer-summary{flex-wrap:wrap}