:root { --ink:#f5efe5; --muted:#b9afa0; --gold:#c9a66b; --line:rgba(246,239,228,.17); --background:#12100d; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--background); color:var(--ink); font:16px/1.5 Georgia,"Times New Roman",serif; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 50% 12%,#493b2929 0,transparent 36%),linear-gradient(145deg,#17130f,#0e0d0b 72%); }
.experience { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100dvh; width:min(100%,620px); margin:auto; padding:clamp(28px,7vw,52px) clamp(25px,8vw,52px) 22px; }
.brand { min-height:44px; display:flex; align-items:center; justify-content:center; } .brand img { display:block; max-width:165px; max-height:48px; object-fit:contain; filter:brightness(0) invert(1); } .brand-wordmark { color:#f3e9db; font-size:1.05rem; letter-spacing:.42em; padding-left:.42em; }
.stage { flex:1; display:flex; flex-direction:column; justify-content:center; animation:appear .55s ease both; }.hidden { display:none !important; }.loading { align-items:center; gap:15px; color:var(--muted); font-style:italic; }.loader { width:26px; height:26px; border:1px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
.kicker { margin:0 0 17px; color:var(--gold); font:700 .64rem/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.22em; }.stage h1 { margin:0; max-width:510px; font-size:clamp(2.7rem,12vw,5rem); font-weight:400; line-height:.95; letter-spacing:-.055em; }.body-copy { max-width:360px; margin:25px 0 0; color:var(--muted); font-size:1.05rem; }.button { width:fit-content; margin-top:31px; border:1px solid var(--gold); border-radius:100px; background:var(--gold); color:#17120d; padding:14px 24px; font:700 .74rem/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }.button:hover { background:#e1c48d; }.back { width:fit-content; margin:0 0 36px; border:0; background:transparent; color:var(--muted); font:600 .8rem/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.upload-card { display:flex; flex-direction:column; gap:8px; max-width:390px; margin-top:28px; padding:23px; border:1px dashed #bda17077; border-radius:12px; color:#efe5d7; cursor:pointer; }.upload-card small { color:var(--muted); font:400 .77rem/1.4 ui-sans-serif,system-ui,sans-serif; }.upload-icon { color:var(--gold); font:1.7rem/1 ui-sans-serif,system-ui,sans-serif; }.local-preview { width:100%; max-height:280px; margin-top:18px; border-radius:11px; background:#000; object-fit:cover; }.microcopy { min-height:1.4em; color:var(--muted); font-size:.8rem; }
.message-stage { justify-content:center; }.video-shell { position:relative; overflow:hidden; width:100%; aspect-ratio:9/13; max-height:70dvh; margin-top:15px; border:1px solid #b49a6b36; border-radius:4px; background:#080706; box-shadow:0 25px 70px #0009; }.video-shell video { position:absolute; width:100%; height:100%; object-fit:cover; }.video-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#0008,transparent 48%); }.play-button { position:absolute; z-index:1; left:50%; top:50%; width:68px; height:68px; transform:translate(-50%,-50%); border:1px solid #fff9; border-radius:50%; background:#17110cb8; cursor:pointer; }.play-button span { display:block; width:0; height:0; margin-left:4px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; }.video-shell.playing .play-button { opacity:0; pointer-events:none; }.message-caption { margin:18px 0 0; color:var(--muted); text-align:center; font-size:.9rem; font-style:italic; }
footer { display:flex; justify-content:space-between; gap:8px; padding-top:24px; border-top:1px solid var(--line); color:#81796e; font:600 .55rem/1.4 ui-sans-serif,system-ui,sans-serif; letter-spacing:.08em; } @keyframes spin { to { transform:rotate(360deg); } } @keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }