/* 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}
html body .app .stage{position:relative}
/* 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 left, above the "Data & voice privacy" link (Viv, 10 Nov 2026), 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}
/* code panel, smaller (Viv, 10 Nov 2026: "still too big"): about a sixth narrower and shorter; same text, glass, colours and place */
.demo-code{padding:10px 12px 10px}
.demo-code.flow{max-width:260px}
.demo-code .dc-h{margin:0 0 2px;font-size:11px}
.demo-code input{height:26px;font-size:11.5px}
.demo-code form button{height:26px;font-size:11px}
.demo-code-ok{line-height:26px;font-size:11px}
.demo-code-msg{font-size:10.5px}
.demo-code .dc-note{margin:6px 0 6px;font-size:10.5px;line-height:1.4}
.demo-code .dc-reqbox p{font-size:10.5px;line-height:1.4}
.demo-code .dc-book{padding:5px 10px;font-size:11px}
/* controls panel lifts so the code panel sits directly under it (Viv, 10 Nov 2026: "you can put the code block under this block"); landing page, wide screens only */
@media (min-width:761px){html body .app[data-mode="home"] .voices.glass{bottom:var(--iv-lift,86px)!important}}
/* code bar with window symbols, and the code pop-up (Viv, 10 Nov 2026: "collapse it", "when clicked it can come as a pop up", "close button and a maximize button as in symbols") */
#demo-code{padding:7px 8px 7px 12px}
#demo-code[hidden]{display:none}
.demo-code .dc-bar{display:flex;align-items:center;justify-content:space-between;gap:6px}
.demo-code .dc-label{flex:1;min-width:0;margin:0;padding:0;font-size:11px;font-weight:400;line-height:1.3;color:rgba(255,255,255,.95);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-code .dc-sym{display:flex;flex:none;gap:2px}
.demo-code .dc-sym button{display:grid;place-items:center;width:24px;height:24px;color:rgba(255,255,255,.92)}
.demo-code .dc-sym button:hover{background:rgba(255,255,255,.18);text-decoration:none}
.demo-code .dc-sym .dc-x:hover,.demo-code .dc-sym .dc-hide:hover{background:rgba(196,43,28,.85);color:#fff}
dialog.demo-code-pop{width:min(280px,calc(100vw - 32px));margin:auto;inset:0;padding:10px 12px 14px;border:1px solid rgba(255,255,255,.38)}
dialog.demo-code-pop::backdrop{background:rgba(30,42,60,.28)}
dialog.demo-code-pop .dc-bar{margin:0 -4px 8px 0}
dialog.demo-code-pop .dc-label{font-size:12px}
/* the bar's full label fits ("decrease font size if required"); the code field shows focus with its own brightening underline, not a dark box */
#demo-code{padding:6px 4px 6px 10px}
#demo-code .dc-label{font-size:10px;letter-spacing:0}
#demo-code .dc-sym button{width:20px;height:22px}
#demo-code .dc-sym svg{width:12px;height:12px}
dialog.demo-code-pop input:focus-visible{outline:none}
dialog.demo-code-pop .demo-code-form:focus-within{border-bottom:2px solid #fff;margin-bottom:-1px}