/* Download cards and pending authorization states share the existing responsive frames. */
.guide-desktop-frame .guide-download-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.guide-download-filename{display:block;margin-top:12px;font-size:11px;line-height:1.65;overflow-wrap:anywhere;word-break:break-word;color:var(--proto-onv);}
.guide-download-hint{display:block;margin-top:12px;font-size:11px;line-height:1.6;color:var(--proto-onv);}
.guide-desktop-frame .guide-download-scene .proto-win-dlbtn-brand{gap:7px;}
.guide-phone-frame .proto-nx-orb-off{background:rgba(125,145,170,.08);border-color:rgba(145,160,180,.16);}
.guide-phone-frame .proto-nx-orb-off .proto-nx-orb-core{background:#d6dce5;box-shadow:none;}
.guide-phone-frame .proto-nx-orb-off .proto-nx-orb-pw,.guide-phone-frame .proto-nx-orb-off .proto-nx-orb-st{color:#505d70;}
.guide-desktop-frame .guide-mac-pending{background:#edf0f5;border-color:#d8dfe9;box-shadow:none;}
.guide-desktop-frame .guide-mac-pending .proto-win-orb-ic{color:#64748b;}
.guide-desktop-frame .proto-connection-auth-row,.guide-desktop-frame .proto-connection-auth-input{display:flex;align-items:center;gap:7px;}
@media(max-width:760px){
  .guide-desktop-frame .guide-download-grid{grid-template-columns:minmax(0,1fr);}
}

/* Keep responsive illustrations usable in older Chromium/WebKit without ratio support. */
@supports not (aspect-ratio:1){
  .tut-mock-phone .proto-phone{--legacy-frame-inset:10px;position:relative;display:block;padding:0;}
  /* 822/380 including a 1px border: compensation is 2 * (822/380 - 1). */
  .tut-mock-phone .proto-phone::before{content:"";display:block;padding-top:216.315789%;margin-bottom:2.326316px;}
  .tut-mock-phone .proto-phone>.proto-screen{position:absolute;top:var(--legacy-frame-inset);right:var(--legacy-frame-inset);bottom:var(--legacy-frame-inset);left:var(--legacy-frame-inset);width:auto;height:auto;}
  .guide-mobile-orb{flex:0 0 auto;width:52%;max-width:116px;height:auto;min-height:0;padding:0;}
  .guide-mobile-orb::before{content:"";display:block;padding-top:100%;}
  .guide-mobile-orb-core{position:absolute;top:7px;right:7px;bottom:7px;left:7px;inset:7px;width:auto;height:auto;}
  @media(max-width:520px){.tut-mock-phone .proto-phone{--legacy-frame-inset:8px;}}
}
/* Container queries enhance current kernels; older kernels use a compact phone layout. */
@supports not (container-type:inline-size){
  @media(max-width:420px){
    .guide-mobile-header{min-height:40px;padding:6px 10px;}
    .guide-mobile-header-title{font-size:14px;gap:6px;}
    .guide-mobile-content{--mobile-gap:7px;padding:1px 9px 8px;}
    .guide-mobile-nav{min-height:51px;padding:5px 5px 6px;}
    .guide-mobile-connect-area{min-height:96px;max-height:143px;gap:4px;}
    .guide-mobile-orb{max-height:116px;}
    .guide-mobile-info-card{padding:7px 8px;gap:6px;}
    .guide-mobile-metric{padding:5px 1px;}
    .guide-mobile-sheet{padding:10px 14px 16px;}
    .guide-mobile-card{padding:8px 9px;}
    .guide-mobile-period{padding:6px 7px;}
    .guide-phone-frame .proto-nx-page{padding-left:12px;padding-right:12px;}
    .guide-phone-frame .proto-nx-title{font-size:29px;margin:9px 0 7px;}
    .guide-phone-frame .proto-nx-orb{width:146px;height:146px;}
  }
}