@font-face { font-family: 'Megogo Normal'; src: url('./public/c78e5cecc6558185/fonts/Megogo-InterfaceNormal.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Megogo Regular'; src: url('./public/c78e5cecc6558185/fonts/Megogo-InterfaceRegular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Megogo Medium'; src: url('./public/c78e5cecc6558185/fonts/Megogo-InterfaceMedium.ttf') format('truetype'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Megogo Demi'; src: url('./public/c78e5cecc6558185/fonts/Megogo-InterfaceDemiBold.ttf') format('truetype'); font-weight: 600; font-display: block; }

:root { color-scheme: dark; --pink: #ff00b0; --card: #141414; --rule: #808080; --normal: 'Megogo Normal', sans-serif; --regular: 'Megogo Regular', sans-serif; --medium: 'Megogo Medium', sans-serif; --demi: 'Megogo Demi', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1200px; background: #000; }
body { color: #fff; font-family: var(--regular); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; }
button[aria-disabled='true'] { cursor: default; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
img { display: block; max-width: none; }
.desktop-shell { width: 100%; min-width: 1200px; max-width: 1600px; margin: 0 auto; }
.design-canvas { position: relative; width: 1600px; background: #000; overflow: clip; padding-bottom: 0; }
.page-glow { pointer-events: none; position: absolute; left: 1058.3398px; top: 1255.0552px; width: 800px; height: 1200px; transform-origin: 0 0; transform: rotate(-15deg); }
.page-glow img { position: absolute; left: -500px; top: -500px; width: 1800px; height: 2200px; }
.page-glow-02 { pointer-events: none; position: absolute; left: 984px; top: 4923.0947px; width: 800px; height: 1200px; transform-origin: 0 0; transform: rotate(-25deg); }
.page-glow-02 img { position: absolute; left: -600px; top: -600px; width: 2000px; height: 2400px; }
.hero { position: relative; height: 900px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; left: 308.7422px; top: -343px; width: 600px; height: 800px; transform: rotate(75deg); transform-origin: 0 0; }
.hero-glow img { position: absolute; left: -600px; top: -600px; width: 1800px; height: 2000px; }
.hero-stripes-left { position: absolute; left: -635px; top: -479px; width: 1269.574px; height: 1057.442px; }
.hero-stripes-left img { width: 1410px; height: 1540.59px; }
.hero-stripes-right { position: absolute; left: 902px; top: 0; width: 668px; height: 792px; }
.hero-stripes-right img { width: 668px; height: 792px; }
.hero-award { position: absolute; left: 950px; top: 150px; width: 550px; height: 550px; z-index: 1; }
.hero-award-static { position: absolute; width: 100.06%; height: 104.37%; left: -.03%; top: -.66%; }
.hero-award-model { position: absolute; left: -125px; top: -50px; width: 800px; height: 850px; visibility: hidden; }
.hero-award-model canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-award[data-model-state='ready'] .hero-award-static { visibility: hidden; }
.hero-award[data-model-state='ready'] .hero-award-model { visibility: visible; }
/* Exact clipped PNG: Figma blur and 20% paint opacity are already baked in.
   Keep it below the raised 3D canvas and beneath the source floor glow. */
.hero-background-glow { position: absolute; right: 0; top: 0; width: 953px; height: 900px; }
.hero-background-glow img { width: 953px; height: 900px; }
.floor-glow { position: absolute; left: 742px; top: 638px; width: 858px; height: 247px; }
.floor-glow img { width: 858px; height: 247px; }
.site-header { position: absolute; top: 0; left: 0; }
.anchor-nav { position: absolute; left: 100px; top: 120px; display: flex; gap: 42px; align-items: center; font-family: var(--medium); font-weight: 500; font-size: 20px; line-height: 23.992px; text-transform: uppercase; white-space: nowrap; }
.anchor-nav > button { width: 106px; }
.anchor-nav > span:first-of-type { width: 127px; text-align: center; }
.hero-copy { position: absolute; left: 100px; top: 324px; width: 750px; }
.campaign-lockup { display: flex; flex-direction: column; gap: 4px; }
.brand-line { display: flex; gap: 12px; font-size: 100px; line-height: 100px; letter-spacing: -2px; font-family: var(--regular); white-space: nowrap; }
.brand-line strong, .award-line strong { font-family: var(--demi); font-weight: 600; }
.brand-line strong { width: 436px; flex: none; }
.brand-line > span { width: 293px; flex: none; }
.award-line { display: flex; gap: 24px; align-items: center; height: 100px; font-size: 100px; line-height: 100px; letter-spacing: -2px; color: var(--pink); }
.award-line img { width: 395px; height: 99.321px; }
.hero-description { font-family: var(--normal); font-size: 24px; line-height: 28.8px; color: #f5f5f5; width: 543px; height: 58px; margin-top: 40px; transform: translateY(1px); }
.hero-actions { display: flex; gap: 20px; margin-top: 100px; }
.campaign-button { display: flex; align-items: center; justify-content: center; width: 300px; height: 64px; border: 2px solid; font-family: var(--demi); font-weight: 600; font-size: 24px; line-height: 20px; text-transform: uppercase; }
.campaign-button.primary { background: var(--pink); border-color: var(--pink); color: #000; }
.campaign-button.secondary { border-color: #fff; }
.campaign-stages { position: relative; width: 1400px; height: 320px; margin: 90px 100px 0; display: grid; grid-template-columns: repeat(4, 332px); gap: 24px; }
.stage { position: relative; height: 320px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; outline: 1px solid var(--rule); outline-offset: 0; }
.stage.active { outline-color: var(--pink); }
.stage-background { position: absolute; inset: 0; overflow: hidden; background: #000; }
.stage-background img { position: absolute; left: .53px; top: -.29px; width: 331.47px; height: 769.408px; transform: scaleX(-1); }
.stage-vignette { position: absolute; width: 335px; height: 320px; left: 0; top: 0; background: url('./public/c78e5cecc6558185/assets/stage-surface.svg') no-repeat; }
.stage-meta, .stage h2 { position: relative; }
.stage-meta > p:first-child { font-family: var(--normal); font-size: 32px; line-height: 38.4px; letter-spacing: -.64px; transform: translateY(1px); }
.stage-status { margin-top: 12px; font-family: var(--regular); font-size: 20px; line-height: 24px; color: #ccc; text-transform: uppercase; }
.stage.active .stage-status { color: var(--pink); }
.stage h2 { font-family: var(--normal); font-size: 32px; line-height: 32px; letter-spacing: -.64px; transform: translateY(1px); }

.nominations { position: relative; margin-top: 180px; }
.nominations-heading { padding: 0 100px; }
.nominations-heading h2 { font-family: var(--normal); font-size: 64px; line-height: 64px; text-transform: uppercase; }
.nominations-heading > p { width: 690px; height: 87px; margin-top: 20px; font-family: var(--regular); font-size: 24px; line-height: 28.8px; color: #ccc; transform: translateY(1px); }
.nominations-heading > p span { font-family: var(--normal); color: var(--pink); }
.nomination-list { margin: 80px 100px 0; width: 1400px; }
.nomination-row { position: relative; height: 140px; width: 100%; padding: 0 40px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.nomination-summary { display: flex; align-items: center; gap: 24px; }
.nomination-label { display: flex; align-items: center; gap: 40px; font-family: var(--normal); font-size: 40px; line-height: 40px; white-space: nowrap; }
.nomination-summary .nomination-label { width: 885px; }
.nomination-label.two-lines { line-height: 36px; }
.nomination-number { color: var(--pink); line-height: 40px; flex: none; }
.nomination-list > .nomination-row:first-child .nomination-number { width: 42px; }
.nomination-list > .nomination-row:nth-child(2) .nomination-number, .nomination-toggle .nomination-number { width: 47px; }
.after-expanded .nomination-number { width: 48px; }
.disclosure { flex: none; transform: rotate(-90deg); }
.selected-nominee { display: flex; align-items: center; gap: 16px; font-family: var(--normal); font-size: 20px; line-height: 20px; text-transform: uppercase; white-space: nowrap; }
.selected-portrait { position: relative; width: 40px; height: 40px; overflow: hidden; flex: none; }
.selected-portrait img, .nominee-portrait > img { position: absolute; }
.portrait-01 img { width: 121.34%; height: 181.99%; left: -13.81%; top: -45.18%; }
.portrait-02 img { width: 256.66%; height: 171.13%; left: -87.75%; top: -3.77%; }
.portrait-03 img { width: 100%; height: 149.93%; left: 0; top: -14.5%; }
.portrait-04 img { width: 113.47%; height: 170.18%; left: -13.47%; top: -19.55%; }
.portrait-05 img { width: 100%; height: 149.97%; left: 0; top: -23.1%; }
.portrait-06 img { width: 100%; height: 149.98%; left: 0; top: -14.53%; }
.portrait-07 img { width: 100%; height: 124.99%; left: 0; top: -6.85%; }
.portrait-08 img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.portrait-09 img { width: 100%; height: 124.99%; left: 0; top: -.36%; }
.interactive-nomination { --panel-motion: 600ms; --header-motion: 240ms; --nomination-ease: ease-in-out; position: relative; isolation: isolate; }
/* The existing expanded glow follows the reveal, not the individual cards. */
.interactive-nomination::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(255 0 176 / 0), rgb(255 0 176 / .08) 15%, rgb(255 0 176 / .4) 50.0841%, rgb(255 0 176 / .08) 85%, rgb(255 0 176 / 0)); transition: opacity var(--panel-motion) var(--nomination-ease); }
.interactive-nomination.is-expanded::before { opacity: 1; }
.nomination-toggle { text-align: left; transition: color var(--header-motion) var(--nomination-ease), border-color var(--header-motion) var(--nomination-ease); }
.nomination-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(270deg, rgb(255 0 176 / 0), rgb(255 0 176 / .04) 15%, rgb(255 0 176 / .2) 50.084%, rgb(255 0 176 / .04) 85%, rgb(153 0 106 / 0)); transition: opacity var(--header-motion) var(--nomination-ease); }
.nomination-toggle:is(:hover, :focus-visible)::before { opacity: 1; }
.is-expanded .nomination-toggle::before { opacity: 0; }
.is-expanded .nomination-toggle, .nomination-toggle:is(:hover, :focus-visible) { color: var(--pink); border-color: var(--pink); }
.nomination-toggle:focus-visible { outline-offset: -6px; }
.nomination-disclosure { position: relative; flex: none; width: 44px; height: 44px; transform: rotate(-90deg); transition: transform var(--header-motion) var(--nomination-ease); }
.nomination-disclosure img { position: absolute; inset: 0; transition: opacity var(--header-motion) var(--nomination-ease); }
.disclosure-pink { transform: rotate(-90deg); opacity: 0; }
.is-expanded .nomination-disclosure { transform: rotate(0); }
.is-expanded .disclosure-pink, .nomination-toggle:is(:hover, :focus-visible) .disclosure-pink { opacity: 1; }
.is-expanded .disclosure-white, .nomination-toggle:is(:hover, :focus-visible) .disclosure-white { opacity: 0; }
/* Only this viewport changes height. The full-size grid sits still inside it. */
.nomination-panel { height: 0; overflow: clip; transition: height var(--panel-motion) var(--nomination-ease); }
.is-expanded .nomination-panel { height: var(--panel-height, auto); }
.nomination-panel-content { padding-top: 4px; padding-bottom: 81px; }
.nominee-grid { display: grid; grid-template-columns: repeat(3, 450px); column-gap: 25px; row-gap: 60px; }
.nominee-card { --vote-badge-top: 410px; --card-motion: 180ms; --card-ease: ease-out; position: relative; width: 450px; height: 594px; background: var(--card); }
.nominee-portrait { position: relative; width: 450px; height: 450px; overflow: hidden; }
.portrait-gradient { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0) 25%, rgb(20 20 20 / .2) 49.828%, rgb(20 20 20 / .5) 70%, rgb(20 20 20 / .9) 90.176%, #141414); transition: opacity var(--card-motion) var(--card-ease); }
/* Cover photo bleed below the selected badge; share its edge and transition. */
.nominee-card.is-selected .nominee-portrait::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--vote-badge-top) + 40px); bottom: 0; background: var(--card); pointer-events: none; transition: top var(--card-motion) var(--card-ease); }
.play-control, .info-control { position: absolute; top: 24px; width: 60px; height: 60px; border-radius: 50%; }
.play-control, .info-control { --play-motion: 180ms; isolation: isolate; }
.play-control { left: 24px; }
/* Figma 9432:99908 / 99917: only the background contracts; hit area and icon stay fixed. */
.play-control::before, .info-control::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(0 0 0 / .3); transform: scale(1); transition: background-color var(--play-motion) ease-in-out, transform 120ms ease-in-out; }
.play-control:is(:hover, :focus-visible)::before, .info-control:is(:hover, :focus-visible)::before { background: rgb(0 0 0 / .5); }
.play-control:is(:active, .is-pressed)::before, .info-control:is(:active, .is-pressed)::before { background: rgb(0 0 0 / .5); transform: scale(calc(50 / 60)); }
.play-control > img { position: absolute; inset: 0; width: 60px; height: 60px; pointer-events: none; transition: opacity var(--play-motion) ease-in-out; }
.play-control .pause-icon { opacity: 0; }
.play-control[aria-pressed="true"] .play-icon { opacity: 0; }
.play-control[aria-pressed="true"] .pause-icon { opacity: 1; }
.info-control { right: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--card-motion) var(--card-ease), visibility 0s linear var(--card-motion); }
.info-control span { position: absolute; left: 0; right: 0; top: 14px; font-family: var(--demi); font-weight: 600; font-size: 32px; line-height: 32px; letter-spacing: -.64px; text-align: center; }
.nominee-copy { position: absolute; top: 474px; left: 24px; width: 402px; height: var(--copy-height); display: flex; flex-direction: column; gap: 8px; transition: top var(--card-motion) var(--card-ease); }
.nominee-name { font-family: var(--medium); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; }
.nominee-track { font-family: var(--regular); font-size: 20px; line-height: 20px; color: rgb(255 255 255 / .8); }
.nominee-actions { position: absolute; left: 24px; top: 506px; display: grid; grid-template-columns: 193px 197px; gap: 12px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity var(--card-motion) var(--card-ease), transform var(--card-motion) var(--card-ease), visibility 0s linear var(--card-motion); }
.nominee-actions button { height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--demi); font-weight: 600; font-size: 16px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.vote-control { background: var(--pink); color: #000; gap: 8px; }
.donate-control { border: 2px solid #fff; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .portrait-gradient { opacity: 1; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .nominee-copy { top: calc(474px - var(--copy-height)); }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) :is(.info-control, .nominee-actions) { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .nominee-actions { transform: translateY(0); }
.vote-badge { position: absolute; left: 0; top: var(--vote-badge-top); width: 450px; height: 40px; padding: 10px; display: flex; align-items: center; justify-content: center; background: var(--pink); font-family: var(--medium); font-weight: 500; font-size: 20px; line-height: 20px; text-transform: uppercase; transition: top var(--card-motion) var(--card-ease); }
/* Success adds the badge above the copy, without moving its hover anchor. */
.nominee-card.is-selected:is(.is-interacting, .is-confirming) { --vote-badge-top: calc(410px - var(--copy-height)); }
.nominee-card.is-donation-only .nominee-actions { width: 402px; grid-template-columns: 1fr; }
.vote-spinner { position: relative; flex: none; width: 32px; height: 32px; }
.vote-spinner > img, .vote-spinner-rotor > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vote-spinner-rotor { position: absolute; inset: 0; animation: vote-spin 800ms linear infinite; }
.vote-award { flex: none; width: 32px; height: 32px; object-fit: contain; }
@keyframes vote-spin { to { transform: rotate(360deg); } }
.after-expanded { transition: border-color 240ms ease-in-out; }
.is-expanded + .after-expanded, .interactive-nomination:has(.nomination-toggle:is(:hover, :focus-visible)) + .after-expanded { border-color: var(--pink); }
.special-label { display: flex; gap: 40px; align-items: center; }
.special-label > img { flex: none; }
.special-label p { font-family: var(--regular); font-size: 20px; line-height: 24px; color: var(--pink); text-transform: uppercase; }
.special-label h3 { font-family: var(--normal); font-size: 40px; line-height: 40px; white-space: nowrap; }
.voting-period { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; white-space: nowrap; }
.voting-period p:first-child { font-family: var(--regular); font-size: 24px; line-height: 24px; letter-spacing: -.48px; }
.voting-period p:last-child { font-family: var(--normal); font-size: 28px; line-height: 33.6px; letter-spacing: -.56px; }

/* A shared native modal outside the landing canvas keeps the page inert. */
html.donation-is-open, .donation-is-open body { overflow: hidden; }
html.modal-is-open, .modal-is-open body { overflow: hidden; }
.artist-dialog { position: fixed; inset: 0; margin: auto; padding: 0; width: 1200px; height: 734px; max-width: none; max-height: none; border: 2px solid var(--rule); background: #000; color: #fff; overflow: visible; zoom: var(--dialog-scale, 1); opacity: 1; transform: translateY(0); transition: opacity 240ms ease-in-out, transform 240ms ease-in-out; }
.artist-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(10px); opacity: 1; transition: opacity 240ms ease-in-out; }
/* Reset every opening, even when a previous entrance was interrupted. */
.artist-dialog.is-entering { opacity: 0; transform: translateY(-16px); transition: none; }
.artist-dialog.is-entering::backdrop { opacity: 0; transition: none; }
.dialog-layout { width: 100%; height: 100%; padding: 20px 80px 20px 20px; display: flex; align-items: stretch; gap: 80px; }
.modal-nominee { position: relative; flex: none; width: 450px; height: 690px; overflow: hidden; isolation: isolate; background: var(--card); }
.modal-portrait-frame { position: absolute; left: -123.5px; top: -34px; width: 675px; height: 750px; overflow: hidden; }
.modal-portrait-frame > img { position: absolute; }
/* Preserve the nominee-specific crops from the previous donation dialog. */
.modal-portrait-frame.portrait-01 > img { height: 163.791%; top: -40.662%; }
.modal-portrait-frame.portrait-02 { left: -112px; top: 0; }
.modal-portrait-frame.portrait-02 > img { height: 154.02%; top: -3.39%; }
.modal-portrait-frame.portrait-03 > img { height: 134.937%; top: -13.05%; }
.modal-portrait-frame.portrait-04 > img { height: 153.162%; top: -17.595%; }
.modal-portrait-frame.portrait-05 > img { height: 134.973%; top: -20.79%; }
.modal-portrait-frame.portrait-06 > img { height: 134.982%; top: -13.077%; }
.modal-portrait-frame.portrait-07 > img { height: 112.491%; top: -6.165%; }
.modal-portrait-frame.portrait-08 > img { height: 90%; top: 0; object-fit: cover; }
.modal-portrait-frame.portrait-09 > img { height: 112.491%; top: -.324%; }
.modal-portrait-gradient { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / .1) 60.111%, rgb(20 20 20 / .2) 70%, rgb(20 20 20 / .45) 75%, rgb(20 20 20 / .899) 85%, #141414 100%); }
.modal-play-control { z-index: 2; }
.modal-nominee-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 32px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.modal-nominee-copy h3 { font-family: var(--normal); font-size: 32px; line-height: 1; text-transform: uppercase; }
.modal-nominee-copy p { font-family: var(--normal); font-size: 24px; line-height: 1; color: var(--pink); }
.dialog-content { flex: 0 0 566px; min-width: 0; width: 566px; height: 690px; display: flex; flex-direction: column; justify-content: center; gap: 60px; }
.dialog-copy-group { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.dialog-title { font-family: var(--normal); font-size: 42px; line-height: 1; text-transform: uppercase; outline: none; }
.dialog-description { width: 100%; color: #ccc; font-family: var(--regular); font-size: 24px; line-height: 1.2; text-wrap: pretty; }
.dialog-description p + p { margin-top: 28.8px; }
.info-description[data-content-status='pending-placeholder'] { min-height: 261px; }
.dialog-description span { color: #fff; font-family: var(--normal); text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }
.info-actions { width: 100%; display: flex; gap: 12px; }
.info-actions button { flex: 1 1 0; min-width: 0; height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--demi); font-weight: 600; font-size: 24px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.info-vote-control { background: var(--pink); color: #000; }
.info-vote-control[data-vote-state='blocked'] { opacity: .72; }
.info-donate-control { border: 2px solid #fff; }
.info-donate-control:hover, .donation-back:hover { background: rgb(255 255 255 / .08); }
.donation-content { padding-top: 40px; }
.donation-content .dialog-copy-group { gap: 40px; }
.donation-content .dialog-description p + p { font-family: var(--normal); }
.donation-form-fields { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.donation-amount-group { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.donation-amount-group label { font-family: var(--regular); font-size: 20px; line-height: 1; letter-spacing: -1px; }
.donation-input-frame { position: relative; width: 100%; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border: 1px solid var(--rule); border-radius: 2px; background: rgb(255 255 255 / .05); }
.donation-input-frame input { width: 100%; min-width: 0; height: 100%; padding: 0 56px 0 0; border: 0; outline: 0; background: transparent; color: #fff; font-family: var(--normal); font-size: 28px; line-height: 1; caret-color: var(--pink); }
.donation-input-frame:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.donation-input-frame > span { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); color: rgb(255 255 255 / .5); font-family: var(--regular); font-size: 24px; line-height: 1; pointer-events: none; }
.donation-amount-group > p { color: var(--rule); font-family: var(--regular); font-size: 20px; line-height: 1.2; }
.donation-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.donation-payment { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--pink); color: #000; font-family: var(--demi); font-weight: 600; font-size: 24px; line-height: 20px; text-transform: uppercase; }
.donation-back { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--normal); font-size: 24px; line-height: 1; text-transform: uppercase; }
.artist-dialog-close { position: absolute; z-index: 4; top: 28px; right: 32px; width: 48px; height: 48px; display: grid; place-items: center; }
.artist-dialog-close img { width: 22.4666px; height: 22.4645px; }
.artist-dialog-close:hover { background: rgb(255 255 255 / .08); }
.artist-dialog-close:active { background: rgb(255 255 255 / .14); }

/* Final section: native About Award 9493:11699, on the same 1600px canvas.
   Clip its oversized decorative glow to this new scope, not the earlier cards. */
.about-award { position: relative; width: 1600px; height: 1547px; padding: 200px 0 100px; overflow: clip; background: #000; }
/* A broad distant spotlight: its soft diagonal follows the upper-right light
   toward the floor, fading through the full section. Source PNG is recoverable. */
.about-award-background { position: absolute; inset: 0; pointer-events: none; mask-image: linear-gradient(to bottom, transparent, #000 200px); }
.about-award-background img { position: absolute; left: 590.046875px; top: -909.849609px; display: block; width: 1010px; height: 2020px; opacity: .12; }
.about-award-background::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg at 120% -20%, transparent 0deg 190deg, rgb(240 0 156 / .015) 199deg, rgb(240 0 156 / .06) 207deg, rgb(240 0 156 / .14) 216deg, rgb(240 0 156 / .08) 225deg, rgb(240 0 156 / .02) 234deg, transparent 243deg 360deg); mask-image: linear-gradient(to bottom, #000, #000 35%, transparent); filter: blur(96px); }
.about-award-copy { position: relative; width: 800px; height: 267px; margin: 0 auto; }
.about-award-lockup { position: relative; width: 466.321px; height: 120px; margin: 0 auto; }
.about-award-brand { display: flex; gap: 7.461px; font-family: var(--regular); font-size: 62.176px; line-height: 62.176px; letter-spacing: -1.8653px; white-space: nowrap; }
.about-award-brand strong { font-family: var(--demi); font-weight: 600; }
.about-award-wordmark { position: absolute; top: 64.0415px; left: 0; width: 222.715px; height: 55.959px; }
.about-award-edition { position: absolute; left: 234.403px; top: 65.9065px; display: flex; height: 49.741px; font-family: var(--medium); font-weight: 500; font-size: 39.793px; line-height: 50.142px; letter-spacing: -.7959px; white-space: nowrap; }
.about-award-edition > span { display: flex; align-items: center; justify-content: center; height: 49.741px; width: 109.15px; }
.about-award-edition > span:first-child { background: var(--pink); }
.about-award-edition > span:last-child { border: 2.487px solid var(--pink); }
.about-award-copy > p { width: 800px; height: 87px; margin-top: 60px; color: #c2c3c3; font-family: var(--regular); font-size: 24px; line-height: 28.8px; text-align: center; transform: translateY(1px); }
.about-award-visual { position: relative; width: 1400px; height: 900px; margin: 80px 100px 0; }
.about-award-floor { position: absolute; left: -50px; top: 520px; width: 1500px; height: 410px; pointer-events: none; }
.award-07 { position: absolute; left: -50px; top: -107px; width: 1500px; height: 1037px; pointer-events: none; }
.award-07-static { position: absolute; left: 290px; top: 0; width: 920px; height: 920px; mix-blend-mode: lighten; }
.award-07-model { position: absolute; inset: 0; visibility: hidden; }
.award-07-model canvas { display: block; width: 100%; height: 100%; }
.award-07[data-model-state='ready'] .award-07-static { visibility: hidden; }
.award-07[data-model-state='ready'] .award-07-model { visibility: visible; }

/* Same viewport-fixed widget as V1, with the current Figma white rules. */
html:has(.voting-dock.is-visible) { scroll-padding-bottom: calc(96px * var(--voting-dock-scale, 1)); }
.voting-dock { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: calc(80px * var(--voting-dock-scale, 1)); background: rgb(0 0 0 / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); visibility: hidden; pointer-events: none; transform: translateY(100%); transition: transform 420ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 420ms; }
.voting-dock::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: #fff; }
.voting-dock.is-visible { visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.voting-dock-surface { position: relative; width: 1600px; height: 80px; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; font-family: var(--normal); zoom: var(--voting-dock-scale, 1); }
.voting-countdown { flex: none; height: 100%; display: flex; align-items: center; gap: 60px; padding-right: 60px; border-right: 1px solid #fff; }
.voting-countdown h2, .donation-leaders h2 { flex: none; font-size: 20px; line-height: 20px; letter-spacing: -.4px; color: #ccc; white-space: nowrap; }
.countdown-clock { display: flex; align-items: center; width: 228px; font-variant-numeric: tabular-nums; }
.countdown-unit { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.countdown-value { font-size: 32px; line-height: 1.2; letter-spacing: -.64px; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.countdown-label { font-size: 16px; line-height: 1.2; letter-spacing: -.32px; color: #808080; }
.countdown-separator { flex: none; width: 16px; height: 1px; margin: 0 -8px; transform: rotate(90deg); }
.countdown-ended { width: 228px; font-size: 22px; line-height: 24px; text-wrap: balance; }
.donation-leaders { display: flex; align-items: center; gap: 60px; height: 100%; min-width: 0; padding-left: 60px; }
.donation-leader-list { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.donation-leader { display: flex; align-items: center; gap: 10px; flex: none; width: 220px; padding: 0 10px; }
.donation-leader-place { flex: none; font-family: var(--demi); font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -1.62px; color: var(--pink); }
.donation-leader > p { min-width: 0; font-size: 16px; line-height: 1.1; letter-spacing: -.48px; text-transform: uppercase; }
.voting-dock-close { position: absolute; right: 24px; top: 17px; width: 44px; height: 44px; display: grid; place-items: center; }
.voting-dock-close img { width: 14.978px; height: 14.9764px; }
.voting-dock-close:hover { background: rgb(255 255 255 / .08); }
.voting-dock-close:active { background: rgb(255 255 255 / .14); }
.modal-is-open .voting-dock { visibility: hidden; pointer-events: none; transition: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after, .artist-dialog::backdrop { scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } .vote-spinner-rotor { animation: none; } }