/* ================= iOS 27 (Duo): one UI per display surface ================= */
.ui {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; color: #fff; isolation: isolate; clip-path: inset(0px); /* own backdrop root: keeps backdrop-filter stable inside the 3D scene */
  font-family: var(--font); letter-spacing: -.012em; font-size: 15px; line-height: 1.25;
  /* semantic tokens (light) */
  --label: #000; --label2: rgba(60,60,67,.62); --label3: rgba(60,60,67,.32);
  --bg: #fff; --bg2: #f2f2f7; --cell: #fff; --sep: rgba(60,60,67,.24); --fill: rgba(120,120,128,.16); --fill2: rgba(120,120,128,.24);
  --tint: #007aff; --blur-bg: rgba(249,249,249,.78);
  --safe-r: 0px; --safe-b: 0px;
}
#stage[data-ui="dark"] .ui { --label: #fff; --label2: rgba(235,235,245,.6); --label3: rgba(235,235,245,.3); --bg: #000; --bg2: #1c1c1e; --cell: #1c1c1e; --sep: rgba(84,84,88,.6); --fill: rgba(120,120,128,.24); --fill2: rgba(120,120,128,.36); --tint: #0a84ff; --blur-bg: rgba(30,30,30,.72); }
.ui button, .ui input, .ui textarea { letter-spacing: inherit; }
.ui * { -webkit-user-drag: none; }
.ui .scroll { overflow: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ui .scroll::-webkit-scrollbar { display: none; }
.ui .scroll.scroll-y { overflow-x: hidden; }
.ui .scroll.scroll-x { overflow-y: hidden; }
.ui .dragging { cursor: grabbing; }
.ui input, .ui textarea { border: 0; outline: 0; background: transparent; user-select: text; -webkit-user-select: text; caret-color: var(--tint); }
.ui ::selection { background: rgba(10,132,255,.3); }

.u-wall { position: absolute; inset: 0; background-color: #222; transition: transform .5s cubic-bezier(.2,.9,.25,1), filter .4s; }
.u-layer { position: absolute; inset: 0; }

/* ---------- system chrome: status corner, home indicator ---------- */
.u-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.edge { position: absolute; right: 9px; top: 46px; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; transition: top .5s cubic-bezier(.3,1.2,.4,1), opacity .3s; }
.edge > * { pointer-events: auto; }
.surf-outer .edge { top: 50px; }
.e-time { font-size: 13.500px; font-weight: 600; letter-spacing: -.01em; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.25); cursor: pointer; padding: 1px 4px; }
.e-ring { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(120,120,128,.34); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 0 0 .5px rgba(255,255,255,.14) inset; transition: transform .15s; }
.e-ring:active { transform: scale(.9); }
.e-ring svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.e-ring .wifi { width: 17px; height: 17px; }
.edge.tone-dark .e-time { color: #000; text-shadow: none; }
.edge.tone-dark .e-ring { color: #000; background: rgba(60,60,67,.18); }
.hbar { position: absolute; left: 50%; bottom: 8px; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: #fff; opacity: .92; pointer-events: none; transition: background .25s, opacity .25s, transform .25s; }
.hbar.tone-dark { background: #000; opacity: .82; }
.hbar-hit { position: absolute; left: 50%; bottom: 0; width: 260px; height: 26px; margin-left: -130px; z-index: 41; cursor: grab; }
.hbar-hit:active { cursor: grabbing; }

/* ---------- Dynamic Island (vertical, anchored to the top-right corner) ---------- */
.island { position: absolute; z-index: 45; top: 13px; right: 13px; background: #000; overflow: hidden; color: #fff; cursor: pointer;
  transition: width .55s cubic-bezier(.32,1.28,.4,1), height .55s cubic-bezier(.32,1.28,.4,1), border-radius .55s cubic-bezier(.32,1.28,.4,1), top .4s, right .4s; box-shadow: 0 0 0 .5px rgba(255,255,255,.06); }
.island .isl-sensor { position: absolute; right: 8px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #1b2440, #06080f 65%); box-shadow: inset 0 0 2px rgba(80,110,200,.5); transition: opacity .3s; }
.island .isl-body { position: absolute; inset: 0; }
.surf-inner .island { top: 14px; right: 14px; }
.surf-inner .island[data-mode="idle"] { opacity: 0; } /* the inner display's camera is hidden under the glass */
.island[data-mode="idle"] { pointer-events: none; }
.isl-toast, .isl-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; font-size: 11.500px; font-weight: 600; animation: islIn .35s .12s both; }
@keyframes islIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.isl-toast .ib .svgi { font-size: 20px; }
.isl-faceid { position: absolute; inset: 0; display: grid; place-items: center; animation: islIn .3s .1s both; }
.isl-faceid.ok .fid-face { stroke: #30d158; }
.wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.wave i { width: 2.500px; height: 100%; border-radius: 2px; background: #ff375f; animation: wv .9s ease-in-out infinite; transform-origin: center; }
@keyframes wv { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- home screen ---------- */
.u-home { position: absolute; inset: 0; z-index: 2; transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s, filter .5s; transform-origin: 50% 50%; }
.u-home.away { transform: scale(1.1); opacity: 0; filter: blur(16px); pointer-events: none; }
.home-body { position: absolute; inset: 0; display: flex; padding: 48px 84px 66px 28px; gap: 28px; }
.hcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hgrid { display: grid; grid-template-columns: repeat(4, 60px); justify-content: space-between; grid-auto-rows: min-content; row-gap: 22px; align-content: start; }
.hgrid.one { grid-template-columns: 1fr; }
.happ { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; cursor: pointer; transition: transform .14s; }
.happ:active { transform: scale(.9); }
.happ > .lbl { font-size: 11px; font-weight: 500; letter-spacing: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); white-space: nowrap; }
.ico { position: relative; overflow: hidden; clip-path: url(#sq); flex: none; }
.ico svg { display: block; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 14px; font-weight: 500; display: grid; place-items: center; z-index: 2; }
.happ .bwrap { position: relative; }
.dock { position: absolute; right: 9px; bottom: 82px; width: 64px; padding: 10px 0; border-radius: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
  background: rgba(255,255,255,.22); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); box-shadow: 0 0 0 .5px rgba(255,255,255,.25) inset, 0 8px 24px rgba(0,0,0,.14); }
.dock .ico { cursor: pointer; transition: transform .14s; }
.dock .ico:active { transform: scale(.9); }
.searchbtn { position: absolute; right: 16px; bottom: 26px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; z-index: 3; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.26); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(255,255,255,.25) inset; }
.searchbtn .svgi { font-size: 19px; }
.pdots { position: absolute; left: 50%; bottom: 26px; display: flex; gap: 8px; transform: translateX(-60%); z-index: 3; }
.pdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.pdots i.on { background: #fff; }

/* widgets */
.widget { position: relative; border-radius: 26px; overflow: hidden; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.widget.s { grid-column: span 2; aspect-ratio: 1; }
.widget.m { grid-column: span 4; height: 150px; }
.widget.feat { flex: 1; min-height: 0; border-radius: 34px; }
.widget.weather { padding: 14px 15px; display: flex; flex-direction: column; }
.w-loc { font-size: 13.500px; font-weight: 600; display: flex; gap: 2px; }
.w-loc .loc { font-size: 10px; margin-top: 2px; }
.w-temp { font-size: 46px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; margin-top: 2px; }
.w-cond { margin-top: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.w-hl { font-size: 13px; font-weight: 500; opacity: .85; margin-top: 1px; }
.widget.calw { background: #fff; color: #000; padding: 13px 14px; display: flex; flex-direction: column; }
.cw-head { display: flex; flex-direction: column; }
.cw-day { color: #ff3b30; font-size: 12.500px; font-weight: 600; letter-spacing: .02em; }
.cw-num { font-size: 40px; font-weight: 300; line-height: 1; margin-top: 1px; }
.cw-ev { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.cw-e { display: flex; gap: 6px; font-size: 11.500px; line-height: 1.15; }
.cw-e i { width: 3px; border-radius: 2px; background: var(--c); flex: none; }
.cw-e b { display: block; font-weight: 600; } .cw-e small { color: #8a8a8e; font-size: 11px; }
.cw-none { color: #8a8a8e; font-size: 12px; }
.widget.clockw { background: #000; padding: 10px; display: grid; place-items: center; }
.widget.clockw svg { width: 100%; height: 100%; }
.widget.musicw { padding: 13px; display: flex; flex-direction: column; }
.mw-top { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; opacity: .9; }
.mw-spacer { flex: 1; } .mw-title { font-size: 15px; font-weight: 700; line-height: 1.15; } .mw-artist { font-size: 12.500px; opacity: .8; }
.mw-btn { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.28); display: grid; place-items: center; backdrop-filter: blur(10px); }
.widget.photow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s; }
.pw-cap { position: absolute; left: 12px; bottom: 10px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); z-index: 2; }
.widget.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-cap { position: absolute; left: 20px; bottom: 34px; z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.feat-cap b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .feat-cap small { font-size: 12.500px; font-weight: 500; opacity: .85; }
.feat-play { position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(30,30,30,.55); backdrop-filter: blur(12px); display: grid; place-items: center; z-index: 2; }
.widget.feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4)); }
.widget.feat img { transition: opacity .9s; }

/* ---------- windows ---------- */
.u-wins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.u-wins.split { background: #000; }
.win { position: absolute; overflow: hidden; background: var(--bg); color: var(--label); pointer-events: auto; transform-origin: 0 0;
  transition: left .4s cubic-bezier(.2,.9,.25,1), top .4s cubic-bezier(.2,.9,.25,1), width .4s cubic-bezier(.2,.9,.25,1), height .4s cubic-bezier(.2,.9,.25,1), border-radius .4s, transform .45s cubic-bezier(.2,.9,.25,1), opacity .3s; container-type: inline-size; container-name: win; }
.win.hidden { visibility: hidden; pointer-events: none; opacity: 0; }
.win.noanim { transition: none; }
.win.focus-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(10,132,255,.55); }
.win .app { position: absolute; inset: 0; overflow: hidden; }

/* ---------- lock screen ---------- */
.u-lock { position: absolute; inset: 0; z-index: 30; color: #fff; will-change: transform; }
.lk-bg { position: absolute; inset: 0; background-color: #333; }
.lk-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25)); }
.lk-main { position: absolute; inset: 0; }
.lk-date { position: absolute; left: 0; right: 0; top: 42px; text-align: center; font-size: 19px; font-weight: 600; letter-spacing: -.01em; opacity: .92; text-shadow: 0 1px 12px rgba(0,0,0,.18); }
.lk-time { position: absolute; left: 0; right: 0; top: 66px; display: flex; justify-content: center; font-family: "SF Pro Display", var(--font); font-weight: 200; font-size: 214px; line-height: 1; letter-spacing: -.04em; height: 210px; overflow: visible; }
.lk-time span { display: inline-block; transform: scale(.5, 1); transform-origin: 50% 0; width: .29em; text-align: center; color: rgba(255,255,255,.94); text-shadow: 0 2px 30px rgba(0,0,0,.14); font-variant-numeric: tabular-nums; }
.lk-time span.colon { width: .13em; }
.lk-padlock { position: absolute; left: 18px; top: 22px; opacity: .9; }
.lk-notifs { position: absolute; left: 20px; right: 84px; bottom: 74px; display: flex; flex-direction: column; gap: 8px; }
.lk-bottom { position: absolute; right: 14px; bottom: 62px; display: flex; flex-direction: column; gap: 14px; }
.lk-round { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(60,60,67,.42); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); color: #fff; box-shadow: 0 0 0 .5px rgba(255,255,255,.15) inset; transition: transform .15s, background .2s; }
.lk-round:active { transform: scale(.9); }
.lk-round .svgi { font-size: 22px; }
.lk-round.on { background: #fff; color: #000; }
.lk-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 12.500px; font-weight: 500; opacity: 0; transition: opacity .5s; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.lk-hint.on { opacity: .72; animation: hintPulse 2.6s ease-in-out infinite; }
@keyframes hintPulse { 50% { opacity: .35; } }
.lk-widgets { position: absolute; left: 22px; right: 84px; top: 50px; }
.lk-today { font-size: 15px; font-weight: 600; opacity: .8; margin-bottom: 10px; }
.lk-wrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.lk-wrow.one { grid-template-columns: 1fr; }
.lk-wrow .widget.s { grid-column: auto; }
.notif { display: flex; gap: 10px; padding: 12px; border-radius: 22px; cursor: pointer; background: rgba(255,255,255,.2); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(255,255,255,.18) inset, 0 6px 18px rgba(0,0,0,.14); animation: notIn .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes notIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.n-ico { flex: none; } .n-txt { flex: 1; min-width: 0; }
.n-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14.500px; } .n-top small { font-size: 12px; opacity: .65; }
.n-body { font-size: 14px; opacity: .92; line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lk-pass { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.22); backdrop-filter: blur(36px) saturate(1.4); -webkit-backdrop-filter: blur(36px) saturate(1.4); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lk-pass.on { opacity: 1; pointer-events: auto; }
.pc-inner { display: flex; flex-direction: column; align-items: center; }
.pc-msg { font-size: 17px; font-weight: 500; margin-bottom: 16px; }
.pc-dots { display: flex; gap: 20px; margin-bottom: 26px; } .pc-dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff inset; } .pc-dots i.f { background: #fff; }
.pc-pad { display: grid; grid-template-columns: repeat(3, 74px); gap: 14px 22px; }
.pc-key { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .1s; }
.pc-key:active { background: rgba(255,255,255,.55); } .pc-key b { font-size: 33px; font-weight: 300; line-height: 1; } .pc-key small { font-size: 9.500px; letter-spacing: .14em; font-weight: 600; opacity: .9; }
.pc-cancel { grid-column: 3; align-self: center; font-size: 17px; } .pc-hint { margin-top: 18px; font-size: 12px; opacity: .6; }

/* ---------- app switcher ---------- */
.u-switch { position: absolute; inset: 0; z-index: 6; display: none; }
.u-switch.on { display: block; }
.sw-back { position: absolute; inset: 0; background: rgba(20,20,24,.35); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); opacity: 0; transition: opacity .3s; }
.u-switch.on .sw-back { opacity: 1; }
.sw-card { position: absolute; cursor: pointer; }
.sw-head { position: absolute; left: 0; right: 0; top: -34px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.sw-head .ico { border-radius: 8px; }
.sw-split { margin-left: auto; padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.2); font-size: 11.500px; }
.sw-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 600; opacity: .8; }

/* ---------- control center / notification center ---------- */
.u-sheets { position: absolute; inset: 0; z-index: 42; pointer-events: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sheet-scrim.on { opacity: 1; pointer-events: auto; }
.cc { position: absolute; right: 12px; top: 12px; width: 360px; max-width: calc(100% - 24px); padding: 12px; border-radius: 40px; pointer-events: auto; transform: translateY(-115%); transition: transform .5s cubic-bezier(.2,.9,.25,1);
  background: rgba(60,62,70,.55); backdrop-filter: blur(50px) saturate(1.8); -webkit-backdrop-filter: blur(50px) saturate(1.8); box-shadow: 0 0 0 .5px rgba(255,255,255,.18) inset, 0 24px 60px rgba(0,0,0,.4); color: #fff; }
.cc.on { transform: none; }
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cc-m { border-radius: 26px; background: rgba(120,122,130,.34); position: relative; overflow: hidden; }
.cc-conn { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 8px; gap: 4px; }
.cc-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(60,60,67,.5); transition: background .2s, transform .12s, color .2s; color: #fff; }
.cc-btn:active { transform: scale(.9); } .cc-btn .svgi { font-size: 24px; }
.cc-btn.on { background: var(--c, #0a84ff); } .cc-btn.on.white { background: #fff; color: #000; }
.cc-play { grid-column: span 2; grid-row: span 2; padding: 12px; display: flex; flex-direction: column; }
.cc-play .t { font-size: 13.500px; font-weight: 600; margin-top: auto; line-height: 1.1; } .cc-play .a { font-size: 12px; opacity: .7; } .cc-play .ctl { display: flex; justify-content: space-around; margin-top: 8px; }
.cc-play .ctl button { width: 34px; height: 34px; display: grid; place-items: center; } .cc-play .ctl .svgi { font-size: 22px; }
.cc-small { display: grid; min-height: 0; aspect-ratio: 1; place-items: center; background: rgba(120,122,130,.34); border-radius: 26px; transition: background .2s, transform .12s, color .2s; }
.cc-small:active { transform: scale(.94); } .cc-small .svgi { font-size: 26px; } .cc-small.on { background: #fff; color: #000; }
.cc-tg { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.cc-slider { grid-column: span 1; grid-row: span 2; min-height: 150px; border-radius: 26px; background: rgba(120,122,130,.34); position: relative; overflow: hidden; touch-action: none; cursor: pointer; }
.cc-slider .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; }
.cc-slider .svgi { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 26px; color: #6d6d72; mix-blend-mode: difference; filter: invert(1); }
.nc { position: absolute; inset: 0; pointer-events: auto; transform: translateY(-104%); transition: transform .55s cubic-bezier(.2,.9,.25,1); background: rgba(20,22,30,.55); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5); border-radius: 0 0 36px 36px; }
.nc.on { transform: none; }
.nc-in { position: absolute; left: 24px; right: 84px; top: 48px; bottom: 34px; display: flex; flex-direction: column; }
.nc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .nc-head b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; } .nc-head button { font-size: 13px; padding: 5px 11px; border-radius: 14px; background: rgba(255,255,255,.18); }
.nc-list { flex: 1; display: flex; flex-direction: column; gap: 8px; } .nc-empty { margin: auto; opacity: .55; font-size: 15px; }
.banner { position: absolute; left: 50%; top: 10px; width: min(380px, calc(100% - 100px)); margin-left: calc(min(380px, 100% - 100px) / -2 - 24px); z-index: 48; transform: translateY(-130%); transition: transform .5s cubic-bezier(.2,1.1,.3,1); pointer-events: auto; }
.banner.on { transform: none; }
.banner .notif { animation: none; background: rgba(40,42,50,.62); }
.hud-vol { position: absolute; left: 12px; top: 50%; width: 46px; height: 178px; margin-top: -89px; border-radius: 23px; z-index: 47; background: rgba(120,120,128,.4); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); overflow: hidden; opacity: 0; transform: translateX(-12px) scale(.9); transition: opacity .25s, transform .3s cubic-bezier(.2,1.2,.4,1); pointer-events: none; }
.hud-vol.on { opacity: 1; transform: none; } .hud-vol .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; transition: height .12s; } .hud-vol .svgi { position: absolute; left: 50%; bottom: 10px; margin-left: -10px; font-size: 20px; color: #444; }
.u-off { position: absolute; inset: 0; z-index: 60; background: #000; opacity: 1; pointer-events: auto; transition: opacity .45s; }
.u-off.awake { opacity: 0; pointer-events: none; }
.u-dim { position: absolute; inset: 0; z-index: 59; background: #000; pointer-events: none; opacity: 0; }
.u-flash { position: absolute; inset: 0; z-index: 58; background: #fff; pointer-events: none; opacity: 0; }

/* ---------- keyboard ---------- */
.kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 26; padding: 0 0 6px; transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.9,.25,1);
  background: rgba(208,211,218,.94); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); color: #000; }
#stage[data-ui="dark"] .kb { background: rgba(44,44,48,.92); color: #fff; }
.kb.on { transform: none; }
.kb-suggest { height: 42px; display: flex; align-items: center; padding: 0 4px; }
.kb-suggest .sg { flex: 1; height: 34px; font-size: 16.500px; border-right: 1px solid rgba(0,0,0,.14); color: inherit; }
.kb-suggest .sg:last-child { border: 0; } .kb-suggest .sg.lit { font-weight: 500; }
.kb-keys { padding: 4px 4px 0; display: flex; flex-direction: column; gap: 11px; max-width: 700px; margin: 0 auto; }
.kb-row { display: flex; gap: 6px; }
.kb-row.pad { padding: 0 5%; }
.kb-row .sp { flex: .5; }
.key { flex: 1; height: 42px; border-radius: 6px; background: #fff; color: #000; font-size: 23px; box-shadow: 0 1px 0 rgba(0,0,0,.3); display: grid; place-items: center; transition: background .05s; }
#stage[data-ui="dark"] .key { background: #6a6a6e; color: #fff; }
.key.mod { background: #adb3bc; font-size: 15.500px; } #stage[data-ui="dark"] .key.mod { background: #47474b; }
.key.space { font-size: 15.500px; } .key.ret { font-size: 15.500px; } .key.ret.blue { background: #007aff; color: #fff; }
.key.down { background: #b8bdc7; } .key.mod.down { background: #fff; } #stage[data-ui="dark"] .key.down { background: #8a8a90; }
.key .svgi { font-size: 24px; }
.kb-foot { display: flex; justify-content: space-between; padding: 4px 22px 0; height: 30px; align-items: center; opacity: .75; } .kb-foot .svgi { font-size: 24px; }
.kb-pop { position: absolute; z-index: 5; width: 52px; height: 62px; margin-left: -26px; margin-top: -58px; border-radius: 10px; background: #fff; color: #000; display: none; align-items: flex-start; justify-content: center; font-size: 36px; padding-top: 6px; box-shadow: 0 6px 14px rgba(0,0,0,.28); pointer-events: none; transform: translateY(-6px); }
.kb-pop.on { display: flex; }
#stage[data-ui="dark"] .kb-pop { background: #6a6a6e; color: #fff; }

/* generic pill/glass helpers used by apps */
.gls { backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }

/* spotlight */
.spot { position: absolute; inset: 0; z-index: 3; display: grid; place-items: start center; padding-top: 44px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.spot.on { opacity: 1; pointer-events: auto; }
.sp-box { width: min(420px, calc(100% - 100px)); margin-right: 46px; border-radius: 28px; background: rgba(50,52,60,.6); backdrop-filter: blur(50px) saturate(1.8); -webkit-backdrop-filter: blur(50px) saturate(1.8); box-shadow: 0 0 0 .5px rgba(255,255,255,.16) inset, 0 24px 60px rgba(0,0,0,.4); overflow: hidden; color: #fff; }
.sp-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; } .sp-bar .svgi { font-size: 17px; opacity: .7; } .sp-bar input { flex: 1; font-size: 17px; color: #fff; } .sp-bar button { font-size: 15px; color: #0a84ff; }
.sp-res { max-height: 340px; padding: 0 8px 10px; } .sp-h { font-size: 13px; opacity: .6; font-weight: 600; padding: 8px 8px 4px; }
.sp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: 12px; font-size: 16px; text-align: left; } .sp-row:hover { background: rgba(255,255,255,.1); } .sp-none { padding: 22px; opacity: .6; text-align: center; }
/* island contents */
.i-music { flex-direction: column; justify-content: space-between; padding: 9px 0; } .i-art { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.i-exp { position: absolute; inset: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; animation: islIn .35s .12s both; }
.i-top { display: flex; align-items: center; gap: 12px; } .i-top .i-art { width: 54px; height: 54px; border-radius: 12px; } .i-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .i-meta b { font-size: 16px; font-weight: 600; } .i-meta span { font-size: 13px; opacity: .6; }
.i-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; } .i-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.i-ctl { display: flex; justify-content: center; gap: 30px; } .i-ctl button { width: 40px; height: 34px; display: grid; place-items: center; } .i-ctl .svgi { font-size: 24px; }
.lk-hint .fp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; margin-right: 8px; vertical-align: -1px; }

/* iOS 27 Duo: app controls live in a vertical glass capsule on the right edge (thumb reach) */
.edgebar { position: absolute; right: 10px; width: 46px; padding: 6px 0; border-radius: 23px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(120,120,128,.28); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7); box-shadow: 0 0 0 .5px rgba(255,255,255,.2) inset; color: var(--label); }
.edgebar.dark { color: #fff; background: rgba(60,60,67,.5); }
.edgebtn { width: 40px; height: 38px; border-radius: 19px; display: grid; place-items: center; font-size: 19px; transition: background .15s, transform .12s; }
.edgebtn:active { transform: scale(.9); background: rgba(120,120,128,.3); } .edgebtn.on { color: var(--tint); }
.win .edgebar { right: 10px; }
.win[data-side="left"] .edgebar { right: 10px; }

.u-home.tone-dark .happ > .lbl { color: rgba(28,28,30,.82); text-shadow: none; font-weight: 500; }
.u-home.tone-dark .searchbtn { color: #1c1c1e; background: rgba(255,255,255,.4); }
.u-home.tone-dark .dock { background: rgba(255,255,255,.38); }

.u-preview { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
.u-preview > * { pointer-events: auto; }
.ui.preview-on .edge, .ui.preview-on .hbar, .ui.preview-on .hbar-hit, .ui.preview-on .island { opacity: 0; pointer-events: none; }

.ui.switching .u-wins { z-index: 7; pointer-events: none; }
.ui.switching .u-wins .win { box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.sw-layer, .sw-empty { position: absolute; }
.sw-empty { inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 600; color: #fff; }

.u-snap { position: absolute; inset: 0; z-index: 36; overflow: hidden; pointer-events: none; background: #000; will-change: filter; }
.u-snap:empty { display: none; }
.ui.snapping .edge, .ui.snapping .hbar { opacity: 0; }

/* =====================================================================================
   LIQUID GLASS (iOS 26/27): clear, lensing glass. Layers: light backdrop blur + saturation boost,
   a soft internal gradient, a bright specular rim (top-left) with a fainter counter-rim, a lens ring
   at the edge that blurs & brightens what it refracts, and a springy "liquid" press response.
   ===================================================================================== */
:root {
  --lg-fill: linear-gradient(150deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.18) 100%);
  --lg-rim: inset 0 0 0 .6px rgba(255,255,255,.34), inset 2px 2.5px 3px -1.5px rgba(255,255,255,.85), inset -2px -2.5px 3px -1.5px rgba(255,255,255,.35), inset 0 0 14px rgba(255,255,255,.09);
  --lg-drop: 0 10px 30px rgba(10,14,30,.20), 0 2px 6px rgba(10,14,30,.14);
  --lg-blur: blur(15px) saturate(1.9) brightness(1.07);
}
.dock, .searchbtn, .e-ring, .lk-round, .notif, .cc, .cc-m, .cc-small, .cc-btn, .cc-slider, .edgebar, .sp-box, .nc, .banner .notif,
.cam-tb, .cam-zoom, .cam-flip, .rl-mute, .rl-cam, .pho-vback, .pho-vbar, .pho-tabs, .ms-plus, .ms-menu, .mw-btn {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  box-shadow: var(--lg-rim), var(--lg-drop) !important;
  position: relative;
  transition: transform .42s cubic-bezier(.3,1.7,.5,1), box-shadow .3s, background .3s, filter .3s;
}
.dock, .searchbtn, .cc, .edgebar, .sp-box, .nc, .pho-vbar, .cam-zoom { position: absolute; }
.notif { position: relative; } .banner .notif { position: relative; }
/* specular sheen that catches the "light" from the top-left */
.dock::before, .searchbtn::before, .e-ring::before, .lk-round::before, .notif::before, .cc::before, .cc-m::before, .cc-small::before, .cc-btn::before, .edgebar::before, .sp-box::before, .cam-tb::before, .cam-zoom::before, .cam-flip::before, .rl-mute::before, .rl-cam::before, .pho-vback::before, .pho-vbar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(130% 70% at 12% -8%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
  mix-blend-mode: soft-light; opacity: .9;
}
/* lens ring: the outer few pixels refract harder than the centre */
.dock::after, .searchbtn::after, .e-ring::after, .lk-round::after, .cc::after, .cc-m::after, .edgebar::after, .cam-tb::after, .cam-zoom::after, .cam-flip::after, .pho-vback::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 5px; z-index: 0;
  -webkit-backdrop-filter: blur(5px) brightness(1.28) saturate(1.5); backdrop-filter: blur(5px) brightness(1.28) saturate(1.5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .55;
}
.dock > *, .searchbtn > *, .e-ring > *, .lk-round > *, .cc > *, .edgebar > *, .cam-tb > *, .cam-zoom > *, .cam-flip > * { position: relative; z-index: 1; }
/* liquid press: glass swells and lights up */
.dock .ico:active { transform: scale(.94); }
.searchbtn:active, .e-ring:active, .lk-round:active, .cam-tb:active, .cam-flip:active, .rl-mute:active, .rl-cam:active, .cc-small:active, .cc-btn:active, .mw-btn:active { transform: scale(1.12) !important; filter: brightness(1.25) saturate(1.2); }
.cc-btn.on, .cc-small.on { background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.72)) !important; }
.cc-btn.on:not(.white) { background: linear-gradient(150deg, color-mix(in srgb, var(--c, #0a84ff) 92%, #fff), var(--c, #0a84ff)) !important; box-shadow: var(--lg-rim), 0 4px 16px color-mix(in srgb, var(--c, #0a84ff) 55%, transparent) !important; }
.cam-tb.on, .cam-flip.on { box-shadow: var(--lg-rim), 0 0 0 1px rgba(255,214,10,.5), var(--lg-drop) !important; }
/* clear glass on light wallpapers reads darker at the rim */
.u-home.tone-dark .dock, .u-home.tone-dark .searchbtn { --lg-fill: linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.14) 100%); }
/* toolbar outside the device gets the same material */
#toolbar { background: var(--lg-fill) !important; box-shadow: var(--lg-rim), var(--lg-drop) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
#toolbar button:hover { background: rgba(255,255,255,.14); }
/* Dynamic Island / notifications get a gentle liquid entrance */
.banner.on .notif { animation: lgIn .55s cubic-bezier(.2,1.5,.4,1); } @keyframes lgIn { from { transform: scale(.9) translateY(-14px); filter: blur(6px); opacity: .4; } }
.cc.on { animation: lgMorph .6s cubic-bezier(.2,1.3,.4,1); } @keyframes lgMorph { 0% { transform: translateY(-115%) scale(.92, 1.08); } 60% { transform: translateY(2%) scale(1.02, .98); } 100% { transform: none; } }