/* home — rules used only by this feature, split out of the global stylesheets so other routes do not
   download them. Loaded with the feature (public/features.json), directly after style.css in the cascade.
   Split by class/id ownership with cascade-order checks; edit freely. */
/*  ── from style.css ──  */
.hero-philosophy-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -4px auto 20px;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.hero-philosophy-btn:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    transform: translateY(-1px);
}
.hero-philosophy-link {
    color: var(--text-secondary);
    font-weight: 500;
}
.hero-philosophy-link:hover {
    color: var(--accent-light);
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-egg { max-width: 520px; margin: 0 auto 22px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--bg-card); box-shadow: 0 14px 40px rgba(0,0,0,0.3); text-align: left; overflow: hidden; }
.hero-egg-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: none; border: 0; cursor: pointer; color: var(--text-primary); font: inherit; }
.hero-egg-icon { font-size: 1.3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); animation: eggWobble 3.5s ease-in-out infinite; }
.hero-egg-kicker { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-light, var(--accent)); }
.hero-egg-title { font-size: 0.95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--text-primary); }
.hero-egg-status { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-tertiary); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hero-egg-status.solved { color: #06d6a0; background: color-mix(in srgb, #06d6a0 18%, transparent); }
.hero-egg-chev { color: var(--text-muted); transition: transform .2s ease; }
.hero-egg.open .hero-egg-chev { transform: rotate(180deg); }
.hero-egg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.hero-egg.open .hero-egg-body { grid-template-rows: 1fr; }
.hero-egg-inner { min-height: 0; overflow: hidden; padding: 0 14px; }
.hero-egg.open .hero-egg-inner { padding: 0 14px 14px; }
.hero-egg-intro { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.45; }
.hero-egg-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.egg-slot { width: 38px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; font-weight: 900; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border); transition: transform .15s, border-color .15s, background .15s; }
.egg-slot.is-next { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.hero-egg-slots.is-wrong .egg-slot { border-color: #ff5a5f; background: color-mix(in srgb, #ff5a5f 18%, var(--bg-tertiary)); animation: eggShakeSlot .45s; }
.hero-egg-slots.is-right .egg-slot, .hero-egg-slots.is-solved .egg-slot { border-color: #06d6a0; background: color-mix(in srgb, #06d6a0 20%, var(--bg-tertiary)); }
.hero-egg-clues { margin: 0 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; counter-reset: clue; }
.hero-egg-clues li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-primary); padding: 6px 8px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border); }
.egg-clue-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent, #3472d8)); }
.egg-clue-text { font-style: italic; line-height: 1.35; }
.egg-clue-key { font-weight: 900; font-size: 0.95rem; color: #06d6a0; background: color-mix(in srgb, #06d6a0 15%, transparent); border-radius: 8px; padding: 2px 9px; }
.hero-egg-clues li.is-revealed { border-color: color-mix(in srgb, #06d6a0 45%, var(--border)); }
.hero-egg-pad { display: grid; gap: 6px; margin-bottom: 10px; }
.hero-egg-pad-arrows { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-egg-pad-letters { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.egg-key:hover { border-color: var(--accent); }
.egg-key:active { transform: scale(0.92); background: color-mix(in srgb, var(--accent) 25%, var(--bg-tertiary)); }
.egg-key--ctl { margin-left: auto; color: var(--text-secondary); }
.egg-key--ctl + .egg-key--ctl { margin-left: 0; }
.hero-egg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hero-egg-reveal { border: 1px solid color-mix(in srgb, #fbbf24 45%, var(--border)); background: color-mix(in srgb, #fbbf24 10%, transparent); color: var(--text-primary); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.hero-egg-reveal:disabled { opacity: 0.6; cursor: default; }
.hero-egg-reveal:not(:disabled):hover { border-color: #fbbf24; }
.hero-egg-meta { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 480px) { .hero-egg-pad-letters { grid-template-columns: repeat(9, 1fr); } .egg-slot { width: 32px; height: 38px; } }
body.egg-shake { animation: eggShake 0.9s cubic-bezier(.36,.07,.19,.97) both; }
body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@media (prefers-reduced-motion: reduce) { .egg-confetti, body.egg-shake, body.egg-rainbow { animation: none !important; } .egg-confetti { display: none; } }

.network-hub {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 50%, var(--bg-secondary) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 32px 24px;
    overflow: hidden;
}
.network-hub-header {
    display: flex; align-items: center; gap: 14px; justify-content: center;
    margin-bottom: 24px; text-align: center;
}
.network-hub-grid {
    display: grid;
    /* minmax(0, 1fr): a plain 1fr floors at the card's min-content, and a nowrap description made
       two columns wider than a 390px phone (the third card was cut off at the edge). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 960px; margin: 0 auto;
}
.network-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px;
    text-decoration: none; color: var(--text-primary);
    transition: all 0.2s ease;
}
.network-card-featured {
    border-color: rgba(231,76,60,0.25);
    background: rgba(231,76,60,0.04);
}
.network-card-featured:hover { border-color: rgba(231,76,60,0.5); }
.network-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--card-accent, var(--accent));
    flex-shrink: 0;
}
.network-card-arrow {
    color: var(--text-secondary); font-size: 0.75rem;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.network-card:hover .network-card-arrow { opacity: 1; transform: translateX(3px); }

@media (max-width: 960px) {
    .network-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 768px) {
    .network-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .network-hub { padding: 24px 16px; }
    .network-hub-header { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .network-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .network-hub { padding: 20px 12px; }
    .network-card { padding: 12px; gap: 10px; }
    .network-card-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 8px; }
    .network-card-arrow { display: none; }
}
@media (max-width: 360px) {
    .network-hub-grid { grid-template-columns: 1fr; gap: 8px; }
    .network-hub { padding: 16px 10px; }
}
.stream-card-nsfw-blur img,
.stream-card-nsfw-blur .thumb-placeholder {
    filter: blur(16px);
}
.stream-card-tag {
    background: var(--bg-hover); color: var(--text-secondary);
    padding: 1px 6px; border-radius: 8px;
    font-size: 0.7rem;
}
.streamer-group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.streamer-group-card:hover { border-color: var(--accent-dark); box-shadow: var(--ring-accent); }
.streamer-group-header { padding: 12px 14px 0; }
.streamer-group-identity {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: inherit; flex-wrap: wrap;
}
.streamer-group-identity:hover { color: var(--accent); }
.streamer-group-last-online { font-size: 0.78rem; margin-left: auto; }
.streamer-group-streams { display: flex; flex-direction: column; padding: 8px 0 4px; }
.streamer-group-stream {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 14px; text-decoration: none; color: inherit;
    border-top: 1px solid var(--border);
    transition: background 0.15s;
}
.streamer-group-stream:hover { background: var(--bg-hover); }
.streamer-group-stream-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.streamer-group-stream-thumb-placeholder { color: var(--text-muted); font-size: 1rem; }
.sg-live { color: #ef4444; font-weight: 700; }
.sg-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: 2px; vertical-align: middle; animation: sg-pulse 1.6s ease-in-out infinite; }
@keyframes sg-pulse { 50% { opacity: .35; } }
.streamer-group-stream.is-live .streamer-group-stream-thumb { box-shadow: 0 0 0 2px #ef4444; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .sg-live-dot { animation: none; } }
.streamer-group-stream-title { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streamer-group-stream-time { font-size: 0.75rem; }
.hero-rotate {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    color: var(--accent);
    font-weight: 650;
    white-space: nowrap;
}
.hero-float-title { font-size: 0.64rem; font-weight: 650; color: #fff; line-height: 1.2; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.hero-float-badge {
    align-self: flex-start; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 999px; color: #fff; margin-bottom: 2px;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px);
}
.hero-float.swapping .hero-float-inner { opacity: 0.08; transform: scale(0.78); }
.hero-float:hover { z-index: 6; }
.hero-float:hover .hero-float-inner {
    transform: scale(1.07); filter: none; opacity: 1;
    box-shadow: 0 26px 60px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--accent) inset;
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg-layer { transition: opacity 0.6s ease; }
}
.hero-quip {
    height: 2.8em; margin: 2px auto 18px; max-width: 640px; overflow: hidden;
    display: grid; place-items: center; text-align: center; text-wrap: balance;
    font-size: clamp(0.98rem, 1.9vw, 1.16rem);
    font-style: italic; color: var(--accent-light, var(--accent-light)); opacity: 0;
    transform: translateY(5px); transition: opacity 0.5s ease, transform 0.5s ease;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); line-height: 1.35;
}
.hero-philosophy-links { margin-top: 24px; }
.hero-stat-group {
    display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 11px 14px 11px 0; border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.hero-stat-group + .hero-stat-group { margin-top: 8px; }
.hero-stat-kicker {
    display: flex; align-items: center; gap: 7px; padding-left: 16px; align-self: stretch;
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.15;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}
.hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }
.hero-stats:empty { display: none; }
.hero-latest {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; text-decoration: none;
    color: var(--text-secondary); background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); backdrop-filter: blur(6px);
    max-width: min(640px, 90vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-latest:hover { border-color: var(--accent); color: var(--text-primary); }
/* Until shipped.js fills it, the line keeps its height without showing an empty pill, so the stats below stay put. */
.hero-latest:empty { visibility: hidden; min-height: 33px; }
.pulse-card {
    display: block; padding: 13px 15px; border-radius: 14px; text-decoration: none; color: var(--text-primary);
    background: var(--bg-secondary); border: 1px solid var(--border);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.pulse-kicker { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 7px; }
.pulse-title { font-weight: 700; margin-bottom: 7px; }
.pulse-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; }
.pulse-act { font-size: 0.85rem; padding: 4px 0; line-height: 1.45; }
.pulse-rank { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; padding: 3px 0; }
.pulse-medal { flex-shrink: 0; }
.moment-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.moment-title { font-size: 0.78rem; font-weight: 700; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.moment-user { font-size: 0.68rem; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }
.digest-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.digest-title { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-primary); }
.digest-since { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.digest-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 0.84rem; color: var(--text-secondary); }
.digest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.digest-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.digest-chip--live { border-color: color-mix(in srgb, #e0245e 55%, var(--border)); background: color-mix(in srgb, #e0245e 10%, var(--bg-tertiary)); }
.digest-chip--followed { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.digest-chip .stream-card-avatar { width: 24px; height: 24px; font-size: 0.7rem; }
.digest-name { font-weight: 700; }
.digest-extra { color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; }
.digest-follow { color: var(--accent); font-size: 0.7rem; margin-left: -2px; }
.digest-recap { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -4px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-muted); font-size: 0.78rem; text-decoration: none; align-self: center; }
.digest-recap:hover { color: var(--accent); border-color: var(--accent); }
.digest-hot { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border)); }
.digest-hot-line { display: block; font-size: 0.84rem; color: var(--text-secondary); font-style: italic; line-height: 1.4; text-decoration: none; }
.digest-hot-line:hover b { text-decoration: underline; }
@media (max-width: 640px) { .digest-extra { white-space: normal; } }
.streamer-group-goal { display: flex; align-items: center; gap: 8px; margin: 6px 5px 2px; font-size: 0.76rem; }
.streamer-group-goal .goal-bar { flex: 1; }
.sgg-title { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.sgg-pct { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.hero-slogan-timer {
    margin: -14px 0 22px; font-size: 0.72rem; letter-spacing: 0.02em;
    color: var(--text-muted); opacity: 0.8;
}
.hero-slogan-timer[hidden] { display: none; }

@media (max-width: 640px) {
    .hero-stats { border-radius: 14px; }
    .hero-stat-group { grid-template-columns: 1fr; gap: 8px; padding: 10px 10px 10px 0; }
    .hero-stat-kicker { padding-left: 10px; border-left-width: 2px; }
    .hero-stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-left: 10px; }
    .hero-stat-label { white-space: normal; line-height: 1.1; }
    .hero-float { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-float { animation: heroFloatIn 0.01s forwards; opacity: 0.5; }
    .hero-float::after { animation: none; display: none; }
    .hero-collage { transition: none; transform: none; }
    .hero-quip { transition: none; }
}
.stream-card-ago {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.home-about-toggle:hover { background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,0.05)); border-color: var(--accent); }
.home-about-toggle:active { transform: translateY(1px); }
.home-cta-banner.about-collapsed .home-about-body { max-height: 0; opacity: 0; margin: 0; }
.home-about-toggle-more { display: none; align-items: center; gap: 8px; }
.home-about-toggle-less { display: inline-flex; align-items: center; gap: 8px; }
.home-cta-banner.about-collapsed .home-about-toggle-more { display: inline-flex; }
.home-cta-banner.about-collapsed .home-about-toggle-less { display: none; }
.home-cta-banner::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 23px;
    padding: 1px;
    background: conic-gradient(from var(--cta-angle, 0deg), transparent 0deg, color-mix(in srgb, var(--accent) 80%, transparent) 60deg, color-mix(in srgb, var(--accent) 15%, transparent) 140deg, transparent 200deg, color-mix(in srgb, var(--accent) 55%, transparent) 300deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    /* Held still. The sweep animated a registered custom property, which repaints a conic gradient
       across the whole ~2MP banner every frame; a fixed angle keeps the lit edge without that. */
    --cta-angle: 210deg;
    opacity: 0.7;
}
.cta-embers span:nth-child(1){ left: 8%;  animation-delay: 0s;   }
.cta-embers span:nth-child(2){ left: 20%; animation-delay: 1.4s; }
.cta-embers span:nth-child(3){ left: 34%; animation-delay: 3.1s; }
.cta-embers span:nth-child(4){ left: 47%; animation-delay: 0.8s; }
.cta-embers span:nth-child(5){ left: 60%; animation-delay: 2.3s; }
.cta-embers span:nth-child(6){ left: 72%; animation-delay: 4.2s; }
.cta-embers span:nth-child(7){ left: 85%; animation-delay: 1.9s; }
.cta-embers span:nth-child(8){ left: 93%; animation-delay: 3.7s; }
.home-cta-banner { color: #e8e6e3; }
.home-cta-banner .cta-lede,
.home-cta-banner .cta-section-label { color: #bcbab6; }
.cta-lede {
    max-width: 760px; margin: 0 auto 26px; color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.7;
}
.cta-diff-label { margin-top: 30px; }
.cta-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.cta-method::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .2s; }
.cta-method:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,0.4); }
.cta-method:hover::after { opacity: 1; }
.cta-method-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #0e0e12; background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); margin-bottom: 10px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-dark) 35%, transparent); }
.cta-method-tag { margin-top: 10px; display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; color: var(--accent-light); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 999px; padding: 3px 10px; }
.home-cta-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin: 4px 0 24px; text-align: left;
}
.home-cta-feature:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.home-cta-feature.feat-star { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255,255,255,0.02)); }
.home-cta-feature.feat-star::before { content: '\f005'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 12px; right: 13px; font-size: 0.6rem; color: var(--accent); opacity: 0.8; }
.home-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-btn-glow::after {
    /* No spread and no outset: with either, the halo's edge reads as a hard ring around the button
       at the top of the pulse instead of a glow. */
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--accent-dark) 50%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 28%, transparent);
    opacity: 0; animation: ctaBtnGlow 2.6s ease-in-out infinite;
}

@media (max-width: 860px) {
    .cta-methods { grid-template-columns: 1fr; }
    .home-cta-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .home-cta-features { grid-template-columns: 1fr; }
    .cta-hero { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-hero-grad { -webkit-text-fill-color: var(--accent); color: var(--accent); }
}
.home-pastes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.home-paste-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.home-paste-card:hover {
    border-color: var(--accent-dark); background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}
.home-paste-body {
    padding: 14px 15px 15px;
}
.home-paste-title {
    font-weight: 600; font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-paste-meta {
    color: var(--text-muted); font-size: 0.75rem; margin-top: 10px;
}
.home-paste-lang {
    background: var(--bg-tertiary); padding: 1px 5px; border-radius: 4px;
    font-size: 0.7rem;
}
.home-paste-snippet {
    width: 100%;
    height: 100%;
    padding: 14px 16px;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .hero .hero-tagline { white-space: normal; font-size: clamp(1.35rem, 6vw, 1.9rem); }
    .home-pastes-list { grid-template-columns: 1fr; }
    .home-paste-media { height: 136px; }
}
.home-changelog-wrapper.collapsed .home-changelog-fade {
    display: block;
}

.home-changelog {
    background: var(--bg-secondary, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px 10px;
    overflow: hidden;
}
@media (max-width: 560px) {
    .home-changelog { padding: 12px 13px 8px; }
}
.stream-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.stream-card-metaright { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.75rem; }
.stream-card-uptime, .stream-card-vcount { display: inline-flex; align-items: center; white-space: nowrap; }
.stream-card-appear { animation: streamCardAppear 0.6s ease; }
.stream-card-leave { opacity: 0; transform: scale(0.94); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .stream-card-appear { animation: none; }
    .stream-card-leave { transition: none; }
}
.hero-aurora::before, .hero-aurora::after {
    content: ''; position: absolute; pointer-events: none; border-radius: 50%;
    mix-blend-mode: lighten; filter: blur(44px);
}
.hero-aurora::before {
    width: 48%; height: 150%; left: 6%; bottom: -42%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--accent)) 46%, #ff9d3c) 0%, transparent 66%);
    opacity: 0.24;
}
.hero-aurora::after {
    width: 42%; height: 140%; right: 6%; bottom: -40%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-light, var(--accent, var(--accent))) 55%, #ffce7a) 0%, transparent 66%);
    opacity: 0.18;
}
.stream-card-desc {
    font-size: 0.8rem; color: var(--text-secondary); margin-top: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.35; max-height: 2.85em; transition: max-height 0.35s ease; cursor: pointer;
}
.stream-card-desc.expanded { -webkit-line-clamp: unset; max-height: 4000px; overflow-y: auto; }
.hero-stat--clickable { cursor: pointer; }
.hero-stat--clickable:hover, .hero-stat--clickable:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); outline: none; }
.hero-stat--clickable:active { transform: translateY(0) scale(0.99); }
.hero-stat--clickable:hover .hero-stat-chart-hint { opacity: 0.8; }
.hero-tip.is-visible { opacity: 1; transform: none; }
.hero-tip-title { font-weight: 700; margin-bottom: 2px; }
.hero-tip-desc { color: var(--text-secondary); }
.hero-tip-recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.hero-tip-recent div { background: var(--bg-tertiary); border-radius: 8px; padding: 5px 7px; text-align: center; }
.hero-tip-cta { margin-top: 8px; font-size: 0.7rem; color: var(--text-muted); }
@media (max-width: 720px) {
    .hero-stat-label { white-space: normal; line-height: 1.15; }
    .hero-stat-chart-hint { opacity: 0.6; }
    .hero-tip { max-width: calc(100vw - 24px); }
    .hero-stat--clickable:hover { transform: none; box-shadow: none; }
}
.brand-mark--hero .ov-ring { stroke-width: 3.6; } .brand-mark--hero .ov-comet { stroke-width: 3.6; } .brand-mark--hero .ov-v { stroke-width: 4.2; }
.hero-stats { min-height: 246px; }
.hero-stat-strip[hidden] { display: none !important; }
.hero-stat-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 0.9vw, 10px); padding: 0;
    max-width: 940px; margin: 0 auto; width: 100%;
}
.hero-stat-strip .hero-stat { min-width: 0; padding: clamp(6px, 1.1vw, 10px) clamp(7px, 1.2vw, 12px); gap: clamp(5px, 0.9vw, 10px); }
.hero-stat-strip .hero-stat-label { font-size: clamp(0.48rem, 1.5vw, 0.62rem); letter-spacing: 0.04em; }
.hero-stat-strip .hero-stat-num { font-size: clamp(0.78rem, 3.4vw, 1.18rem); }
.hero-stat-strip .hero-stat-delta { font-size: clamp(0.5rem, 1.9vw, 0.62rem); }
@media (max-width: 900px) { .hero-stats { min-height: 218px; } }
@media (max-width: 380px) {
    .hero-stat-strip .hero-stat-label { white-space: normal; line-height: 1.12; }
    .hero-stat-strip .hero-stat { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .hero-stat-strip { padding: 5px; gap: 4px; }
    .hero-stat-strip .hero-stat { padding: 4px 7px; }
}
.hero-stat-strip .hero-stat { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hero-stat-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: auto;
    margin: 0 auto; padding: 8px 16px 8px 9px; cursor: pointer; font: inherit; border-radius: 13px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--text-primary);
    /* The same card as the chips above, so it belongs to the row instead of underlining a panel. */
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.7);
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-stat-more:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }
/* The stats are something to be proud of — the toggle reads as an invitation, not a footnote. */
.hero-stat-more-icon {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
    color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #22d3ee));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(.2, 1, .3, 1);
}
.hero-stat-more-icon i { font-size: 0.7rem; }
.hero-stat-more-text { background: linear-gradient(90deg, var(--text-primary), color-mix(in srgb, var(--accent) 60%, var(--text-primary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stat-more-chev { color: var(--text-muted); }
.hero-stat-more:hover .hero-stat-more-icon { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); transform: rotate(-6deg) scale(1.06); }
.hero-stat-more.is-open .hero-stat-more-chev { transform: rotate(180deg); }
/* Every number opens its history: say so without a hover (touch screens have none). */
.hero-stat--clickable { cursor: pointer; }
@media (hover: none) { .hero-stat-chart-hint { opacity: 0.55; } }
.hero-stat-full { border: 0; }
@media (max-width: 640px) {
    .hero-stats { min-height: 182px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-stats.is-swapping { transition: none; }
}
.hero-rotate-wrap { display: inline; }
.hero-tagline { text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 760px) {
    .hero-tagline { font-size: clamp(1.15rem, 6vw, 1.7rem); line-height: 1.25; }
    .hero-rotate { display: inline; white-space: normal; }
}
.hero-stats { margin-bottom: 8px; }
@media (max-width: 380px) { .hero-stats { min-height: 224px; } }
.section-kicker {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--sc-on) 62%, var(--text-muted));
    padding: 3px 8px; border-radius: 999px; align-self: center;
    background: color-mix(in srgb, var(--sc-on) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc-on) 22%, transparent);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .section-kicker { display: none; }
}
/* One quiet line under the actions: "What is OpenVibe?" reads as a link like Terms, not a fourth kind of button. */
#page-home .hero-philosophy-links { margin: 22px auto 14px; gap: 6px 12px; flex-wrap: wrap; justify-content: center; font-size: 0.8rem; }
#page-home .hero-philosophy-btn { gap: 6px; padding: 0; border: 0; background: none; font-size: 0.8rem; color: var(--accent-light); }
#page-home .hero-philosophy-btn:hover { background: none; color: #fff; transform: none; }
#page-home .hero-legal { display: inline-flex; align-items: center; gap: 12px; }
#page-home .hero-philosophy-link { font-size: 0.8rem; }
@media (max-width: 480px) {
    #page-home .hero-philosophy-links { margin: 18px auto 12px; gap: 6px 10px; }
    #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link { font-size: 0.76rem; }
    #page-home .hero-legal { gap: 10px; }
}
/* Too narrow for one line: two clean ones, without a separator left hanging at the end of the first. */
@media (max-width: 380px) {
    #page-home .hero-philosophy-links { flex-direction: column; gap: 6px; }
    #page-home .hero-philosophy-sep { display: none; }
}
@media (max-width: 640px) {
    #stream-grid-recent, #home-recent-vods-grid, #home-clips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px;
    }
    #stream-grid-recent .stream-card-title,
    #home-recent-vods-grid .stream-card-title,
    #home-clips-grid .stream-card-title {
        font-size: 0.82rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    #stream-grid-recent .stream-card-info,
    #home-recent-vods-grid .stream-card-info,
    #home-clips-grid .stream-card-info { padding: 8px 9px 9px; }
    #stream-grid-recent .stream-card-streamer,
    #home-recent-vods-grid .stream-card-streamer,
    #home-clips-grid .stream-card-streamer { font-size: 0.72rem; gap: 5px; }
    #home-recent-vods-grid .card-ai-overview,
    #home-clips-grid .card-ai-overview { display: none; }
    #home-pastes-list { gap: 10px; }
}
.home-load-more {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; max-width: 420px; margin: 2px auto 26px; padding: 11px 18px;
    font: inherit; font-size: 0.85rem; font-weight: 750; cursor: pointer;
    color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 14px;
    transition: transform 0.18s cubic-bezier(.2, 1, .3, 1), background 0.2s, border-color 0.2s, box-shadow 0.22s;
}
.home-load-more:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}
.home-load-more:active { transform: translateY(0) scale(0.99); }
.home-load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-load-more:hover i { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .home-load-more, .home-load-more i { transition: none; } }
.hero-stat:hover { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.hero-stat--clickable:hover { transform: translateY(-1px); }
.hero-stat--live > i { color: var(--live-red-text, var(--live-red)); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
.hero-stat-num { font-weight: 850; letter-spacing: -0.02em; }
.hero-stat-delta {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 6px 1px 4px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;
    align-self: center;
}
.hero-stat-delta.is-up { color: #4ade80; background: color-mix(in srgb, #4ade80 13%, transparent); border: 1px solid color-mix(in srgb, #4ade80 24%, transparent); }
.hero-stat-delta.is-down { color: #f87171; background: color-mix(in srgb, #f87171 13%, transparent); border: 1px solid color-mix(in srgb, #f87171 24%, transparent); }
.hero-stat-delta.is-flat { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); }
.hero-stat-delta em { font-style: normal; opacity: 0.6; margin-left: 2px; font-size: 0.92em; }
.hero-stat-trend {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 5px; padding-left: 5px;
    border-left: 1px solid currentColor; font-weight: 750;
}
.hero-stat-trend i { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.hero-stat-trend.is-up { color: #4ade80; } .hero-stat-trend.is-up i { border-bottom: 5px solid currentColor; }
.hero-stat-trend.is-down { color: #f87171; } .hero-stat-trend.is-down i { border-top: 5px solid currentColor; }
.hero-stat-trend.is-flat { color: var(--text-muted); } .hero-stat-trend.is-flat i { width: 6px; height: 2px; border: 0; background: currentColor; border-radius: 1px; }
.hero-stat-trend.is-new { color: #fbbf24; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9em; }
.hero-stat-label { text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
@media (max-width: 480px) {
    .hero-stat-delta { font-size: 0.54rem; padding: 1px 6px; }
    .hero-stat-trend { margin-left: 4px; padding-left: 4px; }
}
.hero-stats.is-swapping {
    overflow: hidden;
    min-height: 0 !important;
    transition: height 0.42s cubic-bezier(.2, 1, .3, 1);
}
.hero-stat > i { grid-row: 1 / 2; align-self: center; justify-self: center; }
.hero-stat-num { white-space: nowrap; line-height: 1.12; }
.hero-stat-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.hero-stat-delta { grid-column: 1 / -1; justify-self: start; margin-top: 1px; }
.hero-stat-strip { grid-auto-rows: 1fr; align-items: stretch; }
.hero-stat--spark { display: flex; }
.hero-stats.is-swapping { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero-stats.is-swapping { background: none; }
@media (max-width: 900px) {
    .hero-stats {
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
    }
}
#page-home .hero-content > h1, #page-home .hero-tagline, #page-home .hero-philosophy-links { will-change: auto; }
.home-cta-feature { opacity: 1; }
.cta-section-label {
    --sc: var(--accent);
    --sc-on: color-mix(in srgb, var(--sc) 45%, var(--accent));
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin: 26px 0 12px; font-size: 0.8rem; letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--sc-on) 42%, var(--text-primary)) !important;
}
.cta-section-label > i:first-child {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    display: grid; place-items: center; line-height: 1; font-size: 0.76rem;
    color: var(--sc-on);
    background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--sc-on) 24%, transparent), color-mix(in srgb, var(--sc-on) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--sc-on) 30%, transparent);
}
.cta-section-label::after {
    content: ''; flex: 1 1 auto; height: 1px; min-width: 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sc-on) 42%, transparent), transparent 88%);
}
.home-cta-features { margin: 2px 0 6px; gap: 12px; }
.cta-lede { margin: 0 0 12px; }
@media (max-width: 640px) {
    .cta-section-label { margin: 20px 0 10px; font-size: 0.72rem; gap: 8px; }
    .cta-section-label > i:first-child { width: 25px; height: 25px; font-size: 0.7rem; }
    .home-cta-features { grid-template-columns: 1fr; gap: 9px; }
    .home-cta-feature { padding: 13px 14px; }
}
.home-intro-demoted { margin-top: 26px; }
#home-tour-mount.home-intro-demoted { border-top: 1px solid var(--border); padding-top: 30px; margin-top: 34px; }
.home-pastes-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
@media (max-width: 640px) {
    .home-pastes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-pastes-list .paste-card-title, .home-pastes-list .stream-card-title {
        font-size: 0.82rem; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}
.ov-user {
    font-weight: 800; color: var(--text-primary); cursor: pointer;
    border-radius: 4px; text-decoration: none;
    text-underline-offset: 2px; transition: color .15s;
}
.ov-user:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; }
.ov-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ov-enter {
    animation: ovEnter 0.46s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--ov-enter-i, 0) * 45ms);
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .ov-enter { animation: none !important; } }

