:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;color:#202b35;background:#dce8d3;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 12% 12%,#e4ebd5 0,transparent 48%),radial-gradient(ellipse at 100% 80%,#c5decf 0,transparent 52%),#dce8d3}
body:before{content:"";position:fixed;inset:64px 0 0;pointer-events:none;opacity:.2;background-image:url("/pattern.svg");background-size:260px 260px}
a{-webkit-tap-highlight-color:transparent;text-decoration:none;color:#168acd}
button{font:inherit;-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
[hidden]{display:none!important}
.topbar{height:64px;padding:0 30px;background:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;box-shadow:0 1px 0 #00000006}
.brand{display:flex;align-items:center;gap:10px;color:#263b4b;font-size:22px;font-weight:650;letter-spacing:-.6px}
.download{font-size:13px;font-weight:600;padding:9px 15px;border:1px solid #d9edf8;border-radius:22px;white-space:nowrap}
.download span{margin-left:4px}
main{position:relative;display:flex;align-items:center;flex-direction:column;min-height:calc(100svh - 64px);padding:60px 20px 26px}
.channel-card{width:100%;max-width:414px;padding:34px 30px 16px;background:#fff;text-align:center;border-radius:20px;box-shadow:0 8px 40px #345b3812,0 1px 3px #3b50330a}
.avatar{display:block;object-fit:cover;margin:0 auto 19px;border-radius:50%;background:#eaf4fa;box-shadow:0 0 0 5px #fff,0 0 0 6px #edf1f4}
h1{margin:0;font-size:25px;line-height:1.4;font-weight:700;letter-spacing:-.7px;overflow-wrap:anywhere}
.channel-type{margin:7px 0 23px;font-size:14px;color:#8a959e}
.description{margin:0 0 27px;font-size:14px;line-height:1.95;color:#586774}
.join-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px 12px;border-radius:28px;color:white;background:#269fda;box-shadow:0 4px 12px #229ed923;font-weight:650;font-size:16px;transition:background .15s,transform .15s}
.join-button img{flex-shrink:0}
.join-button:hover{background:#168dca}
.join-button:active{transform:scale(.985)}
.join-note{margin:13px 0 23px;font-size:12px;line-height:1.6;color:#87939c}
.secondary-actions{display:flex;align-items:center;justify-content:center;gap:17px;padding-top:19px;border-top:1px solid #f0f3f5}
.secondary-actions button{border:0;padding:8px 0;background:none;color:#168acd;cursor:pointer;font-size:13px;min-height:38px}
.secondary-actions button:hover{text-decoration:underline}
.separator{height:12px;width:1px;background:#e2e9ee}
.copy-status{margin:4px 0 0;min-height:17px;font-size:12px;color:#47886e;line-height:1.5}
.browser-hint{display:flex;align-items:flex-start;gap:10px;padding:14px 12px;margin:0 0 20px;text-align:left;background:#eef8fe;border:1px solid #e0f0fa;border-radius:12px}
.hint-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;background:#d8effd;border-radius:50%;color:#168acd;font-size:18px;margin-top:2px}
.browser-hint p{margin:0;line-height:1.8;font-size:12px;color:#57768c}
.browser-hint strong{font-weight:600;color:#2d648b}
.browser-hint p span{font-size:11px}
.fallback{margin:0 0 20px;padding:14px 8px;border-radius:12px;background:#f4f8fb;font-size:12px;line-height:1.8;color:#637785}
.fallback p{margin:0 0 8px}
.fallback a{font-weight:600}
.manual-copy{margin-top:12px;font-size:12px;text-align:left;color:#657786}
.manual-copy label{display:block;line-height:1.8;margin-bottom:6px}
.manual-copy input{display:block;width:100%;min-width:0;border:1px solid #d6e3ec;border-radius:8px;padding:10px 8px;background:#f6fafc;color:#2f6f98;font-size:12px;font-family:inherit}
.no-script{font-size:12px;line-height:1.8;color:#657786}
footer{padding-top:24px;color:#678475;font-size:11px;letter-spacing:.2px;text-align:center;line-height:1.8}
footer span{padding:0 5px}
:focus-visible{outline:3px solid #1485be;outline-offset:4px}
@media(min-width:700px){main{justify-content:center;padding-top:45px;padding-bottom:45px}}
@media(max-width:430px){.topbar{padding:0 18px}.brand{font-size:21px}.download{font-size:12px;padding:8px 12px}main{padding-top:34px}.channel-card{padding:30px 23px 14px}h1{font-size:24px}}
@media(max-width:340px){.topbar{padding:0 12px}.download{padding:8px;font-size:11px}main{padding:22px 12px}.channel-card{padding:26px 18px 12px}h1{font-size:22px}.description{font-size:12px}.join-button{font-size:14px}.browser-hint{padding:10px 8px;gap:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}