.jp{--jp-bg: #0B0B0C;--jp-surface: #16161A;--jp-line: #2A2A30;--jp-ink: #F0EFEC;--jp-ink-2: #9C9A94;--jp-accent: #FF5722;--jp-warn: #FFC107;--jp-bad: #FF4444;--jp-ok: #4CAF50;background:var(--jp-bg);color:var(--jp-ink);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%;box-sizing:border-box}.jp *,.jp *:before,.jp *:after{box-sizing:inherit}.jp--live{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto minmax(30vh,1fr) minmax(0,auto);grid-template-areas:"head" "stage" "side";gap:8px;padding:8px 12px 12px;overflow:hidden}.jp--message{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px}.jp h1{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}.jp h2{font-size:16px;font-weight:800;margin:0 0 6px}.jp p{margin:0 0 8px;color:var(--jp-ink-2);font-size:14px;line-height:1.45}.jp-head{grid-area:head;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--jp-ink-2)}.jp-head__badge{background:var(--jp-accent);color:#0b0b0c;font-weight:800;padding:2px 8px;border-radius:999px}.jp-head__role{font-weight:700;color:var(--jp-ink)}.jp-head__peer{margin-left:auto;display:inline-flex;align-items:center;gap:5px}.jp-head__peer:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jp-ink-2)}.jp-head__peer.is-open:before{background:var(--jp-ok)}.jp-head__peer.is-reconnecting:before{background:var(--jp-warn);animation:jp-pulse 1.1s infinite}.jp-head__peer.is-closed:before{background:var(--jp-bad)}@keyframes jp-pulse{0%,to{opacity:1}50%{opacity:.25}}.jp-stage{grid-area:stage;min-height:0;display:flex}.jp-preview{position:relative;flex:1;min-height:0;background:#000;border:1px solid var(--jp-line);border-radius:12px;overflow:hidden}.jp-preview video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.jp-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.jp-frame rect{fill:none;stroke:#ff5722d9;stroke-width:1;stroke-dasharray:4 3}.jp-gate{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:#0b0b0ceb}.jp-gate p{max-width:34ch}.jp-rotate-hint{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:#ffc107eb;color:#1a1400;font-size:13px;font-weight:700}.jp-rotate-hint em{font-style:normal;font-weight:600;opacity:.75}.jp-rotate-hint__icon{font-size:18px;animation:jp-turn 2s ease-in-out infinite}@keyframes jp-turn{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.jp-rec{position:absolute;top:8px;left:8px;background:var(--jp-bad);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:999px}.jp-rec--armed{background:var(--jp-warn);color:#1a1400}.jp-ticks{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:15vh;font-weight:800;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.85);pointer-events:none}.jp-side{grid-area:side;display:flex;flex-direction:column;gap:8px;min-height:0;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.jp-card{background:var(--jp-surface);border:1px solid var(--jp-line);border-radius:12px;padding:10px 12px}.jp-diagram{width:100%;height:auto;max-height:120px;display:block;margin:4px 0}.jp-note{font-size:13px;color:var(--jp-ink-2);margin:0}.jp-list{margin:0;padding-left:18px;color:var(--jp-ink-2);font-size:13px;line-height:1.5}.jp-alert{border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.4;border:1px solid transparent}.jp-alert--warn{background:#ffc1071f;border-color:#ffc10759;color:#ffe08a}.jp-alert--bad{background:#ff44441f;border-color:#ff444459;color:#ffb3b3}.jp-safety{flex:none}.jp-status{font-size:13px;margin:0;padding:6px 2px}.jp-status.is-ok{color:var(--jp-ok)}.jp-status.is-wait{color:var(--jp-ink-2)}.jp-capture{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;padding:8px 10px;border-radius:10px;background:var(--jp-surface);border:1px solid var(--jp-line)}.jp-capture--done{color:var(--jp-ok)}.jp-capture--error{color:#ffb3b3}.jp-dot{width:8px;height:8px;border-radius:50%;background:var(--jp-warn)}.jp-dot--rec{background:var(--jp-bad);animation:jp-pulse 1s infinite}.jp-bar{flex:1;min-width:80px;height:5px;background:#000;border-radius:3px;overflow:hidden}.jp-bar i{display:block;height:100%;background:var(--jp-accent);transition:width .2s}.jp-btn{font:inherit;font-weight:700;border-radius:10px;padding:10px 14px;border:1px solid transparent;cursor:pointer;min-height:44px}.jp-btn--primary{background:var(--jp-accent);color:#0b0b0c}.jp-btn--ghost{background:transparent;color:var(--jp-ink);border-color:var(--jp-line);min-height:36px;padding:6px 10px}.jp-btn:disabled{opacity:.5}@media (orientation: landscape){.jp-side{max-height:none}.jp--live{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(200px,30%);grid-template-areas:"head head" "stage side";gap:8px 10px;padding:6px 10px 10px}.jp h1{font-size:15px;margin-bottom:4px}.jp h2{font-size:14px}.jp p,.jp-note,.jp-list,.jp-alert,.jp-capture,.jp-status{font-size:12px}.jp-diagram{max-height:78px}.jp-card{padding:8px 10px}.jp-head{font-size:10px}.jp-btn{min-height:38px;padding:8px 12px}}@media (orientation: landscape) and (max-height: 400px){.jp h1{font-size:13px}.jp-diagram{display:none}.jp p,.jp-note,.jp-list,.jp-alert{font-size:11px}}@media (prefers-reduced-motion: reduce){.jp-rotate-hint__icon,.jp-dot--rec,.jp-head__peer:before{animation:none}}