:root{--nav-bg:#f3f4f6;--nav-border:#e5e7eb;--nav-link:#2563eb;--body-bg:transparent;--body-fg:inherit}body.theme-dark{--nav-bg:#111827;--nav-border:#1f2937;--nav-link:#93c5fd;--body-bg:#0b1220;--body-fg:#cbd5e1}html,body{height:100%;margin:0;font-family:system-ui,sans-serif}body{background:var(--body-bg);color:var(--body-fg);flex-direction:column;display:flex}.nav{background:var(--nav-bg);border-bottom:1px solid var(--nav-border);align-items:center;gap:12px;padding:10px 16px;font-size:14px;display:flex}.nav a{color:var(--nav-link);text-decoration:none}.nav a:hover{text-decoration:underline}.nav .status{color:#94a3b8;margin-left:auto;font-size:12px}.demo{flex-direction:column;flex:1;min-height:0;padding:12px;display:flex}virtual-keyboard{flex:none}