.cta-btn-short { display: none; }
.cta-method { display: flex; flex-direction: column; }
.cta-method > span { display: block; }
.cta-method-tag { display: block; width: fit-content; margin-top: auto; padding-top: 3px; }
.cta-method > span + .cta-method-tag { margin-top: 12px; }
.cta-method-icon { transition: transform .25s cubic-bezier(.2, 1.3, .3, 1), box-shadow .25s ease; }
.cta-method:hover .cta-method-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-dark) 55%, transparent); }
.cta-method:hover .cta-method-num { color: color-mix(in srgb, var(--accent) 32%, transparent); }
.cta-method-num { transition: color .2s ease; }
.home-cta-feature > i:first-child {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: grid; place-items: center; font-size: 0.92rem; margin-bottom: 6px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    transition: transform .25s cubic-bezier(.2, 1.3, .3, 1), background .2s ease;
}
.home-cta-feature:hover > i:first-child { transform: scale(1.1) rotate(-5deg); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cta-method::before, .home-cta-feature::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
    transform: translateX(-100%); opacity: 0;
}
.home-cta-feature { overflow: hidden; }
.cta-method:hover::before, .home-cta-feature:hover::after { opacity: 1; animation: ctaCardSheen .8s ease-out; }
.cta-money-lede {
    max-width: 700px; margin: 0 0 14px !important; text-align: left;
    padding: 2px 0 2px 14px; border-left: 3px solid color-mix(in srgb, #4ade80 55%, transparent);
    font-size: 0.95rem; line-height: 1.6;
}
.cta-money-grid .home-cta-feature > i:first-child {
    color: #4ade80; background: color-mix(in srgb, #4ade80 12%, transparent); border-color: color-mix(in srgb, #4ade80 26%, transparent);
}
.cta-money-grid { margin-bottom: 4px !important; }

.home-cta-buttons { margin: 22px 0 6px; }
.home-cta-feature { animation: none; }
.home-cta-banner.about-opening .cta-method,
.home-cta-banner.about-opening .home-cta-feature,
.home-cta-banner.about-opening .cta-section-label,
.home-cta-banner.about-opening .home-cta-buttons,
.home-cta-banner.about-opening .cta-money-lede {
    animation: ctaRise .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--about-i, 0) * 38ms);
}

