/* Landing page motion kit styles. Pages set --cur (cursor ink), --cur-on (label text), --rail, --rail-on, --hint-bg and --rail-bg. */
.fx-has-cursor, .fx-has-cursor * { cursor: none !important; }
.fx-dot, .fx-ring, .fx-hint { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; will-change: transform; }
.fx-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cur); transition: opacity .2s; }
.fx-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; }
.fx-ring::before { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--cur); transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .3s, border-color .3s; }
.fx-ring.is-link::before { transform: scale(1.6); background: color-mix(in srgb, var(--cur) 12%, transparent); }
.fx-ring.is-label::before { transform: scale(2.4); background: var(--cur); }
.fx-ring.is-down::before { transform: scale(.8); }
.fx-ring.is-hide::before { transform: scale(0); }
.fx-label { position: relative; font: 600 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--cur-on); white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.fx-ring.is-label .fx-label { opacity: 1; transform: scale(1); }
.fx-hint { font: 500 12px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--cur); background: var(--hint-bg, transparent); padding: 6px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .35s; }
.fx-hint.is-on { opacity: .9; }
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-wi { display: inline-block; will-change: transform; }
.fx-rail { position: fixed; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; font: 500 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--rail); }
.fx-rail-now { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: var(--rail-bg, color-mix(in srgb, var(--rail) 8%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fx-rail-now b { color: var(--rail-on); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-rail-bar { width: 64px; height: 2px; background: color-mix(in srgb, var(--rail) 22%, transparent); border-radius: 2px; position: relative; overflow: hidden; }
.fx-rail-bar span { position: absolute; inset: 0; background: var(--rail-on); transform-origin: left; transform: scaleX(0); }
.fx-rail ol { list-style: none; margin: 0 0 8px; padding: 12px 14px; display: grid; gap: 10px; border-radius: 14px; background: var(--rail-bg, color-mix(in srgb, var(--rail) 8%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.fx-rail:hover ol, .fx-rail:focus-within ol { opacity: 1; transform: none; pointer-events: auto; }
.fx-rail a { color: var(--rail); text-decoration: none; opacity: .6; transition: opacity .3s, color .3s; }
.fx-rail a.is-on, .fx-rail a:hover { opacity: 1; color: var(--rail-on); }
@media (max-width: 700px), (pointer: coarse) { .fx-rail { display: none; } }
#fx-intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; }
:focus-visible { outline: 2px solid var(--cur); outline-offset: 3px; }
html, body { overflow-x: clip; }