/* The NanoRC page: the approved layout ("NanoRC in the crowd-play shell",
   11-03) in the demos' shell. One viewport and no scroll on desktop; the bar
   above the picture and the reactions and strip below it, both as wide as it;
   nothing drawn over the picture, so the full screen <video> can take the
   display's overlay plane (scanout.js).
   Phones: upright, the sticks straight under the picture and the page scrolls;
   on their side, a stick either side of the picture. The picture gives way to
   the sticks there, never the other way round.
   Tokens: nearglass-web packages/ui/src/tokens.css, as /kvm and /play. */
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 96.86%; ascent-override: 100.01%; descent-override: 24.90%; line-gap-override: 0%; }
:root {
  --ink: #0a1124; --ink-2: #3a4560; --muted: #687290;
  --line: #e4e8f0; --line-2: #eef1f6; --line-3: #cdd3e0; --bg: #ffffff; --bg-soft: #f6f8fb;
  --accent: #2b4fff; --accent-ink: #1a36d6; --accent-wash: #edf0ff;
  --ok: #12b76a; --ok-ink: #0f7b4f; --stop: #d03b3b;
  --frame: #070b18;
  --text: "Inter Tight", "Inter Tight Fallback", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --top-h: 65px;     /* the shared header: 64 px, 56 px from 981 px wide, plus its 1 px hairline */
  --edge: 20px;
  --gap: 12px;
  --bar-h: 52px;
  --react-h: 48px;
  --strip-h: 78px;
  --side-w: 340px;
}
@media (min-width: 981px) { :root { --top-h: 57px; } }
* { box-sizing: border-box; }
html { font-synthesis-weight: none; }
/* The header reserves a scrollbar gutter for pages that scroll; this one does
   not on desktop, and the picture's width is worked out from 100vw */
