@font-face{font-family:'RB No2 Light';src:url(../fonts/RBNo2Light.ttf) format('truetype');font-weight:300}
@font-face{font-family:'Myriad Pro';src:url(../fonts/MyriadPro-Regular.ttf) format('truetype');font-weight:400}
@font-face{font-family:'Myriad Pro';src:url(../fonts/MyriadPro-It.ttf) format('truetype');font-style:italic;font-weight:400}
@font-face{font-family:'Myriad Pro';src:url(../fonts/MyriadPro-Bold.ttf) format('truetype');font-weight:700}

html,body{margin:0;height:100%;background:#000;overflow:hidden;-webkit-text-size-adjust:100%}
body{font-family:'Myriad Pro','Helvetica Neue',Arial,sans-serif;color:#111;touch-action:none;-webkit-user-select:none;user-select:none}
button{font-family:inherit}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
a{text-decoration:none;color:inherit}

/* The app fills its host (the phone screen in the frame, or the real phone). */
#app{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--w);height:var(--h);overflow:hidden;background:#000}
.v2012{--w:320px;--h:480px;--status:20px;--nav-h:44px;--nav-img-h:58px;--nav-top:0px;--btn:30px;--btn-top:7px;--safe-b:0px;--pink:#f20492}
.v2026{--w:390px;--h:844px;--status:0px;--nav-h:54px;--nav-img-h:71px;--nav-top:54px;--btn:37px;--btn-top:62px;--safe-b:34px;--pink:#f20492}

.screen{position:absolute;inset:var(--status) 0 0 0;background:#fff url(../img/ui/dots.png) 0 0/var(--w) auto;overflow:hidden;will-change:transform,opacity}
.screen.black{background:#000}
.screen.hidden{display:none}
/* push / pop */
.screen.enter{animation:pushIn .3s cubic-bezier(.2,.8,.2,1) both}
.screen.leave{animation:pushOut .3s cubic-bezier(.2,.8,.2,1) both}
.screen.enter-back{animation:popIn .3s cubic-bezier(.2,.8,.2,1) both}
.screen.leave-back{animation:popOut .3s cubic-bezier(.2,.8,.2,1) both}
.v2026 .screen.enter,.v2026 .screen.leave,.v2026 .screen.enter-back,.v2026 .screen.leave-back{animation-duration:.38s}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pushOut{from{transform:none}to{transform:translateX(-28%);filter:brightness(.88)}}
@keyframes popIn{from{transform:translateX(-28%);filter:brightness(.88)}to{transform:none}}
@keyframes popOut{from{transform:none}to{transform:translateX(100%)}}

/* nav bar */
.nav{position:absolute;left:0;top:0;width:100%;height:calc(var(--nav-top) + var(--nav-img-h));z-index:5;pointer-events:none}
.v2026 .nav::before{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--nav-top) + 2px);background:#fb2075}
.nav img.bar{position:absolute;left:0;top:var(--nav-top);width:100%;height:var(--nav-img-h)}
.nav h1{position:absolute;left:15%;width:70%;top:var(--nav-top);height:var(--nav-h);margin:0;display:flex;align-items:center;justify-content:center;font-family:'RB No2 Light','Oswald',sans-serif;font-weight:300;font-size:40px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.7);white-space:nowrap}
.v2026 .nav h1{font-size:49px}
.nav button{position:absolute;top:var(--btn-top);width:var(--btn);height:var(--btn);padding:0;border:0;background:none;pointer-events:auto;cursor:pointer}
.nav button img{width:100%;height:100%;display:block}
.nav .back{left:10px}.v2026 .nav .back{left:15px}
.nav .next{right:10px}.v2026 .nav .next{right:15px}
.nav .vid{right:46px}.v2026 .nav .vid{right:63px}
.nav .gui{right:8px}.v2026 .nav .gui{right:17px}

/* start */
.start .ph{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;animation:ken var(--cycle) linear infinite;transform-origin:45% 40%}
@keyframes ken{0%{opacity:1;transform:scale(1.04)}20%{opacity:1}30%{opacity:0;transform:scale(1.12)}89.9%{opacity:0;transform:scale(1.12)}90%{opacity:0;transform:scale(1)}100%{opacity:1;transform:scale(1.04)}}
.start .layer,.start .hit{position:absolute;display:block}
.start .hit{border:0;background:none;padding:0;cursor:pointer}
.start .hit img{width:100%;height:100%;display:block}
.start .hit:active img{filter:brightness(1.15)}

/* look selection */
.select .lbl{position:absolute;left:0;width:100%;margin:0;text-align:center;font-family:'RB No2 Light','Oswald',sans-serif;font-weight:300;color:#222}
.select .abs{position:absolute;display:block}
.select .rows{position:absolute;display:flex;flex-direction:column}
.select .row{display:flex;align-items:center;justify-content:center;font-weight:700;color:#111;opacity:.35;background:url(../img/ui/sep.png) 50% 100%/88% 2px no-repeat}
.select .demo{border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;letter-spacing:2px;color:#fff;background:#f20492;cursor:pointer;animation:demo 1.6s ease-in-out infinite}
.v2026 .select .demo{border-radius:10px;animation-duration:1.4s}
@keyframes demo{0%,100%{box-shadow:0 0 0 0 rgba(242,4,146,.45)}50%{box-shadow:0 0 0 7px rgba(242,4,146,0)}}
.select .swatches{position:absolute;display:flex;opacity:.28}
.select .sw{position:relative;display:block}
.select .sw i{position:absolute;display:block;border:2px solid #fff;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.select .note{position:absolute;margin:0;text-align:center;font-style:italic;color:#333;text-shadow:0 0 6px #fff,0 0 6px #fff}

/* looks: vertical pile */
.looks .pile{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.v2026 .looks .pile{transition-duration:.6s}
.looks .pile.flip{transform:rotateY(180deg)}
.looks .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.looks .face.back{transform:rotateY(180deg)}
.card{position:absolute;width:233px;height:286px;left:var(--card-left);transform-origin:50% 0;transition:transform .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),opacity .3s;cursor:pointer}
.card.drag{transition:none}
.card .cover{position:absolute;left:22px;top:30px;width:190px;height:194px;object-fit:cover;object-position:50% 0}
.card .frame{position:absolute;left:0;top:0;width:233px;height:286px;pointer-events:none}
.card .heart{position:absolute;left:160px;top:90px;width:61px;height:83px;border:0;background:none;padding:0;cursor:pointer}
.card .heart img{width:100%;height:100%;display:block}
.card .heart.pop img{animation:pop .32s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.card .t{position:absolute;left:20px;top:216px;width:190px;height:30px;margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:16px;line-height:30px;color:var(--pink);white-space:nowrap}
.card .d{position:absolute;left:20px;top:240px;width:190px;margin:0;font-size:9px;line-height:1.3;color:#333}
.card .ribbon{position:absolute;left:22px;top:30px;width:190px;height:194px;overflow:hidden;pointer-events:none}
.card .ribbon span{position:absolute;right:-34px;top:14px;width:130px;padding:4px 0;background:var(--pink);color:#fff;font-weight:700;font-size:11px;letter-spacing:3px;text-align:center;transform:rotate(45deg);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.v2026 .card{filter:drop-shadow(0 10px 16px rgba(0,0,0,.22))}
.looks .empty{position:absolute;left:10%;width:80%;top:45%;text-align:center;font-size:14px;color:#555}

/* guide */
.guide{background:#000}
.guide .pages{position:absolute;left:0;width:100%;perspective:1200px}
.guide .page{position:absolute;left:0;top:0;width:100%;height:100%;background:#000}
.guide .page img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.guide .page.under{z-index:1}
.guide .page.top{z-index:2}
.guide .fold{position:absolute;top:0;height:100%;z-index:3;overflow:hidden;pointer-events:none;display:none;background:#f6f6f6}
.guide .fold img{position:absolute;top:0;height:100%;transform:scaleX(-1);opacity:.38}
.guide .fold .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.1) 35%,rgba(255,255,255,0) 70%,rgba(0,0,0,.3))}
.guide .shadow{position:absolute;top:0;height:100%;width:70px;z-index:2;pointer-events:none;display:none;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.guide .toolbar{position:absolute;left:0;width:100%;bottom:0;z-index:6;transition:transform .22s ease,opacity .22s ease}
.guide .toolbar.hidden-bar{transform:translateY(100%);opacity:0;pointer-events:none}
.guide .toolbar img.bar{width:100%;display:block}
.guide .toolbar button{position:absolute;border:0;background:none;padding:0;cursor:pointer}
.guide .toolbar button img{width:100%;height:100%;display:block}
.guide .mirror-view{position:absolute;inset:0;z-index:7;background:#000;display:none}
.guide .mirror-view video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.guide .mirror-view.on{display:block}

/* favourites */
.faves .abs{position:absolute;display:block}
.faves .list{position:absolute;display:flex;flex-direction:column;overflow:hidden}
.faves .row{position:relative;display:block;flex:none;background:url(../img/ui/sep_fav.png) 0 100%/100% 2px no-repeat;cursor:pointer;animation:rowIn .35s ease-out both}
.faves .row:last-child{background:none}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.faves .row img.th{position:absolute;object-fit:cover;object-position:50% 0}
.faves .row img.fr{position:absolute}
.faves .row .t{position:absolute;display:flex;align-items:center;font-family:Georgia,serif;font-style:italic;color:var(--pink);white-space:nowrap}
.faves .row .d{position:absolute;color:#333}
.faves .row img.go{position:absolute}
.faves .row .del{position:absolute;left:-40px;top:50%;width:30px;height:30px;margin-top:-15px;border:0;border-radius:15px;background:#d0021b;color:#fff;font-size:18px;line-height:30px;padding:0;cursor:pointer;transition:left .25s cubic-bezier(.2,.8,.2,1)}
.faves.editing .row .del{left:4px}
.faves .edit{position:absolute;border:0;background:none;padding:0;cursor:pointer}
.faves .edit img{width:100%;height:100%;display:block}
.faves .none{position:absolute;left:15%;width:70%;top:45%;text-align:center;font-size:14px;color:#555}

/* video */
.video{background:#141416}
.video .top{position:absolute;left:0;top:0;width:100%;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 10px;box-sizing:border-box;color:#fff;font-weight:700;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))}
.video .done{font-size:13px;font-weight:700;color:#fff;background:#f20492;border:0;border-radius:5px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.video iframe{position:absolute;left:0;border:0;width:100%;background:#000}
.video .logo{position:absolute;right:12px;bottom:calc(10px + var(--safe-b));height:22px;opacity:.9}

/* framed landscape: the iframe itself is landscape-sized, so the video screen fills it edge to edge */
html.land #app{left:0;top:0;width:100%;height:100%;transform:none}
html.land .video iframe{top:0!important;height:100%!important}
html.land .video .logo{display:none}

/* the face turned away must not take taps (cards set pointer-events inline, hence !important) */
.looks .pile:not(.flip) .face.back,.looks .pile:not(.flip) .face.back *{pointer-events:none!important}
.looks .pile.flip .face.front,.looks .pile.flip .face.front *{pointer-events:none!important}

/* 2012: the 20pt iOS status bar (black; carrier, time, battery) */
.statusbar{position:absolute;left:0;top:0;width:100%;height:20px;background:#000;color:#fff;font:bold 12px/20px 'Helvetica Neue',Helvetica,Arial,sans-serif;z-index:20}
.statusbar .sig{position:absolute;left:6px;top:7px;display:flex;gap:2px;align-items:flex-end}
.statusbar .sig i{display:block;width:4px;height:7px;border-radius:50%;background:#fff}
.statusbar .car{position:absolute;left:38px;top:0}
.statusbar .time{position:absolute;left:0;width:100%;text-align:center;top:0}
.statusbar .bat{position:absolute;right:6px;top:5px;width:22px;height:10px;border:1px solid #fff;border-radius:2px;box-sizing:border-box}
.statusbar .bat::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:4px;background:#fff}
.statusbar .bat i{position:absolute;left:1px;top:1px;bottom:1px;width:16px;background:#fff}
html.land .statusbar{display:none}
html.land .screen{inset:0}

/* desktop arrows: only for mouse / trackpad users; phones and tablets keep swiping */
.arrow{position:absolute;display:none;border:0;background:none;padding:0;cursor:pointer;z-index:4;transition:transform .15s ease,filter .15s ease}
.arrow img{width:100%;height:100%;display:block;pointer-events:none}
.faves .chev{position:absolute;border:0;background:none;padding:0;cursor:pointer;z-index:4;transition:transform .15s ease,filter .15s ease}
.faves .chev img{width:100%;height:100%;display:block}
@media (hover:hover) and (pointer:fine){
  .arrow{display:block}
  .arrow:hover,.faves .chev:hover{transform:scale(1.18);filter:brightness(1.15) drop-shadow(0 0 3px rgba(242,4,146,.5))}
  .arrow:active,.faves .chev:active{transform:scale(1.02)}
}
.arrow,.faves .chev{outline:none;-webkit-tap-highlight-color:transparent}
.arrow:focus-visible,.faves .chev:focus-visible{outline:2px solid #e14789;outline-offset:2px}