/* live demo only: the passcode dialog, in the dashboard's glass style (sharp corners, Poppins, white on blue-grey frost) */
dialog.demo-pass{border:1px solid rgba(255,255,255,.45);border-radius:0;padding:26px 28px;width:min(380px,calc(100vw - 32px));color:#fff;font-family:inherit;
  background:rgba(120,134,152,.78);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:0 24px 60px -20px rgba(15,23,42,.5)}
dialog.demo-pass::backdrop{background:rgba(30,42,60,.28)}
dialog.demo-pass h2{margin:0 0 8px;font-size:17px;font-weight:500}
dialog.demo-pass p{margin:0 0 14px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.88)}
dialog.demo-pass label{display:block;font-size:12px;margin:0 0 6px;color:rgba(255,255,255,.85)}
dialog.demo-pass input{width:100%;box-sizing:border-box;height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.55);border-radius:0;background:rgba(255,255,255,.92);color:#23323B;font:inherit;font-size:14px}
dialog.demo-pass input:focus-visible{outline:2px solid #fff;outline-offset:2px}
dialog.demo-pass .demo-pass-err{margin:10px 0 0;color:#fff;font-size:12.5px}
dialog.demo-pass .demo-pass-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
dialog.demo-pass button{height:38px;padding:0 18px;border-radius:0;font:inherit;font-size:13px;cursor:pointer;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.1);color:#fff}
dialog.demo-pass button.demo-pass-ok{background:rgba(255,255,255,.92);color:#23323B;border-color:transparent}
dialog.demo-pass button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* "Meet Dani" welcome button (live demo only): glass, sharp corners, centred in the gap between the globe and the microphone (top set by demo-voice.js) */
html body .app .stage{position:relative}
html body .app .stage .demo-meet{position:absolute;left:50%;transform:translateX(-50%);z-index:3;height:34px;padding:0 20px;border:1px solid rgba(255,255,255,.75);border-radius:0;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#23323B;font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 10px 26px -14px rgba(15,23,42,.45)}
html body .app .stage .demo-meet:hover{background:rgba(255,255,255,.8)}
html body .app .stage .demo-meet:focus-visible{outline:2px solid #23323B;outline-offset:3px}
html body .app .stage .demo-meet[hidden]{display:none}
html body .app[data-mode="board"] .stage .demo-meet{display:none}
/* the part of the page Dani is talking about during the tour: a soft white edge, no movement */
html body .app .demo-spot{outline:2px solid rgba(255,255,255,.95)!important;outline-offset:4px;box-shadow:0 0 0 8px rgba(255,255,255,.18)!important;transition:outline-color .3s,box-shadow .3s}
@media (prefers-reduced-motion:reduce){html body .app .demo-spot{transition:none}}
/* code panel (live demo only): bottom right, directly above the controls panel, same frosted blue-grey glass, sharp corners; on phones at the end of the column */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo-code{position:fixed;z-index:20;box-sizing:border-box;padding:14px 16px 12px;color:#fff;font-family:Poppins,system-ui,sans-serif;
  background:rgba(120,134,152,.66);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);border:1px solid rgba(255,255,255,.38);border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.10)}
.demo-code.flow{position:static;margin:16px auto 4px;width:100%;max-width:320px}
.app[data-mode="board"] ~ .demo-code,body:has(.app[data-mode="board"]) .demo-code{display:none}
.demo-code .dc-h{margin:0 0 6px;font-size:12px;color:rgba(255,255,255,.9)}
.demo-code-form{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.55)}
.demo-code-form:focus-within{border-bottom-color:#fff}
.demo-code-form[hidden]{display:none}
.demo-code input{flex:1;min-width:0;height:32px;border:0;border-radius:0;background:transparent;color:#fff;font:inherit;font-size:13px;letter-spacing:.04em;padding:0}
.demo-code input::placeholder{color:rgba(255,255,255,.7);letter-spacing:.01em}
.demo-code input:focus{outline:none}
.demo-code input:focus-visible{outline:2px solid #fff;outline-offset:3px}
.demo-code button{border:0;border-radius:0;background:none;color:#fff;font:inherit;cursor:pointer;padding:0}
.demo-code form button{height:32px;font-size:12.5px}
.demo-code button:hover,.demo-code .dc-book:hover{text-decoration:underline;text-underline-offset:3px}
.demo-code button:focus-visible,.demo-code a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.demo-code-ok{margin:0;line-height:32px;font-size:12.5px;color:#fff}
.demo-code-ok[hidden]{display:none}
.demo-code-msg{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.92);min-height:0}
.demo-code-msg:empty{display:none}
.demo-code .dc-note{margin:10px 0 8px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.9)}
.demo-code .dc-reqbox{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.3)}
.demo-code .dc-reqbox[hidden]{display:none}
.demo-code .dc-reqbox p{margin:0 0 8px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.92)}
.demo-code .dc-book{display:block;text-align:center;padding:8px 12px;background:rgba(255,255,255,.92);color:#23323B;font-size:12.5px;text-decoration:none}
dialog.demo-pass p a{color:#fff;text-underline-offset:3px}