:root {
  --ink: #111318;
  --paper: #f5f1e9;
  --muted: #6f706f;
  --line: rgba(17, 19, 24, .14);
  --orange: #ff4d24;
  --panel: #101216;
  --surface: rgba(255,255,255,.54);
}

:root[data-theme="dark"] { --ink: #f4f1ea; --paper: #0d0f13; --muted: #a7a7a3; --line: rgba(255,255,255,.14); --surface: rgba(255,255,255,.07); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body { min-width: 280px; margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", sans-serif; -webkit-font-smoothing: antialiased; transition: color .45s ease, background .45s ease; }
.js body:not(.is-ready) { overflow: hidden; }
body.is-ready { overflow-x: hidden; }
a { color: inherit; }
.preloader { display: none; }
.js .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: #fff; background: #101216; transition: opacity .55s ease, visibility .55s ease; }
.preloader.is-finished { opacity: 0; visibility: hidden; }
.preloader.is-hidden { display: none; }
.preloader-core { width: min(300px, calc(100% - 64px)); display: grid; place-items: center; }
.preloader-mark { position: relative; width: 106px; height: 106px; margin-bottom: 28px; }
.preloader-mark::before, .preloader-mark::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 29px; animation: loader-rings 2s cubic-bezier(.2,.8,.2,1) infinite; }
.preloader-mark::after { animation-delay: -1s; }
.preloader-mark span { position: absolute; width: 66px; height: 66px; display: grid; place-items: center; font: 700 25px "Unbounded", sans-serif; border-radius: 19px; }
.preloader-mark span:first-child { top: 3px; left: 3px; z-index: 1; color: #fff; background: var(--orange); animation: loader-card-a 1.8s cubic-bezier(.16,1,.3,1) infinite alternate; }
.preloader-mark span:last-child { right: 3px; bottom: 3px; color: var(--ink); background: #fff; animation: loader-card-b 1.8s cubic-bezier(.16,1,.3,1) infinite alternate; }
.preloader-core p { margin: 0 0 19px; font: 700 19px "Unbounded", sans-serif; letter-spacing: .08em; }
.preloader-track { width: 100%; height: 2px; overflow: hidden; background: rgba(255,255,255,.13); }
.preloader-track i { display: block; width: 45%; height: 100%; background: var(--orange); animation: loader-track 1.15s cubic-bezier(.65,0,.35,1) infinite; }
.preloader-core small { margin-top: 13px; color: rgba(255,255,255,.4); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; }
.page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 2; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 19px "Unbounded", sans-serif; letter-spacing: -.04em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--orange); border-radius: 10px; font-family: "Unbounded", sans-serif; transform: rotate(-5deg); }
.status { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.utility-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; font: 700 10px "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease; }
.utility-button[hidden] { display: none; }
.utility-button:hover { color: #fff; background: var(--ink); transform: translateY(-2px); }
.utility-button:active { transform: scale(.96); }
.utility-button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.utility-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status i, .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #30b869; box-shadow: 0 0 0 5px rgba(48,184,105,.13); animation: pulse 2s infinite; }
.status.is-offline i { background: #ff4d24; box-shadow: 0 0 0 5px rgba(255,77,36,.13); animation: none; }
.hero { min-height: calc(100vh - 202px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(48px, 7vw, 100px); padding: 64px 0 78px; }
.kicker { margin: 0 0 22px; color: var(--orange); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
h1 { margin: 0; font: 700 clamp(54px, 6.5vw, 94px)/.98 "Unbounded", sans-serif; letter-spacing: -.065em; }
h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.lede { max-width: 610px; margin: 34px 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.meta { display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 13px; font-weight: 700; }
.meta span { display: flex; align-items: center; gap: 9px; }
.meta span::before { content: ""; width: 5px; height: 5px; background: var(--orange); border-radius: 50%; }
.service-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tool-chip { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; font: 700 10px "Manrope", sans-serif; text-decoration: none; cursor: pointer; backdrop-filter: blur(12px); touch-action: manipulation; transition: color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease; }
.tool-chip:hover { color: #fff; background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
.tool-chip:active { transform: scale(.96); }
.tool-chip:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.tool-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.android-chip { color: #fff; background: #30a852; border-color: #30a852; }

.link-panel { position: relative; min-width: 0; padding: 20px; color: #fff; background: var(--panel); border-radius: 32px; box-shadow: 0 28px 80px rgba(17,19,24,.2); transform: rotate(1deg); transform-style: preserve-3d; isolation: isolate; transition: transform .18s ease-out, box-shadow .35s ease; }
.link-panel::before { content: ""; position: absolute; width: 180px; height: 180px; top: -60px; right: -50px; z-index: -1; border: 1px dashed rgba(17,19,24,.3); border-radius: 50%; animation: orbit 18s linear infinite; }
.link-panel-head, .link-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.link-panel-head { padding: 5px 6px 19px; }
.link-panel-head div { display: flex; align-items: center; gap: 11px; }
.link-panel-head strong { font-size: 14px; }
.link-panel-head > span, .link-panel-foot { color: rgba(255,255,255,.45); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.quick-links { display: grid; gap: 10px; }
.quick-link { position: relative; min-width: 0; min-height: 116px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 17px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 22px; text-decoration: none; overflow: hidden; transform: translateZ(0); touch-action: manipulation; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease; }
.quick-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18) 45%, transparent 65%); transform: translateX(-120%); transition: transform .65s ease; }
.quick-link:hover { background: color-mix(in srgb, var(--accent) 22%, #17191e); border-color: color-mix(in srgb, var(--accent) 65%, transparent); transform: translateX(-7px) scale(1.015); }
.quick-link:hover::before { transform: translateX(120%); }
.quick-link:active { transform: translateX(-3px) scale(.985); }
.quick-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.channel-icon { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: 18px; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent); animation: icon-float 3.4s ease-in-out infinite; transition: transform .45s cubic-bezier(.16,1,.3,1), border-radius .35s ease; }
.quick-link:nth-child(2) .channel-icon { animation-delay: -.8s; }
.quick-link:nth-child(3) .channel-icon { animation-delay: -1.6s; }
.channel-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: icon-draw 1.3s .45s cubic-bezier(.2,.8,.2,1) forwards; }
.quick-link:hover .channel-icon { transform: rotate(-9deg) scale(1.12); border-radius: 50%; }
.quick-link-copy { min-width: 0; display: grid; gap: 3px; }
.quick-link-copy small { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
.quick-link-copy strong { font: 700 clamp(20px, 2.2vw, 27px) "Unbounded", sans-serif; letter-spacing: -.05em; }
.quick-link-copy > span { color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.4; }
.quick-arrow { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: 18px; transition: color .3s ease, background .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.quick-link:hover .quick-arrow { color: #111318; background: #fff; transform: rotate(45deg) scale(1.08); }
.link-panel-foot { padding: 18px 6px 2px; text-transform: uppercase; }
.link-panel-foot span:last-child { color: var(--orange); letter-spacing: .25em; animation: dots 2.4s ease-in-out infinite; }
.footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: #fff; background: #111318; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; box-shadow: 0 14px 40px rgba(17,19,24,.25); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .3s ease, transform .3s ease; }
.toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast button { padding: 5px 9px; color: #111318; background: #fff; border: 0; border-radius: 999px; font: 800 10px "Manrope", sans-serif; cursor: pointer; }
.ambient { position: fixed; z-index: 0; width: min(42vw, 540px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: .13; animation: ambient-drift 13s ease-in-out infinite alternate; }
.ambient-one { top: 12%; left: -16%; background: var(--orange); }
.ambient-two { right: -17%; bottom: -10%; background: #2aabee; animation-delay: -6s; }
.pointer-glow { position: fixed; z-index: 0; width: 420px; height: 420px; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,77,36,.12), transparent 68%); transform: translate3d(calc(var(--pointer-x, -500px) - 50%), calc(var(--pointer-y, -500px) - 50%), 0); transition: opacity .3s ease; }
body.has-pointer .pointer-glow { opacity: 1; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--delay,0ms), transform .7s var(--delay,0ms); }
.js body:not(.is-ready) .reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(48,184,105,0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes icon-draw { to { stroke-dashoffset: 0; } }
@keyframes icon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes dots { 50% { opacity: .35; letter-spacing: .4em; } }
@keyframes loader-rings { 0% { opacity: .6; transform: scale(.72) rotate(0); } 100% { opacity: 0; transform: scale(1.45) rotate(25deg); } }
@keyframes loader-card-a { to { transform: translate(30px, 30px) rotate(7deg); } }
@keyframes loader-card-b { to { transform: translate(-30px, -30px) rotate(-7deg); } }
@keyframes loader-track { 0% { transform: translateX(-110%); } 100% { transform: translateX(245%); } }
@keyframes ambient-drift { to { translate: 6vw -4vh; scale: 1.15; } }

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 54px; padding-top: 60px; }
  .hero-copy { min-width: 0; }
  .link-panel { width: min(100%, 580px); margin: 0 auto; transform: none; }
}
@media (max-width: 560px) {
  .page-shell { width: auto; margin-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .topbar { height: 76px; }
  .status { width: 30px; justify-content: center; font-size: 0; }
  .status span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .utility-button { width: 38px; padding: 0; justify-content: center; }
  .utility-button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .hero { min-height: auto; gap: 44px; padding: 42px 0 max(58px, env(safe-area-inset-bottom)); }
  h1 { max-width: 100%; font-size: clamp(38px, 13vw, 62px); overflow-wrap: normal; }
  .lede { margin: 25px 0; }
  .link-panel { width: 100%; padding: 12px; border-radius: 26px; }
  .link-panel::before { display: none; }
  .link-panel-head { padding: 4px 4px 14px; }
  .quick-link { width: 100%; min-height: 96px; gap: 12px; padding: 12px; border-radius: 18px; }
  .channel-icon { width: 50px; height: 50px; border-radius: 15px; }
  .channel-icon svg { width: 23px; }
  .quick-link-copy > span { display: none; }
  .quick-arrow { width: 34px; height: 34px; }
  .service-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .tool-chip { width: 100%; justify-content: center; padding-inline: 9px; }
  .theme-chip { grid-column: 1 / -1; }
  .android-chip { grid-column: 1 / -1; }
  .footer { align-items: flex-start; flex-direction: column; justify-content: center; }
  .ambient { width: 320px; opacity: .1; filter: blur(75px); }
  .pointer-glow { display: none; }
}
@media (max-width: 360px) {
  .brand > span:last-child { display: none; }
  .quick-link { grid-template-columns: auto minmax(0, 1fr); }
  .quick-arrow { display: none; }
  .quick-link-copy strong { font-size: 18px; }
  .service-tools { grid-template-columns: 1fr; }
  .theme-chip { grid-column: auto; }
  .android-chip { grid-column: auto; }
}
@media (hover: none) {
  .quick-link:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11); transform: none; }
  .quick-link:hover::before { transform: translateX(-120%); }
  .quick-link:hover .channel-icon { transform: none; border-radius: 18px; }
  .quick-link:hover .quick-arrow { color: #fff; background: transparent; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}