:root { scrollbar-gutter: auto; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg-soft); color: var(--ink-2); font: 400 14px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.u { font-size: 12px; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
kbd { font: 500 11px var(--mono); color: var(--ink); background: #fff; border-radius: 6px; padding: 1px 6px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--accent); color: #fff; font: 500 13px/1 var(--text); }
.btn:hover { background: var(--accent-ink); }
.btn[disabled] { background: var(--line-2); color: var(--muted); cursor: default; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { height: 28px; padding: 0 12px; font-size: 12px; }
.btn .ico { display: none; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.btn:focus-visible, .link:focus-visible, canvas:focus-visible, .seg button:focus-visible, .react:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The arena: the picture is the largest 16:9 that fits with the bar above and
   the reactions and strip below; the side column beside it */
.arena {
  --avail-h: calc(100dvh - var(--top-h) - 2 * var(--edge) - var(--bar-h) - var(--react-h) - var(--strip-h) - 3 * var(--gap));
  --stream-w: min(calc(100vw - 2 * var(--edge) - var(--side-w) - 20px), calc(var(--avail-h) * 16 / 9));
  height: calc(100dvh - var(--top-h)); padding: var(--edge);
  display: grid; grid-template-columns: var(--stream-w) var(--side-w); column-gap: 20px; justify-content: center; align-content: start;
}
.col { display: grid; grid-template-rows: var(--bar-h) auto var(--react-h) var(--strip-h); row-gap: var(--gap); min-width: 0; align-self: start; }
.side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.intro, #close, #foot { display: none; }

/* The state bar: one height, whatever the state */
.bar { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 8px 0 14px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); container-type: inline-size; }
.bar h1 { margin: 0; font: 600 16px/1 var(--text); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.bar .dot { display: none; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
.dot.off { background: var(--muted); box-shadow: none; }
.vsep { width: 1px; height: 24px; flex: none; background: var(--line); }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 12px/1 var(--text); }
.who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.who b { color: var(--ink); font-weight: 400; font-size: 14px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar.yours .who .eyebrow { color: var(--accent); }
.time { font-size: 13px; color: var(--ink); white-space: nowrap; }
.time.low { color: var(--stop); }
.queue { white-space: nowrap; flex: none; }
.queue .n { font-size: 18px; line-height: 1; color: var(--ink); }
.acts { display: flex; gap: 6px; flex: none; }
@container (max-width: 760px) { .bar h1, .bar h1 ~ .vsep:first-of-type { display: none; } }

/* The picture: nothing over it */
.screen { position: relative; width: var(--stream-w); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: var(--frame); box-shadow: 0 0 0 1px rgba(10,17,36,.08), 0 40px 80px -40px rgba(10,17,36,.45); }
.screen canvas, .screen video { display: block; width: 100%; height: 100%; }
.camoff { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: #c9d1ee; }
.camoff b { color: #fff; font-weight: 500; font-size: 17px; }
.camoff span { max-width: 40ch; font-size: 14px; }

/* Reactions: a strip under the picture, never over it */
.reactions { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lane { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.lane span { position: absolute; top: 50%; font-size: 22px; line-height: 1; animation: pop 1.4s ease-out forwards; }
@keyframes pop { from { transform: translateY(-50%) scale(.4); opacity: 0; } 18% { transform: translateY(-50%) scale(1.15); opacity: 1; } 32% { transform: translateY(-50%) scale(1); } 65% { opacity: 1; } to { transform: translateY(-50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lane span { animation: fade 1.4s ease-in-out forwards; } @keyframes fade { from { transform: translateY(-50%); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-50%); opacity: 0; } } }
.reacts { display: flex; gap: 6px; flex: none; }
.react { width: 40px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; cursor: pointer; }
.react:hover { background: var(--accent-wash); }

/* The strip: how to drive on the left, you and the measures on the right */
.strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 0; }
.howto { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.howto p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.howto .eyebrow { width: 30px; }
.howto .note { color: var(--muted); font-size: 12px; }
.you { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.me { font-size: 13.5px; }
.me strong { color: var(--ink); font-weight: 500; }
.me .sep { color: var(--line-3); }
#name-form { display: inline-flex; gap: 6px; align-items: center; }
#name-form input { width: 150px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font: 400 13px var(--text); }
.name-err { color: var(--stop); font-size: 12px; }
.meas { display: flex; align-items: center; gap: 4px 16px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.meas b { color: var(--ink); font-weight: 500; }
.meas .status { color: var(--ink); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.meas .status:empty { display: none; }

/* The side column */
.card { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(10,17,36,.07), 0 12px 32px -20px rgba(10,17,36,.3); }
.counters { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.counters > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.counters > div + div { border-left: 1px solid var(--line-2); padding-left: 10px; }
.counters b { font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink); }
.live-k { display: flex; align-items: center; gap: 6px; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--ink); color: #c9d1ee; text-decoration: none; flex: none; }
.callout:hover { color: #c9d1ee; }
.callout .words { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; font-size: 12.5px; }
.callout b { color: #fff; font-weight: 500; font-size: 14px; }
.callout .go { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.12); font-weight: 500; font-size: 14px; }
.callout:hover .go { background: rgba(255,255,255,.2); }
.controls { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
.controls[data-off="1"] { opacity: .6; }
.ctl-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); font-weight: 500; font-size: 15px; }
.controls[data-off="0"] #ctl-state { color: var(--accent); }
.modes { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg.layout { width: 104px; }
.seg button { min-height: 30px; border: 0; background: transparent; border-radius: 999px; font: 500 13px var(--text); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-3), 0 1px 2px rgba(10,17,36,.08); }
.sticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: center; }
.stick { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.pad { position: relative; width: 118px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 58%, var(--bg-soft) 59%); border: 1px solid var(--line-3); touch-action: none; -webkit-user-select: none; user-select: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 6px 14px -6px rgba(10,17,36,.5); }
.pad.active .knob, .pad.keyed .knob { box-shadow: 0 6px 14px -6px rgba(10,17,36,.5), 0 0 0 5px rgba(43,79,255,.35); }
.lab { font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }
.lab b { color: var(--ink); font-weight: 500; }
.drivebtns { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.hold { min-height: 52px; border: 0; border-radius: 14px; background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); font: 500 15px var(--text); cursor: pointer; touch-action: none; }
.hold[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 8px 22px -8px rgba(43,79,255,.7); }
.hold small { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.stop { min-height: 52px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--stop); color: #fff; font: 500 13px var(--mono); letter-spacing: .1em; cursor: pointer; }
.touchhint { display: none; font-size: 13px; line-height: 1.35; color: var(--muted); }
@media (pointer: coarse) { .hold { display: none; } .touchhint { display: block; } }
/* What you're sending: only where the column has the room for it */
.sending { display: none; flex-direction: column; gap: 7px; }
@media (min-height: 1000px) and (min-width: 901px) { .sending { display: flex; } }
.axes { display: flex; flex-direction: column; gap: 6px; }
.axis { display: grid; grid-template-columns: 72px 1fr 30px; align-items: center; gap: 8px; font-size: 12.5px; }
.bar2 { position: relative; height: 7px; border-radius: 4px; background: var(--line-2); }
.bar2 .cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #b7bfd0; }
.bar2 .fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #12c8d6, #2b4fff 55%, #7b4dff); }
.axis .val { text-align: right; color: var(--ink); font-family: var(--mono); font-size: 12px; }
#padstate:empty { display: none; }
.latency { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; flex: none; }
.lat-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); font-weight: 500; }
#lat { display: block; width: 100%; height: 84px; }
.lat-none { height: 84px; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.legend i { width: 10px; height: 2px; background: var(--accent); }
/* By id: body.details is the page's "Details open" state, so a .details rule
   here would also match the whole page (.details div:empty took the knobs) */
#details { border-top: 1px solid var(--line-2); padding-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
#details div:empty { display: none; }

/* Short desktop windows: the column sheds what it can do without, Details, then
   the graph, then the stats and the strip's words; the callout stays */
@media (max-height: 830px) and (min-width: 901px) { #more, #details { display: none !important; } }
@media (max-height: 770px) and (min-width: 901px) { .latency { display: none; } }
@media (max-height: 610px) and (min-width: 901px) { :root { --strip-h: 52px; } .counters { display: none; } .howto .note { display: none; } }

/* Full screen (player/fullscreen.js): the player's <video> alone in its device
   pixel box (scanoutBox), nothing painted above it */
html.scanout, html.scanout body { background: #000; overflow: hidden; }
html.scanout body * { visibility: hidden; }
html.scanout #scan, html.scanout canvas.scan-target { visibility: visible; position: fixed; background: transparent; object-fit: fill; }
html.pseudo, html.pseudo body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
.btn.fsexit { position: fixed; z-index: 3; gap: 6px; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px); height: 44px; background: rgba(10,17,36,.55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fsexit-rest .4s ease 3s forwards; }
.btn.fsexit:hover { background: rgba(10,17,36,.75); }
.btn.fsexit .ico { display: block; }
html.scanout #fsexit, html.scanout #fsexit * { visibility: visible; }
@keyframes fsexit-rest { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fsexit { animation: none; } }

/* A phone upright, or a narrow window: one column, the page scrolls; the
   picture high, the sticks straight under it */
@media (max-width: 900px) and (min-height: 501px), (max-width: 900px) and (orientation: portrait) {
  :root { --edge: 12px; --stream-w: calc(100vw); }
  body { overflow: auto; }
  .arena { --stream-w: 100vw; height: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; overflow-x: clip; }
  .col, .side, .strip { display: contents; }
  .intro { display: block; order: 0; }
  .intro h2 { margin: 0; font: 500 15px/1.2 var(--text); color: var(--ink); letter-spacing: -.01em; }
  .intro p { margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .bar { order: 1; flex: none; gap: 10px; height: 46px; padding: 0 5px 0 12px; border-radius: 23px; box-shadow: 0 0 0 1px var(--line-2); }
  .bar h1, .bar .vsep, .who .eyebrow, .btn .lbl { display: none; }
  .bar .dot { display: block; box-shadow: none; width: 7px; height: 7px; }
  .avatar { width: 22px; height: 22px; font-size: 11px; }
  .who { flex: 0 1 auto; }
  .who b { font-size: 13.5px; font-weight: 500; }
  .time { min-width: 0; }
  .time { font-size: 12px; color: var(--muted); }
  .queue { font-size: 13px; }
  .queue::before { content: "\00b7\00a0"; color: var(--muted); }
  .queue .n { font-size: 13px; color: var(--ink-2); }
  .acts { margin-left: auto; }
  #join { padding: 0 12px; }
  #full { width: 36px; padding: 0; }
  #full .ico { display: block; }
  .screen { order: 2; margin: 0 calc(-1 * var(--edge)); border-radius: 0; box-shadow: none; }
  .controls { order: 3; padding: 12px; }
  .controls .ctl-head, .sending, #padstate { display: none; }
  .seg button { min-height: 36px; font-size: 14px; }
  .pad { width: 130px; }
  .reactions { order: 4; padding: 10px; height: auto; flex-wrap: wrap; border-radius: 16px; }
  .reactions .eyebrow { display: none; }
  .lane { flex-basis: 100%; height: 24px; order: 2; }
  .reacts { flex: 1 1 100%; }
  .react { flex: 1; height: 44px; font-size: 18px; }
  .callout { order: 5; }
  .counters { order: 6; padding: 12px; }
  .latency { order: 8; }
  body:not(.details) .latency { display: none; }
  .howto { display: none; }
  .you { order: 7; align-items: stretch; gap: 8px; }
  .me { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; }
  #privacy-note { margin-left: auto; }
  .me .sep { display: none; }
  .meas { justify-content: space-between; white-space: normal; font-size: 12px; }
  #close { display: block; order: 9; margin: 12px calc(-1 * var(--edge)) 0; }
  #close.ngc.partner { width: auto; padding-top: 24px; }
  #foot { display: block; order: 10; margin: 0 calc(-1 * var(--edge)); }
}

/* A phone on its side: a stick either side of the picture, as big as the
   window allows. The sticks keep 112 px each, so on a narrow phone the
   picture shrinks; they never sit over it. On a turn, the sticks with Dig or
   Travel and STOP under them; otherwise the reactions and the counters there. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --edge: 6px; --bar-h: 44px; }
  body { overflow: hidden; }
  .arena {
    --avail-h: calc(100dvh - var(--top-h) - 2 * var(--edge) - var(--bar-h) - 6px);
    --stream-w: min(calc(100vw - 224px - 40px), calc(var(--avail-h) * 16 / 9));
    height: calc(100dvh - var(--top-h)); padding: var(--edge) max(8px, env(safe-area-inset-right)) var(--edge) max(8px, env(safe-area-inset-left));
    display: grid; grid-template-columns: minmax(112px, 1fr) var(--stream-w) minmax(112px, 1fr); grid-template-rows: var(--bar-h) minmax(0, 1fr) 46px; gap: 6px 8px;
  }
  .intro, .howto, .you, #close, #foot, .latency, .sending, #padstate, .ctl-head, .touchhint, .hold, .seg.layout, .lab, .strip, .bar h1, .bar .vsep, .who .eyebrow, .btn .lbl { display: none; }
  .col, .side, .controls, .sticks, .drivebtns, .modes { display: contents; }
  .bar { grid-area: 1 / 2 / 2 / 3; gap: 8px; padding: 0 4px 0 12px; border-radius: 22px; box-shadow: 0 0 0 1px var(--line-2); }
  .bar .dot { display: block; box-shadow: none; width: 7px; height: 7px; }
  .avatar { width: 22px; height: 22px; font-size: 11px; }
  .who { flex: 0 1 auto; }
  .who b { font-size: 13px; font-weight: 500; }
  .time { font-size: 12px; color: var(--muted); }
  .queue { font-size: 13px; }
  .queue .n { font-size: 13px; color: var(--ink-2); }
  .acts { margin-left: auto; }
  #full { width: 36px; padding: 0; }
  #full .ico { display: block; }
  .screen { grid-area: 2 / 2 / 4 / 3; border-radius: 0; box-shadow: none; align-self: start; }
  .stick-l { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  .stick-r { grid-area: 1 / 3 / 3 / 4; align-self: center; }
  .pad { width: min(124px, 100%); }
  .seg:not(.layout) { grid-area: 3 / 1 / 4 / 2; align-self: center; justify-self: center; width: min(124px, 100%); }
  .stop { grid-area: 3 / 3 / 4 / 4; justify-self: center; width: min(124px, 100%); min-height: 44px; padding: 0; }
  body:not([data-state="drive"]) .stick, body:not([data-state="drive"]) .seg:not(.layout), body:not([data-state="drive"]) .stop { display: none; }
  .reactions { grid-area: 1 / 1 / 4 / 2; align-self: center; padding: 0; background: none; box-shadow: none; overflow: visible; }
  .reactions .eyebrow, .lane { display: none; }
  .reacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .react { width: 52px; height: 44px; font-size: 18px; background: #fff; }
  .counters { grid-area: 1 / 3 / 3 / 4; align-self: center; grid-template-columns: 1fr; padding: 10px 12px; box-shadow: 0 0 0 1px var(--line); }
  .counters > div + div { display: none; }
  .callout { grid-area: 3 / 3 / 4 / 4; min-height: 0; padding: 0; background: none; justify-content: center; }
  .callout .words { display: none; }
  .callout .go { height: 44px; background: var(--ink); }
  body[data-state="drive"] .reactions, body[data-state="drive"] .counters, body[data-state="drive"] .callout { display: none; }
}