html, body { display: flex; width: 100%; height: 100%; margin: 0;  padding: 0; background: #222; justify-content: center; align-items: center; overflow: hidden; }
body>div, .scene, .sheet { width: var(--w); height: var(--h); }

.seg { position: absolute; }
.seg.index { width: 100%; height: 100%; }
.seg.gride { pointer-events: none; }

.sheet.uis .seg.btns { left: calc(100% + 8px); top: 50%; }
.sheet.uis.vertical .seg.btns { left: 50%; top: calc(100% + 8px); }
.sheet.uis.vertical .seg.btns>div { display: flex; }

.sheet.uis .seg.btns button { display: flex; width: 64px; height: 64px; justify-content: left; align-items: center; }
/* .sheet.uis.vertical .seg.btns button { margin: 8px; } */
.sheet.uis .seg.btns button span { left: 100%; margin: 8px; font-size: 0; }
.sheet.uis.vertical .seg.btns button span { left: auto; top: 100%; margin: 8px; }
.sheet.uis .seg.btns button:hover span { font-size: 24px; }


/* .sheet>div, .sheet>svg { position: absolute; } */

.sheet.fgs .fg.title { display: flex; left: auto; top: 24px; }
.sheet.fgs .fg.title div { margin: 0 4px; font: 128px "PlayTangram", sans-serif; }

/* .sheet.uis { width: 100%; height: 100%; } */
/* .sheet.uis .seg.btns { right: 24px; bottom: 24px; } */





