:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff7e9;background:#160707;--accent:#c5ff31}
*{box-sizing:border-box}
body{margin:0;min-height:100svh}
main{width:min(100%,440px);margin:auto;padding:24px 24px max(24px,env(safe-area-inset-bottom))}
input{font:inherit}
nav{display:flex;justify-content:center}
.entry-language-switch{display:grid;grid-template-columns:minmax(0,1fr) var(--p-switch-width) minmax(0,1fr);align-items:center;gap:10px;width:min(100%,240px);min-height:44px;color:#c7c1b8;font-size:13px;letter-spacing:.04em;cursor:pointer}
.entry-language-switch>span:first-child{text-align:right}
.entry-language-switch>span:last-child{text-align:left}
.entry-language-switch input{position:absolute;width:1px;height:1px;opacity:0}
.p-mark{display:flex;justify-content:center;margin:38px 0 32px;color:var(--accent);--participant-live-accent:var(--accent)}
.p-mark .participant-live-p-mark{margin:0;--p-mark-size:100px}
#codeLabel{display:block;text-align:center;font-size:23px;margin-bottom:18px}
.entry-code{position:relative;width:100%;max-width:352px;margin-inline:auto}
.entry-code-slots{display:grid;grid-template-columns:repeat(var(--code-length,4),minmax(0,1fr));gap:10px;pointer-events:none}
.entry-code-slots>span{display:flex;align-items:center;justify-content:center;height:80px;border:2px solid #796b60;border-radius:10px;background:#271919;color:#fff7e9;font-size:clamp(30px,8vw,40px);font-variant-numeric:tabular-nums}
.entry-code:focus-within .entry-code-slots>[data-active="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.entry-code:focus-within .entry-code-slots>[data-selected="true"]{background:#435023;border-color:var(--accent)}
#sessionCode{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px;outline:0;background:transparent;color:transparent;caret-color:transparent;-webkit-text-fill-color:transparent;font-size:32px;padding:0;cursor:text}
#sessionCode::selection{background:transparent;color:transparent}
#entryStatus{font-size:17px;line-height:1.5;text-align:center;min-height:3em;margin:18px 0 0}
@media(max-height:580px){.p-mark{margin:12px 0 22px}main{padding-top:12px}}
@media(forced-colors:active){.entry-code-slots>span{border-color:CanvasText}.entry-code:focus-within .entry-code-slots>[data-active="true"]{border-color:Highlight}}