
#app{--gold:#b99a69;--warm:#e2d1b5;background:#070706;color:#e6e3dc;font-family:Arial,Helvetica,sans-serif}#app *{box-sizing:border-box}#app [hidden]{display:none!important}#app .scroll-scene{height:650px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-color:#685639 #0b0a08;scrollbar-width:thin}#app .journey{height:1900px;position:relative}#app .stage{position:sticky;top:0;height:650px;overflow:hidden;background:radial-gradient(ellipse at 50% 69%,#30211322,transparent 56%),#070706}#app nav{position:absolute;top:0;left:0;right:0;padding:28px 35px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:5}#app nav>span{font-size:11px;letter-spacing:2.8px}#app button{border:1px solid #87725177;color:var(--warm);background:#0c0b09;font:inherit;font-size:11px;padding:14px 19px;min-height:44px;cursor:pointer}#app button:hover{background:#302416}#app :is(button,input,select,textarea):focus-visible{outline:2px solid #dec69d;outline-offset:4px}#app .dust{position:absolute;left:10%;right:10%;top:28%;height:55%;background:radial-gradient(ellipse,#a67b3220,transparent 64%);opacity:.5}#app .opening{position:absolute;top:27%;width:100%;text-align:center;font-size:10px;letter-spacing:3px;color:#b4a590}#app .light-position{position:absolute;left:9%;right:9%;top:48%;height:64px;perspective:900px}#app .light{position:relative;height:100%;width:100%;will-change:transform,opacity;transform-origin:50% 50%}#app .light-shape,#app .light-bloom{position:absolute;inset:0;clip-path:polygon(0 0,16% 57%,84% 57%,100% 0,100% 8%,84.2% 65%,15.8% 65%,0 8%);background:linear-gradient(90deg,#aa8552,#eedabd 16%,#fff5e3 50%,#eedabd 84%,#aa8552)}#app .light-shape{filter:drop-shadow(0 0 3px #fff1cd)}#app .light-bloom{clip-path:none;inset:-12px;filter:blur(16px);background:#bd9152;mask-image:linear-gradient(transparent,black,transparent);opacity:.16}#app .reveal{position:absolute;inset:22% 0 auto;display:flex;align-items:center;flex-direction:column;opacity:0;transform:scale(.84);will-change:opacity,transform}#app .reveal img{width:210px;height:210px;object-fit:contain;filter:none}#app h1{font-weight:400;font-size:20px;letter-spacing:7px;margin:28px 0 12px;text-align:center}#app .reveal p{font-size:12px;color:#ac9a81;letter-spacing:1.5px;margin:0}#app .hint{position:absolute;bottom:100px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2px;color:#a3947d}#app .hint span{display:block;margin-top:16px;font-size:18px;color:#d1b88e}#app .ending{position:absolute;bottom:96px;left:24px;right:24px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;opacity:0;visibility:hidden}#app .ending .preorder{background:var(--warm);color:#17120b;border-color:var(--warm)}#app .ground{position:absolute;bottom:25px;left:35px;right:35px;border-top:1px solid #76604433;padding-top:16px;color:#8d7f6b;display:flex;justify-content:space-between;gap:16px;font-size:8px;letter-spacing:1.5px}#app .contact{padding:35px;border-top:1px solid #74603e55;background:#100e0b}#app .contact-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}#app .eyebrow{font-size:9px;letter-spacing:2px;color:var(--gold)}#app h2{font-size:30px;font-weight:400;letter-spacing:-.6px;margin:12px 0 20px}#app .note,#app .result{color:#b7a78e;font-size:11px;line-height:1.6}#app .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0 20px}#app label{display:block;font-size:12px;color:#cbbb9f}#app input,#app select,#app textarea{display:block;width:100%;min-width:0;padding:12px;background:#18140f;color:#e6dac8;border:1px solid #544632;font:inherit;font-size:14px;margin-top:9px;border-radius:0}#app input::placeholder,#app textarea::placeholder{color:#9e8e76}#app .submit{margin-top:22px;background:var(--warm);color:#17120b}
@media(max-width:600px){#app .scroll-scene,#app .stage{height:620px}#app nav{padding:22px 20px}#app nav>span{font-size:9px;letter-spacing:1.5px}#app nav button{font-size:10px;padding:11px}#app .opening{font-size:8px;letter-spacing:2px}#app .light-position{left:5%;right:5%;height:40px}#app .reveal img{width:175px;height:175px}#app h1{font-size:16px;letter-spacing:4px}#app .ending{bottom:85px;flex-direction:column;align-items:center;gap:9px}#app .ground{left:20px;right:20px;font-size:7px;letter-spacing:.7px}#app .ground>span{max-width:110px;text-align:right}#app .contact{padding:25px 20px}#app .fields{grid-template-columns:1fr}#app input,#app select,#app textarea{font-size:16px}#app h2{font-size:25px}}

#app .headlight-canvas{position:absolute;left:-5%;top:-45px;width:110%;height:150px;pointer-events:none}

#app .reveal img{filter:brightness(0) invert(1)}
#app button{color:#fff}
#app .ending .preorder,#app .submit{background:#17130e;color:#fff;border-color:#877251}

#app button.hint{background:transparent;border:0;color:#a3947d;padding:10px 0;cursor:pointer;min-height:64px;width:100%}
#app button.hint:hover{color:#f0ddbd;background:transparent}
#app .role-picker{max-width:360px;margin:20px 0 25px}
#app .contact select{color:#fff}

#app dialog.contact{position:fixed;inset:0;margin:auto;width:calc(100% - 64px);max-width:740px;max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain;padding:35px;border:1px solid #79634280;border-radius:12px;background:linear-gradient(145deg,#19150f,#0d0c09 65%);color:#e6e3dc;box-shadow:0 35px 100px #000b,0 0 70px #af813513;scrollbar-width:thin;scrollbar-color:#685639 #100e0b}
#app dialog.contact:not([open]){display:none}
#app dialog.contact::backdrop{background:#030302bd;backdrop-filter:blur(9px)}
#app dialog.contact[open]{animation:being-dialog-enter 800ms linear both}
#app dialog.contact[open]::backdrop{animation:being-backdrop-enter 800ms linear both}
@keyframes being-backdrop-enter{from{background:#03030200;backdrop-filter:blur(0)}to{background:#030302bd;backdrop-filter:blur(9px)}}
#app dialog.contact .close{flex-shrink:0;border-color:#87725155;background:#ffffff03;border-radius:5px}
#app dialog.contact input,#app dialog.contact select,#app dialog.contact textarea{border-radius:5px;background:#ffffff03}
#app dialog.contact .submit{border-radius:5px}
#app dialog.contact .contact-head{gap:15px}
#app dialog.contact .role-picker{max-width:none;margin-bottom:10px}
@keyframes being-dialog-enter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){#app dialog.contact{width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:24px 20px;border-radius:10px}#app dialog.contact h2{font-size:23px}#app dialog.contact .contact-head{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#app dialog.contact[open],#app dialog.contact[open]::backdrop{animation:none}}

#app dialog.contact .role-picker{width:100%;max-width:320px;margin:24px auto 28px;text-align:center}
#app dialog.contact .role-picker label{position:relative;text-align:center}
#app dialog.contact .role-picker select{appearance:none;-webkit-appearance:none;width:100%;margin-top:12px;padding:13px 44px 13px 18px;text-align:left;cursor:pointer}
#app dialog.contact .role-picker label::after{content:"";position:absolute;right:19px;bottom:20px;width:7px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);pointer-events:none}

#app .invitation-gate{width:100%;max-width:320px;margin:28px auto 10px;text-align:center}
#app .invitation-gate label{letter-spacing:2px;font-size:11px}
#app .invitation-gate input{text-align:center;letter-spacing:2px;margin-top:14px}
#app .invitation-gate button{margin-top:18px;width:100%;border-radius:5px}
#app .invitation-gate .note{margin-top:18px;font-size:10px;letter-spacing:0}
#app .code-error{font-size:12px;line-height:1.5;color:#e4b595}

#app dialog.contact select{color-scheme:dark;background-color:#18140f;color:#fff}
#app dialog.contact select option{background-color:#18140f;color:#fff}
#app dialog.contact select option:checked{background-color:#544632;color:#fff}
#app dialog.contact select option:hover{background-color:#544632;color:#fff}

#app .invitation-gate label{font-size:9px;letter-spacing:2px}
#app .invitation-gate input{font-size:22px;font-weight:700;letter-spacing:3px;padding:15px 12px;color:#fff}
#app .invitation-gate input::placeholder{font-size:14px;font-weight:400;letter-spacing:1px}

#app .invitation-display{padding:15px 18px;margin:20px 0 24px;border:1px solid #87725166;border-radius:5px;background:#b99a6909;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#app .invitation-display span{font-size:9px;letter-spacing:2px;color:#cbbb9f}
#app .invitation-display strong{font-size:20px;letter-spacing:3px;color:#fff;overflow-wrap:anywhere}
/* Production layout: native document scrolling and a pinned cinematic scene. */
html{background:#070706;color-scheme:dark;scrollbar-color:#685639 #070706}body{margin:0;background:#070706}body.modal-open{overflow:hidden}button,input,textarea,select{font-family:inherit}button:disabled{cursor:wait;opacity:.6}.sr-only,.trap{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#app{min-height:100svh}#app .journey{height:300svh;min-height:1680px}#app .stage{height:100svh;min-height:560px;top:0}#app nav{padding:32px 4%}#app nav>span{font-size:12px}#app .opening{top:27%;font-size:11px}#app .light-position{left:10%;right:10%;top:48%}#app .reveal{top:25%}#app .reveal img{width:clamp(170px,20vw,255px);height:auto;filter:none}#app .ending{bottom:19%;gap:16px}#app .ending button{min-width:165px;font-size:14px;padding:17px 26px}#app .ground{left:4%;right:4%;bottom:28px;font-size:11px;letter-spacing:1.2px}#app .hint{bottom:16%;font-size:10px}#app .hint span{font-size:22px}#app .contact .eyebrow{font-size:11px}#app .contact h2{font-size:30px}#app .contact label{font-size:14px}#app .contact .role-picker label{font-size:14px}#app .contact .invitation-gate label{font-size:11px}#app .contact .invitation-gate input{font-size:22px}#app .contact .invitation-gate input::placeholder{font-size:14px}#app .contact input,#app .contact select,#app .contact textarea{font-size:16px}#app .contact button{font-size:13px}#app .privacy-copy{font-size:12px;line-height:1.6;color:#ac9d87;margin:22px 0 0}#app .field-error{color:#f0bfa4;font-size:12px;margin:7px 0 0;line-height:1.5}#app [aria-invalid="true"]{border-color:#e3ad89}#app .result{line-height:1.6}#app .contact .fields{margin-top:24px}#app .contact .message-label{margin-top:24px}#app .contact .submit{margin-top:22px}#app .no-script{padding:30px;text-align:center;color:#e2d1b5}#app .invitation-display strong{font-weight:700}
@media(max-width:600px){#app nav{padding:24px 22px}#app nav>span{font-size:10px}#app .opening{font-size:9px;letter-spacing:2px}#app .light-position{left:5%;right:5%}#app .ending{bottom:17%;gap:10px}#app .ending button{min-width:175px;font-size:13px}#app .reveal{top:25%}#app .ground{left:20px;right:20px;font-size:10px;letter-spacing:.5px;align-items:flex-end;line-height:1.5}#app .ground>span{max-width:145px}#app .contact .contact-head{flex-wrap:nowrap}#app .contact h2{font-size:25px}#app .contact .close{font-size:11px;padding:10px}#app .invitation-gate{max-width:100%}#app .contact .role-picker{max-width:320px;width:100%}}
@media(max-height:650px) and (min-width:601px){#app .reveal{top:22%}#app .reveal img{width:170px}#app .ending{bottom:15%}}

/* Center the reveal on desktop; size it against both viewport dimensions. */
@media (min-width:601px) {
  #app .reveal { top:0; bottom:0; justify-content:center; pointer-events:none; }
  #app .reveal img { width:clamp(220px,min(30vw,40svh),560px); height:auto; }
}

/* Procedural light and dithered atmosphere have no stretched blur textures. */
#app .stage { background:#070706; }
#app .dust { inset:0; height:auto; background:none; }
#app .ambient-canvas { display:block; width:100%; height:100%; }
#app .headlight-canvas { top:-120px; height:300px; }
#app .success{padding:36px 0 12px;text-align:center;outline:none}#app .success h3{font-weight:400;font-size:24px;letter-spacing:-.3px;margin:0 0 14px;color:#fff}#app .success p{color:#cbbb9f;font-size:15px;line-height:1.7;max-width:420px;margin:0 auto 26px}#app .success button{background:var(--warm);color:#17120b}

/* Drawn arrow for action buttons (the "↗" character turns into an emoji on iPhone and iPad). */
#app .submit::after,#app .invitation-gate button[type=submit]::after{content:'';display:inline-block;box-sizing:border-box;width:.7em;height:.7em;margin-left:.6em;vertical-align:.04em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;background:linear-gradient(to bottom right,transparent calc(50% - .75px),currentColor calc(50% - .75px),currentColor calc(50% + .75px),transparent calc(50% + .75px))}
#app .submit:disabled::after,#app .invitation-gate button[type=submit]:disabled::after{display:none}
