:root {
  color-scheme: dark;
  --bg: #090a0c;
  --ink: #f5f5f7;
  --muted: #a2a4aa;
  --line: #26272c;
  --accent: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
button { font: inherit; }
p { margin: 0 0 1.2em; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(36px, 5vw, 60px); margin: 0 0 24px; }
h2 { font-size: 26px; margin: 0 0 15px; }
h3 { font-size: 20px; letter-spacing: -.02em; }
.site-header, .site-footer, .home { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.site-header { padding-block: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.brand { font-size: 20px; letter-spacing: -.04em; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.brand-icon { width: 24px; height: 24px; border-radius: 6px; }
.site-header nav { display: flex; gap: 24px; align-items: center; font-size: 12px; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.language { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.language > span { color: #74777e; }
.language a { color: var(--muted); min-width: 25px; justify-content: center; }
.skip { position: absolute; left: 20px; top: -100px; padding: 10px; background: var(--ink); color: var(--bg); z-index: 10; }
.skip:focus { top: 10px; }
.eyebrow { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 18px; }
.hero { padding: 48px 0 46px; text-align: center; }
.hero h1 { font-size: clamp(44px, 6.2vw, 76px); letter-spacing: -.06em; line-height: 1.04; margin: 0 0 22px; }
.intro { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 auto 25px; max-width: 460px; }
.store { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 1px solid #fff; border-radius: 999px; background: var(--ink); color: #111216; padding: 12px 25px; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.store svg { flex-shrink: 0; }
.store.pending { opacity: 1; cursor: default; }
.compatibility { font-size: 10px; color: #9b9da3; margin: 13px auto 0; max-width: 270px; }
.widget-display { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: center; gap: 11px; width: min(820px, 100%); margin: 44px auto 0; padding: 14px 0 0; position: relative; isolation: isolate; }
.widget-display::before { content: ""; position: absolute; z-index: -1; inset: -40px -10px 0; background: radial-gradient(ellipse at center, #ffffff08, transparent 68%); pointer-events: none; }
.widget { min-width: 0; margin: 0; --angle: 0deg; --lift: -10px; }
.widget-left { --angle: -5deg; --lift: 0px; }
.widget-right { --angle: 5deg; --lift: 0px; }
.widget-center { position: relative; z-index: 2; }
.widget-face { border-radius: 18%; overflow: hidden; box-shadow: 0 18px 35px #0005; transform: translateY(var(--lift)) rotate(var(--angle)); animation: none; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.widget-left .widget-face { animation-delay: .12s; }
.widget-right .widget-face { animation-delay: .24s; }
.widget img { aspect-ratio: 1; object-fit: contain; }
.widget figcaption { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; line-height: 1.4; margin-top: 20px; white-space: nowrap; color: #d1d2d6; }
.widget-center figcaption { margin-top: 10px; }
.widget figcaption span { color: #9b9da3; font-size: 9px; }
.preview-note { font-size: 10px; color: #9b9da3; margin: 27px 0 0; }
.details { padding: 48px 0; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 36px; }
.section-heading h2, .setup h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.12; letter-spacing: -.045em; }
.section-heading > p:last-child, .setup-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; max-width: 330px; }
.features { display: grid; gap: 30px; }
.features .eyebrow { margin-bottom: 10px; }
.features h3 { font-size: 22px; margin: 0 0 15px; }
.features p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin-bottom: 0; line-height: 1.75; max-width: 410px; }
.setup { background: linear-gradient(135deg, #17181d, #111216); border: 1px solid #25262d; border-radius: 26px; padding: 28px 24px; display: grid; gap: 30px; margin: 0 0 48px; }
.setup-copy .text-link { font-size: 12px; gap: 12px; }
.setup-steps { padding: 0; margin: 0; list-style: none; }
.setup-steps li { display: flex; gap: 17px; padding: 22px 0; border-top: 1px solid #2b2d34; }
.setup-steps li:last-child { padding-bottom: 0; }
.setup-steps li > span { color: #9599a3; font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 3px; }
.setup-steps h3 { margin: 0 0 5px; font-size: 17px; }
.setup-steps p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.support-call { border-top: 1px solid var(--line); padding: 32px 0; display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.support-call h2 { font-size: 26px; }
.support-call p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.text-link { display: inline-flex; align-items: center; gap: 30px; min-height: 44px; font-size: 13px; text-decoration: none; }
.text-link span { display: inline-block; transition: transform .3s; }
.site-footer { padding: 28px 0 22px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.site-footer p { font-size: 12px; margin: 6px 0; color: var(--muted); }
.fine, .site-footer .fine { font-size: 10px; color: #9b9da3; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 11px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: #c2c4cb; }
.document { width: min(730px, calc(100% - 40px)); margin: 55px auto 75px; min-height: 35vh; }
.document h1 { hyphens: auto; overflow-wrap: break-word; }
.updated { font-size: 12px; color: var(--muted); padding-bottom: 25px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.document article { font-size: 16px; line-height: 1.85; color: #c1c3c5; overflow-wrap: anywhere; hyphens: auto; }
.document article h2 { color: var(--ink); font-size: 25px; margin-top: 42px; line-height: 1.3; letter-spacing: -.025em; }
.document article h3 { color: var(--ink); font-size: 19px; margin-top: 28px; line-height: 1.4; }
.document li { padding-left: 4px; margin-bottom: 13px; }
.document ul, .document ol { padding-left: 23px; }
.document strong { color: var(--ink); font-weight: 600; }
.contact-link { font-size: clamp(18px, 4vw, 26px); color: var(--ink); }
/* Base entrance for browsers without scroll timelines. */
@keyframes settle {
  0% { transform: translateY(calc(var(--lift) + 14px)) rotate(calc(var(--angle) * .6)); }
  45% { transform: translateY(calc(var(--lift) - 5px)) rotate(var(--angle)); }
  100% { transform: translateY(var(--lift)) rotate(var(--angle)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .widget:hover .widget-face { animation: none; transform: translateY(-10px) rotate(0deg); }
  .store[href] { transition: transform .25s, background .25s; }
  .store[href]:hover { transform: translateY(-2px); color: #111216; background: #fff; }
  .text-link:hover span { transform: translate(2px, -2px); }
}
@media (min-width: 760px) {
  .site-header, .site-footer, .home { width: min(1040px, calc(100% - 100px)); }
  .site-header { padding-block: 16px; }
  .site-header nav { font-size: 13px; gap: 30px; }
  .hero { padding: 64px 0 64px; }
  .hero .eyebrow { font-size: 11px; }
  .intro { font-size: 16px; max-width: 500px; }
  .compatibility { max-width: none; font-size: 11px; }
  .widget-display { gap: 32px; margin-top: 56px; width: 720px; max-width: 90%; }
  .widget-center { --lift: -16px; }
  .widget figcaption { font-size: 12px; margin-top: 27px; flex-direction: row; gap: 10px; }
  .widget-center figcaption { margin-top: 11px; }
  .widget figcaption span { font-size: 10px; }
  .preview-note { margin-top: 26px; font-size: 11px; }
  .details { padding: 64px 0 56px; }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2 br { display: none; }
  .section-heading > p:last-child { max-width: none; }
  .features { grid-template-columns: repeat(3, 1fr); gap: 42px; }
  .setup { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 42px 48px; margin-bottom: 56px; border-radius: 30px; }
  .setup-steps li:first-child { border-top: 0; padding-top: 0; }
  .support-call { flex-direction: row; align-items: center; justify-content: space-between; padding: 36px 0; }
  .site-footer { grid-template-columns: 1fr 1.5fr; gap: 55px; padding: 30px 0; }
  .document { margin-top: 70px; }
}
@media (min-width: 1000px) { .hero h1 br { display: none; } }
@media (max-width: 360px) {
  .site-header, .site-footer, .home, .document { width: calc(100% - 32px); }
  .site-header nav { gap: 15px; }
  .hero h1 { font-size: 40px; }
  .intro { font-size: 13px; }
  .widget-display { gap: 8px; }
  .widget figcaption { font-size: 9px; }
  .setup { padding: 26px 20px; }
  .document h1 { font-size: 34px; }
}
/* Chrome edition: real native widget previews, transform-only motion. */
:root { --bg: #060606; --ink: #f5f5f5; --muted: #a8a8ad; --line: #242426; }
body { background: var(--bg); }
.site-header { border-bottom-color: #ffffff10; }
.brand-icon { border: 1px solid #ffffff24; }
.home { position: relative; }
.hero { position: relative; padding: 48px 0 56px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0 -16px 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 65% 32% at 50% 63%, #ffffff0a, transparent 100%); }
.hero .eyebrow { color: #c0c0c5; letter-spacing: .22em; font-size: 10px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(48px, 6.9vw, 88px); font-weight: 600; letter-spacing: -.065em; line-height: 1.04; margin-bottom: 22px; }
.hero h1 br { display: block; }
.silver-type { color: #d9d9de; background: linear-gradient(175deg, #fff 12%, #e0e0e5 38%, #96969e 78%, #d6d6dc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { animation: chrome-arrive .9s cubic-bezier(.16,1,.3,1) both; }
.intro { font-size: 14px; color: #a8a8ad; max-width: 480px; }
.store { min-height: 54px; padding: 13px 27px; border: 1px solid #f7f7f7; color: #18181b; background: linear-gradient(165deg, #fff 5%, #ececee 60%, #c4c4cb); box-shadow: 0 0 0 5px #ffffff04, 0 3px 25px #ffffff0e, inset 0 1px 0 #fff; }
.store.pending { color: #242427; }
.compatibility { color: #99999f; font-size: 11px; }
.widget-display { width: min(760px, 100%); gap: 14px; margin-top: 60px; padding: 14px 4px 0; }
.widget-display::before { inset: 0 8% 8%; background: radial-gradient(ellipse, #d5d5ea12, transparent 68%); }
.widget-display::after { content: ""; position: absolute; z-index: -1; bottom: 20px; left: 4%; right: 4%; height: 1px; background: linear-gradient(90deg, transparent, #ffffff32, transparent); box-shadow: 0 0 24px 4px #ffffff09; }
.widget { animation: chrome-arrive 1.2s cubic-bezier(.16,1,.3,1) both; }
.widget-left { --angle: -8deg; --lift: 8px; animation-delay: .12s; }
.widget-right { --angle: 8deg; --lift: 8px; animation-delay: .24s; }
.widget-center { --angle: 0deg; --lift: -14px; }
.widget-face { outline: 1px solid #ffffff19; outline-offset: -1px; box-shadow: 0 24px 40px #0009, 0 0 25px #ffffff06; animation: chrome-float 7s ease-in-out infinite; }
.widget-left .widget-face { animation-delay: -.8s; animation-duration: 8s; }
.widget-right .widget-face { animation-delay: -2.1s; animation-duration: 9s; }
.widget figcaption { margin-top: 32px; color: #e0e0e4; letter-spacing: .02em; font-size: 10px; }
.widget-center figcaption { margin-top: 10px; }
.widget figcaption span { font-size: 9px; color: #94949c; }
.preview-note { margin: 28px 0 0; color: #929298; }
.motion-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: #a8a8af; font-size: 10px; cursor: pointer; }
.motion-control input { accent-color: #d9d9df; width: 13px; height: 13px; margin: 0; }
.motion-control:focus-within { outline: 2px solid white; outline-offset: 2px; border-radius: 8px; }
body:has(#pause-motion:checked) .home *, body:has(#pause-motion:checked) .home *::before { animation: none !important; transition: none !important; }
.details { padding: 56px 0; border-top: 0; }
.section-heading { text-align: center; margin: 0 auto 36px; }
.section-heading h2 { font-size: clamp(34px, 4vw, 50px); font-weight: 500; }
.section-heading > p:last-child { margin-inline: auto; max-width: 410px; }
.features { gap: 12px; }
.features > div { padding: 28px; border: 1px solid #ffffff12; border-radius: 24px; background: linear-gradient(145deg, #ffffff08, #ffffff02); }
.features .eyebrow { color: #aaaab2; font-size: 10px; }
.features h3 { font-size: 22px; font-weight: 500; }
.features p:not(.eyebrow) { font-size: 13px; }
.setup { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg, #19191b, #0b0b0c 70%); border: 1px solid #ffffff19; border-radius: 28px; }
.setup::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; top: -300px; left: -150px; border-radius: 50%; background: #ffffff0b; box-shadow: 0 0 95px #ffffff14; pointer-events: none; }
.setup h2 { font-weight: 500; }
.setup-steps li { border-color: #ffffff16; }
.setup-steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #ffffff20; border-radius: 50%; padding: 0; color: #cacacf; }
.support-call { border-color: #ffffff15; }
.support-call h2 { font-weight: 500; }
.text-link { color: #e0e0e5; }
.site-footer { border-top-color: #ffffff15; }
@keyframes chrome-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chrome-float {
  0%, 100% { transform: translateY(var(--lift)) rotate(var(--angle)); }
  50% { transform: translateY(calc(var(--lift) - 8px)) rotate(calc(var(--angle) + 1deg)); }
}
@keyframes chrome-reveal { from { opacity: .85; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
/* Progressive enhancement: unsupported browsers keep every section fully visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .details, .setup, .support-call { animation: chrome-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .widget:hover .widget-face { animation-play-state: paused; }
  .features > div { transition: border-color .3s, transform .3s; }
  .features > div:hover { border-color: #ffffff30; transform: translateY(-3px); }
}
@media (min-width: 760px) {
  .hero { padding: 62px 0 54px; }
  .hero .eyebrow { font-size: 11px; }
  .intro { font-size: 16px; }
  .widget-display { width: 690px; max-width: 90%; gap: 32px; margin-top: 66px; }
  .widget figcaption { font-size: 12px; }
  .widget figcaption span { font-size: 10px; }
  .preview-note { margin-top: 30px; }
  .motion-control { font-size: 11px; }
  .details { padding: 68px 0; }
  .section-heading { margin-bottom: 42px; }
  .features { gap: 16px; }
  .features > div { padding: 30px 25px; }
  .setup { padding: 50px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 44px; }
  .widget-display { gap: 10px; }
  .widget figcaption { font-size: 9px; }
  .features > div { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-control { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  :root { color-scheme: light; }
  body { background: white; color: black; }
  .document article, .document article h2, .document article h3, .document strong, .updated, .eyebrow { color: black; }
  .site-header, .site-footer, .skip { display: none; }
  .document { width: 100%; margin: 0; }
  .document h1 { font-size: 32px; }
  .document article h2 { break-after: avoid; }
  a { color: black; }
}