*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#fff;font-family:"Pretendard",system-ui,sans-serif}
body.mode-render{overflow:hidden}
body.mode-render canvas{display:block}
.mode-play .stage{position:fixed;inset:0 0 56px;display:grid;place-items:center}
.mode-play canvas{width:auto;height:auto;max-width:100vw;max-height:calc(100vh - 56px);display:block;background:#000}
.ui{position:fixed;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#0b0b0e;border-top:1px solid #222}
.ui .pp{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#000;font-size:15px;cursor:pointer}
.ui .tm{font-variant-numeric:tabular-nums;font-size:14px;color:#bbb;min-width:92px}
.ui .sk{flex:1;accent-color:#9b5cff}
.ui .dl{color:#d9c5ff;font-size:13px;text-decoration:none;border:1px solid #4b2a86;border-radius:999px;padding:6px 12px}
.big{position:fixed;left:50%;top:calc(50% - 28px);transform:translate(-50%,-50%);border:0;background:rgba(0,0,0,.55);color:#fff;
  border-radius:20px;padding:22px 30px;display:flex;align-items:center;gap:14px;cursor:pointer;backdrop-filter:blur(6px)}
.big span{width:56px;height:56px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:20px}
.big em{font-style:normal;font-size:16px}
.big.busy span{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.ui .tm{display:none}}