/* Cinematic announcement: the image, full title and viewing action lead. */
.announcement.hero{height:auto;min-height:650px;display:flex;align-items:center;padding-block:120px 100px}
.announcement .hero-content{width:min(650px,57%);padding:38px 0 30px;margin-left:var(--gutter);position:relative;z-index:1}
.announcement .hero-title{font-family:var(--font-ui);font-size:clamp(44px,5vw,72px);font-weight:700;line-height:1.06;letter-spacing:-.035em;text-wrap:balance;max-width:10em}
.announcement .hero-meta{margin:22px 0 16px;gap:10px;color:var(--text);font-size:13px}
.announcement .hero-description{max-width:38ch;font-size:17px;line-height:1.55;color:var(--text);text-wrap:pretty}
.announcement .hero-actions{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;margin-top:28px}
.announcement .hero-actions>.primary{min-height:54px;padding-inline:24px;font-size:15px;box-shadow:none}
.announcement .hero-actions>.primary .icon{width:24px;height:24px}
.announcement .home-action{min-width:64px;width:64px;min-height:54px;gap:3px;padding:0;font-size:11px;line-height:16px}
.announcement .home-action .icon{width:24px;height:24px}
.announcement .hero-thumbs{bottom:28px;gap:10px}
.announcement .hero-thumb{width:76px;height:48px;border-radius:8px}
.announcement .hero-position{left:var(--gutter);right:auto;bottom:36px;padding:0;background:none;border:0;font-size:13px}
.announcement.hero:before{background:linear-gradient(90deg,var(--bg) 0%,rgb(var(--color-bg-rgb) / .94) 19%,rgb(var(--color-bg-rgb) / .83) 34%,rgb(var(--color-bg-rgb) / .48) 53%,transparent 82%),linear-gradient(0deg,var(--bg),transparent 40%,rgb(var(--color-bg-rgb) / .15) 80%,rgb(var(--color-bg-rgb) / .5))}
.announcement.hero[data-title=morn]:before{background:linear-gradient(90deg,var(--bg) 0%,rgb(var(--color-bg-rgb) / .97) 26%,rgb(var(--color-bg-rgb) / .74) 43%,transparent 78%),linear-gradient(0deg,var(--bg),transparent 50%)}
.announcement.hero .hero-image{mask-image:none}
@media(max-width:640px),(min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .announcement.hero{display:block;min-height:0;padding:0 0 68px}
  .announcement.hero .hero-image,.announcement.hero[data-title=morn] .hero-image{height:410px;width:100%;left:0;right:0;object-position:center 30%;mask-image:none}
  .announcement.hero[data-title=odyssey] .hero-image{object-position:66% 34%}
  .announcement.hero:before,.announcement.hero[data-title=morn]:before{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 24%,rgb(var(--color-bg-rgb) / .98) 33%,rgb(var(--color-bg-rgb) / .78) 44%,rgb(var(--color-bg-rgb) / .1) 72%,rgb(var(--color-bg-rgb) / .35) 100%)}
  .announcement .hero-content,.announcement.hero[data-title=morn] .hero-content,.announcement.hero[data-title=alyosha] .hero-content{width:auto;margin:0;padding:286px var(--gutter) 0;text-align:left}
  .announcement .hero-title{font-size:clamp(32px,9.7vw,44px);max-width:11em;letter-spacing:-.03em;line-height:1.08}
  .announcement .hero-meta{justify-content:flex-start;font-size:12px;gap:8px;margin:16px 0 12px}
  .announcement .hero-description{font-size:15px;max-width:38ch;margin:0;line-height:1.5}
  .announcement .hero-actions{max-width:none;justify-content:flex-start;gap:8px;margin:22px 0 0}
  .announcement .hero-actions>.primary{flex:1;flex-basis:auto;min-width:0;min-height:50px;font-size:14px;padding-inline:12px}
  .announcement .hero-actions .home-action{flex-shrink:0;min-width:44px;width:44px;min-height:50px;padding:0}
  .announcement .home-action span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .announcement .hero-position{display:none}
  .announcement .hero-thumbs{bottom:6px;left:var(--gutter);right:auto;justify-content:flex-start;gap:0}
  .announcement .hero-thumb,.announcement .hero-thumb.active{width:44px;height:44px;opacity:1;background:none;border:0;border-radius:0}
  .announcement .hero-thumb img{display:none}
  .announcement .hero-thumb:before{content:'';display:block;position:absolute;top:20px;left:7px;right:7px;height:3px;background:var(--color-control-border);border-radius:2px}
  .announcement .hero-thumb.active:before{background:var(--lime)}
  .announcement .hero-rotation{margin-left:6px}
}
@media(min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .announcement.hero .hero-image,.announcement.hero[data-title=morn] .hero-image{height:500px}
  .announcement .hero-content,.announcement.hero[data-title=morn] .hero-content,.announcement.hero[data-title=alyosha] .hero-content{padding-top:350px}
  .announcement .hero-title{font-size:52px}
  .announcement .hero-description{font-size:18px;max-width:44ch}
  .announcement .hero-actions{max-width:480px}
}
@media(max-width:360px){
  .announcement .hero-content,.announcement.hero[data-title=morn] .hero-content,.announcement.hero[data-title=alyosha] .hero-content{padding-top:256px}
  .announcement .hero-actions>.primary{font-size:13px;gap:7px}
}

.kiino-sync-status{position:fixed;z-index:10000;bottom:calc(84px + env(safe-area-inset-bottom));left:16px;right:16px;margin:auto;max-width:560px;padding:12px 16px;border:1px solid var(--color-error,#ff8a80);border-radius:12px;background:#292929;color:#fff;display:flex;gap:12px;align-items:center;font-size:14px}.kiino-sync-status[hidden]{display:none}.kiino-sync-status button{flex-shrink:0;padding:8px 12px;border-radius:8px;background:#ff913d;color:#080808;font-weight:600}