:root{--w:#f4f4f2;--dim:rgba(255,255,255,.7);--line:rgba(255,255,255,.18);--glass:rgba(255,255,255,.035)}

/* deck */
.xf{position:relative;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:18px;padding:16px 22px 14px}
.xf::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(115deg,rgba(255,255,255,0) 15%,rgba(255,255,255,var(--sheen,0)) 40%,rgba(205,205,210,calc(var(--sheen,0)*.5)) 55%,rgba(255,255,255,0) 78%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.now{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;min-height:22px}
.now .lbl{font-family:"Liberation Mono",monospace;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.55);text-transform:uppercase}
.now .sel{font-size:15px;font-weight:700;letter-spacing:.02em}
.now .sel span{font-weight:400;color:var(--dim);margin-left:8px;font-size:13px}
.now .go{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--w);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.now .go:focus-visible,.stop:focus-visible{outline:2px solid #fff;outline-offset:3px}
.xf .stops{padding:0;margin:0}
.stops{display:grid;grid-template-columns:repeat(8,1fr);list-style:none}
.stop{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px;text-align:center;color:var(--w);text-decoration:none;border-radius:10px;opacity:.62;transition:opacity .25s}
.stop img{width:26px;height:26px;object-fit:contain;transition:filter .25s}
.stop b{font-size:12px}
.stop.on{opacity:1}
.stop.on img{filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}
.xf{-webkit-user-select:none;user-select:none}
.stop img{-webkit-user-drag:none}
.rail{position:relative;height:46px;margin-top:10px;touch-action:none;cursor:grab}
.rail.grab{cursor:grabbing}
.groove{position:absolute;left:6.25%;right:6.25%;top:50%;height:6px;margin-top:-3px;border-radius:4px;background:#030303;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 4px #000}
.det{position:absolute;top:6px;width:1px;height:9px;background:rgba(255,255,255,.32)}
.det.b{top:auto;bottom:6px}
.cap{position:absolute;top:50%;left:0;width:54px;height:32px;margin:-16px 0 0 -27px;border-radius:6px;background:linear-gradient(180deg,#2e2e30,#0a0a0b);border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.22);will-change:transform;cursor:grab}
.cap::after{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:2px;margin-left:-1px;background:#fff;border-radius:1px}
.cap::before{content:"";position:absolute;inset:3px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px)}
.cap:focus-visible{outline:2px solid #fff;outline-offset:4px}
.scale{display:flex;justify-content:space-between;padding:0 6.25%;margin-top:2px;font-family:"Liberation Mono",monospace;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* phone: vertical rail beside a list, thumb-friendly */

.xf-card{display:none}
@media (max-width:700px){
.stops{grid-template-columns:repeat(8,1fr)}
.stop{padding:4px 0;gap:0}.stop b{display:none}.stop img{width:22px;height:22px}
.scale{display:none}

.xf-card{display:block;position:relative;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;height:150px;min-height:150px;flex:none;margin-bottom:10px;overflow:hidden;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}
.xf-card .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;will-change:transform,opacity}
.xf-card .lbl{font-family:"Liberation Mono",monospace;font-size:10px;letter-spacing:.26em;color:rgba(255,255,255,.55)}
.xf-card img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,255,255,.18))}
.xf-card .nm{font-size:24px;font-weight:700}
.xf-card .tg{font-size:13px;color:var(--dim)}
.xf-card .in{bottom:28px}
.xf-card .tap{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.5);text-transform:uppercase}
.xf-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(115deg,rgba(255,255,255,0) 15%,rgba(255,255,255,var(--sheen,0)) 40%,rgba(255,255,255,0) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.xf{padding:10px 12px 8px}.now{display:none}
.rail{height:64px;margin-top:4px}.cap{width:62px;height:40px;margin:-20px 0 0 -31px;top:50%}

}
.xf,.xf-card{pointer-events:auto}
@media (max-width:700px){
 .page{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 main{margin-top:auto!important;flex:0 0 auto!important}
 .xf-card{margin-bottom:8px}
 .xf-card .in{gap:4px;bottom:22px}
 .xf-card .lbl{font-size:9px}
 .xf-card img{width:44px;height:44px}
 .xf-card .nm{font-size:19px}
 .xf-card .tg{font-size:12px}
 .xf-card .tap{bottom:8px;font-size:9px;transition:opacity .6s ease}
 .xf-card.used .tap{opacity:0}
 .xf{padding:8px 12px 2px}
 .rail{height:50px}
 .det.b{display:none}
 footer{padding-top:8px;flex-wrap:nowrap;justify-content:center;column-gap:10px;white-space:nowrap}
 footer p{font-size:8px}
 footer p span{display:inline!important}
 footer p.legal{font-size:8px;margin:0}
 footer .legal a,footer .legal .cookie-settings{padding:4px 0}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.xf-card .tap{transition:none}}

/* v26: smoked frosted glass deck: heavy blur, dark tint, soft white sheen, fine grain, feathered edge. Never gold. */
.xf,.xf-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E") 0 0/160px 160px,linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 60%),rgba(10,10,12,.6);
  -webkit-backdrop-filter:blur(36px) saturate(1.05) brightness(1.06);backdrop-filter:blur(36px) saturate(1.05) brightness(1.06);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03),0 0 28px 6px rgba(10,10,12,.35),0 24px 60px -30px #000}