/* Gareo web clone. Page geometry = the approved mockup (Interface/Mockup/gareo-flow.html), 393-pt design space
   scaled to the phone width with CSS zoom; the phone frame / review panel of the mockup are gone. */
@font-face{font-family:"Inter";src:url(fonts/Inter-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
html,body{margin:0;height:100%;overflow:hidden;background:#fff;color:#1a1a1a;color-scheme:light}
body{font-family:var(--ui);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden;background:#fff}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;box-sizing:border-box;padding-top:var(--st);will-change:transform,opacity}
.screen.full{padding-top:0}
.scroll{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.screen.nobar .scroll{padding-bottom:var(--sb)}
.content{position:relative;width:393px}
.content>img{display:block;width:393px;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.bar{flex:none;position:relative;background:#F9F7F5;padding-bottom:var(--sb)}   /* Unity BarBg */
.content.fit>img,.content.fit .obbase img{height:825px;object-fit:cover;object-position:top}
/* the page picture must paint above the positioned .backdrop (App 18 bug: Avatar pages = white page + "Emy") */
.content>img{position:relative}
.backdrop{position:absolute;top:0;height:825px;pointer-events:none}
.screen.explore .scroll{overflow:hidden}   /* Unity PageDef explore: scroll = false */
.bar .in{position:relative;width:393px;height:65.5px}
.bar img{display:block;width:393px;height:65.5px}
.hot{position:absolute;cursor:pointer;background:transparent;border:0;padding:0;border-radius:10px;-webkit-tap-highlight-color:transparent}
.hot:focus-visible{outline:2px solid #3b82f6}
.hot.dead{cursor:default}
.namefield{position:absolute;left:66px;top:673px;width:269px;height:37px;box-sizing:border-box;border:0;border-radius:7px;
  padding:0 0 0 16.5px;font:400 16px var(--ui);color:#1a1a1a;background:#fff;outline:none;-webkit-appearance:none;appearance:none}
.namefield::placeholder{color:#b3b3b3}
.patch{position:absolute;display:none;align-items:center;white-space:nowrap;font-family:var(--ui);font-weight:700;pointer-events:none}
.patch.show{display:flex}
.hold{position:absolute;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.disk{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;pointer-events:none;
  background:conic-gradient(rgba(255,255,255,.92) calc(var(--p,0)*1turn), transparent 0)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.splash{background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.splash img{width:62%;max-width:420px}
/* onboarding: the picture band slides, the rest fades */
.content.ob{touch-action:pan-y}
.obbase{position:absolute;inset:0}
.obbase img{position:absolute;left:0;top:0;width:393px;display:block;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.band{position:absolute;left:0;width:393px;overflow:hidden;pointer-events:none}
.track{display:flex;width:1179px;height:100%;will-change:transform}
.slide{flex:none;width:393px;height:100%;background-size:393px auto;background-repeat:no-repeat}
/* Explore: live back camera under the page picture (transparent scan window) */
.cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;pointer-events:none}
.screen.explore .scroll{background:transparent}
.content>img.scanicon{position:absolute;left:164px;top:331px;width:69px;height:69px;pointer-events:none}
.notice{position:absolute;left:24px;top:604px;width:345px;min-height:60px;margin:0;font:400 14px/1.35 var(--ui);color:#fff;
  text-align:center;display:none}
.notice.show{display:block}
/* AR page = 360 photo + overlay */
.pano{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.arTop{position:absolute;left:0;top:0;padding-top:var(--st);pointer-events:none}
.arTop .in{position:relative;width:393px;height:44px}
.arTop .hot{pointer-events:auto}
/* shared back chevron (Unity BuildAppUI.AddBack): 44-pt zone at x 4 on the safe-area top, does not scroll */
.chev{position:absolute;left:13px;top:15px;width:9.73px;height:16px;pointer-events:none;background:#1D1B20;
  -webkit-mask:url(img/back.png) center/100% 100% no-repeat;mask:url(img/back.png) center/100% 100% no-repeat}
.chev.light{background:#FEF7FF}
.arBot{position:absolute;left:0;bottom:0;pointer-events:none}
.arBot .in{position:relative;width:393px;height:852px}
.arBot .hot,.arBot .tl .hit{pointer-events:auto}
.photo{position:absolute;left:153px;top:722.5px;width:88px;height:89px;pointer-events:none}
.tl{position:absolute;left:0;top:0;width:393px;height:852px;pointer-events:none}
.tl .hit{cursor:pointer}
#err{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--sb));z-index:99;display:none;padding:6px 8px;border-radius:8px;
  background:#b00020;color:#fff;font:500 12px/1.3 var(--ui)}
@media (prefers-reduced-motion: reduce){.screen{transition:none!important}}