/* (u189) The navy set: What's new (js/whatsnew2.js), the Updating screen (js/update.js install), the first-open welcome (js/welcome.js)
   and the look of the safety update-block (js/applock.js is untouched: only these selectors restyle it). Always navy, whatever the app's look.
   The base .lx pieces (curtain, pin, spinner, keyframes) are inline in index.html. Everything moves by transform and opacity. */
:root { --nv-line: rgba(214, 224, 255, .2); --nv-text: rgba(255, 255, 255, .74); --nv-grad: linear-gradient(135deg, #FF9152, #F0513E 55%, #B8264A); }
.lx { --safe-t: var(--safe-top, env(safe-area-inset-top, 0px)); --safe-b: var(--safe-bot, env(safe-area-inset-bottom, 0px)); font-family: var(--font, 'Jakarta', system-ui, -apple-system, sans-serif); -webkit-user-select: none; user-select: none; }
:where(.lx) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.lx-route .rtt { fill: none; stroke: var(--nv-line); stroke-width: .4; stroke-linecap: round; }
.wn2 .lx-geo, .upd2 .lx-geo { opacity: .5; } .wn2 .lx-glow, .upd2 .lx-glow { opacity: 1; }
.wn2 .rt, .wn2 .rtg, .upd2 .rt, .upd2 .rtg { transition: stroke-dashoffset .7s cubic-bezier(.3, .7, .2, 1); }
.lx .btn { min-height: 52px; border-radius: 999px; font-weight: 700; font-size: 17px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; }
.lx .btn.btn.primary { background: var(--nv-grad) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(240, 81, 62, .35); }
.lx .btn.btn.ghost { background: none !important; color: rgba(255, 255, 255, .86) !important; min-height: 44px; font-size: 15px; box-shadow: none; }

/* ---------- What's new ---------- */
.wn2 { z-index: 400; opacity: 0; transition: opacity .35s ease; touch-action: none; }
.wn2.in { opacity: 1; }
.wn2 .lx-pin { position: absolute; left: 0; top: 0; will-change: transform; } .wn2.go .lx-pin { transition: transform .75s cubic-bezier(.6, 0, .2, 1); }
.wn2 .lx-pin svg { opacity: 1; }
.wn2.first .wn2-rip { animation: lx-rip 2.4s ease-out infinite; } .wn2-rip { top: 44px; }
.wn2-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.wn2.go .wn2-marker { transition: transform .75s cubic-bezier(.3, .7, .2, 1), opacity .3s; }
.wn2-marker i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #FFB21E; box-shadow: 0 0 16px 5px rgba(255, 178, 30, .5); }
.wn2-top { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 10px); height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 12px 0 64px; gap: 8px; }
.wn2-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: 10px; }
.wn2-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 1px rgba(4, 6, 13, .55); transition: transform .35s cubic-bezier(.2, .9, .25, 1.1), background-color .3s; }
.wn2-dots i.seen { background: #FF8A6A; } .wn2-dots i.on { background: #fff; transform: scaleX(3); border-radius: 4px / 4px; box-shadow: 0 0 0 1px rgba(4, 6, 13, .55), 0 0 8px rgba(255, 255, 255, .45); }
.wn2-x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; background: rgba(255, 255, 255, .1); }
.wn2-x .i { width: 20px; height: 20px; }
/* (u194) laid out as top bar / track / buttons in one column: the text area is the flexible part and scrolls if a line is very long, the buttons sit
   below it (never over it), and the whole thing respects the safe areas. Pictures are banner-shaped (16:9), shown whole. */
