@font-face { font-family: UpdateManrope; src: url('/static/fonts/selfhost/manrope-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: UpdateManrope; src: url('/static/fonts/selfhost/manrope-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: UpdateRubik; src: url('/static/fonts/selfhost/rubik-variable.ttf') format('truetype'); font-weight: 300 900; font-display: swap; }
:root { --paper: #fffaf2; --ink: #262537; --muted: #646275; --accent: #509fb9; --accent-rgb: 80,159,185; }
* { box-sizing: border-box; }html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: UpdateManrope, sans-serif; overflow-x: clip; }
h1,h2,p,figure { margin: 0; }h1,h2 { font-family: UpdateRubik, sans-serif; text-wrap: balance; }a { color: inherit; }a:focus-visible { outline: 3px solid #ff985a; outline-offset: 6px; }
.line-icon { width: 1em; height: 1em; display: block; }
.page-nav { position: absolute; z-index: 10; top: 30px; left: 50%; transform: translateX(-50%); width: min(1200px,calc(100% - 90px)); height: 78px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; background: #ffffffeb; border: 1px solid #ffffff; border-radius: 22px; box-shadow: 0 8px 35px #1f193023; }
.brand { display: flex; align-items: center; gap: 8px; font-family: UpdateRubik,sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.05em; text-decoration: none; }.brand i { width: 7px; height: 7px; background: #ec7552; border-radius: 50%; }
.back { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; text-decoration: none; }.back > span { font-size: 19px; }
.hero { position: relative; min-height: min(950px,100svh); margin: 15px; border-radius: 36px; display: grid; place-items: center; padding: 165px 30px 120px; overflow: clip; isolation: isolate; background: #3b4450; }
.hero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('/static/img/cobblemonupdate/screenshots/glavnajaobloshka.png') center / cover; transform: scale(1.025); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#332947b8, #1b26264d 60%,#16242150),radial-gradient(ellipse at 50% 45%,#e7773633,transparent 65%); }
.hero-copy { position: relative; z-index: 4; text-align: center; width: 100%; }.hero-lead { font-family: UpdateRubik,sans-serif; font-size: clamp(18px,2.2vw,30px); font-weight: 500; color: #fff6e9; text-shadow: 0 3px 10px #0008; }
.hero h1 { display: flex; flex-direction: column; align-items: center; margin-top: 20px; font-size: clamp(60px,10.8vw,160px); line-height: 1.06; letter-spacing: -.04em; font-weight: 900; text-transform: uppercase; color: #ffe88d; -webkit-text-stroke: 1px #fff2b0; text-shadow: 0 4px 0 #c27628, 0 9px 0 #633c2d, 0 18px 38px #1613238c; }
.hero h1 strong { font-size: .38em; letter-spacing: .02em; font-weight: 700; margin-top: 20px; color: #fff5db; -webkit-text-stroke: 0; text-shadow: 0 3px 15px #0006; }
.button { display: inline-flex; align-items: center; gap: 25px; margin-top: 45px; padding: 17px 28px; border: 1px solid #fff5d2; border-radius: 14px; background: #ffe48a; color: #523e32; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 5px 0 #bd7833,0 15px 35px #0003; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-3px); background: #ffedb3; }.button > span { font-size: 22px; }
.pokemon { position: absolute; height: auto; object-fit: contain; pointer-events: none; user-select: none; z-index: 3; filter: drop-shadow(0 18px 16px #24203c25); }
.hero-mew { width: clamp(140px,18vw,260px); top: 18%; right: 2%; --tilt: 12deg; }.hero-pikachu { width: clamp(130px,19vw,270px); left: 2%; bottom: 30px; --tilt: -13deg; }.hero-charizard { width: clamp(120px,19vw,265px); right: 1%; bottom: 15px; --tilt: 9deg; }
.float { animation: pokemon-float 7s ease-in-out infinite; }.hop { animation: pokemon-hop 6s ease-in-out infinite; animation-delay: -1s; }
.release-list { margin: 0 auto; width: 100%; }
.release-item { position: relative; scroll-margin-top: 40px; }.release-item h2 { font-size: clamp(36px,5.4vw,78px); line-height: 1.08; letter-spacing: -.045em; font-weight: 700; }
.with-preview { --accent: #579ab8; --accent-rgb: 87,154,184; padding: 85px max(40px,calc((100% - 1240px) / 2)) 35px; background: radial-gradient(ellipse at 50% 65%,rgba(var(--accent-rgb),.09), transparent 68%); }
.with-preview:nth-of-type(4n+2) { --accent: #bd7391; --accent-rgb: 189,115,145; }.with-preview:nth-of-type(4n+3) { --accent: #799c64; --accent-rgb: 121,156,100; }.with-preview:nth-of-type(4n) { --accent: #a58aca; --accent-rgb: 165,138,202; }
.with-preview > h2 { max-width: 1050px; text-align: center; margin: 0 auto 42px; background: linear-gradient(#262537,#535266); background-clip: text; -webkit-background-clip: text; color: transparent; }
.release-body { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; min-width: 0; }
.release-copy { min-width: 0; }.release-copy p,.release-copy li { font-size: 16px; line-height: 1.8; color: var(--muted); }.release-copy p { text-wrap: pretty; }
.release-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.with-preview .release-copy li { position: relative; padding: 20px 23px 20px 38px; border: 1px solid rgba(var(--accent-rgb),.21); border-radius: 16px; background: #ffffffc7; box-shadow: 0 5px 18px rgba(var(--accent-rgb),.05); }.with-preview .release-copy li::before { content: ''; position: absolute; left: 21px; top: 31px; height: 4px; width: 4px; background: var(--accent); border-radius: 50%; }
.with-preview .release-copy > p { padding: 28px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 18px; background: #ffffffad; }
.release-visual { position: relative; min-width: 0; }.preview { position: relative; width: 100%; overflow: hidden; border-radius: 28px; border: 2px solid rgba(var(--accent-rgb),.35); padding: 6px; background: #ffffffad; box-shadow: 0 12px 40px rgba(var(--accent-rgb),.1); }
.preview-empty { min-height: 330px; border-radius: 21px; background: linear-gradient(145deg,rgba(var(--accent-rgb),.1),rgba(var(--accent-rgb),.03)); }
.preview:has(.preview-img) { z-index: 1; }
.screenshot-link { display: block; border-radius: 21px; overflow: hidden; cursor: zoom-in; }
.screenshot-link:focus-visible { outline-offset: -4px; }
.preview-img { display: block; width: 100%; height: auto; }
.release-pokemon { width: clamp(125px,12vw,185px); right: -28px; bottom: -25px; --tilt: 8deg; }
.with-preview:nth-of-type(2n) .release-visual { order: -1; }.with-preview:nth-of-type(2n) .release-pokemon { right: auto; left: -28px; --tilt: -8deg; }
.section-divider { width: min(680px,85%); margin: 75px auto 10px; display: flex; align-items: center; gap: 23px; color: rgba(var(--accent-rgb),.55); }.section-divider > span { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.45)); }.section-divider > span:last-child { transform: rotate(180deg); }.section-divider .line-icon { width: 35px; height: 35px; }
.text-only { width: min(1120px,calc(100% - 80px)); margin: 25px auto; padding: 35px 40px; background: #ffffffa1; border: 1px solid #e7e3dc; border-radius: 20px; }.text-only h2 { font-size: 28px; letter-spacing: -.025em; margin-bottom: 15px; }.text-only .release-body { display: block; }.text-only .release-copy ul { gap: 4px; list-style: disc; padding-left: 20px; }.text-only .release-copy li { padding-left: 4px; }
code { display: inline-block; padding: 0 6px; background: #fff; border: 1px solid #dedce5; border-radius: 5px; font-family: inherit; font-size: .95em; color: #78557b; }
.release-footer { display: flex; justify-content: space-between; max-width: 1200px; width: calc(100% - 80px); margin: 60px auto 0; padding: 30px 0; border-top: 1px solid #e3dfd7; font-size: 12px; }.release-footer a { text-decoration: none; }
.cn-update-motion .cn-update-reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s ease, transform .7s ease; }.cn-update-motion .cn-update-reveal.is-visible { opacity: 1; transform: none; }
@keyframes pokemon-float { 0%,100% { transform: translate(0,0) rotate(var(--tilt,0deg)); } 50% { transform: translate(5px,-14px) rotate(calc(var(--tilt,0deg) + 4deg)); } }
@keyframes pokemon-hop { 0%,65%,100% { transform: translateY(0) rotate(var(--tilt,0deg)); } 78% { transform: translateY(-16px) rotate(calc(var(--tilt,0deg) - 3deg)); } 89% { transform: translateY(-2px) rotate(var(--tilt,0deg)); } }
@media (max-width: 900px) {
  .page-nav { width: calc(100% - 60px); padding: 0 23px; height: 68px; }.hero { min-height: 750px; }.hero-mew { top: 17%; width: 150px; }.hero-pikachu,.hero-charizard { width: 175px; }.hero h1 { font-size: 11vw; }.with-preview { padding: 70px 32px 25px; }.release-body { gap: 25px; }.release-copy p,.release-copy li { font-size: 14px; }.preview-empty { min-height: 300px; }.release-pokemon { width: 130px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 20px; }.page-nav { top: 20px; width: calc(100% - 40px); height: 60px; padding: 0 17px; border-radius: 16px; }.brand { font-size: 21px; }.back { font-size: 10px; gap: 5px; }.back > span { font-size: 16px; }
  .hero { margin: 8px; border-radius: 25px; min-height: 720px; padding: 155px 15px 180px; }.hero-lead { font-size: 14px; }.hero h1 { font-size: clamp(39px,11.4vw,68px); margin-top: 20px; text-shadow: 0 3px 0 #c27628,0 6px 0 #633c2d,0 14px 30px #0006; }.hero h1 strong { font-size: .55em; }.button { padding: 14px 21px; font-size: 12px; gap: 15px; margin-top: 30px; }.hero-mew { top: 105px; right: 0; width: 100px; }.hero-pikachu { left: 0; bottom: 30px; width: 125px; }.hero-charizard { right: -10px; bottom: 35px; width: 130px; }
  .with-preview { padding: 55px 24px 20px; }.release-item h2 { font-size: 38px; overflow-wrap: anywhere; }.with-preview > h2 { margin-bottom: 25px; }.release-body { grid-template-columns: 1fr; gap: 25px; }.with-preview:nth-of-type(2n) .release-visual { order: 0; }.release-copy p,.release-copy li { font-size: 14px; line-height: 1.75; }.with-preview .release-copy li { padding: 17px 17px 17px 32px; border-radius: 13px; }.with-preview .release-copy li::before { left: 17px; top: 27px; }.with-preview .release-copy > p { padding: 20px; }
  .preview { border-radius: 21px; padding: 5px; }.preview-empty { min-height: 225px; border-radius: 14px; }.screenshot-link { border-radius: 14px; }.release-pokemon { width: 105px; right: -14px; bottom: -22px; }.with-preview:nth-of-type(2n) .release-pokemon { left: -14px; }.section-divider { margin: 60px auto 0; gap: 15px; }.section-divider .line-icon { width: 25px; height: 25px; }
  .text-only { width: calc(100% - 40px); margin: 18px auto; padding: 24px; border-radius: 16px; }.text-only h2 { font-size: 24px; }.release-footer { width: calc(100% - 40px); font-size: 11px; margin-top: 40px; }
}
.screenshot-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 32px; border: 0; color: #f5f2e9; background: transparent; overflow: auto; font-family: UpdateManrope, sans-serif; }
.screenshot-viewer[open] { display: grid; place-items: center; }
.screenshot-viewer::backdrop { background: #171520d9; backdrop-filter: blur(12px); }
.viewer-panel { width: min(1360px,100%); min-width: 0; border: 1px solid #ffffff26; border-radius: 26px; background: #24232c; box-shadow: 0 35px 100px #0006; overflow: hidden; animation: viewer-enter .25s ease-out; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 28px; border-bottom: 1px solid #ffffff14; }
.viewer-caption { min-width: 0; }.viewer-caption p { font-family: UpdateRubik, sans-serif; font-size: 21px; font-weight: 500; line-height: 1.3; }.viewer-caption output { display: block; color: #b6b2c2; font-size: 12px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.viewer-close,.viewer-arrow { display: grid; place-items: center; flex-shrink: 0; padding: 0; width: 43px; height: 43px; border: 1px solid #ffffff29; border-radius: 13px; background: #ffffff0a; color: #faf5e7; cursor: pointer; transition: background .2s, border-color .2s; }
.viewer-close:hover,.viewer-arrow:hover { background: #ffe48a; color: #38302a; border-color: #ffe48a; }.viewer-close svg,.viewer-arrow svg { width: 23px; height: 23px; }.screenshot-viewer button:focus-visible,.screenshot-viewer a:focus-visible { outline: 2px solid #ffe48a; outline-offset: 4px; }
.viewer-stage { position: relative; display: grid; place-items: center; height: min(70svh,760px); min-height: 160px; padding: 22px 78px; background: #17161d; touch-action: pan-y pinch-zoom; }
.viewer-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: opacity .18s ease; }
.viewer-stage:not([data-state="ready"]) .viewer-image { opacity: 0; }
.viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: #34313fe6; }.viewer-prev { left: 20px; }.viewer-next { right: 20px; }
.viewer-loader { display: none; position: absolute; width: 32px; height: 32px; border: 2px solid #ffffff24; border-top-color: #ffe48a; border-radius: 50%; animation: viewer-spin .8s linear infinite; }.viewer-stage[data-state="loading"] .viewer-loader { display: block; }
.viewer-error { position: absolute; text-align: center; font-size: 14px; padding: 25px 65px; }.viewer-error[hidden] { display: none; }.viewer-original { display: inline-block; margin-top: 14px; color: #ffe48a; }
.viewer-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px 28px; }
.viewer-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }.viewer-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #787383; transition: width .2s, background .2s; }.viewer-dot[aria-current]::after { width: 22px; border-radius: 10px; background: #ffe48a; }.viewer-dot:hover::after { background: #eee6ca; }
@keyframes viewer-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .screenshot-viewer { padding: 12px; }.viewer-panel { border-radius: 19px; }.viewer-toolbar { padding: 18px; gap: 12px; }.viewer-caption p { font-size: 17px; }.viewer-close { width: 36px; height: 36px; border-radius: 11px; }.viewer-stage { height: 62svh; min-height: 180px; padding: 12px 6px 58px; }.viewer-arrow { top: auto; bottom: 10px; transform: none; width: 35px; height: 35px; border-radius: 10px; }.viewer-prev { left: calc(50% - 43px); }.viewer-next { right: calc(50% - 43px); }.viewer-pagination { padding: 13px 14px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; }.cn-update-motion .cn-update-reveal { opacity: 1; transform: none; } }