:root{--ink:#edf8ff;--muted:#8da7b8;--cyan:#5ce1e6;--amber:#ffc857;--red:#ff4d6d;--box:#030c16b8;--panel:#071320f0;--dim:#030912d9;--border:#8edfff59;--border-strong:#8edfff;--button:#0b2232;--button-hover:#113242}#screen-root{color:var(--ink);-webkit-font-smoothing:none;font-family:PixelMplus12,monospace;position:absolute;inset:0;container-type:size}#screen-root[hidden]{display:none}.screen{--u:calc(100cqw / 960);background:var(--dim);font-size:calc(12 * var(--u));line-height:1.5;position:absolute;inset:0}.btn{font:inherit;font-size:calc(24 * var(--u));color:var(--ink);background:var(--button);border:1px solid var(--border);padding:calc(8 * var(--u)) calc(16 * var(--u));cursor:pointer;text-align:left}.btn:hover:not(:disabled),.btn:focus-visible{background:var(--button-hover);border-color:var(--border-strong);outline:none}.btn:focus-visible:before{content:"▶ ";color:var(--amber)}.btn__note{margin-left:calc(8 * var(--u));font-size:calc(12 * var(--u));color:var(--muted)}.btn--primary{color:var(--cyan)}.btn--small{font-size:calc(12 * var(--u));padding:calc(4 * var(--u)) calc(12 * var(--u))}.btn:disabled{opacity:.4;cursor:default}.note{color:var(--muted);margin:0}.home__logo{left:calc(48 * var(--u));top:calc(48 * var(--u));width:calc(480 * var(--u));height:calc(160 * var(--u));align-items:center;display:flex;position:absolute}.home__title{font-size:calc(48 * var(--u));margin:0;font-weight:400}.home__logo-image{object-fit:contain;object-position:left center;width:100%;height:100%;image-rendering:pixelated}.home__menu{right:calc(48 * var(--u));top:calc(216 * var(--u));width:calc(240 * var(--u));gap:calc(12 * var(--u));flex-direction:column;display:flex;position:absolute}.home__account{right:calc(48 * var(--u));top:calc(420 * var(--u));width:calc(240 * var(--u));color:var(--muted);margin:0;position:absolute}.home__error{left:calc(48 * var(--u));top:calc(240 * var(--u));width:calc(540 * var(--u));max-height:calc(240 * var(--u));padding:calc(12 * var(--u));font:inherit;color:var(--red);background:var(--box);border:1px solid var(--red);white-space:pre-wrap;margin:0;position:absolute;overflow:auto}.home__choice{right:calc(312 * var(--u));top:calc(216 * var(--u));width:calc(336 * var(--u));padding:calc(16 * var(--u));background:var(--panel);border:1px solid var(--border-strong);gap:calc(12 * var(--u));flex-direction:column;display:flex;position:absolute}.home__choice[hidden]{display:none}.home__choice-title{font-size:calc(24 * var(--u));margin:0;font-weight:400}.home__choice-buttons{gap:calc(8 * var(--u));flex-direction:column;display:flex}.home__choice>.btn--small{align-self:flex-start}.panel{background:var(--panel);border:1px solid var(--border);padding:calc(24 * var(--u)) calc(32 * var(--u));box-sizing:border-box;position:absolute}.panel__title{margin:0 0 calc(12 * var(--u));font-size:calc(24 * var(--u));font-weight:400}.howto{left:calc(120 * var(--u));top:calc(40 * var(--u));width:calc(720 * var(--u));height:calc(460 * var(--u));gap:calc(12 * var(--u));flex-direction:column;display:flex}.howto .panel__title{margin:0}.howto__keys{border-collapse:collapse}.howto__keys th,.howto__keys td{padding:calc(2 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u)) 0;text-align:left;vertical-align:top;font-weight:400}.howto__keys th{color:var(--cyan);white-space:nowrap}.howto__rules{padding-left:calc(24 * var(--u));color:var(--muted);margin:0}.howto>.btn{align-self:flex-start;margin-top:auto}
