/* Authored, noninteractive phone illustrations; never a native install control. */
.install-animation{width:100%;min-width:0;container-type:inline-size;margin:28px 0;color:var(--ink,#f1f1ec)}
.install-animation *{box-sizing:border-box}
.ia-card{width:100%;min-width:0;padding:22px 20px 18px;border:1px solid #303541;border-radius:18px;background:#11141b}
.ia-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:25px}
.ia-kicker{color:#a9b7ff;font:10px/1.5 var(--mono,monospace);letter-spacing:.12em}
.ia-device-name{color:#bec3d0;font-size:12px;overflow-wrap:anywhere}
.ia-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.ia-visual{min-width:0;display:grid;place-items:center;padding:4px 0 10px;user-select:none;pointer-events:none}
.ia-phone{--ia-accent:#a7b6ff;position:relative;isolation:isolate;width:min(230px,100%);aspect-ratio:230/426;border:6px solid #363d50;border-radius:33px;background:#0d1018;overflow:hidden;box-shadow:0 22px 38px -24px #000b,0 0 0 1px #727b9240;font-family:var(--sans,Arial,sans-serif);line-height:1.4}
[data-device=xiaomi] .ia-phone{--ia-accent:#e6b8a3;border-color:#564840}
[data-device=vivo] .ia-phone{--ia-accent:#b8a9f3;border-color:#4c4364}
.ia-statusbar{display:flex;justify-content:space-between;align-items:center;height:33px;padding:8px 15px 0;font-size:9px;font-weight:600;color:#d2d6e2}
.ia-browser{position:relative;display:flex;align-items:center;gap:7px;padding:8px}
.ia-address{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 3px;border:1px solid #343b4e;border-radius:20px;background:#202636;color:#d3d9e8;font-size:10px;transition:box-shadow .45s,border-color .45s}
.ia-address>span{font-size:13px}
.ia-more{display:grid;place-items:center;flex:none;width:25px;height:29px;border:1px solid transparent;border-radius:8px;transition:box-shadow .45s,border-color .45s}
.ia-phone svg{width:19px;height:19px;flex:none}
.ia-webpage{padding:31px 17px 65px;text-align:center;transition:opacity .45s,transform .45s}
.ia-brand-mark{display:grid;place-items:center;width:43px;height:43px;margin:0 auto 11px;border-radius:12px;background:#3349ee;color:white;font-size:25px;font-weight:600}
.ia-web-name{font-size:23px;letter-spacing:-.05em;font-weight:600}
.ia-web-tagline{font-size:10px;color:#aeb5c6;margin-top:4px}
.ia-web-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:23px}
.ia-web-placeholder>span{height:57px;border:1px solid #374155;border-radius:8px;background:#212b40}
.ia-web-placeholder>span+span{background:#29263c;border-color:#423b54}
.ia-web-lines{display:grid;gap:7px;margin-top:12px}
.ia-web-lines>span{display:block;width:83%;height:4px;background:#354056;border-radius:3px}
.ia-web-lines>span+span{width:54%;background:#282f3e}
.ia-safari-bar{position:absolute;inset:auto 0 11px;display:flex;align-items:center;justify-content:space-around;height:44px;background:#151b29;border-top:1px solid #293245;color:#c2ceff}
.ia-safari-bar>span{display:grid;place-items:center;width:31px;height:31px;font-size:26px;line-height:1;border:1px solid transparent;border-radius:8px;transition:box-shadow .45s,border-color .45s}
.ia-safari-bar .ia-share{font-size:16px}
.ia-menu{position:absolute;z-index:2;opacity:0;visibility:hidden;transform:translateY(15px);border:1px solid #5c6477;background:#252c3c;box-shadow:0 15px 30px #0005;text-align:left;transition:opacity .45s,transform .45s,visibility .45s}
.ia-share-sheet{bottom:20px;left:7px;right:7px;border-radius:16px;padding:10px}
.ia-chrome-menu{top:71px;left:16px;right:8px;border-radius:12px;padding:11px}
.ia-sheet-handle{display:block;width:30px;height:3px;background:#7e879b;border-radius:3px;margin:0 auto 12px}
.ia-chrome-menu .ia-sheet-handle{display:none}
.ia-menu-title{font-size:12px;font-weight:600;padding:3px 5px 11px;color:#e7eaf3}
.ia-menu-muted{font-size:10px;color:#aeb7ca;padding:10px 5px;border-top:1px solid #465064}
.ia-menu-target{display:flex;align-items:center;gap:8px;margin-top:4px;padding:10px 6px;border:1px solid transparent;border-radius:7px;color:#eef0f8;font-size:10px;transition:box-shadow .45s,border-color .45s,background .45s}
.ia-menu-target svg{width:16px;height:16px}
.ia-menu-target small{display:block;font-size:8px;color:#bec8dd;margin-top:3px}
.ia-confirmation{position:absolute;z-index:3;inset:79px 9px 37px;padding:13px 10px;text-align:center;border:1px solid #6a748b;border-radius:15px;background:#242c3d;opacity:0;visibility:hidden;transform:translateY(15px);transition:opacity .45s,visibility .45s,transform .45s}
.ia-confirm-top{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:9px;color:#c8cfe0}
.ia-confirm-add{font-size:10px;font-weight:600;color:var(--ia-accent);padding:5px 7px;border:1px solid var(--ia-accent);border-radius:7px;box-shadow:0 0 0 3px #adbbff18}
.ia-confirm-icon{width:45px;height:45px;display:grid;place-items:center;margin:18px auto 7px;border-radius:12px;background:#3349ee;font-size:26px;color:white;font-weight:600}
.ia-confirmation>b{display:block;font-size:13px;font-weight:500}
.ia-confirm-detail{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:18px;padding:11px 0;border-top:1px solid #4a5368;font-size:9px;color:#c7cede}
.ia-confirm-detail>i{font-size:8px;line-height:16px;min-width:24px;padding:0 4px;border-radius:20px;background:#3e765e;color:#edf7f0;font-style:normal}
.ia-home-preview{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:13px;font-size:8px;color:#bdc9e5}
.ia-home-preview svg{width:15px;height:15px}
.ia-home-indicator{position:absolute;z-index:4;bottom:5px;left:35%;width:30%;height:3px;border-radius:5px;background:#8992a7}
.ia-touch-point{position:absolute;z-index:5;width:21px;height:21px;border:2px solid var(--ia-accent);border-radius:50%;box-shadow:0 0 0 5px #a9b8ff18;background:#a8b6ff30;left:calc(50% - 10px);top:55px;transition:top .55s cubic-bezier(.2,.7,.2,1),left .55s cubic-bezier(.2,.7,.2,1),opacity .35s;opacity:0}
[data-step="0"] .ia-address{border-color:var(--ia-accent);box-shadow:0 0 0 3px #aabaff20}
[data-step="1"] .ia-share,[data-step="1"] .ia-more{border-color:var(--ia-accent);box-shadow:0 0 0 4px #aabaff20}
[data-step="1"] .ia-touch-point{opacity:1;left:calc(94% - 22px);top:51px}
[data-device=ios][data-step="1"] .ia-touch-point{left:calc(62% - 10px);top:calc(100% - 48px)}
[data-step="2"] .ia-menu{opacity:1;visibility:visible;transform:translateY(0)}
[data-step="2"] .ia-webpage,[data-step="3"] .ia-webpage{opacity:.25;transform:translateY(-5px)}
[data-step="2"] .ia-menu-target{border-color:var(--ia-accent);box-shadow:0 0 0 3px #aabaff20;background:#353f59}
[data-step="2"] .ia-touch-point{opacity:1;left:calc(69% - 10px);top:180px}
[data-device=ios][data-step="2"] .ia-touch-point{top:calc(100% - 60px)}
[data-step="3"] .ia-confirmation{opacity:1;visibility:visible;transform:translateY(0)}
[data-step="3"] .ia-touch-point{opacity:1;left:calc(79% - 10px);top:96px}
.ia-explanation{min-width:0}
.ia-step-buttons{display:flex;gap:8px;margin-bottom:23px;flex-wrap:wrap}
.install-animation .ia-step-button{min-width:44px;min-height:44px;padding:7px;border:1px solid #444d61;border-radius:50%;font:12px var(--mono,monospace);color:#bfc7db;background:transparent}
.install-animation .ia-step-button[aria-current=step]{color:#101728;background:#b1bfff;border-color:#b1bfff}
.ia-step-status{min-height:192px;overflow-wrap:anywhere}
.ia-step-count{display:block;font:11px/1.5 var(--mono,monospace);color:#a9b7ff;margin-bottom:12px}
.install-animation .ia-step-title{font-size:25px;line-height:1.12;letter-spacing:-.025em;margin:0 0 13px}
.install-animation .ia-step-description{font-size:14px;line-height:1.65;margin:0 0 22px;color:#bec5d5}
.ia-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.install-animation .ia-controls>button{min-width:0;min-height:44px;padding:9px 8px;font-size:13px;line-height:1.3;border-color:#4b5570;border-radius:8px;white-space:normal}
.install-animation .ia-controls>.ia-play{grid-column:1/-1;border-color:#697cc6;background:#273865;color:#e1e7ff}
.install-animation button:focus-visible{outline:3px solid #b9c6ff;outline-offset:4px}
.install-animation button:disabled{opacity:.45;cursor:default}
.install-animation .ia-play-state{font-size:11px;line-height:1.6;color:#a9b3c8;min-height:36px;margin:12px 0 0}
.install-animation .ia-illustration-label{font-size:11px;line-height:1.6;color:#a9b3c8;margin:20px 0 0;padding-top:16px;border-top:1px solid #30394c;overflow-wrap:anywhere}
@container(min-width:400px){.ia-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}.install-animation .ia-controls>.ia-play{grid-column:auto}}
@container(min-width:560px){.ia-card{padding:26px}.ia-layout{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:30px}.ia-step-status{min-height:215px}.ia-step-title{font-size:27px}}
@media(prefers-reduced-motion:reduce){.install-animation .ia-phone *{transition:none!important;animation:none!important}}
.install-animation[data-reduced-motion=true] .ia-phone *{transition:none!important;animation:none!important}
@media print{.ia-controls,.ia-step-buttons,.ia-play-state{display:none}.ia-card{break-inside:avoid}}
/* Keep the illustrated phone and playback controls visible together on phones. */
@container(max-width:399px){
 .ia-card{padding:18px 14px}.ia-heading{margin-bottom:14px}.ia-layout{gap:16px}
 .ia-visual{display:flex;align-items:center;justify-content:center;height:290px;padding:0}
 .ia-phone{width:230px;max-width:none;flex:none;transform:scale(.67);transform-origin:center}
 .ia-step-buttons{margin-bottom:14px}.ia-step-status{min-height:155px}
 .install-animation .ia-step-title{font-size:23px;margin-bottom:10px}
 .ia-step-count{margin-bottom:8px}.install-animation .ia-step-description{font-size:14px;line-height:1.55;margin-bottom:16px}
 .ia-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.install-animation .ia-controls>.ia-play{grid-column:auto}
 .install-animation .ia-play-state{min-height:18px;margin:8px 0 0}
 .install-animation .ia-illustration-label{margin-top:14px;padding-top:12px}
}
.ia-brand-mark img,.ia-confirm-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
