:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:dark;color:#eff4fa;background:#15171b}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 48%,#343b44 0,#20252c 46%,#15171b 85%)}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #58b6ff;outline-offset:8px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.chooser{min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 36px) 26px calc(env(safe-area-inset-bottom) + 136px)}.chooser-brand{position:relative;display:block;width:clamp(250px,32vw,450px);aspect-ratio:672/80;margin:0 auto;flex-shrink:0}.chooser-brand img{position:absolute;width:126.6369%;left:-13.3929%;top:-157.5%;filter:drop-shadow(0 4px 3px #0009) drop-shadow(0 12px 10px #0008)}.theme-switch{position:absolute;right:22px;top:calc(env(safe-area-inset-top) + 25px);border:1px solid #58677a70;border-radius:50%;background:#202832;color:#a6b2c1;width:40px;height:40px;display:grid;place-items:center}.mpc-lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:clamp(20px,3vw,48px);width:min(1500px,100%);margin:auto;min-height:400px;padding:55px 0 26px}.unit{min-width:0;display:flex;flex-direction:column;align-items:center;gap:19px;text-align:center;padding:16px 0}.unit-visual{height:clamp(160px,20vw,285px);width:100%;display:flex;align-items:center;justify-content:center;animation:float 5.5s ease-in-out infinite;animation-delay:var(--delay,0s);transition:transform .4s,filter .4s;filter:drop-shadow(0 10px 7px #0008) drop-shadow(0 28px 20px #0008)}.unit-visual img{max-width:100%;max-height:100%;object-fit:contain}.unit-visual.sample img{clip-path:polygon(5.3% 1.25%,25.8% 1.25%,25.8% .75%,30.6% .75%,30.6% 1.25%,94.5% 1.25%,99.2% 5.7%,96.7% 96.8%,95% 99.1%,4.4% 99.1%,2.1% 96.8%,.6% 7%,1.4% 4.2%)}.unit-visual.one img{clip-path:polygon(0 2.7%,100% 2.7%,100% 100%,0 100%)}.unit-name{font-size:clamp(16px,1.25vw,20px);font-weight:600;line-height:1.35}.unit-status{display:block;margin-top:7px;color:#94a2b3;font-size:14px;font-weight:400}.unit.available:hover .unit-visual{filter:drop-shadow(0 14px 9px #0008) drop-shadow(0 32px 24px #58b6ff22)}.unit.available:hover .unit-name{color:#89cdff}.unit.soon .unit-visual img{filter:grayscale(1) brightness(.58);opacity:.72}.unit.soon .unit-name{color:#9da7b5}.choose-tip{position:fixed;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 76px);left:50%;transform:translateX(-50%);background:#171e28e8;color:#d3dce8;border:1px solid #58677a70;border-radius:24px;padding:11px 22px;box-shadow:0 8px 24px #0006;font-size:15px;white-space:nowrap;backdrop-filter:blur(12px)}.choose-tip:before{content:'';display:inline-block;width:6px;height:6px;background:#58b6ff;border-radius:50%;margin-right:10px}.coffee-footer{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));min-height:42px;display:flex;align-items:center;justify-content:center;pointer-events:none}.coffee-footer a{pointer-events:auto;transform:scale(.72);transform-origin:center bottom}.coming-page .mpc-lineup{grid-template-columns:minmax(0,380px);justify-content:center;min-height:0;padding:55px 0 20px}.coming-page .unit-visual{height:clamp(220px,35vh,360px)}.coming-page .unit-name{font-size:22px}.back-link{display:block;text-align:center;color:#92cfff;font-size:15px;margin-top:26px}.coming-page .choose-tip{display:none}[data-theme=light]{color-scheme:light;color:#253448;background:#edf1f5}[data-theme=light] body{background:radial-gradient(ellipse at 50% 48%,#fff 0,#eef2f7 46%,#dce3ec 95%)}[data-theme=light] .theme-switch{background:white;color:#617085;border-color:#c5cfdb}[data-theme=light] .choose-tip{background:#ffffffeb;color:#435670;border-color:#b7c6d9;box-shadow:0 8px 24px #243f6129}[data-theme=light] .unit-visual{filter:drop-shadow(0 10px 7px #25395430) drop-shadow(0 28px 20px #25395440)}[data-theme=light] .unit.soon .unit-name{color:#66748a}[data-theme=light] .unit-status{color:#63738b}[data-theme=light] .back-link{color:#245d97}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:900px){.chooser{padding:calc(env(safe-area-inset-top) + 38px) 24px calc(env(safe-area-inset-bottom) + 140px)}.chooser-brand{width:min(65vw,350px)}.mpc-lineup{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px;padding-top:48px}.unit-visual{height:180px}}@media(max-width:560px){.chooser{padding-left:24px;padding-right:24px}.chooser-brand{width:72vw;max-width:340px}.theme-switch{right:12px;top:calc(env(safe-area-inset-top) + 10px);width:32px;height:32px}.mpc-lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px;min-height:0;padding:48px 0 16px;margin:0 auto}.unit{gap:10px;padding:0}.unit-visual{height:160px}.unit:nth-child(5){grid-column:1/-1;width:55%;justify-self:center}.unit-name{font-size:16px}.unit-status{font-size:14px;margin-top:4px}.coming-page .unit-visual{height:300px}.coming-page .mpc-lineup{margin:auto}}@media(max-height:750px) and (max-width:560px){.mpc-lineup{gap:22px;padding-top:35px}.unit-visual{height:125px}}@media(prefers-reduced-motion:reduce){.unit-visual{animation:none;transition:none}}

