/* Hub-themed presentation, as requested in the approved screenshot.
   Content follows the app; spacing, mono type and phosphor frame are illustrative. */
.lens-hud{--lens-inset:6.7%;position:relative;container-type:inline-size;aspect-ratio:2/1;width:100%;padding:0!important;border:1px solid rgba(70,232,120,.24)!important;border-radius:clamp(15px,3vw,34px)!important;background:radial-gradient(100% 130% at 50% 0%,rgba(70,232,120,.065),transparent 65%),#07100a!important;box-shadow:inset 0 0 50px rgba(70,232,120,.025),0 22px 48px -28px rgba(0,0,0,.92)!important;overflow:hidden;color:var(--hud);font-family:var(--mono)!important;font-weight:400;text-shadow:0 0 8px rgba(70,232,120,.24)}
.lens-hud::before{content:"";display:block!important;position:absolute;inset:2.2cqw;border:1px solid rgba(70,232,120,.09);border-radius:clamp(10px,2.2vw,24px);pointer-events:none;z-index:3}
.lens-hud::after{display:none!important}
.rp-lens{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.rp-lens::before{display:none}
.lens-hud .lens-nav,.lens-hud .lens-body,.lens-hud .lens-footer{position:absolute;box-sizing:border-box;margin:0;left:var(--lens-inset);width:calc(100% - 2 * var(--lens-inset));font-family:var(--mono);font-weight:400;letter-spacing:0;text-align:left;overflow:hidden}
.lens-hud .lens-nav{top:7%;height:8%;padding:0;font-size:2cqw;line-height:3cqw;color:rgba(70,232,120,.58);white-space:pre;text-shadow:none}
.lens-hud .lens-body{top:19%;height:55%;padding:0;border:0;border-radius:0;font-size:2.7cqw;line-height:3.8cqw;color:rgba(70,232,120,.66)}
.lens-text{white-space:pre-wrap;overflow-wrap:break-word}
.lens-bright{color:var(--hud-hi);text-shadow:0 0 9px rgba(70,232,120,.3)}
.lens-dim{color:rgba(70,232,120,.5);text-shadow:none}
.lens-hud .lens-footer{top:77%;height:15%;padding:2.4cqw 0 0;border-top:1px solid rgba(70,232,120,.14);font-size:1.9cqw;line-height:2.85cqw;color:rgba(70,232,120,.55);white-space:pre;text-shadow:none;display:flex;justify-content:space-between;gap:0}
.lens-hud .lens-footer>span{min-width:0}
.lens-battery{flex-shrink:0}
.lens-hud .lens-scrolled .lens-text{transform:translateY(-19cqw)}
.lens-thumb{position:absolute;right:0;top:2%;width:.25cqw;height:28%;border-radius:2px;background:var(--hud);opacity:.4;transition:top .58s cubic-bezier(.65,0,.35,1)}
.lens-scrolled .lens-thumb{top:68%}
.lens-host-menu{position:absolute;top:4cqw;bottom:4cqw;left:4cqw;width:63%;z-index:4;background:rgba(7,22,13,.97);color:rgba(70,232,120,.66);border:1px solid rgba(70,232,120,.35);border-radius:2cqw;box-shadow:2cqw 0 5cqw rgba(0,0,0,.7),inset 0 0 3cqw rgba(70,232,120,.035);padding:3cqw 2cqw;font:400 2.7cqw/6.2cqw var(--mono);text-shadow:none;will-change:transform}
.lens-menu-row{white-space:pre;border-radius:.9cqw;padding:0 1.2cqw;line-height:6.2cqw}
.lens-menu-row.selected{color:var(--hud-hi);background:rgba(70,232,120,.075);text-shadow:0 0 8px rgba(70,232,120,.3)}
.lens-menu-position{position:absolute;bottom:2.8cqw;right:4.5cqw;font-size:1.9cqw;line-height:1.4;color:rgba(70,232,120,.55)}
.hud-note{font-size:.8rem;line-height:1.5;color:var(--muted);margin:12px 0 0}
.hold-menu-guide{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.hold-menu-guide ul{padding-left:1.2rem;margin:12px 0}
.hold-menu-guide li{margin:7px 0}
@media(max-width:720px){.hold-menu-guide{grid-template-columns:1fr;gap:22px}}
/* A full-width tablet stage can be taller than the viewport; let its controls scroll into view. */
@media(min-width:561px) and (max-width:860px) and (max-height:900px){.rp-stage{position:relative;top:auto}}

/* Context lessons share the approved Ring to Lens instrument, not its long
   scroll-story spacing. Instructions remain readable without JavaScript. */
.rl-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.rl-links a{font:500 .72rem var(--mono);padding:9px 13px;border:1px solid var(--line);border-radius:99px;color:var(--gold)}
.ring-lesson{margin-top:42px;scroll-margin-top:90px}
section.ring-lesson{padding-top:18px;padding-bottom:70px}
.ring-lesson>p{max-width:76ch;margin:10px 0 20px}
.rl-ready>.rl-fallback{display:none}
.rl-grid{display:grid;grid-template-columns:minmax(330px,1.06fr) minmax(260px,.94fr);gap:clamp(24px,4vw,52px);align-items:start;margin:26px 0 38px;overflow-anchor:none}
.rl-choices{margin:0;padding:0;list-style:none;counter-reset:lesson}
.rl-choices li{counter-increment:lesson;border-bottom:1px solid var(--line);padding:0 0 0 33px;position:relative}
.rl-choices li::before{content:counter(lesson,decimal-leading-zero);position:absolute;top:17px;left:0;font:400 .67rem var(--mono);color:var(--gold)}
.rl-choices button{border:0;background:none;text-align:left;width:100%;color:var(--muted);font:500 .92rem/1.45 var(--body);padding:13px 0;cursor:pointer}
.rl-choices button strong{font-weight:500}
.rl-choices [data-active] button{color:var(--fg)}
.rl-choices p{font-size:.88rem;line-height:1.6;margin:0;padding:0 0 18px}
.rl-choices p[hidden]{display:none}
.rl-choices li[data-active]{border-bottom-color:var(--gold)}
section.light .rl-choices li{border-color:var(--line-on-cream)}
section.light .rl-choices button{color:var(--muted-on-cream)}
section.light .rl-choices [data-active] button{color:var(--ink-on-cream)}
.rl-grid .rp-stage{position:sticky;top:85px;scroll-margin-top:65px}
.rl-grid .rp-stage-head{font-size:.58rem}
.rl-replay{border:0;border-bottom:1px solid var(--line);color:var(--gold);background:none;cursor:pointer;font:400 .6rem var(--mono);padding:4px 0;margin-top:12px}
.rl-contact{display:flex;gap:12px;justify-content:center;margin:10px 0 0;font:400 .55rem var(--mono);color:var(--ghost);min-height:12px}
/* Reserved on every step: toggling it moved the ring 22px on hold steps. */
.rl-contact[hidden]{display:flex;visibility:hidden}
.rl-contact[data-phase="tap"] span:first-child,.rl-contact[data-phase="release"] span:nth-child(2),.rl-contact[data-phase="hold"] span:last-child,.rl-contact[data-phase="all"] span{color:var(--hud-hi)}
.ring-lesson button:focus-visible,.rl-links a:focus-visible,.rl-replay:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.rl-reference{margin-top:32px}.rl-reference summary{cursor:pointer;font-weight:600;padding:14px 0}
.rl-caption{display:none}
/* Always reserves its height. Collapsing on :empty moved the ring 29px at the
   exact instant the HUD committed, on every step without a result line. */
.rl-status{display:block;font:400 .64rem/1.4 var(--mono);color:var(--gold);padding:8px 0 0;min-height:2.8em}
@media(max-width:860px){.rl-grid{grid-template-columns:1fr}.rl-grid .rp-stage{position:relative;top:auto;max-width:620px;width:100%;margin-inline:auto}.rl-choices{max-width:620px;width:100%;margin-inline:auto}.ring-lesson .rl-caption,section.light .ring-lesson .rl-caption{display:block;color:var(--muted);font:.83rem/1.5 var(--body);padding:0 16px 16px;margin:0}.rl-choices [data-active] p{display:none}}
@media(prefers-reduced-motion:reduce){.lens-host-menu{will-change:auto}.rl-choices *,.lens-thumb{transition:none}}
/* Current HUD examples: a readable, stable screen beside explicit state controls. */
.hud-explorer{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3fr);gap:28px;margin:28px 0;align-items:start}
.hud-state-choices{display:grid;gap:8px}
.hud-state-choices button{font:500 .92rem/1.4 var(--body);text-align:left;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:8px;padding:12px 16px;cursor:pointer}
.hud-state-choices button[aria-pressed="true"]{color:var(--fg);border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}
.hud-state-choices button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hud-state-preview{min-width:0}
.hud-state-caption{font-size:1rem;line-height:1.65;min-height:5em;margin:18px 0 0;color:var(--fg)}
/* Sharper text and a wider reading region. Seven live body rows fit without clipping. */
.lens-hud{--lens-inset:4%;text-shadow:none}
.lens-hud .lens-nav{color:rgba(70,232,120,.82);font-size:2.15cqw}
.lens-hud .lens-body{height:56%;font-size:2.65cqw;line-height:3.9cqw;color:rgba(70,232,120,.9)}
.lens-hud .lens-footer{font-size:2.1cqw;color:rgba(70,232,120,.85);padding-top:1.6cqw}
.lens-bright{ text-shadow:none }
@media(max-width:720px){.hud-explorer{grid-template-columns:1fr;gap:18px}.hud-state-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.hud-state-choices button{font-size:.83rem;padding:10px 12px}.hud-state-caption{min-height:7em}}

/* 587 status graphics retain one native row. Shapes come from the app raster. */
.lens-run{display:inline-flex;align-items:center;gap:1cqw;max-width:100%;height:3.9cqw;vertical-align:top;color:var(--hud-hi,#9ffabb)}
.lens-run canvas{width:4.17cqw;height:4.17cqw;flex:none;image-rendering:pixelated}
.lens-nav-signal{position:absolute;right:3%;top:3%;width:4.17cqw;height:4.17cqw;image-rendering:pixelated}
.hud-state-preview [data-hud-motion]{margin-top:18px;background:transparent;color:var(--fg);border:1px solid var(--line);padding:10px 16px;border-radius:8px;font:500 .88rem var(--body);cursor:pointer;min-height:44px}
.hud-state-preview [data-hud-motion]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hud-state-choices{max-height:570px;overflow:auto;padding:3px}
@media(max-width:720px){.hud-state-choices{max-height:235px}}
/* Phone companion, deliberately neutral inside the site's warm page chrome. */
.phone-review-guide{display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:clamp(28px,5vw,64px);margin:32px 0;align-items:start}
.phone-review-sample{background:#eee;color:#232323;border:1px solid #d9d9d9;border-radius:18px;padding:22px;font:400 15px/1.55 system-ui,sans-serif;box-shadow:0 18px 50px #0002}
.phone-review-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.04em;border-bottom:1px solid #ccc;padding-bottom:16px}
.phone-review-sample h3,.phone-review-sample h4{font-family:inherit;color:#232323;letter-spacing:0;margin:12px 0 8px}
.phone-review-sample h3{font-size:23px}.phone-review-sample h4{font-size:18px}
.phone-review-sample p{font:inherit;color:#444;margin:8px 0}
.phone-review-sample .phone-review-back{font-size:11px;margin-top:16px}
.phone-voice-card{background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:18px;margin-top:18px}
.phone-suggestion{border-left:3px solid #888;padding-left:12px;margin:18px 0}
.phone-review-sample blockquote{border-left:2px solid #aaa;margin:12px 0;padding:0 0 0 12px}
.phone-review-sample .phone-sample-note{font-size:12px;color:#555}
.phone-search-sample{border:1px solid #777;background:#fff;border-radius:6px;padding:12px}
.phone-profile-sample{display:flex;justify-content:space-between;gap:10px;border:1px solid #ddd;border-radius:6px;padding:12px;margin:10px 0;font-size:13px}
.phone-review-steps{margin:0;padding-left:22px}.phone-review-steps li{padding:0 0 18px 10px}.phone-review-steps h3{margin-bottom:10px}
@media(max-width:720px){.phone-review-guide{grid-template-columns:1fr}.phone-review-sample{max-width:390px;width:100%;box-sizing:border-box;margin:auto}}
.home-lens{--hud:#46e878;--hud-hi:#9ffabb;max-width:560px;margin:0 auto 20px}
.gc .lens-hud{margin-bottom:20px;--hud:#46e878;--hud-hi:#9ffabb}
.phone-review-sample strong,.phone-review-sample b,.phone-review-sample label{color:#232323}

.tcard .lens-hud,.hud-frame.lens-hud{--mono:"Courier New",monospace;--green:#46e878;--green-dim:#288249;width:100%;margin-bottom:1.1rem}