@media (max-width: 640px) {
    .cta-methods { gap: 9px; }
    .cta-method {
        display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px;
        padding: 13px 14px; align-items: start;
    }
    .cta-method-icon { grid-row: 1 / span 3; width: 38px; height: 38px; font-size: 1rem; margin: 0; border-radius: 10px; }
    .cta-method-num { top: 9px; right: 11px; font-size: 1rem; }
    .cta-method strong { font-size: 0.93rem; margin: 0; padding-right: 26px; }
    .cta-method > span { font-size: 0.8rem; line-height: 1.45; }
    .cta-method-tag, .cta-method > span + .cta-method-tag { margin-top: 5px; }

    .home-cta-features { gap: 8px !important; }
    .home-cta-feature {
        display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px;
        padding: 12px 13px !important; align-items: start;
    }
    .home-cta-feature > i:first-child { grid-row: 1 / span 2; margin: 0; width: 34px; height: 34px; }
    .home-cta-feature > strong { font-size: 0.88rem; padding-right: 14px; }
    .home-cta-feature > span { font-size: 0.78rem; line-height: 1.45; }
    .home-cta-feature.feat-star::before { top: 10px; right: 11px; }

    .home-cta-buttons { gap: 8px; }
    .home-cta-buttons > .btn { flex: 1 1 140px; justify-content: center; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
    .cta-btn-long { display: none; }
    .cta-btn-short { display: inline; }
    .cta-money-lede { font-size: 0.86rem; padding-left: 11px; }
    .cta-section-label { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-method:hover::before, .home-cta-feature:hover::after { animation: none; opacity: 0; }
    .home-cta-banner.about-opening * { animation: none !important; }
    .cta-method:hover .cta-method-icon, .home-cta-feature:hover > i:first-child { transform: none; }
}

/*  ── from i18n-star.css ──  */
/* ═══ Star of OpenVibe (decoration and compact grid: css/i18n-star.css) ═══
   Gold is the card's one fixed hue, but text never uses it raw: --star-ink mixes it with the
   theme's text colour (light gold on dark themes, deep amber on light ones). */
.home-star-section {
    margin: 4px 0 28px;
    --star-gold: #fbbf24;
    --star-ink: color-mix(in srgb, #f59e0b 60%, var(--text-primary));
    --star-pink-ink: color-mix(in srgb, #ec4899 58%, var(--text-primary));
}
.home-star-section .section-header h2 > i.star-head-icon { color: var(--star-ink); }

/* Border sweep: a rotating oversized square left a wide desktop card's border in patches. The
   gradient turns in place instead (registered angle, like the pitch banner), at any card shape. */
@property --star-sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes starSweep { to { --star-sweep: 360deg; } }
.star-card-border::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: conic-gradient(from var(--star-sweep), var(--star-gold), #f472b6, var(--accent), var(--star-gold));
    animation: starSweep 7s linear infinite;
}
.home-star-section:has(.star-card.is-compact) .star-card-border::before { opacity: 0.55; }

.star-petals span:nth-child(1) { left: 6%;  animation-delay: 0s;   }
.star-petals span:nth-child(2) { left: 22%; animation-delay: -2s;  font-size: 0.9rem; }
.star-petals span:nth-child(3) { left: 41%; animation-delay: -5s;  }
.star-petals span:nth-child(4) { left: 58%; animation-delay: -1s;  font-size: 1.3rem; }
.star-petals span:nth-child(5) { left: 74%; animation-delay: -7s;  }
.star-petals span:nth-child(6) { left: 90%; animation-delay: -3.5s; font-size: 0.85rem; }
.star-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.star-body { min-width: 0; }
.star-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--star-ink); margin-bottom: 4px; }
.star-name { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.star-name a { color: inherit; text-decoration: none; }
.star-name a:hover { color: var(--accent-light); }
.star-name .star-jp { display: block; font-size: 0.55em; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.star-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.stream-card-tag .cat-inferred, .star-chip .cat-inferred { font-weight: 500; opacity: .78; }
.star-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 0.74rem; font-weight: 700; color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.star-chip.gold { color: var(--star-ink); background: color-mix(in srgb, var(--star-gold) 12%, transparent); border-color: color-mix(in srgb, var(--star-gold) 45%, transparent); }
.star-chip.pink { color: var(--star-pink-ink); background: color-mix(in srgb, #f472b6 12%, transparent); border-color: color-mix(in srgb, #f472b6 45%, transparent); }
.star-bio { margin: 0 0 4px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; font-size: 0.95rem; }
.star-bio-src { margin: 0 0 8px; color: var(--text-secondary); font-size: 0.82rem; white-space: pre-wrap; line-height: 1.45; }
.star-bio-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); margin: 6px 0 2px; }
.star-overview { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.45; margin: 8px 0 0; }
.star-btn-watch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.6) 50%, transparent 65%); background-size: 250% 100%; animation: starSheen 2.6s linear infinite; pointer-events: none; }
.star-live-card { align-self: stretch; }
.star-live-card .stream-card { height: 100%; }
/* Icon beside the sentence, not above a wrapped second line. */
.star-offline { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; text-wrap: pretty; }
.star-offline > i { flex: none; }

@media (max-width: 860px) {
    .home-star-section { margin-bottom: 34px; }
    .star-live-card { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .star-petals { display: none; }
}
.rs-lite .star-card-border::before { animation: none; background: linear-gradient(135deg, var(--star-gold), #f472b6, var(--accent)); inset: 0; }
.rs-lite .star-avatar-glow, .rs-lite .star-petals { display: none; }
.rs-lite .star-avatar-ring { animation: none; }

/* Why they're today's star; "picked by" and the countdown each stay on one line. */
.star-why {
    margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--star-gold) 12%, transparent), color-mix(in srgb, #f472b6 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--star-gold) 35%, transparent);
}
.star-why-head { font-size: 1.05rem; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.star-why-body { font-size: 0.92rem; line-height: 1.45; color: var(--text-secondary); }
.star-why-meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px;
    font-size: 0.68rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--star-ink);
}
.star-why-meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.star-why-meta .star-why-next { color: var(--text-muted); }

/* Compact card: avatar, who they are, and one action row. */
.star-card.is-compact .star-avatar-wrap { grid-area: avatar; width: 62px; height: 62px; align-self: center; }
.star-card.is-compact .star-avatar { width: 62px; height: 62px; font-size: 1.45rem; }
.star-card.is-compact .star-body {
    grid-area: text; display: flex; flex-direction: column; align-items: flex-start;
    gap: 3px; min-width: 0;
}
.star-card.is-compact .star-badge,
.star-card.is-compact .star-petals { display: none; }
.star-card.is-compact .star-kicker { font-size: 0.6rem; letter-spacing: 0.15em; margin: 0; }
.star-card.is-compact .star-name { font-size: clamp(1.1rem, 4.2vw, 1.5rem); margin: 0; }
.star-card.is-compact .star-name .star-jp { font-size: 0.5em; margin-top: 0; }
.star-card.is-compact .star-chips { gap: 5px; margin: 3px 0 0; }
.star-card.is-compact .star-chip {
    font-size: 0.68rem; padding: 2px 9px; border-radius: 999px; color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.star-card.is-compact .star-chip.gold { color: var(--star-ink); background: color-mix(in srgb, var(--star-gold) 10%, transparent); border-color: color-mix(in srgb, var(--star-gold) 32%, transparent); }
.star-more[hidden] { display: none !important; }
.star-more { display: block; grid-column: 1 / -1; }
.star-card > .star-actions, .star-card > .star-more { grid-column: 1 / -1; }
.star-more.is-entering { animation: starMoreIn 0.42s cubic-bezier(.2, 1, .3, 1); }
.star-card.is-swapping { overflow: hidden; transition: height 0.42s cubic-bezier(.2, 1, .3, 1); }
.star-card.is-compact .star-avatar-ring {
    inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--star-gold), #f472b6, var(--accent), var(--star-gold));
    animation: starRingSpin 6s linear infinite;
    opacity: 0.9;
}
.star-card.is-compact:hover .star-avatar-ring { opacity: 1; }
.star-card.is-compact .star-avatar { transition: transform 0.28s cubic-bezier(.2, 1.2, .3, 1); }
.star-card.is-compact:hover .star-avatar { transform: scale(1.04); }

/* ── Action row: one family ──────────────────────────────────────────────────
   One height, radius, type size and icon placement: gold filled primary, two identical outline
   buttons, never wrapping. On a phone the toggle is a square chevron button (label kept for
   screen readers). It used to open into a box with the chevron stacked above "Show less". */
.star-actions { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 4px 0 0; }
.star-card.is-compact .star-actions { grid-area: actions; }
.star-act {
    --star-act-h: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 0 auto; min-width: 0; height: var(--star-act-h); padding: 0 15px;
    border-radius: 12px; font: inherit; font-size: 0.84rem; font-weight: 750; line-height: 1;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.2s, translate 0.2s cubic-bezier(.2, 1, .3, 1), scale 0.12s;
}
.star-act > i { flex: none; font-size: 0.92em; color: var(--star-ink); transition: rotate 0.3s cubic-bezier(.2, 1, .3, 1); }
.star-act > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.star-act:hover {
    color: var(--text-primary); translate: 0 -1px;
    background: color-mix(in srgb, var(--star-gold) 10%, transparent);
    border-color: color-mix(in srgb, var(--star-gold) 45%, transparent);
}
.star-act:active { translate: none; scale: var(--press-scale, 0.97); }
.star-act:focus-visible { outline: 2px solid var(--star-ink); outline-offset: 2px; }
.star-act.star-btn-watch {
    flex: 1 0 auto; position: relative; overflow: hidden;
    color: #1c1002; border: 0;
    background: linear-gradient(135deg, #fde68a, #fbbf24 50%, #f59e0b);
    box-shadow: 0 6px 18px color-mix(in srgb, #fbbf24 32%, transparent);
}
.star-act.star-btn-watch > i { color: inherit; }
.star-act.star-btn-watch:hover {
    color: #1c1002;
    background: linear-gradient(135deg, #fef3c7, #fcd34d 50%, #fbbf24);
    box-shadow: 0 8px 22px color-mix(in srgb, #fbbf24 42%, transparent);
}
.star-expand { flex: 0 1 auto; }
.star-expand.is-open {
    background: color-mix(in srgb, var(--star-gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--star-gold) 42%, transparent);
}
.star-expand.is-open > i { rotate: 180deg; }
.rs-lite .star-act.star-btn-watch { box-shadow: none; }

/* Expanded card: the compact card's shape, with the detail revealed under it. */
.star-card:not(.is-compact) .star-avatar-wrap,
.star-card:not(.is-compact) .star-avatar { width: 76px; height: 76px; }
.star-card:not(.is-compact) .star-avatar { font-size: 1.7rem; }
.star-card:not(.is-compact) .star-body {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
}
.star-card:not(.is-compact) .star-name { margin: 0; }
.star-card:not(.is-compact) .star-chips { margin: 4px 0 0; }
.star-card:not(.is-compact) .star-badge { display: none; }
.star-card:not(.is-compact) .star-more { text-align: left; }
.star-card:not(.is-compact) .star-more > * { margin-left: 0; margin-right: 0; }
.star-more {
    margin-top: 12px; padding: 13px 15px; border-radius: 13px;
    background: color-mix(in srgb, var(--bg-primary) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--star-gold) 13%, var(--border));
}
.star-more > *:first-child { margin-top: 0; }
.star-more > *:last-child { margin-bottom: 0; }

/* Wide: avatar, who they are, and the actions on the right, on one line. */
@media (min-width: 820px) {
    .star-card.is-compact .star-actions { margin: 0; justify-content: flex-end; }
    .star-card.is-compact .star-btn-watch { flex: 0 0 auto; }
    .star-card:not(.is-compact) .star-actions { justify-content: flex-start; }
    .star-card:not(.is-compact) .star-btn-watch { flex: 0 0 auto; }
}
/* Phone: no panel-in-a-panel, and the toggle's label is visually hidden (still its name). */
@media (max-width: 560px) {
    .star-card.is-compact .star-avatar-wrap,
    .star-card.is-compact .star-avatar { width: 52px; height: 52px; }
    .star-card.is-compact .star-avatar { font-size: 1.2rem; }
    .star-act { padding: 0 14px; font-size: 0.82rem; }
    .star-act-extra { display: none; }
    .star-act.star-btn-watch { flex: 1 1 auto; }
    .star-expand { flex: none; width: var(--star-act-h); padding: 0; }
    .star-expand > i { font-size: 0.95rem; }
    .star-expand-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .star-more { padding: 12px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--star-gold) 16%, var(--border)); border-radius: 0; background: none; }
}
/* A 320px phone cannot fit three labelled buttons: "Say hi" goes to its icon as well. */
@media (max-width: 350px) {
    .star-act:not(.star-btn-watch) { flex: none; width: var(--star-act-h); padding: 0; }
    .star-act:not(.star-btn-watch) > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}
@media (prefers-reduced-motion: reduce) {
    .star-more.is-entering { animation: none; }
    .star-card.is-swapping { transition: none; }
    .star-card.is-compact .star-avatar-ring { animation: none; }
    .star-act, .star-act > i { transition: none; }
}

/* The pitch banner: what kind of place this is, before the headline says it. */
.cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.cta-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cta-chip i { color: var(--accent-light); }
.cta-hero { text-shadow: 0 6px 30px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ═══ Hero stats strip v3 — compact, no dead space, honest per viewport ═══
   The headline strip used to be three wide cards per row with the number in one corner, the
   label under it and the delta pill on a third line: ~80px tall cards that were mostly air.
   Now: one 9-across row on wide screens (icon, number, label, short delta), three horizontal
   rows on tablets (icon · number+label · delta right), three tight columns on phones. The
   reserved min-height matches each layout, "Show all" button included (measured 2026-10-12 at
   360–1920 px), so nothing jumps while the numbers load. */
.hero-latest { margin-top: 18px; }
.hero-stats { margin: 16px 0 10px; gap: 10px; min-height: 120px; }
.hero-stat-strip {
    display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: auto;
    gap: 8px; max-width: 1240px; margin: 0 auto; width: 100%; padding: 0;
}
.hero-stat-strip .hero-stat {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 3px; align-items: center; align-content: center;
    padding: 8px 10px; border-radius: 12px; min-height: 0;
    background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.hero-stat-strip .hero-stat > i {
    grid-row: 1 / 3; grid-column: 1; width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 9px; font-size: 0.74rem; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.hero-stat-strip .hero-stat--live > i { color: var(--live-red-text, var(--live-red)); background: color-mix(in srgb, var(--live-red) 15%, transparent); border-color: color-mix(in srgb, var(--live-red) 34%, transparent); }
.hero-stat-strip .hero-stat-meta { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-stat-strip .hero-stat-num { font-size: 1.06rem; line-height: 1.05; letter-spacing: -0.02em; }
.hero-stat-strip .hero-stat-label { font-size: 0.56rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.hero-stat-strip .hero-stat-sub { display: none; }
.hero-stat-strip .hero-stat-delta {
    grid-column: 2; grid-row: 2; justify-self: start; margin: 0; max-width: 100%;
    font-size: 0.55rem; padding: 1px 6px 1px 5px; overflow: hidden; text-overflow: ellipsis;
}
/* "vs 24h" / "7d" suffixes live in the tooltip; the pill keeps the number and the arrow. */
.hero-stat-strip .hero-stat-delta em { display: none; }
.hero-stat-strip .hero-stat-trend { margin-left: 4px; padding-left: 4px; }
.hero-stat-strip .hero-stat-chart-hint { font-size: 0.5rem; margin-left: 2px; }
/* Nine across, a card is ~127 px: beside the icon the pill had ~67 px and "+3.7k ▲ 431%" lost its end, and
   "STREAMERS" its last letters (measured 2026-10-24 at 1280 px). The pill takes the card's whole width on its own
   line, and the labels are set a little tighter. */
@media (min-width: 1280px) {
    .hero-stat-strip .hero-stat > i { grid-row: 1; }
    .hero-stat-strip .hero-stat-delta { grid-column: 1 / -1; }
    .hero-stat-strip .hero-stat-label { letter-spacing: 0.03em; }
}
/* Tablets and small laptops: three horizontal rows — icon · number + label · delta on the right. */
@media (max-width: 1279px) {
    .hero-stats { min-height: 204px; }
    .hero-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 960px; }
    .hero-stat-strip .hero-stat { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; padding: 8px 12px; }
    .hero-stat-strip .hero-stat > i { grid-row: 1; }
    .hero-stat-strip .hero-stat-meta { grid-row: 1; flex-direction: row; align-items: baseline; gap: 7px; }
    .hero-stat-strip .hero-stat-num { font-size: 1.12rem; }
    .hero-stat-strip .hero-stat-label { font-size: 0.6rem; }
    .hero-stat-strip .hero-stat-delta { grid-column: 3; grid-row: 1; justify-self: end; }
    .hero-stat-strip .hero-stat-delta em { display: inline; }
}
/* Phones: three tight columns, number over label, short pill. */
@media (max-width: 699px) {
    .hero-stats { min-height: 256px; margin-top: 14px; }
    .hero-stat-strip { gap: 6px; }
    .hero-stat-strip .hero-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; padding: 7px 8px; column-gap: 6px; row-gap: 2px; border-radius: 10px; }
    .hero-stat-strip .hero-stat > i { grid-row: 1 / 3; width: 24px; height: 24px; font-size: 0.66rem; border-radius: 7px; }
    .hero-stat-strip .hero-stat-meta { grid-row: 1; flex-direction: column; gap: 1px; }
    .hero-stat-strip .hero-stat-num { font-size: clamp(0.9rem, 4.2vw, 1.05rem); }
    .hero-stat-strip .hero-stat-label { font-size: 0.5rem; }
    .hero-stat-strip .hero-stat-delta { grid-column: 2; grid-row: 2; justify-self: start; font-size: 0.5rem; padding: 1px 5px; }
    .hero-stat-strip .hero-stat-delta em { display: none; }
}
@media (max-width: 359px) {
    .hero-stat-strip .hero-stat > i { display: none; }
    .hero-stat-strip .hero-stat { grid-template-columns: minmax(0, 1fr); }
    .hero-stat-strip .hero-stat-meta, .hero-stat-strip .hero-stat-delta { grid-column: 1; }
}
/* Short landscape phones: keep the hero above the fold. */
@media (max-height: 520px) and (orientation: landscape) {
    .hero-stats { min-height: 0; margin-top: 10px; }
    .hero-stat-strip .hero-stat { padding: 5px 8px; }
    .hero-stat-strip .hero-stat > i { width: 22px; height: 22px; }
}
/* Hero rhythm: one consistent vertical beat between title → tagline → buttons → links → receipt → stats. */
.hero-slogan-timer { margin: -4px 0 16px; }
.hero-philosophy-links { margin-top: 18px; }

/* ── Hero rhythm ──────────────────────────────────────────────────────────────
   The rows stacked under the hero buttons (philosophy + legal links, the "shipped" pill, the stats strip)
   each carried their own margin from a different era: 8px, 28px and 14px in a row. One step for all
   three, scaled with the viewport, so the block reads as a single evenly spaced column. */
#page-home .hero { --hero-step: clamp(12px, 1.6vw, 18px); }
#page-home .hero .hero-philosophy-links { margin: var(--hero-step) auto 0; row-gap: 6px; }
#page-home .hero .hero-latest { margin: var(--hero-step) auto 0; }
#page-home .hero .hero-stats { margin-top: var(--hero-step); }

/* ── Section header actions ("View all", "Play game") ─────────────────────────
   These were .badge links on var(--surface), a token no theme defines, so white text on nothing
   (invisible on light themes). One pill, tinted by the section's colour. */
.section-header > .section-action {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border-radius: 999px; font: inherit; font-size: 0.74rem; font-weight: 750; line-height: 1;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    color: color-mix(in srgb, var(--sc-on) 50%, var(--text-primary));
    background: color-mix(in srgb, var(--sc-on) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc-on) 28%, transparent);
    transition: background 0.15s, border-color 0.15s, color 0.15s, scale 0.12s;
}
.section-header > .section-action:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--sc-on) 18%, transparent);
    border-color: color-mix(in srgb, var(--sc-on) 50%, transparent);
}
/* Phone: a header's sentence gets its own line under the title instead of being cut off. */
@media (max-width: 560px) {
    .section-header:has(> span.muted) { flex-wrap: wrap; row-gap: 3px; }
    .section-header > span.muted {
        order: 5; flex: 1 0 100%; margin-left: 34px;
        white-space: normal; overflow: visible; line-height: 1.35; text-wrap: pretty;
    }
}

/* The changelog's "show all" lives under the list it expands. */
.home-changelog-toggle { margin: 12px auto 0; }
.home-changelog-toggle > i { transition: rotate 0.3s cubic-bezier(.2, 1, .3, 1); }
.home-changelog-toggle[aria-expanded="true"] > i { rotate: 180deg; }

/* Network hub two-up on a phone: the icon beside the text left ~90px, and "OpenVibe.Community"
   ran out of its card. Icon above text there; names may break after "OpenVibe." (<wbr>). */
.network-card-info strong { overflow-wrap: break-word; }
@media (min-width: 361px) and (max-width: 480px) {
    .network-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .network-card-info { width: 100%; }
}
/* The ≤480px rule hiding the arrow lost to Font Awesome's later .fa-solid display rule. */
@media (max-width: 480px) { .network-card > .network-card-arrow { display: none; } }

/* Terms · Privacy · DMCA wrap as one group ("DMCA" was stranded alone at 360px). */
.hero-legal { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }

/* The always-visible go-live actions in the home CTA (index.html): one primary action, one way to learn more, and
   what you do not need, on one line each. No card inside the banner (it read as a box in a box on phones). */
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 12px; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
    border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: filter .15s, background .15s, transform .1s; }
.cta-btn:active { transform: translateY(1px); }
.cta-btn-primary { background: var(--accent-strong, var(--accent, #3472d8)); color: var(--on-accent-strong, var(--on-accent, #fff));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent); }
.cta-btn-primary:hover { filter: brightness(1.1); }
.cta-btn-ghost { color: #e8e6e3; background: rgba(255,255,255,0.04); border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent); }
.cta-btn-ghost:hover { background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }
.cta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; list-style: none; margin: 0 0 18px; padding: 0;
    font-size: 0.86rem; color: #bcbab6; }
.cta-checks i { color: var(--accent-light, #60a5fa); margin-right: 5px; font-size: 0.8em; }
@media (max-width: 520px) {
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-btn { width: 100%; }
    .cta-checks { gap: 4px 12px; font-size: 0.8rem; }
}

/* ── A phone on its side: Go live stays in view (2026-10-25) ─────────────────────
   At 844x390 the title, a two-line tagline and the quip put the Go live button at y 352, below the 334px under the
   navbar. On a short landscape screen the hero starts right under the navbar, its lines are one size smaller and the
   memes timer waits for the upright phone, so the button shows without scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
    #page-home .hero { min-height: 0; padding-top: calc(var(--navbar-h) + 12px); padding-bottom: 12px; }
    #page-home .hero h1 { font-size: clamp(26px, 6.5vh, 32px); margin-bottom: 2px; }
    #page-home .hero .hero-tagline { font-size: clamp(18px, 5.2vh, 22px); margin: 0 0 4px; }
    #page-home .hero .hero-quip { font-size: 14px; margin: 0 0 8px; }
    #page-home .hero .hero-slogan-timer { display: none; }
}