*{box-sizing:border-box;margin:0;padding:0}#login-screen{background:#f5f5f5;justify-content:center;align-items:center;height:100vh;display:flex}.login-box{text-align:center;background:#fff;border:1px solid #e0e0e0;border-radius:12px;width:400px;padding:40px;box-shadow:0 2px 12px #0000000f}.login-logo{width:260px;margin-bottom:8px}.login-box>p{color:#999;margin-bottom:28px;font-size:13px}#login-form{flex-direction:column;gap:12px;display:flex}#login-form input{color:#333;background:#fafafa;border:1px solid #ddd;border-radius:9999px;outline:none;padding:12px 16px;font-size:14px;transition:border-color .2s}#login-form input:focus{border-color:#333}#login-form button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:9999px;margin-top:4px;padding:12px;font-size:15px;font-weight:600;transition:background .2s}#login-form button:hover{background:#111}.login-error{color:#c00;min-height:18px;font-size:13px}body{color:#333;background:#f5f5f5;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{height:100vh;display:flex}#sidebar{background:#fff;border-right:1px solid #e0e0e0;flex-direction:column;gap:14px;width:390px;min-width:390px;padding:20px;display:flex;overflow-y:auto}.sidebar-logo{width:200px;display:block}.logo .subtitle{color:#999;margin-top:6px;font-size:12px}.panel{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:16px}.panel h2{text-transform:uppercase;letter-spacing:1.5px;color:#999;margin-bottom:12px;font-size:11px;font-weight:600}.button-group{gap:6px;display:flex}.button-group button{color:#888;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #ddd;border-radius:9999px;flex:1;padding:10px;font-size:13px;font-weight:500;transition:all .2s}.button-group button:hover{color:#333;border-color:#333}.button-group button.active{color:#fff;background:#333;border-color:#333}.form-group{align-items:center;gap:10px;margin-top:12px;display:flex}.form-group label{color:#777;flex-shrink:0;min-width:110px;font-size:12px}.form-group input[type=range]{-webkit-appearance:none;background:#ddd;border-radius:2px;outline:none;flex:1;height:4px}.form-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#333;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.form-group .value{color:#333;text-align:right;flex-shrink:0;min-width:65px;font-size:13px;font-weight:600}.info-grid{flex-direction:column;gap:6px;display:flex}.info-item{justify-content:space-between;align-items:center;display:flex}.info-label{color:#999;font-size:12px}.info-value{color:#333;font-size:13px;font-weight:600}#viewport{background:#eee;flex:1;position:relative}#canvas{width:100%;height:100%;display:block}#controls-hint{color:#999;pointer-events:none;background:#ffffffe6;border:1px solid #ddd;border-radius:9999px;padding:6px 16px;font-size:12px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}