[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#fff;color:#111;font:16px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* one theme: black ink on white, neon green (the logo) as the only accent, gold for the SALE sticker */
:root{--ink:#0b0b0b;--neon:#22ff5a;--muted:#6b6b6b;--frame:#f2f2f2;--display:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}

/* one screen: header / stage / actions / dock */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 14px 0;max-width:980px;margin:0 auto}
/* phones: logo on the left, what this is on the right */
.top{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,22px);flex:none;margin-bottom:14px;width:100%;max-width:560px}
.logo{flex:none}
.logo svg{width:clamp(140px,44vw,270px);height:auto;display:block;transform:rotate(-3deg)}
.links,.pitch .long,.trend{display:none}
.pitch{min-width:0}
h1{margin:0;font:800 clamp(16px,4.9vw,30px)/1.05 var(--display);letter-spacing:-.03em;text-wrap:balance}
.pitch p{margin:.3em 0 0;font-size:clamp(12px,3.4vw,16px);color:var(--muted);line-height:1.3;text-wrap:pretty}
.pitch p span{white-space:nowrap}

/* the screenshot moment: purchase history left, the photo right, framed as one card */
/* height capped so both halves stay portrait-shaped like the original screenshot */
.stage{flex:1;min-height:0;max-height:calc(min(100vw - 28px,560px) * 1.5);width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:auto 0;padding:8px;border-radius:22px;background:#f2f2f2;position:relative}
@media (min-width:860px) and (min-aspect-ratio:1/1){.stage{margin:0;max-width:none;gap:14px;padding:14px;border-radius:26px}}
.panel{position:relative;min-height:0;border-radius:14px;overflow:hidden;background:#fff}

/* the photo: who it's meant to be */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* costume name: plain white text on a soft bottom fade so it reads on any photo */
.photo::after{content:"";position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.photo .name{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;color:#fff;font:700 clamp(14px,4vw,20px)/1.15 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play .photo .name{animation:tag .35s ease .15s both}
@keyframes tag{from{opacity:0;transform:translateY(6px)}}

/* the purchase history, sized to its panel like the real thing */
.list{container-type:size}
.ph{height:100%;display:flex;flex-direction:column;padding:min(6cqw,4cqh) 5cqw 5cqw}
.ph header{display:flex;align-items:flex-start;justify-content:space-between;gap:2cqw;margin-bottom:min(4cqw,2.4cqh)}
.ph h2{margin:0;font-size:clamp(14px,min(8.6cqw,5.4cqh),30px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ph .sub{font-size:clamp(9.5px,min(4.8cqw,3cqh),15px);color:#6b6b6b;margin-top:.3em}
/* gold sticker slapped over the panel's corner */
.list{overflow:visible}
.sale{position:absolute;z-index:3;top:-12px;right:-16px;width:clamp(58px,min(32cqw,19cqh),118px);height:auto;transform:rotate(12deg);font-family:"Inter Tight",sans-serif;filter:drop-shadow(0 6px 10px rgba(150,100,0,.4));animation:pulse 2.4s cubic-bezier(.3,1.6,.5,1) infinite}
.play .sale{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) .15s both,pulse 2.4s cubic-bezier(.3,1.6,.5,1) .65s infinite}
@keyframes stamp{from{opacity:0;transform:rotate(-30deg) scale(2.2)}}
@keyframes pulse{0%,100%{transform:rotate(12deg) scale(1)}12%{transform:rotate(6deg) scale(1.18)}24%{transform:rotate(15deg) scale(.96)}34%{transform:rotate(11deg) scale(1.03)}60%{transform:rotate(14deg) scale(1)}80%{transform:rotate(10deg) scale(1.01)}}
.sale .glint{animation:glint 2.4s ease-in-out .65s infinite}
@keyframes glint{0%,6%{transform:translateX(0)}40%,100%{transform:translateX(200px)}}
.ph h2,.ph .sub{padding-right:22cqw}
.ph .rows{flex:1;display:flex;flex-direction:column;gap:min(2.6cqw,1.6cqh);min-height:0}
.ph .row{flex:1;min-height:0;display:flex;align-items:center;gap:3.5cqw;border:1.5px solid #d6d6d6;border-radius:8px;padding:0 3cqw 0 2cqw;text-decoration:none;color:inherit;background:#fff}
.ph .pic{width:29%;align-self:stretch;flex:none;padding:min(1.4cqh,10px) 0;display:flex}
.ph .pic img{width:100%;height:100%;object-fit:contain}
.ph .txt{min-width:0}
.ph b{display:block;font-size:clamp(9px,min(5.2cqw,3.3cqh),18px);font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.ph b i{font-style:normal}
.ph b .s{display:none}
.ph .txt span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:clamp(7.5px,min(4cqw,2.6cqh),15px);color:#5f5f5f;line-height:1.25;margin-top:.25em}
/* narrow column (phones): short month so "Delivered" fits on one line */
@container (max-width:300px){.ph b .l{display:none}.ph b .s{display:inline}}
.ph .skel{background:#f2f2f2;border-radius:6px;width:100%;height:100%}

/* ===== quick entrance: photo instantly, rows slide in fast ===== */
.play .row{animation:slide .35s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * .06s)}
@keyframes slide{from{opacity:0;transform:translateY(10px)}}
.play .photo img{animation:pop .35s ease both}
@keyframes pop{from{opacity:0;transform:scale(1.04)}}
.play.fwd .panel{animation:inR .3s cubic-bezier(.2,.9,.3,1) both}
.play.back .panel{animation:inL .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes inR{from{opacity:0;transform:translateX(24px)}}
@keyframes inL{from{opacity:0;transform:translateX(-24px)}}
.out .panel{animation:out .25s ease both}
@keyframes out{to{opacity:0}}

/* dock: upload always visible */
.dock{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;padding:10px 0 calc(8px + env(safe-area-inset-bottom))}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;background:var(--neon);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:17px 28px;font:800 19px/1 var(--display);letter-spacing:-.01em;box-shadow:4px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.cta:hover{transform:translate(-1px,-1px);box-shadow:5px 7px 0 var(--ink)}
.cta:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}
.cta:disabled{opacity:.4}
.note{margin:0 0 8px;color:#6b6b6b;font-size:14px;text-align:center}
.legal{font-size:11px;color:#a5a5a5;margin-top:8px}
/* "Halloween in N days": the deadline is the whole point of a last-minute site */
.countdown{margin:0 0 10px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:-.01em}
.countdown::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 0 rgba(34,255,90,.7);animation:beat 1.6s ease-out infinite}
@keyframes beat{70%{box-shadow:0 0 0 7px rgba(34,255,90,0)}100%{box-shadow:0 0 0 0 rgba(34,255,90,0)}}

.acts{flex:none;display:flex;gap:8px;justify-content:center;margin-top:10px}
.acts:empty{display:none}
.dots{display:flex;gap:2px}
.acts .dots button{border:0;background:none;padding:8px 5px;border-radius:0}
.dots button::after{content:"";display:block;width:7px;height:7px;border-radius:99px;background:#d4d4d4;transition:width .25s,background .25s}
.dots button[aria-current]::after{width:20px;background:var(--ink)}
.acts button,.acts a{border:1px solid #dcdcdc;background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* desktop: a real web page. Nav bar on top, pitch + upload on the left, the screenshot card on the right. */
@media (min-width:860px) and (min-aspect-ratio:1/1){
  .app{max-width:1240px;padding:0 clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr 1fr auto;column-gap:clamp(32px,5vw,80px);
    grid-template-areas:"logo links" "pitch stage" "dock stage" ". acts";align-items:stretch}
  .top{display:contents}
  .logo{grid-area:logo;align-self:center;padding:calc(18px + env(safe-area-inset-top)) 0 18px}
  .logo svg{width:clamp(190px,17vw,240px)}
  .links{grid-area:links;display:flex;justify-content:flex-end;align-items:center;gap:6px}
  .links a{text-decoration:none;font-weight:600;font-size:15px;padding:9px 14px;border-radius:999px;transition:background .15s}
  .links a:hover{background:var(--frame)}
  .pitch{grid-area:pitch;align-self:end;padding-bottom:clamp(18px,3vh,32px)}
  h1{font-size:clamp(44px,min(5.6vw,8vh),84px);line-height:.98;letter-spacing:-.045em}
  .pitch .short{display:none}
  .pitch .long{display:block;font-size:clamp(17px,2.4vh,21px);line-height:1.45;color:#4a4a4a;margin-top:.8em;max-width:30em}
  .trend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:clamp(16px,3vh,26px);font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .trend a{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);text-decoration:none;border:1.5px solid #e4e4e4;border-radius:999px;padding:6px 12px;transition:border-color .15s,background .15s}
  .trend a:hover{border-color:var(--ink);background:var(--neon)}
  .stage{grid-area:stage;align-self:center;justify-self:end;width:100%;height:min(100%,780px);max-height:none}
  .acts{grid-area:acts;justify-content:center;margin:12px 0 calc(16px + env(safe-area-inset-bottom))}
  .dock{grid-area:dock;align-self:start;align-items:flex-start;padding:0}
  .dock .cta{width:auto;padding:20px 34px}
  .countdown{align-self:flex-start}
  .legal{align-self:flex-start;margin-left:6px}
}