:root{color-scheme:dark;--ink:#10110f;--cream:#f1dfbb;--blue:#208fca}
*{box-sizing:border-box}
html{min-width:240px;background:var(--ink)}
body{margin:0;color:var(--cream);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 50% 37%,#26251d55,transparent 57%),var(--ink)}
.scenery{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scenery__left,.scenery__right{position:absolute;top:0;bottom:0;width:clamp(200px,38vw,680px);background-image:url('assets/channel-art.jpg');background-repeat:no-repeat;background-size:auto max(100svh,800px);opacity:.7}
.scenery__left{left:0;background-position:left center;mask-image:linear-gradient(to right,#000 8%,#0009 38%,transparent 98%);-webkit-mask-image:linear-gradient(to right,#000 8%,#0009 38%,transparent 98%)}
.scenery__right{right:0;background-position:right center;mask-image:linear-gradient(to left,#000 3%,#0009 32%,transparent 96%);-webkit-mask-image:linear-gradient(to left,#000 3%,#0009 32%,transparent 96%)}
.scenery:after{content:"";position:absolute;inset:0;background:linear-gradient(#10110f20,transparent 25%,#10110f44 75%,var(--ink))}
.page{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding: max(28px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
main{width:min(100%,660px);text-align:center;padding-block:clamp(24px,5vh,60px)}
.logo{display:block;width:clamp(112px,16vw,156px);height:auto;aspect-ratio:1;border-radius:50%;margin:0 auto 28px;box-shadow:0 0 60px #bc8e3a0d}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,6.1vw,78px);font-weight:400;line-height:1.08;letter-spacing:.025em;text-transform:uppercase;margin:0 0 20px;text-shadow:0 3px 25px #0008;overflow-wrap:anywhere}
.intro{font-size:clamp(8px,3.4vw,21px);line-height:1.6;color:#d8d1c3;margin:0;white-space:nowrap}
.channels{display:grid;gap:14px;width:min(100%,320px);margin:32px auto 0}
.channel{display:flex;align-items:center;justify-content:center;gap:14px;min-height:64px;padding:18px 23px;border:1px solid #77c9f266;border-radius:6px;background:linear-gradient(110deg,#208fca,#1674ad);box-shadow:0 8px 35px #087db526,inset 0 1px #c3edff20;color:#fff;font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .18s,box-shadow .18s,transform .18s;-webkit-tap-highlight-color:#50b5ea33}
.telegram{width:23px;height:23px;flex-shrink:0}
.channel:focus-visible{outline:3px solid var(--cream);outline-offset:5px}
.channel:active{transform:translateY(1px);box-shadow:0 3px 14px #087db526}
@media(hover:hover){.channel:hover{background:linear-gradient(110deg,#2c9fdb,#1b85c0);box-shadow:0 10px 42px #087db544;transform:translateY(-2px)}}
@media(max-width:600px){.page{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right))}.scenery__left,.scenery__right{opacity:.32;width:48%;background-size:auto max(100svh,800px)}.logo{margin-bottom:24px}h1{margin-bottom:18px}.channel{min-height:62px;padding:17px 20px;font-size:15px;gap:12px}}
@media(max-width:340px){.page{padding-inline:16px}.channel{gap:9px;padding-inline:14px;font-size:14px}}
@media(max-height:650px) and (min-width:601px){main{padding-block:25px}.logo{width:92px;margin-bottom:16px}h1{font-size:48px;margin-bottom:12px}.intro{font-size:18px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.channel{transition:none}}
.subscribe{font-size:16px;line-height:1.5;color:#d8d1c3;margin:16px 0 0}