.preview-rail{padding:8px var(--gutter) 24px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;gap:16px;display:flex;overflow-x:auto}.preview-rail::-webkit-scrollbar{display:none}.preview{scroll-snap-align:start;flex:none;gap:14px;width:248px;margin:0;display:grid}.preview figcaption{gap:2px;padding:0 6px;display:grid}.preview figcaption strong{font-size:16px;font-weight:800}.preview figcaption span{color:var(--ink-muted);font-size:14px;line-height:1.45}.phone{background:var(--ink);box-shadow:var(--shadow-lift);background:#2a2a44;border-radius:40px;padding:10px;position:relative}.phone-notch{z-index:1;border-radius:var(--radius-full);background:var(--ink);background:#2a2a44;width:64px;height:18px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.phone-screen{background:var(--background);border-radius:31px;height:456px;overflow:hidden}.screen{height:100%;color:var(--ink);align-content:start;gap:16px;padding:48px 16px 16px;display:grid}.screen-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.screen-chip{border-radius:var(--radius-full);background:var(--info-soft);color:var(--info);padding:4px 10px;font-size:11.5px;font-weight:800}.screen-chip-xp{background:var(--xp-soft);color:var(--xp)}.screen-muted{color:var(--ink-muted);font-size:12px;font-weight:600}.screen-hero-ring{place-items:center;padding:10px 0 4px;display:grid}.screen-ring-value{justify-items:center;font-size:26px;line-height:1;display:grid}.screen-ring-value small{color:var(--ink-muted);margin-top:4px;font-size:11px;font-weight:600}.screen-topics{gap:8px;margin:0;padding:0;list-style:none;display:grid}.screen-topics li{border-radius:var(--radius-md);background:var(--surface);align-items:center;gap:10px;padding:8px 10px;font-size:12.5px;font-weight:600;line-height:1.3;display:flex}.screen-topics li span:not(.ring){flex:1}.screen-topics strong{font-size:12.5px}.screen-streak{justify-items:center;gap:2px;padding:6px 0;display:grid}.screen-flame{border-radius:var(--radius-full);background:var(--streak-soft);width:56px;height:56px;color:var(--streak);place-items:center;animation:2.4s ease-in-out infinite flame-flicker;display:grid}.screen-flame svg{width:30px;height:30px}.screen-streak-count{letter-spacing:-.04em;font-size:40px;font-weight:800;line-height:1.1}.screen-week{grid-template-columns:repeat(7,1fr);gap:4px;margin:0;padding:0;list-style:none;display:grid}.screen-week li{aspect-ratio:1;border-radius:var(--radius-full);background:var(--surface);color:var(--ink-muted);place-items:center;font-size:11px;font-weight:700;display:grid}.screen-week li.done{background:var(--streak);color:#fff}.screen-freeze{border-radius:var(--radius-md);background:var(--info-soft);color:var(--info);align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:700;display:flex}.screen-heat{justify-content:space-between;gap:3px;display:flex}.screen-heat-week{gap:3px;display:grid}.heat{background:var(--track);border-radius:3px;width:10px;height:10px;display:block}.heat-1{background:color-mix(in srgb, var(--primary) 25%, var(--track))}.heat-2{background:color-mix(in srgb, var(--primary) 50%, var(--track))}.heat-3{background:color-mix(in srgb, var(--primary) 75%, var(--track))}.heat-4{background:var(--primary)}.screen-league{gap:6px;margin:0;padding:0;list-style:none;display:grid}.screen-league li{border-radius:var(--radius-md);background:var(--surface);align-items:center;gap:10px;padding:8px 10px;font-size:12.5px;display:flex}.screen-league li.you{background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}.rank{width:18px;color:var(--ink-muted);text-align:center;font-weight:800}.rank-up{color:var(--success)}.avatar{border-radius:var(--radius-full);background:var(--primary);color:#fff;place-items:center;width:28px;height:28px;font-size:12px;font-weight:800;display:grid}.league-name{flex:1;font-weight:700}.screen-league strong{font-size:12px}.screen-promo{color:var(--ink-muted);text-align:center;font-size:11.5px;font-weight:600}@keyframes flame-flicker{50%{transform:scale(1.06)rotate(-2deg)}}@media (min-width:900px){.preview-rail{justify-content:center;gap:32px;padding-bottom:0;overflow:visible}.preview{width:272px}.preview:nth-child(2){transform:translateY(-24px)}.phone-screen{height:500px}}