/* LetsMeetVerse landing page. The look follows the game's bubble kit (public/css/bubble.css): navy ink, pastel pink /
   baby blue / lavender, clay buttons with a solid bottom edge, puffy white-outlined wordmark. Fonts ship with the site
   (fonts/, SIL OFL); Chinese falls back to the system CJK face. */
@font-face { font-family: Nunito; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(fonts/nunito-latin-wght-normal.woff2) format("woff2-variations"); 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: Nunito; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(fonts/nunito-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: Fredoka; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/fredoka-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Fredoka; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/fredoka-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Fredoka; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/fredoka-latin-700-normal.woff2) format("woff2"); }

:root {
  --ink: #1B2A6B; --ink-2: #49558A; --muted: #6E77A3;
  --pink: #F69BBB; --pink-d: #E07CA0; --pink-l: #FDEFF4; --pink-line: #F2C4D3; --pink-edge: #E6BFCC;
  --blue: #86CDF3; --blue-d: #5DAEE0; --blue-l: #E4F4FE; --blue-rim: #64AEDF; --blue-edge: #5E9FCF;
  --lav: #B9A3F3; --lav-d: #8C72D8; --lav-l: #F1ECFD; --lav-edge: #9F88E2;
  --butter: #FFD98A; --butter-d: #E2A93A; --butter-l: #FFF5DC;
  --card: #FFF9F7; --white: #FFFFFF; --page: #FFF9FB;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC";
  --body: Nunito, var(--cjk), system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Fredoka, Nunito, var(--cjk), system-ui, sans-serif;
  --max: 1200px; --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 600 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
h1, h2, h3 { font-family: var(--display); margin: 0; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 12px; z-index: 50; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid #3E9FE6; outline-offset: 3px; border-radius: 12px; }
html:lang(zh-CN) body { letter-spacing: .02em; }

/* ---------- puffy wordmark, as in the banner: Lets pink, Meet baby blue, Verse pink, cream outline ---------- */
.word { display: inline-flex; font: 700 1em/1.02 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.word > span { position: relative; display: inline-block; isolation: isolate; padding: 0 .035em; }
.word > span::before { content: attr(data-t); position: absolute; inset: 0 .035em; z-index: -1; color: #FFFAF0; -webkit-text-stroke: .2em #FFFAF0;
  text-shadow: 0 .08em 0 #F1BCCD, 0 .13em .18em rgba(196, 96, 140, .3); }
.word > span::after { content: attr(data-t); position: absolute; inset: 0 .035em; z-index: 1; pointer-events: none; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9) 4%, rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, 0) 50%); -webkit-background-clip: text; background-clip: text; }
.word .w1 { color: var(--pink); -webkit-text-fill-color: var(--pink); -webkit-text-stroke: .024em var(--pink-d); }
.word .w2 { color: var(--blue); -webkit-text-fill-color: var(--blue); -webkit-text-stroke: .024em var(--blue-d); }
.word .w2::before { text-shadow: 0 .08em 0 #B9DDF2, 0 .13em .18em rgba(70, 130, 190, .28); }
.word .w3 { color: var(--pink); -webkit-text-fill-color: var(--pink); -webkit-text-stroke: .024em var(--pink-d); }

/* ---------- clay buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; color: var(--ink); font: 700 18px/1.2 var(--display);
  padding: 13px 26px; border-radius: 999px; border: 2.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); }
.btn-pink { background: linear-gradient(180deg, #FFE0EB 0%, #FBB9CF 55%, var(--pink) 100%); border-color: var(--pink-d); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 5px 0 #D9789C, 0 14px 28px -12px rgba(224, 124, 160, .8); }
.btn-pink:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 1px 0 #D9789C; }
.btn-blue { background: linear-gradient(180deg, #CDEDFE 0%, #A9DCF8 55%, #86C9F1 100%); border-color: var(--blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 5px 0 var(--blue-edge), 0 14px 28px -12px rgba(70, 140, 200, .8); }
.btn-blue:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 1px 0 var(--blue-edge); }
.btn-sm { font-size: 16px; padding: 7px 18px; white-space: nowrap; }
.btn-lg { padding: 10px 26px 10px 12px; border-radius: 30px; text-align: left; }
.btn-lg > img { width: 50px; height: 50px; flex: none; background: rgba(255, 255, 255, .92); border-radius: 18px; padding: 4px; }
.btn-lg strong { display: block; font-size: 21px; font-weight: 700; }
.btn-lg small { display: block; font: 700 14px/1.3 var(--body); color: var(--ink-2); margin-top: 2px; }
.dl-size:not(:empty)::before { content: ", "; }
.dl-size-p:not(:empty)::before { content: " ("; } .dl-size-p:not(:empty)::after { content: ")"; }
html:lang(zh-CN) .dl-size:not(:empty)::before { content: "，"; }
html:lang(zh-CN) .dl-size-p:not(:empty)::before { content: "（"; } html:lang(zh-CN) .dl-size-p:not(:empty)::after { content: "）"; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px max(var(--gut), calc((100% - var(--max)) / 2));
  background: rgba(255, 249, 251, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid rgba(242, 196, 211, .6); }
.brand { display: flex; text-decoration: none; font-size: 27px; padding: 4px 2px; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { text-decoration: none; font: 600 16px var(--display); padding: 8px 14px; border-radius: 999px; }
.nav-links a:hover { background: var(--pink-l); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; background: var(--pink-l); border: 2px solid var(--pink-line); border-radius: 999px; padding: 3px; }
.lang button { border: 0; background: none; font: 700 14px/1 var(--display); color: var(--ink-2); padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lang button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 0 var(--pink-edge); }

/* ---------- section scaffolding ---------- */
section { padding: clamp(64px, 9vw, 120px) var(--gut); }
.sec-head { max-width: var(--max); margin: 0 auto clamp(32px, 4.5vw, 56px); }
.sec-head h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
html:lang(zh-CN) .sec-head h2 { line-height: 1.22; }
.sec-head p { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: clamp(17px, 1.5vw, 19px); }
.frame { border-radius: 32px; overflow: hidden; border: 6px solid var(--white); background: var(--white); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero: the banner, then the hook ---------- */
.hero { padding: 0 0 8px; background: linear-gradient(180deg, var(--blue-l) 0%, var(--page) 100%); }
.banner { display: block; position: relative; }
.banner img { width: 100%; height: auto; aspect-ratio: 3 / 1; max-height: 640px; object-fit: cover; object-position: 50% 55%; }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--pink-line); opacity: .55; }
.hero-copy { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 3.6vw, 48px) var(--gut) 0; }
.hero h1 { font-size: clamp(34px, 3.7vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
html:lang(zh-CN) .hero h1 { font-weight: 700; line-height: 1.25; }
.hero-side { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px clamp(32px, 4vw, 56px); align-items: start; }
.hero-lede { grid-row: span 2; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 31em; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.hero-note { font-size: 15px; color: var(--muted); }

/* ---------- key fobs (hero tag and the neighborhood wall) ---------- */
.fob { --c: var(--pink); --cd: var(--pink-d); --wall: var(--page); --tilt: 0deg; position: relative; background: var(--c);
  border-radius: 30px 30px 42px 42px; padding: 48px 14px 22px; text-align: center; transform-origin: 50% -30px; transform: rotate(var(--tilt));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -7px 0 rgba(0, 0, 0, .06), 0 8px 0 var(--cd), 0 30px 40px -24px rgba(27, 42, 107, .45); }
.fob::before { content: ""; position: absolute; top: 15px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--wall);
  box-shadow: inset 0 3px 0 rgba(27, 42, 107, .14); }                                         /* the punched hole */
.fob::after { content: ""; position: absolute; top: -32px; left: 50%; width: 38px; height: 62px; margin-left: -19px; border-radius: 50%;
  border: 4.5px solid #AEB8DC; border-top-color: #CCD3EE; border-bottom-color: #8F9AC7; z-index: 2; pointer-events: none; }   /* the split ring */
.f-pink { --c: #F9B4CB; --cd: var(--pink-d); }
.f-blue { --c: #A9DCF8; --cd: var(--blue-edge); }
.f-lav { --c: #CDBDF7; --cd: var(--lav-edge); }
.f-butter { --c: var(--butter); --cd: var(--butter-d); }

.fobs.nudge .fob { animation: nudge 2.2s cubic-bezier(.3, .7, .4, 1) both; }
.fobs.nudge li:nth-child(2) { animation-delay: .12s; } .fobs.nudge li:nth-child(3) { animation-delay: .24s; } .fobs.nudge li:nth-child(4) { animation-delay: .36s; }
@keyframes nudge { 0% { transform: rotate(var(--tilt)); } 18% { transform: rotate(calc(var(--tilt) + 9deg)); } 40% { transform: rotate(calc(var(--tilt) - 6deg)); }
  62% { transform: rotate(calc(var(--tilt) + 3deg)); } 82% { transform: rotate(calc(var(--tilt) - 1deg)); } 100% { transform: rotate(var(--tilt)); } }

.hoods { background: var(--lav-l); }
.fobs { --wall: var(--lav-l); max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px clamp(18px, 2.6vw, 36px); padding-top: 34px; }
.fobs .fob { --wall: var(--lav-l); }
.fobs li:nth-child(1) { --tilt: -2.5deg; } .fobs li:nth-child(2) { --tilt: 2deg; } .fobs li:nth-child(3) { --tilt: -1.5deg; } .fobs li:nth-child(4) { --tilt: 3deg; }
.fobs .fob > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 5px solid rgba(255, 255, 255, .95); }
.fobs h3 { margin-top: 16px; font-size: clamp(22px, 2.1vw, 27px); font-weight: 700; line-height: 1.1; }
.fobs .alt-name { font: 700 15px/1.3 var(--body); color: var(--ink-2); margin-top: 3px; }
.fobs p:last-child { margin: 10px auto 0; max-width: 16em; font-size: 16px; line-height: 1.45; color: var(--ink); }
/* the nail each fob hangs from */
.fobs .fob > h3::before { content: ""; position: absolute; top: -40px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #B9C1E2 40%, #7E89BC 100%); box-shadow: 0 3px 4px rgba(27, 42, 107, .25); z-index: 3; }

/* ---------- what you do ---------- */
.life-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.life-item .frame { aspect-ratio: 5 / 4; box-shadow: 0 8px 0 var(--edge), 0 30px 46px -30px rgba(27, 42, 107, .4); }
.t-pink { --edge: var(--pink-line); } .t-blue { --edge: #B9DDF2; } .t-lav { --edge: #D6CBF4; } .t-butter { --edge: #F6DCA4; }
.life-item h3 { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: clamp(21px, 1.8vw, 24px); font-weight: 700; line-height: 1.15; }
.life-item h3 img { width: 44px; height: 44px; flex: none; }
.life-item p { margin-top: 8px; color: var(--ink-2); max-width: 26em; font-size: 17px; }

/* ---------- real screenshots ---------- */
.ingame { background: var(--blue-l); }
.shots { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 22px 26px; }
.shot { margin: 0; }
.shot-main { grid-row: span 2; }
.shot button { display: block; width: 100%; padding: 0; border: 4px solid var(--white); border-radius: 20px; overflow: hidden; background: var(--white); cursor: zoom-in;
  box-shadow: 0 6px 0 #B9DDF2, 0 24px 40px -26px rgba(27, 42, 107, .45); }
.shot button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption { margin-top: 12px; font: 600 17px/1.3 var(--display); }
.shot-main figcaption { font-size: 19px; }

/* ---------- how to play ---------- */
.ways-list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.way { display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border: 3px solid var(--pink-line); border-radius: 34px; padding: 26px 26px 30px;
  box-shadow: inset 0 3px 0 #fff, 0 7px 0 var(--pink-edge); }
.way > img { width: 72px; height: 72px; }
.way .status { margin-top: 14px; font: 800 14px/1 var(--body); padding: 7px 12px 7px 26px; border-radius: 999px; background: #E2F6EE; color: #1E6B52; position: relative; }
.way .status::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #3FAE84; }
.way h3 { margin-top: 14px; font-size: 26px; font-weight: 700; }
.way p:not(.status) { margin-top: 8px; color: var(--ink-2); font-size: 17px; }
.way .btn { margin-top: auto; }
.way p:not(.status) + .btn { margin-top: 22px; }
.way-soon { background: transparent; border-style: dashed; border-color: var(--lav); box-shadow: none; }
.way-soon .status { background: var(--lav-l); color: #5A43B0; }
.way-soon .status::before { background: var(--lav-d); }

/* ---------- download ---------- */
.download { padding-top: 0; }
.dl-panel { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  background: var(--blue-l); border: 3px solid var(--blue-rim); border-radius: 48px; padding: clamp(26px, 4.4vw, 56px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .8), 0 10px 0 var(--blue-edge), 0 40px 60px -40px rgba(27, 42, 107, .5); }
.dl-icon { width: 88px; height: 88px; margin: -6px 0 6px -6px; }
.dl-main h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.1; }
.dl-main > p { margin-top: 12px; color: var(--ink-2); max-width: 32em; }
.btn-dl { margin-top: 26px; }
.dl-alt { margin-top: 26px; display: grid; gap: 10px; font-size: 16px; color: var(--ink-2); }
.dl-alt a { color: var(--ink); font-weight: 800; }
.dl-help { background: var(--white); border-radius: 32px; padding: 26px 26px 28px; align-self: start; box-shadow: 0 6px 0 #B9DDF2; }
.dl-help h3 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.dl-help > p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.ss-steps { counter-reset: ss; margin-top: 18px; display: grid; gap: 14px; }
.ss-steps li { counter-increment: ss; display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; font-size: 16px; }
.ss-steps li > span:last-child::before { content: counter(ss); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%;
  background: var(--pink); color: #fff; font: 700 15px/1 var(--display); vertical-align: 1px; }
.ss-steps b { font-weight: 800; color: var(--ink); }
/* a tiny sketch of the SmartScreen box: two text lines and the thing to click */
.ss-win { display: grid; gap: 5px; padding: 10px 10px 9px; border-radius: 10px; background: #2F6FB5; }
.ss-win i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.ss-win i + i { width: 70%; }
.ss-win u, .ss-win em { justify-self: start; margin-top: 3px; font: 700 12px/1.2 var(--body); color: #fff; font-style: normal; white-space: nowrap; }
.ss-win u { text-decoration: underline; text-underline-offset: 2px; outline: 2px solid var(--butter); outline-offset: 2px; border-radius: 2px; }
.ss-win em { justify-self: end; padding: 3px 8px; border: 1.5px solid #fff; border-radius: 3px; outline: 2px solid var(--butter); outline-offset: 2px; }
.dl-help .fine { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #C9CFF0; padding: 56px var(--gut) calc(48px + env(safe-area-inset-bottom)); margin-top: clamp(64px, 9vw, 120px); }
.foot-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: center; }
.brand-foot { font-size: 36px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-self: end; }
.foot nav a { color: #fff; font: 600 17px var(--display); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot .fine { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; max-width: 60em; }
.foot :focus-visible { outline-color: var(--butter); }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); }
.lightbox::backdrop { background: rgba(27, 42, 107, .72); }
.lightbox img { border-radius: 18px; border: 4px solid #fff; max-height: 86vh; width: auto; }
.lb-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font: 700 26px/1 var(--display); cursor: pointer; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
}
@media (max-width: 900px) {
  .hero-copy { max-width: 640px; }
  .hero-side { grid-template-columns: 1fr; }
  .hero-lede { grid-row: auto; }
  .fobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: 1fr; }
  .shot-main { grid-row: auto; }
  .ways-list { grid-template-columns: 1fr; max-width: 560px; }
  .dl-panel { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot nav { justify-self: start; }
}
@media (max-width: 700px) {
  .banner img { aspect-ratio: 800 / 347; object-position: 50% 50%; }
}
@media (max-width: 560px) {
  :root { --gut: 16px; }
  body { font-size: 17px; }
  .brand { font-size: 22px; }
  .nav { gap: 10px; }
  .ctas .btn-lg { width: 100%; }
  .fobs { gap: 56px 14px; }
  .fob { padding: 44px 10px 18px; border-radius: 24px 24px 32px 32px; }
  .fobs .fob > img { border-radius: 16px; border-width: 4px; }
  .fobs p:last-child { font-size: 15px; }
  .fobs .alt-name { font-size: 14px; }
  .life-grid { grid-template-columns: 1fr; max-width: 480px; gap: 26px; }
  .life-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; align-items: start; }
  .life-item .frame { grid-row: span 2; aspect-ratio: 1; border-width: 4px; border-radius: 22px; box-shadow: 0 5px 0 var(--edge); }
  .life-item h3 { margin-top: 6px; font-size: 20px; gap: 8px; }
  .life-item h3 img { width: 32px; height: 32px; }
  .life-item p { margin-top: 2px; font-size: 15.5px; line-height: 1.5; }
  .dl-panel { border-radius: 36px; }
  .dl-help { padding: 22px 18px 22px; border-radius: 26px; }
  .ss-steps li { grid-template-columns: 96px 1fr; gap: 12px; font-size: 15px; }
  .way { padding: 22px 20px 24px; border-radius: 28px; }
}
@media (max-width: 420px) {
  .nav-play { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .btn:active { transform: none; }
}