1/* ─────────────────────────────────────────────────────────────2 portal webview — goq.sh visual language, dark ramp.3 The app frames a video stream, so it commits to the landing4 page's dark palette as a single theme.5 ───────────────────────────────────────────────────────────── */67:root {8 /* paper + ink (goq.sh dark ramp) */9 --paper: #201913;10 --paper-2: #271f17;11 --stage: #16110c;12 --ink: #ece0cd;13 --ink-muted: #a3927a;14 --hair: rgba(236, 224, 205, 0.12);15 --hair-strong: rgba(236, 224, 205, 0.24);16 --panel-shadow: rgba(0, 0, 0, 0.45);1718 /* earth-tone splashes */19 --terracotta: #cf7048;20 --ochre: #d99a47;21 --moss: #8a9155;22 --clay: #bd6c52;23 --sand: #cbb488;2425 /* semantic aliases (state colors ride the palette) */26 --background: var(--paper);27 --foreground: var(--ink);28 --muted: var(--paper-2);29 --muted-fg: var(--ink-muted);30 --accent: var(--terracotta);31 --border: var(--hair);32 --border-strong: var(--hair-strong);33 --destructive: var(--clay);34 --green: var(--moss);35 --yellow: var(--ochre);3637 --mono: "SFMono-Regular", "Cascadia Mono", "Liberation Mono", ui-monospace, monospace;38 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;39}40* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; }41input, textarea { -webkit-user-select: text; user-select: text; }42button { font: inherit; }43.info-value,44.overlay-status,45.host-info .value,46.config-row-value,47.node-id { -webkit-user-select: text; user-select: text; }48html, body { height: 100%; }49body {50 background: var(--background);51 color: var(--foreground);52 font-family: var(--sans);53 font-size: 13px;54 display: flex;55 flex-direction: column;56 overflow: hidden;57 -webkit-font-smoothing: antialiased;58}5960::selection { background: var(--ochre); color: var(--paper); }6162/* ─── Top bar ─────────────────────────────────────────────────────── */63.topbar {64 display: flex;65 align-items: center;66 gap: 12px;67 padding: 8px 16px;68 border-bottom: 1px solid var(--border);69 flex-shrink: 0;70}71.brand {72 font-family: var(--mono);73 font-size: 13px;74 font-weight: 600;75 letter-spacing: 0.02em;76 text-transform: lowercase;77 color: var(--terracotta);78}79.dev-badge {80 border: 1px solid color-mix(in srgb, var(--ochre) 65%, transparent);81 color: var(--yellow);82 font-family: var(--mono);83 font-size: 10px;84 font-weight: 600;85 letter-spacing: 0.04em;86 padding: 2px 5px;87 text-transform: uppercase;88}89.dev-badge.hidden { display: none; }90.dev-warning {91 margin: -10px 0 20px;92 border: 1px solid var(--yellow);93 color: var(--yellow);94 background: color-mix(in srgb, var(--ochre) 8%, transparent);95 padding: 10px;96 font-family: var(--mono);97 font-size: 11px;98 font-weight: 600;99 line-height: 1.5;100}101.dev-warning.hidden { display: none; }102.sep { color: var(--muted-fg); }103.status-line {104 font-family: var(--mono);105 font-size: 12px;106 color: var(--muted-fg);107 display: flex;108 align-items: center;109 gap: 7px;110}111/* pixel-square state dot, matching the site's pixel bullets */112.status-line .dot {113 width: 7px; height: 7px;114 background: var(--muted-fg);115}116.status-line .dot.ok { background: var(--green); }117.status-line .dot.err { background: var(--destructive); }118.status-line .dot.pending { background: var(--yellow); }119.status-line.ok { color: var(--green); }120.status-line.err { color: var(--destructive); }121.status-line.pending { color: var(--yellow); }122.topbar-right {123 margin-left: auto;124 display: flex;125 align-items: center;126 gap: 12px;127}128.node-id {129 font-family: var(--mono);130 font-size: 11px;131 color: var(--muted-fg);132 max-width: 180px;133 overflow: hidden;134 text-overflow: ellipsis;135 white-space: nowrap;136}137.controller-status {138 font-family: var(--mono);139 font-size: 10px;140 color: var(--muted-fg);141}142.viewer-status {143 max-width: 220px;144 overflow: hidden;145 color: var(--sand);146 font-family: var(--mono);147 font-size: 10px;148 text-overflow: ellipsis;149 white-space: nowrap;150}151.viewer-status.hidden { display: none; }152.controller-status.connected { color: var(--green); }153.controller-status.warning { color: var(--yellow); }154.link-btn {155 font-family: var(--mono);156 font-size: 12px;157 text-transform: lowercase;158 color: var(--muted-fg);159 cursor: pointer;160 text-decoration: underline;161 text-decoration-color: transparent;162 background: none;163 border: none;164 padding: 0;165 transition: color 0.1s, text-decoration-color 0.1s;166}167.link-btn:hover {168 color: var(--foreground);169 text-decoration-color: currentColor;170}171.link-btn:focus-visible,172.link-btn.controller-focus {173 color: var(--foreground);174 outline: 2px solid var(--moss);175 outline-offset: 4px;176}177178/* ─── Main area ───────────────────────────────────────────────────── */179.main {180 flex: 1;181 display: flex;182 align-items: center;183 justify-content: center;184 position: relative;185 min-height: 0;186 background: var(--stage);187}188#frame-canvas {189 max-width: 100%;190 max-height: 100%;191 object-fit: contain;192 display: none;193}194#frame-canvas.relative-control { cursor: none; }195body.native-pointer-control,196body.native-pointer-control * { cursor: none ; }197.remote-pointer {198 position: absolute;199 display: none;200 width: 24px;201 height: 32px;202 z-index: 3;203 pointer-events: none;204 overflow: visible;205 transform: translate(-2px, -2px);206 filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));207}208.remote-pointer.visible { display: block; }209.remote-pointer path {210 fill: #fff;211 stroke: #000;212 stroke-width: 1.5;213 stroke-linejoin: round;214}215.placeholder {216 text-align: center;217 color: var(--muted-fg);218 font-family: var(--mono);219 font-size: 13px;220 padding: 40px;221}222.placeholder::before {223 content: "";224 display: inline-block;225 width: 8px; height: 8px;226 margin-right: 9px;227 background: var(--ochre);228 vertical-align: baseline;229}230.placeholder.hidden { display: none; }231232/* Session controls */233.control-bar {234 display: none;235 align-items: center;236 min-width: 0;237 gap: 4px;238}239.control-bar.visible { display: flex; }240.control-toggle {241 font-family: var(--mono);242 font-size: 12px;243 color: var(--muted-fg);244 cursor: pointer;245 padding: 4px 10px;246 text-decoration: underline;247 text-decoration-color: transparent;248 transition: color 0.1s, text-decoration-color 0.1s;249 background: none;250 border: none;251 min-width: 0;252}253#control-toggle {254 max-width: min(62vw, 760px);255 overflow: hidden;256 text-overflow: ellipsis;257 white-space: nowrap;258}259.control-toggle:hover {260 color: var(--foreground);261 text-decoration-color: currentColor;262}263.control-toggle.active {264 color: var(--green);265 text-decoration-color: currentColor;266}267.control-toggle:focus-visible,268.control-toggle.controller-focus {269 outline: 2px solid var(--moss);270 outline-offset: 1px;271}272.control-toggle.disabled {273 color: var(--yellow);274 cursor: not-allowed;275 text-decoration: none;276}277.control-toggle.disabled:hover {278 color: var(--yellow);279 text-decoration: none;280}281#audio-toggle {282 display: inline-flex;283 align-items: center;284 justify-content: center;285 min-width: 80px;286 min-height: 36px;287 padding: 8px 12px;288 font-family: var(--mono);289 font-size: 12px;290 line-height: 1;291 white-space: nowrap;292 touch-action: manipulation;293}294295/* ─── Bottom bar ──────────────────────────────────────────────────── */296.bottombar {297 display: grid;298 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);299 align-items: center;300 gap: 8px;301 padding: 6px 16px;302 border-top: 1px solid var(--border);303 background: var(--background);304 flex-shrink: 0;305 font-family: var(--mono);306 font-size: 12px;307}308.bottombar-start,309.bottombar-end {310 display: flex;311 align-items: center;312 min-width: 0;313 gap: 8px;314}315.bottombar-start { justify-self: start; }316.bottombar-end { justify-self: end; }317.control-bar.visible + .bottombar-end .sep { display: none; }318.bottombar .prompt { color: var(--foreground); }319.bottombar .sep { color: var(--muted-fg); }320.bottombar .action {321 font-family: var(--mono);322 text-transform: lowercase;323 color: var(--muted-fg);324 cursor: pointer;325 text-decoration: underline;326 text-decoration-color: transparent;327 transition: color 0.1s, text-decoration-color 0.1s, background 0.1s;328 background: none;329 border: none;330}331.bottombar .action:hover {332 color: var(--foreground);333 text-decoration-color: currentColor;334}335.bottombar .action.primary {336 color: var(--foreground);337 border: 1px solid var(--border-strong);338 padding: 4px 12px;339 letter-spacing: 0.04em;340 text-decoration: none;341 box-shadow: 2px 2px 0 var(--hair);342}343.bottombar .action.primary:hover {344 background: var(--ink);345 color: var(--paper);346}347.bottombar .action.danger { color: var(--destructive); opacity: 0.8; }348.bottombar .action.danger:hover { opacity: 1; }349.bottombar .action:focus-visible,350.bottombar .action.controller-focus {351 color: var(--foreground);352 outline: 2px solid var(--moss);353 outline-offset: 3px;354}355.bottombar .hidden { display: none; }356.pin-group {357 display: flex;358 align-items: center;359 gap: 6px;360}361.pin-input {362 width: 80px;363 background: transparent;364 border: none;365 border-bottom: 1px solid var(--border-strong);366 color: var(--foreground);367 padding: 2px 4px;368 font-family: var(--mono);369 font-size: 12px;370 text-align: center;371}372.pin-input:focus {373 outline: none;374 border-bottom-color: var(--sand);375}376.pin-input.controller-focus { outline: 2px solid var(--moss); outline-offset: 3px; }377.pin-input.hidden { display: none; }378.pin-label {379 font-size: 11px;380 color: var(--muted-fg);381}382.pin-label.hidden { display: none; }383384@media (max-width: 720px) {385 .topbar { gap: 8px; padding-inline: 10px; }386 .topbar-right { gap: 8px; min-width: 0; }387 .node-id { display: none; }388 .viewer-status { max-width: 34vw; }389 .bottombar {390 grid-template-columns: auto minmax(0, 1fr) auto;391 padding-inline: 10px;392 }393 #control-toggle { max-width: 46vw; }394 .bottombar-end { gap: 5px; }395}396397@media (max-width: 480px) {398 .controller-status { display: none; }399 .viewer-status { max-width: 45vw; }400 .bottombar { padding-inline: 8px; }401 .pin-input { width: 60px; }402 #control-toggle { max-width: 40vw; }403}404405/* ─── Intro / overlay screens ─────────────────────────────────────── */406.overlay-screen {407 position: fixed;408 inset: 0;409 z-index: 100;410 display: flex;411 align-items: center;412 justify-content: center;413 background: var(--background);414}415.overlay-screen.hidden { display: none; }416.overlay-content {417 position: relative;418 text-align: center;419 width: 360px;420 max-width: calc(100vw - 48px);421 padding: 36px 32px 32px;422 border: 1px solid var(--border-strong);423 background: var(--muted);424 box-shadow: 12px 12px 0 var(--panel-shadow);425}426/* dithered strip along the panel's top edge */427.overlay-content::before {428 content: "";429 position: absolute;430 top: 0; left: 0; right: 0;431 height: 6px;432 background-image:433 repeating-linear-gradient(90deg,434 var(--terracotta) 0 6px, transparent 6px 18px),435 repeating-linear-gradient(90deg,436 var(--moss) 9px 12px, transparent 12px 30px),437 repeating-linear-gradient(90deg,438 var(--ochre) 21px 24px, transparent 24px 42px);439 opacity: 0.7;440 pointer-events: none;441}442.overlay-content h1 {443 font-family: var(--mono);444 font-size: 16px;445 font-weight: 700;446 text-transform: lowercase;447 letter-spacing: -0.01em;448 color: var(--foreground);449 margin-bottom: 12px;450}451#intro .overlay-content h1 {452 font-size: 26px;453 letter-spacing: -0.5px;454 margin-bottom: 8px;455 color: var(--terracotta);456}457.overlay-content p {458 font-size: 12px;459 color: var(--muted-fg);460 line-height: 1.6;461 margin-bottom: 24px;462 font-family: var(--mono);463 letter-spacing: 0.02em;464}465/* pixel security-key mark (tap overlay) */466.pixel-key {467 display: block;468 margin: 0 auto 16px;469 image-rendering: pixelated;470 image-rendering: crisp-edges;471}472/* three-step flow eyebrow: 01 pin · 02 tap · 03 play */473.flow-steps {474 display: flex;475 justify-content: center;476 gap: 16px;477 margin-bottom: 20px;478 font-family: var(--mono);479 font-size: 10px;480 font-weight: 500;481 letter-spacing: 0.12em;482 text-transform: uppercase;483 color: var(--muted-fg);484}485.flow-step { opacity: 0.55; }486.flow-step.active {487 opacity: 1;488 font-weight: 700;489 padding-bottom: 3px;490 border-bottom: 2px solid currentColor;491}492#intro .flow-step.active { color: var(--terracotta); }493#tap-overlay .flow-step.active { color: var(--ochre); }494.enrollment-content,495.invitation-content { width: 460px; }496.focus-overlay { z-index: 170; }497.focus-overlay-content { width: 420px; }498.focus-overlay-content::before {499 background-image: repeating-linear-gradient(500 90deg,501 var(--sand) 0 8px,502 transparent 8px 16px,503 var(--moss) 16px 20px,504 transparent 20px 32px505 );506}507.focus-peer {508 color: var(--sand);509 font-weight: 700;510 overflow-wrap: anywhere;511}512.enrollment-peer {513 margin: 20px 0 4px;514 padding: 12px;515 border: 1px solid var(--border-strong);516 background: var(--background);517 font-family: var(--mono);518 text-align: left;519}520.enrollment-peer.hidden { display: none; }521.enrollment-peer span {522 display: block;523 margin-bottom: 7px;524 color: var(--muted-fg);525 font-size: 10px;526 text-transform: uppercase;527 letter-spacing: 0.08em;528}529.enrollment-peer output {530 display: block;531 overflow-wrap: anywhere;532 color: var(--sand);533 font-size: 11px;534 user-select: text;535 -webkit-user-select: text;536}537.invitation-summary {538 margin: 18px 0;539 border-block: 1px solid var(--border);540 font-family: var(--mono);541 font-size: 12px;542 text-align: left;543}544.invitation-summary > div {545 display: grid;546 grid-template-columns: 86px minmax(0, 1fr);547 gap: 12px;548 padding: 9px 4px;549 border-bottom: 1px solid var(--border);550}551.invitation-summary > div:last-child { border-bottom: 0; }552.invitation-summary dt { color: var(--muted-fg); }553.invitation-summary dd { color: var(--foreground); overflow-wrap: anywhere; }554.overlay-actions {555 display: flex;556 gap: 16px;557 justify-content: center;558 align-items: center;559 margin-top: 14px;560}561.overlay-btn.danger {562 color: var(--destructive);563 border-color: color-mix(in srgb, var(--destructive) 55%, var(--border));564}565.overlay-btn.danger:hover {566 color: var(--paper);567 background: var(--destructive);568 text-decoration: none;569}570.shortcut-key {571 color: var(--foreground);572}573.overlay-form {574 display: flex;575 gap: 8px;576 justify-content: center;577 align-items: center;578}579.overlay-input {580 width: 120px;581 text-align: center;582 background: transparent;583 border: none;584 border-bottom: 1px solid var(--border-strong);585 color: var(--foreground);586 padding: 6px 8px;587 font-family: var(--mono);588 font-size: 14px;589}590.overlay-input:focus {591 outline: none;592 border-bottom-color: var(--sand);593}594.overlay-input.controller-focus {595 outline: 2px solid var(--moss);596 outline-offset: 4px;597}598.overlay-btn {599 font-family: var(--mono);600 font-size: 13px;601 text-transform: lowercase;602 color: var(--muted-fg);603 cursor: pointer;604 background: none;605 border: none;606 padding: 6px 12px;607 text-decoration: underline;608 text-decoration-color: transparent;609 transition: color 0.1s, text-decoration-color 0.1s, background 0.1s;610}611.overlay-btn:hover {612 color: var(--foreground);613 text-decoration-color: currentColor;614}615.overlay-btn.primary {616 color: var(--foreground);617 border: 1px solid var(--border-strong);618 padding: 7px 20px;619 letter-spacing: 0.06em;620 text-decoration: none;621 box-shadow: 3px 3px 0 var(--hair);622}623.overlay-btn.primary:hover {624 background: var(--ink);625 color: var(--paper);626}627.overlay-btn:focus-visible,628.overlay-btn.controller-focus {629 color: var(--foreground);630 outline: 2px solid var(--moss);631 outline-offset: 2px;632 text-decoration-color: currentColor;633}634.overlay-btn.primary:focus-visible,635.overlay-btn.primary.controller-focus {636 text-decoration: none;637}638.overlay-btn:disabled {639 opacity: 0.4;640 cursor: not-allowed;641}642.overlay-status {643 font-family: var(--mono);644 font-size: 12px;645 color: var(--muted-fg);646 margin-top: 16px;647 min-height: 16px;648}649.overlay-status.pending { color: var(--yellow); }650.overlay-status.err { color: var(--destructive); }651.overlay-status.ok { color: var(--green); }652.controller-hint {653 margin: 18px 0 0 ;654 font-size: 10px ;655 color: var(--muted-fg) ;656}657.controller-pin-btn { white-space: nowrap; }658659/* ─── Controller PIN pad ─────────────────────────────────────────── */660#pin-pad-overlay { z-index: 160; }661.pin-pad-content { width: 380px; }662.pin-pad-display {663 min-height: 36px;664 margin: 8px 0 4px;665 color: var(--foreground);666 font-family: var(--mono);667 font-size: 24px;668 letter-spacing: 0.3em;669}670.pin-pad-grid {671 display: grid;672 grid-template-columns: repeat(3, 72px);673 justify-content: center;674 gap: 10px;675 margin-top: 20px;676}677.pin-pad-key {678 height: 56px;679 border: 1px solid var(--border-strong);680 color: var(--foreground);681 background: var(--background);682 font-family: var(--mono);683 font-size: 18px;684 cursor: pointer;685 box-shadow: 3px 3px 0 var(--hair);686 transition: background 0.1s, color 0.1s;687}688.pin-pad-key:hover { border-color: var(--sand); }689.pin-pad-key:active {690 transform: translate(2px, 2px);691 box-shadow: 1px 1px 0 var(--hair);692}693.pin-pad-key:focus-visible,694.pin-pad-key.controller-focus {695 outline: 3px solid var(--moss);696 outline-offset: 2px;697 border-color: var(--moss);698}699.pin-pad-key.pin-pad-action { font-size: 12px; color: var(--muted-fg); text-transform: lowercase; }700.pin-pad-clear { display: block; margin: 12px auto 0; }701.panel-action { margin-top: 10px; }702703/* ─── Side panel ──────────────────────────────────────────────────── */704.panel-overlay {705 position: fixed;706 inset: 0;707 background: rgba(0, 0, 0, 0.5);708 z-index: 90;709 display: none;710}711.panel-overlay.visible { display: block; }712.panel {713 position: fixed;714 top: 0; right: 0; bottom: 0;715 width: 300px;716 background: var(--background);717 border-left: 1px solid var(--border-strong);718 transform: translateX(100%);719 transition: transform 0.15s;720 z-index: 91;721 display: flex;722 flex-direction: column;723}724.panel.visible { transform: translateX(0); }725.panel-header {726 display: flex;727 align-items: center;728 justify-content: space-between;729 padding: 10px 16px;730 border-bottom: 1px solid var(--border);731}732.panel-header h2 {733 font-family: var(--mono);734 font-size: 13px;735 font-weight: 600;736 text-transform: lowercase;737}738.panel-body {739 flex: 1;740 overflow-y: auto;741 padding: 12px 16px;742}743.panel-section {744 margin-bottom: 24px;745}746.panel-section h3 {747 font-family: var(--mono);748 font-size: 11px;749 font-weight: 700;750 text-transform: lowercase;751 color: var(--foreground);752 margin-bottom: 8px;753}754.panel-section h3 .hash { color: var(--ochre); font-weight: 500; }755.roster-section {756 margin: 0 -6px 18px;757 padding: 10px 6px 12px;758 border-bottom: 1px solid var(--border-strong);759}760.roster-section.hidden { display: none; }761.roster-summary {762 margin-bottom: 7px;763 color: var(--sand);764 font-family: var(--mono);765 font-size: 10px;766 line-height: 1.4;767}768.roster-list { list-style: none; }769.roster-viewer {770 display: grid;771 grid-template-columns: minmax(0, 1fr) auto;772 gap: 2px 8px;773 padding: 7px 6px;774 border-top: 1px solid var(--border);775}776.roster-viewer.focus-holder {777 border-left: 3px solid var(--moss);778 background: color-mix(in srgb, var(--moss) 8%, transparent);779}780.roster-handle {781 overflow: hidden;782 font-family: var(--mono);783 font-size: 11px;784 text-overflow: ellipsis;785 white-space: nowrap;786}787.roster-you {788 align-self: center;789 padding: 1px 4px;790 border: 1px solid var(--ochre);791 color: var(--ochre);792 font-family: var(--mono);793 font-size: 9px;794 text-transform: uppercase;795}796.roster-role,797.roster-adaptive {798 color: var(--muted-fg);799 font-size: 10px;800}801.roster-adaptive { text-align: right; }802.info-row {803 display: flex;804 justify-content: space-between;805 align-items: center;806 padding: 4px 0;807 border-bottom: 1px solid var(--border);808}809.info-row:last-child { border-bottom: none; }810.info-row.metric-stack {811 align-items: stretch;812 flex-direction: column;813 gap: 3px;814}815.info-row.metric-stack .info-value {816 overflow-wrap: anywhere;817 text-align: left;818}819.info-label {820 font-size: 12px;821 color: var(--muted-fg);822}823.info-value {824 font-family: var(--mono);825 font-size: 11px;826 font-variant-numeric: tabular-nums;827 color: var(--foreground);828}829.config-select {830 font-family: var(--mono);831 font-size: 11px;832 color: var(--foreground);833 background: var(--background);834 border: 1px solid var(--border);835 padding: 2px 4px;836 cursor: pointer;837}838.config-input {839 font-family: var(--mono);840 font-size: 11px;841 color: var(--foreground);842 background: var(--background);843 border: 1px solid var(--border);844 padding: 2px 4px;845 width: 80px;846}847.config-input:focus {848 outline: none;849 border-color: var(--sand);850}851852@media (prefers-reduced-motion: reduce) {853 .panel { transition: none; }854 .pin-pad-key:active { transform: none; }855}