:root { --bg:#f2f1ed; --surface:#fff; --text:#15141a; --muted:#6f6b78; --line:rgba(24,21,32,.13); --accent:#7c5cff; --accent-2:#ff4fa4; --header:rgba(242,241,237,.84); }
:root[data-theme="dark"] { --bg:#0c0b11; --surface:#15131c; --text:#f7f5fb; --muted:#a8a3b5; --line:rgba(255,255,255,.12); --accent:#9b82ff; --accent-2:#ff63b0; --header:rgba(12,11,17,.78); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,"Yu Gothic",sans-serif; transition:background .25s,color .25s; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.site-header { position:sticky; top:0; z-index:20; height:76px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; border-bottom:1px solid var(--line); background:var(--header); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; font-size:15px; letter-spacing:.08em; }
.brand b { color:var(--accent); font-size:10px; display:block; letter-spacing:.24em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:white; font-weight:900; background:linear-gradient(135deg,var(--accent),var(--accent-2)); transform:rotate(-6deg); box-shadow:0 7px 24px rgba(124,92,255,.28); }
nav { display:flex; gap:clamp(18px,2.2vw,32px); margin-left:auto; margin-right:30px; }
nav a { font-size:11px; letter-spacing:.16em; color:var(--muted); }
.share-mini { margin-right:12px; padding:10px 14px; border:0; border-right:1px solid var(--line); color:var(--muted); background:transparent; font-size:9px; letter-spacing:.16em; cursor:pointer; }
.theme-button { width:40px; height:40px; border:1px solid var(--line); color:var(--text); background:var(--surface); border-radius:50%; cursor:pointer; }
.hero { min-height:calc(100vh - 76px); padding:90px clamp(22px,8vw,130px); display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:8vw; overflow:hidden; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--accent); font-size:10px; letter-spacing:.24em; font-weight:800; }
.eyebrow span { width:27px; height:2px; background:currentColor; }
.hero h1,.section-heading h2 { margin:23px 0; font-size:clamp(52px,7vw,104px); line-height:.96; letter-spacing:-.07em; }
.hero h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--accent); text-shadow:0 0 45px rgba(124,92,255,.18); }
.lead { max-width:580px; color:var(--muted); font-size:15px; line-height:2; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 48px; }
.button { min-height:54px; padding:0 22px; display:inline-flex; align-items:center; gap:14px; border-radius:4px; font-size:13px; font-weight:700; }
.button span { margin-left:8px; }
.button.primary { color:white; background:linear-gradient(110deg,var(--accent),#6a43fa); box-shadow:0 15px 40px rgba(124,92,255,.28); }
.button.ghost { border:1px solid var(--line); background:var(--surface); }
.mini-stats { display:flex; gap:clamp(22px,4vw,54px); }
.mini-stats div { display:grid; gap:5px; }
.mini-stats strong { font-size:21px; }
.mini-stats span { color:var(--muted); font-size:8px; letter-spacing:.16em; }
.hero-visual { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.hero-visual::before { content:""; position:absolute; inset:6%; border-radius:42% 58% 55% 45%/48% 38% 62% 52%; background:radial-gradient(circle at 40% 35%,rgba(255,99,176,.5),transparent 35%),linear-gradient(145deg,var(--accent),#261d58 65%); filter:saturate(1.1); box-shadow:0 0 100px rgba(124,92,255,.24); transform:rotate(-8deg); }
.hero-visual img { position:relative; z-index:2; width:55%; border-radius:48% 52% 45% 55%/52% 42% 58% 48%; border:1px solid rgba(255,255,255,.35); box-shadow:0 30px 80px rgba(0,0,0,.4); transform:rotate(4deg); }
.orbit { position:absolute; z-index:1; border:1px solid rgba(155,130,255,.4); border-radius:50%; }
.orbit-one { inset:0; transform:rotate(18deg) scaleY(.55); }
.orbit-two { inset:12%; transform:rotate(-32deg) scaleX(.55); }
.live-badge { position:absolute; top:9%; right:0; z-index:4; padding:10px 14px; border-radius:30px; color:white; background:rgba(14,12,20,.82); border:1px solid rgba(255,255,255,.18); font-size:9px; letter-spacing:.12em; backdrop-filter:blur(10px); }
.live-badge i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#ff3f81; box-shadow:0 0 12px #ff3f81; }
.visual-note { position:absolute; bottom:8%; left:0; z-index:4; color:var(--muted); font-size:9px; letter-spacing:.28em; transform:rotate(-90deg); }
.ticker { padding:16px 0; overflow:hidden; border-block:1px solid var(--line); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.25em; white-space:nowrap; }
.ticker div { width:max-content; animation:ticker 24s linear infinite; }
.ticker i { display:inline-block; width:5px; height:5px; margin:0 34px; border-radius:50%; background:var(--accent-2); }
@keyframes ticker { to { transform:translateX(-35%); } }
.twitch-section { padding:115px clamp(22px,8vw,130px); border-bottom:1px solid var(--line); background:linear-gradient(135deg,rgba(145,70,255,.08),transparent 52%); }
.twitch-card { position:relative; min-height:510px; padding:clamp(38px,6vw,82px); display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:clamp(45px,8vw,120px); overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 30px 100px rgba(0,0,0,.12); }
.twitch-card::before { content:"TWITCH"; position:absolute; right:-1vw; bottom:-4vw; color:transparent; -webkit-text-stroke:1px var(--line); font-size:clamp(90px,16vw,240px); font-weight:900; letter-spacing:-.08em; line-height:1; pointer-events:none; }
.twitch-visual { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.twitch-visual::before { content:""; position:absolute; inset:7%; border-radius:44% 56% 52% 48%/58% 44% 56% 42%; background:linear-gradient(145deg,#9146ff,#3a176e); transform:rotate(-7deg); box-shadow:0 28px 70px rgba(145,70,255,.3); }
.twitch-visual img { position:relative; z-index:2; width:62%; border:1px solid rgba(255,255,255,.32); border-radius:50%; box-shadow:0 22px 65px rgba(0,0,0,.4); }
.twitch-orbit { position:absolute; inset:0; z-index:1; border:1px solid rgba(145,70,255,.45); border-radius:50%; transform:scaleY(.62) rotate(28deg); }
.twitch-visual>span { position:absolute; right:0; bottom:12%; z-index:3; padding:10px 14px; border:1px solid rgba(255,255,255,.16); border-radius:30px; color:white; background:rgba(14,12,20,.84); font-size:8px; letter-spacing:.17em; }
.twitch-visual>span i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#bf94ff; box-shadow:0 0 12px #9146ff; }
.twitch-copy { position:relative; z-index:2; }.twitch-copy h2 { margin:21px 0 25px; font-size:clamp(46px,5.5vw,80px); line-height:.98; letter-spacing:-.07em; }.twitch-copy h2 em { color:#9146ff; font-style:normal; }.twitch-copy>p:not(.eyebrow) { max-width:590px; color:var(--muted); font-size:13px; line-height:2; }
.twitch-tags { display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 32px; }.twitch-tags span { padding:8px 11px; border:1px solid var(--line); border-radius:30px; color:var(--muted); font-size:7px; letter-spacing:.15em; }.button.twitch-button { color:white; background:#9146ff; box-shadow:0 15px 45px rgba(145,70,255,.28); }
.channels-section { padding:100px clamp(22px,8vw,130px) 120px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:54px; }
.section-heading h2 { font-size:clamp(40px,5vw,72px); margin-bottom:0; }
.section-heading>p { color:var(--muted); line-height:1.9; font-size:13px; }
.channel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.channel-card { position:relative; min-height:410px; padding:34px; display:flex; flex-direction:column; justify-content:end; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--surface); transition:transform .25s,border-color .25s; }
.channel-card:hover { transform:translateY(-7px); border-color:var(--accent); }
.channel-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(.3); }
.channel-card::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 20%,var(--surface) 83%); }
.channel-card>* { position:relative; z-index:2; }
.channel-card.violet { --card-accent:#9b82ff; }.channel-card.pink { --card-accent:#ff63b0; }.channel-card.cyan { --card-accent:#48d8d0; }
.channel-index { position:absolute; top:24px; left:28px; color:var(--muted); font-size:10px; letter-spacing:.2em; }
.channel-card small { color:var(--card-accent,var(--accent)); font-size:8px; letter-spacing:.19em; }
.channel-card h3 { margin:10px 0; font-size:22px; }
.channel-card p { margin:0; max-width:85%; color:var(--muted); font-size:12px; line-height:1.7; }
.card-arrow { position:absolute; right:28px; bottom:30px; font-size:18px; }
.channel-content dl { display:flex; gap:26px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.channel-content dl div { display:grid; gap:5px; }.channel-content dt { color:var(--muted); font-size:7px; letter-spacing:.14em; }.channel-content dd { margin:0; font-size:17px; font-weight:800; }
.data-note { margin:24px 0 0; text-align:right; color:var(--muted); font-size:9px; letter-spacing:.1em; }

.blog-section { padding:115px clamp(22px,8vw,130px); display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(55px,9vw,140px); overflow:hidden; border-top:1px solid var(--line); background:linear-gradient(145deg,rgba(255,79,164,.07),transparent 42%),var(--bg); }
.blog-copy h2 { margin:22px 0 28px; font-size:clamp(46px,5.4vw,78px); line-height:.98; letter-spacing:-.07em; }
.blog-copy h2 em { color:var(--accent-2); font-style:normal; }
.blog-copy>p:not(.eyebrow) { max-width:590px; color:var(--muted); font-size:13px; line-height:2; }
.blog-tags { display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 32px; }
.blog-tags span { padding:9px 12px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:30px; color:var(--muted); font-size:8px; letter-spacing:.08em; }
.blog-tags i { color:var(--accent-2); }
.button.blog-button { color:white; background:linear-gradient(110deg,var(--accent-2),#d93388); box-shadow:0 15px 45px rgba(255,79,164,.22); }
.blog-preview { position:relative; min-height:500px; padding:68px 28px 28px; display:grid; grid-template-columns:1fr 1fr; gap:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 35px 100px rgba(0,0,0,.13); transform:rotate(1.5deg); }
.blog-preview::before { content:"BLOG"; position:absolute; right:-22px; bottom:-18px; color:transparent; -webkit-text-stroke:1px var(--line); font-size:clamp(80px,11vw,160px); font-weight:900; letter-spacing:-.08em; line-height:.8; pointer-events:none; }
.blog-window-bar { position:absolute; inset:0 0 auto; height:48px; padding:0 18px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); }
.blog-window-bar span { width:7px; height:7px; border-radius:50%; background:var(--accent-2); opacity:.75; }
.blog-window-bar span:nth-child(2) { background:var(--accent); }.blog-window-bar span:nth-child(3) { background:#48d8d0; }
.blog-window-bar b { margin-left:auto; color:var(--muted); font-size:8px; font-weight:500; letter-spacing:.12em; }
.blog-preview article { position:relative; z-index:1; min-height:330px; padding:30px 24px; display:flex; flex-direction:column; justify-content:end; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:linear-gradient(145deg,rgba(124,92,255,.13),transparent 60%),var(--bg); }
.blog-preview article:nth-of-type(2) { background:linear-gradient(145deg,rgba(255,79,164,.15),transparent 60%),var(--bg); }
.blog-preview article small { color:var(--accent); font-size:7px; letter-spacing:.18em; }.blog-preview article:nth-of-type(2) small { color:var(--accent-2); }
.blog-preview article h3 { margin:13px 0; font-size:clamp(20px,2vw,28px); line-height:1.25; letter-spacing:-.04em; }
.blog-preview article p { margin:0; color:var(--muted); font-size:10px; line-height:1.8; }
.blog-preview article>i { margin-top:24px; color:var(--accent); }
.blog-preview-foot { position:relative; z-index:1; grid-column:1/-1; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:8px; letter-spacing:.13em; }
.blog-preview-foot i { color:var(--accent-2); font-size:14px; }

.link-hub-section { padding:115px clamp(22px,8vw,130px) 125px; border-top:1px solid var(--line); background:linear-gradient(155deg,rgba(72,216,208,.06),transparent 45%); }
.link-hub-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:55px; }
.link-hub-heading h2 { margin:22px 0 0; font-size:clamp(46px,5.8vw,82px); line-height:.98; letter-spacing:-.07em; }
.link-hub-heading h2 em { color:#30bcb5; font-style:normal; }
.link-hub-heading>p { color:var(--muted); font-size:13px; line-height:1.9; }
.social-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.social-card { position:relative; min-height:310px; padding:30px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface); transition:transform .25s,border-color .25s,box-shadow .25s; }
.social-card:hover { transform:translateY(-6px); border-color:var(--card-color,var(--accent)); box-shadow:0 25px 70px rgba(0,0,0,.11); }
.social-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 95% 0%,color-mix(in srgb,var(--card-color,var(--accent)) 18%,transparent),transparent 42%); pointer-events:none; }
.social-card>* { position:relative; z-index:1; }
.social-card.x-card { grid-column:span 2; --card-color:var(--text); }
.social-card.support-card { grid-column:span 3; min-height:340px; }.social-card.fanbox-card { --card-color:#ff6b96; }.social-card.booth-card { --card-color:#46b5d1; }
.social-icon { width:46px; height:46px; margin-bottom:auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--card-color,var(--accent)); background:var(--bg); font-size:18px; }
.social-card small { margin-top:35px; color:var(--card-color,var(--accent)); font-size:8px; font-weight:800; letter-spacing:.18em; }
.social-card h3 { margin:10px 0 3px; font-size:clamp(24px,2.2vw,34px); letter-spacing:-.04em; }.social-card>b { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.social-card p { margin:18px 0 26px; max-width:520px; color:var(--muted); font-size:11px; line-height:1.8; }
.social-open { margin-top:auto; padding-top:17px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; font-weight:800; }.social-open i { color:var(--card-color,var(--accent)); }

.fortune-section { padding:115px clamp(22px,9vw,150px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10vw; background:linear-gradient(135deg,rgba(124,92,255,.06),transparent 45%); border-top:1px solid var(--line); }
.fortune-intro h2,.community-section h2,.share-section h2 { margin:22px 0 28px; font-size:clamp(48px,6vw,86px); line-height:.98; letter-spacing:-.07em; }
.fortune-intro h2 em { color:var(--accent-2); font-style:normal; }.fortune-intro>p:last-child { color:var(--muted); font-size:13px; line-height:2; }
.fortune-machine { width:min(440px,100%); margin:auto; padding:20px; border:1px solid rgba(155,130,255,.4); border-radius:18px; background:linear-gradient(145deg,#211a39,#110f18); box-shadow:0 35px 100px rgba(0,0,0,.28),inset 0 0 35px rgba(155,130,255,.12); color:white; }
.machine-top { height:90px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; }.machine-top span { color:#b9a8ff; font-size:9px; letter-spacing:.3em; }.machine-top b { font-size:26px; line-height:.8; letter-spacing:-.06em; text-align:right; }
.fortune-screen { min-height:300px; padding:34px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--fortune-color,#9b82ff) 24%,transparent),transparent 58%),#08070d; box-shadow:inset 0 0 45px rgba(0,0,0,.8); }
.fortune-screen small { color:var(--fortune-color); font-size:10px; letter-spacing:.28em; }.fortune-screen strong { margin:13px 0; color:var(--fortune-color,#fff); font-size:clamp(58px,7vw,88px); line-height:1; text-shadow:0 0 35px color-mix(in srgb,var(--fortune-color,#9b82ff) 65%,transparent); }.fortune-screen p { max-width:280px; color:#c6c1d0; font-size:12px; line-height:1.8; }.fortune-screen div { margin-top:16px; padding-top:16px; width:100%; border-top:1px solid rgba(255,255,255,.1); color:#8e889d; font-size:8px; letter-spacing:.16em; }.fortune-screen div b { color:white; margin-left:8px; }.screen-stars { color:#9b82ff; font-size:18px; }
.fortune-machine>button { width:100%; height:57px; margin-top:16px; border:0; border-radius:8px; color:white; background:linear-gradient(110deg,#7c5cff,#ff4fa4); font-weight:800; cursor:pointer; box-shadow:0 10px 30px rgba(124,92,255,.25); }.fortune-machine>button:disabled { opacity:.65; cursor:default; }.fortune-machine>button.fortune-share { height:40px; margin-top:8px; color:#beb7ce; background:transparent; border:1px solid rgba(255,255,255,.13); font-size:10px; box-shadow:none; }.fortune-machine.drawing .fortune-screen { animation:pulse .28s infinite alternate; }
@keyframes pulse { to { filter:brightness(1.35); } }

.community-section { position:relative; padding:140px 22px; overflow:hidden; text-align:center; color:white; background:#100d1c; border-top:1px solid rgba(255,255,255,.1); }
.community-section>*:not(.community-glow) { position:relative; z-index:2; }.community-section .eyebrow { justify-content:center; color:#c1b2ff; }.community-section h2 { margin-inline:auto; max-width:900px; }.community-section>p:not(.eyebrow) { margin:0 auto 34px; max-width:610px; color:#aaa4b7; font-size:13px; line-height:2; }.community-glow { position:absolute; inset:-30%; background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.32),transparent 40%),radial-gradient(circle at 25% 70%,rgba(255,79,164,.16),transparent 28%); }.discord-bubble { display:inline-block; margin-bottom:24px; padding:10px 16px; border:1px solid rgba(255,255,255,.13); border-radius:40px; color:#c9c2d5; background:rgba(255,255,255,.05); font-size:10px; letter-spacing:.08em; }.button.discord { background:#5865f2; box-shadow:0 15px 50px rgba(88,101,242,.32); }.community-note { display:block; margin-top:18px; color:#777183; font-size:9px; }
.community-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }.button.notify { border:1px solid rgba(255,255,255,.22); background:linear-gradient(110deg,#7c5cff,#ff4fa4); box-shadow:0 15px 50px rgba(155,130,255,.24); }.community-note { max-width:620px; margin-inline:auto; line-height:1.8; }
.share-section { padding:100px clamp(22px,8vw,130px); display:flex; align-items:center; justify-content:space-between; gap:50px; border-top:1px solid var(--line); }.share-section h2 { margin-bottom:0; font-size:clamp(44px,5vw,70px); }.share-section>button { width:min(370px,100%); height:120px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); color:var(--text); background:var(--surface); cursor:pointer; font-weight:800; }.share-section>button b { font-size:28px; color:var(--accent); }
footer { padding:65px clamp(22px,6vw,90px) 34px; display:grid; grid-template-columns:1.1fr 1.5fr 1fr; align-items:start; gap:50px; border-top:1px solid var(--line); color:var(--muted); }footer p { margin:0; font-size:10px; line-height:1.9; }footer>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }footer>div a { display:inline-flex; align-items:center; gap:6px; font-size:8px; letter-spacing:.13em; }footer small { grid-column:1/-1; padding-top:30px; border-top:1px solid var(--line); font-size:8px; letter-spacing:.16em; }.toast { position:fixed; z-index:50; right:24px; bottom:24px; padding:14px 18px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.16); border-radius:8px; color:white; background:#211a39; font-size:11px; box-shadow:0 15px 50px rgba(0,0,0,.3); }.toast i { color:#6ee7b7; }

@media (max-width:900px) { nav,.share-mini{display:none}.theme-button{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:65px}.hero-visual{width:min(560px,100%);margin:0 auto}.twitch-card{grid-template-columns:1fr}.twitch-visual{width:min(430px,100%);margin:auto}.section-heading{display:block}.channel-grid{grid-template-columns:1fr}.channel-card{min-height:380px}.blog-section{grid-template-columns:1fr}.blog-preview{width:min(700px,100%);margin:auto}.link-hub-heading{display:block}.link-hub-heading>p{margin-top:25px}.social-card.x-card{grid-column:span 3}.social-card.support-card{grid-column:span 3}.fortune-section{grid-template-columns:1fr}.share-section{display:block}.share-section>button{margin-top:35px}footer{grid-template-columns:1fr}footer>div{justify-content:flex-start}footer small{grid-column:auto} }
@media (max-width:520px) { .site-header{height:66px}.hero{min-height:auto;padding-bottom:70px}.hero h1{font-size:50px}.button{width:100%;justify-content:center}.mini-stats{justify-content:space-between;gap:10px}.mini-stats strong{font-size:17px}.channels-section{padding-top:74px}.blog-section{padding-top:78px}.blog-preview{min-height:auto;padding:62px 18px 20px;grid-template-columns:1fr;transform:none}.blog-preview article{min-height:250px}.blog-preview-foot{grid-column:auto}.blog-window-bar b{font-size:7px}.link-hub-section{padding-top:78px}.social-grid{grid-template-columns:1fr}.social-card.x-card,.social-card.support-card{grid-column:auto;min-height:300px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }