*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#008cff;scrollbar-width:none;overflow:hidden}
body{font-family:Arial,sans-serif}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
#app{position:relative;width:100%;height:100vh;height:var(--app-height,100dvh);overflow:hidden;background:linear-gradient(#008cff,#fff);isolation:isolate;--inset-top:max(env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px));--inset-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));--inset-left:max(env(safe-area-inset-left,0px),var(--tg-content-safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px));--inset-right:max(env(safe-area-inset-right,0px),var(--tg-content-safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px))}
.screen{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,1.5vh,20px);padding:calc(var(--inset-top) + clamp(8px,1.5vh,18px)) var(--inset-right) calc(var(--inset-bottom) + clamp(12px,2vh,24px)) var(--inset-left);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .42s ease,transform .42s ease,visibility .42s;pointer-events:none}
.screen.active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.visual{min-width:0;min-height:0;overflow:hidden}
.art{display:block;user-select:none;pointer-events:none}
.hero{width:100%;height:auto}
.details{width:90%;max-width:560px;justify-self:center;display:grid;justify-items:center;gap:clamp(12px,2vh,24px)}
.copy{width:96%;max-width:480px;color:#304a60;text-align:center;font-size:clamp(12px,1.8vh,18px);font-weight:700;line-height:1.15;display:grid;align-content:end;gap:clamp(6px,1.3vh,14px)}
.copy p{margin:0}
.action{position:relative;width:100%;height:clamp(44px,6.5vh,60px);display:flex;align-items:center;justify-content:center;padding:8px 12px;border:0;border-radius:999px;background:#0b91ff;color:#fff;font-family:inherit;font-size:clamp(12px,3.5vw,16px);font-weight:700;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s ease}
.button-content{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
.button-icon{display:block;width:24px;height:24px;flex:none}
.button-text{display:block;white-space:nowrap}
.action:hover{background:#259eff}.action:active{background:#0082ed}.action:focus-visible{outline:3px solid #fff;outline-offset:3px}.action:disabled{cursor:wait}.action.busy{background:#0b91ffcc}.action.busy .button-content{opacity:0}.action.busy::after{content:"";position:absolute;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:2px solid #ffffff55;border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .2s}.spinner{width:24px;height:24px;border:2px solid #ffffff66;border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}#loading[hidden]{display:none}
#notice{position:absolute;z-index:5;left:5%;right:5%;bottom:3%;padding:14px 16px;border-radius:16px;background:#fff;color:#0f2742;box-shadow:0 4px 24px #0f274222;font-size:14px;line-height:1.4;text-align:center}#notice[hidden]{display:none}#retry{margin:8px auto 0;border:0;border-radius:20px;padding:8px 18px;background:#0b91ff;color:#fff;font-weight:bold;cursor:pointer;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:480px) and (min-aspect-ratio:1/1){.screen{grid-template-columns:minmax(0,min(52%,calc((var(--app-height,100dvh) - var(--inset-top) - var(--inset-bottom) - 42px)*400/510))) minmax(200px,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(12px,3vw,48px)}.details{align-self:center;width:90%;margin-right:5%}.action{font-size:clamp(11px,1.7vw,16px)}}
@media(max-height:680px){.screen{gap:4px;padding-top:calc(var(--inset-top) + 6px);padding-bottom:calc(var(--inset-bottom) + 6px)}.details{gap:6px;width:94%}.copy{font-size:clamp(10px,1.85vh,12px);gap:5px}.action{height:44px}}
@media(prefers-reduced-motion:reduce){.screen{transition:none;transform:none}.spinner,.action.busy::after{animation-duration:1.5s}}
