/* The demo fills its window, so the page works on its own and inside an iframe. */
html, body { height: 100%; }
body { overflow: hidden; }
.demo { height: 100%; padding: 16px 28px 28px 16px; }
.demo .win { height: 100%; display: flex; flex-direction: column; box-shadow: 10px 10px 0 var(--ink); }
.demo .win .bar { flex: none; }
.demo .win .bar b { margin-right: 0; }
.demo .win .bar a { font-size: 13px; font-weight: 700; color: var(--soft); text-decoration: none; }
.demo .win .bar a:hover { color: var(--red); }
.screen-area { position: relative; flex: 1; min-height: 0; padding: 8px 0 0 10px; }
#term { position: absolute; inset: 8px 0 0 10px; }
#term .xterm-viewport { background: #272822 !important; }

.gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #272822; }
.gate[hidden] { display: none; }
.gate .card { max-width: 520px; padding: 26px 28px; text-align: center; box-shadow: 8px 8px 0 #000; }
.gate h1 { font-size: clamp(30px, 6vw, 44px); margin-bottom: 14px; }
.gate p { font-size: 15px; }
.gate .keys { margin-top: 14px; line-height: 2; }
.gate kbd { font-size: 12px; }
.gate button { margin-top: 18px; font: inherit; font-weight: 700; cursor: pointer; }
.gate button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.gate button[disabled] { cursor: progress; opacity: .7; }
.gate .note { margin-top: 14px; font-size: 13px; color: var(--dim); }

@media (max-width: 600px) { .demo { padding: 8px 14px 14px 8px; } .gate .card { padding: 18px 16px; } }