/* Keep the transparent logo's native proportions inside its visible-wordmark box. */
.chooser-brand img{height:auto;max-width:none;aspect-ratio:851/315;object-fit:contain}
/* Reserve header space and let the entire gallery scroll above the footer. */
.chooser{min-height:calc(100svh - 150px);padding:calc(env(safe-area-inset-top) + 48px) clamp(20px,4vw,48px) 0;gap:0}
.chooser-brand{width:min(450px,70%);aspect-ratio:672/80}
.mpc-lineup{flex:1;min-height:0;margin:0 auto;padding:clamp(52px,7vw,88px) 0 24px;align-content:center;gap:32px clamp(20px,3vw,48px)}
.choose-tip{position:relative;bottom:auto;left:auto;transform:none;width:max-content;max-width:calc(100% - 32px);white-space:normal;text-align:center;margin:20px auto 0}
.coffee-footer{position:relative;bottom:auto;left:auto;right:auto;min-height:54px;margin:18px auto 0;padding:0 16px max(16px,env(safe-area-inset-bottom))}
.coffee-footer a{max-width:100%}
@media(max-width:900px){.unit-visual{height:clamp(140px,22vw,200px)}}
@media(max-width:560px){
 .chooser{padding-top:calc(env(safe-area-inset-top) + 78px);min-height:auto}
 .chooser-brand{width:min(340px,100%)}
 .mpc-lineup{padding:44px 0 12px;gap:32px 20px}
 .unit-visual{height:clamp(112px,36vw,185px)}
 .unit:nth-child(5){width:min(72%,300px)}
 .unit:nth-child(5) .unit-visual{height:clamp(135px,44vw,215px)}
 .unit-name{font-size:clamp(14px,4vw,16px);overflow-wrap:anywhere}
 .unit-status{line-height:1.4}
 .choose-tip{margin-top:20px}
}
.coming-page .chooser{min-height:calc(100svh - 90px)}
.coming-page .mpc-lineup{flex:1;margin:0 auto}

/* Native proportions for the new MPC Tutorials wordmark. */
.chooser-brand{aspect-ratio:2000/615;isolation:auto}
.chooser-brand img{position:static;display:block;left:auto;top:auto;width:100%;max-width:100%;height:auto;aspect-ratio:2000/615;object-fit:contain;filter:url(#logo-white);mix-blend-mode:normal}
[data-theme=light] .chooser-brand img{filter:url(#logo-red);mix-blend-mode:normal}