/* Mobile application illustrations: styles stay inside their own scene root. */
.guide-mobile-app{
  --mobile-brand:var(--brand,#d92e1a);
  --mobile-brand-soft:rgba(var(--glow,217,46,26),.08);
  --mobile-line:#e6eaf0;
  --mobile-muted:#727b8a;
  --mobile-green:#059669;
  --mobile-gap:9px;
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;height:100%;min-width:0;min-height:0;
  background:#f5f6f8;color:#171b24;
  font-family:var(--tutorial-font,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif);
  font-size:12px;line-height:1.4;
  container-type:inline-size;
}
.guide-mobile-app *{box-sizing:border-box;}
.guide-mobile-app svg{display:block;flex-shrink:0;}
.guide-mobile-app strong{font-weight:600;}
.guide-mobile-header{
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  flex:0 0 auto;min-height:47px;padding:8px 14px;
}
.guide-mobile-header-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:17px;font-weight:700;}
.guide-mobile-header-title>span:last-child{overflow-wrap:anywhere;}
.guide-mobile-header-title>svg{flex:0 0 auto;}
.guide-mobile-header-action{display:flex;align-items:center;gap:4px;color:var(--mobile-brand);font-size:11px;white-space:nowrap;flex-shrink:0;}
.guide-mobile-announcement{border:1px solid rgba(var(--glow,217,46,26),.16);background:var(--mobile-brand-soft);border-radius:20px;padding:4px 7px;font-size:9px;}
.guide-mobile-home-header .guide-mobile-header-title{gap:7px;}
.guide-mobile-home-header .guide-mobile-header-title>span:first-child{font-size:17px;font-weight:700;}
.guide-mobile-home-header .guide-mobile-announcement{font-weight:500;white-space:nowrap;color:var(--mobile-brand);}
.guide-mobile-update{flex-shrink:0;border:1px solid #c8e4d5;background:#edf7f1;color:#2e8b57;border-radius:20px;padding:4px 7px;font-size:9px;white-space:nowrap;}
.guide-mobile-back{color:var(--mobile-brand);}
.guide-mobile-content{
  flex:1 1 auto;min-width:0;min-height:0;padding:2px 12px 12px;
  display:flex;flex-direction:column;gap:var(--mobile-gap);
}
.guide-mobile-nav{
  display:flex;align-items:center;flex:0 0 auto;gap:2px;
  background:rgba(255,255,255,.97);border-top:1px solid var(--mobile-line);
  min-height:58px;padding:6px 7px 8px;
}
.guide-mobile-nav-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--mobile-muted);}
.guide-mobile-nav-icon{display:flex;align-items:center;justify-content:center;width:42px;max-width:100%;height:27px;border-radius:14px;}
.guide-mobile-nav-item.is-active{color:var(--mobile-brand);font-weight:600;}
.guide-mobile-nav-item.is-active .guide-mobile-nav-icon{background:var(--mobile-brand-soft);}
.guide-mobile-connect-area{flex:1 1 130px;min-height:105px;max-height:184px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:3px 0;}
.guide-mobile-orb{
  flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;width:auto;max-width:52%;max-height:154px;min-height:83px;
  border:3px solid #e1e6ed;border-radius:50%;padding:10px;background:transparent;
}
.guide-mobile-orb.is-connected{border-color:var(--mobile-brand);box-shadow:0 0 0 5px var(--mobile-brand-soft),0 10px 30px -14px rgba(var(--glow,217,46,26),.35);}
.guide-mobile-orb-core{width:100%;height:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fff;border:1px solid var(--mobile-line);border-radius:50%;color:var(--mobile-muted);padding:9px;}
.guide-mobile-orb-core>svg{width:30px;height:30px;}
.guide-mobile-orb-core strong{font-size:12px;letter-spacing:1px;white-space:nowrap;}
.guide-mobile-orb-core>span{font-size:8px;color:var(--mobile-muted);white-space:nowrap;}
.guide-mobile-orb.is-connected .guide-mobile-orb-core{color:var(--mobile-brand);border-color:rgba(var(--glow,217,46,26),.18);}
.guide-mobile-connect-time{color:var(--mobile-muted);font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.guide-mobile-metrics{display:flex;gap:5px;flex:0 0 auto;}
.guide-mobile-metric{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;background:#fff;border:1px solid var(--mobile-line);border-radius:11px;padding:8px 2px;text-align:center;}
.guide-mobile-metric-value{display:flex;align-items:baseline;justify-content:center;gap:2px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.guide-mobile-metric-value strong{font-size:14px;}
.guide-mobile-metric-value>span{font-size:8px;color:var(--mobile-muted);}
.guide-mobile-metric-icon{display:flex;color:var(--mobile-muted);}
.guide-mobile-metric-down .guide-mobile-metric-icon{color:var(--mobile-brand);}
.guide-mobile-metric-up .guide-mobile-metric-icon{color:var(--mobile-green);}
.guide-mobile-info-card{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--mobile-line);border-radius:13px;background:#fff;}
.guide-mobile-country{flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;width:25px;}
.guide-mobile-info-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.guide-mobile-info-text>span{font-size:8px;color:var(--mobile-muted);}
.guide-mobile-info-text>strong{font-size:11px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.guide-mobile-current-node{padding:13px 10px;}
.guide-mobile-current-node .guide-mobile-info-text{gap:4px;}
.guide-mobile-current-node .guide-mobile-info-text>strong{font-size:13px;}
.guide-mobile-info-card>svg{color:#a2a9b4;}
.guide-mobile-accent{color:var(--mobile-brand);}
.guide-mobile-mode-wrap{flex:0 0 auto;}
.guide-mobile-section-label{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--mobile-muted);margin:0 2px 5px;}
.guide-mobile-mode{display:flex;background:#e9edf2;padding:3px;border-radius:11px;}
.guide-mobile-mode>span{flex:1;display:flex;justify-content:center;align-items:center;gap:3px;min-width:0;padding:6px 2px;border-radius:8px;color:var(--mobile-muted);font-size:10px;}
.guide-mobile-mode>span.is-active{background:#fff;color:var(--mobile-brand);box-shadow:0 2px 4px rgba(20,25,35,.05);font-weight:600;}
.guide-mobile-login .guide-mobile-connect-area{justify-content:flex-start;padding-top:24px;max-height:220px;}
.guide-mobile-login .guide-mobile-orb{flex:0 0 auto;width:52%;height:auto;max-width:134px;max-height:none;}
.guide-mobile-login .guide-mobile-home-content{padding-top:12px;}
.guide-mobile-login-overlay{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;flex-direction:column;justify-content:flex-end;z-index:4;}
.guide-mobile-scrim{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(18,24,36,.38);}
.guide-mobile-sheet{position:relative;flex:0 0 auto;background:#fff;padding:11px 19px 18px;border-radius:25px 25px 0 0;box-shadow:0 -8px 32px rgba(12,18,28,.12);}
.guide-mobile-grab{width:33px;height:4px;border-radius:4px;background:#d9dfe6;margin:0 auto 13px;}
.guide-mobile-sheet-heading{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:15px;}
.guide-mobile-sheet-heading>h3{font-size:17px;font-weight:700;line-height:1.35;margin:3px 0 0;text-align:center;overflow-wrap:anywhere;}
.guide-mobile-sheet-heading>p{font-size:10px;color:var(--mobile-muted);margin:0;}
.guide-mobile-field{display:flex;align-items:center;gap:8px;height:40px;border-radius:12px;border:1px solid var(--mobile-line);background:#f5f6f8;padding:0 11px;color:#929ba7;font-size:11px;margin-bottom:8px;}
.guide-mobile-field-end{margin-left:auto;display:flex;}
.guide-mobile-primary{display:flex;align-items:center;justify-content:center;gap:5px;min-height:41px;padding:8px 12px;border-radius:12px;background:linear-gradient(125deg,var(--brand-l,#ff5a44),var(--mobile-brand));color:#fff;font-size:13px;font-weight:600;box-shadow:0 7px 15px -10px rgba(var(--glow,217,46,26),.5);}
.guide-mobile-login-links{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:13px;font-size:10px;color:var(--mobile-brand);}
.guide-mobile-login-links>i{width:1px;height:10px;background:#dce1e8;}
.guide-mobile-auth-row{display:flex;gap:7px;margin-bottom:8px;min-width:0;}
.guide-mobile-auth-row .guide-mobile-field{margin-bottom:0;min-width:0;}
.guide-mobile-auth-input{flex:1 1 0;}
.guide-mobile-auth-input>span{min-width:0;overflow-wrap:anywhere;}
.guide-mobile-email-suffix{flex:0 0 auto;gap:4px;color:#313846;white-space:nowrap;}
.guide-mobile-email-suffix>svg{transform:rotate(90deg);}
.guide-mobile-email-hint{font-size:8px;line-height:1.5;color:var(--mobile-muted);margin:-2px 2px 8px;}
.guide-mobile-code-button{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 10px;border:1px solid rgba(var(--glow,217,46,26),.22);border-radius:12px;background:var(--mobile-brand-soft);color:var(--mobile-brand);font-size:10px;font-weight:600;white-space:nowrap;}
.guide-mobile-register-sheet{max-height:100%;overflow-y:auto;}
.guide-mobile-register-links{gap:3px;color:var(--mobile-muted);}
.guide-mobile-register-links>b{color:var(--mobile-brand);font-weight:600;}
.guide-mobile-nodes-content{gap:var(--mobile-gap);}
.guide-mobile-search{display:flex;align-items:center;gap:7px;background:#eaf0f4;color:#89929e;border-radius:11px;min-height:35px;padding:8px 10px;font-size:11px;flex-shrink:0;}
.guide-mobile-tabs{display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0;}
.guide-mobile-tabs>span{border:1px solid var(--mobile-line);border-radius:20px;padding:6px 9px;background:#fff;color:#646e7d;font-size:10px;white-space:nowrap;}
.guide-mobile-tabs>span.is-active{background:var(--mobile-brand);color:#fff;border-color:var(--mobile-brand);font-weight:600;}
.guide-mobile-group-header{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;flex-shrink:0;padding:2px 2px 0;}
.guide-mobile-group-header>span{display:flex;align-items:center;gap:3px;color:var(--mobile-brand);font-size:9px;}
.guide-mobile-node-list{display:flex;flex-direction:column;gap:7px;}
.guide-mobile-node{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--mobile-line);border-radius:12px;padding:10px 9px;min-height:53px;}
.guide-mobile-node.is-selected{border-color:var(--mobile-brand);background:var(--mobile-brand-soft);box-shadow:0 4px 12px -10px rgba(var(--glow,217,46,26),.3);}
.guide-mobile-node-flag{flex:0 0 auto;font-size:20px;line-height:1;}
.guide-mobile-node-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.guide-mobile-node-text>strong{font-size:11px;line-height:1.35;overflow-wrap:anywhere;}
.guide-mobile-node-text>span{font-size:8px;color:var(--mobile-muted);}
.guide-mobile-latency{flex:0 0 auto;font-size:11px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.guide-mobile-latency>small{font-size:8px;font-weight:400;margin-left:1px;}
.guide-mobile-latency.is-good{color:#059669;}
.guide-mobile-latency.is-mid{color:#b97b15;}
.guide-mobile-latency.is-slow{color:#cc4942;}
.guide-mobile-node-check{flex:0 0 14px;min-height:14px;color:var(--mobile-brand);}
.guide-mobile-node-footer{display:flex;align-items:center;gap:5px;margin-top:auto;border-radius:10px;background:#e9f5ef;padding:8px;color:#20724e;font-size:9px;flex-shrink:0;}
.guide-mobile-plan-content{gap:var(--mobile-gap);}
.guide-mobile-card{background:#fff;border:1px solid var(--mobile-line);border-radius:14px;padding:12px;flex:0 0 auto;}
.guide-mobile-card-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;}
.guide-mobile-card-heading>strong{font-size:12px;}
.guide-mobile-card-heading>span{font-size:8px;color:var(--mobile-muted);}
.guide-mobile-chip{background:var(--mobile-brand-soft);color:var(--mobile-brand)!important;border-radius:7px;padding:3px 5px;white-space:nowrap;}
.guide-mobile-plan-detail>p{font-size:10px;color:var(--mobile-muted);margin:8px 0 6px;line-height:1.45;}
.guide-mobile-plan-benefits{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:9px;color:var(--mobile-muted);}
.guide-mobile-plan-benefits>span{display:flex;align-items:center;gap:3px;}
.guide-mobile-plan-benefits svg{color:var(--mobile-green);}
.guide-mobile-periods{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:9px;}
.guide-mobile-period{position:relative;padding:9px 8px;border:1px solid var(--mobile-line);border-radius:11px;background:#fff;min-width:0;}
.guide-mobile-period.is-selected{border-color:var(--mobile-brand);background:var(--mobile-brand-soft);}
.guide-mobile-period>div{display:flex;flex-direction:column;gap:4px;}
.guide-mobile-period>div>span{font-size:10px;color:var(--mobile-muted);}
.guide-mobile-period>div>strong{font-size:16px;font-variant-numeric:tabular-nums;}
.guide-mobile-period.is-selected>div>strong,.guide-mobile-period.is-selected>div>span{color:var(--mobile-brand);}
.guide-mobile-discount{position:absolute;right:5px;top:7px;font-size:7px;color:var(--mobile-brand);background:var(--mobile-brand-soft);padding:2px 3px;border-radius:4px;white-space:nowrap;}
.guide-mobile-period-check{position:absolute;right:6px;bottom:8px;display:flex;color:var(--mobile-brand);}
.guide-mobile-order-row,.guide-mobile-order-total{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;font-variant-numeric:tabular-nums;}
.guide-mobile-order-row{margin-top:8px;color:var(--mobile-muted);}
.guide-mobile-order-row>strong{font-size:10px;color:#313846;}
.guide-mobile-order-total{border-top:1px solid #eef1f5;padding-top:9px;margin-top:9px;font-weight:600;}
.guide-mobile-order-total>strong{color:var(--mobile-brand);font-size:18px;}
.guide-mobile-purchase{flex:0 0 auto;margin-top:auto;}
.guide-mobile-payment-note{text-align:center;font-size:9px;color:var(--mobile-muted);flex:0 0 auto;}

/* A narrower phone keeps its real text size while reducing decorative spacing. */
@container (max-width:280px){
  .guide-mobile-header{min-height:40px;padding:6px 10px;}
  .guide-mobile-header-title{font-size:14px;gap:6px;}
  .guide-mobile-header-title>svg{width:22px;height:22px;}
  .guide-mobile-header-action{font-size:10px;}
  .guide-mobile-announcement{font-size:8px;padding:3px 5px;}
  .guide-mobile-content{--mobile-gap:7px;padding:1px 9px 8px;}
  .guide-mobile-nav{min-height:51px;padding:5px 5px 6px;}
  .guide-mobile-nav-icon{width:36px;height:24px;}
  .guide-mobile-nav-icon>svg{width:19px;height:19px;}
  .guide-mobile-nav-item{font-size:9px;}
  .guide-mobile-connect-area{min-height:96px;max-height:143px;gap:4px;}
  .guide-mobile-orb{max-height:116px;padding:7px;border-width:2px;}
  .guide-mobile-orb-core{padding:7px;gap:3px;}
  .guide-mobile-orb-core>svg{width:26px;height:26px;}
  .guide-mobile-orb-core strong{font-size:11px;}
  .guide-mobile-metric{padding:5px 1px;}
  .guide-mobile-metric-value strong{font-size:12px;}
  .guide-mobile-home-header .guide-mobile-header-title>span:first-child{font-size:14px;}
  .guide-mobile-update{font-size:8px;padding:3px 5px;}
  .guide-mobile-info-card{padding:7px 8px;gap:6px;border-radius:11px;}
  .guide-mobile-info-text>strong{font-size:10px;}
  .guide-mobile-country{font-size:19px;width:23px;}
  .guide-mobile-section-label{margin-bottom:3px;}
  .guide-mobile-mode>span{padding:5px 2px;}
  .guide-mobile-login .guide-mobile-connect-area{padding-top:17px;max-height:183px;}
  .guide-mobile-login .guide-mobile-orb{max-width:115px;}
  .guide-mobile-sheet{padding:10px 14px 16px;border-radius:22px 22px 0 0;}
  .guide-mobile-grab{margin-bottom:11px;}
  .guide-mobile-sheet-heading{margin-bottom:12px;gap:4px;}
  .guide-mobile-sheet-heading>svg{width:33px;height:33px;}
  .guide-mobile-sheet-heading>h3{font-size:15px;}
  .guide-mobile-field{height:37px;font-size:10px;}
  .guide-mobile-primary{min-height:37px;font-size:12px;}
  .guide-mobile-auth-row{gap:5px;}
  .guide-mobile-email-suffix{padding:0 7px;gap:2px;font-size:9px;}
  .guide-mobile-code-button{min-height:37px;padding:0 8px;font-size:9px;}
  .guide-mobile-search{min-height:32px;padding:7px 8px;font-size:10px;}
  .guide-mobile-tabs{gap:4px;}
  .guide-mobile-tabs>span{font-size:9px;padding:5px 7px;}
  .guide-mobile-node-list{gap:6px;}
  .guide-mobile-node{padding:8px 7px;min-height:48px;gap:5px;}
  .guide-mobile-node-text>strong{font-size:10px;}
  .guide-mobile-node-flag{font-size:18px;}
  .guide-mobile-latency{font-size:10px;}
  .guide-mobile-card{padding:9px 10px;border-radius:12px;}
  .guide-mobile-card-heading>strong{font-size:11px;}
  .guide-mobile-plan-detail>p{margin:6px 0 5px;font-size:9px;}
  .guide-mobile-periods{gap:6px;margin-top:7px;}
  .guide-mobile-period{padding:8px 7px;}
  .guide-mobile-period>div{gap:3px;}
  .guide-mobile-period>div>strong{font-size:15px;}
  .guide-mobile-period>div>span{font-size:9px;}
  .guide-mobile-order-row{margin-top:6px;font-size:9px;}
  .guide-mobile-order-total{padding-top:7px;margin-top:7px;font-size:9px;}
  .guide-mobile-order-total>strong{font-size:16px;}
}

@container (max-width:260px){
  .guide-mobile-nodes-content,.guide-mobile-plan-content{--mobile-gap:6px;}
  .guide-mobile-node{min-height:43px;padding:6px 7px;}
  .guide-mobile-card{padding:8px 9px;}
  .guide-mobile-period{padding:6px 7px;}
  .guide-mobile-period>div{gap:2px;}
  .guide-mobile-period>div>span{line-height:1.2;}
  .guide-mobile-period>div>strong{font-size:14px;line-height:1.2;}
}