:root{--night:#0b1726;--night-2:#13243a;--night-3:#1c3350;--text:#e6eef7;--text-dim:#8aa0b8;--accent:#2dd4bf;--offline:#f59e0b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--text);margin:0;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif}body{flex-direction:column;display:flex;overflow:hidden}header{background:var(--night-2)}.tabs-row,.bar{align-items:center;gap:6px;padding:6px 12px;display:flex}.tabs-row{padding-bottom:0}.logo{flex:none;width:28px;height:28px;margin-right:4px}body.reconnecting .logo .ring{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}#tabs{scrollbar-width:none;gap:4px;min-width:0;display:flex;overflow-x:auto}.tab{width:180px;min-width:90px;height:32px;color:var(--text-dim);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:16px;align-items:center;gap:8px;padding:0 6px 0 12px;font-size:13px;display:flex}.tab:hover{background:var(--night-3)}.tab.active{border-color:var(--accent);background:var(--night);color:var(--text)}.tab .dot{background:var(--text-dim);border-radius:50%;flex:none;width:8px;height:8px}.tab.active .dot{background:var(--accent)}.tab .title{width:auto;min-width:0;height:100%;color:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap;border-radius:0;flex:1;padding:0;font-size:13px;overflow:hidden}.tab .title:hover{background:0 0}.tab .close{width:22px;height:22px;color:inherit;font-size:16px}.logo .ring{fill:none;stroke:var(--accent);stroke-width:3px}.logo .rivet{fill:var(--offline);transition:fill .3s}body.online .logo .rivet{fill:var(--accent)}header button{width:32px;height:32px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;font-size:20px;line-height:1}header button:hover{background:var(--night-3)}#nav{flex:1;min-width:0}#url{background:var(--night);width:100%;height:34px;color:var(--text);font:inherit;border:1px solid #0000;border-radius:17px;outline:none;padding:0 16px;font-size:14px}#url:focus{border-color:var(--accent)}#stats{min-width:230px;color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:right;flex:none;font-size:12px}#stage{clip-path:circle(150%);flex:1;min-height:0;transition:clip-path .9s cubic-bezier(.2,.8,.2,1);position:relative}#stage.closed{clip-path:circle(0%)}#screen{background:#fff;outline:none;width:100%;height:100%;transition:filter .4s;display:block}.ask{background:var(--night-3);color:var(--text);align-items:center;gap:10px;padding:10px 14px;font-size:14px;display:flex}.ask[hidden]{display:none}#ask-text{flex:1;min-width:0}.ask button{background:var(--accent);height:32px;color:var(--night);font:inherit;cursor:pointer;border:0;border-radius:16px;padding:0 14px;font-weight:600}.ask button.quiet{color:var(--text-dim);background:0 0}#auth{background:var(--night);place-items:center;padding:16px;display:grid;position:fixed;inset:0}#auth[hidden]{display:none}.porthole{aspect-ratio:1;background:var(--night-2);text-align:center;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:min(420px,100%);padding:56px;display:flex;position:relative}.porthole-ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.porthole-ring .ring{fill:none;stroke:var(--accent);stroke-width:1.5px}.porthole-ring .rivet{fill:var(--accent)}#auth.busy .porthole-ring{animation:2.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.porthole h1{margin:0;font-size:28px;font-weight:600}#auth-hint{color:var(--text-dim);margin:0;font-size:14px;line-height:1.5}#setup-form{flex-direction:column;gap:10px;width:100%;display:flex}#setup-code{border:1px solid var(--night-3);background:var(--night);height:40px;color:var(--text);font:inherit;letter-spacing:.12em;text-align:center;text-transform:uppercase;border-radius:20px;outline:none;font-size:16px}#setup-code:focus{border-color:var(--accent)}.porthole button:not(.link){background:var(--accent);height:40px;color:var(--night);font:inherit;cursor:pointer;border:0;border-radius:20px;padding:0 20px;font-size:15px;font-weight:600}.porthole button.link{color:var(--text-dim);font:inherit;cursor:pointer;background:0 0;border:0;font-size:13px;text-decoration:underline}#auth-error{min-height:1.4em;color:var(--offline);margin:0;font-size:13px}body:not(.online) #screen{filter:sepia(.35)brightness(.8)}
