.quickstart-body{min-height:100vh;background:var(--paper);color:var(--ink)}
.quickstart-header{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(22px,4vw);border-bottom:var(--border);background:var(--paper)}
.quickstart-header .brand{margin:0}.quickstart-header .brand img{width:150px;height:auto}
.quickstart-header-meta{display:flex;align-items:center;gap:30px;font:900 10px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.quickstart-header-meta>a{border-bottom:3px solid var(--ink);padding-bottom:4px}

.manual-masthead{padding:clamp(38px,5vw,70px) max(22px,5vw) clamp(36px,5vw,64px);border-bottom:var(--border)}
.manual-title-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:clamp(30px,6vw,90px);align-items:end}
.manual-title-row h1{margin:0;font:900 clamp(4rem,9vw,9rem)/.78 "Arial Black",Arial,sans-serif;letter-spacing:-.065em;text-transform:uppercase}
.manual-intro{padding:0 0 7px;border-left:4px solid var(--ink);padding-left:22px}.manual-intro p{margin:0 0 24px;max-width:480px;font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.45}.manual-intro a{font:900 11px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid var(--ink);padding-bottom:4px}

.setup-route{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:var(--border);background:#fff}.setup-route a{min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 14px 12px;border-right:3px solid var(--ink)}.setup-route a:last-child{border-right:0}.setup-route b{font:900 18px Arial,sans-serif}.setup-route span{font:900 9px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}.setup-route a:hover{background:var(--yellow)}

.instruction-sheet{background:var(--paper)}
.instruction{display:grid;grid-template-columns:120px minmax(270px,.75fr) minmax(360px,1.25fr);min-height:430px;border-bottom:var(--border)}
.instruction-number{display:flex;justify-content:center;align-items:flex-start;padding-top:48px;border-right:var(--border);background:var(--ink);color:#fff}.instruction-number span{font:900 clamp(2.4rem,4vw,4rem)/1 "Arial Black",Arial,sans-serif;letter-spacing:-.05em;writing-mode:vertical-rl;transform:rotate(180deg)}
.instruction-copy{padding:clamp(42px,5vw,72px) clamp(26px,4vw,60px);border-right:var(--border);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.instruction-label{display:flex;align-items:center;gap:10px;margin:0 0 22px;font:900 10px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.key{width:13px;height:13px;border:2px solid var(--ink);display:inline-block}.key-blue{background:var(--blue)}.key-yellow{background:var(--yellow)}
.instruction h2{margin:0;font:900 clamp(3rem,5.5vw,5.9rem)/.83 "Arial Black",Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase}.instruction-copy>p:not(.instruction-label){margin:24px 0 0;max-width:560px;font-size:clamp(1.02rem,1.45vw,1.2rem);line-height:1.5}
.instruction-note{margin-top:28px;padding:10px 12px 8px;border:3px solid var(--ink);background:var(--yellow);font:900 9px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}

.device-diagram,.action-diagram,.phone-diagram,.browser-diagram,.checklist-diagram,.ready-stamp{position:relative;margin:clamp(28px,4vw,58px);align-self:stretch}
.device-diagram{display:grid;place-items:center;overflow:hidden;background:var(--blue);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.device-diagram-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(21,21,21,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,21,.12) 1px,transparent 1px);background-size:28px 28px}
.qubby-device--guide{position:relative;z-index:2;width:min(58%,400px);aspect-ratio:799/800;filter:drop-shadow(12px 15px 0 rgba(21,21,21,.95))}.qubby-device--guide .device-body{display:block;width:100%;height:100%;object-fit:contain}.qubby-device--guide .device-screen{position:absolute;left:14.393%;top:25.25%;width:70.7134%;height:43.75%;overflow:hidden;background:#000;display:grid;place-items:center}.qubby-device--guide .device-screen img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated}.diagram-caption{position:absolute;z-index:3;left:14px;bottom:14px;right:14px;padding:9px 10px 7px;background:#fff;border:3px solid var(--ink);font:900 8px Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-align:center}

.action-diagram{display:grid;grid-template-columns:minmax(150px,.5fr) minmax(260px,1fr);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}.gesture-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--blue);color:#fff;border-right:4px solid var(--ink)}.gesture-mark span{width:100px;height:100px;border:4px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;border-radius:50%;font:900 32px Arial,sans-serif}.gesture-mark strong{font:900 17px Arial,sans-serif;letter-spacing:.12em}.gesture-explain{padding:32px;display:flex;flex-direction:column;justify-content:center}.gesture-explain p{margin:0;line-height:1.5}.gesture-explain strong{font:900 11px Arial,sans-serif;letter-spacing:.08em}.gesture-rule{height:3px;background:var(--ink);margin:24px 0}

.phone-diagram{background:var(--yellow);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:0}.phone-top{height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-bottom:4px solid var(--ink);background:#fff;font:900 10px Arial,sans-serif;letter-spacing:.12em}.network-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:24px;border:3px solid var(--ink);background:#fff;padding:18px}.wifi-symbol{width:42px;height:42px;border:3px solid var(--ink);display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff}.network-row small{display:block;font:900 8px Arial,sans-serif;letter-spacing:.1em;margin-bottom:6px}.network-row strong{font:900 clamp(1.35rem,2vw,2rem) Arial,sans-serif}.network-state{font:900 9px Arial,sans-serif;letter-spacing:.1em;background:var(--ink);color:#fff;padding:9px 10px}.phone-diagram>p{margin:0 24px 22px;line-height:1.45}.local-badge{margin:0 24px 24px;padding:10px;background:var(--ink);color:#fff;font:900 9px Arial,sans-serif;letter-spacing:.1em;text-align:center}

.browser-diagram{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}.browser-bar{min-height:64px;display:grid;grid-template-columns:12px 12px 12px 1fr;gap:8px;align-items:center;padding:0 16px;background:var(--blue);border-bottom:4px solid var(--ink)}.browser-bar>span{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:#fff}.browser-bar>div{margin-left:9px;padding:10px 14px;background:#fff;border:3px solid var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.browser-body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:230px}.browser-body>strong{font:900 12px Arial,sans-serif;letter-spacing:.12em}.browser-body p{line-height:1.5;margin:15px 0 22px}.browser-body>code{padding:13px 17px;background:var(--ink);color:#fff;font-size:clamp(1.15rem,2vw,1.55rem);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

.checklist-diagram{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}.check-row{display:grid;grid-template-columns:66px 1fr;gap:16px;padding:20px;border-bottom:3px solid var(--ink);align-items:center}.check-row:last-child{border-bottom:0}.check-row>span{width:52px;height:52px;border:3px solid var(--ink);display:grid;place-items:center;font:900 20px Arial,sans-serif;background:var(--paper)}.check-row--required>span{background:var(--blue);color:#fff}.check-row small{display:block;font:900 8px Arial,sans-serif;letter-spacing:.12em;margin-bottom:5px}.check-row strong{display:block;font:900 18px "Arial Black",Arial,sans-serif;letter-spacing:-.02em}.check-row p{margin:5px 0 0;line-height:1.35;font-size:.95rem}

.instruction--finish{background:#fff}.ready-stamp{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--yellow);display:grid;place-items:center;text-align:center;align-content:center;gap:8px;transform:rotate(-2deg)}.ready-stamp span{font:900 12px Arial,sans-serif;letter-spacing:.18em}.ready-stamp strong{font:900 clamp(2.8rem,5vw,5.6rem)/.85 "Arial Black",Arial,sans-serif;letter-spacing:-.05em}.ready-stamp i{font:900 38px Arial,sans-serif;font-style:normal;width:72px;height:72px;display:grid;place-items:center;border:4px solid var(--ink);background:#fff;border-radius:50%;margin-top:10px}

.gesture-strip{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(0,1.15fr);border-bottom:var(--border);background:var(--ink);color:#fff}.gesture-strip-title{min-width:0;padding:clamp(46px,6vw,82px) max(22px,5vw);border-right:4px solid #fff;overflow:hidden}.gesture-strip-title>span{font:900 9px Arial,sans-serif;letter-spacing:.13em}.gesture-strip-title h2{max-width:100%;margin:16px 0 0;font:900 clamp(2.65rem,4.6vw,5rem)/.84 "Arial Black",Arial,sans-serif;letter-spacing:-.05em;overflow-wrap:normal;word-break:normal}.gesture-list{min-width:0;display:grid;grid-template-rows:repeat(3,1fr)}.gesture-list article{min-width:0;display:grid;grid-template-columns:95px minmax(0,1fr);gap:22px;align-items:center;padding:24px clamp(24px,4vw,55px);border-bottom:3px solid #fff}.gesture-list article:last-child{border-bottom:0}.gesture-list article>div{min-width:0}.gesture-code{width:72px;height:72px;display:grid;place-items:center;border:3px solid #fff;font:900 15px Arial,sans-serif;color:var(--ink)}.gesture-code--blue{background:var(--blue);color:#fff}.gesture-code--red{background:var(--red)}.gesture-code--yellow{background:var(--yellow)}.gesture-list h3{margin:0 0 7px;font:900 20px "Arial Black",Arial,sans-serif}.gesture-list p{margin:0;max-width:620px;line-height:1.42;color:#e9e9e9}

.quickstart-footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px max(22px,5vw);background:var(--paper)}.quickstart-footer img{width:145px;height:auto}.quickstart-footer div{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}.quickstart-footer span,.quickstart-footer a{font:900 9px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.quickstart-footer span{padding:7px 9px;background:var(--yellow);border:2px solid var(--ink)}

@media(max-width:1100px){.gesture-strip{grid-template-columns:1fr}.gesture-strip-title{border-right:0;border-bottom:4px solid #fff}.gesture-strip-title h2{max-width:760px}}
@media(max-width:1050px){.instruction{grid-template-columns:90px 1fr 1fr}.instruction-number span{font-size:2.6rem}.device-diagram,.action-diagram,.phone-diagram,.browser-diagram,.checklist-diagram,.ready-stamp{margin:30px}.setup-route{grid-template-columns:repeat(3,1fr)}.setup-route a:nth-child(3){border-right:0}.setup-route a:nth-child(-n+3){border-bottom:3px solid var(--ink)}}
@media(max-width:820px){.manual-title-row{grid-template-columns:1fr}.manual-intro{max-width:620px}.instruction{grid-template-columns:72px 1fr}.instruction-number{grid-row:1 / span 2}.instruction-copy{border-right:0;border-bottom:var(--border)}.device-diagram,.action-diagram,.phone-diagram,.browser-diagram,.checklist-diagram,.ready-stamp{grid-column:2;margin:28px}.gesture-list article{grid-template-columns:82px 1fr}}
@media(max-width:620px){.quickstart-header{min-height:68px;padding-inline:18px}.quickstart-header .brand img{width:116px}.quickstart-header-meta>span{display:none}.quickstart-header-meta{font-size:9px}.manual-masthead{padding:32px 18px 38px}.manual-title-row h1{font-size:clamp(3.6rem,19vw,5.3rem)}.manual-intro{border-left-width:3px;padding-left:16px}.setup-route{grid-template-columns:repeat(2,1fr)}.setup-route a{min-height:76px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink)}.setup-route a:nth-child(2n){border-right:0}.setup-route a:nth-last-child(-n+2){border-bottom:0}.setup-route a:nth-child(3){border-right:3px solid var(--ink)}.instruction{grid-template-columns:54px 1fr;min-height:0}.instruction-number{padding-top:26px;border-right:3px solid var(--ink)}.instruction-number span{font-size:2rem}.instruction-copy{padding:34px 20px;border-bottom:3px solid var(--ink)}.instruction h2{font-size:clamp(2.75rem,15vw,4.5rem)}.instruction-copy>p:not(.instruction-label){font-size:1rem}.device-diagram,.action-diagram,.phone-diagram,.browser-diagram,.checklist-diagram,.ready-stamp{grid-column:2;margin:20px 16px 26px 20px;border-width:3px;box-shadow:6px 6px 0 var(--ink)}.device-diagram{min-height:330px}.qubby-device--guide{width:min(70%,270px)}.action-diagram{grid-template-columns:1fr}.gesture-mark{border-right:0;border-bottom:3px solid var(--ink);padding:24px}.gesture-mark span{width:78px;height:78px;font-size:25px}.gesture-explain{padding:22px}.network-row{grid-template-columns:auto 1fr;margin:16px;padding:14px}.network-state{grid-column:1 / -1;text-align:center}.phone-diagram>p{margin:0 16px 18px}.local-badge{margin:0 16px 16px}.browser-bar{grid-template-columns:10px 10px 10px 1fr;padding:0 10px}.browser-bar>div{font-size:.78rem;padding:9px 7px}.browser-body{padding:24px 18px;min-height:200px}.check-row{grid-template-columns:54px 1fr;padding:16px 14px;gap:12px}.check-row>span{width:46px;height:46px}.ready-stamp{min-height:280px}.gesture-strip-title{padding:48px 20px}.gesture-strip-title h2{font-size:clamp(2.8rem,14vw,4.4rem)}.gesture-list article{grid-template-columns:70px 1fr;padding:22px 18px;gap:16px}.gesture-code{width:58px;height:58px;font-size:13px}.gesture-list h3{font-size:17px}.gesture-list p{font-size:.94rem}.quickstart-footer{align-items:flex-start;flex-direction:column;padding:28px 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* V0.2.61 — responsive hardening for Getting Started
   Keep every top-level section fluid and prevent any child grid from
   increasing the page's intrinsic width on narrow screens. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.quickstart-body,
.quickstart-body main,
.quickstart-header,
.manual-masthead,
.setup-route,
.instruction-sheet,
.instruction,
.gesture-strip,
.quickstart-footer{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-left:0;
  margin-right:0;
}

.manual-title-row,
.manual-title-row > *,
.setup-route > *,
.instruction > *,
.instruction-copy,
.device-diagram,
.action-diagram,
.phone-diagram,
.browser-diagram,
.checklist-diagram,
.ready-stamp,
.gesture-strip > *,
.gesture-list,
.gesture-list article,
.gesture-list article > *{
  min-width:0;
  max-width:100%;
}

.instruction-copy,
.gesture-list p,
.phone-diagram,
.browser-diagram,
.checklist-diagram{
  overflow-wrap:anywhere;
}

.browser-bar{
  grid-template-columns:10px 10px 10px minmax(0,1fr);
}
.browser-bar > div{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.network-row{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.network-row strong,
.network-row small{
  overflow-wrap:anywhere;
}

@media(max-width:620px){
  .quickstart-body main,
  .manual-masthead,
  .setup-route,
  .instruction-sheet,
  .gesture-strip,
  .quickstart-footer{
    width:100%;
    max-width:100%;
  }

  .instruction{
    width:100%;
    max-width:100%;
    grid-template-columns:54px minmax(0,1fr);
  }

  .instruction-copy{
    width:100%;
    max-width:100%;
  }

  .device-diagram,
  .action-diagram,
  .phone-diagram,
  .browser-diagram,
  .checklist-diagram,
  .ready-stamp{
    width:auto;
    max-width:calc(100% - 36px);
    justify-self:stretch;
  }

  .gesture-strip{
    display:block;
    width:100%;
  }

  .gesture-strip-title,
  .gesture-list,
  .gesture-list article{
    width:100%;
    max-width:100%;
  }

  .gesture-list article{
    grid-template-columns:minmax(52px,58px) minmax(0,1fr);
  }

  .gesture-list h3,
  .gesture-list p{
    max-width:100%;
    overflow-wrap:anywhere;
  }
}

@media(max-width:380px){
  .quickstart-header{padding-inline:14px;gap:12px}
  .quickstart-header .brand img{width:104px}
  .manual-masthead{padding-inline:14px}
  .manual-title-row h1{font-size:clamp(3rem,17vw,4.1rem)}
  .setup-route a{padding-inline:10px}
  .instruction{grid-template-columns:46px minmax(0,1fr)}
  .instruction-copy{padding:30px 16px}
  .instruction h2{font-size:clamp(2.35rem,13vw,3.4rem)}
  .device-diagram,
  .action-diagram,
  .phone-diagram,
  .browser-diagram,
  .checklist-diagram,
  .ready-stamp{
    margin:16px 12px 22px 16px;
    max-width:calc(100% - 28px);
  }
  .gesture-strip-title{padding:42px 16px}
  .gesture-strip-title h2{font-size:clamp(2.45rem,13vw,3.55rem)}
  .gesture-list article{grid-template-columns:52px minmax(0,1fr);padding:20px 14px;gap:13px}
  .gesture-code{width:50px;height:50px;font-size:12px}
}
@media(max-width:380px){
  .ready-stamp strong{font-size:clamp(2rem,11vw,3rem)}
}