@font-face{font-family:"Board Korean";src:url("./assets/board-korean.otf") format("opentype");font-weight:700;font-style:normal;font-display:block}
/* The physical LED asset is the same canvas in the city and in this modal. */
dialog.board-modal{width:min(1180px,calc(100vw - 9vw));max-width:none;max-height:92dvh;border:0;border-radius:0;padding:0;background:transparent;color:#fff;box-shadow:none;overflow:visible}
dialog.board-modal::backdrop{background:rgba(13,19,19,.77);backdrop-filter:blur(13px) saturate(.72)}
.board-modal-top{display:flex;justify-content:space-between;align-items:center;margin:0 18px 20px;gap:18px}
.board-modal-kicker{font-size:8px;letter-spacing:2.6px;color:#97a59d;font-weight:500}
.board-modal-top h2{font-size:17px;font-weight:500;letter-spacing:-.4px;margin-top:7px;color:#e4e9e3}
.board-modal-close{display:grid;place-items:center;width:39px;height:39px;color:#c4cfc6;border:1px solid #ffffff29;border-radius:50%;background:#ffffff08;transition:.2s}
.board-modal-close:hover{background:#ffffff1d;color:#fff;border-color:#ffffff6b}
.board-modal-close svg{width:17px;height:17px}
.board-asset-stage{position:relative;width:100%;filter:drop-shadow(0 28px 26px #0009)}
#board-canvas{display:block;width:100%;height:auto;aspect-ratio:1200 / 460;border-radius:10px}
.board-modal-bottom{margin:20px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8e9c92;font-size:9px}
.board-modal-bottom>span:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.board-modal-bottom i{width:5px;height:5px;background:#89a777;border-radius:50%;box-shadow:0 0 9px #89a77788}
.board-modal-bottom strong{font-size:10px;font-weight:500;color:#c3cdc3}
.board-modal-bottom>span:first-child>span{color:#68786c;border-left:1px solid #ffffff20;padding-left:9px}
.board-demo-status{font-size:8px;color:#738571;font-variant-numeric:tabular-nums;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.board-scene-button{position:absolute;top:72px;right:23px;z-index:3;padding:9px 11px;display:flex;align-items:center;gap:7px;font-size:8px;color:#586952;background:#ffffffd4;border:1px solid #ffffffba;border-radius:6px;box-shadow:0 3px 15px #394a2809;backdrop-filter:blur(10px);transition:.2s}
.board-scene-button>svg:first-child{width:12px;height:12px}
.board-scene-button>svg:last-child{width:10px;height:10px;color:#9ba18e}
.board-scene-button:hover{background:#fff;border-color:#d4ddca;transform:translateY(-1px)}
.night .board-scene-button{background:#2b4033ce;color:#b6cba8;border-color:#7084623b}
@media(min-width:2100px){dialog.board-modal{width:min(1540px,82vw)}.board-modal-top h2{font-size:22px}.board-modal-kicker{font-size:10px}.board-modal-top{margin-bottom:28px}.board-modal-bottom{margin-top:26px;font-size:12px}.board-modal-bottom strong{font-size:12px}.board-demo-status{font-size:10px}}
@media(max-width:790px){dialog.board-modal{width:94vw}.board-modal-top{margin:0 9px 16px}.board-modal-top h2{font-size:15px}.board-modal-kicker{font-size:6px}.board-modal-close{width:33px;height:33px}.board-modal-bottom{margin:15px 9px 0;gap:10px;font-size:7px}.board-modal-bottom strong{font-size:8px}.board-demo-status{font-size:6px}.board-scene-button{right:22px;top:70px}}
@media(max-width:520px){dialog.board-modal{width:96vw}.board-modal-top{margin:0 8px 14px}.board-modal-top h2{font-size:13px}.board-modal-close{width:29px;height:29px}.board-modal-close svg{width:14px;height:14px}.board-modal-bottom{align-items:flex-start;gap:12px;margin-top:13px;font-size:6px}.board-modal-bottom>span:first-child{gap:5px}.board-modal-bottom strong{font-size:7px}.board-modal-bottom>span:first-child>span{padding-left:5px}.board-demo-status{font-size:5px;line-height:1.7}.board-scene-button{right:16px;top:62px;padding:7px 9px;font-size:6px;gap:5px}.board-scene-button>svg:first-child{width:10px;height:10px}.board-scene-button>svg:last-child{width:8px;height:8px}.scene-floating-label{bottom:78px}}
@media(max-height:520px) and (orientation:landscape){dialog.board-modal{width:min(950px,calc(88dvh * 1200 / 460));max-height:96dvh}.board-modal-top{margin-bottom:8px}.board-modal-top h2{font-size:12px;margin-top:2px}.board-modal-kicker{font-size:5px}.board-modal-close{width:26px;height:26px}.board-modal-bottom{margin-top:8px;font-size:6px}.board-modal-bottom strong{font-size:7px}.board-demo-status{font-size:6px}}
