/* A profile-first editor with focused customization panels. */
#accountPanel .profile-studio{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.3fr);gap:32px;align-items:start}
#accountPanel .profile-studio>.profile-summary{position:sticky;top:130px;min-width:0;padding:0 0 24px;margin-top:26px;border:1px solid #303030;border-radius:18px;background:#101010;box-shadow:0 18px 70px #0003}
.studio-preview{min-width:0}.studio-preview-label{display:block;padding:18px 20px;color:#727272;font:10px/1.4 Arial,sans-serif;letter-spacing:.15em}
#accountPanel .studio-preview .member-banner{width:100%;height:144px;min-height:144px;max-height:144px;margin:0;border-radius:0;border-top:1px solid #262626;border-bottom:1px solid #262626;overflow:hidden}
#accountPanel .studio-preview .member-banner img{width:100%;height:100%;object-fit:cover}
#accountPanel .studio-preview .profile-framed-avatar{display:block;width:90px;height:90px;margin:-30px 24px 20px;position:relative;z-index:2}
#accountPanel .studio-preview .profile-display-name{margin:0 24px 12px;font-size:23px;line-height:1.4;gap:8px;overflow-wrap:anywhere}
#accountPanel .studio-preview .custom-badges{margin:0 24px 12px;display:flex;flex-wrap:wrap}
#accountPanel .studio-preview .profile-summary-bio{margin:0 24px 24px;color:#aaa;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
#accountPanel .profile-studio>.profile-summary>:is(.eyebrow,h3,progress,.profile-progress-caption,.membership-pending,#signOut){margin-left:24px;margin-right:24px;max-width:calc(100% - 48px)}
#accountPanel .profile-studio>.profile-summary>progress{width:calc(100% - 48px)}
#accountPanel .profile-studio>.profile-summary>h3{font-size:22px;margin-top:10px;margin-bottom:12px}
#accountPanel .profile-studio #signOut{border:1px solid #333;background:transparent;color:#888;border-radius:8px;font-size:12px;min-height:40px;padding:8px 15px}
#accountPanel .studio-editor{padding:24px;background:#101010;border:1px solid #2b2b2b;border-radius:18px;margin-top:26px;min-width:0;color:#ddd}
.studio-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 20px;border-bottom:1px solid #292929;margin-bottom:8px}
.studio-menu-heading>span{font-size:17px;letter-spacing:-.02em}.studio-menu-heading small{font-size:11px;color:#777}
#accountPanel .studio-option{display:flex;align-items:center;width:100%;gap:14px;text-align:left;margin:0;padding:18px 4px;min-height:80px;border:0;border-bottom:1px solid #252525;border-radius:0;background:transparent;color:#ddd;transition:background .18s}
#accountPanel .studio-option:hover{background:#191919}.studio-option-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid #343434;border-radius:11px;background:#191919;color:#aaa}
.studio-option svg,.studio-back svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.studio-option-label{min-width:0;flex:1}.studio-option-label strong{display:block;font-size:14px;font-weight:500;line-height:1.5}.studio-option-label small{display:block;color:#777;font-size:11px;line-height:1.6;margin-top:3px}
.studio-option .studio-chevron{width:15px;height:15px;flex:0 0 15px;color:#777}
.studio-toolbar{display:flex;gap:12px;align-items:center;border-bottom:1px solid #303030;padding-bottom:18px;margin-bottom:24px}
#accountPanel .studio-toolbar h3{font-size:18px;line-height:1.4;letter-spacing:-.02em;margin:0}
#accountPanel .studio-back{display:grid;place-items:center;min-width:40px;width:40px;height:40px;padding:0;background:#191919;border:1px solid #333;border-radius:10px;color:#bbb}
.studio-panel{min-width:0}.studio-panel>label:last-child{margin-bottom:0}
#accountPanel .studio-panel :is(.photo-editor,.banner-editor,.name-color-picker,.frame-picker,.anonymous-control){margin:0;border:0;padding:0;background:transparent}
#accountPanel .studio-panel input:not([type=checkbox]):not([type=color]),#accountPanel .studio-panel textarea{background:#090909;border:1px solid #333;border-radius:10px;color:#ddd;padding:14px}
#accountPanel .studio-panel textarea{min-height:140px}
#accountPanel .studio-policy{color:#777;font-size:11px;line-height:1.7;margin:20px 0 0}
#accountPanel .studio-savebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 0;padding-top:20px;border-top:1px solid #303030}
#accountPanel .studio-savebar button{width:auto;min-height:44px;margin:0;padding:11px 18px;font-size:12px;border-radius:9px}
#accountPanel .studio-savebar .studio-reset{background:transparent;color:#999;border:1px solid #3a3a3a}
#accountPanel .studio-savebar button[type=submit]{background:#dedede;color:#111;border:1px solid #dedede}
#accountPanel .studio-editor #profileStatus{font-size:12px;line-height:1.7;color:#bbb;margin-bottom:0;overflow-wrap:anywhere}
#accountPanel .studio-editor #profileStatus:empty{display:none}
#accountPanel .studio-invite{margin-top:28px;border-radius:16px}
#accountPanel .studio-panel .frame-picker-heading h4{font-size:16px}
@media(max-width:850px){#accountPanel .profile-studio{grid-template-columns:minmax(0,1fr);gap:20px}#accountPanel .profile-studio>.profile-summary{position:relative;top:auto;margin-top:26px}#accountPanel .studio-editor{margin-top:0}}
@media(max-width:600px){#accountPanel .studio-editor{padding:20px 16px;border-radius:14px}.studio-menu-heading{align-items:flex-start;flex-direction:column;gap:5px}.studio-option-label strong{font-size:13px}.studio-option-label small{font-size:11px}#accountPanel .studio-option{gap:12px;padding:16px 0}.studio-option-icon{width:38px;height:38px;flex-basis:38px}.studio-savebar{flex-wrap:wrap}#accountPanel .studio-savebar button{flex:1;white-space:nowrap;padding:11px 10px}#accountPanel .studio-preview .member-banner{height:128px;min-height:128px;max-height:128px}}
@media(prefers-reduced-motion:reduce){#accountPanel .studio-option{transition:none}}

/* A single coordinate box aligns photos and animated overlays on every surface. */
body .framed-avatar{box-sizing:border-box;aspect-ratio:1 / 1;flex-shrink:0;padding:0;border:0;line-height:0;overflow:visible!important}
body .framed-avatar>img,body .framed-avatar>.framed-fallback{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:78%!important;height:78%!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;box-sizing:border-box;object-fit:cover;object-position:center;line-height:1.2}
body .framed-avatar>.avatar-decoration{box-sizing:border-box;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;transform:none;pointer-events:none}
body .framed-avatar>.gif-decoration>img{position:static!important;transform:none!important;inset:auto!important;width:100%!important;height:100%!important;object-position:center!important;aspect-ratio:1 / 1}
body .friend-identity .friend-avatar{--avatar-size:66px;margin:0}
body .mutual-person .mutual-avatar{--avatar-size:40px;width:40px;height:40px;flex-basis:40px;margin:0}
#accountPanel .studio-preview .profile-framed-avatar{--avatar-size:90px;display:inline-grid}
.frame-featured>.framed-avatar,.frame-options .framed-avatar{align-self:center;flex-shrink:0}
.frame-featured>div{min-width:0;overflow-wrap:anywhere}
.frame-options>button{min-width:0;overflow:visible}
@media(max-width:600px){.frame-featured{gap:14px}.frame-options .framed-avatar{--avatar-size:64px}.frame-options>button>span:last-child{font-size:11px;line-height:1.5;overflow-wrap:anywhere}}

/* Consistent profile navigation and typography, without inherited button spacing. */
#accountPanel .studio-toolbar .studio-back{display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;line-height:1;border-radius:10px;cursor:pointer}
#accountPanel .studio-toolbar .studio-back svg{display:block;width:18px;height:18px;margin:0;padding:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:none}
#accountPanel .studio-toolbar .studio-back:hover{background:#242424;color:#fff}
#accountPanel .studio-editor{font-family:Manrope,Arial,sans-serif;font-weight:400;letter-spacing:0}
#accountPanel .studio-panel h4{font:500 16px/1.5 Manrope,Arial,sans-serif;letter-spacing:-.01em;margin:0 0 10px;overflow-wrap:anywhere}
#accountPanel .studio-panel label{font-size:12px;line-height:1.6;letter-spacing:0;color:#bdbdbd;overflow-wrap:anywhere}
#accountPanel .studio-panel p{font-size:12px;line-height:1.7;color:#8e8e8e;letter-spacing:0;overflow-wrap:anywhere}
#accountPanel .studio-panel .frame-featured strong{font-size:14px;line-height:1.5;letter-spacing:0;overflow-wrap:anywhere}
#accountPanel .studio-panel button{font-family:inherit;letter-spacing:0;line-height:1.5}
#accountPanel .studio-toolbar h3{min-width:0;overflow-wrap:anywhere}
#accountPanel .studio-editor :is(.studio-option,.studio-back,.studio-reset):focus-visible{outline:1px solid #aaa;outline-offset:3px}

/* Shared action alignment across desktop and compact screens. */
button,.button,a.outline{box-sizing:border-box;vertical-align:middle}
:is(.chart-controls,.verification-actions,.friend-actions,.rank-admin-toolbar,.frame-pagination,.studio-savebar,.approval-header-actions,.member-order-controls,.friend-move-controls){align-items:center;gap:10px}
:is(.chart-controls,.friend-actions,.rank-admin-toolbar,.member-order-controls,.friend-move-controls){flex-wrap:wrap}
:is(.chart-controls,.verification-actions,.friend-actions,.rank-admin-toolbar,.frame-pagination,.studio-savebar,.approval-header-actions,.member-order-controls,.friend-move-controls)>:is(button,a.button,a.outline){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;line-height:1.3;text-align:center;margin-top:0;margin-bottom:0}
:is(.chart-controls,.friend-actions,.rank-admin-toolbar,.frame-pagination,.studio-savebar,.approval-header-actions,.member-order-controls,.friend-move-controls) button svg{display:block;flex-shrink:0;vertical-align:middle;margin:0}
#accountPanel .studio-savebar{align-items:stretch}
#accountPanel .studio-savebar>button{min-height:44px;display:flex;align-items:center;justify-content:center}
.frame-pagination{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
.frame-pagination>button{width:44px;height:44px;padding:0;justify-self:center}
.frame-pagination>span{text-align:center;min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){
 :is(.friend-actions,.verification-actions){display:flex;flex-wrap:wrap;gap:8px}
 .friend-actions>button{flex:1 1 100px}
 .chart-controls{gap:8px}
 .rank-admin-toolbar{gap:10px}
 .rank-admin-toolbar>span{min-width:0;overflow-wrap:anywhere}
 #accountPanel .studio-savebar>button{flex:1 1 120px}
}

/* Keep collection labels intact; reduce columns instead of breaking words. */
.frame-picker .frame-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.frame-picker .frame-categories button,.frame-picker .frame-categories button:last-child{grid-column:auto;white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:11px;line-height:1.3;letter-spacing:0;padding:11px 7px;min-height:44px;text-align:center;justify-content:center}
@media(max-width:700px){.frame-picker .frame-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-picker .frame-categories button{font-size:12px}}

/* User-selected primary and accent colors. Foreground follows primary luminance. */
body .profile-themed,#accountPanel .profile-studio>.profile-summary.profile-themed{background:var(--profile-primary);border-color:var(--profile-accent);color:var(--profile-ink)}
body .profile-themed .member-banner:not(:has(img)){background:linear-gradient(130deg,var(--profile-primary),var(--profile-accent));border-color:var(--profile-accent)}
body .profile-themed :is(.profile-summary-bio,.public-profile-bio,.rank-role,.profile-progress-caption,.small,.eyebrow,.studio-preview-label){color:var(--profile-muted)!important}
body .profile-themed :is(.public-profile-name,.rank-score,.profile-display-name,.profile-summary>h3,.public-profile-progress h2){color:var(--profile-ink)}
body .profile-themed :is(.public-profile-progress,progress){border-color:var(--profile-accent);accent-color:var(--profile-accent)}
body .profile-themed progress::-webkit-progress-value{background:var(--profile-accent)}
body .profile-themed progress::-moz-progress-bar{background:var(--profile-accent)}
.profile-theme-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
#accountPanel .profile-theme-fields label{display:flex;flex-direction:column;gap:10px;margin:0;font-size:13px}
#accountPanel .profile-theme-fields input[type=color]{display:block;width:100%;height:72px;padding:5px;border:1px solid #444;border-radius:12px;background:#0a0a0a;cursor:pointer}
.profile-theme-fields input::-webkit-color-swatch-wrapper{padding:0}.profile-theme-fields input::-webkit-color-swatch{border:0;border-radius:7px}.profile-theme-fields input::-moz-color-swatch{border:0;border-radius:7px}
.profile-theme-fields small{font-size:10px;color:#888;line-height:1.5}
.profile-theme-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0}
#accountPanel .profile-theme-presets button{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;border:1px solid #333;border-radius:9px;background:#151515;color:#ccc;font-size:12px;text-align:left}
.profile-theme-presets i{display:block;width:24px;height:24px;flex:0 0 24px;border:3px solid;border-radius:50%}
#accountPanel .profile-theme-reset{background:transparent;color:#aaa;border:1px solid #383838;border-radius:8px;padding:10px 14px;font-size:12px}
@media(max-width:380px){.profile-theme-fields{gap:10px}#accountPanel .profile-theme-presets button{padding:10px 8px;font-size:11px}}

/* Equal actions and invitation-first profile layout at every width. */
#accountPanel .studio-savebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px}
#accountPanel .studio-savebar>:is(.studio-reset,button[type=submit]){display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:46px;min-height:46px;max-height:46px;padding:10px 8px;margin:0;box-sizing:border-box;font-family:Manrope,Arial,sans-serif;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:0;text-align:center;white-space:nowrap;border-width:1px;border-style:solid;border-radius:9px}
#accountPanel>.studio-invite{margin:0 0 24px;padding:20px;border:1px solid #303030;border-radius:14px;background:#101010;min-width:0}
#accountPanel .studio-menu-heading,#accountPanel .studio-toolbar{line-height:1.4}
@media(max-width:380px){#accountPanel .studio-savebar{gap:8px}#accountPanel .studio-savebar>:is(.studio-reset,button[type=submit]){font-size:11px;padding:10px 5px}#accountPanel>.studio-invite{padding:16px;margin-bottom:20px}}

/* True-black page canvas; custom profile themes remain independent. */
:root{--black:#000}
html,body,body.auth-gated,body.member-view,body.learning-view,body.home-view{background-color:#000!important}
body>header,body.auth-gated>header,body>main,body>footer,body main>section,body main>.section,body.home-view .hero.crypto-hero{background-color:#000!important}
body>header{background-image:none!important}
body header .account-nav :is(.fitness-nav,.leaderboard-link,.friends-link,#accountLink){background:#000;border-color:#555;color:#aaa;box-shadow:none}
body header .account-nav :is(.fitness-nav,.leaderboard-link,.friends-link,#accountLink):hover,body header .account-nav :is(.fitness-nav,.leaderboard-link,.friends-link,#accountLink)[aria-current]{background:#000;border-color:#aaa;color:#fff}

/* A single-person Profile icon matches the adjacent navigation controls. */
body header .account-nav #accountLink{display:grid;place-items:center;align-self:center;box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;padding:0!important;margin:0;border:1px solid #555;border-radius:8px;background:#000;color:#aaa;line-height:1}
body header .account-nav #accountLink svg{display:block;width:21px;height:21px;margin:0;padding:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){body header .account-nav #accountLink{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}}

/* Center the editor back glyph independently of form-button layout rules. */
#accountPanel .studio-toolbar{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px}
#accountPanel .studio-toolbar>button.studio-back{position:relative;display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;justify-self:center;align-self:center;padding:0!important;margin:0!important;line-height:0;font-size:0;text-indent:0;transform:none}
#accountPanel .studio-toolbar>button.studio-back>svg{position:absolute;display:block;left:50%;top:50%;right:auto;bottom:auto;width:20px;height:20px;max-width:none;max-height:none;margin:0!important;padding:0!important;transform:translate(-50%,-50%);transform-origin:center;pointer-events:none}

/* Public cards retain the member's theme above section-specific dark defaults. */
body #members .member-card.profile-themed,
body #friends .friend-card.profile-themed,
body #leaderboard .rank-row.profile-themed,
body .public-profile-card.profile-themed{background:var(--profile-primary)!important;border-color:var(--profile-accent)!important;color:var(--profile-ink)}
body .profile-themed .member-banner{border-bottom:1px solid var(--profile-accent)}
body .profile-themed .rank-banner:after{background:linear-gradient(90deg,var(--profile-primary),color-mix(in srgb,var(--profile-primary) 75%,transparent),var(--profile-primary))}
body .profile-themed :is(.member-card-content,.friend-card-content){background:var(--profile-primary);color:var(--profile-ink)}
body .profile-themed :is(.rank-position,.rank-role,.rank-score b span,.member-bio,.mutual-count,.friend-mutuals,.member-card-content p){color:var(--profile-muted)!important}
body .profile-themed :is(.rank-name,.rank-score,.friend-identity a,.member-card-content h3){color:var(--profile-ink)!important}
body .profile-themed .friend-actions button{border-color:var(--profile-accent)}
header #journeyNav .journey-menu>summary{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;min-width:54px;min-height:44px;box-sizing:border-box;color:#aaa}
header #journeyNav .academy-nav-icon{display:block;flex:0 0 23px;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:none}
header #journeyNav .journey-chevron{flex:0 0 12px;width:12px;height:12px;margin:0}
header #journeyNav summary:hover,header #journeyNav summary:focus-visible{color:#fff}
/* Keep the mobile canvas continuous beneath translucent browser controls. */
@media(max-width:850px),(pointer:coarse) and (max-width:1024px){
 html:has(body.home-view){background-color:#000!important;background-image:url('crypto-scenery.webp');background-size:auto 125lvh;background-position:center 62%;background-repeat:no-repeat;background-attachment:fixed}
 body.home-view,body.home-view>main,body.home-view main>.hero.crypto-hero{background:transparent!important}
 body.home-view .hero.crypto-hero:before{background-size:auto 125%;background-position:center 62%;mask-image:none;-webkit-mask-image:none}
 body.home-view>footer{background:transparent!important}
 body:not(.home-view)>main{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* Match the Academy disclosure to the adjacent navigation icon borders. */
body header #journeyNav .journey-menu>summary{border:1px solid #555;border-radius:8px;background:#000;box-shadow:none;height:40px;min-height:40px;min-width:54px;padding:7px 8px}
body header #journeyNav .journey-menu>summary:hover,
body header #journeyNav .journey-menu[open]>summary{border-color:#aaa;color:#fff}
@media(pointer:coarse){body header #journeyNav .journey-menu>summary{height:44px;min-height:44px}}
/* A transparent sampling strip prevents iOS Safari from retaining an opaque
   toolbar tint after dark page content or a menu touches the viewport edge.
   Reference: fantinel.dev/blog/safari-floating-url-bar-background */
.mobile-toolbar-blend{display:none;pointer-events:none}
@supports(-webkit-touch-callout:none){
 .mobile-toolbar-blend{display:block;position:sticky;left:0;bottom:-2px;width:100%;height:6px;margin-top:-6px;background:transparent!important;z-index:999;pointer-events:none;user-select:none}
}

/* Keep the unsaved preview next to mobile editing controls, including onboarding. */
#accountPanel .studio-inline-preview{display:none}
@media(max-width:850px){
 #accountPanel .studio-editing>.studio-inline-preview{display:block;margin:0 0 24px;padding:0;border:1px solid #333;border-radius:12px;background:#101010;overflow:hidden;min-width:0}
 #accountPanel .studio-is-editing>.profile-summary{display:none}
 #accountPanel .studio-inline-preview .studio-preview-label{padding:12px 16px;font-size:9px;letter-spacing:.1em}
 #accountPanel .studio-inline-preview .studio-preview .member-banner{height:104px;min-height:104px;max-height:104px}
 #accountPanel .studio-inline-preview .profile-display-name{font-size:18px}
 #accountPanel .studio-inline-preview .profile-summary-bio{font-size:12px;margin-bottom:16px}
 #accountPanel .studio-inline-preview.profile-themed{background:var(--profile-primary);border-color:var(--profile-accent)}
}

/* Soft grey reading surfaces throughout the Academy and chapter lessons. */
#academy{--reading-surface:rgba(72,72,72,.24);--reading-border:rgba(255,255,255,.07)}
#academy .section-heading,#academy .academy-layout>aside,#academy .chapter,
#lesson .lesson-intro-panel,#lesson .lesson-section,#lesson .takeaway,#lesson .lesson-links{
 background:rgba(72,72,72,.24);border:1px solid rgba(255,255,255,.07);border-radius:12px;color:#e4e4e4;padding:24px;box-sizing:border-box;min-width:0;
}
#academy .section-heading{gap:24px}
#academy .academy-layout>aside{align-self:start}
#academy .chapter-list{display:flex;flex-direction:column;gap:12px}
#academy .chapter{width:100%;margin:0;text-align:left;transition:background .2s,border-color .2s}
#academy .chapter:hover,#academy .chapter:focus-visible{background:rgba(86,86,86,.32);border-color:#ffffff28}
#academy .chapter p,#academy .section-heading>p,#academy aside .small,#lesson .chapter-intro,#lesson .lesson-section>p,#lesson .lesson-links{color:#c7c7c7}
#academy .filters button{background:rgba(20,20,20,.4);border:1px solid #ffffff12;border-radius:7px;padding:12px;color:#c7c7c7}
#academy .filters button.active{background:rgba(112,112,112,.35);border-color:#777;color:#f0f0f0}
#lesson .lesson-intro-panel>h2{margin:12px 0 18px}
#lesson .lesson-section{margin-top:24px}
#lesson .lesson-question,#lesson .takeaway,#lesson .mc-feedback{background:rgba(95,95,95,.16);border-color:#ffffff12}
#lesson .mc-option{background:rgba(20,20,20,.35)}
#lesson .mc-option:hover,#lesson .mc-option[aria-pressed=true]{background:rgba(110,110,110,.35)}
#lesson .lesson-links{margin:24px 0;line-height:1.9}
@media(max-width:640px){
 #academy .section-heading,#academy .academy-layout>aside,#lesson .lesson-intro-panel,#lesson .lesson-section,#lesson .takeaway,#lesson .lesson-links{padding:18px;border-radius:10px}
 #academy .chapter{padding:18px 12px;gap:10px}
 #academy .filters button{padding:10px 4px}
 #lesson .lesson-question{padding:14px}
}
/* Center desktop authentication as a balanced two-column card. */
@media(min-width:851px){
 body.auth-gated #account:has(.auth-layout){display:grid!important;align-items:center;justify-items:center;min-height:100dvh;padding:64px 32px;box-sizing:border-box}
 body.auth-gated #accountPanel:has(.auth-layout){width:100%;max-width:1000px;margin:0 auto}
 body #accountPanel .auth-layout{width:100%;max-width:1000px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 body #accountPanel .auth-layout>.auth-introduction,body #accountPanel .auth-layout>form{padding:40px;min-width:0;display:flex;flex-direction:column;justify-content:center}
 body #accountPanel .auth-layout .auth-art{margin-left:auto;margin-right:auto;width:100%;max-width:300px}
 body #accountPanel .auth-layout .auth-mode-tabs{width:100%;margin:0 0 24px}
 body #accountPanel .auth-layout .auth-form-intro:empty{display:none}
}

#accountPanel .signup-invite-name{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
#accountPanel .signup-invite-card .custom-badges{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:5px}
#accountPanel .signup-invite-card .member-banner img{width:100%;height:100%;object-fit:cover}
#accountPanel .signup-invite-card .signup-invite-avatar{--avatar-size:76px;flex-shrink:0}
@media(max-width:600px){#accountPanel .signup-invite-card .signup-invite-avatar{--avatar-size:64px}#accountPanel .signup-invite-card{width:100%;margin-bottom:20px}}
/* A deliberate divider completes the inviter's avatar and identity area. */
#accountPanel .signup-invite-details{border-bottom:0;margin-bottom:0}
#academyCongratulations{position:fixed;inset:0;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:48px 28px 28px;border:1px solid #555;border-radius:20px;background:#090909;color:#ddd;overflow:auto;box-sizing:border-box;animation:celebration-in .55s ease-out}
#academyCongratulations::backdrop{background:#000b;backdrop-filter:blur(8px)}
.celebration-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #444;border-radius:9px;background:#151515;color:#ddd;font-size:23px}
.celebration-body{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.celebration-body h2{font-size:clamp(27px,6vw,38px);letter-spacing:-1px}.celebration-body p{line-height:1.6}
.celebration-profile{width:100%;border:1px solid #50565a;border-radius:12px;background:#151515;padding-bottom:18px;overflow:hidden}
.celebration-profile .member-banner{height:100px;margin:0;aspect-ratio:auto}.celebration-profile .member-banner img{width:100%;height:100%;object-fit:cover}
.celebration-avatar{--avatar-size:76px;margin:24px auto 16px;position:relative;z-index:1}
.celebration-name{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 16px;font-size:20px}.celebration-role{font-size:12px;color:#bbc8cf;margin-top:10px}
.celebration-caption{font-size:12px;color:#aaa;max-width:360px}.clapping-cat{width:100px;height:100px;image-rendering:pixelated;animation:cat-cheer .6s ease-in-out infinite alternate}.cat-paw-left{animation:cat-clap-left .6s steps(2,end) infinite}.cat-paw-right{animation:cat-clap-right .6s steps(2,end) infinite}.cat-clap-sparks{animation:clap-spark .6s steps(2,end) infinite}
@keyframes cat-clap-left{50%{transform:translateX(6px)}}@keyframes cat-clap-right{50%{transform:translateX(-6px)}}@keyframes clap-spark{50%{opacity:0}}@keyframes cat-cheer{to{transform:translateY(-5px)}}@keyframes celebration-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#academyCongratulations,.clapping-cat,.cat-paw,.cat-clap-sparks{animation:none}}

/* Translucent charcoal surfaces keep the Academy light and quiet. */
#academy .section-heading,#academy .academy-layout>aside,#academy .chapter{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 #ffffff03}
#lesson{background:rgba(12,12,12,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:#ffffff1c}
#lesson .dialog-toolbar{background:rgba(19,19,19,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:#ffffff12}
#lesson .lesson-intro-panel,#lesson .lesson-section,#lesson .takeaway,#lesson .lesson-links{box-shadow:inset 0 1px 0 #ffffff03}

.journey-finish-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0;border:0;background:transparent;color:#bbb;font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer}
.journey-finish-label:hover:not(:disabled){color:#fff}.journey-finish-label:disabled{opacity:.45;cursor:default}.journey-finish-label:focus-visible{outline:1px solid #aaa;outline-offset:5px;border-radius:4px}

/* Distinct banner and profile rows in the Diamond preview. */
#academyCongratulations .celebration-profile{display:flex;flex-direction:column;align-items:center;padding:0 0 22px;border-radius:14px}
#academyCongratulations .celebration-profile>.member-banner{align-self:stretch;width:100%;height:110px;min-height:110px;max-height:110px;margin:0;border-radius:0;border-bottom:1px solid #ffffff16;overflow:hidden}
#academyCongratulations .celebration-profile>.celebration-avatar{flex:none;display:inline-grid;align-self:center;width:76px;height:76px;margin:24px 0 16px;transform:none}
#academyCongratulations .celebration-name{width:100%;padding:0 20px;line-height:1.5;overflow-wrap:anywhere}
#academyCongratulations .celebration-profile>.custom-badges{justify-content:center;flex-wrap:wrap;padding:0 20px;margin:10px 0 0}
#academyCongratulations .celebration-role{margin:10px 0 0}
#academyCongratulations .celebration-body>.button{width:100%;max-width:320px;min-height:46px;border-radius:10px;margin-top:4px}
@media(max-width:480px){#academyCongratulations{padding:48px 18px 22px}.celebration-body{gap:14px}#academyCongratulations .celebration-profile>.member-banner{height:94px;min-height:94px;max-height:94px}}

/* Invitation card: banner, divider, then one aligned identity row. */
#accountPanel .signup-invite-card{padding:0;border-radius:14px;overflow:hidden}
#accountPanel .signup-invite-card>.signup-invite-banner{display:block;width:100%;height:110px;min-height:110px;max-height:110px;margin:0;border:0;border-radius:0;overflow:hidden}
#accountPanel .signup-invite-card>.signup-invite-details{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:18px;border-top:1px solid rgba(255,255,255,.22);border-bottom:0;padding:22px 20px;margin:0;min-width:0}
#accountPanel .signup-invite-details>.signup-invite-avatar{display:inline-grid;width:76px;height:76px;margin:0;justify-self:center;align-self:center;transform:none}
#accountPanel .signup-invite-details>div{min-width:0;text-align:left}
#accountPanel .signup-invite-details .eyebrow{display:block;font-size:9px;line-height:1.5;letter-spacing:.12em;margin:0 0 8px;color:#aaa}
#accountPanel .signup-invite-name{margin:0;padding:0;gap:8px;align-items:center;font-size:20px;line-height:1.4}
#accountPanel .signup-invite-name :is(.owner-badge,.chapter-badge){flex-shrink:0;margin:0}
@media(max-width:600px){
 #accountPanel .signup-invite-card>.signup-invite-banner{height:94px;min-height:94px;max-height:94px}
 #accountPanel .signup-invite-card>.signup-invite-details{grid-template-columns:64px minmax(0,1fr);padding:20px 16px;gap:14px}
 #accountPanel .signup-invite-details>.signup-invite-avatar{width:64px;height:64px}
 #accountPanel .signup-invite-name{font-size:18px;gap:6px}
 #accountPanel .signup-invite-details .eyebrow{font-size:8px;letter-spacing:.1em}
}
/* Display leaderboard banners at their original brightness, independent of themes. */
body #leaderboard .rank-row>.rank-banner{opacity:1;filter:none;mix-blend-mode:normal}
body #leaderboard .rank-row>.rank-banner::after{content:none;display:none;background:none}
body #leaderboard .rank-row>.rank-banner>img{opacity:1;filter:none;mix-blend-mode:normal}
body #leaderboard .rank-row:has(.rank-banner img) :is(.rank-position,.rank-role,.rank-score,.rank-score b span){color:#eee!important;text-shadow:0 1px 3px #000,0 0 7px #000}
body #leaderboard .rank-row:has(.rank-banner img) .rank-name{text-shadow:0 1px 3px #000}

/* Profile theme flows vertically: primary above, accent below. Banners stay original. */
body .profile-themed{--profile-surface:linear-gradient(180deg,var(--profile-primary) 0%,var(--profile-primary) 28%,var(--profile-accent) 100%)}
body .profile-themed,
body #accountPanel .profile-summary.profile-themed,
body #members .member-card.profile-themed,
body #friends .friend-card.profile-themed,
body #leaderboard .rank-row.profile-themed,
body .public-profile-card.profile-themed,
body #accountPanel .signup-invite-card.profile-themed{background:var(--profile-surface)!important}
body .profile-themed :is(.member-card-content,.friend-card-content){background:transparent}
body .profile-themed .member-banner:not(:has(img)){background:transparent;border-color:#ffffff1a}
body .profile-themed :is(.profile-progress-caption,.public-profile-progress p,.celebration-role){color:var(--profile-lower-muted)!important}
body .profile-themed :is(.public-profile-progress h2,.profile-summary>h3){color:var(--profile-lower-ink)!important}
body #leaderboard .rank-row>.rank-banner:has(img){opacity:1;filter:none}
body #leaderboard .rank-row>.rank-banner::after{display:none;content:none}

/* The preview label is interface chrome, separate from the member's theme. */
#accountPanel .profile-summary .studio-preview-label{display:block;background:#000!important;color:#aaa!important;margin:0;border-radius:12px 12px 0 0;padding:16px 20px}
#accountPanel .studio-preview-label small{display:block;margin-top:7px;color:#888;font:400 11px/1.6 Manrope,Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:normal}
#accountPanel .studio-inline-preview .studio-preview-label{padding:14px 16px}

/* Leaderboard cards reserve separate rows for banners and ranking information. */
body #leaderboard #leaderboardList{display:grid;grid-template-columns:minmax(0,1fr);gap:52px;padding-top:36px}
body #leaderboard #leaderboardList>.rank-row,
body #leaderboard #leaderboardList>.rank-row.milestone-framed{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0!important;min-height:0;margin:0;border:1px solid #333;border-radius:14px;overflow:visible}
body #leaderboard .rank-row>.rank-banner,
body #leaderboard .rank-row.milestone-framed>.rank-banner{position:relative;inset:auto;z-index:auto;width:100%;height:140px;min-height:140px;max-height:140px;margin:0;opacity:1;border:0;border-bottom:1px solid #ffffff18;border-radius:13px 13px 0 0;overflow:hidden;flex:none}
body #leaderboard .rank-content{display:grid;grid-template-columns:42px minmax(0,1fr) 130px;align-items:center;gap:22px;padding:24px;min-width:0}
body #leaderboard .rank-position{position:static;grid-column:1;grid-row:1;font-size:19px;line-height:1.4;font-weight:500;text-align:center;min-width:0;align-self:center;color:var(--profile-ink,#ddd)!important;text-shadow:none!important}
body #leaderboard .rank-person{position:static;grid-column:2;grid-row:1;display:flex;align-items:center;gap:18px;min-width:0;width:100%;padding:0;margin:0;text-decoration:none}
body #leaderboard .rank-framed-avatar{--avatar-size:64px;width:64px;height:64px;flex:0 0 64px;margin:0}
body #leaderboard .rank-identity{min-width:0;flex:1}
body #leaderboard .rank-name{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:18px;line-height:1.5;letter-spacing:0;text-shadow:none!important}
body #leaderboard .rank-name :is(.metallic-name,.cryptic-name){max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal}
body #leaderboard .rank-name :is(.owner-badge,.chapter-badge){flex-shrink:0;margin:0}
body #leaderboard .rank-role{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:var(--profile-muted,#aaa)!important;text-shadow:none!important}
body #leaderboard .rank-score{position:static;grid-column:3;grid-row:1;min-width:0;width:100%;margin:0;padding:0;color:var(--profile-ink,#eee)!important;text-shadow:none!important}
body #leaderboard .rank-score b{font-size:23px;line-height:1.4;text-align:right;white-space:nowrap}
body #leaderboard .rank-score b span{font-size:12px;color:inherit!important;text-shadow:none!important}
body #leaderboard .rank-score progress{width:100%;height:5px;display:block;margin:10px 0 0;accent-color:#bbb;border:0;border-radius:5px;overflow:hidden}
body #leaderboard .rank-score progress::-webkit-progress-bar{background:#ffffff20}body #leaderboard .rank-score progress::-webkit-progress-value{background:#bcc8d0}
body #leaderboard .rank-score progress::-moz-progress-bar{background:#bcc8d0}
body #leaderboard .invite-score-label{display:block;font-size:10px;line-height:1.5;white-space:nowrap;text-align:right;margin-top:4px}
body #leaderboard .rank-row>.rank-friend-control{inset:14px 14px auto auto;width:44px;height:44px;margin:0;padding:0}
body #leaderboard .rank-row>.rank-move{position:static;display:flex;gap:8px;padding:0 24px 20px;margin:0;width:100%;justify-content:flex-end;box-sizing:border-box}
body #leaderboard .rank-admin-toolbar{flex-wrap:wrap;line-height:1.6;gap:12px}
@media(max-width:600px){
 body #leaderboard .rank-row>.rank-banner,body #leaderboard .rank-row.milestone-framed>.rank-banner{height:120px;min-height:120px;max-height:120px}
 body #leaderboard .rank-content{grid-template-columns:28px minmax(0,1fr);gap:16px 12px;padding:22px 16px}
 body #leaderboard .rank-person{gap:14px}
 body #leaderboard .rank-framed-avatar{--avatar-size:54px;width:54px;height:54px;flex-basis:54px}
 body #leaderboard .rank-name{font-size:16px;gap:6px}
 body #leaderboard .rank-position{font-size:17px;align-self:start;padding-top:16px}
 body #leaderboard .rank-score{grid-column:2;grid-row:2;border-top:1px solid #ffffff1a;padding-top:12px}
 body #leaderboard .rank-score b,body #leaderboard .invite-score-label{text-align:left}
 body #leaderboard .rank-score b{font-size:21px}
 body #leaderboard .rank-row>.rank-move{padding:0 16px 16px}
}
/* Profile avatars occupy their own row beneath banners at every breakpoint. */
#accountPanel .studio-preview .profile-framed-avatar{display:inline-grid;margin:24px 24px 18px;top:auto;transform:none;vertical-align:top}
body #publicProfile .public-profile-content{padding-top:28px}
body #publicProfile .public-profile-content>.profile-framed-avatar{display:inline-grid;margin:0 0 20px;top:auto;transform:none;vertical-align:top}
@media(max-width:600px){
 #accountPanel .studio-preview .profile-framed-avatar{margin:22px 20px 16px}
 body #publicProfile .public-profile-content{padding-top:24px}
 body #publicProfile .public-profile-content>.profile-framed-avatar{margin-top:0;margin-bottom:18px}
}

/* A dedicated left rank rail, with banner and identity stacked on the right. */
body #leaderboard #leaderboardList>.rank-row,
body #leaderboard #leaderboardList>.rank-row.milestone-framed{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:0;row-gap:0;align-items:stretch}
body #leaderboard .rank-row>.rank-position{grid-column:1;grid-row:1 / 4;display:flex;align-items:center;justify-content:center;align-self:stretch;margin:0;padding:0 8px;border-right:1px solid #ffffff1a;border-radius:13px 0 0 13px;background:#0006;color:#ddd!important;font-size:22px;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
body #leaderboard .rank-row>.rank-banner,
body #leaderboard .rank-row.milestone-framed>.rank-banner{grid-column:2;grid-row:1;border-radius:0 13px 0 0;height:140px;min-height:140px;max-height:140px}
body #leaderboard .rank-row>.rank-content{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr) 130px;gap:20px;padding:24px}
body #leaderboard .rank-content>.rank-person{grid-column:1;grid-row:1;align-items:center}
body #leaderboard .rank-content>.rank-score{grid-column:2;grid-row:1}
body #leaderboard .rank-row>.rank-move{grid-column:2;grid-row:3}
@media(max-width:600px){
 body #leaderboard #leaderboardList>.rank-row,body #leaderboard #leaderboardList>.rank-row.milestone-framed{grid-template-columns:38px minmax(0,1fr)}
 body #leaderboard .rank-row>.rank-position{font-size:17px;padding:0 5px}
 body #leaderboard .rank-row>.rank-banner,body #leaderboard .rank-row.milestone-framed>.rank-banner{height:112px;min-height:112px;max-height:112px}
 body #leaderboard .rank-row>.rank-content{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 14px 18px}
 body #leaderboard .rank-content>.rank-person{grid-column:1;grid-row:1;gap:12px}
 body #leaderboard .rank-content>.rank-score{grid-column:1;grid-row:2}
 body #leaderboard .rank-framed-avatar{--avatar-size:50px;width:50px;height:50px;flex-basis:50px}
 body #leaderboard .rank-name{font-size:15px;line-height:1.5}
 body #leaderboard .rank-row>.rank-move{padding:0 14px 16px}
}

body:not(.auth-gated)>.ethereum-shard-canvas,
body.auth-gated:not([data-auth-screen=login]):not([data-auth-screen=signup])>.ethereum-shard-canvas{display:none!important}

/* Neutral leaderboard frames by default; milestone decorations carry the effects. */
body #leaderboard #leaderboardList>.rank-row.profile-default-colors,
body #leaderboard #leaderboardList>.rank-row:not(.profile-themed){border:1px solid #4b4b4b!important;box-shadow:0 5px 18px #0003,inset 0 1px 0 #ffffff05}
body #leaderboard .rank-row.profile-default-colors>.rank-position{border-right-color:#333;background:#0a0a0a}
body #leaderboard .rank-row.profile-default-colors>.rank-banner{border-bottom-color:#333}
body #leaderboard #leaderboardList>.rank-row:not(.milestone-framed){animation:none}
body #leaderboard .rank-row:not(.milestone-framed)>.milestone-decoration{display:none}

/* Mutual profiles use a fixed header and a separately scrolling, aligned list. */
body dialog.mutual-dialog{position:fixed;inset:0;width:min(420px,calc(100vw - 28px));max-width:420px;max-height:calc(100dvh - 40px);height:auto;margin:auto;padding:0;border:1px solid #383838;border-radius:16px;background:#090909;color:#ddd;overflow:hidden;box-shadow:0 24px 80px #0009}
body dialog.mutual-dialog[open]{display:flex;flex-direction:column}
body .mutual-dialog .mutual-dialog-header{position:static;display:flex;align-items:center;justify-content:space-between;flex:none;gap:16px;width:100%;height:auto;min-height:82px;margin:0;padding:20px;border:0;border-bottom:1px solid #292929;background:#101010;backdrop-filter:none}
body .mutual-dialog-header>div{min-width:0}
body .mutual-dialog-header h2{margin:0;font:500 18px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.02em;color:#eee}
body .mutual-dialog-header .mutual-dialog-count{margin:5px 0 0;font:400 11px/1.5 Manrope,Arial,sans-serif;color:#888}
body .mutual-dialog .mutual-close{position:static;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;margin:0;padding:0;border:1px solid #333;border-radius:9px;background:#171717;color:#bbb;transform:none}
body .mutual-dialog .mutual-close svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
body .mutual-dialog .mutual-dialog-list{display:flex;flex-direction:column;gap:0;padding:10px 14px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#444 transparent}
body .mutual-dialog .mutual-person{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:16px;min-height:82px;margin:0;padding:14px 8px;border-radius:8px;min-width:0;border-bottom:1px solid #ffffff0b}
body .mutual-dialog .mutual-person:last-child{border-bottom:0}
body .mutual-dialog .mutual-avatar{--avatar-size:48px;display:inline-grid;width:48px;height:48px;margin:0;transform:none;justify-self:center}
body .mutual-dialog .mutual-person-name{display:block;min-width:0;font:500 14px/1.5 Manrope,Arial,sans-serif;overflow-wrap:anywhere}
body .mutual-dialog .mutual-person-name :is(.metallic-name,.cryptic-name){max-width:100%;white-space:normal;overflow-wrap:anywhere}
body .mutual-dialog .mutual-person-chevron{width:18px;height:18px;fill:none;stroke:#777;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body .mutual-dialog .mutual-person:hover{background:#ffffff08}
body .mutual-dialog .mutual-empty{margin:0;padding:24px 12px;text-align:center;font-size:13px;color:#aaa}
@media(max-width:380px){body .mutual-dialog .mutual-dialog-header{padding:16px}body .mutual-dialog .mutual-dialog-list{padding:8px 10px}body .mutual-dialog .mutual-person{gap:12px;grid-template-columns:48px minmax(0,1fr) 16px}}

/* Bios occupy a distinct, readable section beneath profile information. */
body .profile-bio-section{display:block;min-width:0;margin:24px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.12);text-align:left}
body .profile-bio-section .profile-bio-label{display:block;font-size:10px;line-height:1.4;letter-spacing:.14em;font-weight:600;color:var(--profile-muted,#999);margin:0 0 10px}
body .profile-bio-section :is(.public-profile-bio,.profile-summary-bio){margin:0!important;padding:0!important;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;max-width:none}
body .studio-preview > .profile-bio-section{margin:24px 24px 0;padding:20px 0 24px}
@media(max-width:600px){body .profile-bio-section{margin-top:20px;padding-top:18px}body .studio-preview > .profile-bio-section{margin:20px 20px 0;padding:18px 0 20px}}

/* About me: a dedicated bottom panel, aligned with the profile's content. */
body .profile-bio-section{box-sizing:border-box;padding:20px 22px;margin:24px 0 0;border:1px solid rgba(160,160,160,.22);border-radius:12px;background:rgba(120,120,120,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
body .profile-bio-section .profile-bio-label{font-size:10px;letter-spacing:.12em;line-height:1.5;margin-bottom:12px;color:var(--profile-lower-muted,#a3a3a3)}
body .profile-themed .profile-bio-section :is(.public-profile-bio,.profile-summary-bio){color:var(--profile-lower-ink,#ddd)!important;font-size:14px;line-height:1.8;letter-spacing:normal;text-wrap:pretty;word-break:normal;overflow-wrap:anywhere}
body #accountPanel .profile-studio>.profile-summary>.profile-bio-section{margin:22px 24px 24px;padding:18px 20px}
body .studio-preview > .profile-bio-section{margin:22px 24px 24px;padding:18px 20px}
body #publicProfile .profile-bio-section{margin-top:24px}
@media(max-width:600px){body .profile-bio-section{padding:18px;margin-top:20px;border-radius:10px}body #accountPanel .profile-studio>.profile-summary>.profile-bio-section,body .studio-preview>.profile-bio-section{margin:20px;padding:18px}body #publicProfile .profile-bio-section{margin-top:20px}}

/* Member-list bios use the same bottom layout, independent of theme gradient. */
body #members .member-card>.member-card-footer{align-self:stretch;width:100%;min-width:0;margin-top:auto;padding-top:22px}
body #members .member-card-footer>.small{margin:0;padding:16px 0 0;border-color:rgba(150,150,150,.35);color:var(--profile-lower-ink,#ddd)!important}
body #members .member-card-footer>.profile-bio-section{width:100%;margin:16px 0 0;padding:16px 18px;border-radius:10px}
body .profile-bio-section{background:var(--profile-accent,#080808);color:var(--profile-lower-ink,#eee)}
body #members .member-card .member-card-bio>p{margin:0;padding:0;color:var(--profile-lower-ink,#eee)!important;font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
body .profile-bio-section .profile-bio-label{color:var(--profile-lower-muted,#bcbcbc)!important}
body #members .member-order-controls{align-self:stretch;width:100%}
@media(max-width:600px){body #members .member-card-footer>.profile-bio-section{padding:15px 16px}}

/* Responsive profile sizing shared by Android, iPhone and tablet browsers. */
#accountPanel,#accountPanel .profile-studio,#accountPanel .studio-editor,#accountPanel .studio-panel{min-width:0;max-width:100%;box-sizing:border-box}
#accountPanel .studio-invite:has(>.ethereum-loading:only-child){display:grid;place-items:center;min-height:112px;padding:20px}
#accountPanel .studio-invite>.ethereum-loading:only-child{margin:0}
@media(max-width:850px){
 #accountPanel .profile-studio{width:100%;grid-template-columns:minmax(0,1fr)}
 #accountPanel .profile-studio>*{box-sizing:border-box;min-width:0;max-width:100%}
 #accountPanel .studio-panel input,#accountPanel .studio-panel textarea,#accountPanel .studio-panel select{box-sizing:border-box;min-width:0;max-width:100%;font-size:16px}
 #accountPanel .studio-invite .invite-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
 #accountPanel .studio-invite .invite-link-row input{width:100%;min-width:0;box-sizing:border-box;font-size:13px}
 #accountPanel .studio-invite .invite-link-row button{margin:0;min-height:44px;white-space:nowrap}
 #accountPanel .invite-stats{display:flex;flex-wrap:wrap;gap:12px 20px}
 #accountPanel .studio-toolbar h3,#accountPanel .studio-option-label{min-width:0;overflow-wrap:anywhere}
 #accountPanel .studio-preview .profile-display-name{display:flex;flex-wrap:wrap;align-items:center}
 #accountPanel .studio-panel input[type=file]{width:100%;overflow:hidden}
}
@media(max-width:380px){
 #accountPanel .studio-editor{padding:18px 12px}
 #accountPanel .studio-option{gap:9px}
 #accountPanel .studio-invite .invite-link-row{grid-template-columns:minmax(0,1fr)}
 #accountPanel .studio-invite .invite-link-row button{width:100%}
 #accountPanel .profile-theme-presets button{gap:7px;min-width:0}
}

/* Compact profile overview on phone screens; retain the full desktop layout. */
@media(max-width:600px){
 body #accountPanel .profile-studio{gap:16px}
 body #accountPanel .profile-studio>.profile-summary{margin-top:12px;padding:0 0 16px;border-radius:14px}
 body #accountPanel .profile-studio>.profile-summary.profile-default-colors{border-color:#303030}
 body #accountPanel .profile-summary .studio-preview-label{padding:12px 16px;font-size:9px;line-height:1.4;letter-spacing:.1em}
 body #accountPanel .studio-preview-label small{font-size:10px;line-height:1.5;margin-top:5px}
 body #accountPanel .studio-preview .member-banner{height:100px;min-height:100px;max-height:100px}
 body #accountPanel .studio-preview .member-banner:has(>.banner-empty-mark){height:64px;min-height:64px;max-height:64px}
 body #accountPanel .studio-preview .profile-framed-avatar{--avatar-size:64px;width:64px;height:64px;margin:18px 18px 12px;display:inline-grid}
 body #accountPanel .studio-preview .profile-display-name{margin:0 18px 12px;font-size:20px;line-height:1.35;gap:6px}
 body #accountPanel .studio-preview .custom-badges{margin:0 18px 10px}
 body #accountPanel .profile-studio>.profile-summary>:is(.eyebrow,h3,progress,.profile-progress-caption,.membership-pending,#signOut){margin-left:18px;margin-right:18px;max-width:calc(100% - 36px)}
 body #accountPanel .profile-studio>.profile-summary>.eyebrow{display:block;margin-top:14px;font-size:9px;line-height:1.4;letter-spacing:.12em}
 body #accountPanel .profile-studio>.profile-summary>h3{font-size:20px;line-height:1.35;margin-top:8px;margin-bottom:8px}
 body #accountPanel .profile-studio>.profile-summary>progress{display:block;width:calc(100% - 36px);height:5px;margin-top:10px;margin-bottom:8px}
 body #accountPanel .profile-studio>.profile-summary>.profile-progress-caption{font-size:11px;line-height:1.5;margin-top:0;margin-bottom:12px}
 body #accountPanel .profile-studio #signOut{min-height:40px;margin-top:4px;margin-bottom:0;padding:8px 14px}
 body #accountPanel .profile-studio>.profile-summary>.profile-bio-section{margin:14px 18px;padding:14px}
 body #accountPanel .studio-editor{margin-top:0}
 body #accountPanel .studio-option{min-height:64px;padding:12px 0}
}

#chapters .chapter:disabled{opacity:.5;cursor:not-allowed}#chapters .chapter-lock{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}#chapterAnswerStatus{font-size:12px;line-height:1.6;color:#aaa;margin:20px 0 12px}#lesson #complete:disabled{opacity:.4;cursor:not-allowed}

.rank-admin-toolbar>button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px}.rank-admin-toolbar>button>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Two decorative pixel birds fly in the sky beneath the home navigation. */
#home .home-sky-birds{position:absolute;inset:0 0 auto;height:clamp(100px,18svh,180px);overflow:hidden;pointer-events:none;z-index:2;contain:paint}
.home-sky-birds .sky-bird{position:absolute;left:0;top:28px;width:clamp(20px,2.3vw,32px);height:24px;color:#a8a8a8;opacity:.6;animation:sky-bird-flight 26s linear infinite;will-change:transform}
.home-sky-birds .sky-bird-1{top:64px;width:clamp(16px,1.8vw,26px);opacity:.4;animation-duration:32s;animation-delay:-16s}
.home-sky-birds .sky-bird-0{animation-delay:-6s}
.home-sky-birds svg{display:block;width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}
.home-sky-birds .bird-wings{transform-box:fill-box;transform-origin:center bottom;animation:sky-bird-flap .8s steps(2,end) infinite}
@keyframes sky-bird-flight{0%{transform:translateX(-40px) translateY(8px)}25%{transform:translateX(25vw) translateY(-6px)}50%{transform:translateX(50vw) translateY(5px)}75%{transform:translateX(75vw) translateY(-3px)}100%{transform:translateX(calc(100vw + 40px)) translateY(8px)}}
@keyframes sky-bird-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.45)}}
body:not(.home-view) .home-sky-birds{display:none}
@media(max-width:600px){#home .home-sky-birds{height:100px}.home-sky-birds .sky-bird{top:20px}.home-sky-birds .sky-bird-1{top:50px}}
@media(prefers-reduced-motion:reduce){.home-sky-birds .sky-bird,.home-sky-birds .bird-wings{animation:none}.home-sky-birds .sky-bird-0{left:28%}.home-sky-birds .sky-bird-1{left:67%}}

/* A viewport-independent star layer keeps the sky visible on iOS and Android. */
.mobile-home-stars{display:none;pointer-events:none}
@media(max-width:850px){
 body.home-view #home .mobile-home-stars{display:block;position:absolute;inset:0 0 22%;z-index:1;overflow:hidden;pointer-events:none;contain:paint}
 .mobile-home-stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:#c7c7c7;opacity:.24;box-shadow:0 0 3px #fff2;animation:home-star-glimmer 7s ease-in-out infinite;animation-delay:var(--delay)}
}
@keyframes home-star-glimmer{0%,100%{opacity:.14}50%{opacity:.48}}
@media(prefers-reduced-motion:reduce){.mobile-home-stars i{animation:none;opacity:.28}}

/* Pixel-bird introduction to the learning path. */
body dialog.academy-welcome{box-sizing:border-box;position:fixed;inset:0;width:min(520px,calc(100% - 28px));max-width:520px;max-height:calc(100dvh - 32px);margin:auto;padding:36px 24px 24px;border:1px solid #383838;border-radius:24px;background:#080808;color:#ddd;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #000b}
body dialog.academy-welcome[open]{display:flex;flex-direction:column;align-items:center;gap:18px;animation:welcome-appear .35s ease-out}
.academy-welcome::backdrop{background:#000b;backdrop-filter:blur(8px)}
body .academy-welcome .welcome-close{position:absolute;inset:12px 12px auto auto;width:36px;height:36px;min-height:36px;margin:0;padding:8px;display:grid;place-items:center;background:#141414;border:1px solid #333;border-radius:10px;color:#aaa}
.welcome-close svg,.welcome-start svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.welcome-bird{width:76px;height:56px;color:#d0d0d0;flex-shrink:0;animation:welcome-bird-hover 3s ease-in-out infinite;filter:drop-shadow(0 8px 16px #ffffff12)}
.welcome-bird svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}
.welcome-bird .bird-wings{transform-box:fill-box;transform-origin:center bottom;animation:sky-bird-flap .85s steps(2,end) infinite}
.welcome-bubble{position:relative;box-sizing:border-box;width:100%;padding:24px;border:1px solid #3a3a3a;border-radius:20px;background:linear-gradient(145deg,#1c1c1c,#101010)}
.welcome-bubble:before{content:'';position:absolute;top:-7px;left:calc(50% - 7px);width:12px;height:12px;background:#1a1a1a;border-top:1px solid #3a3a3a;border-left:1px solid #3a3a3a;transform:rotate(45deg)}
.welcome-eyebrow{display:block;color:#888;font-size:9px;letter-spacing:.15em;line-height:1.5}
body .academy-welcome h2{margin:12px 0 18px;font-size:clamp(22px,5vw,29px);line-height:1.25;letter-spacing:-.04em;color:#eee}
body .academy-welcome p{margin:12px 0;font-size:13px;line-height:1.8;color:#aaa}
.welcome-milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:20px;margin-top:20px;border-top:1px solid #333}
.welcome-milestones>div{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0}.welcome-milestones>div>span:not(.chapter-badge){font-size:11px;color:#ccc}.welcome-milestones small{font-size:9px;color:#888;white-space:nowrap}
body .academy-welcome .welcome-start{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 16px;border:1px solid #ddd;border-radius:12px;background:#e2e2e2;color:#111;font-size:13px;margin:0;cursor:pointer}
.academy-welcome button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes welcome-bird-hover{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@keyframes welcome-appear{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:380px){body dialog.academy-welcome{padding:36px 16px 16px;gap:14px}.welcome-bubble{padding:18px}.welcome-milestones{gap:4px}}
@media(prefers-reduced-motion:reduce){body dialog.academy-welcome[open],.welcome-bird,.welcome-bird .bird-wings{animation:none}}

/* Birds replace the auth-page cat duel above the card. */
body #accountPanel .auth-layout>.auth-sky-birds{position:absolute;top:-56px;left:0;right:0;height:52px;overflow:hidden;pointer-events:none;z-index:4;contain:paint}
.auth-sky-birds .sky-bird{position:absolute;left:-36px;top:5px;width:30px;height:22px;opacity:.65;color:#bbb;animation:auth-bird-flight 20s linear infinite;animation-delay:-4s}
.auth-sky-birds .sky-bird-1{width:23px;top:27px;opacity:.45;animation-duration:26s;animation-delay:-15s}
.auth-sky-birds svg{width:100%;height:100%;display:block;fill:currentColor;shape-rendering:crispEdges}
.auth-sky-birds .bird-wings{transform-box:fill-box;transform-origin:center bottom;animation:sky-bird-flap .85s steps(2,end) infinite}
@keyframes auth-bird-flight{from{left:-36px;transform:translateY(2px)}50%{transform:translateY(-3px)}to{left:100%;transform:translateY(2px)}}
body:not(.auth-gated) .auth-sky-birds,body:not([data-auth-screen=login]):not([data-auth-screen=signup]) .auth-sky-birds{display:none}
@media(max-width:600px){.auth-sky-birds .sky-bird{width:24px}.auth-sky-birds .sky-bird-1{width:19px}}
@media(prefers-reduced-motion:reduce){.auth-sky-birds .sky-bird,.auth-sky-birds .bird-wings{animation:none}.auth-sky-birds .sky-bird-0{left:25%}.auth-sky-birds .sky-bird-1{left:70%}}

/* A single dancing pixel scholar replaces the home duel. */
body #home .scholar-cat{position:absolute;left:50%;bottom:var(--duel-ground,12%);transform:translateX(-50%);width:clamp(96px,11vw,138px);height:auto;aspect-ratio:80/88;display:block;padding:0;margin:0;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:3;overflow:visible}
.scholar-cat>svg{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #0008)}
.scholar-cat-shadow{position:absolute;bottom:0;left:9%;width:82%;height:8%;border-radius:50%;background:#0009;border-bottom:1px solid #aaa3}
.scholar-dancer{transform-box:fill-box;transform-origin:center bottom;animation:scholar-dance 1.3s steps(4,end) infinite}
.scholar-arm{transform-box:fill-box;transform-origin:center top;animation:scholar-wave .65s steps(2,end) infinite}.scholar-arm.right{animation-delay:-.325s}
.scholar-tail{transform-box:fill-box;transform-origin:left bottom;animation:scholar-tail-wag 1.3s steps(3,end) infinite}
.scholar-cat.is-posing .scholar-dancer{animation:none;transform:rotate(-7deg) translateY(-3px)}
.scholar-cat.is-posing .scholar-arm.left{animation:none;transform:rotate(155deg)}
.scholar-cat.is-posing .scholar-arm.right{animation:none;transform:rotate(-28deg)}
.scholar-cat.is-posing .scholar-tail{animation:none;transform:rotate(-15deg)}
.scholar-cat:focus-visible{outline:1px solid #bbb;outline-offset:10px;border-radius:12px}
@keyframes scholar-dance{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(0) translateY(-5px)}50%{transform:rotate(5deg) translateY(0)}75%{transform:rotate(0) translateY(-3px)}}
@keyframes scholar-wave{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-35deg)}}
@keyframes scholar-tail-wag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@media(max-width:600px){body #home .scholar-cat{width:clamp(88px,25vw,112px)}}
@media(prefers-reduced-motion:reduce){.scholar-dancer,.scholar-arm,.scholar-tail{animation:none}}

/* Keep branding against the same left inset at every desktop width. */
@media(min-width:851px){
 body:not(.auth-gated)>header{box-sizing:border-box;width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
 body:not(.auth-gated)>header>.brand-group{display:flex;align-items:center;justify-content:flex-start;gap:18px;margin:0;flex-shrink:0}
}
@media(max-width:850px){
 body:not(.auth-gated)>header>.brand-group{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-width:0}
 body:not(.auth-gated)>header .owner-line{display:block;margin:0;padding:0;font-size:9px;line-height:1.5;white-space:nowrap;color:#999}
 body:not(.auth-gated)>header .owner-line>a{display:inline-flex;align-items:center;min-height:36px;padding:4px 0;color:#999;text-decoration:none}
}

/* Keep the scholar in the scenery's low-contrast, dithered pixel vocabulary. */
body #home .scholar-cat{width:120px;opacity:.88}
.scholar-cat>svg{filter:none;image-rendering:pixelated;shape-rendering:crispEdges}
.scholar-cat-shadow{left:15%;width:70%;height:4px;border:0;border-radius:0;background:#080808;box-shadow:-6px 2px #1a1a1a,6px 2px #1a1a1a}
@keyframes scholar-dance{0%,100%{transform:translate(-2px,0)}25%{transform:translate(0,-4px)}50%{transform:translate(2px,0)}75%{transform:translate(0,-2px)}}
@keyframes scholar-wave{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px)}}
@keyframes scholar-tail-wag{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
.scholar-cat.is-posing .scholar-dancer{transform:translate(0,-4px)}
.scholar-cat.is-posing .scholar-arm.left{transform:translate(-2px,-12px)}
.scholar-cat.is-posing .scholar-arm.right{transform:translate(2px,-4px)}
.scholar-cat.is-posing .scholar-tail{transform:translate(2px,-4px)}
@media(max-width:600px){body #home .scholar-cat{width:96px}}

/* Feet stay planted; only the upper body and paws dance. */
body #home .scholar-cat{margin-bottom:-6px}
.scholar-cat .scholar-feet{transform:none;animation:none}
.scholar-cat .scholar-dancer{transform-box:view-box;transform-origin:40px 76px;animation:scholar-ground-dance 1.6s steps(4,end) infinite}
.scholar-cat .scholar-arm{animation:scholar-ground-paws .8s steps(2,end) infinite}.scholar-cat .scholar-arm.right{animation-delay:-.4s}
.scholar-cat .scholar-tail{animation:scholar-ground-tail 1.6s steps(3,end) infinite}
.scholar-cat.is-posing .scholar-dancer{animation:none;transform:skewX(-3deg)}
.scholar-cat.is-posing .scholar-arm.left{animation:none;transform:translate(-2px,-8px)}
.scholar-cat.is-posing .scholar-arm.right{animation:none;transform:translate(2px,-2px)}
.scholar-cat.is-posing .scholar-tail{animation:none;transform:translateX(2px)}
.scholar-cat .scholar-cat-shadow{bottom:5%;height:3px;background:#070707}
@keyframes scholar-ground-dance{0%,100%{transform:skewX(-3deg)}25%{transform:skewX(0)}50%{transform:skewX(3deg)}75%{transform:skewX(0)}}
@keyframes scholar-ground-paws{0%,100%{transform:translateX(-1px)}50%{transform:translate(2px,-3px)}}
@keyframes scholar-ground-tail{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.scholar-cat .scholar-dancer,.scholar-cat .scholar-arm,.scholar-cat .scholar-tail{animation:none}}

body .academy-welcome .welcome-start{width:56px;height:56px;min-height:56px;padding:0;border-radius:16px;align-self:center;border:1px solid #555;background:linear-gradient(145deg,#272727,#111);color:#dedede;box-shadow:inset 0 1px 0 #ffffff0b;transition:border-color .2s,background .2s}
.academy-welcome .welcome-start>svg{width:23px;height:23px;animation:welcome-arrow-nudge 2.5s ease-in-out infinite}
body .academy-welcome .welcome-start:hover{border-color:#aaa;background:#262626}
@keyframes welcome-arrow-nudge{0%,100%{transform:translateX(-2px);opacity:.65}50%{transform:translateX(3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.academy-welcome .welcome-start>svg{animation:none}}

/* Invite totals keep the count and caption aligned within their own row. */
body #leaderboard .rank-invites .rank-content{grid-template-columns:minmax(0,1fr)}
body #leaderboard .rank-invites .rank-content>.rank-person{grid-column:1;grid-row:1}
body #leaderboard .rank-invites .rank-content>.rank-score{grid-column:1;grid-row:2;display:flex;align-items:baseline;justify-content:flex-start;gap:9px;text-align:left;width:100%;min-width:0;margin:0;padding:14px 0 0;border-top:1px solid #ffffff18}
body #leaderboard .rank-invites .rank-score>b{display:block;flex-shrink:0;font-size:24px;line-height:1.25;text-align:left;margin:0;font-variant-numeric:tabular-nums}
body #leaderboard .rank-invites .invite-score-label{display:block;width:auto;max-width:none;margin:0;padding:0;font-size:11px;line-height:1.5;white-space:nowrap;text-align:left;letter-spacing:0}
@media(max-width:600px){body #leaderboard .rank-invites .rank-content{gap:16px}body #leaderboard .rank-invites .rank-score>b{font-size:22px}}

/* Keep collection labels on one line at every viewport width. */
#accountPanel .frame-options>button>span:last-child{display:block;width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:clamp(9px,1.6vw,12px);line-height:1.5}
#accountPanel .studio-panel .frame-featured strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.frame-categories button{white-space:nowrap;overflow-wrap:normal}

.frame-picker .frame-categories button[data-category="Premium"]{grid-column:1/-1;border-color:#7b8392;background:linear-gradient(110deg,#16181e,#262a33,#16181e);color:#e5e8ee;letter-spacing:.08em}