.profile-viewer { --profile-accent:#f2eddf; color:#f3f0e9; background:#161b1b; border:1px solid rgba(239,234,221,.19); padding:16px; max-width:500px; }
.profile-viewer__stage { position:relative; min-height:300px; overflow:hidden; background:radial-gradient(circle at 52% 44%,#28302f 0, #161b1b 66%); }
.profile-viewer__stage::before { content:""; position:absolute; inset:18px; pointer-events:none; border:1px solid rgba(255,255,255,.06); }
.profile-viewer canvas { display:block; width:100%; height:330px; touch-action:pan-y; cursor:grab; outline:none; }
.profile-viewer canvas:active { cursor:grabbing; }
.profile-viewer canvas:focus-visible { outline:2px solid #dea987; outline-offset:-4px; }
.profile-viewer__fallback { margin:0; padding:118px 30px; color:#d9d7cf; font-size:14px; line-height:1.5; text-align:center; }
.profile-viewer__fallback img { display:block; width:min(100%,300px); height:auto; margin:0 auto 14px; }
.profile-viewer--ready .profile-viewer__fallback { display:none; }
.profile-viewer__controls { display:none; flex-wrap:wrap; align-items:center; gap:8px; padding-top:13px; }
.profile-viewer--ready .profile-viewer__controls { display:flex; }
.profile-viewer button { min-height:36px; padding:7px 10px; color:#f3f0e9; background:transparent; border:1px solid rgba(239,234,221,.35); font:600 12px/1 inherit; cursor:pointer; }
.profile-viewer button:hover,.profile-viewer button[aria-pressed="true"] { color:#151a19; background:var(--profile-accent); border-color:var(--profile-accent); }
.profile-viewer button:focus-visible { outline:2px solid #dea987; outline-offset:2px; }
.profile-viewer__controls [role="group"] { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.profile-viewer__note { display:none; margin:12px 0 0; color:#abb0aa; font-size:11px; line-height:1.45; }
.profile-viewer--ready .profile-viewer__note { display:block; }
@media (max-width:600px) { .profile-viewer { max-width:none; padding:12px; } .profile-viewer__stage { min-height:255px; } .profile-viewer canvas { height:278px; } .profile-viewer__controls [role="group"] { width:100%; margin-left:0; } .profile-viewer__controls [role="group"] button { flex:1 1 30%; } }