html.campaign-document{color-scheme:light;scroll-snap-type:none;scroll-padding-top:var(--campaign-header-height,var(--site-header-height))}
body.halloween-page{background:#f7fafc;padding-top:var(--campaign-header-height,var(--site-header-height))}
.campaign-main,.campaign-dialog{color:#191b30;--ink:#191b30;--accent:#6046dc;--muted:#596174;--border:#d9dfe9}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.58}[hidden]{display:none!important}.campaign-main a,.campaign-dialog a{color:#5138c2;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #087e8c;outline-offset:3px}::selection{background:#c5f3ed;color:#192127}input,textarea{caret-color:var(--accent)}

.campaign-main{max-width:1120px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:0 24px 30px}.composer-section,.participation-section{min-width:0}.campaign-image{background:#edf7fa url('/assets/halloween-2026-hero.webp') center/cover no-repeat;min-height:178px;display:flex;align-items:center;margin:0 -24px 0 0}.intro-copy{width:65%;padding:24px 0}.intro-copy h1{font-size:30px;line-height:1.12;margin:0;max-width:14ch;text-wrap:balance}.intro-copy p{font-size:13px;line-height:1.45;max-width:26ch;margin:12px 0 0}.campaign-content{padding-top:12px}.reward-line{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;margin:0 0 15px;color:#185e66}.reward-line svg{flex-shrink:0;width:18px;height:18px}
form>label,.settings-row label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}input:not([type=checkbox]),textarea,select{width:100%;background:white;border:1px solid #bdc8d9;border-radius:6px;min-height:42px;padding:9px 10px;font-size:16px;line-height:1.3}textarea{resize:vertical;min-height:86px;max-height:200px}input::placeholder,textarea::placeholder{color:#647080;opacity:1}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.settings-row span{display:block;margin-bottom:6px}.settings-row select{font-size:14px}#professional-fields>label{display:block;font-size:12px;margin:8px 0 5px}#professional-fields input{min-height:34px;padding:6px 9px}#professional-fields textarea{min-height:64px;height:64px}.consent{display:flex!important;align-items:flex-start;gap:8px;margin:12px 0!important;font-size:12px!important;font-weight:400!important;line-height:1.4}.consent input{flex-shrink:0;margin:2px 0;accent-color:var(--accent);width:16px;height:16px}.primary,.secondary{width:100%;min-height:44px;padding:10px 14px;border-radius:6px;display:flex;justify-content:center;align-items:center;gap:9px;font-size:14px;font-weight:650;line-height:1.25}.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}.primary:hover{background:#4b35b9}.secondary{background:#fff;border:1px solid #9caac3;color:#45359a}.secondary:hover{background:#f0effb}.primary svg,.secondary svg{width:18px;height:18px;flex-shrink:0}.small-copy{font-size:12px;line-height:1.45;color:var(--muted);margin:8px 0}.status{font-size:13px;line-height:1.4;margin:8px 0;overflow-wrap:anywhere;min-height:18px}.status[data-error=true]{color:#a12e27}.status:empty{display:none}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.section-heading h2,.campaign-main h2,.campaign-dialog h2{font-size:21px;line-height:1.2;margin:0}:is(.campaign-main,.campaign-dialog) .icon-button{width:36px;height:36px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);border-radius:6px;flex-shrink:0}:is(.campaign-main,.campaign-dialog) .icon-button svg{width:18px;height:18px}.empty{font-size:14px;color:var(--muted);padding:30px 0;border-block:1px dashed #c5cedd;margin:0 0 14px}.song-row{padding:10px 0;border-bottom:1px solid var(--border);min-width:0}.song-row strong{font-size:14px;display:block;overflow-wrap:anywhere;margin-bottom:8px}.song-row audio{width:100%;height:36px}.song-row button{margin-top:7px}.submission{margin-top:22px;border-top:1px solid var(--border);padding-top:18px}.submission h2{margin-bottom:8px}.submission form>label{margin-top:12px}.submission #share{min-height:36px;margin-top:8px;padding:7px;font-size:13px}#share-result{display:block;font-size:12px;overflow-wrap:anywhere;margin-top:8px}.submission #submit-entry{margin-top:12px}footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:18px;padding-top:10px;border-top:1px solid var(--border)}footer .small-copy{font-size:11px;margin:0}.text-button{color:#5138c2;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font-size:12px}dialog{width:min(480px,calc(100% - 28px));max-height:85dvh;padding:26px;border:1px solid var(--border);border-radius:8px;color:var(--ink);background:white;box-shadow:0 20px 50px #171b3026}dialog::backdrop{background:#1c203659}dialog h2{padding-right:35px}dialog p{font-size:14px;line-height:1.7;margin-bottom:0}.dialog-close{position:absolute;right:12px;top:12px}.campaign-main svg,.campaign-dialog svg{stroke-width:1.8}.campaign-main button:hover,.campaign-dialog button:hover{filter:brightness(.98)}
@media(max-width:760px){.campaign-main{display:block;padding:0 16px 20px}.composer-section{min-height:calc(100dvh - 56px);padding-bottom:14px}.campaign-image{margin:0 -16px;min-height:148px;padding:0 16px;background-position:55% center}.intro-copy{padding:19px 0;width:63%}.intro-copy h1{font-size:25px;max-width:13ch}.intro-copy p{font-size:12px;margin-top:8px;max-width:23ch}.campaign-content{padding-top:10px}.reward-line{font-size:12px;margin-bottom:10px}#idea{height:82px;min-height:70px}.settings-row{margin:8px 0;gap:10px}.consent{margin:10px 0!important}.small-copy{font-size:11px}.participation-section{min-height:calc(100dvh - 16px);padding-top:12px}.section-heading{margin:0 0 12px}.section-heading h2,h2{font-size:20px}.submission{margin-top:18px;padding-top:16px}#professional-fields textarea{height:56px;min-height:56px}.composer-section:has(#professional-fields:not([hidden])) .campaign-image{min-height:102px}.composer-section:has(#professional-fields:not([hidden])) .intro-copy{padding-block:12px}.composer-section:has(#professional-fields:not([hidden])) .intro-copy p{display:none}}
@media(max-width:760px) and (max-height:740px){.campaign-image{min-height:122px}.intro-copy h1{font-size:23px}.intro-copy p{font-size:11px}.campaign-content{padding-top:8px}.reward-line{margin-bottom:6px}#idea{height:68px;min-height:64px}.settings-row select{min-height:36px;padding-block:6px}.primary{min-height:40px}.consent{font-size:11px!important;margin-block:8px!important}#quota-note{font-size:10px;margin-bottom:0}#professional-fields input{min-height:30px}#professional-fields textarea{height:48px;min-height:48px}}
.intro-copy h1{overflow-wrap:anywhere}
.song-row-heading{display:flex;align-items:center;gap:7px;min-height:36px;margin-bottom:7px}.song-row-heading strong{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;line-height:1.25}.song-row-heading .icon-button{margin:0}
@media(max-width:760px){input:not([type=checkbox]),textarea,select,.settings-row select{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.intro-copy .campaign-prize{color:#45359a;font-size:14px;font-weight:700;line-height:1.3;max-width:27ch;margin-top:8px}.intro-copy>p{max-width:29ch}.submission:has(> #entry-open){margin-top:18px;padding-top:0;border:0}#entry-dialog form>label{margin-top:18px}#entry-dialog input{margin-bottom:2px}#entry-dialog .primary{margin-top:18px}#entry-dialog .small-copy{margin-top:12px}#entry-dialog{overflow-y:auto;overscroll-behavior:contain}
.intro-copy{background:#f7fafcf2;padding-right:8px}

@media(max-width:760px){.composer-section,.participation-section{min-height:0}.intro-copy{width:65%;padding-block:18px}.intro-copy .campaign-prize{font-size:13px}.participation-section{padding-top:0}.submission:has(> #entry-open){margin-top:0}#entry-dialog{padding:22px 18px}}
.generation-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.generation-actions>.primary,.generation-actions>.secondary{height:52px;min-height:52px;min-width:0;padding:8px 10px;font-size:13px;gap:7px;text-decoration:none}.generation-actions span{min-width:0;overflow-wrap:anywhere;line-height:1.2}.generation-actions>.secondary{background:#f1edff;border-color:#b5a6e5;color:#4c34ad}.generation-actions>.secondary:hover{background:#e8e1fc}.submission-action{background:#fff;border-color:#64a99e;color:#155f55}.submission-action:hover{background:#e7f4f0}#entry-dialog .submission-action{margin-top:18px}.submission:has(> #entry-open){border-top:1px solid var(--border);padding-top:20px;margin-top:20px}

/* Desktop keeps the invitation and song output beside the complete composer.
   Artwork gives way to generated tracks; controls retain natural page overflow
   on very short screens and with enlarged browser text. Mobile is unchanged. */
@media (min-width:761px){

  .campaign-main{max-width:1160px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto;column-gap:48px;row-gap:16px;min-height:min(660px,calc(100dvh - var(--campaign-header-height,var(--site-header-height)) - 16px));padding-top:12px;padding-bottom:20px}
  .composer-section{display:contents}
  .campaign-image{grid-column:1;grid-row:1;margin:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;background:none}
  .intro-copy{width:100%;padding:0;background:none}
  .intro-copy h1{font-size:clamp(30px,3vw,40px);line-height:1.08;max-width:19ch;overflow-wrap:normal}
  .intro-copy p{font-size:14px;line-height:1.45;max-width:43ch;margin-top:12px}
  .intro-copy .campaign-prize{font-size:15px;line-height:1.35;max-width:38ch;margin-top:10px}
  .campaign-image::after{content:"";display:block;flex:1 1 0;min-height:0;margin-top:14px;background:url('/assets/halloween-2026-hero.webp') 72% center/cover no-repeat}
  main:has(#song-results:not([hidden])) .campaign-image::after{display:none}
  .campaign-content{grid-column:2;grid-row:1 / 3;align-self:center;padding-top:0}
  .participation-section{grid-column:1;grid-row:2;padding-top:0}
  .submission:has(> #entry-open){margin-top:0;padding-top:14px}
  .participation-section:has(#song-results:not([hidden])) .submission{margin-top:12px}
  .section-heading{margin:0 0 8px}
  .section-heading h2{font-size:18px}
  footer{margin-top:12px;gap:8px;padding-top:9px}
  footer .small-copy{overflow-wrap:anywhere}
}
@media (min-width:761px) and (max-height:740px){
  .campaign-main{column-gap:36px;row-gap:12px;padding-top:4px}
  .intro-copy h1{font-size:30px}
  .intro-copy p{margin-top:8px}
  .intro-copy .campaign-prize{margin-top:8px}
  .campaign-content #idea{height:76px;min-height:76px}
  .campaign-content .settings-row{margin-block:8px}
  .campaign-content .consent{margin-block:10px!important}
  .generation-actions{margin-top:10px}
  .generation-actions>.primary,.generation-actions>.secondary{height:46px;min-height:46px}
  main:has(#song-results:not([hidden])) .intro-copy h1{font-size:26px;max-width:none}
  main:has(#song-results:not([hidden])) .intro-copy p{font-size:13px;max-width:none}
  .participation-section .section-heading{margin-bottom:4px}
  .participation-section .song-row{padding-block:6px}
  .participation-section .song-row-heading{min-height:24px;margin-bottom:4px}
  .participation-section .song-row audio{display:block}
}
.archive-notice{color:#596174;font-size:12px!important;line-height:1.45}
.birthday-page .campaign-image{background:none}
.birthday-page .intro-copy{width:100%;background:none;padding-right:0}
.birthday-page .intro-copy h1{max-width:22ch}
.birthday-page .intro-copy p{max-width:45ch}
.birthday-page .campaign-image::after{background-image:url('/assets/home-guide-songwriting.png');background-size:contain;background-position:center;background-repeat:no-repeat;min-height:150px}
@media(max-width:760px){
  .birthday-page .campaign-image{min-height:0;margin:0;padding:0}
  .birthday-page .intro-copy{padding-block:16px 6px}
  .birthday-page .intro-copy h1{font-size:clamp(23px,6vw,30px);max-width:none}
  .birthday-page .intro-copy p{font-size:13px;line-height:1.4;margin-top:8px}
  .birthday-page .generation-actions>.primary,.birthday-page .generation-actions>.secondary{font-size:12px;min-height:48px;height:auto}
}
@media(max-width:760px) and (max-height:680px){
  .birthday-page .intro-copy{padding-top:10px}
  .birthday-page .intro-copy h1{font-size:23px}
  .birthday-page .intro-copy p{font-size:12px;margin-top:5px}
}