:root{color-scheme:dark;font-family:'Segoe UI','Malgun Gothic',sans-serif;background:#080808;color:#f5f5f5}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit;background:#202020;border:1px solid #555;min-height:42px;padding:8px 14px;border-radius:6px;cursor:pointer}button:hover,a:hover{color:#fff}button:hover{background:#303030}:focus-visible{outline:3px solid #91b7ff;outline-offset:3px}header{display:flex;align-items:center;gap:20px;padding:22px 5vw;border-bottom:1px solid #333}.brand{font-size:25px;font-weight:800;letter-spacing:-1px}.demo-label{color:#b3b3b3;font-size:13px}.back{margin-left:auto;font-size:14px}main{max-width:1440px;margin:auto;padding:0 5vw 25px}nav{display:flex;gap:10px;border-bottom:1px solid #333;overflow-x:auto;margin-bottom:24px}nav a{padding:20px 15px;white-space:nowrap;border-bottom:2px solid transparent;font-size:16px;font-weight:650;color:#aaa}nav a[aria-current=page]{color:white;border-color:white}.toolbar{display:flex;gap:25px;justify-content:space-between;align-items:center;margin-bottom:20px}h1{font-size:24px;margin:0 0 8px;letter-spacing:-.7px}.toolbar p{font-size:14px;color:#aaa;margin:0;line-height:1.5}.toolbar label{display:grid;gap:7px;font-size:12px;color:#aaa;min-width:270px}select{width:100%;max-width:100%}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:620px;background:#111;border:1px solid #333;border-radius:10px;overflow:hidden}iframe{display:block;border:0;width:760px;max-width:100%;height:620px;background:#111}.stage.bar-stage{gap:30px;min-height:420px;background:radial-gradient(ellipse at 50% 0%,#252b38,#101010 75%)}.bar-stage iframe{width:640px;height:170px;max-width:100%;border:1px solid #3c3c3c;border-radius:10px}.context-app{font-size:17px;font-weight:700;color:#d4d4d4}#callContext{text-align:center;max-width:90%}#callContext h2{font-size:30px;margin:14px 0}#callContext p{font-size:14px;color:#aaa;line-height:1.6}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.demo-footer p{color:#999;font-size:12px;line-height:1.6;max-width:490px}.demo-footer>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.demo-footer button{font-size:12px}.demo-footer span{font-size:12px;color:#aaa;margin:0 4px}#status{min-height:22px;font-size:13px;color:#c4d6ff}.presenting header,.presenting .toolbar,.presenting .demo-footer>p{display:none}.presenting main{padding:0 12px;max-width:none}.presenting nav{margin:0;justify-content:center}.presenting .stage{height:calc(100dvh - 135px);min-height:0;border:0}.presenting iframe{height:100%;width:980px}.presenting .bar-stage iframe{height:170px;width:640px}.presenting .demo-footer{justify-content:center;margin:8px 0}.presenting #status{margin:0;text-align:center}.skip{position:absolute;top:-100px;background:white;color:black;padding:12px}.skip:focus{top:10px;z-index:3}[hidden]{display:none!important}@media(max-width:700px){header{padding:16px 18px;gap:10px}.brand{font-size:21px}.demo-label{font-size:11px}.back{font-size:12px}main{padding-inline:16px}nav{gap:0}nav a{font-size:13px;padding:16px 12px}.toolbar{display:block}.toolbar label{margin-top:16px}h1{font-size:21px}.toolbar p{font-size:12px}.stage{min-height:620px;border-radius:6px}.demo-footer{display:block}.demo-footer p{font-size:11px}.bar-stage{min-height:350px!important}.bar-stage iframe{height:190px}.context-app{font-size:15px}#callContext h2{font-size:25px}.presenting .bar-stage iframe{height:190px}.presenting main{padding:0 8px}}

/* Match the app window while keeping the public shell usable on phones. */
.mobile-stage iframe{width:390px;height:700px}.mobile-stage{padding-block:20px}.toolbar label{min-width:0;max-width:100%}.demo-footer button{min-height:44px}.bar-stage iframe{flex:none}.stage iframe{max-width:100%}@media(max-width:700px){.toolbar label{width:100%}.stage.mobile-stage{min-height:0}.mobile-stage iframe{height:650px}.presenting nav{justify-content:flex-start}.demo-footer>div{gap:8px}}