.twin3d{border:1px solid #d7e4f4;border-radius:22px;overflow:hidden;background:#f7faff;margin:18px 0 25px;box-shadow:0 12px 32px #244b7b0b}.twin3dBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;background:linear-gradient(110deg,#152f59,#23619c);color:#fff}.twin3dBrand{display:flex;flex-direction:column;gap:6px}.twin3dBrand strong{font-size:14px;letter-spacing:1.4px}.twin3dBrand span{font-size:11px;color:#c9dff8}.twin3dButtons{display:flex;gap:5px}.twin3dButtons button{background:#ffffff17;color:white;border:1px solid #ffffff35;min-width:36px;padding:6px 10px;border-radius:9px;font-size:18px}.twin3dButtons button:hover{background:#ffffff35}.twin3dViewport{height:570px;position:relative;background:#eef4fc;outline-offset:-3px}.twin3dViewport:focus-visible{outline:3px solid #4286e9}.twin3dViewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.twin3dViewport canvas:active{cursor:grabbing}.twin3dFooter{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;background:#e7effa}.twin3dFooter button{padding:7px 12px;font-size:12px}.twin3dFooter span{font-size:12px;color:#3b5a80}.twin3dFooter button:disabled{opacity:.45;cursor:default}.twin3dSelection{margin:13px 16px 0;background:#e4f0ff;border-left:3px solid #4683d7;padding:12px;color:#204e85;font-size:13px;overflow-wrap:anywhere}.twin3dIndex{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;padding:14px 16px 0}.twin3dIndex .twin3dEntry{text-align:left;border:1px solid #d7e3f2;border-left:4px solid var(--entity-color);background:#fff;font-size:12px;padding:10px 12px;overflow-wrap:anywhere;color:#284d76}.twin3dHelp{font-size:11px;color:#69809b;margin:12px 16px 16px;line-height:1.8}.twin3dFallback{padding:40px 25px;color:#765614}.twin3d[data-webgl=unavailable] .twin3dViewport{height:auto;min-height:150px}#classroomDialog:has(.twin3d){max-width:1100px;width:calc(100% - 28px)}#classroomScene .twin3dViewport{height:530px}.twin3dLegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#59728c;margin:12px 0}.twin3dLegend span:before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot);margin-right:6px}.rosterViewControls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}.rosterViewControls label{min-width:170px}@media(max-width:650px){.twin3dBar{padding:13px;align-items:flex-start}.twin3dBrand strong{font-size:11px;letter-spacing:.6px}.twin3dBrand span{font-size:10px;max-width:150px}.twin3dButtons{gap:3px}.twin3dButtons button{padding:5px;min-width:29px;font-size:16px}.twin3dViewport,#classroomScene .twin3dViewport{height:410px}.twin3dIndex{grid-template-columns:1fr;padding:10px}.twin3dFooter{gap:6px;flex-wrap:wrap}.twin3dFooter button{font-size:11px;padding:7px}.twin3dHelp{margin:10px}.rosterViewControls{flex-wrap:wrap}#classroomDialog:has(.twin3d){padding:14px}}
.twin3dViewport{height:620px;container-type:inline-size;overflow:hidden;background:#f4f7fc}.twin3dLabels,.twin3dLeaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.twin3dLeaders{overflow:visible}.twin3dLeaders line{stroke-width:1.1;stroke-opacity:.55}.twin3dLabel{position:absolute;pointer-events:auto;width:174px;padding:10px 12px;border:1.5px solid var(--label-accent);background:#fff;border-radius:11px;box-shadow:0 5px 14px #172d4924;color:#172f4d;text-align:center;line-height:1.4;font-family:Tahoma,Arial,sans-serif;display:flex;flex-direction:column;gap:5px;white-space:normal}.twin3dLabel:hover,.twin3dLabel:focus-visible{background:#fff;border-color:var(--label-accent);box-shadow:0 6px 20px #172d4940;z-index:2;outline:2px solid #2d6ed0;outline-offset:2px}.twin3dLabel.static{pointer-events:none}.twin3dLabel[hidden]{display:none}.twin3dLabelTitle{font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%;color:#152b49}.twin3dLabelCaption{font-size:11px;line-height:1.5;color:#3f5f80;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.twin3dLabelMeta{font-size:10px;color:#536e8b;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.twin3dLabelMetrics{display:flex;gap:4px;justify-content:space-around}.twin3dLabelMetrics>span{display:flex;flex-direction:column;flex:1;min-width:0}.twin3dLabelMetrics>span+span{border-left:1px solid #e1e8f1}.twin3dLabelMetrics b{font-size:18px;line-height:1.2;color:#173858}.twin3dLabelMetrics small{font-size:10px;color:#526b87;line-height:1.6}.twin3dBrand strong{font-size:15px}#classroomScene .twin3dViewport{height:560px}@container(max-width:540px){.twin3dLabel{width:118px;padding:7px 8px;border-radius:8px;gap:0}.twin3dLabelTitle{font-size:11px}.twin3dLabelCaption,.twin3dLabelMeta,.twin3dLabelMetrics{display:none}}@media(max-width:650px){.twin3dViewport,#classroomScene .twin3dViewport{height:450px}.twin3dBrand strong{font-size:11px}}