#wrap{position:relative;margin:0 12px;height:400px;border-radius:12px;overflow:hidden;background:#cfe8f7}#c{width:100%;height:100%;display:block;touch-action:none}
#sunlbl{position:absolute;left:8px;bottom:8px;background:#0009;color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}.cmp{position:absolute;right:8px;top:8px;background:#fff;padding:4px 8px;border-radius:6px;font-weight:700;font-size:12px}
.ctl{display:flex;gap:10px;flex-wrap:wrap;margin:10px 12px}.ctl label{font-size:13px;display:flex;gap:6px;align-items:center}.ctl input{width:170px}
.legend{margin:0 12px;font-size:12px;display:flex;flex-wrap:wrap;gap:6px}.legend span{padding:2px 6px;border-radius:4px}
.faces{padding-left:18px;margin:6px 0}.pr{width:100%;font-size:13px}.pr td:last-child{text-align:right}

.ut td:first-child{color:#555;white-space:nowrap;padding-right:8px;vertical-align:top}.ut td:last-child{text-align:left}.ut select{font-size:14px}.ut button{font-size:12px;padding:2px 6px}
.gw{overflow-x:auto;max-height:420px;overflow-y:auto;margin:6px 0}.ug{border-collapse:collapse;font-size:11px}.ug th{position:sticky;top:0;background:#fff;padding:1px 3px;font-weight:600}.ug tr th:first-child{position:sticky;left:0;background:#fff}.ug td{width:26px;min-width:26px;height:14px;border:1px solid #fff;cursor:pointer}.ug td.void{background:#f1f5f9;cursor:default}.ug td.on{box-shadow:inset 0 0 0 3px #d6337a}.uf{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}.uf input{width:150px;padding:4px}#umsg{color:#b91c1c}
.pw{position:relative;margin:6px 0}.pw img{width:100%;display:block;border-radius:8px}.po{position:absolute;inset:0}.pd{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;padding:0;border:1.5px solid #1e3a8a;background:#3b82f6;border-radius:50%;cursor:pointer;opacity:.85}.pd.pk{border:2.5px solid #16a34a;background:#86efac;width:11px;height:11px}