/* The picker and tutorial share the same hardware viewport. */
:root{--brand-width:clamp(140px,22dvh,230px);--brand-top:calc(env(safe-area-inset-top) + 76px);--hardware-top:calc(var(--brand-top) + var(--brand-width) * .3075 + 20px);--hardware-bottom:calc(env(safe-area-inset-bottom) + 184px)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}
.chooser{height:100dvh;min-height:0;padding:0;display:block}
.chooser-brand,.brand-banner{position:fixed;z-index:3;top:var(--brand-top);left:50%;transform:translateX(-50%);width:var(--brand-width);max-width:none;aspect-ratio:2000/615;margin:0}
.chooser-brand img,.brand-banner .brand-logo{width:100%;height:auto}
.mpc-lineup,.coming-page .mpc-lineup{position:fixed;top:var(--hardware-top);bottom:var(--hardware-bottom);left:24px;right:24px;width:auto;min-height:0;padding:0;margin:0;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;align-items:stretch;cursor:grab}
.mpc-lineup::-webkit-scrollbar{display:none}
.mpc-lineup.dragging{scroll-snap-type:none;cursor:grabbing}
.mpc-lineup .unit,.mpc-lineup .unit:nth-child(5){flex:0 0 100%;width:100%;height:100%;min-width:0;padding:0;gap:0;display:flex;align-items:center;justify-content:center;container-type:size;scroll-snap-align:center;scroll-snap-stop:always;user-select:none}
.mpc-lineup .unit-visual,.mpc-lineup .unit:nth-child(5) .unit-visual{width:min(100cqw,calc(100cqh / var(--ratio)));height:min(100cqh,calc(100cqw * var(--ratio)));aspect-ratio:1/var(--ratio);min-height:0;animation:none;flex-shrink:0;transition:none}
.mpc-lineup .unit-visual img{display:block;width:100%;height:100%;max-height:none;max-width:none;object-fit:contain}
.mpc-lineup .unit-visual.sample img{clip-path:polygon(5.3% 1.25%,25.8% 1.25%,25.8% .75%,26.4% .5%,27.4% .45%,29.5% .6%,30.6% .9%,30.6% 1.25%,94.5% 1.25%,95.7% 1.7%,97.2% 3%,98.8% 4.5%,99.2% 5.7%,99.2% 7%,98.4% 33%,97.6% 66%,96.7% 96.8%,96.2% 98%,95% 98.8%,94% 99.1%,4.4% 99.1%,3.3% 98.8%,2.6% 98%,2.1% 96.8%,1.7% 64%,1.2% 33%,.6% 7%,.8% 5.5%,1.4% 4.2%,3.2% 2.6%,4.3% 1.7%)}
.picker-controls{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 67px);left:16px;right:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.picker-model{font-size:18px;font-weight:600;line-height:1.3;min-height:42px;display:flex;flex-direction:column;justify-content:center}
.picker-model .unit-status{margin-top:2px;font-size:14px;line-height:1.2}
.picker-pagination{display:flex;align-items:center;gap:16px;height:44px}
.picker-pagination>button{font:inherit;font-size:27px;color:inherit;background:transparent;border:0;width:44px;height:44px;border-radius:50%;line-height:1;cursor:pointer}
.picker-pagination>button:disabled{opacity:.25;cursor:default}
.picker-dots{display:flex;gap:0;align-items:center}
.picker-dot{position:relative;width:28px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.picker-dot:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#8f9fb2;left:11px;top:19px;transition:width .2s,background .2s}
.picker-dot[aria-current=true]:after{width:16px;left:6px;background:#58b6ff}
.swipe-hint{display:flex;gap:9px;align-items:center;font-size:14px;color:#a6b2c1;line-height:1.4;animation:swipe-hint-dismiss .7s ease 6s forwards}
@keyframes swipe-hint-dismiss{to{opacity:0;visibility:hidden}}
.swipe-hint>span:first-child{font-size:20px;animation:swipe-left 2.5s ease-in-out infinite}
.last-page .swipe-hint>span:first-child{transform:rotate(180deg);animation:none}
@keyframes swipe-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
[data-theme=light] .swipe-hint{color:#617085}
[data-theme=light] .picker-dot[aria-current=true]:after{background:#235e95}
.coffee-footer{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:0;right:0;min-height:42px;margin:0;padding:0;display:flex;align-items:center;justify-content:center}
.stage{padding:var(--hardware-top) 24px var(--hardware-bottom);height:100dvh;gap:16px}
.hardware-area{align-items:center}
.hardware-stack,.xl-stage .hardware-stack{--ratio:1.1722912966252221;width:min(100cqw,calc(100cqh / var(--ratio)));gap:0;align-items:center}
.xl-stage .hardware-stack{--ratio:.7490974729241877}
.hardware-stack .device{aspect-ratio:1/var(--ratio);width:100%;height:auto}
.stage:has(.info:not([hidden])){padding:var(--hardware-top) 24px max(14px,env(safe-area-inset-bottom))}
.stage:has(.info:not([hidden])) .brand-banner{left:50%}
.intro-hint{bottom:calc(env(safe-area-inset-bottom) + 94px)}
.tutorial-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:100;opacity:0;pointer-events:none;background:transparent}
.tutorial-frame.ready{opacity:1;pointer-events:auto}
.tutorial-open>.chooser,.tutorial-open>.coffee-footer{visibility:hidden;pointer-events:none}
.chooser:has(.gallery-tour:not([hidden])) .mpc-lineup{bottom:calc(var(--hardware-bottom) + 210px)}
.gallery-tour{position:fixed;left:50%;transform:translateX(-50%);top:auto;bottom:var(--hardware-bottom);width:min(340px,calc(100% - 32px));max-height:200px;overflow:auto;margin:0}
@media(max-width:760px){
 .stage,.stage:has(.info:not([hidden])){padding-top:var(--hardware-top);padding-left:24px;padding-right:24px}
 .stage:has(.info:not([hidden])){grid-template-rows:minmax(0,1fr) minmax(0,40%)}
 .stage:has(.info.collapsed:not([hidden])){grid-template-rows:minmax(0,1fr) auto}
 .stage:has(.guide-tour:not([hidden])){grid-template-rows:minmax(0,1fr) minmax(0,56%)}
 .gallery-tour{left:50%;right:auto;bottom:var(--hardware-bottom)}
}
@media(max-height:500px){
 :root{--brand-top:calc(env(safe-area-inset-top) + 60px);--brand-width:100px;--hardware-top:calc(var(--brand-top) + 42px);--hardware-bottom:calc(env(safe-area-inset-bottom) + 118px)}
 .picker-controls{bottom:calc(env(safe-area-inset-bottom) + 48px);gap:0}
 .picker-model{font-size:16px;min-height:28px}
 .swipe-hint{font-size:12px}
 .coffee-footer a{transform:scale(.6)}
}
@media(prefers-reduced-motion:reduce){.swipe-hint{animation-duration:0s}.swipe-hint>span:first-child{animation:none}.picker-dot:after{transition:none}}