:root{font-family:Arial,sans-serif;color:#fff;background:#090b12;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overscroll-behavior:none}body{overflow:hidden}.app{--top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px);height:100svh;height:100dvh;width:100%;position:relative;isolation:isolate;overflow:hidden;background:#151e32}.hud{position:absolute;z-index:4;top:var(--top);left:0;right:0;display:flex;align-items:center;gap:18px;padding:15px 20px;pointer-events:none}.hud button{pointer-events:auto}.track{height:3px;flex:1;background:#ffffff1c;border-radius:3px;overflow:hidden}.track>div{height:100%;background:#80e7c5;transition:width .25s}.icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff26;border-radius:50%;background:#ffffff0b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:26px Arial,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.small{width:40px;height:40px;font-size:24px}.icon:disabled{opacity:.28;cursor:default}.icon:focus-visible{outline:3px solid #f4ba5d;outline-offset:3px}.icon:active:not(:disabled){transform:scale(.92)}.feed{position:absolute;top:0;right:0;bottom:0;left:0}.under-card{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:1px solid #ffffff12;border-radius:26px;background:linear-gradient(135deg,#2d3553,#101b2b);display:grid;place-items:center;font-size:65px;color:#ffffff20}.card{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:calc(76px + var(--top)) 12px calc(16px + var(--bottom));background:linear-gradient(160deg,#202c45,#0f192b);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;transform-origin:center 75%;transition:transform .22s ease-out}.card.dragging,.card.instant{transition:none}.card.dragging{cursor:grabbing}.card.leaving{transition:transform .23s ease-in}.scene{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.controls{position:absolute;z-index:4;bottom:0;left:0;right:0;padding:20px 35px calc(20px + var(--bottom));display:flex;align-items:center;justify-content:space-between;background:linear-gradient(transparent,#10192bc9)}.answer{width:66px;height:66px;font-size:31px;box-shadow:0 9px 20px #0003}.no{background:#4a253b;border-color:#ff8eb04d;color:#ff8eb0}.yes{background:#1b443f;border-color:#80efca4d;color:#80efca}.next{width:44px;height:44px;font-size:25px;color:#d1d8e9}.vertical-stamp{position:absolute;top:38%;font-size:72px;text-shadow:0 0 20px #000}.result{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:94px;color:#9dffde;background:#062b2260;box-shadow:inset 0 0 0 5px #80efca;pointer-events:none;text-shadow:0 4px 30px #071a15}.failure .result{background:#39102860;color:#ffacc6;box-shadow:inset 0 0 0 5px #ff8eb0}.complete{font-size:100px;color:#80efca}.spinner{width:36px;height:36px;border:3px solid #ffffff24;border-top-color:#9db9ec;border-radius:50%;animation:spin 1s linear infinite}.picture-spinner{position:absolute}.error{position:absolute;z-index:7;top:calc(80px + var(--top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:15px;padding:10px 16px;border:1px solid #ff8eb06b;background:#41243bed;border-radius:18px}.error>span{font-size:24px}.modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#0d1423ee;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:grid;place-items:center}.close{position:absolute;top:calc(20px + var(--top));right:20px}.gestures{display:grid;grid-template-columns:85px 85px 85px;grid-template-rows:100px 100px 100px;align-items:center;justify-items:center;font-size:32px}.gestures>div{display:flex;gap:8px;flex-direction:column;align-items:center}.gestures span{font-size:24px;color:#abc1e3}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.hand{grid-column:2;grid-row:2;font-size:54px}.right{grid-column:3;grid-row:2}.down{grid-column:2;grid-row:3}.left span{color:#ff8eb0}.right span{color:#80efca}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:540px){.app{max-width:460px;margin:0 auto}}@media(max-height:650px){.card{padding-top:calc(64px + var(--top));padding-bottom:calc(12px + var(--bottom))}.controls{padding:12px 30px calc(15px + var(--bottom))}.answer{width:56px;height:56px}.hud{padding-top:10px;padding-bottom:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.version{position:absolute;bottom:calc(25px + var(--bottom));font-size:12px;letter-spacing:2px;color:#96a9c8}.error-detail{max-width:220px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.error{max-width:calc(100vw - 32px)}.showing-feedback .scene,.showing-feedback .picture-spinner,.showing-feedback .hud,.showing-feedback .controls{visibility:hidden;pointer-events:none}.showing-feedback .result{background:#102c26}.showing-feedback .failure .result{background:#321c2c}.card{background:#f7fbfe}.scene{filter:drop-shadow(0 8px 20px #061d3820)}.hud,.controls{background:#14243a}.under-card{background:#dcebf3}.swiping-yes,.swiping-yes .under-card,.swiping-yes .card{background:#18865b}.swiping-no,.swiping-no .under-card,.swiping-no .card{background:#bd3548}.swiping-yes .controls,.swiping-no .controls{visibility:hidden}.app{max-width:none;width:min(100%,calc((100dvh - 48px)*.5628));margin:0 auto;background:#f5f5f2}.card{padding:calc(48px + var(--top)) 0 var(--bottom);background:#f5f5f2}.scene{filter:none;object-fit:contain;width:100%;height:100%}.hud{padding:6px 10px;gap:12px;background:#14243a}.hud .small{width:34px;height:34px;font-size:21px}.under-card{top:0;right:0;bottom:0;left:0;border:0;border-radius:0}.scene.photo-scene{object-fit:cover;object-position:50% 50%}.scene.stop-scene{object-position:80% 50%}.scene.mirror-photo-scene{object-position:100% 50%}.scene{object-fit:cover;filter:none}.app{width:min(100%,calc(100dvh * .5628))}.card{padding:0}.hud{top:var(--top);height:0;padding:0;background:transparent;display:block}.hud .track{position:absolute;top:22px;left:12px;right:56px;height:3px;background:#15223655;box-shadow:0 0 1px #fff5}.hud .small{position:absolute;top:6px;right:10px;background:#14243a66;border-color:#ffffff50}.hud{top:0}.hud .track{top:0;left:0;right:0;border-radius:0;height:3px}.training{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 26px;text-align:center;background:#111d2c;color:#f7f9fc;overflow:auto}.training-step{font-size:11px;letter-spacing:2px;color:#aab9ce;margin-bottom:28px}.training-example{font-size:clamp(44px,9vw,64px);font-weight:700;color:#80e7c5;margin:12px 0 26px}.training-wrong{color:#ff97a5}.training h1{font-size:30px;line-height:1.1;margin:0 0 18px}.training p{max-width:310px;font-size:16px;line-height:1.5;margin:5px 0;color:#c5d1e1}.training .training-description{font-size:20px;color:#fff}.training-arrow{font-size:68px;color:#80e7c5;margin:20px 0 0;animation:training-nudge 1.4s ease-in-out infinite}.training-arrow.vertical{animation-name:training-nudge-y}.training-ready{display:flex;gap:25px;margin-top:28px;font-size:14px;color:#80e7c5}.training .training-hint{min-height:48px;font-size:14px;color:#ffd58f;margin-top:12px}@keyframes training-nudge{50%{transform:translate(var(--nudge-x,10px))}}@keyframes training-nudge-y{50%{transform:translateY(var(--nudge-y,10px))}}@media(max-height:600px){.training{padding:22px}.training-step{margin-bottom:12px}.training-example{margin:8px 0 16px;font-size:42px}.training h1{font-size:26px}.training-arrow{margin-top:8px;font-size:48px}.training p{font-size:14px}}.completed-screen{text-align:center;color:#66778c}.completed-screen p{font-size:15px;margin-top:24px}.restart-prompt{position:absolute;top:0;right:0;bottom:0;left:0}.training{overflow:hidden;touch-action:none}.training>*{pointer-events:none}.training .training-ready{font-size:34px;gap:60px}.training .training-hint{font-size:28px}
