*{box-sizing:border-box;margin:0;padding:0}.app{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.title{text-align:center;color:#fff;letter-spacing:.1em;padding:1rem;font-size:1.5rem;font-weight:300}.viewer-container{flex:1;width:100%;position:relative}.viewer-container canvas{display:block}.controls{z-index:10;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}.control-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50px;padding:.8rem 2rem;font-size:1rem;font-weight:500;transition:all .3s;box-shadow:0 4px 15px #667eea66}.control-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.control-btn:active{transform:translateY(0)}.legend{z-index:10;background:#0009;border-radius:8px;padding:1rem;position:absolute;top:1rem;right:1rem}.legend-item{color:#fff;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.875rem;display:flex}.legend-item:last-child{margin-bottom:0}.legend-color{border:1px solid #ffffff4d;border-radius:3px;width:16px;height:16px}.legend-label{font-weight:500}