:root{--bg: #0a0e0a;--bg-raised: #0f140f;--bg-sunken: #060906;--line: #1c241c;--line-bright: #2c382c;--phosphor: #5dff9b;--phosphor-dim: #3a8f5e;--phosphor-glow: rgba(93, 255, 155, .35);--ink: #c7d6c7;--ink-dim: #6c7d6c;--ink-faint: #44513f;--amber: #ffb454;--red: #ff6b6b;--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;--radius: 2px;--shadow: 0 0 0 1px var(--line), 0 18px 50px -20px rgba(0, 0, 0, .9)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:.01em}.op-root{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden}.op-root:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9000;background:repeating-linear-gradient(to bottom,#0000 0,#0000 2px,#0000002e 3px);mix-blend-mode:multiply}.op-root:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:8999;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--phosphor) 5%,transparent),#0000 45%),radial-gradient(140% 120% at 50% 60%,#0000 55%,#0000008c)}.op-grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:8998;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.op-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bg-sunken);font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.18em}.op-topbar__brand{color:var(--phosphor);text-shadow:0 0 12px var(--phosphor-glow)}.op-topbar__dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;background:var(--phosphor);box-shadow:0 0 8px var(--phosphor-glow);animation:op-pulse 2.4s ease-in-out infinite}.op-stage{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}.op-panel{width:100%;max-width:30rem;background:linear-gradient(180deg,var(--bg-raised),var(--bg));border:1px solid var(--line-bright);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.25rem 2rem 2rem}.op-panel--wide{max-width:56rem}.op-panel__eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--phosphor-dim);margin:0 0 .4rem}.op-panel__title{font-size:1.4rem;font-weight:700;margin:0 0 1.6rem;color:var(--ink)}.op-prompt{color:var(--phosphor);margin-right:.4rem}.op-btn{font-family:var(--mono);font-size:.9rem;letter-spacing:.04em;color:var(--ink);background:var(--bg-raised);border:1px solid var(--line-bright);border-radius:var(--radius);padding:.7rem 1.1rem;cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease,box-shadow .12s ease;display:inline-flex;align-items:center;gap:.55rem}.op-btn:hover{color:var(--phosphor);border-color:var(--phosphor-dim);box-shadow:0 0 0 1px var(--phosphor-dim),0 0 18px -6px var(--phosphor-glow)}.op-btn:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}.op-btn--primary{background:var(--phosphor);color:#04130a;border-color:var(--phosphor);font-weight:700;text-shadow:none}.op-btn--primary:hover{color:#04130a;background:color-mix(in srgb,var(--phosphor) 82%,white);box-shadow:0 0 24px -4px var(--phosphor-glow)}.op-btn--ghost{background:transparent}.op-btn--danger:hover{color:var(--red);border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 18px -6px #ff6b6b66}.op-btn--block{width:100%;justify-content:flex-start}.op-btn__key{color:var(--ink-faint);font-size:.75rem;margin-left:auto}.op-field{display:flex;align-items:center;gap:.5rem;background:var(--bg-sunken);border:1px solid var(--line-bright);border-radius:var(--radius);padding:.7rem .9rem}.op-field:focus-within{border-color:var(--phosphor-dim);box-shadow:0 0 0 1px var(--phosphor-dim)}.op-field input{flex:1;background:transparent;border:none;outline:none;color:var(--phosphor);font-family:var(--mono);font-size:1.3rem;letter-spacing:.5em;text-shadow:0 0 10px var(--phosphor-glow)}.op-field input::placeholder{color:var(--ink-faint);letter-spacing:.5em}.op-cursor{display:inline-block;width:.6em;height:1.05em;margin-left:.1em;transform:translateY(.16em);background:var(--phosphor);box-shadow:0 0 10px var(--phosphor-glow);animation:op-blink 1.05s steps(1) infinite}.op-status{display:flex;align-items:center;gap:.6rem;font-size:.85rem;letter-spacing:.04em}.op-status__led{width:9px;height:9px;border-radius:50%;flex:none}.op-status--waiting .op-status__led{background:var(--amber);box-shadow:0 0 10px #ffb45499;animation:op-pulse 1.4s ease-in-out infinite}.op-status--waiting{color:var(--amber)}.op-status--connected .op-status__led{background:var(--phosphor);box-shadow:0 0 10px var(--phosphor-glow)}.op-status--connected{color:var(--phosphor)}.op-status--lost .op-status__led{background:var(--red);box-shadow:0 0 10px #ff6b6b99}.op-status--lost{color:var(--red)}.op-code{display:flex;gap:.5rem;justify-content:center;margin:.5rem 0 1.4rem}.op-code__digit{width:3.2rem;height:4.2rem;display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:700;color:var(--phosphor);background:var(--bg-sunken);border:1px solid var(--line-bright);border-radius:var(--radius);text-shadow:0 0 14px var(--phosphor-glow)}.op-stack{display:flex;flex-direction:column;gap:.75rem}.op-meta{margin-top:1.6rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.75rem;color:var(--ink-faint);display:flex;justify-content:space-between}.op-stream{display:flex;flex-direction:column;gap:.9rem}.op-screen{position:relative;aspect-ratio:16 / 9;border:1px solid var(--line-bright);border-radius:var(--radius);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--phosphor) 2%,transparent) 0 12px,transparent 12px 24px),var(--bg-sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}.op-screen__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:var(--bg-sunken)}.op-screen__placeholder{color:var(--ink-faint);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}.op-screen__badge{position:absolute;top:.7rem;left:.7rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--phosphor);background:#060906cc;border:1px solid var(--phosphor-dim);padding:.2rem .5rem;border-radius:var(--radius)}.op-controls{display:flex;gap:.5rem;flex-wrap:wrap}.op-iconbtn{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);background:var(--bg-raised);border:1px solid var(--line-bright);border-radius:var(--radius);padding:.55rem .85rem;cursor:pointer;transition:color .12s ease,border-color .12s ease}.op-iconbtn:hover,.op-iconbtn--active{color:var(--phosphor);border-color:var(--phosphor-dim)}.op-iconbtn--danger:hover{color:var(--red);border-color:var(--red)}.op-iconbtn--push{margin-left:auto}.op-error{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;margin:.2rem 0 1.4rem;border:1px solid var(--red);border-radius:var(--radius);background:#ff6b6b0f;color:var(--red);font-size:.85rem}.op-error__mark{font-weight:700}.op-notice{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;margin:.2rem 0 1.4rem;border:1px solid var(--amber);border-radius:var(--radius);background:#ffb4540f;color:var(--amber);font-size:.85rem}.op-notice__mark{font-weight:700}.op-hint{font-size:.8rem;color:var(--ink-dim);margin:1.2rem 0 0}.op-diag{font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--ink-dim);white-space:pre-wrap;word-break:break-all;-webkit-user-select:all;user-select:all;margin:1rem 0;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff05}.op-accent{position:fixed;z-index:9400;top:3.2rem;right:1rem}.op-accent__swatch{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;padding:0;transition:border-color .12s ease,box-shadow .12s ease}.op-accent__swatch:hover{box-shadow:0 0 0 1px var(--phosphor-dim),0 0 18px -6px var(--phosphor-glow)}.op-accent__swatch:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}.op-accent__chip{width:1.1rem;height:1.1rem;border-radius:var(--radius);box-shadow:0 0 8px var(--phosphor-glow)}.op-accent__popover{position:absolute;top:calc(100% + .5rem);right:0;width:14rem;padding:.9rem;background:var(--bg-sunken);border:1px solid var(--phosphor-dim);border-radius:var(--radius);box-shadow:0 0 30px -10px var(--phosphor-glow),0 20px 60px -20px #000000e6;display:flex;flex-direction:column;gap:.7rem}.op-accent__title{margin:0;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--phosphor)}.op-accent__popover .react-colorful{width:100%;height:10rem}.op-accent__popover .react-colorful__saturation,.op-accent__popover .react-colorful__hue{border-radius:var(--radius)}.op-accent__popover .react-colorful__saturation{border-bottom:.5rem solid transparent}.op-accent__popover .react-colorful__pointer{width:14px;height:14px;border:2px solid var(--ink)}.op-accent__hexrow{display:flex;align-items:center;gap:.4rem;background:var(--bg);border:1px solid var(--line-bright);border-radius:var(--radius);padding:.4rem .6rem}.op-accent__hexrow:focus-within{border-color:var(--phosphor-dim)}.op-accent__hash{color:var(--ink-faint)}.op-accent__hex{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--phosphor);font-family:var(--mono);font-size:.9rem;letter-spacing:.12em;text-transform:lowercase}.op-accent__warning{margin:0;font-size:.7rem;color:var(--amber)}.op-accent__reset{width:100%}@keyframes op-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}@keyframes op-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes op-spin{to{transform:rotate(360deg)}}.op-spinner{width:1.1rem;height:1.1rem;border:2px solid var(--line-bright);border-top-color:var(--phosphor);border-radius:50%;animation:op-spin .8s linear infinite}.op-connecting{display:flex;align-items:center;gap:.7rem;color:var(--ink-dim)}@media (prefers-reduced-motion: reduce){.op-cursor,.op-status__led,.op-topbar__dot,.op-spinner{animation:none}}