.live-page {
    width: min(100%, 1440px);
    min-height: calc(100svh - var(--public-header-height));
    margin-inline: auto;
    padding-inline: 1rem;
}

.live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: 1.5rem;
    direction: ltr;
}

.live-stage,
.live-feed {
    min-width: 0;
    min-height: 0;
    direction: rtl;
    text-align: right;
}

.live-stage { display: flex; flex-direction: column; }
.live-feed { display: flex; flex-direction: column; }

.live-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--public-text-faint);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.4;
}

.live-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--public-text);
}

.live-dot::after {
    position: absolute;
    inset: -4px;
    border: 1.5px solid color-mix(in srgb, var(--public-text) 50%, transparent);
    border-radius: 999px;
    animation: live-pulse 2.2s cubic-bezier(.2, 0, 0, 1) infinite;
    content: "";
}

@keyframes live-pulse {
    0% { opacity: .9; transform: scale(.6); }
    70%, 100% { opacity: 0; transform: scale(1.6); }
}

.live-stage__body {
    margin-block: auto;
    padding-block: 2rem;
    transition: opacity .18s cubic-bezier(.2, 0, 0, 1), transform .36s cubic-bezier(.22, 1, .36, 1);
}

.live-stage__body[data-swapping="1"] { opacity: 0; transform: translateY(8px); }

.live-stage__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.live-stage__heading > a {
    color: var(--public-text);
    font-family: inherit;
    font-size: 1.875rem;
    font-weight: 650;
    line-height: 1.28;
    text-decoration: none;
    transition: color .2s cubic-bezier(.2, 0, 0, 1);
}

.live-stage__heading > a:hover { color: var(--public-text-muted); }
.live-stage__heading time,
.live-feed time,
.live-counter,
.live-new,
.live-stats dt {
    color: var(--public-text-faint);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.live-stage__text {
    display: -webkit-box;
    max-width: 720px;
    margin: 1.5rem 0 0;
    overflow: hidden;
    color: var(--public-text);
    font-size: .96rem;
    line-height: 1.9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
}

.live-stage__why {
    display: flex;
    max-width: 720px;
    align-items: baseline;
    gap: .75rem;
    margin-block-start: 1.5rem;
}

.live-stage__why > .live-label { flex: 0 0 auto; }
.live-stage__why p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--public-text-muted);
    font-size: .9rem;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.live-open {
    display: inline-flex;
    width: max-content;
    min-height: 32px;
    align-items: center;
    gap: .45rem;
    margin-block-start: 1.75rem;
    padding-inline: .8rem;
    border: 1px solid var(--public-border-strong);
    border-radius: 999px;
    color: var(--public-text);
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.live-open:hover { border-color: var(--public-text); background: var(--public-surface); }
.live-open svg { width: 14px; height: 14px; }

.live-stage__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--public-border);
}

.live-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    margin: 0;
}

