@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap";
.huddle-demo-root{--bg:#06060e;--surface:#ffffff0a;--border:#ffffff14;--acc:#e8ff47;--fg:#fff;--muted:#ffffff61;--radius:16px;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:DM Sans,sans-serif;position:relative}.huddle-demo-root:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(70% 50% at 20% 10%,#e8ff470f,#0000 60%),radial-gradient(60% 60% at 80% 80%,#4d96ff0d,#0000 60%);position:fixed;inset:0}.huddle-demo-root:after{content:"";pointer-events:none;z-index:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");position:fixed;inset:0}.huddle-demo-root .page{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative}.huddle-demo-root .card{border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#06060ed9;border-radius:24px;grid-template-columns:1fr 1fr;gap:0;width:100%;max-width:860px;display:grid;overflow:hidden}.huddle-demo-root .left{border-right:1px solid var(--border);flex-direction:column;gap:28px;padding:48px 44px;display:flex}.huddle-demo-root .eyebrow{letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;font-family:Syne Mono,monospace;font-size:10px}.huddle-demo-root h1{letter-spacing:-1.5px;font-family:Syne,sans-serif;font-size:clamp(26px,4.5vw,38px);font-weight:800;line-height:1.1}.huddle-demo-root h1 span{color:var(--acc)}.huddle-demo-root .sub{color:var(--muted);margin-top:8px;font-size:14px;line-height:1.6}.huddle-demo-root .session-facts{flex-wrap:wrap;gap:8px;display:flex}.huddle-demo-root .fact-chip{color:#ffffff8c;background:#ffffff0a;border:1px solid #ffffff17;border-radius:20px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;display:flex}.huddle-demo-root .fact-chip strong{color:#fff;font-weight:700}.huddle-demo-root .fact-chip .fc-icon{font-size:13px}.huddle-demo-root .section-label{letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:10px;font-weight:700}.huddle-demo-root .mode-grid{grid-template-columns:1fr 1fr 1fr;gap:7px;display:grid}.huddle-demo-root .mode-btn{border:1.5px solid var(--border);background:var(--surface);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;color:inherit;border-radius:9px;align-items:center;gap:8px;padding:9px 11px;font-family:DM Sans,sans-serif;transition:all .15s;display:flex}.huddle-demo-root .mode-btn:hover{background:#e8ff470d;border-color:#e8ff4759}.huddle-demo-root .mode-btn.active{border-color:var(--acc);background:#e8ff4717;box-shadow:0 0 0 3px #e8ff4712}.huddle-demo-root .mode-icon{text-align:center;flex-shrink:0;width:18px;font-size:15px}.huddle-demo-root .mode-name{color:var(--fg);font-size:11px;font-weight:600;line-height:1.2}.huddle-demo-root .cta-btn{background:var(--acc);color:#06060e;cursor:pointer;letter-spacing:-.3px;border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;padding:15px;font-family:Syne,sans-serif;font-size:15px;font-weight:800;transition:transform .1s,filter .1s;display:flex}.huddle-demo-root .cta-btn:hover{filter:brightness(1.08)}.huddle-demo-root .cta-btn:active{transform:scale(.98)}.huddle-demo-root .cta-btn:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none}.huddle-demo-root .spinner{border:2px solid #0003;border-top-color:#06060e;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite huddleDemoSpin}@keyframes huddleDemoSpin{to{transform:rotate(360deg)}}.huddle-demo-root .right{flex-direction:column;gap:22px;padding:48px 44px;display:flex}.huddle-demo-root .right-idle{text-align:center;opacity:.35;flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100%;display:flex}.huddle-demo-root .right-idle .big-icon{font-size:60px;line-height:1;animation:3s ease-in-out infinite huddleDemoFloat}@keyframes huddleDemoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.huddle-demo-root .right-idle p{color:var(--muted);max-width:180px;font-size:13px;line-height:1.6}.huddle-demo-root .result{flex-direction:column;gap:20px;height:100%;display:none}.huddle-demo-root .result.visible{display:flex}.huddle-demo-root .result-header{justify-content:space-between;align-items:center;display:flex}.huddle-demo-root .result-title{letter-spacing:-.5px;font-family:Syne,sans-serif;font-size:17px;font-weight:800}.huddle-demo-root .reset-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;padding:0;font-family:DM Sans,sans-serif;font-size:11px;transition:color .15s;display:flex}.huddle-demo-root .reset-btn:hover{color:var(--fg)}.huddle-demo-root .countdown-block{flex-direction:column;gap:6px;display:flex}.huddle-demo-root .countdown-head{justify-content:space-between;align-items:center;display:flex}.huddle-demo-root .countdown-label{letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:700}.huddle-demo-root .countdown-val{color:var(--acc);background:#e8ff471a;border:1px solid #e8ff4733;border-radius:20px;padding:4px 12px;font-family:Syne Mono,monospace;font-size:13px;font-weight:700}.huddle-demo-root .countdown-val.urgent{color:#ff6b6b;background:#ff6b6b1a;border-color:#ff6b6b33}.huddle-demo-root .progress-bar{background:#ffffff12;border-radius:2px;height:3px;overflow:hidden}.huddle-demo-root .progress-fill{background:var(--acc);border-radius:2px;height:100%;transition:width .5s linear}.huddle-demo-root .progress-fill.urgent{background:#ff6b6b}.huddle-demo-root .qr-wrap{justify-content:center;display:flex}.huddle-demo-root .qr-box{background:#fffffff5;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:148px;height:148px;padding:12px;display:flex}.huddle-demo-root .qr-box img,.huddle-demo-root .qr-box canvas{width:124px;height:124px;display:block}.huddle-demo-root .code-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}.huddle-demo-root .code-label{letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-size:9px;font-weight:700}.huddle-demo-root .code-big{color:var(--acc);letter-spacing:7px;font-family:Syne Mono,monospace;font-size:26px;font-weight:700;line-height:1}.huddle-demo-root .code-url{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:11px;overflow:hidden}.huddle-demo-root .action-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.huddle-demo-root .action-btn{border:1.5px solid var(--border);background:var(--surface);cursor:pointer;color:var(--fg);border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:11px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:600;transition:all .15s;display:flex}.huddle-demo-root .action-btn:hover{background:#ffffff0f;border-color:#ffffff2e}.huddle-demo-root .action-btn.done{color:#4eff9a;border-color:#4eff9a66}.huddle-demo-root .host-btn{cursor:pointer;color:#7bb3ff;background:#4d96ff0f;border:1.5px solid #4d96ff4d;border-radius:10px;justify-content:center;align-items:center;gap:7px;margin-top:auto;padding:12px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.huddle-demo-root .host-btn:hover{background:#4d96ff1a;border-color:#4d96ff80}@media (max-width:680px){.huddle-demo-root .card{grid-template-columns:1fr;max-width:420px}.huddle-demo-root .left{border-right:none;border-bottom:1px solid var(--border);padding:32px 24px}.huddle-demo-root .right{padding:32px 24px}.huddle-demo-root .mode-grid{grid-template-columns:1fr 1fr}}