/* ZenLink live demo: the app window, a mirrored iPhone / iPad / Android
   phone / Android tablet, and gestures. */
html[data-theme="dark"] { --app-bg: rgba(12, 12, 18, .72); --app-line: rgba(255, 255, 255, .08); --app-raise: rgba(255, 255, 255, .035); --stage: rgba(6, 6, 10, .55); --dotc: rgba(255, 79, 163, .2); }
html[data-theme="light"] { --app-bg: rgba(252, 252, 255, .66); --app-line: rgba(30, 30, 60, .09); --app-raise: rgba(255, 255, 255, .5); --stage: rgba(225, 227, 240, .55); --dotc: rgba(123, 92, 255, .18); }
.demo { margin: 44px auto 0; max-width: 1120px; text-align: left; }
.demo-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.seg {
  display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 4px; border-radius: 999px; background: var(--chip); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 var(--edge-hi);
}
.seg button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; color: var(--text-2); transition: background .3s, color .3s, box-shadow .3s;
}
.seg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #ff5fae, #ff3d97 50%, #9a5cff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px -6px rgba(255, 79, 163, .7); }
.seg.android button[aria-pressed="true"] { background: linear-gradient(135deg, #46e08e, #1fb46a 55%, #22a3c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px -6px rgba(61, 220, 132, .7); color: #04170c; }
.seg button:focus-visible { outline: 2px solid var(--pink-2); outline-offset: 2px; }
.sim { font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); }

/* window: the ZenLink 2.5 Liquid Glass window */
html[data-theme="dark"] { --w-bg: rgba(30, 30, 33, .8); --w-fill: rgba(255, 255, 255, .07); --w-fill-h: rgba(255, 255, 255, .12); --w-acc: #ff73bc; --w-acc-soft: rgba(255, 115, 188, .18); --w-stage: #161618; }
html[data-theme="light"] { --w-bg: rgba(246, 246, 250, .82); --w-fill: rgba(0, 0, 0, .05); --w-fill-h: rgba(0, 0, 0, .09); --w-acc: #e8509c; --w-acc-soft: rgba(244, 107, 172, .16); --w-stage: #ececf2; }
.app {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--edge); background: var(--w-bg); color: var(--text);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 50px 120px -30px var(--shade), 0 40px 100px -50px rgba(255, 79, 163, .45);
  transition: box-shadow .6s;
}
.app.android { box-shadow: inset 0 1px 0 var(--edge-hi), 0 50px 120px -30px var(--shade), 0 40px 100px -50px rgba(61, 220, 132, .4); }
.app-top { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; font-size: 12px; }
.app-top img { width: 24px; height: 24px; border-radius: 6px; }
.app-top .nm { font-weight: 700; font-size: 14px; margin-right: 2px; }
.app-top .pillst { padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--w-acc); background: var(--w-acc-soft); border: 1px solid var(--app-line); white-space: nowrap; }
.app-top .who { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.app-top .dev { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-top .st { font: 500 10.5px/1.3 "Cascadia Mono", var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.app-top .st b { font-weight: 500; color: var(--text-3); }
.app-top .st .warn b { color: var(--amber); }
.gb { height: 32px; min-width: 32px; padding: 0 9px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--w-fill); border: 1px solid var(--app-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.gb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gb.on { color: var(--w-acc); background: var(--w-acc-soft); }
.gb.txt { font: 700 11px/1 var(--sans); letter-spacing: .02em; }
.app-top .sep { width: 1px; height: 22px; background: var(--app-line); margin: 0 4px; }
.lights { display: flex; gap: 8px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; border: .5px solid rgba(0, 0, 0, .2); }
.lights i:nth-child(1) { background: #febc2e; } .lights i:nth-child(2) { background: #28c840; } .lights i:nth-child(3) { background: #ff5f57; }

.app-body { position: relative; height: clamp(500px, 58vw, 660px); padding: 2px 10px 10px; }
.stage { position: relative; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 16px; border: 1px solid var(--app-line); padding-bottom: 56px;
  background: radial-gradient(circle at 1px 1px, var(--dotc) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--w-stage); }
.stage .device.phone, .stage .device.aphone { height: 84%; }
.caption {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 8px 15px; border-radius: 999px; white-space: nowrap; z-index: 45;
  background: rgba(30, 30, 33, .7); border: 1px solid rgba(255, 255, 255, .16); font: 600 12px/1 var(--sans); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.caption kbd { all: unset; font-family: var(--mono); color: #ff9ccc; }

/* ZenLink dock: a floating glass capsule under the picture */
.gpanel {
  position: absolute; z-index: 44; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border-radius: 999px; background: var(--w-bg); border: 1px solid var(--edge); max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 var(--edge-hi), 0 14px 40px -14px rgba(0, 0, 0, .55);
}
.gpanel[data-os="android"], .app.android .gpanel[data-os="apple"] { display: none; }
.app.android .gpanel[data-os="android"] { display: flex; }
.gpanel button {
  all: unset; cursor: pointer; flex: none; height: 32px; min-width: 32px; padding: 0 8px; box-sizing: border-box; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text); background: var(--w-fill); transition: background .18s, color .18s, transform .18s var(--ease);
}
.gpanel button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gpanel button:hover { background: var(--w-fill-h); transform: scale(1.06); }
.gpanel button.on { color: var(--w-acc); background: var(--w-acc-soft); }
.gpanel button:focus-visible { outline: 2px solid var(--w-acc); outline-offset: 2px; }
.gpanel i.sp { width: 1px; height: 20px; background: var(--app-line); margin: 0 2px; flex: none; }
.app.studio .gpanel button { opacity: .35; pointer-events: none; }
.stage .note { display: none; position: absolute; z-index: 44; left: 50%; bottom: 62px; transform: translateX(-50%); width: min(420px, 90%); text-align: center; font-size: 12px; color: var(--text-2); }
.app.studio .stage .note { display: block; }

/* layers per platform */
.droid { display: none; }
.device.aphone .ios, .device.atab .ios { display: none; }
.device.aphone .droid, .device.atab .droid { display: block; }

/* the mirrored device */
.device { position: relative; transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
.device.phone { height: 88%; aspect-ratio: 1320 / 2868; }
.device.tablet { height: 70%; width: auto; aspect-ratio: 2752 / 2064; max-width: 86%; }
.frame { position: absolute; inset: -9px; border-radius: 62px; background: linear-gradient(145deg, #3a3a42, #17171c 40%, #2c2c33); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.device.tablet .frame { inset: -14px; border-radius: 34px; }
/* iPad Pro (M5) front, Space Black: dark aluminium edge, thin even bezel,
   landscape front camera on the long top edge, buttons on the top edge */
.device.tablet .frame { inset: -13px; border-radius: 32px;
  background: linear-gradient(180deg, #2b2b30 0%, #121214 8%, #0b0b0d 50%, #121214 92%, #2b2b30 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.14); }
.device.tablet .frame::before { content: ""; position: absolute; inset: 3px; border-radius: 29px; background: #030304; }
.device.tablet .frame::after { content: ""; position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2a4a, #050508 70%); }
.device.tablet .hw { display: block; height: 3px; width: auto; background: linear-gradient(180deg, #3a3a40, #18181b); }
.device.tablet .hw.act, .device.tablet .hw.camc { display: none; }
.device.tablet .hw.pw { top: -16px; right: 7%; left: auto; width: 7%; border-radius: 2px 2px 0 0; }
.device.tablet .hw.vu { top: auto; bottom: auto; left: auto; right: -16px; top: 8%; width: 3px; height: 9%; border-radius: 0 2px 2px 0; }
.device.tablet .hw.vd { top: auto; left: auto; right: -16px; top: 19%; width: 3px; height: 9%; border-radius: 0 2px 2px 0; }
/* iPhone 18 Pro front: burgundy aluminium edge, thin black bezel, side buttons */
.device.phone .frame { inset: -11px; border-radius: 64px;
  background: linear-gradient(90deg, #2a0f17 0%, #6b2a3a 6%, #3a1520 14%, #2a0f17 50%, #3a1520 86%, #6b2a3a 94%, #2a0f17 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px #1a080d, inset 0 0 0 1px rgba(255,190,205,.18); }
.device.phone .frame::before { content: ""; position: absolute; inset: 3.5px; border-radius: 60.5px; background: #050506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.hw { display: none; position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #4a1c28, #7a3446 60%, #3a1520); }
.device.phone .hw { display: block; }
.hw.act, .hw.vu, .hw.vd { left: -14px; border-radius: 2px 0 0 2px; }
.hw.pw, .hw.camc { right: -14px; border-radius: 0 2px 2px 0; }
.hw.act { top: 16%; height: 4.2%; }
.hw.vu { top: 23.5%; height: 7.5%; }
.hw.vd { top: 32.5%; height: 7.5%; }
.hw.pw { top: 25%; height: 11%; }
.hw.camc { top: 60%; height: 7%; width: 3px; right: -13px; background: linear-gradient(90deg, #3a1520, #5a2433); }
.screen { position: absolute; inset: 0; border-radius: 54px; overflow: hidden; clip-path: inset(0 round 54px); background: #000; isolation: isolate; container-type: size; }
.device.tablet .screen { border-radius: 22px; clip-path: inset(0 round 22px); }
.island { position: absolute; top: 1.5%; left: 50%; transform: translateX(-50%); width: 27%; height: 3.4%; border-radius: 999px; background: #000; z-index: 30; }
.island::after { content: ""; position: absolute; right: 12%; top: 50%; width: 1.4cqmin; min-width: 5px; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2a4a, #08080f 70%); }
.device.tablet .island { display: none; }

/* iOS-like content, sized from the screen (container units) */
.ios { position: absolute; inset: 0; color: #fff; font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; }
.wall { position: absolute; inset: -10%; background:
  radial-gradient(60% 45% at 20% 18%, #ff4fa3 0%, transparent 60%),
  radial-gradient(55% 45% at 85% 35%, #7b5cff 0%, transparent 60%),
  radial-gradient(70% 55% at 50% 100%, #ff8a3d 0%, transparent 60%), #1a0c24; filter: saturate(1.15); transition: transform .5s, filter .5s; }
.status { position: absolute; top: 2.1%; left: 9%; right: 8%; display: flex; justify-content: space-between; font-size: max(9px, 3.6cqmin); font-weight: 600; z-index: 20; }
.device.tablet .status { top: 2%; left: 3%; right: 3%; font-size: max(9px, 2.4cqmin); }
.status .bat { display: inline-flex; gap: 4px; align-items: center; }
.status .bat i { width: 1.9em; height: .95em; border: 1.5px solid #fff; border-radius: 4px; position: relative; }
.status .bat i::after { content: ""; position: absolute; inset: 1.5px; right: 22%; background: #fff; border-radius: 2px; }

.home { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.pages { position: absolute; inset: 11% 0 21% 0; display: flex; width: 200%; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.page { width: 50%; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 4cqh 0; padding: 0 6%; }
.device.tablet .page { grid-template-columns: repeat(6, 1fr); gap: 7cqh 0; padding: 0 9%; }
.icon { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: max(7px, 2.6cqmin); color: rgba(255,255,255,.92); }
.device.tablet .icon { font-size: max(7px, 1.9cqmin); }
.icon i { width: 15cqmin; aspect-ratio: 1; border-radius: 23%; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.device.tablet .icon i { width: 11cqmin; }
.icon i svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dots { position: absolute; bottom: 18.5%; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s; }
.dots i.on { background: #fff; }
.dock { position: absolute; left: 4%; right: 4%; bottom: 3.2%; height: 12.5%; border-radius: 30px; background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-around; padding: 0 3%; }
.device.tablet .dock { left: 24%; right: 24%; height: 13%; border-radius: 22px; }
.dock .icon span { display: none; }
.homebar { position: absolute; bottom: 1.1%; left: 50%; transform: translateX(-50%); width: 36%; height: 5px; border-radius: 5px; background: rgba(255,255,255,.85); z-index: 25; }
.device.tablet .homebar { width: 22%; }

/* an open app */
.appwin { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none; transform: scale(.2); transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, border-radius .45s; border-radius: 40px; overflow: hidden; background: #0e0e12; }
.appwin.open { opacity: 1; transform: none; border-radius: 0; }
.appwin .hd { padding: 14% 7% 4%; font-size: max(12px, 5.4cqmin); font-weight: 700; }
.device.tablet .appwin .hd { padding: 7% 5% 3%; font-size: max(12px, 3.6cqmin); }
.appwin .feed { display: grid; gap: 3cqh; padding: 0 7%; }
.appwin .post { height: 15cqh; border-radius: 14px; background: linear-gradient(120deg, #241a2c, #1a1a22); position: relative; overflow: hidden; }
.appwin .post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 2.2s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* live stream app for Studio mode */
.live { position: absolute; inset: 0; z-index: 9; opacity: 0; transition: opacity .4s; background:
  radial-gradient(70% 50% at 50% 35%, rgba(255,79,163,.55), transparent 70%), linear-gradient(180deg, #2a1033, #0d0a14 70%); }
.app.studio .live { opacity: 1; }
.live .tag { position: absolute; top: 9%; left: 6%; padding: 4px 9px; border-radius: 6px; background: #ff2d55; font: 700 max(9px, 2.8cqmin)/1 var(--mono); letter-spacing: .08em; }
.device.tablet .live .tag { top: 7%; left: 3%; }
.live .viewers { position: absolute; top: 9%; right: 6%; font-size: max(9px, 2.8cqmin); font-weight: 600; opacity: .9; }
.device.tablet .live .viewers { top: 7%; right: 3%; }
.live .host { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 34cqmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffd2e6 0 18%, transparent 19%), radial-gradient(circle at 50% 95%, #ffd2e6 0 42%, transparent 43%), linear-gradient(160deg, #ff4fa3, #7b5cff);
  box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 60px rgba(255,79,163,.6); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.04); } }
.live .chat { position: absolute; left: 6%; bottom: 8%; right: 30%; display: grid; gap: 5px; font-size: max(8px, 2.7cqmin); }
.device.tablet .live .chat { left: 3%; right: 55%; }
.live .chat span { padding: 4px 8px; border-radius: 10px; background: rgba(0,0,0,.35); animation: rise .5s both; }
.live .chat b { color: #ff9ccc; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.live .hearts { position: absolute; right: 8%; bottom: 10%; width: 12cqmin; height: 40%; }
.live .hearts i { position: absolute; bottom: 0; left: 30%; font-style: normal; font-size: max(12px, 4.4cqmin); color: #ff4fa3; animation: float 2.4s linear infinite; opacity: 0; }
.live .hearts i:nth-child(2) { left: 60%; animation-delay: .8s; color: #ff7dbc; }
.live .hearts i:nth-child(3) { left: 10%; animation-delay: 1.6s; color: #b48cff; }
@keyframes float { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-160%) scale(1.1); } }

/* overlays */
.ov { position: absolute; z-index: 15; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; pointer-events: none; }
.cc { top: 9%; left: 8%; width: 84%; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 18.75cqw; gap: 3cqw;
  opacity: 0; transform: scale(.94); transform-origin: 90% 0; }
.device.tablet .cc { top: 7%; left: auto; right: 4%; width: 36%; grid-auto-rows: 7.8cqw; gap: 1.6cqw; }
.cc.show { opacity: 1; transform: none; }
/* iOS 26/27 Liquid Glass modules */
.cc .m { position: relative; border-radius: 5.2cqw; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.18); }
.device.tablet .cc .m { border-radius: 2.2cqw; }
.cc svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc .conn, .cc .media { grid-column: span 2; grid-row: span 2; }
.cc .conn { grid-template-columns: 1fr 1fr; gap: 9%; padding: 13%; }
.cc .conn .b { width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.cc .conn .b svg { width: 50%; height: 50%; }
.cc .conn .b.g { background: #30d158; }
.cc .conn .b.bl { background: #0a84ff; }
.cc .media { place-items: start; align-content: start; padding: 12%; gap: 2%; font-size: max(8px, 3.2cqw); text-align: left; }
.device.tablet .cc .media { font-size: max(8px, 1.4cqw); }
.cc .media .art { width: 38%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(135deg, #ff4fa3, #7b5cff); margin-bottom: 6%; }
.cc .media span { opacity: .65; }
.cc .media .mc { position: absolute; left: 10%; right: 10%; bottom: 10%; display: flex; justify-content: space-between; }
.cc .media .mc svg { width: 22%; height: auto; aspect-ratio: 1; fill: #fff; stroke: none; }
.cc .sl { grid-row: span 2; place-items: end center; padding-bottom: 18%; border-radius: 6cqw; }
.device.tablet .cc .sl { border-radius: 2.6cqw; }
.cc .sl::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl, 60%); background: #fff; transition: height .35s; }
.cc .sl svg { position: relative; width: 40%; height: auto; aspect-ratio: 1; stroke: #6e6e78; }
.cc .focus { grid-column: span 2; grid-template-columns: auto 1fr; justify-items: start; gap: 8%; padding: 0 12%; font-size: max(8px, 3.4cqw); font-weight: 600; border-radius: 99px; }
.device.tablet .cc .focus { font-size: max(8px, 1.5cqw); }
.cc .focus svg { width: auto; height: 42%; aspect-ratio: 1; fill: #fff; stroke: none; }
.cc .sq svg { width: 40%; height: 40%; }
.cc .r { aspect-ratio: 1; align-self: center; justify-self: center; width: 86%; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14); }
.cc .r svg { width: 44%; height: 44%; }
.dim { position: absolute; inset: 0; z-index: 14; background: rgba(10,6,16,.38); backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity .35s; pointer-events: none; }
.dim.show { opacity: 1; }

.nc { top: 0; left: 0; right: 0; height: 100%; z-index: 16; padding: 14% 5% 0; transform: translateY(-100%); background: linear-gradient(180deg, rgba(20,12,30,.85), rgba(20,12,30,.55)); backdrop-filter: blur(16px); }
.nc.show { transform: none; }
.nc .time { text-align: center; font-size: max(18px, 13cqmin); font-weight: 300; letter-spacing: -.02em; }
.device.tablet .nc .time { font-size: max(18px, 9cqmin); }
.nc .card { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.14); font-size: max(8px, 2.8cqmin); display: flex; gap: 8px; align-items: center; }
.device.tablet .nc .card { width: 52%; margin-left: auto; margin-right: auto; font-size: max(8px, 1.9cqmin); }
.nc .card i { width: 8cqmin; aspect-ratio: 1; border-radius: 8px; flex: none; background: linear-gradient(135deg, #3ddc84, #1f9d57); }
.nc .card:nth-child(3) i { background: linear-gradient(135deg, #ff4fa3, #c2185b); }

.switcher { inset: 0; z-index: 13; display: flex; align-items: center; justify-content: center; gap: 5%; opacity: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.switcher.show { opacity: 1; }
.switcher .sw { position: relative; flex: none; width: 58%; height: 60%; display: flex; flex-direction: column; transform: scale(.9); transition: transform .45s; }
.switcher.show .card { transform: none; }
.switcher .lbl { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 4px; font-size: max(8px, 2.7cqmin); font-weight: 600; white-space: nowrap; }
.switcher .lbl i { width: 6.5cqmin; min-width: 12px; aspect-ratio: 1; border-radius: 24%; flex: none; }
.switcher .win { flex: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); background: #0e0e12; padding: 10% 8% 0; display: grid; align-content: start; gap: 5%; }
.switcher .win b { font-size: max(9px, 3.6cqmin); }
.switcher .win s { display: block; height: 3.2cqh; border-radius: 8px; background: rgba(255,255,255,.12); text-decoration: none; }
.switcher .win s:nth-child(odd) { width: 70%; }
.switcher .sw.c1 .win { background: linear-gradient(170deg, #ff4fa3, #7b2a5a); }
.switcher .sw.c3 .win { background: linear-gradient(170deg, #7b5cff, #2b2160); }
.switcher .sw.c2 .win s { height: 9cqh; background: linear-gradient(120deg, #241a2c, #1a1a22); }
/* iPhone: a carousel, the side apps peek in from the edges */
.device.phone .switcher .sw { position: absolute; top: 19%; }
.device.phone .switcher .sw.c1 { left: -48%; }
.device.phone .switcher .sw.c2 { left: 21%; }
.device.phone .switcher .sw.c3 { left: 90%; }
/* iPad: three whole windows side by side */
.device.tablet .switcher { gap: 3%; }
.device.tablet .switcher .sw { width: 28%; height: 62%; }

.vol { left: 3%; top: 26%; width: 3.2%; min-width: 9px; height: 26%; border-radius: 999px; background: rgba(40,40,48,.75); backdrop-filter: blur(10px); opacity: 0; overflow: hidden; }
.vol.show { opacity: 1; }
.vol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 55%); background: #fff; transition: height .3s; }

.lock { inset: 0; z-index: 18; opacity: 0; background: #000; transition: opacity .4s; }
.lock.show { opacity: 1; }
.lock .lt { position: absolute; top: 18%; width: 100%; text-align: center; font-size: max(22px, 19cqmin); font-weight: 200; opacity: .9; }
.device.tablet .lock .lt { top: 14%; font-size: max(22px, 13cqmin); }
.lock .ld { position: absolute; top: 15%; width: 100%; text-align: center; font-size: max(9px, 3.2cqmin); opacity: .75; }
.device.tablet .lock .ld { top: 11%; font-size: max(9px, 2.2cqmin); }

/* the PC mouse acting as a finger */
.cursor { position: absolute; z-index: 40; width: 22px; height: 22px; left: 50%; top: 60%; pointer-events: none; transition: left .7s cubic-bezier(.3,.7,.2,1), top .7s cubic-bezier(.3,.7,.2,1), opacity .3s; opacity: 0; }
.cursor.show { opacity: 1; }
.cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cursor .tap { position: absolute; left: -9px; top: -9px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; }
.cursor.tapping .tap { animation: tap .45s ease-out; }
@keyframes tap { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.swipe-trail { position: absolute; z-index: 39; left: 50%; bottom: 2%; width: 8px; height: 0; border-radius: 8px; transform: translateX(-50%); background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.75)); transition: height .45s ease-out, opacity .35s; opacity: 0; pointer-events: none; }
.swipe-trail.go { height: 34%; opacity: 1; }


/* ---- Android phone and tablet --------------------------------------- */
.device.aphone { height: 88%; aspect-ratio: 1080 / 2400; }
.device.atab { height: 68%; width: auto; aspect-ratio: 2560 / 1600; max-width: 86%; }
/* phone: sage aluminium edge, flat even bezel, centred punch-hole, buttons on the right */
.device.aphone .frame {
  inset: -10px; border-radius: 48px;
  background: linear-gradient(90deg, #17241f 0%, #4b7a69 5%, #23362f 13%, #17241f 50%, #23362f 87%, #4b7a69 95%, #17241f 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px #0b130f, inset 0 0 0 1px rgba(190, 255, 225, .18);
}
.device.aphone .frame::before { content: ""; position: absolute; inset: 3.5px; border-radius: 44.5px; background: #040505; }
.device.aphone .screen { border-radius: 40px; clip-path: inset(0 round 40px); }
.device.aphone .hw { display: block; background: linear-gradient(90deg, #23362f, #5a8f7b 60%, #1d2d27); }
.device.aphone .hw.act, .device.aphone .hw.camc, .device.aphone .hw.vd { display: none; }
.device.aphone .hw.pw { left: auto; right: -13px; top: 19%; height: 6.5%; border-radius: 0 2px 2px 0; }
.device.aphone .hw.vu { left: auto; right: -13px; top: 29%; height: 13%; border-radius: 0 2px 2px 0; }
/* tablet: graphite edge, slim bezel, camera on the long top edge */
.device.atab .frame {
  inset: -12px; border-radius: 30px;
  background: linear-gradient(180deg, #4a4e55 0%, #1a1c20 8%, #111215 50%, #1a1c20 92%, #4a4e55 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.device.atab .frame::before { content: ""; position: absolute; inset: 3px; border-radius: 27px; background: #030304; }
.device.atab .frame::after { content: ""; position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a4a, #050508 70%); }
.device.atab .screen { border-radius: 18px; clip-path: inset(0 round 18px); }
.device.atab .hw { display: block; height: 3px; background: linear-gradient(180deg, #5a5e66, #1e2024); }
.device.atab .hw.act, .device.atab .hw.camc, .device.atab .hw.vd { display: none; }
.device.atab .hw.pw { top: -15px; left: 8%; width: 6%; border-radius: 2px 2px 0 0; }
.device.atab .hw.vu { top: -15px; left: 16%; width: 10%; border-radius: 2px 2px 0 0; }

.droid { position: absolute; inset: 0; color: #fff; font-family: Roboto, "Google Sans", Inter, system-ui, sans-serif; }
.a-wall {
  position: absolute; inset: -10%;
  background: radial-gradient(60% 45% at 78% 16%, #3ddc84 0%, transparent 60%), radial-gradient(55% 45% at 12% 40%, #39c6ff 0%, transparent 60%),
    radial-gradient(70% 55% at 55% 100%, #8c6bff 0%, transparent 62%), #0a1b1a;
  transition: transform .5s, filter .5s;
}
.a-punch { position: absolute; z-index: 30; top: 1.5%; left: 50%; transform: translateX(-50%); width: 3.6cqmin; min-width: 8px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #233, #000 65%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.device.atab .a-punch { display: none; }
.a-status { position: absolute; z-index: 20; top: 1.6%; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: center; font-size: max(9px, 3.4cqmin); font-weight: 500; }
.device.atab .a-status { top: 1.8%; left: 2.6%; right: 2.6%; font-size: max(9px, 2.3cqmin); }
.a-status .r { display: inline-flex; gap: .5em; align-items: center; }
.a-status svg { width: 1.15em; height: 1.15em; fill: #fff; }
.a-status .bat { width: .7em; height: 1.2em; border-radius: 2px; background: linear-gradient(0deg, #fff 72%, rgba(255, 255, 255, .35) 72%); }

.a-home { position: absolute; inset: 0; transition: transform .45s var(--ease), opacity .35s; }
.a-glance { position: absolute; top: 9%; left: 8%; right: 8%; }
.a-glance b { display: block; font-size: max(11px, 5.4cqmin); font-weight: 400; }
.a-glance span { font-size: max(8px, 3cqmin); opacity: .85; }
.device.atab .a-glance { top: 8%; left: 4%; }
.device.atab .a-glance b { font-size: max(11px, 4cqmin); }
.device.atab .a-glance span { font-size: max(8px, 2.2cqmin); }
.a-grid { position: absolute; top: 46%; left: 0; right: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4.4cqh 0; padding: 0 6%; }
.device.atab .a-grid { top: 30%; grid-template-columns: repeat(7, 1fr); gap: 7cqh 0; padding: 0 12%; }
.a-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: max(7px, 2.6cqmin); color: rgba(255, 255, 255, .95); }
.device.atab .a-icon { font-size: max(7px, 1.8cqmin); }
.a-icon i { width: 14.5cqmin; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.device.atab .a-icon i { width: 9.5cqmin; }
.a-icon i svg { width: 52%; height: 52%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-search { position: absolute; left: 6%; right: 6%; bottom: 15.5%; height: 6.2%; border-radius: 999px; background: rgba(235, 245, 240, .92); display: flex; align-items: center; gap: 4%; padding: 0 5%; }
.device.atab .a-search { left: 30%; right: 30%; bottom: 17%; height: 7.4%; }
.a-search i { width: 3.6cqmin; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); }
.a-search s { flex: 1; height: 22%; border-radius: 9px; background: rgba(30, 50, 40, .14); }
.a-search u { width: 2.4cqmin; height: 3.6cqmin; border-radius: 9px; background: #3c5a4c; }
.a-dock { position: absolute; left: 6%; right: 6%; bottom: 4.6%; display: flex; justify-content: space-around; }
.a-dock .a-icon span { display: none; }
.device.atab .a-dock { left: 32%; right: 32%; bottom: 3.2%; padding: 1.2% 2%; border-radius: 22px; background: rgba(20, 30, 30, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.a-nav { position: absolute; z-index: 25; bottom: 1.2%; left: 50%; transform: translateX(-50%); width: 28%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .85); }
.device.atab .a-nav { width: 12%; bottom: 1%; }

/* an open app */
.a-app { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none; transform: scale(.2); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .45s var(--ease), opacity .3s, border-radius .45s; border-radius: 30px; overflow: hidden; background: #0f1513; }
.a-app.open { opacity: 1; transform: none; border-radius: 0; }
.a-app .hd { padding: 14% 7% 4%; font-size: max(12px, 5.4cqmin); font-weight: 600; display: flex; align-items: center; gap: 4%; }
.a-app .hd::before { content: ""; width: 7cqmin; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #3ddc84, #1f9d57); }
.device.atab .a-app .hd { padding: 6% 4% 2%; font-size: max(12px, 3.4cqmin); }
.a-app .feed { display: grid; gap: 3cqh; padding: 0 7%; }
.device.atab .a-app .feed { grid-template-columns: 1fr 1fr 1fr; padding: 0 4%; }
.a-app .post { height: 15cqh; border-radius: 18px; background: linear-gradient(120deg, #18302a, #141c1b); position: relative; overflow: hidden; }
.device.atab .a-app .post { height: 30cqh; }
.a-app .post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); animation: shimmer 2.2s infinite; }

/* back: the arrow bubble at the left edge */
.a-back { position: absolute; z-index: 35; left: -8cqmin; top: 46%; width: 8cqmin; height: 16cqmin; border-radius: 0 99px 99px 0; background: rgba(255, 255, 255, .9); display: grid; place-items: center; transition: left .3s var(--ease); pointer-events: none; }
.a-back svg { width: 55%; height: 55%; fill: none; stroke: #102018; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-back.go { left: 0; }

/* notification shade and quick settings */
.a-dim { position: absolute; inset: 0; z-index: 14; background: rgba(6, 14, 12, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .35s; pointer-events: none; }
.a-dim.show { opacity: 1; }
.a-shade { position: absolute; z-index: 16; top: 0; left: 0; right: 0; padding: 11% 5% 4%; transform: translateY(-105%); transition: transform .45s var(--ease); pointer-events: none; }
.a-shade.show { transform: none; }
.device.atab .a-shade { left: 22%; right: 22%; padding: 5% 2% 2%; }
.a-shade .clock { font-size: max(14px, 7cqmin); font-weight: 400; margin: 0 0 3% 2%; }
.device.atab .a-shade .clock { font-size: max(12px, 4cqmin); }
.a-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqmin; }
.a-tile { height: 11cqmin; border-radius: 99px; display: flex; align-items: center; gap: 6%; padding: 0 7%; font-size: max(7px, 2.8cqmin); font-weight: 600; background: rgba(60, 80, 74, .85); }
.device.atab .a-tile { height: 7cqmin; font-size: max(7px, 1.8cqmin); }
.a-tile svg { width: 4.4cqmin; height: 4.4cqmin; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.device.atab .a-tile svg { width: 2.8cqmin; height: 2.8cqmin; }
.a-tile.on { background: #bff3d6; color: #062a17; }
.a-tiles .more { display: none; }
.a-shade.full .a-tiles .more { display: flex; }
.a-bright { display: none; margin-top: 3cqmin; height: 9cqmin; border-radius: 99px; background: rgba(60, 80, 74, .85); position: relative; overflow: hidden; }
.device.atab .a-bright { height: 6cqmin; }
.a-bright::before { content: ""; position: absolute; inset: 0 40% 0 0; border-radius: 99px; background: #bff3d6; }
.a-shade.full .a-bright { display: block; }
.a-notes { margin-top: 3cqmin; display: grid; gap: 1.6cqmin; transition: opacity .3s; }
.a-shade.full .a-notes { display: none; }
.a-note { padding: 3.4cqmin 4cqmin; border-radius: 22px; background: rgba(28, 40, 37, .92); display: flex; gap: 3cqmin; align-items: center; font-size: max(8px, 2.9cqmin); }
.device.atab .a-note { font-size: max(8px, 1.9cqmin); padding: 2cqmin 2.6cqmin; border-radius: 16px; }
.a-note i { width: 7cqmin; aspect-ratio: 1; border-radius: 50%; flex: none; background: linear-gradient(135deg, #3ddc84, #1f9d57); }
.device.atab .a-note i { width: 4.6cqmin; }
.a-note:nth-child(2) i { background: linear-gradient(135deg, #ff4fa3, #c2185b); }
.a-note b { font-weight: 600; }

/* recent apps */
.a-recents { position: absolute; inset: 0; z-index: 13; opacity: 0; transition: opacity .35s; background: rgba(8, 16, 14, .45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); pointer-events: none; }
.a-recents.show { opacity: 1; }
.a-rc { position: absolute; top: 17%; width: 62%; height: 62%; transition: transform .45s var(--ease); transform: scale(.9); }
.a-recents.show .a-rc { transform: none; }
.a-rc.c1 { left: -50%; } .a-rc.c2 { left: 19%; } .a-rc.c3 { left: 88%; }
.device.atab .a-rc { top: 16%; width: 32%; height: 60%; }
.device.atab .a-rc.c1 { left: 1.5%; } .device.atab .a-rc.c2 { left: 34%; } .device.atab .a-rc.c3 { left: 66.5%; }
.a-rc .lbl { display: flex; justify-content: center; margin-bottom: 4%; }
.a-rc .lbl i { width: 8cqmin; aspect-ratio: 1; border-radius: 50%; }
.device.atab .a-rc .lbl i { width: 5cqmin; }
.a-rc .win { height: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); background: #0f1513; padding: 10% 8% 0; display: grid; align-content: start; gap: 5%; }
.a-rc .win s { display: block; height: 3.2cqh; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.a-rc .win s:nth-child(odd) { width: 70%; }
.a-rc.c1 .win { background: linear-gradient(170deg, #39c6ff, #1c4f6b); }
.a-rc.c3 .win { background: linear-gradient(170deg, #8c6bff, #2b2160); }
.a-rc.c2 .win s { height: 9cqh; background: linear-gradient(120deg, #18302a, #141c1b); }
.a-rbar { position: absolute; bottom: 9%; left: 0; right: 0; display: flex; justify-content: center; gap: 4%; }
.a-rbar span { padding: 1.6cqmin 3.6cqmin; border-radius: 99px; background: rgba(40, 56, 52, .9); font-size: max(7px, 2.6cqmin); font-weight: 600; }
.device.atab .a-rbar span { font-size: max(7px, 1.7cqmin); padding: 1cqmin 2.4cqmin; }

/* volume (right edge, like Android) and screen off */
.a-vol { position: absolute; z-index: 15; right: 3.5%; top: 22%; width: 9cqmin; height: 34%; border-radius: 999px; background: rgba(34, 48, 44, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; overflow: hidden; transition: opacity .35s, transform .35s var(--ease); transform: translateX(30%); pointer-events: none; }
.device.atab .a-vol { width: 5.5cqmin; top: 20%; height: 44%; }
.a-vol.show { opacity: 1; transform: none; }
.a-vol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 55%); background: #bff3d6; border-radius: 999px; transition: height .3s; }
.a-off { position: absolute; inset: 0; z-index: 18; opacity: 0; background: #000; transition: opacity .4s; pointer-events: none; }
.a-off.show { opacity: 1; }
.a-off .t { position: absolute; top: 26%; width: 100%; text-align: center; font-size: max(22px, 17cqmin); font-weight: 200; line-height: 1; color: #cfeee0; }
.device.atab .a-off .t { top: 22%; font-size: max(22px, 12cqmin); }
.a-off .dte { position: absolute; top: 22%; width: 100%; text-align: center; font-size: max(9px, 3cqmin); color: rgba(207, 238, 224, .75); }
.device.atab .a-off .dte { top: 16%; font-size: max(9px, 2cqmin); }

@media (max-width: 760px) {
  .app-body { height: 520px; padding: 2px 6px 6px; }
  .app-top .who, .app-top .hide-s, .lights, .app-top .sep { display: none; }
  .app-top { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .device, .home, .pages, .appwin, .ov, .lock, .cursor, .wall, .a-home, .a-app, .a-shade, .a-recents, .a-vol, .a-off, .a-back { transition: none !important; }
  .live .hearts i, .live .host, .tally::before, .appwin .post::after, .a-app .post::after { animation: none !important; }
}
.device.tablet .page .icon:nth-child(n+19) { display: none; }

/* ---- 1:1 with the ZenLink 2.5 window ----------------------------------- */
html[data-theme="dark"] { --w-bg: rgba(28, 28, 31, .78); --w-panel: rgba(255, 255, 255, .045); --w-card: rgba(255, 255, 255, .06); --w-chip: rgba(255, 255, 255, .08); --w-seg-on: rgba(255, 255, 255, .16); --dotc: rgba(255, 115, 188, .55); }
html[data-theme="light"] { --w-bg: rgba(238, 238, 243, .72); --w-panel: rgba(255, 255, 255, .42); --w-card: rgba(255, 255, 255, .62); --w-chip: rgba(255, 255, 255, .78); --w-seg-on: #fff; --dotc: rgba(232, 80, 156, .55); }
.app { --glassk: 1; border-radius: 16px; }
.app-top { height: 58px; padding: 0 14px; gap: 7px; }
.app-top .nm { font-size: 15px; }
.app-top .pillst { font-size: 11.5px; padding: 5px 10px; }
.gb { height: 36px; min-width: 36px; padding: 0 12px; border-radius: 18px; font-size: 13.5px; font-weight: 500; background: var(--w-chip); }
.gb.raise { background: var(--w-seg-on); }
.gb.on { border-color: color-mix(in srgb, var(--w-acc) 40%, transparent); }
button.gb { all: unset; box-sizing: border-box; cursor: pointer; height: 36px; min-width: 36px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: var(--w-chip); border: 1px solid var(--app-line); transition: background .2s, color .2s; }
.app.set-open button.gear { color: var(--w-acc); background: var(--w-acc-soft); }
.lights i { width: 16px; height: 16px; }

.app-body { display: grid; grid-template-columns: 1fr 0px; gap: 0; height: clamp(560px, 62vw, 700px); padding: 4px 12px 12px; transition: grid-template-columns .45s var(--ease), gap .45s var(--ease); }
.app.set-open .app-body { grid-template-columns: 1fr 340px; gap: 12px; }
.stagecol { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
.stage { padding-bottom: 0; border-radius: 20px; background: var(--w-panel); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge-hi); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, var(--dotc) 1.6px, transparent 2.1px) 0 0 / 17px 17px;
  -webkit-mask: radial-gradient(ellipse 52% 50% at 50% 50%, #000 25%, transparent 78%); mask: radial-gradient(ellipse 52% 50% at 50% 50%, #000 25%, transparent 78%);
}
.stage .device.phone, .stage .device.aphone { height: 86%; }
.caption { top: 12px; }
.dockrow { display: flex; justify-content: center; min-width: 0; }
.gpanel { position: static; transform: none; left: auto; bottom: auto; padding: 7px 9px; gap: 7px; background: var(--w-card); }
.gpanel button { height: 34px; padding: 0 12px; border-radius: 17px; font-size: 13.5px; font-weight: 500; background: var(--w-chip); border: 1px solid var(--app-line); }
.gpanel button svg { width: 15px; height: 15px; }
.gpanel button:hover { transform: none; background: var(--w-seg-on); }
.stage .note { bottom: 14px; }
.screen { cursor: pointer; }

/* settings panel (scrolls, like the app) */
.setp { min-width: 0; overflow: hidden; border-radius: 20px; background: var(--w-panel); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge-hi); display: flex; flex-direction: column; opacity: 0; transition: opacity .35s; }
.app.set-open .setp { opacity: 1; }
.setp .hd { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.setp .hd img { width: 34px; height: 34px; border-radius: 9px; }
.setp .hd b { display: block; font-size: 15px; }
.setp .hd small { color: var(--w-acc); font-size: 11.5px; }
.setp .hd button { all: unset; cursor: pointer; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--w-chip); border: 1px solid var(--app-line); }
.setp .hd button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.setp .sc { flex: 1; overflow-y: auto; padding: 0 10px 12px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.scard { padding: 12px 14px 14px; border-radius: 18px; background: var(--w-card); border: 1px solid var(--app-line); display: grid; gap: 10px; font-size: 13px; }
.scard h5 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.scard h5 i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ta), var(--tb)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.scard h5 i svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scard h5 u { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid var(--text-3); font: 600 9px/12px var(--sans); color: var(--text-3); text-align: center; text-decoration: none; }
.scard p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.sseg { display: flex; padding: 3px; border-radius: 99px; background: var(--w-chip); }
.sseg button { all: unset; cursor: pointer; flex: 1; text-align: center; white-space: nowrap; padding: 6px 4px; border-radius: 99px; font-size: 12.5px; color: var(--text-2); transition: background .2s, color .2s; }
.sseg button.on { background: var(--w-seg-on); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.srow { display: flex; align-items: center; gap: 10px; }
.srow > span { flex: 1; }
.srow small { display: block; color: var(--text-3); font-size: 11px; }
.srow .val { flex: none; color: var(--text-3); font-size: 11.5px; }
.stg { all: unset; cursor: pointer; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--w-chip); border: 1px solid var(--app-line); position: relative; transition: background .25s; }
.stg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: left .25s var(--ease); }
.stg.on { background: var(--w-acc); }
.stg.on::after { left: 18px; }
.srange { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--w-acc) var(--p, 30%), var(--w-chip) var(--p, 30%)); outline: none; }
.srange::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.srange::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.sbtn { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; background: var(--w-chip); border: 1px solid var(--app-line); }
.sbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.sfield { flex: 1; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; color: var(--text-3); background: var(--w-chip); border: 1px solid var(--app-line); }
.device { transition: width .5s var(--ease), height .5s var(--ease), transform .6s var(--ease); }
.app.no-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--w-bg) 100%, var(--bg) 100%); }

@media (max-width: 760px) {
  .app-body { grid-template-columns: 1fr !important; gap: 0 !important; height: auto; }
  .stagecol { height: 560px; }
  .setp { display: none; }
  .app.set-open .setp { display: flex; height: 520px; margin-top: 10px; }
  .gpanel button span { display: none; }
  .gpanel button { padding: 0 10px; }
}
/* compact dock (icons only) when the picture column is narrow, like the app */
.stagecol { container-type: inline-size; }
@container (max-width: 860px) { .gpanel button span { display: none; } .gpanel button { padding: 0 10px; } }