.story{z-index:var(--z-modal);background:var(--gradient-reflection-soft,var(--canvas));background-color:var(--canvas);color:var(--fg);overscroll-behavior:contain;touch-action:pan-y;grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:fixed;inset:0}.story__top{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);padding-top:max(var(--space-3), env(safe-area-inset-top));display:flex}.story__dots{flex:1;gap:4px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.story__dots>li{flex:1 1 0;min-width:0;display:flex}.story__dot{cursor:pointer;background:0 0;border:0;flex:1;height:24px;padding:0;position:relative}.story__dot:before{content:"";border-radius:var(--radius-full);background:var(--paper-400);height:4px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.story__dot[data-state=seen]:before{background:var(--reflection-line)}.story__dot[data-state=reacted]:before{background:var(--reflection)}.story__dot[data-state=current]:before{background:var(--primary)}.story__dot:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:0;border-radius:var(--radius-sm)}.story__close{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);flex:none;text-decoration:none}.story__close:hover{color:var(--fg)}.story__viewport{min-height:0;padding:var(--space-2) var(--space-4) var(--space-4);display:grid;overflow-y:auto}.story__card{place-self:center;gap:var(--space-3);width:100%;min-width:0;max-width:560px;padding:var(--space-6) var(--space-5);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:var(--surface-raised);box-shadow:var(--shadow-md);overflow-wrap:anywhere;display:grid}.story__card[data-kind=cover],.story__card[data-kind=key]{background:var(--surface-inverse);color:var(--fg-inverse);border-color:#0000}.story__card[data-kind=cover] .story__eyebrow,.story__card[data-kind=key] .story__eyebrow,.story__card[data-kind=cover] .story__hint,.story__card[data-kind=key] .story__react-q,.story__card[data-kind=key] .story__react-status,.story__card[data-kind=cover] .story__sample,.story__card[data-kind=key] .story__sample{color:var(--reflection)}.story__card[data-kind=cover] .story__text,.story__card[data-kind=key] .story__text{color:var(--fg-inverse)}.story__card[data-kind=key] .story__react-btn{color:var(--fg-inverse);border-color:color-mix(in srgb, var(--fg-inverse) 45%, transparent);background:0 0}.story__card[data-kind=key] .story__react-btn[aria-pressed=true]{background:var(--fg-inverse);color:var(--ink-900)}@keyframes story-in-forward{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}@keyframes story-in-back{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:no-preference){.story__card[data-dir=forward]{animation:story-in-forward .22s var(--ease-out) both}.story__card[data-dir=back]{animation:story-in-back .22s var(--ease-out) both}}.story__sample{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--amber-strong);margin:0}.story__eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--reflection-strong);margin:0}.story__title{font-size:var(--text-3xl);line-height:var(--leading-tight);outline:none;margin:0}.story__text{font-family:var(--font-reflect);font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--ink-800);margin:0}.story__details{margin:var(--space-2) 0 0;gap:var(--space-3);display:grid}.story__details dt{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--fg-muted)}.story__details dd{font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:2px 0 0}.story__bars{margin:var(--space-2) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.story__bars li{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--fg-muted);grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 2.5ch;display:grid}.story__bars li[data-active=true]{color:var(--fg);font-weight:var(--weight-semibold)}.story__bar-track{border-radius:var(--radius-full);background:var(--chart-track);height:8px;overflow:hidden}.story__bar-track>span{border-radius:inherit;background:var(--reflection-line);height:100%;display:block}.story__bars li[data-active=true] .story__bar-track>span{background:var(--primary)}.story__bar-value{text-align:right;font-variant-numeric:tabular-nums}.story__react{margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);gap:var(--space-2);display:grid}.story__card[data-kind=key] .story__react{border-top-color:color-mix(in srgb, var(--fg-inverse) 25%, transparent)}.story__react-q{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin:0}.story__react-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.story__react-btn{min-width:6.5rem;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-white);color:var(--fg);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;flex:1 1 0}.story__react-btn:hover{border-color:var(--primary-line)}.story__react-btn[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--fg-inverse)}.story__react-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.story__react-status{min-height:1.4em;font-size:var(--text-xs);color:var(--fg-muted);margin:0}.story__hint{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--fg-muted)}.story__links{margin:var(--space-2) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.story__links .btn{text-align:center;justify-content:center;width:100%}.story__nav{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);padding-bottom:max(var(--space-3), env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);background:var(--surface);display:flex}.story__count{font-size:var(--text-sm);color:var(--fg-muted);font-variant-numeric:tabular-nums}@media (max-width:480px){.story__card{padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg)}.story__title{font-size:var(--text-2xl)}.story__text{font-size:var(--text-base)}.story__dots{gap:2px}}