/* NotchPixel site v2. Layout, type scale, spacing and colours follow the reference design measured
   at 1440 px (October 2026); values are the reference's own (Tailwind scale: 1 unit = 0.25rem). */

@font-face { font-family: Outfit; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/outfit-500.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/outfit-600.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/outfit-700.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/outfit-800.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic-latin.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); }

:root {
  --ink: #121212;
  --page: #f7f7f7;
  --black: #0d0d0d;
  --blue-900: #0a1f6e;
  --blue-700: #0d47b8;
  --blue-500: #1a7af0;
  --blue-300: #4eb3ff;
  --muted: rgba(0, 0, 0, .45);
  --glass: rgba(18, 20, 30, .62);                   /* the nav's frosted glass: dark enough for white text on the light page */
  --frost: blur(18px) saturate(170%);
  --display: Outfit, "Outfit Fallback", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@font-face { font-family: "Outfit Fallback"; src: local(Arial); ascent-override: 100.18%; descent-override: 26.05%; line-gap-override: 0%; size-adjust: 99.82%; }
@font-face { font-family: "Inter Fallback"; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
::selection { background: rgba(26, 122, 240, .3); color: #000; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.display { font-family: var(--display); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- the island nav: a notch of frosted glass hanging from the top edge ---------- */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.nav { --r: 28px; pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px; color: #fff;
       border-radius: 0 0 var(--r) var(--r); padding: 6px 6px 6px 12px; transition: transform .3s; }
/* the glass: one layer for the bar and its curves into the top edge, so there is no seam where they meet. It reaches
   20 px past the bar on each side and is cut to the notch: the bar with its rounded foot, and a quarter-circle hollow
   each side. Every mask layer adds its piece, and the pieces overlap where they meet (a shared edge would leave a
   faint line on a scaled screen). The curves are SVG, drawn at the screen's own resolution, so they stay smooth at
   any scaling */
.nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px; z-index: 0; pointer-events: none;
               background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
               --disc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");
               --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0H40V20H20A20 20 0 0 0 0 0Z'/%3E%3C/svg%3E") left top / 40px 20px no-repeat,
                       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0H40A20 20 0 0 0 20 20H0Z'/%3E%3C/svg%3E") right top / 40px 20px no-repeat,
                       linear-gradient(#000, #000) 20px 0 / calc(100% - 40px) calc(100% - var(--r) + 2px) no-repeat,
                       linear-gradient(#000, #000) 50% 100% / calc(100% - 40px - 2 * var(--r) + 4px) calc(var(--r) + 2px) no-repeat,
                       var(--disc) 20px 100% / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat,
                       var(--disc) calc(100% - 20px) 100% / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat;
               -webkit-mask: var(--mask); mask: var(--mask); }
.nav-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding-right: 4px; flex-shrink: 0; }
.nav-brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-brand span { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: -.025em; }
.nav-links { position: relative; z-index: 1; display: none; align-items: center; gap: 2px; padding: 0 4px; }
.nav-links a { border-radius: 9999px; padding: 6px 12px; font-size: 13px; line-height: 19.5px; color: rgba(255, 255, 255, .78); transition: color .15s; }
.nav-links a:hover { color: #fff; }
.nav-cta { position: relative; z-index: 1; display: none; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 9999px; background: #fff; color: #000;
           font-size: 13px; font-weight: 600; line-height: 19.5px; padding: 8px 16px 8px 14px; transition: background .15s; }
.nav-cta:hover { background: rgba(255, 255, 255, .9); }
.nav-cta svg { width: 14px; height: 14px; }
.nav-menu { position: relative; z-index: 1; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9999px; }
.nav-menu:hover { background: rgba(255, 255, 255, .1); }
.nav-sheet { position: fixed; top: 60px; left: 16px; right: 16px; z-index: 49; background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); color: #fff; border-radius: 24px; padding: 10px;
             box-shadow: 0 20px 50px rgba(0, 0, 0, .35); display: none; flex-direction: column; }
.nav-sheet.open { display: flex; }
.nav-sheet a { padding: 12px 14px; border-radius: 14px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.nav-sheet a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (min-width: 640px) {
  .nav { --r: 32px; gap: 8px; padding: 8px 8px 8px 14px; }
  .nav-brand { padding-right: 8px; }
  .nav-brand span { font-size: 15px; }
  .nav-cta { display: inline-flex; }
}
@media (min-width: 768px) { .nav-links { display: flex; } .nav-menu { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
/* a winter day: deep blue overhead, paler towards the snow; the snowy land comes up from below and fades into the page */
.hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1631c4 0%, #1d5ae6 14%, #2f86f5 30%, #5eb0fb 46%, #93cdfd 60%, #c7e5fe 76%, #eef6fd 90%, #f7f7f7 100%); }
.hero-land { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
             background: url(hero/snow-hills.webp) center 62% / cover no-repeat;
             -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 74%, transparent 100%); }
/* wide or sharp screens get the 3840 px copy of the photo; phones and laptops keep the lighter 2400 px one */
@media (min-width: 1700px), (min-width: 1100px) and (min-resolution: 1.5dppx) { .hero-land { background-image: url(hero/snow-hills-3840.webp); } }
/* falling snow, drawn on a canvas over the sky */
.snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: relative; max-width: 48rem; margin: 0 auto; padding: 112px 20px 0; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 500; letter-spacing: .025em; margin-bottom: 28px; }
.eyebrow svg { width: 14px; height: 14px; }
.hero-title { color: #fff; letter-spacing: -.4px; margin-bottom: 24px; font-weight: 400; }
.hero-title .a { display: block; font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1.05; }
.hero-title .b { display: block; font-family: var(--serif); font-style: italic; font-size: 48px; line-height: 1.05; margin-top: 4px; }
.hero-lead { font-size: 16px; line-height: 1.625; font-weight: 300; color: rgba(255, 255, 255, .85); max-width: 32rem; margin: 0 auto 40px; }
.hero-actions { margin: 0 auto 32px; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 330px; }
.btn-black { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; width: 100%; padding: 0 24px; border-radius: 9999px; background: var(--black);
             color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 16px 50px rgba(0, 0, 0, .35); transition: transform .3s, background .3s; }
.btn-black:hover { transform: scale(1.02); background: #000; }
.btn-black svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-black .was { color: rgba(255, 255, 255, .55); text-decoration: line-through; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; font-size: 12px; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(20, 60, 160, .35); margin-bottom: 40px; }
.hero-meta .dot { display: none; color: rgba(255, 255, 255, .6); }
@media (min-width: 640px) {
  .hero-copy { padding-left: 24px; padding-right: 24px; }
  .hero-title .a, .hero-title .b { font-size: 60px; }
  .hero-actions { max-width: none; width: auto; flex-direction: row; align-items: center; justify-content: center; }
  .btn-black { width: auto; padding: 0 36px; }
  .hero-meta .dot { display: inline; }
}
@media (min-width: 768px) {
  .hero-copy { padding-top: 144px; }
  .eyebrow { font-size: 14px; }
  .hero-title .a, .hero-title .b { font-size: 4.75rem; }
  .hero-lead { font-size: 18px; }
  .hero-meta { font-size: 13px; margin-bottom: 56px; }
}

/* the screen: a pane of frosted glass standing in the snow, the island hanging from its top edge and going through its cards */
.glass-wrap { position: relative; padding: 8px 12px 0; }
.glass-screen { position: relative; margin: 0 auto; max-width: 1000px; height: 250px; border-radius: 28px 28px 0 0; overflow: hidden;
                background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .12) 100%);
                -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 30px 80px rgba(20, 60, 140, .18);
                -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.gs-bar { position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 18px;
          color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(20, 60, 140, .3); }
.gs-bar .brand { display: inline-flex; align-items: center; gap: 7px; }
.gs-bar .brand img { width: 16px; height: 16px; border-radius: 5px; }
.gs-bar .status { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.gs-bar svg { width: 14px; height: 14px; }
.gs-island { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.gs-island > .fallback { display: block; width: min(600px, 62%); margin: 0 auto; }   /* without scripts: a still of the music card (island.js builds the live one) */
@media (min-width: 640px) { .glass-wrap { padding: 16px 24px 0; } .glass-screen { height: 440px; border-radius: 36px 36px 0 0; } .gs-bar { height: 46px; padding: 0 24px; font-size: 13px; } }
@media (min-width: 900px) { .glass-screen { height: 520px; } }
@media (max-width: 520px) { .gs-bar .brand span, .gs-bar .status svg { display: none; } }

/* ---------- section heads ---------- */
.h2 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.h2 .serif { font-weight: 400; }
.lead { font-size: 15px; line-height: 1.625; color: var(--muted); }
@media (min-width: 768px) { .h2 { font-size: 48px; line-height: 1; } .lead { font-size: 16px; } }

/* ---------- features: two columns of plain lines ---------- */
.features { position: relative; padding: 24px 20px 32px; scroll-margin-top: 96px; }
.features .head { max-width: 48rem; margin: 0 auto 40px; text-align: center; }
.features .head .h2 { margin-bottom: 12px; }
.features .head .lead { max-width: 36rem; margin: 0 auto; }
.flist { max-width: 48rem; margin: 0 auto; list-style: none; display: grid; grid-template-columns: 1fr; gap: 24px 40px; text-align: left; }
.flist h3 { font-weight: 500; font-size: 15px; line-height: 22.5px; color: var(--ink); margin-bottom: 4px; }
.flist p { font-size: 14px; line-height: 1.625; color: var(--muted); }
@media (min-width: 640px) { .features { padding-left: 24px; padding-right: 24px; } .flist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .features { padding-top: 40px; } }

/* ---------- the tour: pick a tool, watch it ---------- */
.tour { position: relative; overflow: hidden; padding: 64px 0; scroll-margin-top: 96px; }
.tour .inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 0 20px; }
.tour .head { max-width: 42rem; margin-bottom: 40px; }
.tour .head .h2 { margin-bottom: 16px; }
.tour-grid { display: grid; gap: 24px; align-items: start; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; text-align: left; border-radius: 9999px; padding: 8px 14px; background: #fff; color: rgba(0, 0, 0, .5); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); transition: background .15s, color .15s; }
.tab:hover { color: var(--ink); background: #eee; }
.tab[aria-selected="true"] { background: var(--black); color: #fff; box-shadow: none; }
.tab .num { display: none; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .5; margin-right: 8px; }
.tab .name { font-size: 13px; font-weight: 500; }
.stage { position: relative; overflow: hidden; border-radius: 22px; background: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 20px 50px rgba(0, 20, 50, .12); }
.stage .frame { position: relative; aspect-ratio: 16 / 10; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.stage video.on { opacity: 1; }
.stage-foot { margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 4px; }
.stage-foot h3 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.025em; color: var(--ink); }
.stage-foot p { margin-top: 4px; max-width: 28rem; font-size: 13px; line-height: 1.625; color: var(--muted); }
.stage-foot .copy { min-width: 0; transition: opacity .35s, transform .35s; }
.stage-foot .copy.swap { opacity: 0; transform: translateY(8px); }
.arrows { display: flex; flex-shrink: 0; gap: 8px; }
.arrow { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; color: var(--ink); transition: background .15s; }
.arrow:hover { background: #eee; }
.arrow svg { width: 16px; height: 16px; }
@media (min-width: 640px) {
  .tour .inner { padding: 0 24px; }
  .tabs { margin: 0; padding-left: 0; padding-right: 0; }
  .stage .frame { aspect-ratio: 2 / 1; }
  .stage-foot { margin-top: 24px; }
  .stage-foot h3 { font-size: 20px; }
  .stage-foot p { font-size: 14px; }
}
@media (min-width: 768px) { .tour { padding: 112px 0; } .tour .head { margin-bottom: 56px; } .stage { border-radius: 28px; } .stage-foot h3 { font-size: 24px; } }
@media (min-width: 1024px) {
  .tour-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding-bottom: 0; }   /* sixteen tools: two columns keep the list beside the stage */
  .tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab { border-radius: 16px; padding: 10px 12px; }
  .tab .num { display: inline; }
}

/* ---------- pricing: what it would cost bought one by one ---------- */
.pricing { padding: 64px 20px; scroll-margin-top: 96px; }
.pricing .head { max-width: 48rem; margin: 0 auto 48px; text-align: center; }
.pricing .head .h2 { font-size: 36px; margin-bottom: 16px; }
.pricing .head .lead { max-width: 36rem; margin: 0 auto; font-size: 15px; }
.table-wrap { max-width: 48rem; margin: 0 auto; overflow-x: auto; }
.ptable { width: 100%; min-width: 560px; text-align: left; border-collapse: collapse; }
.ptable th { padding-bottom: 16px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: rgba(0, 0, 0, .35); }
.ptable th.us { color: var(--ink); }
.ptable thead tr { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.ptable tbody { font-size: 14px; }
.ptable td { padding: 14px 12px; }
.ptable td:first-child, .ptable th:first-child { padding-left: 0; padding-right: 16px; }
.ptable td:last-child, .ptable th:last-child { padding-right: 0; padding-left: 12px; text-align: right; }
.ptable th:nth-child(2), .ptable td:nth-child(2) { padding: 0 12px 16px; }
.ptable td:nth-child(2) { padding: 14px 12px; color: var(--muted); }
.ptable th:nth-child(3), .ptable td:nth-child(3) { text-align: right; }
.ptable td:nth-child(3) { color: rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; }
.ptable tbody tr { border-bottom: 1px solid rgba(0, 0, 0, .06); }
.ptable td.feat, .ptable td.inc { font-weight: 500; color: var(--ink); }
.ptable tr.sum { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.ptable tr.sum td { padding-top: 16px; padding-bottom: 16px; font-weight: 600; color: var(--ink); }
.ptable tr.sum td.total { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.ptable tr.sum td.dash, .ptable tr.us td.dash { color: rgba(0, 0, 0, .3); font-weight: 400; text-decoration: none; }
.ptable tr.us { border-bottom: 0; }
.ptable tr.us td { padding-top: 20px; padding-bottom: 0; vertical-align: top; }
.ptable tr.us .name { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); }
.ptable tr.us .sub { display: block; font-size: 13px; color: rgba(0, 0, 0, .4); margin-top: 2px; }
.ptable .price-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ptable .price { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.ptable .pill { margin-top: 4px; display: inline-flex; border-radius: 9999px; background: rgba(13, 71, 184, .1); padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: .025em; color: var(--blue-700); }
.ptable .once { display: block; font-size: 12px; color: rgba(0, 0, 0, .35); margin-top: 2px; }
.fine { margin-top: 16px; font-size: 12px; line-height: 1.625; color: rgba(0, 0, 0, .3); }
.buy { max-width: 28rem; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.buy a { display: block; width: 100%; text-align: center; background: var(--black); color: #fff; font-weight: 600; font-size: 14px; border-radius: 9999px; padding: 14px 24px; transition: background .15s; }
.buy a:hover { background: #000; }
.buy p { text-align: center; font-size: 12px; color: rgba(0, 0, 0, .35); margin-top: 4px; }
@media (min-width: 640px) { .pricing { padding-left: 24px; padding-right: 24px; } .ptable tbody { font-size: 15px; } }
@media (min-width: 768px) {
  .pricing { padding-top: 96px; padding-bottom: 96px; }
  .pricing .head { margin-bottom: 56px; }
  .pricing .head .h2 { font-size: 48px; }
  .ptable tr.us .name { font-size: 20px; }
  .ptable .price { font-size: 36px; }
  .buy { margin-top: 48px; }
}

/* ---------- giveaway and partners: two pieces of the hero's night sky on the light page ---------- */
.band { padding: 0 20px 64px; }
.giveaway { scroll-margin-top: 96px; }
.gcard, .pcard { position: relative; isolation: isolate; overflow: hidden; color: #fff;
                background: radial-gradient(70% 60% at 50% 0%, rgba(120, 140, 240, .22) 0%, rgba(120, 140, 240, 0) 70%),
                            linear-gradient(180deg, #050816 0%, #0a1230 45%, #17255a 100%); }
/* stars: two tiles of tiny dots at odd sizes, so the pattern never lines up; they breathe slowly */
.gcard::before, .gcard::after, .pcard::before, .pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; animation: twinkle-field 6s ease-in-out infinite; }
.gcard::before, .pcard::before {
  background-image: radial-gradient(1.2px 1.2px at 23px 41px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 157px 13px, #fff 50%, transparent 51%),
                    radial-gradient(1.6px 1.6px at 271px 97px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 89px 181px, #fff 50%, transparent 51%),
                    radial-gradient(1.3px 1.3px at 211px 223px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 331px 157px, #fff 50%, transparent 51%);
  background-size: 353px 257px; }
.gcard::after, .pcard::after {
  background-image: radial-gradient(1px 1px at 61px 77px, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 193px 149px, #fff 50%, transparent 51%),
                    radial-gradient(1px 1px at 127px 263px, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 401px 31px, #dfe8ff 50%, transparent 51%);
  background-size: 457px 311px; animation-delay: -3s; }
@keyframes twinkle-field { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.gcard { max-width: 48rem; margin: 0 auto; border-radius: 32px; padding: 56px 32px; text-align: center; }
.kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.gcard .h2 { color: #fff; font-size: 30px; margin-bottom: 14px; }
.gcard .lead { color: rgba(255, 255, 255, .8); max-width: 26rem; margin: 0 auto; }
.clock { margin: 32px auto 0; display: inline-flex; align-items: flex-start; gap: 8px; padding: 14px 16px 12px; max-width: 100%; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.clock .cell { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
@media (min-width: 640px) { .clock { gap: 18px; padding: 16px 32px 14px; } .clock .cell { min-width: 44px; } }
.clock .n { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.clock .u { margin-top: 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.clock .sep { font-size: 18px; color: rgba(255, 255, 255, .35); padding-top: 4px; }
.gform { max-width: 28rem; margin: 28px auto 0; display: flex; flex-direction: column; gap: 12px; }
.gform input[type=email] { width: 100%; height: 52px; border-radius: 9999px; padding: 0 20px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); outline: none; }
.gform input[type=email]::placeholder { color: rgba(255, 255, 255, .5); }
.gform input[type=email]:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.gform button { height: 50px; border-radius: 9999px; background: #fff; color: var(--blue-700); font-weight: 600; font-size: 15px; transition: background .15s; }
.gform button:hover { background: rgba(255, 255, 255, .9); }
.gform button:disabled, .gform input:disabled { opacity: .6; cursor: default; }
.gnote { margin-top: 16px; font-size: 11px; color: rgba(255, 255, 255, .55); }
.gcheck { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .78); padding: 0 6px; cursor: pointer; }
.gcheck input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: #fff; box-shadow: none; }
.gcheck a { text-decoration: underline; color: #fff; }
.gnote a { text-decoration: underline; }
.pcard { max-width: 56rem; margin: 0 auto; border-radius: 32px; padding: 32px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.pcard .row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; }
.pcard .copy { flex: 1; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .9);
         padding: 4px 12px; border-radius: 9999px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.badge svg { width: 12px; height: 12px; }
.pcard .h2 { color: #fff; font-size: 30px; margin-bottom: 12px; }
.pcard .h2 .serif { color: rgba(255, 255, 255, .8); }
.pcard p { color: rgba(255, 255, 255, .7); font-weight: 300; line-height: 1.625; max-width: 32rem; }
.btn-white { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #fff; color: #000; font-weight: 600; font-size: 15px;
             border-radius: 9999px; padding: 14px 28px; transition: background .15s; }
.btn-white:hover { background: rgba(255, 255, 255, .9); }
.btn-white svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .band { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) {
  .band { padding-bottom: 96px; }
  .gcard { padding: 56px 48px; }
  .gcard .h2 { font-size: 36px; }
  .pcard { padding: 48px; }
  .pcard .row { flex-direction: row; }
  .pcard .copy { text-align: left; }
  .pcard .h2 { font-size: 36px; }
  .btn-white { width: auto; }
}

/* ---------- roadmap ---------- */
.roadmap { padding: 0 20px 64px; }
.rcard { max-width: 48rem; margin: 0 auto; border-radius: 32px; border: 1px solid rgba(0, 0, 0, .06); background: #fff; padding: 32px; }
.rcard .head { margin-bottom: 32px; text-align: center; }
.rcard .h2 { font-size: 30px; margin-bottom: 12px; }
.rcard .head p { color: var(--muted); font-weight: 300; font-size: 16px; }
.rlist { display: flex; flex-direction: column; gap: 12px; }
.ritem { display: flex; align-items: center; gap: 20px; width: 100%; padding: 16px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .05); background: #fafafa; text-align: left;
         transition: background .3s, border-color .3s, box-shadow .3s; }
.ritem:hover { background: #fff; border-color: rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.vote { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 56px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .08); background: #fff;
        color: rgba(0, 0, 0, .35); transition: all .3s; }
.ritem:hover .vote { border-color: rgba(0, 0, 0, .2); color: rgba(0, 0, 0, .7); }
.ritem.voted .vote { background: rgba(26, 122, 240, .15); border-color: rgba(26, 122, 240, .35); color: var(--blue-700); }
.vote svg { width: 16px; height: 16px; margin-bottom: 2px; }
.vote span { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.ritem h4 { font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.ritem p { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.43; }
.rfoot { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, .06); text-align: center; }
.rfoot p { color: rgba(0, 0, 0, .5); font-weight: 300; margin-bottom: 16px; }
.btn-ink { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 500; border-radius: 9999px; padding: 12px 24px; transition: background .15s; }
.btn-ink:hover { background: #000; }
@media (min-width: 640px) { .roadmap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .roadmap { padding-bottom: 96px; } .rcard { padding: 48px; } .rcard .head { text-align: left; } .ritem { padding: 20px; } }

/* ---------- FAQ ---------- */
.faq { padding: 0 20px 64px; scroll-margin-top: 96px; }
.faq .inner { max-width: 48rem; margin: 0 auto; }
.faq .head { text-align: center; margin-bottom: 40px; }
.faq .h2 { font-size: 30px; margin-bottom: 12px; }
.faq .head p { font-size: 15px; line-height: 1.625; color: var(--muted); max-width: 32rem; margin: 0 auto; }
.qa { border-radius: 28px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; overflow: hidden; }
.qa > div + div { border-top: 1px solid rgba(0, 0, 0, .08); }
.qa button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; text-align: left; transition: background .15s; }
.qa button:hover { background: rgba(0, 0, 0, .02); }
.qa button span { font-weight: 500; font-size: 15px; color: var(--ink); }
.qa button svg { flex-shrink: 0; width: 16px; height: 16px; color: rgba(0, 0, 0, .35); transition: transform .3s; }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease-out; }
.qa .ans > div { overflow: hidden; }
.qa .ans p { padding: 0 24px 20px; font-size: 15px; line-height: 1.625; color: rgba(0, 0, 0, .5); }
.qa .ans a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.qa .open .ans { grid-template-rows: 1fr; }
.qa .open button svg { transform: rotate(180deg); }
@media (min-width: 640px) { .faq { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .faq { padding-bottom: 96px; } .faq .h2 { font-size: 36px; } .qa button { padding: 20px 32px; } .qa button span { font-size: 16px; } .qa .ans p { padding: 0 32px 20px; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid rgba(0, 0, 0, .08); padding: 32px 20px 96px; text-align: center; }
.foot .brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.foot .brand img { width: 36px; height: 36px; }
.foot .brand span { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 14px; color: rgba(0, 0, 0, .4); margin-bottom: 16px; }
.foot nav a:hover { color: var(--ink); }
.foot .featured { margin: 20px 0 4px; }
.foot .featured img { display: inline-block; height: 40px; width: auto; opacity: .85; }
.foot .featured a:hover img { opacity: 1; }
.foot small { display: block; margin-top: 8px; font-size: 12px; color: rgba(0, 0, 0, .3); }

/* ---------- the other pages: their own content on the same light page, under the nav ---------- */
main.subpage { padding-top: 120px; margin-left: auto; margin-right: auto; }
.subpage h1, .subpage h2, .subpage h3 { font-family: var(--display); }
.subpage h1 { font-weight: 700; letter-spacing: -.03em; }
.subpage h2 { font-weight: 600; }
/* a page's own link colours stop at its main: the nav and the footer keep theirs */
.nav a, .nav-sheet a, .foot a { text-decoration: none; }
.nav-brand, .foot .brand, .foot nav a { color: inherit; }

/* entrance: rise into place once */
[data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
[data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gcard::before, .gcard::after, .pcard::before, .pcard::after { animation: none; }
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .btn-black:hover { transform: none; }
}

/* ---------- awards: round badges under the hero; the ring of words turns slowly, the badge lifts on hover ---------- */
.awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 40px 20px 8px; }
.award { position: relative; width: 112px; height: 112px; border-radius: 9999px; background: #ededed; color: #121212; display: grid; place-items: center;
         transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .3s, box-shadow .3s; }
.award:hover, .award:focus-visible { transform: translateY(-4px) scale(1.04); background: #fff; box-shadow: 0 14px 30px rgba(0, 20, 50, .12); }
.award .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: award-turn 26s linear infinite; }
.award:nth-child(2) .ring { animation-duration: 30s; animation-direction: reverse; }
.award:nth-child(3) .ring { animation-duration: 34s; }
.award .ring text { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .02em; fill: currentColor; text-transform: uppercase; }
.award .centre { position: relative; display: grid; place-items: center; line-height: 1; }
.award .centre svg { display: block; }
.award .num { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
/* the stars fill to the rating: 4.7 of 5 lights 94% of the row */
.award .stars { margin-top: 3px; font-size: 8px; letter-spacing: 1px; color: transparent; background: linear-gradient(90deg, #f5a623 var(--fill, 100%), #cfcfcf var(--fill, 100%)); -webkit-background-clip: text; background-clip: text; }
@keyframes award-turn { to { transform: rotate(360deg); } }
@media (min-width: 640px) { .awards { gap: 20px; padding-top: 56px; } .award { width: 124px; height: 124px; } }
@media (prefers-reduced-motion: reduce) { .award .ring { animation: none; } .award:hover { transform: none; } }

/* ---------- the film: the two-minute cut, after the tour; a glass play button until it starts ---------- */
.film { padding: 24px 0 64px; scroll-margin-top: 96px; }
.film .inner { max-width: 72rem; margin: 0 auto; padding: 0 20px; }
.film .head { max-width: 42rem; margin: 0 auto 32px; text-align: center; }
.film .head .h2 { margin-bottom: 16px; }
.film .head .lead { margin: 0 auto; }
.film-stage { position: relative; overflow: hidden; border-radius: 22px; background: #f1f0ee; aspect-ratio: 16 / 9;
              box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 20, 50, .14); }
.film-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 12px; padding: 18px;
             background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(10, 12, 20, .14)); color: #121212; cursor: pointer; transition: opacity .35s; }
.film-play .disc { width: 56px; height: 56px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255, 255, 255, .72);
                   -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
                   box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset, 0 12px 30px rgba(0, 20, 50, .2); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.film-play .disc svg { width: 22px; height: 22px; fill: #121212; margin-left: 3px; }
.film-play .label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 7px 14px; border-radius: 9999px; background: rgba(18, 20, 30, .62); color: #fff;
                    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; font-weight: 600; }
.film-play .len { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; opacity: .7; }
.film-play:hover .disc, .film-play:focus-visible .disc { transform: scale(1.08); }
.film-stage.playing .film-play { opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .film { padding-bottom: 96px; } .film-stage { border-radius: 28px; } .film-play { padding: 28px; } .film-play .disc { width: 68px; height: 68px; } .film-play .label { margin-bottom: 17px; } }
@media (max-width: 639px) { .film-play { padding: 10px; gap: 8px; } .film-play .disc { width: 40px; height: 40px; } .film-play .disc svg { width: 16px; height: 16px; margin-left: 2px; }
  .film-play .label { margin-bottom: 7px; padding: 5px 10px; font-size: 11px; } .film-stage { border-radius: 16px; } }

/* the feature idea box at the foot of the roadmap */
#ideaform textarea, #ideaform input { width: 100%; border-radius: 16px; padding: 12px 16px; background: #fff; color: var(--ink); font: inherit; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); outline: none; resize: vertical; }
#ideaform textarea:focus, #ideaform input:focus { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
#ideaform textarea { max-width: 36rem; margin: 16px auto 12px; display: block; }
#ideaform .idea-row { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
#ideaform .idea-row input { border-radius: 9999px; height: 44px; padding: 0 18px; }
#ideaform .idea-row button { flex-shrink: 0; }
#ideaform .idea-note { min-height: 20px; margin-top: 10px; font-size: 13px; color: rgba(0, 0, 0, .55); }
@media (min-width: 640px) { #ideaform .idea-row { flex-direction: row; } }

/* /giveaway: the official rules, numbered */
.rules .rule-list { list-style: none; counter-reset: rule; margin-top: 8px; }
.rules .rule-list li { counter-increment: rule; padding: 18px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.rules .rule-list h2 { font-size: 17px; margin-bottom: 6px; }
.rules .rule-list h2::before { content: counter(rule) ". "; color: rgba(0, 0, 0, .35); }
.rules .rule-list p { font-size: 15px; }

/* language picker: the footer of every page, each language in its own words */
.foot nav.langs { gap: 4px 14px; font-size: 13px; max-width: 46rem; margin: 20px auto 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .06); color: rgba(0, 0, 0, .38); }
.foot nav.langs a[aria-current] { color: var(--ink); font-weight: 600; }

/* other scripts: the Latin font files carry no Cyrillic, Greek, Arabic, Devanagari, Thai or CJK; the browser falls back glyph by glyph,
   and these stacks pick the system face made for each language. Italic serif accents turn upright where italics do not exist. */
:lang(ja) { --display: Outfit, "Yu Gothic UI", "Meiryo UI", "Hiragino Sans", system-ui, sans-serif; --sans: Inter, "Yu Gothic UI", "Meiryo UI", "Hiragino Sans", system-ui, sans-serif; }
:lang(ko) { --display: Outfit, "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; --sans: Inter, "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
:lang(zh-Hans) { --display: Outfit, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; --sans: Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
:lang(zh-Hant) { --display: Outfit, "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif; --sans: Inter, "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif; }
:lang(th) { --display: Outfit, "Leelawadee UI", "Segoe UI", system-ui, sans-serif; --sans: Inter, "Leelawadee UI", "Segoe UI", system-ui, sans-serif; }
:lang(hi) { --display: Outfit, "Nirmala UI", "Segoe UI", system-ui, sans-serif; --sans: Inter, "Nirmala UI", "Segoe UI", system-ui, sans-serif; }
:lang(ar) { --display: Outfit, "Segoe UI", Tahoma, system-ui, sans-serif; --sans: Inter, "Segoe UI", Tahoma, system-ui, sans-serif; }
:lang(ja) .serif, :lang(ko) .serif, :lang(zh-Hans) .serif, :lang(zh-Hant) .serif, :lang(th) .serif, :lang(hi) .serif, :lang(ar) .serif,
:lang(ja) .hero-title .b, :lang(ko) .hero-title .b, :lang(zh-Hans) .hero-title .b, :lang(zh-Hant) .hero-title .b, :lang(th) .hero-title .b, :lang(hi) .hero-title .b, :lang(ar) .hero-title .b
  { font-family: var(--display); font-style: normal; font-weight: 600; }
/* joined scripts break when letters are spaced; tall marks need room */
:lang(ar) *, :lang(hi) *, :lang(th) * { letter-spacing: 0 !important; }
:lang(ar) .h2, :lang(hi) .h2, :lang(th) .h2, :lang(ar) .hero-title span, :lang(hi) .hero-title span, :lang(th) .hero-title span { line-height: 1.4; }
:lang(ja) .h2, :lang(ko) .h2, :lang(zh-Hans) .h2, :lang(zh-Hant) .h2, :lang(ja) .hero-title span, :lang(ko) .hero-title span, :lang(zh-Hans) .hero-title span, :lang(zh-Hant) .hero-title span { line-height: 1.3; }

/* right-to-left (Arabic): text and the few left-aligned blocks turn around; the nav keeps its order */
[dir="rtl"] .flist, [dir="rtl"] .tab, [dir="rtl"] .gcheck, [dir="rtl"] .ritem, [dir="rtl"] .qa button, [dir="rtl"] .pcard .copy,
[dir="rtl"] .rcard .head, [dir="rtl"] .ptable { text-align: right; }
[dir="rtl"] .ptable td:last-child, [dir="rtl"] .ptable th:last-child, [dir="rtl"] .ptable th:nth-child(3), [dir="rtl"] .ptable td:nth-child(3) { text-align: left; }
[dir="rtl"] .ptable td:first-child, [dir="rtl"] .ptable th:first-child { padding-left: 16px; padding-right: 0; }
[dir="rtl"] .ptable td:last-child, [dir="rtl"] .ptable th:last-child { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .nav-brand { padding-right: 0; padding-left: 4px; }
[dir="rtl"] .film-play .disc svg { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .vote, [dir="rtl"] .arrows { direction: ltr; }

/* Japanese, Chinese and Korean headlines: set smaller than Latin and balanced, so a phrase never breaks with one character alone */
:lang(ja) .hero-title .a, :lang(ja) .hero-title .b, :lang(zh-Hans) .hero-title .a, :lang(zh-Hans) .hero-title .b,
:lang(zh-Hant) .hero-title .a, :lang(zh-Hant) .hero-title .b, :lang(ko) .hero-title .a, :lang(ko) .hero-title .b { font-size: clamp(34px, 5.2vw, 3.6rem); line-height: 1.2; text-wrap: balance; }
:lang(ko) .hero-title, :lang(ko) .h2 { word-break: keep-all; }
:lang(ja) .h2, :lang(zh-Hans) .h2, :lang(zh-Hant) .h2, :lang(ko) .h2 { text-wrap: balance; }

/* the globe in the nav: a short language code that opens every language in a small glass menu */
.nav-lang { position: relative; z-index: 2; flex-shrink: 0; }
.nav-lang summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: 9999px; cursor: pointer;
                    color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 600; letter-spacing: .04em; transition: color .15s, background .15s; }
.nav-lang summary::-webkit-details-marker { display: none; }
.nav-lang summary:hover, .nav-lang[open] summary { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-lang summary svg { width: 15px; height: 15px; }
.nav-lang .lang-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
                       padding: 8px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
                       box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 10, 40, .3); }
.nav-lang .lang-menu a { padding: 8px 10px; border-radius: 10px; font-size: 13px; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-lang .lang-menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-lang .lang-menu a[aria-current] { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .14); }
[dir=rtl] .nav-lang .lang-menu { right: auto; left: 0; }
@media (max-width: 639px) { .nav-lang .lang-menu { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; max-width: none; } [dir=rtl] .nav-lang .lang-menu { left: 16px; } .nav-lang summary { padding: 0 8px; } }