body { --profile-font: 'Montserrat', Arial, sans-serif; --profile-bg: #f8f4ec; --profile-ink: #302630; --profile-muted: #746772; --profile-accent: #a63562; --profile-surface: #fffaf6; background: var(--profile-bg); color: var(--profile-ink); font-family: var(--profile-font); }
body[data-font="sans"] { --profile-font: Arial, Helvetica, sans-serif; }
body[data-font="serif"] { --profile-font: Georgia, 'Times New Roman', serif; }
body[data-font="mono"] { --profile-font: 'Courier New', monospace; }
.blob-green { background: var(--blob-0); } .blob-pink { background: var(--blob-1); } .blob-peach { background: var(--blob-2); }
.headline-text { font-family: var(--profile-font); fill: var(--profile-ink); }
body[data-custom-accent="true"] .headline-text { fill: var(--profile-accent); }
.subheadline { white-space: pre-line; overflow-wrap: anywhere; color: var(--profile-ink); }
.profile-avatar, .profile-name, .link-label, .link-number, .link-arrow { display: none; }
.link-visual { display: grid; place-items: center; position: relative; }
.custom-link-label { color: var(--profile-ink); font: 800 18px/1 var(--profile-font); }
.profile-brand { position: fixed; bottom: 22px; left: 28px; z-index: 100; color: var(--profile-muted); text-decoration: none; font: 700 13px/1.4 Arial, sans-serif; }
.profile-brand span { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; }
.social-icon { color: var(--profile-ink); }
.social-icon:focus-visible, .profile-brand:focus-visible, #play-toggle:focus-visible { outline-color: var(--profile-accent); }
body[data-background="glow"] .flower-wrapper, body[data-background="grid"] .flower-wrapper, body[data-background="plain"] .flower-wrapper { display: none; }
body[data-background="plain"] #blob-layer { display: none; }
body[data-background="grid"] #viewport-container::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--profile-ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--profile-ink) 7%, transparent) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 2; }
body[data-dark="true"] .subheadline, body[data-dark="true"] #music-player { background: color-mix(in srgb, var(--profile-surface) 80%, transparent); border-color: #ffffff22; }
body[data-dark="true"] .track-title, body[data-dark="true"] .track-artist { color: var(--profile-ink); }
body[data-dark="true"] .social-icon { background: color-mix(in srgb, var(--profile-surface) 70%, transparent); border-color: #ffffff30; }
body[data-dark="true"] .social-icon .icon-fallback { color: var(--profile-ink); }
body[data-dark="true"] .x-icon, body[data-dark="true"] .tiktok-icon { color: var(--profile-ink); }
body[data-button-style="solid"] .social-icon { background: var(--profile-surface); border-color: color-mix(in srgb, var(--profile-ink) 14%, transparent); backdrop-filter: none; }
body[data-button-style="outline"] .social-icon { background: transparent; border: 1px solid color-mix(in srgb, var(--profile-ink) 45%, transparent); box-shadow: none; backdrop-filter: none; }
body[data-design="orbit"].has-avatar .profile-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px; z-index: 2; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.profile-avatar { position: relative; }
.has-avatar .avatar-emoji { display: none; }

/* Postcard and Editorial use normal page flow, including all twelve links. */
body:not([data-design="orbit"]) { overflow: auto; position: relative; }
body:not([data-design="orbit"]) #viewport-container { position: relative; width: auto; height: auto; min-height: 100dvh; overflow: hidden; touch-action: pan-y; padding: 88px 28px 100px; box-sizing: border-box; }
body:not([data-design="orbit"]) #blob-layer { position: fixed; }
body:not([data-design="orbit"]) .flower-wrapper { position: fixed; opacity: .25; }
body:not([data-design="orbit"]) .flower-f2, body:not([data-design="orbit"]) .flower-f3, body:not([data-design="orbit"]) .flower-f4, body:not([data-design="orbit"]) .flower-f6, body:not([data-design="orbit"]) .flower-f7, body:not([data-design="orbit"]) .flower-f9, body:not([data-design="orbit"]) .flower-f10 { display: none; }
body:not([data-design="orbit"]) .text-container { position: relative; inset: auto; transform: none; width: auto; height: auto; isolation: auto; align-items: inherit; }
body:not([data-design="orbit"]) .circular-text-svg { display: none; }
body:not([data-design="orbit"]) h1 { position: static; width: auto; height: auto; padding: 0; margin: 15px 0 18px; clip: auto; overflow: visible; white-space: normal; border: 0; font: 800 clamp(32px, 4vw, 50px)/1.06 var(--profile-font); letter-spacing: -.055em; overflow-wrap: anywhere; }
body:not([data-design="orbit"]) .profile-avatar { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; background: color-mix(in srgb, var(--profile-surface) 75%, transparent); border: 1px solid color-mix(in srgb, var(--profile-ink) 12%, transparent); font-size: 46px; overflow: hidden; }
body:not([data-design="orbit"]) .profile-name { display: block; margin: 22px 0 0; color: var(--profile-accent); font: 700 12px/1.4 var(--profile-font); letter-spacing: .13em; text-transform: uppercase; overflow-wrap: anywhere; }
body:not([data-design="orbit"]) .subheadline { padding: 0; border: 0; box-shadow: none; backdrop-filter: none; background: none; max-width: 460px; font: 400 15px/1.7 var(--profile-font); letter-spacing: 0; color: var(--profile-muted); }
body:not([data-design="orbit"]) #wheel-wrapper { position: relative; inset: auto; width: auto; height: auto; border-radius: 0; transform: none !important; }
body:not([data-design="orbit"]) .social-icon { position: relative; inset: auto; width: auto; height: auto; transform: none !important; opacity: 1 !important; border-radius: 16px; font-size: 24px; box-sizing: border-box; transition: border-color .2s, background .2s; }
body:not([data-design="orbit"]) .social-icon:hover { border-color: var(--profile-accent); background: color-mix(in srgb, var(--profile-surface) 90%, transparent); }
body:not([data-design="orbit"]) .link-label { display: block; font: 700 15px/1.3 var(--profile-font); overflow-wrap: anywhere; min-width: 0; }
body:not([data-design="orbit"]) .link-arrow { display: block; font: 400 22px/1 Arial, sans-serif; color: var(--profile-accent); }
body:not([data-design="orbit"]) .icon-fallback { font-size: 14px; }
body:not([data-design="orbit"]) .profile-brand { position: absolute; }
body[data-design="postcard"] #viewport-container { display: flex; flex-direction: column; align-items: center; }
body[data-design="postcard"] .text-container { text-align: center; align-items: center; max-width: 540px; }
body[data-design="postcard"] #wheel-wrapper { width: min(100%, 460px); margin-top: 32px; }
body[data-design="postcard"] #icon-container { display: grid; gap: 12px; }
body[data-design="postcard"] .social-icon { display: grid; grid-template-columns: 34px 1fr 24px; text-align: left; gap: 14px; padding: 18px 20px; min-height: 65px; }
body[data-design="postcard"] .link-number { display: none; }
body[data-design="editorial"] #viewport-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 7vw; align-items: center; padding: 110px max(40px, calc((100vw - 1120px) / 2)) 110px; }
body[data-design="editorial"] .text-container { align-items: flex-start; }
body[data-design="editorial"] h1 { font-size: clamp(42px, 5.5vw, 76px); max-width: 540px; }
body[data-design="editorial"] .subheadline { text-align: left; }
body[data-design="editorial"] #icon-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body[data-design="editorial"] .social-icon { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; min-height: 155px; padding: 20px; gap: 18px 8px; align-items: start; justify-content: stretch; }
body[data-design="editorial"] .link-number { display: block; color: var(--profile-muted); font: 400 11px/1 Arial, sans-serif; }
body[data-design="editorial"] .link-visual { grid-column: 2; grid-row: 1; width: 30px; height: 28px; }
body[data-design="editorial"] .link-label { grid-column: 1 / 3; grid-row: 2; align-self: end; font-size: 17px; }
body[data-design="editorial"] .link-arrow { grid-column: 2; grid-row: 3; }
body[data-motion="gentle"] .social-icon { transition-duration: .4s; }
body[data-motion="off"] *, body[data-motion="off"] *::before { animation: none !important; transition: none !important; }
@media (max-width: 768px) {
  body[data-design="editorial"] #viewport-container { grid-template-columns: 1fr; gap: 34px; padding: 72px 24px 100px; }
  body[data-design="editorial"] h1 { font-size: 48px; }
  body[data-design="editorial"] .social-icon { min-height: 136px; padding: 17px; }
  body:not([data-design="orbit"]) #music-player { position: fixed; top: auto; bottom: 14px; right: 14px; }
  body:not([data-design="orbit"]) .profile-brand { left: 24px; bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* With motion disabled, Orbit presents every link without rotating or swiping. */
body.static-orbit { overflow: auto; position: relative; }
body.static-orbit #viewport-container { position: relative; height: auto; min-height: 100dvh; width: auto; touch-action: pan-y; padding: 40px 20px 110px; box-sizing: border-box; }
body.static-orbit .text-container { position: relative; inset: auto; transform: none; width: min(380px, 100%); height: 350px; margin: auto; }
body.static-orbit #wheel-wrapper { position: relative; inset: auto; width: min(600px, 100%); height: auto; border-radius: 0; margin: 24px auto 0; }
body.static-orbit #icon-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 12px; }
body.static-orbit .social-icon { position: relative; left: auto !important; top: auto !important; width: 76px; height: 76px; margin: auto; font-size: 32px; }
body.static-orbit .link-label { display: block; position: absolute; top: calc(100% + 7px); text-align: center; font: 600 10px/1.3 var(--profile-font); max-width: 95px; overflow-wrap: anywhere; color: var(--profile-ink); }
body.static-orbit .profile-brand { position: absolute; }
body:not([data-design="orbit"])[data-motion="full"] .profile-avatar { animation: profile-drift 7s ease-in-out infinite; }
body:not([data-design="orbit"]):not([data-motion="off"]) #icon-container { animation: profile-arrive .7s ease both; }
@keyframes profile-drift { 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes profile-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media(max-width:450px) { body.static-orbit #icon-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } }