/* Keep the exact blue wallpaper already filmed on the phone through the swipe.
   Only the icons/status are projected, so no second wallpaper can slip or pop. */
#phone-shell[data-home=true]{background:transparent}
#phone-shell[data-home=true]>.app-header,#phone-shell[data-home=true]>.app-nav,#phone-shell[data-home=true]>#phone-content,#phone-shell[data-home=true]>.safari-chrome{visibility:hidden;pointer-events:none}
#phone-shell[data-home=true]>.ios-status{position:relative;z-index:12;color:#fff;text-shadow:0 1px 3px #07173580}
#phone-launcher{position:absolute;inset:0;z-index:10;color:#fff;overflow:hidden;font:14px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;background:transparent}
.phone-apps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:22px 8px}
.phone-apps :is(button,a){display:block;min-width:0;border:0;background:none;color:inherit;padding:0;text-align:center;text-decoration:none;font:11px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone-apps :is(button,a)>b{display:flex;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;width:min(60px,100% - 4px);margin:0 auto 6px;border-radius:24%;background:#f6f8fc;color:#13223b;font:700 clamp(17px,6cqw,23px)/1 -apple-system,BlinkMacSystemFont,sans-serif;box-shadow:inset 0 0 0 1px #ffffff30,0 3px 6px #10163524}
.phone-apps :is(button,a)>b span{font-size:9px}
.phone-apps :is(button,a)>span{display:block;min-height:2.6em;overflow-wrap:normal;text-shadow:0 1px 4px #071735cc}
.phone-apps :is(button,a):focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}
.phone-apps :is(button,a):active>b{filter:brightness(.8)}
.phone-apps [data-app=scan]>b{background:linear-gradient(145deg,#edfcff,#92d5e4)}
.phone-apps [data-app=scan] svg{width:54%;fill:none;stroke:#183f58;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone-apps [data-app=music]>b{flex-direction:column;gap:3px;background:linear-gradient(145deg,#f25151,#ac123e);color:#fff;font-weight:800}
.phone-apps [data-app=music]>b span{font-size:8px;letter-spacing:.13em}
.phone-apps [data-app=guide]>b{background:linear-gradient(145deg,#b1f4f6,#52bccc)}
.phone-apps [data-app=verb]>b{background:linear-gradient(145deg,#e0dcff,#aaa3f2)}
.launcher-home-indicator{position:absolute;bottom:10px;left:34%;width:32%;height:4px;border-radius:3px;background:#fff;opacity:.9;pointer-events:none}
body>footer{display:none!important}
body[data-state=platform] #restart{display:none}
body[data-state=seat-ready] #boarding{left:50%;top:58%;bottom:auto;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));text-align:center}
body[data-state=seat-ready] #boarding h1{font-size:clamp(24px,4vw,40px)}
header #restart{font:12px system-ui;text-decoration:none;min-height:40px}
@media(max-width:600px){header{gap:8px!important}header>a{font-size:10px!important}header>div{gap:5px!important}header button{padding:9px 7px!important;font-size:11px!important}}
#desktop-toolbar{position:fixed;z-index:25;inset:0 0 auto;height:64px;padding:env(safe-area-inset-top,0px) 20px 0;display:flex;gap:16px;align-items:center;background:#081522;color:#edf6ff;border-bottom:1px solid #405665;font:13px system-ui}
#desktop-toolbar>span{flex:1}#desktop-toolbar button{min-height:44px;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}
body.phone-expanded #phone-shell[data-native=true]{inset:64px 0 0!important;width:100%!important;height:calc(100dvh - 64px)!important;transform:none!important;border-radius:0!important;padding:0!important;z-index:20;clip-path:none;animation:phone-unfold .45s cubic-bezier(.16,1,.3,1)}
body.phone-expanded #phone-shell .ios-status,body.phone-expanded #phone-shell .safari-chrome,body.phone-expanded #phone-shell .app-header{display:none}
body.phone-expanded #phone-shell .app-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:16px;border-bottom:1px solid #334554}
body.phone-expanded #phone-shell .app-nav button{font-size:15px;min-height:44px;padding:8px 20px}
body.phone-expanded #phone-content{padding:clamp(20px,4vw,60px);scrollbar-width:auto}
body.phone-expanded #phone-content>section{max-width:1200px;margin:auto}
body.phone-expanded #phone-content h1{font-size:clamp(36px,6vw,76px);line-height:1.04;letter-spacing:-.04em}
body.phone-expanded #phone-content h2{font-size:28px}
body.phone-expanded #phone-content p,body.phone-expanded #phone-content li{font-size:17px}
body.phone-expanded #phone-content a,body.phone-expanded #phone-content label{font-size:16px}
body.phone-expanded #phone-content .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
body.phone-expanded #phone-content .cards>*{padding:24px}
body.phone-expanded #phone-content input,body.phone-expanded #phone-content select{font-size:16px;min-height:48px}
body.phone-expanded #phone-content form{max-width:650px}
#desktop-viewer{position:fixed;z-index:22;inset:64px 0 0;background:#091521;color:#edf6ff;padding:clamp(24px,6vw,90px);font:18px/1.5 system-ui;overflow:auto}
#desktop-viewer a{color:#8bdfeb}#desktop-viewer iframe{border:0;position:absolute;inset:0;width:100%;height:100%;background:#eee}
#desktop-viewer .studio-site{top:48px;height:calc(100% - 48px)}
.studio-safari{position:absolute;inset:0 0 auto;height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;background:#202830;color:#e9f1f7;font:13px system-ui;border-bottom:1px solid #42505c}
.studio-safari button{background:none;color:inherit;border:0;font-size:24px;min-width:44px;min-height:44px;cursor:pointer}
body.phone-expanded #guide-invite,body.phone-expanded #meet-guide,body.phone-expanded>header,body.phone-expanded>footer{visibility:hidden;pointer-events:none}
#phone-launcher[hidden],#desktop-toolbar[hidden],#desktop-viewer[hidden]{display:none!important}
@keyframes phone-unfold{from{opacity:.4;clip-path:inset(15% 25% round 28px)}to{opacity:1;clip-path:inset(0)}}
@media(max-width:600px){#desktop-toolbar{padding-inline:12px;gap:10px;font-size:12px}#desktop-toolbar>span{display:none}#desktop-toolbar button:last-child{margin-left:auto}body.phone-expanded #phone-shell .app-nav{padding:8px;gap:4px}body.phone-expanded #phone-shell .app-nav button{flex:1 0 29%;padding:6px}body.phone-expanded #phone-content{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){body.phone-expanded #phone-shell[data-native=true]{animation:none}}
/* Keep readable text in its own cell, including Safari text autosizing. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body>header{top:max(12px,env(safe-area-inset-top));left:max(12px,3vw);right:max(12px,3vw);flex-wrap:wrap;z-index:40}
body>header>a{white-space:nowrap;flex-shrink:0}
body>header>div{align-items:center;flex-wrap:wrap;margin-left:auto;min-width:0}
body>header button{min-height:44px;line-height:1.35;white-space:nowrap}
#boarding{overflow-wrap:anywhere;max-width:calc(100vw - 32px)}
#boarding .cta{min-width:0;width:100%;line-height:1.4}
body[data-state=ready] #boarding{min-width:0;width:min(360px,calc(100vw - 32px))}
.launcher-content{position:absolute;inset:0 0 var(--phone-safe-bottom,0px);padding:max(56px,17cqw) 4cqw 28px;overflow:auto;scroll-padding:18px;overscroll-behavior:contain}
.studio-safari>span:nth-child(2){min-width:0;overflow-wrap:anywhere;text-align:center;font-size:12px;line-height:1.3}
.studio-safari>button,.studio-safari>span:first-child{flex-shrink:0}
#desktop-toolbar{height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
#desktop-toolbar>span{min-width:0;overflow-wrap:anywhere}
#desktop-viewer{top:calc(64px + env(safe-area-inset-top,0px))}
body.phone-expanded #phone-shell[data-native=true]{top:calc(64px + env(safe-area-inset-top,0px))!important;height:calc(100dvh - 64px - env(safe-area-inset-top,0px))!important}
@media(max-width:360px){body>header>a{flex-basis:100%;font-size:11px!important}body>header>div{margin-left:0;width:100%;justify-content:space-between}}
@media(max-height:480px) and (min-aspect-ratio:6/5){body>header{flex-wrap:nowrap}body>header>a{flex-basis:auto}}

/* v51 — small and Display-Zoom iPhones (CSS viewport ~320–375px).
   One header row when it fits; the guide is reached from the phone itself
   ("Ask studio" in every section, the AI Guide app on the home screen), so the
   floating invite stays out of the way in portrait. */
@media(max-aspect-ratio:6/5){body #guide-invite{display:none!important}}
body:has(#phone-launcher:not([hidden])) #guide-invite{display:none!important}
@media(max-width:360px){
 body>header>a{flex-basis:auto!important;font-size:10px!important}
 body>header>div{margin-left:auto!important;width:auto!important;justify-content:flex-end!important}
 body>header button{padding:8px 6px!important;font-size:11px!important;min-height:40px!important}
}
/* Section menu: one swipeable row instead of a 2×3 grid that ate half the screen. */
@media(max-aspect-ratio:6/5){
 html body:not(.phone-expanded) #phone-shell .app-nav{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:6px!important;padding:0 8px 8px!important}
 html body:not(.phone-expanded) #phone-shell .app-nav::-webkit-scrollbar{display:none}
 html body:not(.phone-expanded) #phone-shell .app-nav [data-go]{flex:0 0 auto!important;min-width:0!important;min-height:38px!important;padding:6px 14px!important;white-space:nowrap!important;scroll-snap-align:center;border-radius:999px!important}
}
/* v51 — header controls as quiet glass pills instead of black boxes. */
html body>header button,html body>header #restart,html #guide-navigation button{
 appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
 min-height:38px!important;padding:0 15px!important;border-radius:999px!important;
 border:1px solid rgba(225,242,255,.2)!important;background:rgba(8,18,28,.26)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.18)!important;
 color:#f3f9ff!important;font:500 12px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif!important;
 letter-spacing:.01em;text-shadow:none!important;cursor:pointer;
 transition:background .25s,border-color .25s,transform .15s}
html body>header button:hover,html body>header #restart:hover,html #guide-navigation button:hover{background:rgba(255,255,255,.14)!important;border-color:rgba(225,242,255,.38)!important}
html body>header button:active,html #guide-navigation button:active{transform:scale(.96)}
html body>header button:focus-visible,html #guide-navigation button:focus-visible{outline:2px solid #bff3ff;outline-offset:3px}
html body>header #sound::before{content:"";width:6px;height:6px;border-radius:50%;background:#61ffbd;box-shadow:0 0 0 3px rgba(97,255,189,.18),0 0 10px rgba(97,255,189,.7)}
html body>header #sound[aria-pressed=false]::before{background:#8a98a8;box-shadow:none}
html body>header>div{gap:6px!important}
@media(max-width:360px){html body>header button,html body>header #restart,html #guide-navigation button{min-height:34px!important;padding:0 11px!important;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){html body>header button,html #guide-navigation button{transition:none}}
/* v53 — the home screen of a real iPhone: widget, app grid, Search pill, dock. */
.launcher-content{padding:max(54px,16cqw) 5.5cqw calc(30cqw + 26px)!important}
.phone-widget{display:grid;gap:1.2cqw;width:100%;margin:0 0 6.5cqw;padding:4.6cqw 5cqw;border:0;border-radius:6.4cqw;text-align:left;color:#fff;cursor:pointer;
 background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 24px rgba(3,12,32,.25);font:400 3.4cqw/1.3 -apple-system,BlinkMacSystemFont,sans-serif}
.phone-widget small{display:flex;align-items:center;gap:1.6cqw;font:700 2.6cqw/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.06em;opacity:.8}
.phone-widget small i{width:3.4cqw;height:3.4cqw;border-radius:1cqw;background:#f6f8fc}
.phone-widget strong{font:700 5.8cqw/1.08 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.02em}
.phone-widget>span{opacity:.75}
.phone-widget em{display:flex;align-items:center;gap:1.6cqw;font-style:normal;font-size:2.9cqw;opacity:.85;margin-top:.6cqw}
.phone-widget em i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#61ffbd;box-shadow:0 0 0 .8cqw rgba(97,255,189,.2)}
.phone-widget:active{transform:scale(.97)}
.phone-apps{gap:5.2cqw 2cqw!important}
.phone-apps :is(button,a)>b{width:min(60px,15.5cqw)!important;border-radius:22.5%!important;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 10px rgba(2,10,30,.28)}
.phone-apps :is(button,a)>span{font-size:max(9px,2.85cqw)!important;min-height:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-apps b.art{background-color:#16233a!important;background-size:cover!important;background-position:center!important}
.phone-search{display:flex;align-items:center;justify-content:center;gap:1.4cqw;width:max-content;margin:7cqw auto 0;padding:1.6cqw 3.6cqw;border-radius:99px;
 background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font:600 3cqw/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#fff}
.phone-search svg{width:3.2cqw;height:3.2cqw;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.phone-dock{position:absolute!important;left:3.4cqw;right:3.4cqw;bottom:calc(var(--phone-safe-bottom,0px) + 7cqw);padding:3.4cqw 3cqw;border-radius:8.6cqw;
 background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.phone-dock :is(button,a)>span{display:none!important}
.phone-dock :is(button,a)>b{margin-bottom:0!important}
/* iOS unlock: the home screen settles in from slightly larger as it fades up. */
#phone-launcher .launcher-content,#phone-launcher .phone-dock{transform:scale(calc(1.13 - .13 * var(--reveal,1)));transform-origin:50% 45%}
#phone-launcher.is-entering .launcher-content,#phone-launcher.is-entering .phone-dock{animation:ios-home-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes ios-home-in{from{transform:scale(1.1);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){#phone-launcher .launcher-content,#phone-launcher .phone-dock{transform:none}#phone-launcher.is-entering .launcher-content,#phone-launcher.is-entering .phone-dock{animation:none}}
.phone-apps b.art.no-art{background:linear-gradient(145deg,#2b3d63,#121c33)!important;color:#fff;font:700 clamp(15px,5cqw,21px)/1 -apple-system,BlinkMacSystemFont,sans-serif}
/* JD Meet Music — the site's own identity: black, red club light, bold JDMEET wordmark. */
.phone-apps [data-app=music]>b.jdm-icon{flex-direction:column;gap:7%!important;background:radial-gradient(130% 85% at 50% 118%,#ff2b3f 0,#a3122a 34%,#2a0710 58%,#09090b 78%)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 10px rgba(2,10,30,.28)!important}
.jdm-icon em{font:900 clamp(9px,3.15cqw,12.5px)/1 "Arial Black","Helvetica Neue",Arial,sans-serif;font-style:normal;letter-spacing:-.02em;transform:scaleY(1.18)}
.jdm-icon svg{width:62%;height:auto;fill:none;stroke:#ff4a5c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(255,60,80,.8))}
/* v55 — compact home screen so the widget, three rows, Search and the dock
   fit the shorter phone crop on mobile without scrolling. */
.launcher-content{padding:max(50px,14.5cqw) 5.5cqw calc(27cqw + 18px)!important;scroll-padding:0!important}
.phone-widget{gap:.9cqw;margin-bottom:5cqw;padding:3.6cqw 4.4cqw;border-radius:5.6cqw}
.phone-widget strong{font-size:4.9cqw;line-height:1.12}
.phone-apps{gap:4.2cqw 2cqw!important}
.phone-apps :is(button,a)>b{margin-bottom:1.4cqw!important}
.phone-search{margin-top:5cqw}
.phone-dock{bottom:calc(var(--phone-safe-bottom,0px) + 5.5cqw);padding:2.8cqw 3cqw}
/* v56 — dock sits just above the part of the glass that is really visible. */
.phone-dock{bottom:calc(var(--dock-safe,var(--phone-safe-bottom,0px)) + 4.5cqw)!important}