#resultScreen:has(.compat-start){animation:none;width:calc(100% + 32px);margin-inline:-16px}
body:has(.compat-start){background:#2E2C2A}
body:has(.compat-start) .app{padding-bottom:0}
.compat-start{position:relative;overflow:hidden;padding:24px 18px 30px;background:#2E2C2A;font-family:'M PLUS Rounded 1c',sans-serif;-webkit-font-smoothing:antialiased}
.compat-start__ticker{position:absolute;left:-10px;top:0;height:200%;pointer-events:none}
.compat-start__ticker-text{font:400 92px/.86 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1.3px rgba(227,204,142,.13);animation:compat57-drift 30s linear infinite}
.compat-start__beam{position:absolute;top:0;width:260px;height:520px;pointer-events:none;display:block;animation:compat57-beam 3s ease-in-out infinite}
.compat-start__beam--left{left:-30px}
.compat-start__beam--right{right:-30px;animation-delay:1.5s}
.compat-start__title,.compat-start__section,.compat-start__back{position:relative}
.compat-start.is-entering .compat-start__title{animation:compat57-slideL .5s ease-out both}
.compat-start.is-entering .compat-start__section--ready{animation:compat57-rise .45s ease-out .15s both}
.compat-start.is-entering .compat-start__section--invite{animation:compat57-rise .45s ease-out .25s both}
.compat-start__kicker{font:800 12px/1 'Outfit',sans-serif;letter-spacing:.28em;color:#E3CC8E;text-transform:uppercase}
.compat-start__title h1{margin:10px 0 0;font:400 40px/1.1 'Dela Gothic One',sans-serif;color:#fff;text-shadow:3px 3px 0 #B0603F}
.compat-start__section--ready{margin-top:28px}
.compat-start__section--invite{margin-top:30px}
.compat-start__heading{border-bottom:2px solid #4F7365;padding-bottom:8px}
.compat-start__section--invite .compat-start__heading{border-bottom-color:#B0603F}
.compat-start__heading h2{margin:0;font:400 20px/1.2 'Dela Gothic One',sans-serif;color:#fff}
.compat-start__section p{margin:10px 0 0;font:700 13.5px/1.5 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.compat-start__section label{display:block;margin-top:14px;font:900 12px/1 'M PLUS Rounded 1c',sans-serif;color:#95C2AE}
.compat-start form{display:flex;flex-direction:column}
.compat-start__input{margin-top:8px;width:100%;box-sizing:border-box;height:58px;background:#1F1E1C;border:none;border-bottom:3px solid #4A4744;border-radius:0;padding:0 4px;font:400 32px/1 'Anton',sans-serif;letter-spacing:.14em;color:#E3CC8E;transition:border-color .2s}
.compat-start__input[data-code-state="partial"]{border-bottom-color:#95C2AE}
.compat-start__input[data-code-state="complete"]{border-bottom-color:#E3CC8E}
.compat-start__input::placeholder{color:#6B6560;opacity:1}
.compat-start__input:focus{outline:none}
.compat-start__button{box-sizing:border-box;width:100%;border:2px solid;border-radius:12px;background:#1F1E1C;box-shadow:none;font-family:'M PLUS Rounded 1c',sans-serif;cursor:pointer;transform:skewX(-6deg);padding:0}
.compat-start__button span{display:inline-block;transform:skewX(6deg)}
.compat-start__button--lookup{margin-top:16px;height:56px;border-color:#95C2AE;color:#95C2AE;font:900 18px/1 'M PLUS Rounded 1c',sans-serif;transition:border-color .2s,color .2s}
.compat-start__button--lookup:disabled{border-color:#56695F;color:#56695F;cursor:default;opacity:1}
.compat-start__button--invite{margin-top:14px;height:50px;border-color:#E9A27F;color:#E9A27F;font:900 15px/1 'M PLUS Rounded 1c',sans-serif}
.compat-start__error{color:#E9A27F;font:700 12px/1.6 'M PLUS Rounded 1c',sans-serif}
.compat-start__error:empty{display:none}
.compat-start__error .mypage-sticker-button{display:block;margin-top:8px}
.compat-start__back{display:block;margin-top:22px;text-align:center;padding:10px 0;border:0;background:none;font:900 14px/1 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE;text-decoration:none;cursor:pointer;width:100%;min-height:0}
@keyframes compat57-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes compat57-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes compat57-slideL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes compat57-beam{0%,100%{opacity:.45}50%{opacity:.85}}
@media (min-width:600px){body:has(.compat-start){background:#EFEBE4}main > #resultScreen:has(.compat-start){width:min(calc(100% - 32px),480px);margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.compat-start,.compat-start *{animation:none!important;transition:none!important}}
