/* A contained, readable diagram first; motion is an optional enhancement. */
.qgj { --qgj-blue: var(--quasar, #38bdf8); --qgj-amber: #f6bb72; --qgj-ink: #f0f7ff; --qgj-muted: #acbfd2; margin: 70px 0; scroll-margin-top: var(--pdp-anchor-top,150px); }
.qgj *, .qgj *::before, .qgj *::after { box-sizing: border-box; }
.qgj-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 36px; margin-bottom: 24px; }
.qgj-eyebrow { display: block; margin-bottom: 12px; color: var(--quasar, #38bdf8); font: 600 11px/1.4 var(--mono, monospace); letter-spacing: .15em; text-transform: uppercase; }
.qgj-heading h2 { font-family: var(--display, sans-serif); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.03em; }
.qgj-heading p { margin: 0 0 3px; max-width: 450px; color: var(--text-dim, #a3b5cc); font-size: 16px; line-height: 1.6; }
.qgj-figure { margin: 0; overflow: hidden; border: 1px solid var(--line-2, #31445d); border-radius: 22px; background: #0c1626; color: var(--qgj-ink); }
.qgj-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(95px, .6fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 30px 0; padding: 60px 36px 30px; overflow: hidden; background: radial-gradient(ellipse at 25% 35%, #13344a 0, transparent 48%), radial-gradient(ellipse at 90% 80%, #172b3d 0, transparent 42%), #0c1626; }
.qgj-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: radial-gradient(#6685a4 .7px, transparent .7px); background-size: 22px 22px; pointer-events: none; }
.qgj-stage-top { position: absolute; inset: 16px 24px auto; display: flex; justify-content: space-between; gap: 12px; color: #acc3d7; font: 11px/1.5 var(--mono, monospace); }
.qgj-stage-top span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.qgj-stage-top svg { width: 10px; height: 14px; color: var(--qgj-blue); }
.qgj-device { position: relative; z-index: 1; align-self: center; justify-self: center; width: 100%; max-width: 275px; text-align: center; }
.qgj-source { padding: 14px 12px 12px; border: 1px solid #375369; border-radius: 17px; background: #112437; box-shadow: 0 10px 35px #02091433; }
.qgj-battery { grid-column: 1; grid-row: 1; }
.qgj-mains { grid-column: 1; grid-row: 2; border-color: #625443; background: #202a33; }
.qgj-glass { grid-column: 3; grid-row: 1; }
.qgj-phone { grid-column: 3; grid-row: 2; }
.qgj-device h3 { margin: 4px 0 0; font: 600 17px/1.3 var(--body, sans-serif); letter-spacing: -.01em; color: var(--qgj-ink); }
.qgj-device h3 span { font-weight: 400; color: #b8cadb; }
.qgj-device-kind { display: block; color: #c0eaff; font: 600 10px/1.4 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; }
.qgj-mains .qgj-device-kind { color: #f5d3a7; }
.qgj-hardware { display: block; width: 100%; max-height: 145px; overflow: visible; font-family: var(--body, sans-serif); }
.qgj-source-values { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 9px; }
.qgj-source-values strong { color: #f1faff; font: 600 31px/1 var(--mono, monospace); letter-spacing: -.04em; }
.qgj-source-values strong span { font-size: 17px; margin-left: 2px; color: #a5d5ed; }
.qgj-source-values > span { padding-left: 15px; border-left: 1px solid #52677c; text-align: left; color: #c9d9e6; font: 12px/1.6 var(--mono, monospace); }
.qgj-mains .qgj-source-values strong span { color: #f1c58e; }
.qgj-device-note, .qgj-model { display: block; margin-top: 7px; color: var(--qgj-muted); font-size: 11px; line-height: 1.4; }
.qgj-model { margin-top: 3px; }
.qgj-anchor { position: absolute; width: 8px; height: 8px; top: 50%; margin-top: -4px; right: -5px; border: 1px solid #a8e2ff; border-radius: 50%; background: #183d56; }
.qgj-mains .qgj-anchor { background: #5c4730; border-color: #f0c996; }
.qgj-target .qgj-anchor { right: auto; left: -5px; border-color: #a7b8cf; background: #344861; }
.qgj-routes { position: absolute; width: 100%; height: 100%; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.qgj-route { color: var(--qgj-blue); }
.qgj-route-charger { color: var(--qgj-amber); }
.qgj-route path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.qgj-route-track { stroke-width: 1; opacity: .22; }
.qgj-route-light { stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .55; }
.qgj-route-arrow { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .8; transform-origin: 0 0; }
.qgj-route-label { fill: currentColor; font: 500 9px var(--mono, monospace); text-anchor: middle; opacity: .9; }
.qgj-packet { transform-origin: 0 0; will-change: transform, opacity; }
.qgj-packet text { font: 600 10px var(--mono, monospace); }
.qgj-panel { width: min(100%, 238px); aspect-ratio: 1; margin: 0 auto 12px; padding: 14px; border-radius: 19px; border: 1px solid #697380; background: linear-gradient(125deg, #343c48, #0a1018 34%, #02060b 75%, #313c48); box-shadow: 3px 7px 0 #02060b, 8px 16px 28px #02061055, inset 0 0 0 3px #1a2432; }
.qgj-glass-screen { height: 100%; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 6px; border: 1px solid #324657; background: #0c1721; text-align: left; }
.qgj-glass-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; font: 600 8px/1 var(--body, sans-serif); letter-spacing: .18em; color: #d6e6f2; }
.qgj-glass-top svg { width: 8px; height: 11px; color: #70cdf7; }
.qgj-glass-battery { flex: 1; position: relative; padding: 7px 9px; border-radius: 5px; background: #163343; }
.qgj-glass-battery > span, .qgj-glass-pair span, .qgj-glass-charger > span { display: block; color: #bed3df; font: 500 7px/1.3 var(--body, sans-serif); letter-spacing: .06em; }
.qgj-glass-battery strong { display: block; color: #edfaff; font: 500 37px/1.1 var(--body, sans-serif); letter-spacing: -.04em; }
.qgj-glass-battery strong small { font-size: 16px; margin-left: 2px; font-weight: 400; color: #b0d3e7; }
.qgj-charge-bar { height: 4px; margin-top: 5px; background: #304b5c; border-radius: 4px; overflow: hidden; }
.qgj-charge-bar i { display: block; height: 100%; border-radius: 4px; background: #6ac8ef; transform: scaleX(.78); transform-origin: left center; }
.qgj-glass-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.qgj-glass-pair > div { padding: 6px 7px; background: #1b2934; border-radius: 4px; }
.qgj-glass-pair b { display: block; margin-top: 2px; font: 500 16px/1.2 var(--body, sans-serif); color: #edf5ff; }
.qgj-glass-pair span, .qgj-glass-pair b { white-space: nowrap; }
.qgj-glass-pair b small, .qgj-glass-charger b small { color: #c4d2dd; font-size: 10px; }
.qgj-glass-charger { padding: 6px 8px; background: #3b3027; border-radius: 4px; }
.qgj-glass-charger > div { display: flex; justify-content: space-between; align-items: center; padding-top: 2px; }
.qgj-glass-charger b { color: #ffe5c5; font: 500 14px/1.2 var(--body, sans-serif); }
.qgj-phone-body { position: relative; width: 161px; margin: 0 auto 11px; padding: 16px 6px 10px; border: 1px solid #7a8795; border-radius: 22px; background: linear-gradient(125deg, #303c49, #070d14 30%, #141f2a); box-shadow: 3px 5px 0 #02070d, 8px 12px 25px #02061055; }
.qgj-phone-camera { position: absolute; top: 6px; left: calc(50% - 16px); width: 32px; height: 4px; border-radius: 4px; background: #02060a; }
.qgj-phone-screen { min-height: 213px; overflow: hidden; border-radius: 4px 4px 12px 12px; background: #e8eff4; color: #172f43; text-align: left; }
.qgj-app-top { padding: 10px 7px 8px; background: #067bc1; color: #fff; font: 500 12px/1.2 var(--body, sans-serif); }
.qgj-app-tab { display: flex; align-items: center; justify-content: space-between; margin: 0 7px; padding: 6px 1px; border-bottom: 2px solid #0782c4; font: 600 8px/1 var(--body, sans-serif); color: #12618a; }
.qgj-app-tab svg { display: block; width: 7px; height: 10px; }
.qgj-app-card { margin: 6px; padding: 8px 7px; background: #fff; border: 1px solid #d2dee7; border-radius: 4px; }
.qgj-app-device { font: 600 9px/1.2 var(--body, sans-serif); color: #275374; }
.qgj-app-primary { margin-top: 3px; font: 500 28px/1.1 var(--body, sans-serif); color: #183b56; }
.qgj-app-primary small { font-size: 14px; }
.qgj-app-metrics { display: flex; justify-content: space-between; margin-top: 4px; color: #365365; font: 9px/1.2 var(--body, sans-serif); }
.qgj-app-charge { display: flex; justify-content: space-between; margin-top: 8px; color: #244760; font: 500 12px/1.2 var(--body, sans-serif); }
.qgj-app-foot { padding: 2px 7px 9px; color: #4c6679; font: 8px/1.2 var(--body, sans-serif); }
.qgj [data-glass-received="glass-battery"][data-received="false"], .qgj [data-glass-received="glass-charger"][data-received="false"] { opacity: .5; }
.qgj [data-glass-received^="phone"][data-received="false"] { opacity: .58; }
.qgj-storyline { display: flex; align-items: flex-start; gap: 20px; min-height: 110px; padding: 23px 28px; border-top: 1px solid #304456; background: #142337; }
.qgj-chapter-number { flex: none; padding-top: 4px; color: #82d9ff; font: 12px/1.5 var(--mono, monospace); }
.qgj-storyline h3 { margin: 0; color: #eef7ff; font: 600 21px/1.2 var(--display, sans-serif); }
.qgj-storyline p { margin: 7px 0 0; max-width: 720px; color: #bdcede; font-size: 14px; line-height: 1.5; }
.qgj-controls { display: flex; gap: 17px; align-items: center; padding: 17px 28px; border-top: 1px solid #2f4054; background: #0e1c2d; }
.qgj-controls[hidden], .qgj-mode-note[hidden] { display: none; }
.qgj-play { display: inline-flex; justify-content: center; align-items: center; flex: none; gap: 9px; min-width: 154px; min-height: 44px; padding: 10px 13px; border: 1px solid #657e94; border-radius: 9px; background: #1b3248; color: #f0f8ff; font: 500 13px/1.3 var(--body, sans-serif); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.qgj-play > span:first-child { display: block; width: 13px; color: #8ddcff; }
.qgj-seek-label { display: flex; flex: 1; min-width: 40px; align-items: center; min-height: 44px; }
.qgj-seek-label input { width: 100%; height: 24px; margin: 0; accent-color: #76d3fd; cursor: pointer; }
.qgj-time { flex: none; min-width: 80px; color: #bacfe1; font: 11px/1.3 var(--mono, monospace); text-align: right; }
.qgj-note { padding: 18px 28px 20px; border-top: 1px solid #283d50; color: #a8bed1; font-size: 12px; line-height: 1.65; background: #0e1c2d; }
.qgj-note strong { color: #e2effa; font-weight: 600; }
.qgj-chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 18px 0 0; }
.qgj-chapters li { margin: 0; padding: 0; }
.qgj-chapters button { display: grid; grid-template-columns: 25px 1fr; align-content: start; gap: 6px 8px; width: 100%; height: 100%; min-height: 134px; padding: 16px 13px; border: 1px solid var(--line, #32455a); border-radius: 12px; background: var(--surface, #101a2c); text-align: left; color: var(--text, #edf5ff); font-family: var(--body, sans-serif); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.qgj-chapters button:disabled { opacity: 1; cursor: default; }
.qgj-chapters button > span { padding-top: 1px; color: var(--quasar, #38bdf8); font: 11px/1.4 var(--mono, monospace); }
.qgj-chapters strong { font-size: 13px; line-height: 1.35; font-weight: 600; }
.qgj-chapters small { grid-column: 2; color: var(--text-dim, #a3b5cc); font-size: 11px; line-height: 1.5; }
.qgj-chapters button[aria-current="step"] { border-color: var(--quasar, #38bdf8); background: var(--quasar-tint, #143149); }
.qgj-play:focus-visible, .qgj-seek-label input:focus-visible, .qgj-chapters button:focus-visible { outline: 3px solid var(--quasar-bright, #7dd6fc); outline-offset: 4px; }
.qgj-mode-note { margin: 12px 0 0; color: var(--text-dim, #a3b5cc); font-size: 12px; }
.qgj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .qgj-play:hover { background: #27455f; border-color: #8fdcff; }
  .qgj-chapters button:not(:disabled):hover { border-color: var(--quasar, #38bdf8); }
}
@media (max-width: 800px) {
  .qgj-heading { grid-template-columns: 1fr; gap: 17px; }
  .qgj-heading p { max-width: 640px; }
  .qgj-stage { padding-right: 20px; padding-left: 20px; grid-template-columns: minmax(0, 1fr) minmax(80px, .45fr) minmax(0, 1fr); }
  .qgj-chapters { grid-template-columns: repeat(2, 1fr); }
  .qgj-chapters button { min-height: 118px; }
}
@media (max-width: 680px) {
  .qgj { margin: 48px 0; }
  .qgj-heading h2 { font-size: clamp(27px, 7vw, 35px); }
  .qgj-heading p { font-size: 14px; }
  .qgj-figure { border-radius: 16px; }
  .qgj-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 108px 26px; padding: 54px 17px 22px; }
  .qgj-stage-top { inset: 15px 16px auto; font-size: 9px; }
  .qgj-battery { grid-column: 1; grid-row: 1; align-self: stretch; }
  .qgj-mains { grid-column: 2; grid-row: 1; align-self: stretch; }
  .qgj-glass { grid-column: 1; grid-row: 2; align-self: start; }
  .qgj-phone { grid-column: 2; grid-row: 2; align-self: start; }
  .qgj-source { padding: 10px 7px 12px; border-radius: 12px; }
  .qgj-device-kind { font-size: 8px; letter-spacing: .06em; }
  .qgj-hardware { height: 107px; }
  .qgj-device h3 { font-size: 13px; }
  .qgj-source-values { gap: 8px; margin-top: 10px; }
  .qgj-source-values strong { font-size: 25px; }
  .qgj-source-values strong span { font-size: 12px; }
  .qgj-source-values > span { padding-left: 8px; font-size: 9px; }
  .qgj-device-note, .qgj-model { font-size: 9px; }
  .qgj-anchor { top: auto; right: auto; bottom: -5px; left: calc(50% - 4px); margin-top: 0; }
  .qgj-target .qgj-anchor { top: -7px; bottom: auto; left: calc(50% - 4px); }
  .qgj-panel { padding: 10px; margin-top: 0; border-radius: 14px; box-shadow: 2px 5px 0 #02060b, 6px 10px 20px #02061055, inset 0 0 0 2px #1a2432; }
  .qgj-glass-screen { display: grid; grid-template-rows: 8px minmax(0, 1fr) 26px 24px; padding: 5px; gap: 3px; }
  .qgj-glass-top { font-size: 6px; padding-bottom: 1px; }
  .qgj-glass-top svg { width: 6px; height: 8px; }
  .qgj-glass-battery { padding: 4px 5px; min-height: 0; }
  .qgj-glass-battery > span, .qgj-glass-pair span, .qgj-glass-charger > span { font-size: 5.5px; letter-spacing: 0; }
  .qgj-glass-battery strong { font-size: 22px; line-height: 1; }
  .qgj-glass-battery strong small { font-size: 12px; }
  .qgj-charge-bar { margin-top: 2px; height: 3px; }
  .qgj-glass-pair { gap: 3px; }
  .qgj-glass-pair > div { padding: 3px 4px; }
  .qgj-glass-pair b { font-size: 11px; }
  .qgj-glass-pair b small, .qgj-glass-charger b small { font-size: 7px; }
  .qgj-glass-charger { padding: 3px 5px; }
  .qgj-glass-charger b { font-size: 10px; }
  .qgj-phone-body { width: min(100%, 136px); padding: 13px 5px 7px; border-radius: 18px; }
  .qgj-phone-camera { top: 5px; height: 3px; }
  .qgj-phone-screen { min-height: 186px; }
  .qgj-app-top { font-size: 10px; padding: 9px 5px 7px; }
  .qgj-app-tab { padding: 5px 0; font-size: 7px; }
  .qgj-app-card { margin: 5px; padding: 6px 5px; }
  .qgj-app-device { font-size: 8px; }
  .qgj-app-primary { font-size: 25px; }
  .qgj-app-metrics { font-size: 8px; }
  .qgj-app-charge { font-size: 10px; }
  .qgj-app-foot { font-size: 7px; }
  .qgj-storyline { min-height: 139px; gap: 12px; padding: 20px 17px; }
  .qgj-chapter-number { font-size: 10px; }
  .qgj-storyline h3 { font-size: 19px; }
  .qgj-storyline p { font-size: 12px; }
  .qgj-controls { gap: 12px; flex-wrap: wrap; padding: 12px 17px; }
  .qgj-play { min-width: 147px; }
  .qgj-time { margin-left: auto; min-width: 72px; }
  .qgj-seek-label { order: 3; flex-basis: 100%; min-height: 34px; }
  .qgj-note { padding: 15px 17px 18px; font-size: 11px; }
  .qgj-chapters { gap: 9px; margin-top: 13px; }
  .qgj-chapters button { grid-template-columns: 20px 1fr; gap: 5px; min-height: 146px; padding: 13px 10px; }
  .qgj-chapters strong { font-size: 12px; }
  .qgj-chapters small { font-size: 10px; }
}
@media (max-width: 370px) {
  .qgj-stage { column-gap: 20px; padding-right: 12px; padding-left: 12px; }
  .qgj-source-values strong { font-size: 22px; }
  .qgj-source-values > span { font-size: 8px; padding-left: 6px; }
  .qgj-device h3 { font-size: 11px; }
  .qgj-hardware { height: 92px; }
  .qgj-panel { padding: 8px; }
  .qgj-glass-screen { grid-template-rows: 7px minmax(0, 1fr) 22px 21px; padding: 4px; }
  .qgj-glass-battery { padding: 3px 4px; }
  .qgj-glass-battery strong { font-size: 20px; }
  .qgj-charge-bar { display: none; }
  .qgj-glass-pair b { font-size: 9px; }
  .qgj-glass-pair > div { padding: 3px; }
  .qgj-glass-charger { padding: 2px 4px; }
  .qgj-glass-charger b { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .qgj-play, .qgj-chapters button { transition: none; }
  .qgj-packet { will-change: auto; }
}