:root{color-scheme:dark;--sheet:#121a22;--rule:#303a44;--accent:#acd7f6}
body,html.tg-miniapp body{background:#0c1218;color:#edf1f4}
body::before,body .background-animation{display:none}
body .routix-bar{background:#10171e;border-color:var(--rule)}
body main .hero.tab-panel.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.76fr);align-items:center;gap:clamp(24px,5vw,72px);min-height:0;background:none;border:0;margin:0;padding:clamp(32px,7vw,96px) 0}
.welcome-copy h1{font:520 clamp(44px,6vw,84px)/1 Routix,Inter,sans-serif;letter-spacing:-.055em;color:#edf1f4;margin:0}
.welcome-copy p{font-size:20px;color:#aebbc6;margin:20px 0 32px;text-wrap:balance}
.access-pass{background:#172734;border:1px solid #3d5364;border-radius:20px;padding:clamp(20px,3vw,36px);min-width:0;color:#ddebf5}.pass-top,.pass-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.pass-top img{border-radius:12px}.pass-top span{font-weight:550}.pass-price{margin-top:32px;font-size:clamp(36px,4vw,64px);letter-spacing:-.055em;font-variant-numeric:tabular-nums}.pass-price small{font-size:16px;letter-spacing:0;color:#b8cad7}.pass-route{display:flex;align-items:center;margin:24px 0 16px}.pass-route i{height:9px;width:9px;border:2px solid #a9d6f8;border-radius:100%}.pass-route b{height:1px;background:#80adc9;flex:1}.pass-bottom strong{font-size:20px}
body main :is(.section .card,.auth-brand,.account-overview button,.sub-panel,.sub-panel.is-active,.devices-panel,.security-panel,.purchase-card){background:var(--sheet);border-color:var(--rule);box-shadow:none}
main :is(.sub-metric-label,.security-title,.tiny,.purchase-kind,.sub-panel-title){text-transform:none;letter-spacing:normal}
main :is(.sub-metric-value,.purchase-amount-value,.price){font-variant-numeric:tabular-nums}
body main :is(button,.btn-primary,.btn-ghost):hover{box-shadow:none}
body :focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
.skip-content{position:fixed;top:8px;left:8px;transform:translateY(-180%);z-index:100;background:#d3eaff;color:#0b1218;padding:12px;border-radius:10px}.skip-content:focus{transform:none}
.device-row{content-visibility:auto;contain-intrinsic-size:auto 98px}.device-meta,.sub-meta-line{overflow-wrap:anywhere}
#bot-auth{overscroll-behavior:contain}
@media(prefers-reduced-motion:no-preference){body main .tab-panel.active,body #plans.active .plan-mini,#bot-auth[open] .qr-sheet{animation:arrive .2s ease-out both}@keyframes arrive{from{opacity:.25;transform:translateY(5px)}}}
@media(max-width:720px){body main .hero.tab-panel.active{grid-template-columns:1fr;padding:32px 0;gap:32px}.access-pass{width:100%;box-sizing:border-box}.routix-menu a{min-height:44px}.routix-bar .routix-menu{scrollbar-width:thin}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media(max-width:720px){html,body{min-width:0}body .routix-bar,body main.container,body .studio-footer{width:min(100%,100vw);min-width:0;box-sizing:border-box}.routix-bar .routix-menu{max-width:100%;min-width:0}.welcome-copy,.access-pass{min-width:0}body main .hero.tab-panel.active{grid-template-columns:minmax(0,1fr);box-shadow:none}.access-actions>*{min-width:0}.studio-footer{justify-content:flex-start}}
/* Keep each navigation destination on its own canvas. */
body main .tab-panel:not(.active){display:none!important}
.access-pass{position:relative;isolation:isolate;overflow:hidden}
.access-pass::before{content:"";position:absolute;inset:-8% -10% auto auto;width:62%;height:80%;background:repeating-radial-gradient(ellipse at 86% 10%,transparent 0 14px,#7ba3bd26 15px,transparent 16px 23px);mask-image:linear-gradient(215deg,#000 5%,transparent 77%);z-index:-1;pointer-events:none}
body #plans .plan-mini{border-color:#34414c;background:#121d26;min-height:84px}
body #plans .plan-mini:focus-within{background:#192b38}
#plans .plan-mini .price{letter-spacing:-.035em;font-weight:540;font-variant-numeric:tabular-nums}
#plans .plan-mini .plan-action{min-height:44px}
@media(max-width:620px){
body .routix-bar{gap:8px;padding:8px 12px 10px}
.routix-bar .routix-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;overflow:visible}
.routix-bar .routix-menu a{display:flex;align-items:center;justify-content:flex-start;min-width:0;height:40px;min-height:40px;padding:0 9px;gap:7px;font-size:13px}
.routix-menu svg{width:16px;height:16px;flex:none}
body main .hero.tab-panel.active{gap:24px;padding:20px 0}
.welcome-copy .access-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.welcome-copy .access-actions button{width:100%;padding:10px 5px;min-height:44px;font-size:14px}
.welcome-copy p{margin:12px 0 20px}
body #plans .plan-mini{grid-template-columns: minmax(0,1fr) auto;padding:16px;gap:8px 16px}
#plans .plan-mini .price,#plans .plan-actions{justify-self:end}
}

/* Shared page edges and a footer that follows the content on long pages. */
body {
  --page-width: 1408px;
  --page-inset: clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body main.container, body .studio-footer {
  width: min(100%, var(--page-width));
  max-width: none;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--page-inset);
}
body main.container { flex: 1 0 auto; margin-block: 0; }
body main.container:has(.hero.active) { display: grid; align-content: center; }
body .studio-footer { margin-block: 0; flex: none; }
body main .hero.tab-panel.active {
  box-shadow: none;
  padding-block: 32px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 4vw, 64px);
}
.welcome-copy h1 { font-size: clamp(44px, 4.8vw, 76px); }
.welcome-copy .access-actions { align-items: stretch; gap: 12px; }
.welcome-copy .access-actions button { min-height: 48px; margin: 0; box-sizing: border-box; }
body main .welcome-copy .btn-ghost { border: 1px solid #394854; background: #121b23; }
.access-pass { padding: clamp(24px, 3vw, 40px); }
@media (max-width: 720px) {
  body { --page-inset: 16px; }
  body main .hero.tab-panel.active { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 16px; }
  body main.container:has(.hero.active) { align-content: start; }
  body .studio-footer { gap: 8px 16px; }
}