.live-stats dd { margin: 0; }
.live-stats dt { margin-block-start: .375rem; }
.live-figure {
    color: var(--public-text);
    font-size: 1rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.live-controls { display: flex; align-items: center; gap: .25rem; direction: ltr; }
.live-controls button {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--public-text-muted);
    cursor: pointer;
}
.live-controls button:hover { background: var(--public-surface); color: var(--public-text); }
.live-controls button:disabled { cursor: default; opacity: .32; }
.live-controls button > svg:not(.live-ring) { width: 14px; height: 14px; }
.live-counter { margin-inline-start: .5rem; direction: rtl; }
.live-ring { position: absolute; inset: 0; width: 32px; height: 32px; transform: rotate(-90deg); pointer-events: none; }
.live-ring circle { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .12; }
.live-ring .live-ring__arc { opacity: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.live-ring[data-running="1"] .live-ring__arc { stroke-dashoffset: 0; transition: stroke-dashoffset var(--live-auto-ms, 9s) linear; }

.live-feed__head { display: flex; align-items: baseline; justify-content: space-between; padding-inline: .25rem; }
.live-feed__view {
    position: relative;
    min-height: 0;
    flex: 1;
    margin-block-start: .75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    --live-fade-top: 0px;
    --live-fade-bottom: 0px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--live-fade-top), #000 calc(100% - var(--live-fade-bottom)), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--live-fade-top), #000 calc(100% - var(--live-fade-bottom)), transparent 100%);
}
.live-feed__view::-webkit-scrollbar { display: none; }
.live-feed__view[data-fade="top"], .live-feed__view[data-fade="both"] { --live-fade-top: 48px; }
.live-feed__view[data-fade="bottom"], .live-feed__view[data-fade="both"] { --live-fade-bottom: 64px; }
.live-feed__inner { position: relative; padding-block-end: .75rem; direction: ltr; }
.live-feed__list { margin: 0; padding: 0; border-left: 1px solid var(--public-border); list-style: none; }
.live-marker {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 2px;
    border-radius: 999px;
    background: var(--public-text);
    opacity: 0;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1), height .36s cubic-bezier(.22, 1, .36, 1), opacity .2s cubic-bezier(.2, 0, 0, 1);
}
.live-feed__row { animation: live-feed-arrive .52s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--live-index, 0) * 70ms + .12s); }
@keyframes live-feed-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.live-feed__row[data-new="1"] { display: grid; grid-template-rows: 0fr; opacity: 0; animation: none; }
.live-feed__row[data-new="1"] > .live-feed__button { min-height: 0; overflow: hidden; }
.live-feed__row[data-new="1"][data-in="1"] { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .48s cubic-bezier(.22, 1, .36, 1), opacity .32s cubic-bezier(.2, 0, 0, 1) .12s; }
.live-feed__button {
    display: block;
    width: 100%;
    padding: .75rem 1rem .75rem .75rem;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    color: inherit;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    transition: background-color .12s cubic-bezier(.2, 0, 0, 1);
}
.live-feed__button:hover { background: color-mix(in srgb, var(--public-text) 3.5%, transparent); }
.live-feed__line { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.live-feed__title {
    min-width: 0;
    overflow: hidden;
    color: var(--public-text);
    font-size: 1.2rem;
    font-weight: 560;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s cubic-bezier(.2, 0, 0, 1);
}
.live-feed__row[data-active="0"] .live-feed__title { color: var(--public-text-muted); }
.live-feed time { flex: 0 0 auto; white-space: nowrap; }
.live-feed__preview {
    display: block;
    margin-block-start: .375rem;
    overflow: hidden;
    color: var(--public-text-muted);
    font-size: .82rem;
    line-height: 1.65;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-rise { animation: live-rise .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--live-index, 0) * 70ms); }
@keyframes live-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

body:has(.live-page) .public-footer { display: none; }
.public-main:has(.live-page) { min-height: 0; }

@media (min-width: 640px) {
    .live-page { padding-inline: 1.5rem; }
    .live-stage__heading > a { font-size: 2.125rem; }
}

@media (min-width: 1024px) {
    .live-page { height: calc(100svh - var(--public-header-height)); overflow: hidden; }
    .live-grid { height: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 3rem; padding-block: 2rem; }
    .live-stage, .live-feed { height: 100%; }
    .live-stage__body { padding-block: 2.5rem; }
}

@media (max-width: 1023px) {
    .live-feed__view { max-height: 34rem; }
    .live-feed { min-height: 24rem; }
}

@media (max-width: 560px) {
    .live-page { min-height: calc(100dvh - var(--public-header-height)); }
    .live-grid { gap: 2.5rem; padding-block: 1.25rem 2rem; }
    .live-stage__heading > a { font-size: 1.7rem; }
    .live-stage__text { font-size: .9rem; -webkit-line-clamp: 8; }
    .live-stage__why { align-items: flex-start; }
    .live-stage__foot { align-items: stretch; flex-direction: column; }
    .live-stats { justify-content: space-between; gap: .75rem; }
    .live-stats > div { min-width: 0; }
    .live-controls { justify-content: flex-end; }
    .live-feed__title { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot::after,
    .live-rise,
    .live-feed__row { animation: none; }
    .live-stage__body,
    .live-marker,
    .live-feed__row[data-new="1"][data-in="1"] { transition: none; }
    .live-ring .live-ring__arc { transition: none !important; stroke-dashoffset: 100 !important; }
}