:root{--ink:#0a0908;--paper:#f0eadf;--sand:#caae86;--glass:rgba(12,10,8,.42);--sans:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);font-family:var(--sans);color:#fff}button,input{font:inherit}.app{position:fixed;inset:0;height:100svh;overflow:hidden;background:var(--ink)}.engine{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none}.app[data-engine="native"] .engine-native,.app[data-engine="swiper"] .engine-swiper,.app[data-engine="pixi"] .engine-pixi{visibility:visible;opacity:1;pointer-events:auto}
.loading{position:absolute;z-index:100;inset:0;display:grid;place-content:center;gap:16px;background:#0b0a09;text-align:center;transition:opacity .35s}.loading span{width:34px;height:34px;margin:auto;border:1px solid #665b4d;border-top-color:#f0eadf;border-radius:50%;animation:spin .8s linear infinite}.loading p{margin:0;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.app:not(.is-loading) .loading{opacity:0;pointer-events:none}@keyframes spin{to{transform:rotate(1turn)}}
.native-scroller{position:absolute;inset:0;overflow:auto;scroll-snap-type:both mandatory;scroll-behavior:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:auto}.native-scroller::-webkit-scrollbar{display:none}.native-grid{display:grid;grid-template-columns:repeat(15,100vw);grid-template-rows:repeat(3,100svh);width:1500vw;height:300svh}.native-cell{width:100vw;height:100svh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#191614}.native-cell img,.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.engine-swiper,.swiper,.swiper-wrapper,.swiper-slide{width:100%;height:100%}.engine-swiper{background:#191614}.tone-swiper>.swiper-wrapper>.swiper-slide{overflow:hidden}.product-swiper{width:100%;height:100%}.swiper-slide{overflow:hidden;background:#191614}.swiper-slide img{backface-visibility:hidden;transform:translateZ(0)}
.engine-pixi{background:#191614;touch-action:none}.engine-pixi canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
.lab-header{position:absolute;z-index:30;left:0;right:0;top:0;height:calc(62px + env(safe-area-inset-top));padding:calc(14px + env(safe-area-inset-top)) 18px 0;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;background:linear-gradient(rgba(4,3,2,.58),transparent)}.lab-title{display:grid;gap:4px;font-size:9px;font-weight:800;letter-spacing:.2em}.lab-title small{font-size:7px;font-weight:600;opacity:.62}.metrics-toggle{pointer-events:auto;padding:7px 9px;border:1px solid rgba(255,255,255,.3);border-radius:99px;background:rgba(8,7,6,.25);color:#fff;font-size:7px;font-weight:750;letter-spacing:.12em;backdrop-filter:blur(10px)}
.engine-switch{position:absolute;z-index:31;top:calc(64px + env(safe-area-inset-top));left:50%;display:flex;padding:3px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(8,7,6,.48);backdrop-filter:blur(15px);transform:translateX(-50%)}.engine-switch button{height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.64);font-size:8px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.engine-switch button b{margin-right:3px;font-size:7px}.engine-switch button.is-active{background:var(--paper);color:#14110e}
.test-copy{position:absolute;z-index:20;left:20px;right:20px;bottom:calc(151px + env(safe-area-inset-bottom));text-shadow:0 2px 18px #000;pointer-events:none}.test-copy p{margin:0 0 7px;font-size:8px;font-weight:800;letter-spacing:.17em}.test-copy span{font-size:8px;line-height:1.5;letter-spacing:.035em;opacity:.82}.metrics{position:absolute;z-index:40;right:16px;top:calc(108px + env(safe-area-inset-top));display:none;padding:10px 11px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(8,7,6,.7);backdrop-filter:blur(14px);font-size:7px;line-height:1.7;letter-spacing:.08em}.metrics.is-open{display:grid}.metrics b{font-variant-numeric:tabular-nums}
.commerce{position:absolute;z-index:25;left:0;right:0;bottom:0;padding:0 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(5,4,3,.86) 34%,rgba(5,4,3,.98));pointer-events:none}.scrubber-shell{position:relative;height:55px;display:flex;align-items:center;pointer-events:auto;touch-action:none}.scrubber-shell span{position:absolute;right:0;top:5px;font-size:8px;font-weight:800;letter-spacing:.14em}.scrubber-shell i{position:absolute;left:0;right:0;top:32px;height:1px;background:rgba(255,255,255,.56);pointer-events:none}.scrubber-shell i:after{content:"";position:absolute;left:var(--progress,0%);top:50%;width:14px;height:14px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:var(--sand);box-shadow:0 0 0 6px rgba(8,7,6,.28);transform:translate(-50%,-50%)}#scrubber{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;opacity:.001;touch-action:none}.add-button{width:100%;height:50px;border:0;background:var(--paper);color:#17130f;pointer-events:auto;font-size:9px;font-weight:850;letter-spacing:.16em}.add-button span{margin-left:8px;color:#8b755a}.add-button:active{transform:scale(.985)}.toast{position:absolute;z-index:60;left:50%;top:calc(122px + env(safe-area-inset-top));padding:10px 14px;border-radius:99px;background:rgba(8,7,6,.74);backdrop-filter:blur(12px);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translate(-50%,-8px);transition:.25s;pointer-events:none}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.app:after{content:"Open this lab on your iPhone.";position:absolute;z-index:200;inset:0;display:grid;place-items:center;background:#0a0908;font-family:Georgia,serif;font-size:28px}.app>*{visibility:hidden}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}