/* All frame treatments are confined to the central hub and its thumbnails. */
.profile-hub[data-dial-style=solid]{border:6px solid color-mix(in srgb,var(--accent) 40%,#29313d);box-shadow:inset 0 0 0 2px #ffffff40,0 8px 28px #0008}
.profile-hub[data-dial-style=solid] .dial-bezel{inset:0;background:none;border:2px solid #ffffff30;mask:none;-webkit-mask:none}
.profile-hub[data-dial-style=solid] .dial-bezel::after{inset:3px auto auto calc(50% - 2px);width:4px;height:8px;background:var(--accent);border-radius:2px}
.profile-hub[data-dial-style=glass]{border:6px solid #dcecff65;box-shadow:0 0 0 1px #ffffff80,0 12px 35px #0007,inset 0 0 12px #e0efff60}
.profile-hub[data-dial-style=glass] .dial-bezel{inset:2px;border:1px solid #ffffff90;background:linear-gradient(135deg,#ffffff50,transparent 45%,#ffffff15);mask:none;-webkit-mask:none}
.profile-hub[data-dial-style=glass] .dial-bezel::after{display:none}
.profile-hub[data-dial-style=outline]{border:1px solid #d9e1ed;box-shadow:0 0 0 5px #08090d,0 0 0 6px #8b97a666}
.profile-hub[data-dial-style=outline] .dial-bezel{inset:6px;border:1px solid #ffffff25;background:none;mask:none;-webkit-mask:none}
.profile-hub[data-dial-style=outline] .dial-bezel::after{inset:1px auto auto calc(50% - 2px);width:4px;height:4px;background:var(--accent)}
.profile-hub[data-dial-style=glow]{border:2px solid var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent),0 0 65px color-mix(in srgb,var(--accent) 30%,transparent)}
.profile-hub[data-dial-style=glow] .dial-bezel{background:repeating-conic-gradient(var(--accent) 0deg 2deg,transparent 2deg 30deg);filter:drop-shadow(0 0 3px var(--accent))}
.expanded .profile-hub[data-dial-style=glow]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 0 14px color-mix(in srgb,var(--accent) 25%,transparent)}
.profile-hub[data-dial-style]:focus-visible{outline:3px solid var(--accent);outline-offset:8px}
/* Dial text never targets the satellite container or page text. */
.profile-hub[data-type] #profile-name,.profile-hub[data-type]:not([data-type-name-only]) .hub-action{font-family:var(--type-font);overflow-wrap:anywhere}
.profile-hub[data-type-color] #profile-name,.profile-hub[data-type-color]:not([data-type-name-only]) .hub-action,.profile-hub[data-type-color]:not([data-type-name-only]) .hub-action span{color:var(--type-color);text-shadow:none}
.profile-hub[data-type-bold] #profile-name,.profile-hub[data-type-bold]:not([data-type-name-only]) .hub-action{font-weight:700}
.profile-hub[data-type-italic] #profile-name,.profile-hub[data-type-italic]:not([data-type-name-only]) .hub-action{font-style:italic}
.profile-hub[data-type-underline] #profile-name,.profile-hub[data-type-underline]:not([data-type-name-only]) .hub-action{text-decoration:underline;text-underline-offset:.15em}
.profile-hub[data-type] #profile-name{font-size:calc(clamp(17px,2.5vw,22px)*var(--type-size));line-height:1.2}
.profile-hub[data-type]:not([data-type-name-only]) .hub-action{font-size:calc(9px*var(--type-size))}
@media(max-width:600px){.profile-hub[data-type] #profile-name{font-size:calc(17px*var(--type-size))}.profile-hub[data-type]:not([data-type-name-only]) .hub-action{font-size:calc(7px*var(--type-size))}}
@media(max-width:380px){.profile-hub[data-type] #profile-name{font-size:calc(15px*var(--type-size))}}
.dial-style-settings{margin:24px 0;padding:16px;border:1px solid #434663;border-radius:15px;background:#161822}
.dial-style-settings h2{font-size:18px;margin:4px 0 8px}
.dial-style-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.dial-style-choice{min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;background:#0d1015;border:1px solid #414959;border-radius:12px}
.dial-style-choice[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#252b38}
.dial-style-choice .dial-thumbnail{display:block;position:relative;left:auto;top:auto;transform:none;width:68px;height:68px;flex-shrink:0;pointer-events:none}
.dial-thumbnail-name{position:absolute;left:0;right:0;bottom:15%;font:700 16px 'DM Sans',sans-serif;color:#f5f6f8}
.dial-style-label{font-size:13px;font-weight:700;margin-top:6px}
.dial-style-description{font-size:10px;line-height:1.4;color:#aeb6c5;max-width:110px}
.dial-thumbnail .dial-bezel{animation:none!important}
@media(max-width:480px){.dial-style-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){body{min-width:0}}