.headliner {
  --headliner-accent: #e781ff;
  --headliner-deep: #6121d2;
  --headliner-glow: rgba(203, 69, 255, .6);
  position: relative;
  scroll-margin-top: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 88% 22%, rgba(134, 31, 209, .27), transparent 45%), #080410;
}
.headliner::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: radial-gradient(#c586ff .7px, transparent .8px); background-size: 39px 39px; }
.headliner__inner { position: relative; z-index: 1; max-width: 1260px; margin-inline: auto; }
.headliner__intro { max-width: 780px; margin-bottom: clamp(26px, 4vw, 50px); }
.headliner__intro .eyebrow { color: var(--lime); }
.headliner__intro h2 { margin: 0 0 19px; color: #fff9ff; font: 900 clamp(65px, 9vw, 128px)/.82 var(--display); letter-spacing: -.018em; text-shadow: 0 0 17px rgba(227, 87, 255, .5); }
.headliner__intro h2 em { color: #ffc052; font-style: normal; text-shadow: 0 0 13px #fb8128, 0 0 34px rgba(241, 81, 16, .8); }
.headliner__intro > p:not(.eyebrow) { max-width: 710px; color: #ebdcec; font: 650 clamp(20px, 2.3vw, 27px)/1.12 var(--display); }
.headliner__intro .headliner__note { margin-bottom: 0; color: #cdbfd5 !important; font-size: clamp(17px, 1.7vw, 20px) !important; }
.headliner__studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, .9fr); align-items: start; gap: clamp(30px, 7vw, 104px); padding: clamp(20px, 4.5vw, 55px); border: 2px solid rgba(208, 93, 255, .75); border-radius: 24px; background: linear-gradient(138deg, rgba(38, 11, 61, .97), rgba(7, 4, 20, .97) 65%); box-shadow: inset 0 0 32px rgba(197, 51, 242, .16), 0 0 28px rgba(155, 39, 225, .36); }
.headliner__controls { min-width: 0; }
.headliner__controls > label, .headliner__photo-label, .headliner__themes legend { display: block; margin: 0 0 9px; color: #fff; font: 850 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.headliner__controls > label > span, .headliner__photo-label > span { color: #c5b4ce; font-size: .75em; font-weight: 650; text-transform: none; }
.headliner__controls > input[type="text"], .headliner__controls > select { display: block; width: 100%; min-height: 50px; margin-bottom: 20px; padding: 9px 14px; border: 1px solid rgba(230, 167, 255, .7); border-radius: 8px; color: #fff; background: #11091d; font: 650 20px/1.1 var(--display); }
.headliner__controls > input[type="text"]::placeholder { color: #aa98b4; }
.headliner__controls > select { appearance: auto; cursor: pointer; }
.headliner__photo-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.headliner__photo-option { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 17px; border: 2px solid #b7fb87; border-radius: 8px; color: #12200f; background: linear-gradient(#d6ffa5, #99ec67); box-shadow: 0 0 13px rgba(150, 242, 93, .3); font: 850 19px/1 var(--display); text-align: center; text-transform: uppercase; cursor: pointer; }
.headliner__photo-option--camera { border-color: #8de9ff; color: #effaff; background: linear-gradient(125deg, #204d77, #1b2347); box-shadow: 0 0 15px rgba(69, 199, 255, .35); }
.headliner__photo-option:hover { transform: translateY(-2px); box-shadow: 0 0 23px rgba(155, 255, 106, .7); }
.headliner__photo-option--camera:hover { box-shadow: 0 0 23px rgba(69, 199, 255, .7); }
.headliner__photo-option:focus-within { outline: 3px solid #fff; outline-offset: 3px; }
.headliner__file { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.headliner__photo-help { max-width: 470px; margin: 0 0 18px; color: #d1c3da; font: 600 17px/1.2 var(--display); }
.headliner__hint { margin: -13px 0 23px; color: #d1c3da; font-size: 17px; }
.headliner__themes { margin: 0 0 23px; padding: 0; border: 0; }
.headliner__themes legend { margin-bottom: 12px; }
.headliner__theme-options { display: flex; flex-wrap: wrap; gap: 10px; }
.headliner__theme-options label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(226, 187, 255, .52); border-radius: 100px; color: #fff; background: rgba(10, 5, 22, .8); font: 700 17px/1 var(--display); cursor: pointer; }
.headliner__theme-options label:has(input:checked) { border-color: var(--lime); box-shadow: 0 0 13px rgba(161, 255, 85, .3); }
.headliner__theme-options input { margin: 0 1px 0 0; accent-color: var(--lime); }
.headliner__swatch { width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.headliner__swatch--violet { color: #d85cff; background: #d85cff; }.headliner__swatch--blue { color: #4fcfff; background: #4fcfff; }.headliner__swatch--orange { color: #ffac3b; background: #ffac3b; }
.headliner__remove { margin: 0 0 17px; padding: 0; border: 0; color: var(--lime); background: transparent; font: 750 18px var(--display); text-decoration: underline; cursor: pointer; }
.headliner__remove:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.headliner__privacy { max-width: 445px; margin: 0 0 22px; color: #ded0e3; font: 600 18px/1.15 var(--display); }
.headliner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.headliner__button { min-height: 48px; padding: 10px 18px; border: 2px solid #ffbd52; border-radius: 8px; color: #130516; background: linear-gradient(#ffe089, #ffa331); box-shadow: 0 0 14px rgba(255, 161, 37, .46); font: 850 19px/1 var(--display); text-transform: uppercase; cursor: pointer; }
.headliner__button--share { border-color: #d579ff; color: #fff; background: #341146; box-shadow: 0 0 14px rgba(194, 58, 243, .4); }
.headliner__button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 24px rgba(249, 167, 60, .7); }
.headliner__button--share:hover:not(:disabled) { box-shadow: 0 0 24px rgba(215, 79, 255, .7); }
.headliner__button:disabled { opacity: .55; cursor: wait; }
.headliner__status { min-height: 2em; margin: 14px 0 0; color: #d8fbbb; font: 650 17px/1.15 var(--display); }
.headliner__preview-wrap { justify-self: center; width: min(100%, 390px); text-align: center; }
.headliner__preview-wrap > p { margin: 11px 0 0; color: #cdb8d8; font: 700 17px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.headliner__preview { --accent: #df7aff; --deep: #7227d3; --glow: rgba(216, 85, 255, .56); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; aspect-ratio: 9/16; padding: 5% 5% 4%; overflow: hidden; border: 3px solid var(--accent); border-radius: 13px; color: #fff; background: radial-gradient(ellipse at 50% 34%, var(--deep), #12091f 58%, #03030b 95%); box-shadow: 0 0 23px var(--glow), inset 0 0 27px var(--glow); }
.headliner__preview[data-theme="blue"] { --accent: #64dafa; --deep: #134b98; --glow: rgba(65, 180, 255, .56); }
.headliner__preview[data-theme="orange"] { --accent: #ffbe59; --deep: #8f320e; --glow: rgba(255, 135, 32, .58); }
.headliner__preview::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .32; background: radial-gradient(#fff 1px, transparent 1px); background-size: 29px 29px; }
.headliner__lights { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.headliner__lights span { position: absolute; top: -15%; left: -30%; width: 55%; height: 104%; transform-origin: top center; background: linear-gradient(180deg, var(--accent), transparent 75%); opacity: .18; filter: blur(8px); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: headliner-sweep 5s ease-in-out infinite alternate; }
.headliner__lights span:nth-child(2) { left: 27%; animation-delay: -2s; animation-duration: 6s; }.headliner__lights span:nth-child(3) { left: 80%; animation-delay: -3s; animation-duration: 4.5s; }
@keyframes headliner-sweep { to { transform: rotate(23deg); opacity: .36; } }
.headliner__logo { display: block; position: relative; width: 94%; height: 21%; object-fit: contain; filter: drop-shadow(0 0 11px #f79a25) drop-shadow(0 0 12px var(--accent)); }
.headliner__portrait { position: relative; display: grid; place-items: center; width: 91%; height: 48%; overflow: hidden; border: 2px solid var(--accent); border-radius: 10px; background: radial-gradient(circle at 50% 38%, var(--deep), #110b24 64%, #080412); box-shadow: 0 0 22px var(--glow), inset 0 0 34px var(--glow); }
.headliner__portrait img { width: 100%; height: 100%; object-fit: cover; }
.headliner__star { color: #ffde81; font: 900 clamp(80px, 13vw, 160px)/1 var(--display); text-shadow: 0 0 15px #ffae39, 0 0 43px var(--accent); animation: headliner-pulse 3s ease-in-out infinite alternate; }
@keyframes headliner-pulse { to { transform: scale(1.14) rotate(9deg); text-shadow: 0 0 25px #fff3b0, 0 0 55px var(--accent); } }
.headliner__billing { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-width: 0; width: 100%; padding-top: 3%; text-align: center; }
.headliner__billing span { color: #d9ff9d; font: 900 clamp(13px, 1.7vw, 19px)/1 var(--display); letter-spacing: .14em; }
.headliner__billing strong { max-width: 100%; margin: 2% 0; color: #fff; font: 900 clamp(40px, 6vw, 69px)/.85 var(--display); text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 0 12px #fff, 0 0 23px var(--accent), 0 0 46px var(--accent); animation: headliner-pulse 3s ease-in-out infinite alternate; }
.headliner__billing strong.is-long { font-size: clamp(28px, 4.2vw, 48px); }.headliner__billing strong.is-very-long { font-size: clamp(22px, 3.1vw, 36px); }
.headliner__billing small { color: var(--accent); font: 900 clamp(14px, 1.8vw, 22px)/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.headliner__preview > p { margin: 0 0 2%; color: #efc8ff; font: 800 clamp(12px, 1.7vw, 19px)/1 var(--display); }
.headliner__preview > b { color: #ffc869; font: 900 clamp(11px, 1.6vw, 17px)/1 var(--display); letter-spacing: .1em; }
.headliner [hidden] { display: none !important; }
@media (max-width: 780px) { .headliner__studio { grid-template-columns: 1fr; }.headliner__preview-wrap { width: min(100%, 360px); }.headliner__preview .headliner__billing strong { font-size: clamp(40px, 9vw, 66px); }.headliner__preview .headliner__billing strong.is-long { font-size: clamp(29px, 7vw, 45px); }.headliner__preview .headliner__billing strong.is-very-long { font-size: clamp(22px, 6vw, 35px); } }
@media (max-width: 460px) { .headliner__intro h2 { font-size: clamp(56px, 15vw, 78px); }.headliner__studio { padding: 17px; }.headliner__photo-options { flex-direction: column; }.headliner__photo-option { width: 100%; }.headliner__actions { flex-direction: column; }.headliner__button { width: 100%; }.headliner__preview-wrap { width: min(100%, 320px); } }
@media (prefers-reduced-motion: reduce) { .headliner__lights span, .headliner__star, .headliner__billing strong { animation: none !important; } }