* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--brand-color-background); color: var(--brand-color-ink); }
body { font-family: var(--brand-font-body), sans-serif; }
main { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.gate-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#gate-scene { z-index: 1; }
html[data-gate-renderer="webgl"] #gate-still { visibility: hidden; }
.gate-message { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2rem max(1.25rem, env(safe-area-inset-right)) max(2.1rem, env(safe-area-inset-bottom)); text-align: center; pointer-events: none; }
.gate-panel { width: min(100%, 36rem); padding: 1.1rem 1.5rem; background: var(--brand-color-background); border-radius: .15rem; }
.gate-line { font-family: var(--brand-font-display), serif; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 .8rem; }
.clock-label { margin: 0 0 .55rem; font-size: .8rem; line-height: 1.5; }
.gate-countdown { font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 2.2vw, 1.6rem); white-space: nowrap; }
.issuer { margin: 0; font-size: clamp(.95rem, 1.4vw, 1.08rem); line-height: 1.65; text-wrap: balance; }
.invitation { margin: .6rem 0 0; font-family: var(--brand-font-display), serif; font-size: 1.55rem; line-height: 1.25; }
button { pointer-events: auto; font: inherit; cursor: pointer; border: 1px solid var(--brand-color-silver); background: var(--brand-color-background); color: var(--brand-color-ink); border-radius: 2px; min-height: 44px; }
#gate-open { margin-top: 1.15rem; padding: .65rem 2.75rem; font-size: 1.05rem; }
#gate-open:disabled { cursor: wait; }
button:focus-visible { outline: 2px solid var(--brand-color-silver); outline-offset: 5px; }
.demo-mark { position: absolute; top: max(1.2rem, env(safe-area-inset-top)); left: 1.25rem; z-index: 3; margin: 0; padding: .55rem .7rem; background: var(--brand-color-background); font-size: .8rem; }
#gate-sound { position: absolute; top: max(1.2rem, env(safe-area-inset-top)); right: 1.25rem; z-index: 3; padding: .5rem .85rem; font-size: .8rem; }
[hidden] { display: none !important; }
html[data-gate-state="opening"] .invitation, html[data-gate-state="open"] .invitation { display: none; }
@media (max-width: 600px) { .gate-message { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } .gate-panel { padding: .95rem .85rem; } .issuer { max-width: 18rem; margin: auto; } }
@media (max-height: 500px) { .gate-message { padding-bottom: 1rem; } .gate-panel { padding: .5rem 1rem; } .gate-line { font-size: 1.5rem; } .clock-label { margin-bottom: .2rem; } }