*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#fff;background-color:#111;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;position:relative}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.ui-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}.ui-header{pointer-events:auto;justify-content:space-between;align-items:center;display:flex}.ui-title{letter-spacing:-.5px;text-shadow:0 2px 10px #00000080;font-size:1.5rem;font-weight:700}.ui-controls{pointer-events:auto;-webkit-backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff1a;border-radius:12px;gap:1rem;padding:1rem;display:flex}.btn{color:#fff;cursor:pointer;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-weight:600;transition:all .2s;display:flex}.btn:hover{background:#ffffff4d;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.hotspot-annotation{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#000000b3;border:1px solid #fff3;border-radius:8px;padding:8px 12px;font-size:.85rem;font-weight:500;transition:all .2s;transform:translate(0,0)}.hotspot-annotation:hover{color:#000;background:#ffffffe6;transform:scale(1.05)}.material-picker{pointer-events:auto;z-index:20;flex-direction:column;gap:1rem;display:flex;position:absolute;top:50%;left:2rem;transform:translateY(-50%)}.color-swatch{cursor:pointer;border:2px solid #fffc;border-radius:12px;width:40px;height:40px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 10px #0000004d}.color-swatch:hover{transform:scale(1.15);box-shadow:0 6px 15px #0006}.color-swatch.active{border:3px solid #fff;transform:scale(1.2)}.step-bar{-webkit-backdrop-filter:blur(10px);pointer-events:auto;z-index:20;background:#00000080;border:1px solid #ffffff1a;border-radius:20px;gap:1rem;padding:1rem 2rem;display:flex;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}.step-btn{color:#fff;cursor:pointer;text-align:center;background:#ffffff1a;border:1px solid #fff3;border-radius:12px;min-width:120px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s}.step-btn:hover{background:#fff3;transform:translateY(-5px)}.step-btn.active{background:#3b82f6;border-color:#60a5fa;transform:translateY(-5px);box-shadow:0 4px 15px #3b82f666}