:root{font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif;color-scheme:dark;background:#111822;color:#e8eef8}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer;background:#29374b;color:#f1f6fd;border:1px solid #435873;border-radius:9px;padding:10px 14px}button:hover:not(:disabled){filter:brightness(1.17)}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#316db3;border-color:#4584ce;font-weight:700}.secondary{background:#263449}.accent{background:#356850;border-color:#56a77c}.large{font-size:17px;padding:17px 32px;min-width:280px}.wide{width:100%}.header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1120px)/2));border-bottom:1px solid #304054;background:#172130}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px}.brand img{width:38px;height:38px;object-fit:contain}.brand small{font-size:11px;font-weight:400;color:#94a9c1}.profileBtn{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:5px 10px;font-size:12px}.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#556882;border:2px solid #98a9ba;color:#fff;overflow:hidden;flex-shrink:0;font-size:17px}.avatar img{display:block;width:100%;height:100%;object-fit:cover}.avatar.big{width:53px;height:53px;font-size:27px}.avatarList{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:34px}.avatarList .avatar{width:31px;height:31px;border:1px solid #8396ae}.intro{text-align:center;padding:65px 10px 55px}.intro h1{font-size:27px;margin:0 0 13px}.intro p{font-size:13px;color:#aebed2;margin:0 0 25px}.tiny{font-size:12px;color:#a1b2c8;line-height:1.65}.intro .tiny{margin-top:13px}main{max-width:1120px;margin:0 auto;padding:20px 18px 50px}#review,#playing{background:#1b2838;border:1px solid #394e64;padding:19px;border-radius:13px;margin:12px 0 18px}.rowTitle,.playingHead,.participantTitle{display:flex;justify-content:space-between;align-items:center;gap:12px}.rowTitle h2{font-size:18px;margin:0 0 14px}.chip{font-size:11px;border:1px solid #476b85;border-radius:99px;padding:6px 10px;color:#b4cce2}.previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.preview{min-width:0}.previewTitle{margin-bottom:9px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:8px}.previewTitle small{font-size:11px;font-weight:400;color:#b5c7dd}.preview canvas{width:100%;display:block;background:#000;border:1px solid #334860;border-radius:8px;aspect-ratio:16 / 9}.hint{margin:13px 0;color:#d3dff0;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.rowTitle+.previewGrid+.hint+.actions{justify-content:flex-end}.participants{margin-top:22px;border-top:1px solid #29384a;padding:18px 3px}.participantTitle{margin-bottom:12px;font-size:13px}.participantTitle span{color:#afc3d8}.message{padding:12px 14px;background:#1a2737;border:1px solid #2e465f;border-radius:9px;color:#bfdaef;font-size:12px;line-height:1.6;word-break:keep-all}.playingHead{margin-bottom:13px}.playingHead strong,.playingHead small{display:block}.playingHead small{color:#a4b8cd;margin-top:5px}#stageHost{max-width:1050px;margin:auto}#stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:9px;overflow:hidden;touch-action:none}#capturedVideo{position:absolute;top:0;left:0;pointer-events:none;object-fit:fill;width:100%;height:100%}#drawingCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;pointer-events:none}#drawingCanvas.active{pointer-events:auto;cursor:crosshair}#cursors{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.remoteCursor{position:absolute;pointer-events:none;transform:translate(7px,-80%);transition:opacity .2s}.remoteCursor .avatar{width:26px;height:26px;border:2px solid #fff;box-shadow:0 1px 7px #0009}#toolbar{position:absolute;top:8px;right:8px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:95%;z-index:6;background:#142234ea;padding:6px;border-radius:10px}#toolbar button{padding:7px 9px;font-size:12px;white-space:nowrap}#toolbar .chosen{border-color:#f5c947}#toolbar .on{background:#245a45}#toolbar input[type=color]{width:32px;height:31px;border:0;padding:0;background:none}#toolbar input[type=range]{width:70px}dialog{background:#1d2a3a;border:1px solid #57708a;color:#ecf2fb;border-radius:14px;width:min(390px,calc(100vw - 28px));padding:20px;box-shadow:0 20px 70px #0009}dialog::backdrop{background:#0009}.dialogHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.dialogHeader strong{font-size:16px}.iconBtn{border:0;padding:5px;background:transparent}.identity{display:flex;align-items:center;gap:12px;margin-bottom:18px}.settingLabel{display:block;font-size:12px;margin:14px 0 8px;color:#cbd9ed}dialog input[type=file],dialog input[type=text],dialog input:not([type]){max-width:100%;width:100%;padding:9px 10px;background:#111b29;color:#e7f2ff;border:1px solid #485c75;border-radius:8px}.avatarChoices{display:flex;flex-wrap:wrap;gap:8px}.avatarChoices button{display:grid;place-items:center;width:42px;height:42px;padding:0;font-size:22px;border-radius:50%}.avatarChoices button.selected{outline:2px solid #ffcf45}#roomDialog p{font-size:13px;color:#c7d6e6;line-height:1.6}footer{text-align:center;font-size:11px;color:#8196af;padding:14px 20px 32px}@media(max-width:720px){.previewGrid{grid-template-columns:1fr}.intro{padding:45px 0}.intro h1{font-size:22px}.playingHead{align-items:flex-start;flex-direction:column}#review,#playing{padding:12px}.header{padding:0 12px}.brand small{display:none}#toolbar{left:5px;right:5px;top:5px}#toolbar button{font-size:11px;padding:5px 7px}}