/* Product scenes for the homepage. Sizes are artboard px (1 px ≈ 1 pt on a Mac); every value that
   mirrors the Mac app names its source in home/mac.js. */

/* Google Sans (OFL-1.1, see home/fonts/OFL.txt) for everything Android draws. */
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/google-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/google-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/google-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/google-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/google-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/google-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.am-scene {
    position: relative; overflow: hidden; isolation: isolate;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", "Segoe UI", sans-serif;
    font-size: 13px; line-height: normal; letter-spacing: normal; text-align: left; color: rgba(0, 0, 0, .86);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none; user-select: none; cursor: default;
}
.am-scene * { box-sizing: border-box; }
.am-scene :where(h4, h5, p, ul, button) { margin: 0; padding: 0; font: inherit; }
.am-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.am-surface { display: block; }
.am-sf { display: block; width: 100%; height: 100%; }

/* ---------- Desktop ---------- */
.am-desktop { position: absolute; inset: 0; overflow: hidden; }
/* The light green wallpaper of the app recordings (sampled down the left edge). */
.am-wall { position: absolute; inset: 0; background: linear-gradient(180deg, #98dfc6 0%, #8ad5bb 10%, #81cfb2 34%, #77c9ab 56%, #6cc3a2 79%, #64bf9d 100%); }
.am-layer { position: absolute; inset: 0; }
.am-l-top { pointer-events: none; z-index: 60; }
.am-l-system { z-index: 40; }
.am-l-windows { z-index: 20; }

/* ---------- Menu bar (macOS 26: no bar, dark text straight on the wallpaper) ---------- */
.am-menubar {
    position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px;
    font-size: 13px; color: #000; white-space: nowrap;
}
.am-mb-left { display: flex; align-items: center; gap: 21px; min-width: 0; }
.am-mb-apple { display: block; width: 14px; height: 17px; margin: -1px 0 0; }
.am-mb-apple svg { display: block; width: 100%; height: 100%; color: #000; }
.am-mb-app { font-weight: 700; margin-left: -2px; }
.am-mb-menus { display: flex; gap: 21px; }
.am-mb-right { display: flex; align-items: center; gap: 4px; }
.am-mb-extras { display: flex; align-items: center; gap: 4px; }
.am-mb-ic { display: grid; place-items: center; height: 24px; min-width: 32px; padding: 0 6px; border-radius: 8px; color: #000; }
.am-mb-ic svg { width: 18px; height: 18px; }
.am-mb-batt svg { width: 27px; height: 13px; }
.am-mb-mark i { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.am-mb-ic.is-on, .am-mb-mark.is-on { background: rgba(0, 0, 0, .1); }
.am-mb-clock { padding: 0 2px 0 10px; font-variant-numeric: tabular-nums; }
/* Camera in-use pill (MenuBarInUseIcon): green capsule, white robot head. */
.am-mb-inuse { display: grid; place-items: center; height: 24px; padding: 0 5px; border-radius: 8px; }
.am-mb-inuse span { display: grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 9px; background: #33c759; }
.am-mb-inuse svg { width: 16px; height: 11px; display: block; }
.am-mb-inuse.is-on { background: rgba(0, 0, 0, .1); }

/* ---------- Dock (macOS 26 clear glass shelf, measured from the recordings) ---------- */
.am-dock {
    position: absolute; left: 50%; bottom: 6px; z-index: 45; transform: translateX(-50%);
    padding: 9px 9px 10px; border-radius: 22px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 .5px rgba(0, 30, 20, .16), 0 10px 26px -12px rgba(0, 40, 25, .3);
    -webkit-backdrop-filter: blur(14px) saturate(160%) brightness(1.04); backdrop-filter: blur(14px) saturate(160%) brightness(1.04);
}
.am-dock-row { display: flex; align-items: flex-end; gap: 4px; }
.am-dock-item { position: relative; height: 56px; flex: none; }
.am-dock-art { position: absolute; left: 50%; bottom: 0; width: 56px; height: 56px; margin-left: -28px; transform-origin: 50% 100%; }
.am-dock-art > svg, .am-dock-art > img { display: block; width: 100%; height: 100%; }
.am-dock-dot { position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0, 24, 14, .62); opacity: 0; }
.am-dock-item.is-running .am-dock-dot { opacity: 1; }
.am-dock-sep { width: 1px; height: 52px; margin: 0 6px 2px; flex: none; background: rgba(0, 30, 18, .26); }
.am-dock-tip {
    position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%);
    padding: 4px 11px; border-radius: 10px; font-size: 13px; white-space: nowrap; opacity: 0; color: rgba(0, 0, 0, .86);
    background: rgba(246, 246, 246, .78); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 0 0 .5px rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .14);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.am-dock-item.is-tip .am-dock-tip { opacity: 1; }

/* ---------- Pointer ---------- */
.am-cursor { position: absolute; left: 0; top: 0; width: 19px; height: 27px; margin: -1px 0 0 -2px; z-index: 100; pointer-events: none; filter: drop-shadow(0 1px 1.6px rgba(0, 0, 0, .35)); transition: opacity .2s; }
.am-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 2px 1px; transition: transform .09s; }
.am-cursor.is-down svg { transform: scale(.9); }
.am-cursor.is-centered { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.am-cursor.is-centered svg { transform-origin: 50% 50%; }

/* ---------- Menus (macOS 26) ---------- */
.am-menu {
    position: absolute; z-index: 80; min-width: 190px; padding: 5px; border-radius: 12px;
    background: rgba(246, 246, 246, .84); color: rgba(0, 0, 0, .88); font-size: 13px;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.am-menu-item { display: flex; align-items: center; height: 24px; padding: 0 10px 0 2px; border-radius: 7px; white-space: nowrap; }
.am-menu-item.is-hl { background: #2b7cf6; color: #fff; }
.am-menu-item.is-off { color: rgba(0, 0, 0, .34); }
.am-menu-check { width: 20px; height: 24px; display: grid; place-items: center; flex: none; }
.am-menu-check svg { width: 12px; height: 12px; }
.am-menu-title { flex: 1; }
.am-menu-sub svg, .am-menu-key { width: 11px; height: 11px; opacity: .6; }
.am-menu-key { width: auto; height: auto; margin-left: 18px; }
.am-menu-sep { height: 1px; margin: 5px 9px; background: rgba(0, 0, 0, .1); }
.am-menu-head { padding: 4px 10px 2px 22px; font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .45); }

/* ---------- Window chrome ---------- */
.am-titlebar { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; padding: 0 9px 0 14px; z-index: 6; }
.am-lights { display: flex; gap: 8px; margin-right: 14px; flex: none; }
.am-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.am-lights i:nth-child(2) { background: #febc2e; }
.am-lights i:nth-child(3) { background: #28c840; }
/* Pointer over the lights: close, minimise and full-screen glyphs, colours even on an inactive window. */
.am-lights i { position: relative; }
.am-lights.is-hover i::after { content: ""; position: absolute; inset: 0; background: center / 8px 8px no-repeat; }
.am-lights.is-hover i:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1.5l5 5m0-5l-5 5' stroke='%234d0000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.am-lights.is-hover i:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.2 4h5.6' stroke='%23995700' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.am-lights.is-hover i:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.6 2.4v4h4zM6.4 5.6v-4h-4z' fill='%23006500'/%3E%3C/svg%3E"); }
:not(.is-key) > .am-titlebar .am-lights.is-hover i:nth-child(1), .am-lights.is-hover i:nth-child(1) { background: #ff5f57; }
:not(.is-key) > .am-titlebar .am-lights.is-hover i:nth-child(2), .am-lights.is-hover i:nth-child(2) { background: #febc2e; }
:not(.is-key) > .am-titlebar .am-lights.is-hover i:nth-child(3), .am-lights.is-hover i:nth-child(3) { background: #28c840; }
.am-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: rgba(0, 0, 0, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:not(.is-key) > .am-titlebar .am-lights i { background: #d9d9d9; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
:not(.is-key) > .am-titlebar .am-title { color: rgba(0, 0, 0, .3); }

/* Phone Screen window (MirrorWindowView): chrome fades with --chrome. Every window is its own
   stacking context, so the layers inside one (title bar, status indicator, veils) never paint over
   the window in front of it. */
.am-pwin { position: absolute; --chrome: 0; isolation: isolate; }
.am-pwin-bg { position: absolute; inset: 0; border-radius: 16px; opacity: var(--chrome); background: #ececec;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 0 0 .5px rgba(0, 0, 0, .22), 0 22px 54px -14px rgba(0, 0, 0, .34); }
.am-pwin > .am-titlebar, .am-pwin-side { opacity: var(--chrome); }
.am-pwin-phone { position: absolute; padding: 5px; background: #000;
    box-shadow: 0 10px 36px rgba(0, 0, 0, calc(.3 - .12 * var(--chrome))), 0 2px 6px rgba(0, 0, 0, .14); }
.am-pwin-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.am-pwin-screen .am-surface { position: absolute; left: 0; top: 0; }
.am-pwin-screen.is-residue .am-surface, .am-pwin-screen.is-residue .am-clip { filter: grayscale(1); }
/* The clip (one <video>) laid over a phone or window surface where the app draws its picture. */
.am-clip { position: absolute; display: block; margin: 0; padding: 0; border: 0; object-fit: cover; pointer-events: none; opacity: 0; }
.am-clip.has-frame { opacity: 1; }
.am-pwin-side { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.am-status-ind { position: relative; width: 44px; height: 48px; flex: none; }
.am-ctl-group { display: flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: 23px; background: rgba(0, 0, 0, .055); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .035); }
.am-ctl-nav { margin-top: auto; }
.am-ctl { width: 40px; height: 40px; border: 0; border-radius: 20px; display: grid; place-items: center; background: transparent; color: rgba(0, 0, 0, .84); --am-ctl-bg: #e3e3e3; transition: background-color .15s; }
.am-ctl svg { width: 22px; height: 22px; }
.am-ctl.is-hot { background: rgba(0, 0, 0, .07); --am-ctl-bg: #d9d9d9; }
.am-hoverlabel {
    position: absolute; display: flex; align-items: center; height: 36px; padding: 0 4px 0 12px; border-radius: 18px;
    font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .84); white-space: nowrap; opacity: 0; transform: translateX(3px);
    background: #ececec; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .12);
    transition: opacity .18s ease-out, transform .18s ease-out;
}
.am-hoverlabel.is-on { opacity: 1; transform: none; }
.am-hover-more { display: flex; flex-direction: column; gap: 2px; width: 24px; align-items: center; }
.am-hover-more b { width: 3px; height: 3px; border-radius: 50%; background: rgba(0, 0, 0, .9); }

/* Meld Mode window (MirrorMultiWindowWindowView): content under an overlaid title bar. */
.am-fwin { position: absolute; isolation: isolate; border-radius: 16px; overflow: hidden; background: #f0f0f0;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 24px 60px -16px rgba(0, 0, 0, .4), 0 3px 10px rgba(0, 0, 0, .08); }
.am-fwin.is-glass { background: transparent; }
/* A dark app (a video playing) projects on black. */
.am-fwin.is-dark, .am-fwin.is-dark .am-veil { background: #000; }
/* Overlaid title bar on the app's own pixels (MirrorFusionTitlebarForegroundStyle): pure white or
   black at 70 % (34 % unfocused), capsule outline white 24 % / black 14 %, cross-fading in 0.16 s. */
.am-fwin > .am-titlebar .am-title, .am-fwin .am-tb-btn { transition: color .16s ease-in-out, background-color .16s ease-in-out, box-shadow .16s ease-in-out; }
.am-fwin.tb-light > .am-titlebar .am-title { color: rgba(255, 255, 255, .7); }
.am-fwin.tb-dark > .am-titlebar .am-title { color: rgba(0, 0, 0, .7); }
.am-fwin.tb-light:not(.is-key) > .am-titlebar .am-title { color: rgba(255, 255, 255, .34); }
.am-fwin.tb-dark:not(.is-key) > .am-titlebar .am-title { color: rgba(0, 0, 0, .34); }
.am-fwin.tb-light .am-tb-btn { color: rgba(255, 255, 255, .7); background: rgba(48, 48, 51, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.am-fwin.tb-dark .am-tb-btn { color: rgba(0, 0, 0, .7); background: rgba(230, 231, 234, .54); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
/* Files dragged over the window (MirrorSurface isReceivingFileDrop): accent 12 % and a dashed 78 % outline. */
.am-fwin.is-drop::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 16px; border: 2px dashed rgba(10, 132, 255, .78); background: rgba(10, 132, 255, .12); pointer-events: none; }
.am-fwin-content { position: absolute; inset: 0; }
.am-fwin-content .am-surface { position: absolute; left: 0; top: 0; }
/* The photo viewer's black, clearing as a photo shrinks back into the timeline. */
.am-viewer-shade { position: absolute; inset: 0; background: #000; }
/* Minimizing (the Genie effect) draws the window's picture on a canvas of its own. */
.am-genie { position: absolute; pointer-events: none; }
.am-fwin-bar { padding-right: 8px; }
.am-tb-tools { display: flex; align-items: center; gap: 8px; margin-left: 10px; flex: none; }
.am-tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, .9);
    background: rgba(241, 242, 244, .42); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); white-space: nowrap; }
.am-tb-btn > svg { width: 12px; height: 12px; flex: none; }
.am-tb-more { padding: 0 6px; }
.am-tb-more > svg { width: 15px; height: 15px; }
.am-fwin.is-compact .am-tb-btn span { display: none; }
.am-fwin.is-compact .am-tb-btn { padding: 0 6px; }
.am-fwin:not(.is-key) .am-tb-tools { opacity: .55; }
/* Glass loading scene (MirrorGlassStateSceneLayer: .hudWindow behind-window + 12 % projection gray). */
.am-fwin-glass { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0; pointer-events: none;
    background: rgba(238, 240, 239, .5); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
    transition: opacity .32s ease-in-out; }
.am-fwin-glass.is-on { opacity: 1; }
.am-glass-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; }
.am-glass-text { font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, .54); }
.am-spin { display: block; animation: amSpin .9s linear infinite; }
@keyframes amSpin { to { transform: rotate(360deg); } }
/* Veil (MirrorFusionVeilLayer): frozen blurred frame over the projection gray, ripple-masked. */
.am-veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #f0f0f0; }
.am-veil-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-veil-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 28px; color: rgba(255, 255, 255, .72); }
.veil-on-light .am-veil-stack { color: rgba(0, 0, 0, .54); }
.am-veil-badge { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; }
.am-veil-badge.has-disc { background: rgba(0, 0, 0, .22); }
.veil-on-light .am-veil-badge.has-disc { background: rgba(255, 255, 255, .38); }
.am-badge-glyph { width: 32px; height: 32px; }
.am-veil-caption { font-size: 16px; font-weight: 600; text-align: center; }
/* The sheet in flight. */
.am-peel { position: absolute; left: 0; top: 0; z-index: 55; pointer-events: none; }

/* ---------- Desktop items ---------- */
.am-dfile { position: absolute; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.am-dfile-thumb { width: 64px; height: 64px; display: grid; place-items: center; }
.am-dfile-thumb img { max-width: 64px; max-height: 64px; display: block; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.am-dfile-name { max-width: 96px; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); word-break: break-all; }
.am-dfile.is-sel .am-dfile-thumb { background: rgba(0, 0, 0, .14); border-radius: 6px; }
.am-dfile.is-sel .am-dfile-name { background: #2b7cf6; text-shadow: none; }
/* Rubber-band selection on the desktop. */
.am-marquee { position: absolute; border: 1px solid rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .2); border-radius: 2px; pointer-events: none; }
.am-drag { position: absolute; width: 96px; height: 80px; pointer-events: none; z-index: 90; }
.am-drag-img { position: absolute; left: calc(14px + var(--i) * 5px); top: calc(10px + var(--i) * -4px); width: 64px; height: 48px; object-fit: cover; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); opacity: .92; transform: rotate(calc((var(--i) - 1) * 4deg)); }
.am-drag-badge { position: absolute; left: 70px; top: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }

/* ---------- Android widgets on the desktop ---------- */
.am-widgets { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.am-widget { position: absolute; filter: drop-shadow(0 1px 2.5px rgba(0, 40, 28, .14)); }
.am-widget .am-surface { position: absolute; left: 0; top: 0; }

/* ---------- Narrow layouts and motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .am-spin { animation: none; }
}

/* ---------- Finder (macOS 26) ---------- */
.am-finder { position: absolute; border-radius: 25px; transform-origin: 50% 40%;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 26px 64px -16px rgba(0, 0, 0, .38), 0 4px 12px rgba(0, 0, 0, .08); }
.am-fd-bg { position: absolute; inset: 0; border-radius: inherit; background: #fff; }
.am-fd-side { position: absolute; left: 9px; top: 8px; bottom: 7px; width: 213px; border-radius: 18px; padding: 40px 0 0;
    background: linear-gradient(180deg, rgba(232, 247, 241, .96), rgba(238, 249, 245, .96));
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 60, 40, .06), 2px 0 10px -4px rgba(0, 40, 30, .1); }
.am-fd-side > .am-lights { position: absolute; left: 7.75px; top: 9.45px; gap: 9px; margin: 0; }
.am-fd-side > .am-lights i { width: 12.5px; height: 12.5px; }
.am-fd-item { position: relative; display: flex; align-items: center; height: 30px; margin: 0 7px; padding: 0 0 0 8.5px; border-radius: 8px; font-size: 13px; color: rgba(0, 0, 0, .86); white-space: nowrap; }
.am-fd-item i { display: block; width: 18px; height: 18px; margin-right: 13px; flex: none; color: rgba(0, 0, 0, .8); }
.am-fd-item.is-sel { background: rgba(10, 132, 255, .15); }
.am-fd-item.is-hover { background: rgba(0, 0, 0, .05); }
.am-fd-head { height: 30px; margin-top: 7px; padding: 12px 0 0 12.6px; font-size: 11px; font-weight: 600; color: rgba(0, 0, 0, .34); }
.am-fd-toolbar { position: absolute; left: 230px; right: 8px; top: 7px; height: 35px; display: flex; align-items: center; gap: 12px; }
.am-fd-cap { display: flex; align-items: center; height: 35px; padding: 0 10px; gap: 6px; border-radius: 17.5px; background: rgba(255, 255, 255, .96); color: rgba(0, 0, 0, .8);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 2px 8px rgba(0, 0, 0, .07); }
.am-fd-cap i { display: block; width: 19px; height: 19px; }
.am-fd-cap i.am-fd-mini { width: 11px; height: 11px; margin-left: -3px; }
.am-fd-nav { width: 66px; padding: 0 8px; justify-content: space-between; }
.am-fd-nav b { width: 1px; height: 18px; background: rgba(0, 0, 0, .08); }
.am-fd-nav i[data-p="fwd"] { opacity: .32; }
.am-fd-title { flex: 1; min-width: 0; margin-left: 1px; font-size: 15px; font-weight: 700; color: rgba(0, 0, 0, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-fd-acts { gap: 16px; padding: 0 14px; }
.am-fd-round { width: 35px; padding: 0; justify-content: center; }
.am-fd-tabs { position: absolute; left: 230px; right: 8px; top: 49px; height: 24px; display: flex; align-items: center; gap: 6px; }
.am-fd-tab { flex: 1; height: 24px; line-height: 22px; border-radius: 12px; text-align: center; font-size: 11px; color: rgba(0, 0, 0, .62);
    background: #fafafa; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13); white-space: nowrap; overflow: hidden; }
.am-fd-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; color: rgba(0, 0, 0, .78); }
.am-fd-plus svg { width: 15px; height: 15px; }
.am-fd-cols { position: absolute; left: 222px; right: 0; top: 85px; bottom: 0; display: flex; overflow: hidden; border-radius: 0 0 25px 0; }
.am-fd-track { display: flex; height: 100%; }
.am-fd-col { width: 228px; flex: none; padding: 1px 0 0; border-right: 1px solid rgba(0, 0, 0, .075); }
.am-fd-row { position: relative; display: flex; align-items: center; height: 21px; margin: 0 7px 0 8px; padding: 0 4px 0 5.5px; border-radius: 6px; font-size: 13px; color: rgba(0, 0, 0, .86); white-space: nowrap; }
.am-fd-row .am-fd-folder { width: 17px; height: 14px; flex: none; margin-right: 7px; }
.am-fd-thumb { display: grid; place-items: center; width: 17px; height: 15px; margin-right: 7px; flex: none; }
.am-fd-thumb img { max-width: 17px; max-height: 13px; display: block; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.am-fd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.am-fd-cloud { width: 17px; height: 15px; margin-left: 6px; color: rgba(0, 0, 0, .5); flex: none; }
.am-fd-chev { width: 10px; height: 12px; margin-left: 4px; color: rgba(0, 0, 0, .42); flex: none; }
.am-fd-cloud svg, .am-fd-chev svg { display: block; width: 100%; height: 100%; }
.am-fd-row.is-sel { background: #0a6cf0; color: #fff; }
.am-fd-row.is-sel .am-fd-cloud, .am-fd-row.is-sel .am-fd-chev { color: rgba(255, 255, 255, .9); }
.am-fd-row.is-sel-dim { background: rgba(0, 0, 0, .085); }
.am-fd-preview { border-right: 0; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 0; text-align: center; }
.am-fd-pv-img { width: 100%; height: 150px; display: grid; place-items: center; }
.am-fd-pv-img img { max-width: 100%; max-height: 150px; display: block; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.am-fd-pv-stack { position: relative; width: 150px; height: 120px; margin: 15px 0; }
.am-fd-pv-stack img { position: absolute; left: 50%; top: 50%; width: 112px; height: 84px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    transform: translate(-50%, -50%) translate(calc((var(--i) - 1) * 9px), calc((1 - var(--i)) * 6px)) rotate(calc((var(--i) - 1) * 5deg)); }
.am-fd-preview b { margin-top: 12px; font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .86); }
.am-fd-preview span { margin-top: 3px; font-size: 11px; color: rgba(0, 0, 0, .5); }
.am-finder:not(.is-key) .am-fd-row.is-sel { background: rgba(0, 0, 0, .1); color: rgba(0, 0, 0, .86); }
.am-dfile.is-copying .am-dfile-thumb img { opacity: .55; }
.am-dfile-prog { position: absolute; left: 50%; bottom: 2px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(0, 0, 0, .3); overflow: hidden; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .6); }
.am-dfile-prog i { display: block; width: 0; height: 100%; background: #fff; }
.am-dfile-thumb { position: relative; }

/* ---------- Notification banner (macOS 26) ---------- */
.am-note { position: absolute; width: 344px; z-index: 70; }
.am-note-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 11px 90px 11px 12px; border-radius: 22px;
    background: rgba(246, 246, 246, .78); color: rgba(0, 0, 0, .86);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 0 0 .5px rgba(0, 0, 0, .12), 0 10px 30px -6px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.am-note-icon { width: 36px; height: 36px; flex: none; align-self: center; }
.am-note-text { flex: 1; min-width: 0; font-size: 13px; line-height: 16.5px; }
.am-note-top { display: flex; align-items: baseline; gap: 8px; }
.am-note-top b { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-note-top span { position: absolute; right: 14px; top: 11px; font-size: 12px; color: rgba(0, 0, 0, .45); }
.am-note-sub { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-note-body { color: rgba(0, 0, 0, .78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-note-att { position: absolute; right: 12px; top: 50%; width: 38px; height: 38px; margin-top: -12px; border-radius: 8px; transition: opacity .18s; }
.am-note-opt { position: absolute; right: 10px; top: 50%; display: flex; align-items: center; gap: 2px; height: 24px; margin-top: -6px; padding: 0 6px 0 9px; border-radius: 12px;
    font-size: 11.5px; font-weight: 500; color: rgba(0, 0, 0, .82); opacity: 0; transition: opacity .18s;
    background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .1); }
.am-note-opt svg { width: 12px; height: 12px; }
.am-note-opt.is-down { background: rgba(0, 0, 0, .12); }
.am-note-x { position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .18s;
    background: rgba(246, 246, 246, .9); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 4px rgba(0, 0, 0, .14); }
.am-note-x svg { width: 11px; height: 11px; }
.am-note.is-hover .am-note-att { opacity: 0; }
.am-note.is-hover .am-note-opt, .am-note.is-hover .am-note-x { opacity: 1; }
.am-note-reply { display: none; align-items: center; gap: 8px; margin-top: 8px; }
.am-note.is-reply .am-note-reply { display: flex; }
.am-note.is-reply .am-note-opt, .am-note.is-reply .am-note-att { opacity: 0; }
.am-note.is-reply .am-note-card { padding-right: 14px; }
.am-note-field { flex: 1; min-width: 0; display: flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 8px; overflow: hidden; white-space: nowrap;
    background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .16), 0 0 0 3px rgba(10, 132, 255, .32); font-size: 13px; color: rgba(0, 0, 0, .86); }
.am-note-caret { width: 1.5px; height: 15px; margin-left: 1px; background: #0a84ff; animation: amCaret 1s steps(1) infinite; }
@keyframes amCaret { 50% { opacity: 0; } }
.am-note-send { display: grid; place-items: center; height: 26px; padding: 0 12px; border-radius: 13px; background: #0a84ff; color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.am-note-send.is-down { filter: brightness(.86); }
/* Verification code toast: .regularMaterial + white 44 %, 1 pt stroke, radius 16, 12 pt semibold. */
.am-toast { position: absolute; height: 54px; z-index: 75; display: grid; place-items: center; padding: 0 16px; border-radius: 16px;
    font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .92); white-space: nowrap; overflow: hidden;
    background: rgba(250, 250, 250, .74); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 14px 44px -6px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }

/* ---------- Call island (MirrorCallOverlayView) ---------- */
.am-ci { position: absolute; z-index: 72; overflow: hidden; background: #171717; color: #fff; transform-origin: 50% 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 28px rgba(0, 0, 0, .28); }
.am-ci-layer { position: absolute; left: 0; top: 0; display: none; transform-origin: 50% 30%; }
.am-ci-layer.is-on { display: flex; }
.am-ci-compact { align-items: center; gap: 12px; padding: 10px 12px; white-space: nowrap; }
.am-ci-expanded { flex-direction: column; gap: 12px; width: 480px; padding: 16px; }
.am-ci-toast { align-items: center; gap: 12px; width: 480px; padding: 12px 16px; }
.am-ci-row { display: flex; align-items: center; gap: 12px; }
.am-ci-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; font-family: "Google Sans", Roboto, sans-serif; font-size: 18px; font-weight: 500; color: #fff; }
.am-ci-avatar-lg { width: 44px; height: 44px; font-size: 20px; }
.am-ci-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 180px; }
.am-ci-expanded .am-ci-id, .am-ci-toast .am-ci-id { max-width: none; flex: 1; }
.am-ci-id b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-ci-id span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-ci-id i { font-style: normal; font-variant-numeric: tabular-nums; }
.am-ci-id em { font-style: normal; color: rgba(255, 255, 255, .42); }
.am-ci-toast .am-ci-id b { font-size: 13px; }
.am-ci-toast .am-ci-id span { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.am-ci-gap { flex: 1; min-width: 12px; }
.am-ci-round { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; color: #fff; }
.am-ci-round svg { width: 17px; height: 17px; }
.am-ci-big { width: 44px; height: 44px; }
.am-ci-big svg { width: 20px; height: 20px; }
.am-ci-red { background: #ff3b30; }
.am-ci-green { background: #34c759; }
.am-ci-close { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.am-ci-close svg { width: 10px; height: 10px; }
.am-ci-pills { display: flex; gap: 8px; }
.am-ci-pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 17px; white-space: nowrap;
    background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; color: #fff; }
.am-ci-pill i { display: block; width: 15px; height: 15px; }
.am-ci-pill.is-on { background: #fff; color: #000; }
.am-ci-pill i.is-red { color: #ff3b30; }
.am-ci-wave { width: 26px; height: 26px; flex: none; color: #34c759; }
.am-ci-show { display: grid; place-items: center; height: 30px; padding: 0 14px; flex: none; border-radius: 15px; background: #0a84ff; font-size: 12px; font-weight: 600; }
.am-ci-show.is-down, .am-ci-round.is-down, .am-ci-pill.is-down { filter: brightness(.86); }

/* ---------- TextEdit ---------- */
.am-te { position: absolute; border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 24px 60px -16px rgba(0, 0, 0, .36), 0 3px 10px rgba(0, 0, 0, .08); }
.am-te-bar { background: #f6f6f6; box-shadow: inset 0 -.5px 0 rgba(0, 0, 0, .12); }
.am-te-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; color: rgba(0, 0, 0, .85); pointer-events: none; }
.am-te:not(.is-key) .am-te-title { color: rgba(0, 0, 0, .3); }
.am-te:not(.is-key) .am-lights i { background: #d9d9d9; }
.am-te-doc { position: absolute; left: 0; right: 0; top: 32px; bottom: 0; padding: 14px 18px; font-family: Helvetica, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans", sans-serif; font-size: 13px; line-height: 18px; color: #000; }
.am-te-doc p { margin: 0; min-height: 18px; white-space: pre-wrap; }
.am-te-caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: #000; animation: amCaret 1s steps(1) infinite; }

/* ---------- Drag images ---------- */
.am-adrag { position: absolute; left: 0; top: 0; width: 64px; height: 64px; z-index: 90; pointer-events: none; }
.am-adrag img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: .9; }
.am-adrag span { position: absolute; left: -6px; bottom: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: #1f1f1f;
    font: 600 12px/22px "Google Sans", Roboto, sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.am-fdrag { position: absolute; left: 0; top: 0; width: 40px; height: 50px; z-index: 90; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); opacity: .92; }
.am-fdrag svg { display: block; width: 40px; height: 50px; }
.am-fdrag-badge { position: absolute; left: -9px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }

.am-fd-doc { width: 14px; height: 17px; flex: none; margin: 0 8px 0 1.5px; }

.am-fd-ring { color: rgba(0, 0, 0, .55); }
.am-fd-row.is-sel .am-fd-ring { color: #fff; }
.am-dfile-doc .am-dfile-thumb svg { width: 48px; height: 60px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
.am-drag-doc { position: absolute; left: 0; top: 0; width: 48px; height: 60px; z-index: 90; pointer-events: none; opacity: .85; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.am-drag-doc svg { width: 48px; height: 60px; display: block; }

/* ---------- QuickTime movie recording ---------- */
.am-qt { position: absolute; border-radius: 16px; overflow: hidden; background: #000;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 0 24px 60px -16px rgba(0, 0, 0, .45); }
.am-qt-feed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.am-qt-bar { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; padding: 0 14px; opacity: 0; transition: opacity .25s;
    background: linear-gradient(rgba(0, 0, 0, .45), transparent); }
.am-qt.is-hover .am-qt-bar { opacity: 1; }
.am-qt-title { flex: 1; margin-right: 54px; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.am-qt-hud { position: absolute; left: 50%; bottom: 18px; width: 236px; height: 52px; margin-left: -118px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px;
    color: rgba(255, 255, 255, .86); background: rgba(40, 40, 40, .62); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.am-qt-vol { width: 16px; height: 16px; flex: none; }
.am-qt-slider { width: 44px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); flex: none; }
.am-qt-slider i { display: block; width: 60%; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.am-qt-rec { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.am-qt-rec i { width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; }
.am-qt-size { flex: 1; font-size: 11px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.am-qt-opt { width: 14px; height: 14px; flex: none; }
/* Package window (AndroidPackageInfoWindowView): hudWindow + white 40 %, padding 24 under a 28 pt title bar. */
.am-apk { position: absolute; border-radius: 16px; overflow: hidden; color: #000; transform-origin: 50% 50%;
    background: rgba(246, 247, 246, .86); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 24px 60px -16px rgba(0, 0, 0, .36), 0 3px 10px rgba(0, 0, 0, .08); }
.am-apk-tb { height: 28px; }
.am-apk code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.am-apk-loading { position: absolute; inset: 28px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; }
.am-apk-loading .am-spin { opacity: .55; }
.am-apk.is-loading .am-apk-loading { opacity: 1; }
.am-apk-body { position: absolute; left: 24px; right: 24px; top: 52px; bottom: 24px; display: flex; flex-direction: column; gap: 18px; transition: opacity .15s; }
.am-apk.is-loading .am-apk-body { opacity: 0; }
.am-apk-head { display: flex; align-items: center; gap: 16px; height: 82px; flex: none; }
.am-apk-icon { width: 82px; height: 82px; flex: none; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.am-apk-icon svg, .am-dfile-icon .am-dfile-thumb svg { display: block; width: 100%; height: 100%; }
.am-apk-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-apk-name { display: flex; align-items: baseline; gap: 9px; }
.am-apk-name b { font-size: 24px; font-weight: 600; line-height: 29px; }
.am-apk-name span { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .5); }
.am-apk-id code { font-size: 13px; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, .64); }
.am-apk-panels { flex: 1; min-height: 0; display: flex; gap: 14px; }
.am-apk-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.am-apk-panel { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 8px;
    background: rgba(0, 0, 0, .055); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), inset 0 0 0 .5px rgba(0, 0, 0, .07); }
.am-apk-panel h4 { margin: 0; font-size: 13px; font-weight: 600; line-height: 16px; color: rgba(0, 0, 0, .82); }
.am-apk-scroll { flex: 1; min-height: 0; overflow: hidden; }
.am-apk-perms { display: flex; flex-direction: column; gap: 6px; }
.am-apk-perm { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .035);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .045), inset 0 0 0 .5px rgba(0, 0, 0, .045); }
.am-apk-perm b { font-size: 11px; font-weight: 600; line-height: 13px; color: rgba(0, 0, 0, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-apk-perm code { font-size: 9px; font-weight: 500; line-height: 11px; color: rgba(0, 0, 0, .48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-apk-block { display: flex; flex-direction: column; gap: 7px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .032);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .045), inset 0 0 0 .5px rgba(0, 0, 0, .045); }
.am-apk-row { display: flex; align-items: baseline; gap: 8px; font-size: 11px; line-height: 13px; }
.am-apk-row span { width: 74px; flex: none; color: rgba(0, 0, 0, .5); }
.am-apk-row b { min-width: 0; font-weight: 500; color: rgba(0, 0, 0, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-apk-sigs { gap: 5px; }
.am-apk-sig { display: flex; flex-direction: column; gap: 2px; }
.am-apk-sig span { font-size: 10px; font-weight: 600; line-height: 12px; color: rgba(0, 0, 0, .52); }
.am-apk-sig b { font-size: 10px; font-weight: 500; line-height: 12px; color: rgba(0, 0, 0, .68); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.am-apk-sig b.is-mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.am-apk-bar { position: relative; flex: none; height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.am-apk-status { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 500; color: rgba(40, 205, 65, .9); }
.am-apk-device { width: 154px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .82); background: rgba(0, 0, 0, .06);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), inset 0 0 0 .5px rgba(0, 0, 0, .07); }
.am-apk-device b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-apk-device svg { width: 12px; height: 12px; flex: none; color: rgba(0, 0, 0, .58); }
.am-apk-device.is-off { color: rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .035); }
.am-apk-btn { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border-radius: 8px; background: #0088ff;
    font-size: 13px; font-weight: 600; color: #fff; }
.am-apk-btn.is-down { opacity: .82; }
.am-apk-spin { display: none; width: 15px; height: 15px; }
.am-apk-spin svg { display: block; }
.am-apk-btn.is-busy .am-apk-spin { display: block; }
.am-dfile-icon .am-dfile-thumb svg { width: 64px; height: 64px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
/* AndroMeld menu bar panel (MenuBarExtra .window 352 × 664, hudWindow + white 40 %). */
.am-dash { position: absolute; border-radius: 12px; overflow: hidden; color: #000; transform-origin: 85% 0;
    background: rgba(246, 247, 246, .86); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 12px 40px rgba(0, 0, 0, .22); }
.am-dash-head { position: absolute; left: 20px; right: 20px; top: 20px; }
.am-dash-title { font-size: 36px; font-weight: 800; line-height: 43px; color: rgba(0, 0, 0, .85); white-space: nowrap; }
.am-dash-tagline { margin-top: 16px; font-size: 13px; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.am-dash-tabs { position: absolute; left: 18px; right: 18px; top: 115px; height: 28px; padding: 2px; box-sizing: border-box; display: flex; border-radius: 14px;
    background: rgba(0, 0, 0, .055); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .035), 0 0 0 .5px rgba(0, 0, 0, .035); }
.am-dash-tab { flex: none; height: 24px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; box-sizing: border-box;
    border-radius: 12px; color: rgba(0, 0, 0, .55); }
.am-dash-tab i { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.am-dash-tab svg { width: 14px; height: 14px; display: block; }
.am-dash-tab b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.am-dash-tab.is-on { justify-content: flex-start; color: rgba(0, 0, 0, .92); background: rgba(255, 255, 255, .64);
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .13), 0 0 0 .5px rgba(0, 0, 0, .13), 0 1px 6px rgba(0, 0, 0, .08); }
.am-dash-device { position: absolute; left: 24px; top: 153px; height: 34px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .88); }
.am-dash-device i { display: block; color: rgba(0, 0, 0, .64); }
.am-dash-device svg { display: block; width: 7.6px; height: 10.6px; }
.am-dash-scroll { position: absolute; left: 0; right: 0; top: 187px; bottom: 0; overflow: hidden; }
.am-dash-content { padding: 12px; }
.am-st-page { display: flex; flex-direction: column; gap: 16px; }
.am-fm { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .4);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), inset 0 0 0 .5px rgba(0, 0, 0, .07); }
.am-fm-top { display: flex; flex-direction: column; gap: 10px; }
.am-fm-head { display: flex; align-items: center; gap: 10px; }
.am-fm-drive { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: rgba(0, 0, 0, .75); }
.am-fm-drive svg { width: 25px; height: 25px; display: block; }
.am-fm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-fm-text b { font-size: 13px; font-weight: 600; line-height: 16px; }
.am-fm-text span { font-size: 11px; line-height: 13px; color: rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-fm-head em { font-style: normal; margin-left: 8px; font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.am-fm-bar { height: 4px; display: flex; gap: 2px; border-radius: 2px; background: rgba(0, 0, 0, .06); }
.am-fm-bar i { flex: none; height: 4px; border-radius: 2px; }
.am-fm-cols { display: flex; gap: 12px; margin-top: 8px; }
.am-fm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-fm-ic { height: 20px; display: grid; place-items: center; color: rgba(0, 0, 0, .75); }
.am-fm-ic svg { width: 21px; height: 21px; display: block; }
.am-fm-label { font-size: 11.5px; line-height: 14px; color: rgba(0, 0, 0, .82); white-space: nowrap; }
.am-fm-btn { align-self: stretch; margin-top: 2px; height: 26px; display: flex; align-items: center; border-radius: 8px; font-size: 11px; font-weight: 500; color: rgba(0, 0, 0, .85);
    background: rgba(0, 0, 0, .045); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .05); }
.am-fm-btn b { flex: 1; font-weight: 500; text-align: center; padding: 0 8px; white-space: nowrap; }
.am-fm-btn i { flex: none; width: 18px; height: 22px; display: flex; align-items: center; }
.am-fm-btn i svg { width: 10px; height: 10px; display: block; }
.am-an { display: flex; flex-direction: column; gap: 12px; }
.am-an-head { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.am-an-head > b { font-size: 13px; font-weight: 600; }
.am-an-refresh { margin-left: auto; display: flex; align-items: center; gap: 5px; padding: 6px 9px; font-size: 11px; font-weight: 500; border-radius: 8px; }
.am-an-refresh svg { width: 11px; height: 11px; display: block; }
.am-an-wrap { position: relative; height: 210px; }
.am-an-ring { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.am-ring { display: block; }
.am-ring path { transition: filter .15s; }
.am-ring path.is-hover { filter: brightness(1.08); }
.am-an-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.am-an-center b { font-size: 14px; font-weight: 600; line-height: 17px; font-variant-numeric: tabular-nums; }
.am-an-center span { font-size: 10px; line-height: 12px; color: rgba(0, 0, 0, .5); }
.am-an-legend { display: flex; flex-direction: column; }
.am-legend { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; font-size: 11px; line-height: 13px; }
.am-legend > i { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.am-legend b { font-weight: 500; }
.am-legend span { margin-left: auto; padding-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.am-legend em { width: 8px; height: 8px; display: block; color: rgba(0, 0, 0, .5); }
.am-legend em svg { width: 8px; height: 8px; display: block; }
.am-legend em.is-hidden { visibility: hidden; }
.am-legend.is-hover, .am-an-refresh.is-hover, .am-st-back.is-hover, .am-st-row.is-hover { background: rgba(255, 255, 255, .42); }
.am-st-drill { gap: 12px; }
.am-st-nav { display: flex; align-items: center; gap: 4px; height: 28px; }
.am-st-back { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.am-st-back svg { width: 12px; height: 12px; display: block; }
.am-st-nav > b { padding: 5px 8px; font-size: 13px; font-weight: 600; }
.am-st-total { margin-left: auto; padding-right: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.am-tm { position: relative; height: 220px; }
.am-tm-clip { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; }
.am-tm-tile { position: absolute; padding: 1px; box-sizing: border-box; }
.am-tm-tile > div { width: 100%; height: 100%; box-sizing: border-box; padding: 5px; border-radius: 3px; overflow: hidden; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.am-tm-tile img { display: block; border-radius: 50%; }
.am-tm-tile i { display: block; }
.am-tm-tile i svg { width: 100%; height: 100%; display: block; }
.am-tm-tile b { max-width: 100%; font-size: 11.5px; font-weight: 600; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-tm-tile span { font-size: 11px; font-weight: 600; line-height: 13px; white-space: nowrap; }
.am-tm-tile.is-hover > div { filter: brightness(1.06); }
.am-st-rows { display: flex; flex-direction: column; gap: 2px; }
.am-st-row { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 8px; }
.am-st-row > img { width: 24px; height: 24px; flex: none; border-radius: 50%; }
.am-st-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.am-st-row-top { display: flex; align-items: baseline; gap: 6px; }
.am-st-row-top b { min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-st-row-top span { margin-left: auto; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-st-row-sub { font-size: 11px; font-weight: 500; line-height: 13px; color: rgba(0, 0, 0, .5); text-align: right; }
.am-st-row-bar { height: 3px; border-radius: 1.5px; background: rgba(0, 0, 0, .04); }
.am-st-row-bar > div { height: 3px; display: flex; gap: 2px; }
.am-st-row-bar i { height: 3px; border-radius: 1.5px; }
.am-st-tip { position: absolute; z-index: 2; width: 240px; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; gap: 5px;
    border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .1), 0 3px 16px rgba(0, 0, 0, .18);
    font-size: 11px; line-height: 13px; color: #000; opacity: 0; pointer-events: none; transition: opacity .15s; }
.am-st-tip.is-on { opacity: 1; }
.am-st-tip-head { display: flex; align-items: center; gap: 8px; }
.am-st-tip-head img { width: 33px; height: 33px; flex: none; border-radius: 50%; }
.am-st-tip-head div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.am-st-tip-head b { font-size: 12px; font-weight: 600; line-height: 15px; }
.am-st-tip-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-st-tip-total { font-weight: 500; }
.am-st-tip-bar { height: 4px; margin: 2px 0; display: flex; gap: 2px; }
.am-st-tip-bar i { height: 4px; border-radius: 2px; }
.am-st-tip-row { display: flex; align-items: center; gap: 6px; }
.am-st-tip-row i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.am-st-tip-row em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
/* Status indicator expansion (MirrorStatusPresentation): window-background panel, radius 22. */
.am-smorph { position: relative; width: 44px; height: 48px; flex: none; z-index: 3; }
.am-smorph-panel { position: absolute; right: 0; top: 0; width: 44px; height: 48px; }
.am-smorph-bg { position: absolute; inset: 0; border-radius: 22px; background: #ececec; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .045); opacity: 0; }
.am-smorph-labels { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.am-smorph-labels span { position: absolute; transform: translateY(-50%); white-space: pre; text-align: right; font-size: 12px; font-weight: 500; line-height: 15px;
    font-variant-numeric: tabular-nums; color: rgba(0, 0, 0, .85); }
.am-smorph-svg { position: absolute; right: 0; top: 0; display: block; overflow: visible; }
/* MCP mode: the run log console (regular material, radius 16) and the replay accessibility overlay. */
.am-pwin-lead { position: absolute; }
.am-ctl-exit { color: #dc2626; }
.am-mcp { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; color: #000;
    background: rgba(242, 244, 243, .74); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.am-mcp-head { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.am-mcp-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.am-mcp-head-text > b { font-size: 13px; font-weight: 600; line-height: 16px; color: rgba(0, 0, 0, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-mcp-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 12px; }
.am-mcp-meta span { color: rgba(0, 0, 0, .48); }
.am-mcp-meta i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.am-mcp-meta em { font-style: normal; font-weight: 500; }
.am-mcp-head-icon { flex: none; width: 12px; height: 14px; display: grid; place-items: center; color: rgba(0, 0, 0, .44); }
.am-mcp-head-icon svg { width: 11px; height: 13px; display: block; }
.am-mcp-head-icon.is-gear { color: rgba(37, 99, 235, .72); animation: amSpin 1.2s linear infinite; }
.am-mcp-head-icon.is-gear svg { width: 13px; height: 13px; }
.am-mcp-div { height: 1px; flex: none; background: rgba(0, 0, 0, .1); opacity: .45; }
.am-mcp-list { flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.am-mcp-step { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .035); }
.am-mcp-step.is-nested { padding: 5px 8px; border-radius: 6px; background: none; }
.am-mcp-step.is-sel { background: rgba(37, 99, 235, .12); }
.am-mcp-ic { width: 17px; height: 17px; margin-top: 1px; flex: none; display: grid; place-items: center; }
.am-mcp-ic svg { display: block; }
.am-mcp-ic span svg { width: 11px; height: 11px; }
.am-mcp-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.am-mcp-step-top { display: flex; align-items: baseline; gap: 6px; }
.am-mcp-step-top b { flex: 1; min-width: 0; font-size: 11px; font-weight: 500; line-height: 13px; color: rgba(0, 0, 0, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-mcp-step-top time { font-size: 9px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; color: rgba(0, 0, 0, .38); white-space: nowrap; }
.am-mcp-step-main > span { font-size: 10px; line-height: 12px; color: rgba(0, 0, 0, .52); }
.am-mcp-group { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .055); }
.am-mcp-group-head { display: flex; align-items: center; gap: 9px; }
.am-mcp-group-head img { width: 24px; height: 24px; flex: none; border-radius: 6px; }
.am-mcp-group-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-mcp-group-head b { font-size: 11px; font-weight: 600; line-height: 13px; color: rgba(0, 0, 0, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-mcp-group-head span { font-size: 9px; line-height: 11px; color: rgba(0, 0, 0, .46); }
.am-mcp-group-head i { width: 10px; height: 10px; flex: none; color: rgba(0, 0, 0, .44); }
.am-mcp-group-head i svg { width: 10px; height: 10px; display: block; }
.am-mcp-group-steps { display: flex; flex-direction: column; gap: 8px; padding-left: 15px; }
.am-mcp .is-new { animation: amFadeIn .2s ease-out; }
@keyframes amFadeIn { from { opacity: 0; } }
.am-a11y { position: absolute; inset: 0; z-index: 2; }
.am-a11y-boxes i { position: absolute; display: block; box-sizing: border-box; transition: background-color .12s, box-shadow .12s; }
.am-a11y-card { position: absolute; box-sizing: border-box; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 8px;
    border: 1px solid transparent; background: rgba(0, 0, 0, .82); box-shadow: 0 8px 28px rgba(0, 0, 0, .34); opacity: 0; transform: scale(.98); transition: opacity .12s, transform .12s; }
.am-a11y-card.is-on { opacity: 1; transform: none; }
.am-a11y-title { display: flex; align-items: baseline; gap: 8px; }
.am-a11y-title b { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.am-a11y-title span { font-size: 12px; font-weight: 600; line-height: 15px; color: rgba(255, 255, 255, .96); }
.am-a11y-rows { display: flex; flex-direction: column; gap: 5px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; line-height: 12px; }
.am-a11y-rows div { display: flex; align-items: baseline; gap: 8px; }
.am-a11y-rows span { width: 76px; flex: none; text-align: right; color: rgba(255, 255, 255, .5); }
.am-a11y-rows b { min-width: 0; font-weight: 500; color: rgba(255, 255, 255, .86); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-a11y-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: .86; }
/* Closing mark: the icon's halves (slices of the PNG) meeting, then the PNG itself. */
.am-meld { position: absolute; inset: 0; }
.am-meld > * { position: absolute; left: 0; top: 0; width: 220px; height: 220px; display: block; background-repeat: no-repeat; }
.am-meld-w { background-size: 440px 220px; background-position: 0 0; transform-origin: 74.6px 110px; }
.am-meld-g { background-size: 440px 220px; background-position: -220px 0; transform-origin: 156px 110px; }
.am-meld-full { opacity: 0; }
.am-meld .am-meld-patch, .am-meld .am-meld-eyes { opacity: 0; transform-origin: 50% 49%; }

/* ---------- Input method (Chinese and Japanese pages) ---------- */
/* MirrorInlineCompositionOverlayView: clear glass under the Android cursor (11 pt corners, light
   readability mask, 1 pt border, soft shadow), the marked text underlined and a 2 pt caret. */
.am-imecomp {
    position: absolute; display: none; align-items: center; height: 28px; padding: 0 12px; border-radius: 11px;
    background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .16); color: #000; font-size: 13px; white-space: nowrap;
}
.am-imecomp.is-on { display: flex; }
.am-imecomp span { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .78); text-underline-offset: 3px; }
.am-imecomp i { display: block; width: 2px; height: 15px; margin-left: 3px; border-radius: 1px; background: rgba(0, 0, 0, .9); }
/* The system candidate window: a row for Pinyin, a column for Zhuyin and Japanese. */
.am-imecand {
    position: absolute; display: none; padding: 4px; border-radius: 10px; color: #000; font-size: 15px; line-height: 1;
    background: rgba(250, 250, 252, .94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 10px 26px rgba(0, 0, 0, .2);
}
.am-imecand.is-on { display: flex; }
.am-imecand.is-col { flex-direction: column; min-width: 112px; }
.am-imecand > span { display: flex; align-items: baseline; gap: 5px; padding: 5px 9px 6px 7px; border-radius: 6px; white-space: nowrap; }
.am-imecand > span i { font-style: normal; font-size: 10.5px; color: rgba(0, 0, 0, .45); min-width: 7px; }
.am-imecand > span.is-sel { background: #0a6cf0; color: #fff; }
.am-imecand > span.is-sel i { color: rgba(255, 255, 255, .78); }
.am-imecand > b { align-self: center; width: 18px; height: 18px; margin-left: 2px; color: rgba(0, 0, 0, .45); }
.am-imecand > b svg { display: block; width: 100%; height: 100%; }
/* The input source bubble macOS shows at the caret when a text field takes focus. */
.am-imesrc { position: absolute; opacity: 0; transform-origin: 0 0; padding: 4px; border-radius: 8px;
    background: rgba(250, 250, 252, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .16); pointer-events: none; }
.am-imesrc b { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 5px; background: #000; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; }

/* ---------- The handset beside the closed MacBook (homepage connection part) ---------- */
.am-v-linked { overflow: visible; }
.am-handset {
    position: absolute; inset: 0; border-radius: 46px;
    background: linear-gradient(150deg, #44474d 0%, #1b1d20 22%, #111214 60%, #2b2d31 100%);
    box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .16), inset 0 0 0 5px #08090a, 0 2px 3px rgba(6, 30, 22, .2);
}
/* Power and volume keys along the right edge. */
.am-handset-keys, .am-handset-keys::after { position: absolute; right: -2.6px; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #26282c, #4a4d52); }
.am-handset-keys { top: 132px; height: 52px; }
.am-handset-keys::after { content: ""; right: 0; top: 74px; height: 92px; }
.am-handset-screen { position: absolute; border-radius: 37px; }

/* Trackpad Gestures sheet (MirrorTrackpadGestureSettingsSheet), laid out at its real 480 pt and
   scaled by the scene: title and subtitle, the 380 × 220 preview, three toggle rows, Done. */
.am-tgs { position: absolute; width: 480px; padding: 24px; display: flex; flex-direction: column; gap: 22px; transform-origin: 0 0;
    border-radius: 24px; background: #f2f2f4; color: #1d1d1f;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 24px 60px rgba(0, 0, 0, .22), 0 6px 16px rgba(0, 0, 0, .1); }
.am-tgs-head { display: grid; gap: 6px; }
.am-tgs-head b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.am-tgs-head span { font-size: 13px; line-height: 1.35; color: rgba(0, 0, 0, .5); }
.am-tgs-preview { position: relative; width: 380px; height: 220px; margin: 0 auto; }
.am-tgs-pad { position: absolute; left: 34px; top: 36px; width: 312px; height: 148px; border-radius: 22px; background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 10px 18px rgba(0, 0, 0, .08); }
.am-tgs-edge { position: absolute; border-radius: 4px; background: rgba(0, 122, 255, .42); opacity: 0; }
.am-tgs-label { position: absolute; left: 34px; top: 36px; width: 312px; height: 148px; display: grid; place-items: center;
    font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .5); white-space: nowrap; }
/* Fingers drawn bolder than the app's white dots: accent-filled, ringed and haloed, with a fading
   trail back to where they landed. */
.am-tgs-trail { position: absolute; left: 0; top: 0; height: 30px; margin-top: -15px; border-radius: 15px; opacity: 0; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(0, 122, 255, 0), rgba(0, 122, 255, .3)); }
.am-tgs-finger { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 36% 32%, #6cb4ff 0%, #0a7aff 62%, #0062d6 100%);
    box-shadow: 0 0 0 3px #fff, 0 0 0 11px rgba(0, 122, 255, .16), 0 6px 16px rgba(0, 82, 190, .42); }
.am-tgs-rows { display: grid; gap: 14px; }
.am-tgs-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; overflow: hidden;
    background: rgba(255, 255, 255, .4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: background-color .3s ease; }
/* The hover light (cardHoverHighlight) on the row whose preview is playing. */
.am-tgs-row::before { content: ""; position: absolute; left: 22%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .3s ease; }
.am-tgs-row.is-hot { background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.am-tgs-row.is-hot::before { opacity: 1; }
.am-tgs-row > div { position: relative; flex: 1; min-width: 0; display: grid; gap: 4px; }
.am-tgs-row b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.am-tgs-row span { font-size: 12px; line-height: 1.35; color: rgba(0, 0, 0, .5); }
.am-tgs-toggle { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #0a7aff; }
.am-tgs-toggle::after { content: ""; position: absolute; left: 18px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .04); }
.am-tgs-foot { display: flex; justify-content: flex-end; }
.am-tgs-done { display: inline-grid; place-items: center; height: 28px; padding: 0 16px; border-radius: 14px; background: #0a7aff; color: #fff;
    font-size: 13px; font-weight: 500; }