/* drag and drop stage */
.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,28px);padding:34px clamp(12px,2vw,28px) 70px;border-radius:40px;user-select:none;-webkit-user-select:none}
.stage::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 55% at 50% 45%,rgba(99,102,241,.28),transparent 70%);z-index:-1}
.palette{display:grid;gap:14px;justify-items:center}
.palette--l .tile:nth-child(odd){transform:translateX(14px)}
.palette--r .tile:nth-child(even){transform:translateX(-14px)}
.palette__title{font-size:.78rem;color:var(--faint);font-weight:600;letter-spacing:.01em}
.tile{position:relative;width:96px;height:96px;display:grid;place-items:center;align-content:center;gap:7px;border-radius:24px;cursor:grab;touch-action:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 36px -18px rgba(0,0,0,.8);
  color:#fff;font-size:.72rem;font-weight:600;transition:opacity .3s,filter .3s,box-shadow .3s}
.tile .ic{width:30px;height:30px;color:#fff;filter:drop-shadow(0 4px 10px rgba(61,213,255,.45))}
.tile:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(61,213,255,.5),0 18px 36px -18px rgba(0,0,0,.8)}
.tile.lifted{opacity:.28;filter:saturate(0)}
.tile.added::after{content:"";position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#34D399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 3px var(--night)}
.ghost{position:absolute;z-index:40;pointer-events:none;margin:0;cursor:grabbing;box-shadow:0 30px 60px -12px rgba(0,0,0,.8),0 0 0 1px rgba(61,213,255,.7),0 0 40px rgba(99,102,241,.6)}
.ghost.fixed{position:fixed}
.cursor{position:absolute;left:0;top:0;z-index:45;width:30px;height:30px;pointer-events:none;opacity:0;transition:opacity .3s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.cursor.on{opacity:1}
.stage__foot{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;align-items:center;gap:12px;color:var(--muted);font-size:.9rem}
.stage__foot button{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.85rem}
.stage__foot button:hover{background:rgba(255,255,255,.12)}
/* ---------- iPhone 16 ---------- */
.iphone{--w:300px;--frame:linear-gradient(150deg,#AEB9FF 0%,#5B6CE0 18%,#3444B8 48%,#4F5FD6 78%,#9EA9FA 100%);--btn:#3F4FC4;
  position:relative;width:var(--w);aspect-ratio:71.6/147.6;border-radius:calc(var(--w)*.178);padding:calc(var(--w)*.03);background:var(--frame);
  font-size:calc(var(--w)/22);flex:none;
  box-shadow:inset 0 0 0 calc(var(--w)*.004) rgba(255,255,255,.55),inset 0 0 0 calc(var(--w)*.011) rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.55),0 50px 90px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(99,102,241,.45)}
.iphone--black{--frame:linear-gradient(150deg,#6A6C74 0%,#2B2C31 22%,#18191C 55%,#2E2F35 82%,#5E6068 100%);--btn:#2A2B30}
.iphone--teal{--frame:linear-gradient(150deg,#DDF4EF 0%,#8FCBC0 22%,#5DA79B 55%,#86C4B9 82%,#D2EFE9 100%);--btn:#6FB3A8}
.iphone--pink{--frame:linear-gradient(150deg,#FFE3EE 0%,#F2B3CB 22%,#DF8DAE 55%,#EFAAC6 82%,#FFDCEA 100%);--btn:#E39AB7}
.iphone--white{--frame:linear-gradient(150deg,#FFFFFF 0%,#E4E5E1 22%,#C9CAC5 55%,#E0E1DC 82%,#FAFAF8 100%);--btn:#D2D3CE}
.iphone .hw{position:absolute;width:calc(var(--w)*.013);background:var(--btn);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.hw--action{left:calc(var(--w)*-.009);top:17.5%;height:3.6%}
.hw--volup{left:calc(var(--w)*-.009);top:24.5%;height:6.6%}
.hw--voldn{left:calc(var(--w)*-.009);top:33%;height:6.6%}
.hw--power{right:calc(var(--w)*-.009);top:27%;height:10.5%}
.hw--cam{right:calc(var(--w)*-.005);top:57%;height:7.4%;width:calc(var(--w)*.009)!important;opacity:.85}
.iphone .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.15);overflow:hidden;background:#000;isolation:isolate;
  box-shadow:0 0 0 calc(var(--w)*.013) #050507}
.iphone .screen::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%)}
.island{position:absolute;z-index:31;top:1.55%;left:50%;transform:translateX(-50%);width:31%;height:3.35%;border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.island::after{content:"";position:absolute;right:13%;top:50%;width:.55em;height:.55em;margin-top:-.275em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a66,#05060c 60%)}
.sbar{position:absolute;z-index:29;top:0;left:0;right:0;height:6.4%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;font-family:-apple-system,"SF Pro Text","Onest",sans-serif;font-weight:600;font-size:.82em;letter-spacing:-.01em}
.sbar svg{height:.78em;width:auto}
.sbar .icons{display:flex;gap:.3em;align-items:center}
.homebar{position:absolute;z-index:29;bottom:.9%;left:50%;transform:translateX(-50%);width:36%;height:.24em;border-radius:9px;background:currentColor;opacity:.8}
/* hero app (light, crisp) */
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:#F5F5FA;color:#14162E;font-family:var(--body)}
.app__top{padding:3.6em 1.1em .6em;display:flex;align-items:center;justify-content:space-between}
.app__title{font-family:var(--display);font-weight:720;font-size:1.55em;letter-spacing:-.03em;line-height:1}
.app__avatar{width:2em;height:2em;border-radius:50%;background:linear-gradient(135deg,#3DD5FF,#9B3DFF);box-shadow:0 0 0 .15em #fff}
.app__banner{margin:.4em 1.1em .9em;height:7.2em;border-radius:1.1em;position:relative;overflow:hidden;color:#fff;padding:.95em 1em;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(90% 120% at 100% 0%,#F5B894 0%,transparent 55%),radial-gradient(90% 120% at 0% 100%,#3DD5FF 0%,transparent 60%),linear-gradient(135deg,#6366F1,#9B3DFF)}
.app__banner b{font-family:var(--display);font-size:1.18em;letter-spacing:-.02em;line-height:1.1}
.app__banner span{font-size:.72em;opacity:.9}
.app__banner i{position:absolute;right:-1em;top:-1em;width:6em;height:6em;border-radius:50%;border:1.1em solid rgba(255,255,255,.18)}
.app__label{padding:0 1.1em .5em;font-size:.72em;font-weight:600;color:#6B6E8F}
.app__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.62em;padding:0 1.1em;align-content:start}
.app-item{display:grid;justify-items:center;gap:.35em;padding:.72em .2em .6em;border-radius:.95em;background:#fff;box-shadow:0 .2em .7em -.2em rgba(31,33,90,.18);font-size:.66em;font-weight:600;color:#2A2D52;text-align:center;line-height:1.1}
.app-item .ic{width:2.15em;height:2.15em;color:#5B5EF0;padding:.42em;border-radius:.7em;background:linear-gradient(145deg,#EEF0FF,#E1E4FF);stroke-width:2}
.app-item.pending{visibility:hidden}
.app-item.pop{animation:pop .55s var(--ease)}
.app-item.flash{animation:flash .7s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes flash{0%,100%{box-shadow:0 .2em .7em -.2em rgba(31,33,90,.18)}40%{box-shadow:0 0 0 .2em #6366F1}}
.dropzone{position:absolute;inset:.5em;z-index:28;border-radius:2.4em;border:.16em dashed rgba(99,102,241,.0);background:rgba(99,102,241,0);transition:all .25s;pointer-events:none;display:grid;place-items:end center;padding-bottom:2.6em}
.dropzone span{opacity:0;transform:translateY(8px);transition:all .25s;font-size:.72em;font-weight:700;color:#fff;background:#6366F1;border-radius:99px;padding:.45em 1em;box-shadow:0 .4em 1.2em -.2em rgba(99,102,241,.7)}
.iphone.ready .dropzone{border-color:rgba(99,102,241,.85);background:rgba(99,102,241,.08)}
.iphone.ready .dropzone span{opacity:1;transform:none}
.toast{position:absolute;z-index:29;left:50%;top:4.1em;transform:translate(-50%,-1.5em) scale(.9);opacity:0;background:#14162E;color:#fff;font-size:.68em;font-weight:600;padding:.6em 1.1em;border-radius:99px;display:flex;gap:.5em;align-items:center;transition:all .35s var(--ease);white-space:nowrap}
.toast .ic{width:1.3em;height:1.3em;color:#34D399;stroke-width:2.6}
.app__tabbar{margin-top:auto;display:flex;justify-content:space-around;padding:.7em 1em 2em;background:rgba(255,255,255,.85);border-top:1px solid #E7E8F3}
.app__tabbar .ic{width:1.35em;height:1.35em;color:#9A9CBA}
.app__tabbar .ic.on{color:#6366F1}
@keyframes fly{0%{transform:translate(0,60px) rotate(-8deg);opacity:0}12%{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1.05)}55%{transform:translate(var(--tx,196px),var(--ty,-38px)) rotate(0) scale(.82);opacity:1}62%,100%{transform:translate(var(--tx,196px),var(--ty,-38px)) scale(.6);opacity:0}}
@keyframes slot{0%,55%{border-color:#B9BCF5;background:transparent}58%,90%{border-color:transparent;background:#fff!important;box-shadow:0 .2em .7em -.2em rgba(31,33,90,.18)!important}100%{border-color:#B9BCF5}}
@keyframes slotin{0%,56%{opacity:0;transform:scale(.4)}64%{opacity:1;transform:scale(1.1)}70%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes fill{0%{width:0}55%,100%{width:100%}}
@keyframes live{0%,62%{opacity:0;transform:translateY(.4em)}70%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* ---------- iPhone 16 as white clay mockup ---------- */
.iphone,.iphone--black,.iphone--teal,.iphone--pink,.iphone--white{
  background:linear-gradient(160deg,#FFFFFF 0%,#F3F3F6 45%,#E4E5EB 100%);border:0;padding:calc(var(--w)*.024);
  box-shadow:inset 0 0 0 calc(var(--w)*.004) rgba(255,255,255,1),inset 0 calc(var(--w)*-.01) calc(var(--w)*.02) rgba(40,42,70,.10),
    inset 0 calc(var(--w)*.008) calc(var(--w)*.014) rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.35),
    0 calc(var(--w)*.2) calc(var(--w)*.32) calc(var(--w)*-.12) rgba(0,0,0,.75),0 0 calc(var(--w)*.3) calc(var(--w)*-.1) rgba(170,160,255,.35)}
.iphone .hw{display:none}
.iphone .screen{border-radius:calc(var(--w)*.152);box-shadow:0 0 0 calc(var(--w)*.003) rgba(30,32,60,.18),0 0 0 calc(var(--w)*.008) rgba(255,255,255,.55)}
.iphone .screen::after{background:linear-gradient(120deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 28%)}
.island{background:linear-gradient(180deg,#F4F4F7,#DEDFE5);box-shadow:inset 0 1px 2px rgba(30,32,60,.18),0 0 0 1px rgba(30,32,60,.06)}
.island::after{display:none}
@keyframes libin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (max-width:640px){.stage{grid-template-columns:minmax(0,1fr);padding:18px 0 64px;gap:14px}
.palette{grid-auto-flow:column;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px}
.palette__title{display:none}
.palette--l .tile:nth-child(odd),.palette--r .tile:nth-child(even){transform:none}
.palette--r{order:3}
.stage .iphone{--w:min(270px,74vw);justify-self:center;order:2}
.palette--l{order:1}
.tile{width:72px;height:72px;border-radius:19px;font-size:.62rem;gap:4px}
.tile .ic{width:24px;height:24px}}