.wn2 { display: flex; flex-direction: column; }
.wn2-track { position: relative; flex: 1 1 auto; min-height: 0; margin-top: calc(var(--safe-t) + 64px); }
.wn2-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; gap: 18px; padding: 4px 24px 8px; opacity: 0; transform: translateX(44px) scale(.95); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.wn2-slide.before { transform: translateX(-44px) scale(.95); }
.wn2-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.wn2-title { justify-content: flex-start; }
.wn2-tt { position: absolute; left: 0; right: 0; top: calc(50% - 15px); text-align: center; padding: 0 20px; }
.wn2-tt h1 { margin: 0; font: 700 30px/1.1 var(--font, system-ui); letter-spacing: -.03em; }
.wn2-serif { margin: 10px 0 0; font: 400 38px/1.05 'GSQ Serif', Georgia, serif; letter-spacing: -.01em; }
.wn2-sub { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--nv-text); }
.wn2-media { flex: none; width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: center; }
.wn2-phone { position: relative; width: 100%; aspect-ratio: 1200 / 675; border-radius: 16px; overflow: hidden; background: #0b1124; box-shadow: 0 0 0 1px rgba(214, 224, 255, .22), 0 18px 44px rgba(0, 0, 0, .5); }
.wn2-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #16203c, #0b1124); transition: opacity .3s; }
.wn2-ph .spinner { width: 26px; height: 26px; }
.wn2-phone.ready .wn2-ph { opacity: 0; }
.wn2-phone :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity .3s; z-index: 2; background: #0b1124; }
.wn2-phone.ready :is(img, video) { opacity: 1; }
.wn2-slide.on .wn2-phone { animation: wn2-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wn2-rise { from { transform: translateY(18px) scale(.97); } }
/* a card with no picture: the same coast and trip line, with a glowing disc for the feature (never an empty box) */
.wn2-art { position: relative; width: min(44vw, 180px); aspect-ratio: 1; display: grid; place-items: center; }
.wn2-disc { position: relative; z-index: 1; width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--nv-grad); box-shadow: 0 16px 40px rgba(240, 81, 62, .45), inset 0 2px 0 rgba(255, 255, 255, .3); }
.wn2-disc .i { width: 44%; height: 44%; }
@keyframes wn2-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.3); opacity: 0; } }
.wn2-ring { position: absolute; inset: 28%; border-radius: 50%; border: 2px solid rgba(255, 145, 82, .55); opacity: 0; }
.wn2-slide.on .wn2-ring { animation: wn2-ripple 3s ease-out infinite; } .wn2-slide.on .wn2-ring.r2 { animation-delay: 1.4s; }
.wn2-text { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; text-align: center; max-width: 420px; width: 100%; overflow-wrap: anywhere; }
.wn2-text h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.wn2-text p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--nv-text); }
.wn2-foot { position: relative; flex: none; padding-bottom: calc(var(--safe-b) + 18px); display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 24px; padding-right: 24px; }
.wn2-foot .btn, .wn2-next, .wn2-go { width: min(100%, 360px); }
.wn2-next { min-height: 52px; border-radius: 999px; font-weight: 700; font-size: 17px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(214, 224, 255, .22); }
.wn2-go { min-height: 52px; border-radius: 999px; font-weight: 700; font-size: 17px; background: var(--nv-grad); color: #fff; box-shadow: 0 10px 28px rgba(240, 81, 62, .35); }
.wn2-next[hidden], .wn2-go[hidden] { display: none; }
.wn2-notes { min-height: 44px; padding: 0 12px; color: rgba(255, 255, 255, .78); font-weight: 700; font-size: 15px; }
.wn2.calm .wn2-slide, .wn2.calm .wn2-slide.before, .wn2.calm .lx-pin, .wn2.calm .wn2-marker { transform: none; transition: opacity .25s linear; }
.wn2.calm .wn2-rip, .wn2.calm .wn2-ring { animation: none !important; } .wn2.calm .wn2-slide.on .wn2-phone { animation: none; }
.wn2.calm .rt, .wn2.calm .rtg { transition: none; } .wn2.calm .wn2-dots i.on { transition: none; }
@media (max-height: 700px) { .wn2-text h2 { font-size: 22px; } .wn2-text p { font-size: 15px; } .wn2-slide { gap: 10px; } .wn2-text { min-height: 0; } .wn2-foot { padding-bottom: calc(var(--safe-b) + 10px); } .wn2-next, .wn2-go { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .wn2, .wn2-slide { transition-duration: .2s; } .wn2-rip, .wn2-ring { animation: none !important; } }

/* ---------- welcome (first open) ---------- */
.wc { z-index: 410; }
.wc .lx-load { display: none; }
.wc .lx-mid { z-index: 2; }
.wc-cap { position: absolute; top: 104px; left: 0; right: 0; height: 36px; }
.wc-c { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 700 28px/1.15 var(--font, system-ui); letter-spacing: -.025em; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .3s ease; }
.wc-c.on { opacity: 1; transform: none; transition: opacity .35s ease .18s, transform .45s cubic-bezier(.2, .8, .2, 1) .18s; }
.wc-card { position: absolute; top: 158px; left: 0; right: 0; height: 52px; }
.wc-pill { position: absolute; left: 50%; top: 0; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px; border-radius: 24px; white-space: nowrap; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(214, 224, 255, .22); opacity: 0; transform: translate(-50%, 10px); transition: opacity .18s ease, transform .3s ease; }
.wc-pill.on { opacity: 1; transform: translate(-50%, 0); transition: opacity .35s ease .22s, transform .45s cubic-bezier(.2, .8, .2, 1) .22s; }
.wc-pill svg { width: 21px; height: 21px; fill: none; stroke: #FFB21E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wc-pill b { font-variant-numeric: tabular-nums; font-weight: 800; }
.wc-num { min-width: 3.1ch; text-align: left; font-size: 20px; letter-spacing: -.01em; }
.wc-bus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
#lnch.wc.b1 .lx-word, #lnch.wc.b2 .lx-word, #lnch.wc.b3 .lx-word, #lnch.wc.b1 .lx-tag, #lnch.wc.b2 .lx-tag, #lnch.wc.b3 .lx-tag { animation: lx-out .3s both; }
#lnch.wc.end .lx-word { animation: lx-up .4s .1s cubic-bezier(.2, .8, .2, 1) both; } #lnch.wc.end .lx-tag { animation: lx-up .45s .22s cubic-bezier(.2, .8, .2, 1) both; }
#lnch.wc.b3 .lx-ripple { top: 44px; animation: lx-rip 1.1s ease-out infinite; }
@keyframes lx-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
.wc-skip { position: absolute; top: calc(var(--safe-t) + 10px); right: 10px; min-height: 44px; padding: 0 16px; font-weight: 700; font-size: 16px; color: rgba(255, 255, 255, .82); opacity: 0; animation: lx-fade .4s .9s both; z-index: 3; }
.wc.end .wc-skip { opacity: 0; animation: none; pointer-events: none; }
.wc-go { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 28px); width: min(calc(100% - 48px), 360px); min-height: 56px; border-radius: 999px; font-weight: 700; font-size: 18px; background: var(--nv-grad); color: #fff; box-shadow: 0 12px 32px rgba(240, 81, 62, .4); opacity: 0; transform: translate(-50%, 18px); pointer-events: none; transition: opacity .45s ease .25s, transform .55s cubic-bezier(.2, .8, .2, 1) .25s; z-index: 3; }
.wc.end .wc-go { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wc-c, .wc-pill, .wc-go { transition: none; } #lnch.wc.end .lx-word, #lnch.wc.end .lx-tag { animation: none; opacity: 1; } .wc-skip { animation: none; } }

/* ---------- the Updating screen ---------- */
.upd2 { z-index: 300; color: #fff; }
.upd2 .lx-pin { position: absolute; left: 0; top: 0; will-change: transform; }
.upd2 .lx-pin svg { opacity: 1; }
.u2-pin:not([style*="transform"]) { opacity: 0; }
.u2-rip { top: 44px; }
.upd2[data-state="wait"] .u2-rip, .upd2[data-state="down"] .u2-rip { animation: lx-rip 2.4s ease-out infinite; }
.upd2[data-state="done"] .u2-rip { animation: lx-rip .9s ease-out 1 both; }
.upd2[data-state="done"] .u2-pin svg { animation: u2-drop .7s cubic-bezier(.2, .9, .25, 1.3) both; }
@keyframes u2-drop { 0% { transform: translateY(-26px); } 55% { transform: translateY(2px); } 100% { transform: none; } }
.upd2[data-state="fail"] .u2-pin svg { filter: grayscale(.75) brightness(.75); transition: filter .4s; }
.upd2[data-state="fail"] .lx-route { opacity: .45; transition: opacity .4s; }
.upd2.indet:not([data-state="fail"]) .rtt { animation: u2-shim 1.7s ease-in-out infinite; }
@keyframes u2-shim { 50% { stroke: rgba(255, 178, 130, .55); } }
.u2-head-dot { transform: translate(-50px, -50px); position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FFB21E; box-shadow: 0 0 16px 5px rgba(255, 178, 30, .5); opacity: 0; transition: transform .5s linear, opacity .25s; }
.u2-head { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 20px); text-align: center; padding: 0 24px; }
.u2-kick { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(214, 224, 255, .75); }
.u2-body { position: absolute; left: 0; right: 0; bottom: 0; width: min(100%, 420px); margin: 0 auto; padding: 0 24px calc(var(--safe-b) + 26px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.u2-h { margin: 0 0 8px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 25px/1.15 var(--font, system-ui); letter-spacing: -.025em; }
.u2-sr { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 24px; }
.u2-hs { display: inline-flex; }
.upd2[data-state="done"] .u2-hs, .upd2[data-state="fail"] .u2-hs { display: none; }
.u2-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--nv-text); }
.u2-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 18px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .38); }
.u2-steps li { display: inline-flex; align-items: center; gap: 7px; transition: color .3s; }
.u2-steps i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background-color .3s, transform .3s; }
.upd2[data-phase="down"] li[data-s="down"], .upd2[data-phase="check"] li[data-s="check"], .upd2[data-phase="inst"] li[data-s="inst"] { color: #fff; }
.upd2[data-phase="down"] li[data-s="down"] i, .upd2[data-phase="check"] li[data-s="check"] i, .upd2[data-phase="inst"] li[data-s="inst"] i { background: #FF9152; transform: scale(1.35); }
.upd2[data-phase="check"] li[data-s="down"], .upd2[data-phase="inst"] li[data-s="down"], .upd2[data-phase="inst"] li[data-s="check"], .upd2[data-state="done"] li { color: rgba(255, 255, 255, .78); }
.upd2[data-phase="check"] li[data-s="down"] i, .upd2[data-phase="inst"] li[data-s="down"] i, .upd2[data-phase="inst"] li[data-s="check"] i, .upd2[data-state="done"] li i { background: #fff; }
.upd2[data-state="done"][data-phase] li[data-s] i { background: #fff; transform: none; }
.u2-st { margin: 0; min-height: 22px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(214, 224, 255, .88); }
.u2-meter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.u2-acts { display: grid; gap: 8px; width: 100%; margin-top: 16px; } .u2-acts:empty { display: none; }
.u2-acts .btn { width: 100%; }
.u2-slow { margin: 0 0 4px; font-size: 14px; color: var(--nv-text); }
.upd2.out { animation: u2-out .3s ease both; } @keyframes u2-out { to { opacity: 0; } }
@media (max-height: 700px) { .u2-h { font-size: 22px; } .u2-lead { margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .upd2 .rt, .upd2 .rtg, .u2-head-dot { transition: none; } .upd2[data-state="done"] .u2-pin svg { animation: none; } .u2-rip { animation: none !important; } .upd2.indet .rtt { animation: none; } }

/* ---------- the safety update-block (applock.js, untouched): same navy look, same words ---------- */
html #applock { background: url(../shots/launch-coast.svg) center / cover no-repeat, radial-gradient(120% 90% at 50% 60%, #0b1430 0%, #060a16 60%, #04060d 100%); color: #fff; }
html #applock h1, html #applock .al-msg { color: #fff; }
html #applock .al-until, html #applock .al-st, html #applock .al-help { color: rgba(214, 224, 255, .8); }
html #applock .al-code { background: rgba(255, 255, 255, .1); color: rgba(214, 224, 255, .85); }
html #applock .al-icon { color: #FFB21E; background: rgba(255, 178, 30, .14); }
html #applock .al-btn { background: linear-gradient(135deg, #FF9152, #F0513E 55%, #B8264A); color: #fff; box-shadow: 0 10px 28px rgba(240, 81, 62, .35); }
html #applock .al-help a { color: #FFB21E; }
html #applock .spinner circle { stroke: #ff9a6b; }

/* (u194) the small label beside the final-approach countdown on the founder's Sage-testing device (js/eta.js p45Auth); nothing else ever sets it */
.fa-label { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .7; white-space: nowrap; }
/* (u206 harsh review) the route line ran through the caption and the pill: a soft dark halo and a firmer glass keep them readable, and one
   line of the beat's own words fills the empty space under the pill */
.wc-c { text-shadow: 0 0 14px rgba(8, 10, 28, .95), 0 0 4px rgba(8, 10, 28, .9), 0 1px 2px rgba(8, 10, 28, .8); }
.wc-pill { background: rgba(14, 18, 44, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wc-subs { position: absolute; top: 226px; left: 0; right: 0; height: 24px; }
.wc-s { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 500 16px/1.3 var(--font, system-ui); color: rgba(235, 240, 255, .86); text-shadow: 0 0 10px rgba(8, 10, 28, .95), 0 0 3px rgba(8, 10, 28, .9); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .3s ease; }
.wc-s.on { opacity: 1; transform: none; transition: opacity .35s ease .3s, transform .45s cubic-bezier(.2, .8, .2, 1) .3s; }
@media (prefers-reduced-motion: reduce) { .wc-s { transition: none; } }
/* (u206 harsh review) the coastline drawn behind the Update screen ran through "The update didn't finish": the card sits on a soft panel of the page colour */
.upd-card { position: relative; isolation: isolate; }
.upd-card::before { content: ""; position: absolute; z-index: -1; inset: -20px -14px; border-radius: 28px; background: color-mix(in srgb, var(--bg, #0b1020) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* (u206) the route line passed through "Know when to leave." and the "Tap to skip" hint sat on the Let's set you up button */
#lnch .lx-word, #lnch .lx-tag { text-shadow: 0 0 16px rgba(8, 10, 28, .92), 0 0 5px rgba(8, 10, 28, .85); }
#lnch.wc.end .lnch-skip { display: none; }

/* (u208) Updating screen: the unfilled trip line is a dotted track and the finished part is solid, the words sit on a navy scrim so no coast or
   line runs through them, and the failure state clears the scenery back so it reads (Isaac, 24 Oct: "no map lines over the text"). */
.upd2 .lx-route .rtt { stroke: rgba(214, 224, 255, .38); stroke-width: .5; stroke-dasharray: .5 1.1; }
.upd2 .u2-body { isolation: isolate; }
.upd2 .u2-body::before { content: ""; position: absolute; z-index: -1; left: -60vw; right: -60vw; bottom: 0; top: -90px; pointer-events: none; background: linear-gradient(to top, #060a16 0, #060a16 72%, rgba(6, 10, 22, 0)); }
.upd2 .u2-head { text-shadow: 0 1px 8px #060a16, 0 0 18px #060a16; }
.upd2[data-state="fail"] .lx-geo { opacity: .22; transition: opacity .4s; }
.upd2[data-state="fail"] .lx-route { opacity: .3; }
.upd2[data-state="fail"] .u2-steps, .upd2[data-state="fail"] .u2-lead { display: none; }
.upd2[data-state="fail"] .u2-st { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .86); text-align: center; }
/* (firstrun-1101) the welcome has its own Skip button: the splash's "Tap to skip" hint sat on the caption's second line ("So you never ride past it.") on tall/wide windows. Short windows (landscape) drop the second line so nothing collides. */
#lnch.wc .lnch-skip { display: none; }
@media (max-height: 520px) { .wc-subs { display: none; } }

/* (u238) What's new: a Back button beside Next; long text and big font sizes scroll inside the card instead of being cut off */
.wn2-slide > * { flex-shrink: 0; }
.wn2-text { overflow: visible; max-height: none; padding-bottom: 8px; }
.wn2-title { overflow: hidden; }
.wn2-nav { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: min(100%, 360px); }
.wn2-nav .wn2-next, .wn2-nav .wn2-go { flex: 1 1 0; width: auto; min-width: 0; }
.wn2-back { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 0 18px 0 12px; border-radius: 999px; font-weight: 700; font-size: 17px; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(214, 224, 255, .22); }
.wn2-back[hidden] { display: none; }
.wn2-back .i { width: 18px; height: 18px; }
.wn2-text h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-height: 700px) { .wn2-back { min-height: 48px; } }