.scroll-app{--scroll-bg:var(--color-ink);--scroll-text:var(--color-paper);--scroll-text-2:color-mix(in oklch, var(--color-paper) 78%, transparent);--scroll-line:color-mix(in oklch, var(--color-paper) 18%, transparent);--scroll-scrim:color-mix(in oklch, var(--color-ink) 82%, transparent);--scroll-like:var(--color-error);--scroll-rail:4.25rem;z-index:var(--z-modal);background:var(--scroll-bg);color:var(--scroll-text);font-family:var(--font-body);position:fixed;inset:0;overflow:hidden}.scroll-app :focus-visible{outline:2px solid var(--color-dex-sky);outline-offset:2px}.scroll-app .sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.scroll-top{z-index:3;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:max(var(--space-sm), env(safe-area-inset-top)) var(--space-md) var(--space-sm);background:linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 55%, transparent), transparent);pointer-events:none;display:flex;position:absolute;inset:0 0 auto}.scroll-top>*{pointer-events:auto}.scroll-brand{align-items:center;gap:var(--space-xs);color:var(--scroll-text);font-family:var(--font-display);font-size:var(--text-md);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;display:inline-flex}.scroll-brand strong{font-weight:700}.scroll-top__actions{align-items:center;gap:var(--space-xs);display:flex}.scroll-sound,.scroll-close{align-items:center;gap:var(--space-2xs);min-width:2.5rem;height:2.5rem;padding:0 var(--space-xs);border-radius:var(--radius-control);background:color-mix(in oklch, var(--color-paper) 14%, transparent);color:var(--scroll-text);font:inherit;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;justify-content:center;font-weight:600;text-decoration:none;display:inline-flex}.scroll-sound--off{background:var(--color-paper);color:var(--color-ink);padding:0 var(--space-sm)}.scroll-feed{scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none;height:100dvh;overflow-y:auto}.scroll-feed::-webkit-scrollbar{display:none}.scroll-item,.scroll-end{scroll-snap-align:start;scroll-snap-stop:always;height:100dvh;position:relative}.scroll-stage{justify-content:center;align-items:center;height:100%;display:flex}.scroll-frame{background:var(--color-ink);width:100%;height:100%;position:relative;overflow:hidden}.scroll-video{object-fit:cover;background:var(--color-ink);width:100%;height:100%;position:absolute;inset:0}.scroll-tap{z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;position:absolute;inset:0}.scroll-play{z-index:2;border-radius:var(--radius-card);background:color-mix(in oklch, var(--color-ink) 45%, transparent);width:4.5rem;height:4.5rem;color:var(--scroll-text);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;place-items:center;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.scroll-burst{z-index:2;color:var(--scroll-like);pointer-events:none;animation:scroll-burst .7s var(--ease-out) forwards;filter:drop-shadow(0 6px 18px color-mix(in oklch, var(--color-ink) 40%, transparent));position:absolute;translate:-50% -50%}@keyframes scroll-burst{0%{opacity:0;rotate:-12deg;scale:.4}25%{opacity:1;rotate:0deg;scale:1.15}45%{scale:.95}to{opacity:0;translate:-50% -90%;scale:1.05}}.scroll-meta{inset:auto calc(var(--scroll-rail) + var(--space-sm)) 0 0;z-index:2;padding:var(--space-2xl) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));pointer-events:none;position:absolute}.scroll-meta:before{content:"";inset:0 calc(-1 * (var(--scroll-rail) + var(--space-sm))) 0 0;z-index:-1;background:linear-gradient(to top, var(--scroll-scrim), transparent);position:absolute}.scroll-meta.is-open:before{background:linear-gradient(to top, var(--scroll-scrim) 70%, transparent)}.scroll-meta>*{pointer-events:auto}.scroll-meta__series{color:var(--color-dex-mint);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;margin:0 0 2px;font-weight:700}.scroll-meta__title{font-family:var(--font-display);font-size:var(--text-base);letter-spacing:-.01em;text-wrap:balance;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-weight:700;line-height:1.25;display:-webkit-box;overflow:hidden}.scroll-meta.is-open .scroll-meta__title{display:block}.scroll-meta__details{max-height:40dvh;margin-top:var(--space-2xs);overflow-y:auto}.scroll-meta__caption{color:var(--scroll-text-2);font-size:var(--text-sm);margin:0;line-height:1.45}.scroll-meta__tag{color:var(--scroll-text);font-weight:600}.scroll-meta__more{color:var(--scroll-text);font:inherit;font-size:var(--text-sm);cursor:pointer;background:0 0;border:0;padding:0;font-weight:700}.scroll-meta__fine{margin:var(--space-2xs) 0 0;color:var(--scroll-text-2);font-size:var(--text-xs)}.scroll-progress{z-index:2;background:var(--scroll-line);height:3px;position:absolute;inset:auto 0 0}.scroll-progress>div{background:var(--scroll-text);transform-origin:0;height:100%;transform:scaleX(0)}.scroll-rail{right:var(--space-xs);bottom:calc(var(--space-xl) + env(safe-area-inset-bottom));z-index:2;align-items:center;gap:var(--space-md);width:var(--scroll-rail);flex-direction:column;display:flex;position:absolute}.scroll-action{align-items:center;gap:var(--space-3xs);color:var(--scroll-text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex-direction:column;padding:0;text-decoration:none;display:flex}.scroll-action__icon{border-radius:var(--radius-card);background:color-mix(in oklch, var(--color-paper) 14%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:3rem;height:3rem;filter:drop-shadow(0 2px 6px color-mix(in oklch, var(--color-ink) 35%, transparent));transition:scale var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);place-items:center;display:grid}.scroll-action:active .scroll-action__icon{scale:.9}.scroll-action.is-liked .scroll-action__icon{color:var(--scroll-like);animation:scroll-like-pop .32s var(--ease-out)}@keyframes scroll-like-pop{0%{scale:.7}60%{scale:1.18}to{scale:1}}.scroll-action__count{font-size:var(--text-xs);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px color-mix(in oklch, var(--color-ink) 70%, transparent);font-weight:700}@media (min-width:720px) and (min-aspect-ratio:3/4){.scroll-stage{gap:var(--space-md);padding:var(--space-md) 0}.scroll-frame{aspect-ratio:9/16;border-radius:var(--radius-card-lg);width:auto;height:100%}.scroll-meta,.scroll-meta:before{inset-inline-end:0}.scroll-rail{margin-bottom:var(--space-lg);align-self:flex-end;position:static}.scroll-action__icon{background:color-mix(in oklch, var(--color-paper) 10%, transparent)}}.scroll-end{padding:var(--space-xl) var(--space-md);background:radial-gradient(120% 70% at 50% 0%, color-mix(in oklch, var(--color-accent) 28%, transparent), transparent 70%), var(--scroll-bg);place-items:center;display:grid}.scroll-end__body{text-align:center;max-width:30rem}.scroll-end__kicker{margin:0 0 var(--space-xs);color:var(--color-dex-mint);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;font-weight:700}.scroll-end h2{margin:0 0 var(--space-sm);font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.02em;text-wrap:balance;line-height:1.1}.scroll-end p{color:var(--scroll-text-2);line-height:1.5}.scroll-end__links{gap:var(--space-xs);margin-top:var(--space-lg);flex-direction:column;display:flex}.scroll-button{justify-content:center;align-items:center;gap:var(--space-2xs);min-height:var(--control-height);padding:0 var(--space-md);border:var(--rule-thin) solid var(--scroll-line);border-radius:var(--radius-control);color:var(--scroll-text);font:inherit;cursor:pointer;background:0 0;font-weight:600;text-decoration:none;display:inline-flex}.scroll-button--primary{background:var(--color-accent);color:var(--color-paper);border-color:#0000}.scroll-sheet{z-index:4;background:color-mix(in oklch, var(--color-ink) 45%, transparent);animation:scroll-fade var(--dur-short) var(--ease-out);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}@keyframes scroll-fade{0%{opacity:0}}.scroll-sheet__panel{border-radius:var(--radius-card-lg) var(--radius-card-lg) 0 0;background:var(--color-paper);width:100%;max-width:40rem;max-height:72dvh;color:var(--color-ink);box-shadow:0 -12px 40px var(--color-shadow);animation:scroll-rise var(--dur-long) var(--ease-out);flex-direction:column;display:flex}.scroll-sheet__panel--share{max-height:none}@keyframes scroll-rise{0%{opacity:.6;translate:0 24%}}@media (min-width:960px){.scroll-sheet{justify-content:flex-end;align-items:stretch}.scroll-sheet__panel{border-radius:var(--radius-card-lg) 0 0 var(--radius-card-lg);max-width:26rem;height:100%;max-height:none;animation-name:scroll-slide}.scroll-sheet__panel--share{height:auto;margin-right:var(--space-lg);border-radius:var(--radius-card-lg);align-self:center}@keyframes scroll-slide{0%{opacity:.6;translate:12%}}}.scroll-sheet__head{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-md) 0;display:flex}.scroll-sheet__head h2{font-family:var(--font-display);font-size:var(--text-md);margin:0}.scroll-sheet__close{border-radius:var(--radius-control);background:var(--color-paper-2);width:2.5rem;height:2.5rem;color:var(--color-ink);cursor:pointer;border:0;place-items:center;display:grid}.scroll-sheet__context{margin:var(--space-3xs) var(--space-md) 0;padding-bottom:var(--space-sm);border-bottom:var(--rule-thin) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}.scroll-comments{overscroll-behavior:contain;min-height:8rem;padding:0 var(--space-md);flex:1;overflow-y:auto}.scroll-comments ol{margin:0;padding:0;list-style:none}.scroll-comments__empty{margin:var(--space-lg) 0;color:var(--color-muted);text-align:center}.scroll-comment{gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:var(--rule-thin) solid var(--color-rule);grid-template-columns:2.25rem 1fr;display:grid}.scroll-comment:last-child{border-bottom:0}.scroll-comment__avatar{border-radius:var(--radius-control);background:var(--color-vote-soft);width:2.25rem;height:2.25rem;color:var(--color-accent-deep);font-family:var(--font-display);place-items:center;font-weight:700;display:grid}.scroll-comment__body{min-width:0}.scroll-comment__byline{align-items:baseline;gap:var(--space-xs);font-size:var(--text-sm);margin:0;display:flex}.scroll-comment__byline time{color:var(--color-muted);font-size:var(--text-xs)}.scroll-comment__text{margin:var(--space-3xs) 0 0;font-size:var(--text-base);white-space:pre-line;overflow-wrap:anywhere;line-height:1.45}.scroll-comment__tools{align-items:center;gap:var(--space-sm);margin-top:var(--space-2xs);color:var(--color-muted);font-size:var(--text-xs);display:flex}.scroll-comment__tools button{align-items:center;gap:var(--space-3xs);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;display:inline-flex}.scroll-comment__tools button:hover{color:var(--color-ink)}.scroll-comments__more{margin:var(--space-sm) auto var(--space-md);padding:var(--space-2xs) var(--space-sm);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-control);color:var(--color-ink);font:inherit;font-size:var(--text-sm);cursor:pointer;background:0 0;display:block}.scroll-compose{padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));border-top:var(--rule-thin) solid var(--color-rule)}.scroll-compose form{align-items:flex-end;gap:var(--space-xs);display:flex;position:relative}.scroll-compose textarea{min-height:var(--control-height);max-height:8rem;padding:var(--space-xs) var(--space-sm);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);font:inherit;font-size:max(16px, var(--text-base));resize:none;field-sizing:content;flex:1;line-height:1.4}.scroll-compose textarea:focus{border-color:var(--color-focus);outline:none}.scroll-compose button[type=submit]{width:var(--control-height);height:var(--control-height);border-radius:var(--radius-control);background:var(--color-accent-blue);color:var(--color-paper);cursor:pointer;border:0;place-items:center;display:grid}.scroll-compose button[type=submit]:disabled{opacity:.4;cursor:default}.scroll-compose__left{right:calc(var(--control-height) + var(--space-sm));bottom:var(--space-3xs);color:var(--color-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;position:absolute}.scroll-compose__left.is-over{color:var(--color-error)}.scroll-compose__signin{font-size:var(--text-sm);margin:0}.scroll-compose__signin a{color:var(--color-accent-blue);font-weight:600}.scroll-compose__rules{margin:var(--space-2xs) 0 0;color:var(--color-muted);font-size:var(--text-xs)}.scroll-share{gap:var(--space-xs);padding:var(--space-md);grid-template-columns:repeat(5,1fr);margin:0;list-style:none;display:grid}.scroll-share a,.scroll-share button{align-items:center;gap:var(--space-2xs);width:100%;padding:var(--space-sm) var(--space-3xs);border-radius:var(--radius-control);color:var(--color-ink);font:inherit;font-size:var(--text-xs);cursor:pointer;background:0 0;border:0;flex-direction:column;font-weight:600;text-decoration:none;display:flex}.scroll-share a:hover,.scroll-share button:hover{background:var(--color-paper-2)}.scroll-share__url{width:calc(100% - 2 * var(--space-md));margin:0 var(--space-md) var(--space-md);padding:var(--space-xs) var(--space-sm);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-paper-2);color:var(--color-ink-2);font:inherit;font-size:var(--text-xs);text-overflow:ellipsis;display:block}.scroll-toast{left:50%;top:calc(4rem + env(safe-area-inset-top));z-index:5;pointer-events:none;position:fixed;translate:-50%}.scroll-toast span{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);font-size:var(--text-sm);box-shadow:0 8px 24px var(--color-shadow);animation:scroll-fade var(--dur-short) var(--ease-out);font-weight:600;display:block}@media (max-width:400px){.scroll-sound__long{display:none}}@media (max-width:360px){.scroll-brand__name{display:none}.scroll-share{grid-template-columns:repeat(3,1fr)}.scroll-meta__title{font-size:var(--text-md)}}@media (prefers-reduced-motion:reduce){.scroll-feed{scroll-behavior:auto}.scroll-burst,.scroll-action.is-liked .scroll-action__icon,.scroll-sheet,.scroll-sheet__panel,.scroll-toast span{animation:none}}