html body[data-dm-project="circles"] {margin:0;overflow:hidden}
html body[data-dm-project="circles"] main{margin:0!important;padding:0!important;max-width:none!important}
html body[data-dm-project="circles"] .dm-nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:flex-end;min-height:0;padding:16px!important;border:0!important;background:transparent!important;pointer-events:none}
html body[data-dm-project="circles"] .dm-nav>.dm-brand{display:none}
html body[data-dm-project="circles"] .dm-menu{pointer-events:auto}
.screen{position:fixed;inset:0;overflow:auto;display:grid;align-items:safe center;justify-items:center;padding:80px 24px 32px;min-height:100dvh}
.panel{width:min(100%,400px);display:grid;gap:16px;margin:auto}
.panel h1{margin:0 0 16px;font-size:32px!important}.panel label{display:block}.panel input,.panel button{width:100%;min-height:48px;font:inherit;border:1px solid currentColor;border-radius:0;padding:12px;background:var(--paper,#fff);color:var(--ink,#000)}
#servers{display:grid;gap:8px}#servers button{display:flex;justify-content:space-between;gap:16px}
html body[data-dm-project="circles"] .screen-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none!important;max-height:none!important;margin:0;border:0;padding:80px 24px 32px;overflow:auto}
html body[data-dm-project="circles"] #camera-panel .modal-close{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:48px;min-width:48px;height:48px;min-height:48px;margin:0;padding:0;font-size:28px;line-height:1;border:1px solid currentColor;z-index:1}
.screen-dialog[open]{display:grid;align-items:safe center;justify-items:center}
#viewport{position:fixed;inset:0;width:100%;height:100dvh;background:#161616;overflow:hidden}
canvas{width:100%;height:100%;display:block;touch-action:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.label{position:absolute;font-size:12px;white-space:nowrap;transform:translate(-50%,-50%);text-align:center;text-shadow:0 1px 2px black}
html body[data-dm-project="circles"] #labels,html body[data-dm-project="circles"] #labels .label{background:transparent!important;color:white!important}
html body[data-dm-project="circles"] #labels .label[data-self="true"]{color:black!important;text-shadow:none}
html body[data-dm-project="circles"] #joystick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:100px;height:100px;border:1px solid #fff;background:#ffffff18!important;touch-action:none}
html body[data-dm-project="circles"] #joystick span{position:absolute;width:30px;height:30px;left:34px;top:34px;background:white!important;pointer-events:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#notice{position:fixed;z-index:101;bottom:24px;left:24px;right:24px;padding:16px;border:1px solid currentColor;background:var(--paper);color:var(--ink)}
@media(hover:hover) and (pointer:fine){#joystick{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}