*{box-sizing:border-box}body.ols-public{margin:0;background:var(--page-bg);color:var(--ink);font:15px/1.5 var(--page-font),Arial,sans-serif;min-height:100vh}.public-page{max-width:660px;min-height:100vh;margin:auto;position:relative;isolation:isolate}.wallpaper{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.profile-header{text-align:center;padding:42px 24px 26px;position:relative;overflow:hidden}.identity{position:relative;z-index:1}.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover}.profile-header h1{font:700 27px/1.2 var(--title-font),Arial,sans-serif;margin:18px 0 12px;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;gap:7px}.profile-header p{max-width:420px;margin:0 auto;white-space:normal;overflow-wrap:anywhere}.title-logo{max-width:210px;max-height:85px;object-fit:contain}.cover{width:100%;object-fit:cover}.hero{padding:0;min-height:370px;display:flex;align-items:end;justify-content:center}.hero .cover{position:absolute;inset:0;height:100%}.hero .identity{padding:100px 22px 35px;width:100%;background:linear-gradient(transparent,#000b);color:white}.banner{padding:0 0 26px}.banner .cover{height:195px;display:block}.banner .identity{padding:0 24px}.banner .avatar{margin-top:-48px;border:4px solid var(--ink)}.cutout{min-height:370px;padding-top:270px}.cutout .cover{position:absolute;inset:0;height:310px;object-fit:contain}.public-blocks{padding:4px 24px 26px;display:grid;gap:14px}.public-link{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 16px;border:1px solid transparent;border-radius:var(--round);background:var(--btn);color:var(--btn-ink);text-decoration:none;transition:transform .18s,box-shadow .18s;font-weight:500;overflow-wrap:anywhere}.public-link .link-label{flex:1;min-width:0;text-align:center}.public-link small{display:block;font-size:12px}.icon-slot{width:28px;height:28px;flex:none;display:grid;place-items:center}.icon-slot img,.icon-slot svg{width:24px;height:24px;object-fit:contain}.style-outline .public-link{border-color:var(--btn);background:transparent;color:var(--ink)}.style-glass .public-link{background:color-mix(in srgb,var(--btn) 30%,transparent);border-color:color-mix(in srgb,var(--btn) 55%,transparent);backdrop-filter:blur(14px)}.shadow-soft .public-link{box-shadow:0 6px 16px #0003}.shadow-strong .public-link{box-shadow:0 6px 0 #0005}.public-link:hover{filter:brightness(1.06)}.public-link:focus-visible,button:focus-visible{outline:3px solid #319bff;outline-offset:3px}.public-blocks h2{font-size:20px;margin:18px 0 8px}.text-block p{white-space:normal;margin:8px 0}.media-card,.response-card{border:1px solid #8885;background:#8881;border-radius:var(--round);padding:16px;overflow:hidden}.media-card h2,.response-card h2{font-size:18px;margin:0 0 12px}.media-card video,.media-card audio{width:100%;max-height:500px}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.display-carousel .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.display-carousel .gallery img{flex:0 0 85%;scroll-snap-align:start}.display-single .gallery{grid-template-columns:1fr}.response-card label{display:block;margin:10px 0}.response-card textarea{display:block;width:100%;min-height:90px;padding:12px;border:1px solid #8888;border-radius:8px;font:inherit;background:#fff;color:#111}.response-card button,.motion-toggle{min-height:44px;padding:10px 18px;background:var(--btn);color:var(--btn-ink);border:1px solid #8885;border-radius:12px;font:inherit;cursor:pointer}.response-card button:disabled{opacity:.5}.response-card [role=status]{font-size:12px}footer{text-align:center;padding:18px 24px 38px}footer a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#ffffffdc;color:#111;padding:10px 17px;border-radius:99px;font-size:12px;font-weight:700}footer img{width:22px;height:22px;object-fit:contain}.olbsc-verified-badge{display:inline-flex;align-items:center;flex:none}.olbsc-verified-rosette{width:22px;height:22px;fill:#319bff}.motion-toggle{position:fixed;bottom:12px;right:12px;z-index:5;font-size:11px}.effect-particle{position:absolute;pointer-events:none;right:18px}.fx-wiggle.is-acting{animation:wiggle .45s}.fx-pop.is-acting{animation:pop .4s}.fx-glitch.is-acting{text-shadow:2px 0 #0ff,-2px 0 #f0f}.fx-shimmer:before{content:'';position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(110deg,transparent,#ffffff80,transparent);pointer-events:none}.fx-shimmer.is-acting:before{animation:shimmer .6s}.fx-line:after{content:'';position:absolute;bottom:5px;left:20%;width:60%;height:2px;background:currentColor;transform:scaleX(0);transition:transform .18s}.fx-line.is-acting:after{transform:scaleX(1)}.fx-orbit.is-acting .icon-slot{animation:orbit .6s}.fx-emoji.is-acting .effect-particle{animation:pop .4s}@keyframes wiggle{25%{transform:rotate(1deg)}75%{transform:rotate(-1deg)}}@keyframes pop{50%{transform:scale(1.025)}}@keyframes shimmer{to{transform:translateX(110%)}}@keyframes orbit{25%{transform:translate(3px,-3px)}50%{transform:translate(0,-5px)}75%{transform:translate(-3px,-3px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.wallpaper:is(video){display:none}}
.youtube-card{display:block;color:var(--ink);text-decoration:none;padding:0}.youtube-card img{display:block;width:100%;height:auto}.youtube-card span{display:block;padding:14px}

/* Footer follows content and reaches the bottom of short profiles, in every header layout. */
.public-page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}.profile-header,.public-blocks{flex-shrink:0}.public-page>footer{margin-top:auto;position:static;flex-shrink:0;width:100%}.public-link:active,.public-link.is-pressed{transform:scale(.985)}

.public-link{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:12px}.public-link>span:last-child{justify-self:center}.icon-slot{width:40px;height:40px;display:grid;place-items:center}.icon-slot .brand-glyph{display:block;width:28px;height:28px;background:currentColor;-webkit-mask:var(--brand-src) center/contain no-repeat;mask:var(--brand-src) center/contain no-repeat}.icon-slot .brand-original{width:28px;height:28px;object-fit:contain;background:white;border-radius:5px;padding:1px}.icon-slot img{object-fit:contain}.display-single .gallery{grid-template-columns:1fr}.display-single .gallery img{aspect-ratio:auto;height:auto}
@media(max-width:420px){.public-blocks{padding-left:16px;padding-right:16px}.public-link{padding:10px 12px;gap:8px;grid-template-columns:36px minmax(0,1fr) 36px}.icon-slot{width:36px;height:36px}}
/* Finite selected effects, including touch/keyboard activation. */
.public-link{transition:opacity .15s,box-shadow .15s,transform .15s}.public-link.is-pressed{opacity:.84}.effect-particle{opacity:0}.fx-emoji.is-acting .effect-particle{opacity:1}.public-link:focus-visible{outline-offset:3px}.public-page{width:100%;min-width:0}.public-blocks,.profile-header{min-width:0}.public-link .link-label{overflow-wrap:anywhere}.public-link>span:last-child:not(.effect-particle){justify-self:center}.response-card input[type=radio]{min-width:24px;min-height:24px}.response-card label{min-height:44px;display:flex;align-items:center;gap:8px}footer a{min-height:44px}@media(prefers-reduced-motion:reduce){.public-link.is-pressed,.public-link:active{transform:none}.effect-particle{display:none}}

/* Native scrolling remains available, including inside the preview document. */
*{scrollbar-width:thin;scrollbar-color:#8887 transparent}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:8px;background:#8887}::-webkit-scrollbar-thumb:hover{background:#888b}

.hero{min-height:440px}.hero .cover{object-fit:cover;max-width:none}.link-balance{width:100%;pointer-events:none}.cutout{padding-top:310px}

/* Hero height follows profile width, not the desktop viewport height.
   Alpha fade reveals the actual fill/gradient/wallpaper beneath the image. */
.public-page{container-type:inline-size}
.profile-header.hero{display:block;min-height:0;padding:0 24px 26px;overflow:hidden}
.profile-header.hero .cover{position:relative;inset:auto;display:block;width:calc(100% + 48px);max-width:none;margin-left:-24px;height:clamp(300px,90vw,360px);height:clamp(300px,90cqw,360px);object-fit:cover;mask-image:linear-gradient(to bottom,#000 52%,#000c 68%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 52%,#000c 68%,transparent 100%)}
.profile-header.hero .identity{padding:0;width:100%;background:none;color:inherit;margin-top:42px}
.profile-header.hero .cover+.identity{margin-top:-48px}
.profile-header.hero h1{display:block;margin:0 0 12px;overflow-wrap:anywhere}
.profile-header.hero h1 .olbsc-verified-badge{vertical-align:middle;margin-left:7px}
.profile-header.hero p{position:relative;margin-bottom:0}
/* Independent text colors and a calm transition without resizing the preview. */
.profile-header h1{color:var(--title-ink,var(--ink))}.profile-header p{color:var(--bio-ink,var(--ink))}.style-outline .public-link{color:var(--btn-ink)}
body.ols-public,.profile-header h1,.profile-header p,.public-link{transition:color .12s ease,background-color .12s ease,border-color .12s ease}
.profile-header.banner:not(:has(.cover)) .avatar{margin-top:30px}.profile-header.cutout:not(:has(.cover)){padding-top:42px;min-height:0}
@media(prefers-reduced-motion:reduce){body.ols-public,.profile-header h1,.profile-header p,.public-link{transition:none}}
