@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+SC:wght@400;700;900&display=swap");
:root { --ink:#0a0a09; --paper:#ede5d1; --red:#ef4a23; --acid:#d6f44b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; min-height:100dvh; color:var(--paper); background:radial-gradient(circle at 72% 22%,#392018 0,transparent 29rem),repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(255,255,255,.025) calc(12.5% - 1px) 12.5%),#090908; font-family:"Noto Sans SC",sans-serif; }
body::after { content:""; position:fixed; inset:0; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gate { min-height:100vh; display:grid; place-items:center; padding:30px; }
.ticket { width:min(900px,94vw); min-height:560px; display:grid; grid-template-columns:1.05fr .95fr; position:relative; border:1px solid #49473f; background:linear-gradient(90deg,#11110f 0 52.5%,var(--paper) 52.5%); box-shadow:0 35px 110px #000; overflow:hidden; }
.ticket-edge { position:absolute; z-index:0; inset:0 auto 0 52.5%; border-left:2px dashed rgba(10,10,9,.32); }
.brand { position:absolute; left:42px; top:35px; display:flex; align-items:center; gap:12px; }.brand>span { display:grid; place-items:center; width:50px; height:50px; color:var(--ink); background:var(--red); font:27px "Bebas Neue"; transform:rotate(-3deg); }.brand b,.brand small { display:block; }.brand b { letter-spacing:.14em; }.brand small { color:#858177; font:11px "Bebas Neue"; letter-spacing:.2em; }
.copy { align-self:end; padding:50px 48px; }.copy p { color:var(--acid); font:15px "Bebas Neue"; letter-spacing:.25em; }.copy h1 { margin:7px 0 20px; font:108px/.76 "Bebas Neue"; font-weight:400; }.copy span { color:#8b8980; font-size:13px; }
form { position:relative; z-index:1; align-self:center; padding:68px 55px 45px; color:var(--ink); } label { display:block; margin-bottom:24px; font-size:12px; font-weight:900; letter-spacing:.1em; } input { display:block; width:100%; min-height:52px; margin-top:8px; padding:13px 2px; border:0; border-bottom:2px solid #aaa391; border-radius:0; outline:0; background:transparent; color:var(--ink); -webkit-text-fill-color:var(--ink); line-height:1.4; font-size:17px; } input:focus { border-color:var(--red); } input:-webkit-autofill { -webkit-text-fill-color:var(--ink); box-shadow:0 0 0 1000px var(--paper) inset; } button { width:100%; margin-top:12px; padding:16px; border:0; background:var(--red); color:var(--ink); font-weight:900; cursor:pointer; box-shadow:7px 7px 0 #161613; } button i { float:right; font-style:normal; } button:disabled { opacity:.55; cursor:wait; } #error { min-height:20px; color:#b52e16; font-size:12px; }
.serial { position:absolute; right:30px; bottom:20px; color:#6d685d; font:12px "Bebas Neue"; letter-spacing:.2em; }
@media(max-width:700px){.gate{min-height:100dvh;padding:0}.ticket{width:100%;min-height:100vh;min-height:100dvh;grid-template-columns:1fr;background:linear-gradient(180deg,#11110f 0 42%,var(--paper) 42%)}.ticket-edge{display:none}.brand{left:max(24px,env(safe-area-inset-left));top:max(25px,env(safe-area-inset-top))}.copy{align-self:auto;padding:112px 25px 32px}.copy h1{font-size:72px}form{padding:38px max(25px,env(safe-area-inset-right)) max(56px,calc(32px + env(safe-area-inset-bottom))) max(25px,env(safe-area-inset-left))}button{min-height:52px;font-size:15px}.serial{display:none}}
@media(max-width:700px) and (max-height:700px){.copy{padding-top:96px;padding-bottom:24px}.copy h1{font-size:60px;margin-bottom:12px}form{padding-top:28px}label{margin-bottom:16px}}